🚀 重新调整架构

src/api/platform/system/controller/region.ts

@@ -3,38 +3,31 @@
  * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
  * author entfrm开发团队-王翔
  */
-import {AddressParams, AddressItem, AddressItemListResult} from '/@/api/platform/system/entity/region';
+import { RegionParams, Region, RegionResult } from '/@/api/platform/system/entity/region';
 import { defHttp } from '/@/utils/http/axios';
-import { isEmpty } from '/@/utils/is';
 
 enum Api {
-
+    list = '/system_proxy/system/region/list',
-    list = '/system_proxy/system/address/list',
+    lazyList= '/system_proxy/system/region/lazyList',
-    lazyList= '/system_proxy/system/address/lazyList',
+    get = '/system_proxy/system/region',
-    get = '/system_proxy/system/address',
+    add = '/system_proxy/system/region/save',
-    add = '/system_proxy/system/address/add',
+    edit = '/system_proxy/system/region/update',
-    edit = '/system_proxy/system/address/update',
+    del = '/system_proxy/system/region/remove'
-    del = '/system_proxy/system/address/remove'
 }
 
-
+export const listRegion = (params?: Partial<RegionParams>) => {
-
+    let url = Api.lazyList;
-export const listAddr = (params?: Partial<AddressParams>) => {
+    if (params?.name || params?.code || params?.beginTime || params?.endTime) url = Api.list;
-    if (params?.name || params?.id || !isEmpty(params?.dateRange)) {
+    return defHttp.get({ url: url, params });
-        defHttp.get({url: Api.list, params});
-    } else
-        defHttp.get({url: Api.lazyList, params});
 };
 
-/**新增 */
+export const listRegionAll = () => defHttp.get({ url: Api.list });
-export const addAddr  =(params:Partial<AddressItem>) =>defHttp.post({url:Api.add,data:params});
+
+export const addRegion  =(params:Partial<Region>) => defHttp.post({ url: Api.add,data:params });
 
-/**修改 */
+export const editRegion  =(params:Partial<Region>) => defHttp.put({ url: Api.edit,data:params });
-export const editAddr  =(params:Partial<AddressItem>) =>defHttp.put({url:Api.edit,data:params});
 
-/**查询详细 */
+export const getRegion = (id: string) => defHttp.get<Region>({ url: `${Api.get}/${id}` });
-export const getAddr = (id: string) => defHttp.get<AddressItem>({ url: `${Api.get}/${id}` });
 
-/**删除 */
+export const delRegion = (id: string) => defHttp.delete({ url: `${Api.del}/${id}` });
-export const delAddr = (id: string) => defHttp.delete({ url: `${Api.del}/${id}` });
 

src/api/platform/system/entity/region.ts

@@ -1,29 +1,20 @@
-// 引入基础包
+/**
-import type { R } from '/#/axios';
+ * @program: kicc-ui
-import type { CommonEntity,Page } from '/@/api/common/data/entity';
+ * @description: 区域实体类
+ * 类型定义
+ * @author: entfrm开发团队-王翔
+ * @create: 2022/4/8
+ */
 
-export type AddressParams =AddressItem & Page;
+import type { R } from '/#/axios';
+import type { TreeEntity, Page } from '/@/api/common/data/entity';
 
+export type RegionParams = Region & Page;
 
-export interface AddressItem extends CommonEntity{
+export interface Region extends TreeEntity {
-    id: string;
-    parentId: string;
     code: string;
-    sort: number;
+    level: number;
-    name: string;
-
-
-
-    // level: number;
-    // lastLevel: boolean;
-    //level?:string;
-    // beginTime?: string;
-    // endTime?: string;
-
-
     [key: string]: any
-
-
 }
 
-export type AddressItemListResult = R<AddressItem[]>;
+export type RegionResult = R<Region[]>;

src/views/system/region/RegionModal.vue

@@ -16,11 +16,10 @@
    */
   import { ref, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { addressFormSchema } from './region.data';
+  import { regionFormSchema } from './region.data';
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
-  import { listAddr, addAddr, editAddr, getAddr} from '/@/api/platform/system/controller/region';
+  import { listRegionAll, addRegion, editRegion, getRegion } from '/@/api/platform/system/controller/region';
   import { listToTree } from '/@/utils/helper/treeHelper';
-  import {AddressItem} from '/@/api/platform/system/entity/region';
 
   /** 通用变量统一声明区域 */
   const tag = ref<Nullable<string>>('');
@@ -28,61 +27,42 @@
   const emit = defineEmits(['success', 'register']);
   const [registerForm, { resetFields, setFieldsValue, updateSchema, validate, clearValidate }] = useForm({
     labelWidth: 100,
-    schemas: addressFormSchema,
+    schemas: regionFormSchema,
     showActionButtonGroup: false,
     baseColProps: { span: 24 }
   });
   const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data: WindowInnerData = { _tag: '' }) => {
+    setModalProps({ loading: true } as Partial<ModalProps>);
     // 处理清除脏数据
     await resetFields();
     await clearValidate();
     // 处理设置数据
-
-
     tag.value = data._tag;
-    const topAddr = { id: '0', name: '一级区域', children: [] };
+    const topRegion = { id: '0', name: '顶级区域', children: [] };
-    topAddr.children = listToTree(await listAddr());
+    topRegion.children = listToTree(await listRegionAll());
     await updateSchema({
       field: 'parentId',
       componentProps: {
-        treeData: [topAddr]
+        treeData: [topRegion]
       }
     });
-    await updateSchema({
+    const regionId = data.record?.id;
-      field: 'id',
+    const props: Partial<ModalProps> = { confirmLoading: false, loading: false };
-      componentProps: {
-        disabled: tag.value == 'edit'
-      },
-    });
-
-    const addrId = data.record?.id;
-    const props: Partial<ModalProps> = { confirmLoading: false };
     // 采用tag标签区分操作
     switch (unref(tag)) {
       case 'add':
-        props.title = '新增地址';
+        props.title = '新增区域';
-        addrId && await setFieldsValue({ parentId: addrId });
+        regionId && await setFieldsValue({ parentId: regionId });
         break;
       case 'edit':
-        props.title = '编辑地址';
+        props.title = '编辑区域';
-        await setFieldsValue(await getAddr(addrId));
+        await setFieldsValue(await getRegion(regionId));
         break;
     }
-
-
-
-
-
-
-
-
-
     // 尾部:设置处理后的最终配置数据
     setModalProps(props);
   });
 
-
-
   /** 处理弹出框提交 */
   async function handleSubmit() {
     try {
@@ -93,10 +73,10 @@
       // 采用tag标签区分操作
       switch (unref(tag)) {
         case 'add':
-          await addAddr(formData);
+          await addRegion(formData);
           break;
         case 'edit':
-          await editAddr(formData);
+          await editRegion(formData);
           break;
       }
       // 处理提交完成之后逻辑

src/views/system/region/index.vue

@@ -5,35 +5,25 @@
                 @expand="onExpandClick"
     >
       <template #toolbar>
-        <a-button
+        <a-button type="primary"
-          type="primary"
+                  @click="handleAdd()"
-          @click="handleAdd()"
+        >新增区域</a-button>
-        >新增地址</a-button>
-        <a-button type="default"
-                  @click="expandAll"
-        >展开全部</a-button>
-        <a-button type="default"
-                  @click="collapseAll"
-        >折叠全部</a-button>
       </template>
       <template #action="{ record }">
         <TableAction :actions="[
           {
             label: '编辑',
             icon: 'fa6-regular:pen-to-square',
-
             onClick: handleEdit.bind(null, record)
           },
           {
             label: '新增',
             icon: 'ant-design:plus-circle-outlined',
-
             onClick: handleAdd.bind(null, record)
           },
           {
             label: '删除',
             icon: 'ant-design:delete-outlined',
-
             color: 'error',
             popConfirm: {
               title: '是否确认删除',
@@ -43,92 +33,78 @@
         />
       </template>
     </BasicTable>
-    <DeptModal @register="registerModal" @success="handleRefreshTable"/>
+    <RegionModal @register="registerModal" @success="handleRefreshTable"/>
   </div>
 </template>
 <script lang="ts" setup>
-/**
+  /**
- * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
+   * 提供模板规范代码参考,请尽量保证编写代码风格跟模板规范代码一致
- * 采用vben-动态表格表单封装组件编写,采用 setup 写法
+   * 采用vben-动态表格表单封装组件编写,采用 setup 写法
- * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
+   * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
- * author entfrm开发团队-王翔
+   * author entfrm开发团队-王翔
- */
+   */
-import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { useModal } from '/@/components/Modal';
+  import { useModal } from '/@/components/Modal';
-import DeptModal from './RegionModal.vue';
+  import RegionModal from './RegionModal.vue';
-import { columns, searchFormSchema } from './region.data';
+  import { columns, searchFormSchema } from './region.data';
-import {delAddr, getAddr, listAddr} from '/@/api/platform/system/controller/region';
+  import { delRegion, listRegion } from '/@/api/platform/system/controller/region';
-import { useMessage } from '/@/hooks/web/useMessage';
+  import { useMessage } from '/@/hooks/web/useMessage';
-import { listToTree } from '/@/utils/helper/treeHelper';
-
-/** 通用变量统一声明区域 */
-const { createMessage } = useMessage();
-const [registerModal, { openModal }] = useModal();
-const [registerTable, { reload, expandAll, collapseAll,getDataSource }] = useTable({
-  title: '地址列表',
-  api: listAddr,
-  rowKey: 'id',
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-    autoSubmitOnEnter: true,
-    fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
-  },
-  isTreeTable: true,
-  pagination: false,
-  striped: false,
-  useSearchForm: true,
-  showTableSetting: true,
-  bordered: true,
-  showIndexColumn: false,
-  canResize: false,
-  actionColumn: {
-    width: 250,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: false
-  },
-  // afterFetch: (result) => listToTree(result, { id: 'id' }),
-  searchInfo: {parentId: '0'}
-});
 
+  /** 通用变量统一声明区域 */
+  const { createMessage } = useMessage();
+  const [registerModal, { openModal }] = useModal();
+  const [registerTable, { reload, getDataSource }] = useTable({
+    title: '区域列表',
+    api: listRegion,
+    rowKey: 'id',
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+      autoSubmitOnEnter: true,
+      fieldMapToTime: [['dateRange', ['beginTime', 'endTime'], 'YYYY-MM-DD']]
+    },
+    isTreeTable: true,
+    pagination: false,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    canResize: false,
+    actionColumn: {
+      width: 250,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: false
+    },
+    searchInfo: { parentId: '0' }
+  });
 
   function onExpandClick(e, info) {
-    let reqObj = {
+    listRegion({ parentId: info.id }).then((res) => info.children = res);
-      parentId: info.id, // 点击的ID
-    };
-    listAddr(reqObj).then((res) => {
-      getDataSource().forEach((item) =>{  //重点，根据点击的ID相等，将children 赋值给对应的一级菜单
-        if(info.id == item.id){
-          item.children = res;
-        }
-      });
-    });
   }
 
+  /** 新增按钮操作,行内新增与工具栏局域新增通用 */
+  function handleAdd(record?: Recordable) {
+    openModal(true,{ _tag: 'add', record });
+  }
 
-/** 新增按钮操作,行内新增与工具栏局域新增通用 */
+  /** 编辑按钮操作,行内编辑 */
-function handleAdd(record?: Recordable) {
+  function handleEdit(record: Recordable) {
-  openModal(true,{ _tag: 'add', record });
+    openModal(true, { _tag: 'edit', record });
-}
+  }
-
-/** 编辑按钮操作,行内编辑 */
-function handleEdit(record: Recordable) {
-  openModal(true, { _tag: 'edit', record });
-}
-
-/** 删除按钮操作,行内删除 */
-async function handleDel(record: Recordable) {
-  await delAddr(record.id);
-  createMessage.success('删除成功!');
-  handleRefreshTable();
-}
 
-/** 处理表格刷新 */
+  /** 删除按钮操作,行内删除 */
-function handleRefreshTable() {
+  async function handleDel(record: Recordable) {
-  reload();
+    await delRegion(record.id);
-}
+    createMessage.success('删除成功!');
+    handleRefreshTable();
+  }
 
+  /** 处理表格刷新 */
+  function handleRefreshTable() {
+    reload();
+  }
 </script>

src/views/system/region/region.data.ts

@@ -1,133 +1,117 @@
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
-import {h} from 'vue';
-import {Tag} from 'ant-design-vue';
-
-
 
 export const columns: BasicColumn[] = [
-    {
+  {
-        title: '区域ID',
+    title: '区域名称',
-        dataIndex: 'id',
+    dataIndex: 'name',
-        width: 50,
+    align: 'left'
-    },
+  },
-    {
+  {
-        title: '区域名称',
+    title: '区域编码',
-        dataIndex: 'name',
+    dataIndex: 'code'
-        width: 120,
+  },
-    },
+  {
-    {
+    title: '区域排序',
-        title: '排序',
+    dataIndex: 'sort'
-        dataIndex: 'sort',
+  },
-        width:50
+  {
-    },
+    title: '创建时间',
-    {
+    dataIndex: 'createTime',
-        title: '创建时间',
+    width:200
-        dataIndex: 'createTime',
+  },
-        width:200
+  {
-      },
+    title: '备注',
-    
+    dataIndex: 'remarks'
+  },
 ];
 
 export const searchFormSchema: FormSchema[] = [
-    {
+  {
-        field: 'name',
+    field: 'name',
-        label: '区域名称',
+    label: '区域名称',
-        component: 'Input',
+    component: 'Input',
-        componentProps: {
+    componentProps: {
-            placeholder: '请输入区域名称',
+      placeholder: '请输入区域名称',
-        },
-        colProps: { span: 5 },
     },
-    {
+    colProps: { span: 8 }
-        field:'id',
+  },
-        label:'区域ID',
+  {
-        component:'Input',
+    field:'code',
-        componentProps:{
+    label:'区域编码',
-            placeholder:'请输入区域ID',
+    component:'Input',
-        },
+    componentProps:{
-        colProps:{span:5}
+      placeholder:'请输入区域编码',
     },
-    {
+    colProps:{ span:7 }
-        field: 'dateRange',
+  },
-        label: '创建时间',
+  {
-        component: 'RangePicker',
+    field: 'dateRange',
-        componentProps: {
+    label: '创建时间',
-          style: { width:'100%' },
+    component: 'RangePicker',
-          valueFormat: 'YYYY-MM-DD',
+    componentProps: {
-          placeholder: ['开始日期','结束日期']
+      style: { width:'100%' },
-        },
+      valueFormat: 'YYYY-MM-DD',
-        colProps: { span: 8 }
+      placeholder: ['开始日期','结束日期']
-      },
+    },
-    
+    colProps: { span: 8 }
+  }
 ];
-/*表单配置*/ 
-export const addressFormSchema: FormSchema[] = [
-    //    {
-    //     field: 'parentId',
-    //     label: '地区',
-    //     component: 'ApiTreeSelect',
-    //     //component: 'TreeSelect',
-    //     //defaultValue:'一级区域',
-    //     componentProps: {
-    //         api: treeList,
-    //         resultField: 'list',
-    //         labelField: 'name',
-    //         valueField: 'code',
-    //         // ReplaceFields:{
-    //         //     title: 'name',
-    //         //     key: 'code',
-    //         //     value: 'code'
-    //         // }
-    //     },
-    //     required: true,
-    // },
-    //
-    {
-        field: 'parentId',
-        label: '上级地区',
-        component: 'TreeSelect',
-        defaultValue: '0',
-        required: true,
-        componentProps:{
-            replaceFields: {
-                title: 'name',
-                key: 'id',
-                value: 'id',
-        },
 
-        getPopupContainer: () => document.body,
+export const regionFormSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: 'ID',
+    component: 'Input',
+    show: false
+  },
+  {
+    field: 'parentId',
+    label: '上级区域',
+    component: 'TreeSelect',
+    defaultValue: '0',
+    componentProps: {
+      replaceFields: {
+        title: 'name',
+        key: 'id',
+        value: 'id'
+      },
+      getPopupContainer: () => document.body,
     }
+  },
+  {
+    field: 'name',
+    label: '区域名称',
+    component: 'Input',
+    required: true,
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'code',
+    label: '区域编码',
+    component: 'Input',
+    colProps: {
+      span: 12
+    }
+  },
+  {
+    field: 'sort',
+    label: '区域排序',
+    component: 'InputNumber',
+    componentProps: {
+      style: { width:'100%' },
+      min: 0
     },
-    {
+    required: true,
-        field: 'id',
+    colProps: {
-        label: '区域ID',
+      span: 12
-        component: 'Input',
-        helpMessage: ['区域ID'],
-        required: true
-    },
-    // {
-    //     field: 'code',
-    //     label: '区域编码',
-    //     component: 'Input',
-    //     required: true,
-    //
-    // },
-    {
-        field:'sort',
-        label:'排序',
-        component:'Input',
-        required:true
-    },
-    {
-        label: '区域名称',
-        field: 'name',
-        component: 'Input',
-    },
- 
-    {
-        label: '备注',
-        field: 'remarks',
-        component: 'InputTextArea',
     }
-];
+  },
+  {
+    label: '备注',
+    field: 'remarks',
+    component: 'InputTextArea',
+  }
+];