区域管理懒加载

.env.development

@@ -4,7 +4,7 @@ VITE_PUBLIC_PATH = /
 # 本地开发代理，可以解决跨域及多地址代理
 # 如果接口地址匹配到，则会转发到http://localhost:3000，防止本地出现跨域问题
 # 可以有多个，注意多个不能换行，否则代理将会失效
-VITE_PROXY = [["/api","http://192.168.3.10:9999"],["/upload","http://192.168.3.10:9999/system_proxy/system/file/upload"]]
+VITE_PROXY = [["/api","http://localhost:9999"],["/upload","http://localhost:9999/system_proxy/system/file/upload"]]
 
 # 是否删除console.log
 VITE_DROP_CONSOLE = false

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

@@ -3,36 +3,35 @@
  * Copyright © 2020-2022 <a href="http://www.entfrm.com/">entfrm</a> All rights reserved.
  * author entfrm开发团队-王翔
  */
-import {AddressParams,AddressItem} from '/@/api/platform/system/entity/addressModel';
+import {AddressParams, AddressItem, AddressItemListResult} from '/@/api/platform/system/entity/addressModel';
 import { defHttp } from '/@/utils/http/axios';
-
+import { isEmpty } from '/@/utils/is';
 
 enum Api {
-    get = '/system_proxy/system/address',
+
-    QueryById = '/system_proxy/system/address/query',
     list = '/system_proxy/system/address/list',
-    QueryByParentIds = '/system_proxy/system/address/queryByParentIds',
+    lazyList= '/system_proxy/system/address/lazyList',
+    get = '/system_proxy/system/address',
     add = '/system_proxy/system/address/add',
     edit = '/system_proxy/system/address/update',
     del = '/system_proxy/system/address/remove'
 }
 
-export const queryById = (params: { id: String }) =>
-    defHttp.get<AddressItem>({url: Api.QueryById + `/${params.id}`});
 
-export const treeList = (params: AddressParams) =>  defHttp.get({url: Api.list, params});
 
-export const listAddr = (params?: Partial<AddressParams>) =>
+export const listAddr = (params?: Partial<AddressParams>) => {
-    defHttp.get({url: Api.list, params});
+    if (params?.name || params?.id || !isEmpty(params?.dateRange)) {
+        defHttp.get({url: Api.list, params});
+    } else
+        defHttp.get({url: Api.lazyList, params});
+};
+
 /**新增 */
 export const addAddr  =(params:Partial<AddressItem>) =>defHttp.post({url:Api.add,data:params});
 
 /**修改 */
 export const editAddr  =(params:Partial<AddressItem>) =>defHttp.put({url:Api.edit,data:params});
 
-export const queryByParentIds = (params) =>
-    defHttp.get({url: Api.QueryByParentIds + `/${params}`});
-
 /**查询详细 */
 export const getAddr = (id: string) => defHttp.get<AddressItem>({ url: `${Api.get}/${id}` });
 

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

@@ -8,16 +8,19 @@ export type AddressParams =AddressItem & Page;
 export interface AddressItem extends CommonEntity{
     id: string;
     parentId: string;
-    //level?:string;
+    code: string;
     sort: number;
     name: string;
+
+
+
+    // level: number;
+    // lastLevel: boolean;
+    //level?:string;
     // beginTime?: string;
     // endTime?: string;
-    code: string;
 
-    // level: number;
 
-    // lastLevel: boolean;
     [key: string]: any
 
 

src/views/institution/address/AddressModal.vue

@@ -1,8 +1,10 @@
 <template>
   <BasicModal v-bind="$attrs"
               width="720px"
+              :tree-data="treeData"
               @ok="handleSubmit"
               @register="registerModal"
+              :load-data="onLoadData"
   >
     <BasicForm @register="registerForm"/>
   </BasicModal>
@@ -20,7 +22,7 @@
   import { BasicModal, ModalProps, useModalInner } from '/@/components/Modal';
   import { listAddr, addAddr, editAddr, getAddr} from '/@/api/platform/system/controller/address';
   import { listToTree } from '/@/utils/helper/treeHelper';
-  import {isEmpty} from '/@/utils/is';
+  import {AddressItem} from '/@/api/platform/system/entity/addressModel';
 
   /** 通用变量统一声明区域 */
   const tag = ref<Nullable<string>>('');
@@ -37,6 +39,8 @@
     await resetFields();
     await clearValidate();
     // 处理设置数据
+
+
     tag.value = data._tag;
     const topAddr = { id: '0', name: '一级区域', children: [] };
     topAddr.children = listToTree(await listAddr());
@@ -66,10 +70,21 @@
         await setFieldsValue(await getAddr(addrId));
         break;
     }
+
+
+
+
+
+
+
+
+
     // 尾部:设置处理后的最终配置数据
     setModalProps(props);
   });
 
+
+
   /** 处理弹出框提交 */
   async function handleSubmit() {
     try {

src/views/institution/address/address.data.ts

@@ -7,8 +7,8 @@ import {Tag} from 'ant-design-vue';
 
 export const columns: BasicColumn[] = [
     {
-        title: '区域编码',
+        title: '区域ID',
-        dataIndex: 'code',
+        dataIndex: 'id',
         width: 50,
     },
     {
@@ -40,11 +40,11 @@ export const searchFormSchema: FormSchema[] = [
         colProps: { span: 5 },
     },
     {
-        field:'code',
+        field:'id',
-        label:'区域编码',
+        label:'区域ID',
         component:'Input',
         componentProps:{
-            placeholder:'请输入区域编码',
+            placeholder:'请输入区域ID',
         },
         colProps:{span:5}
     },
@@ -67,7 +67,7 @@ export const addressFormSchema: FormSchema[] = [
     //     field: 'parentId',
     //     label: '地区',
     //     component: 'ApiTreeSelect',
-    //     //component: 'TreeSelect', 
+    //     //component: 'TreeSelect',
     //     //defaultValue:'一级区域',
     //     componentProps: {
     //         api: treeList,
@@ -95,7 +95,7 @@ export const addressFormSchema: FormSchema[] = [
                 key: 'id',
                 value: 'id',
         },
-       
+
         getPopupContainer: () => document.body,
     }
     },
@@ -106,13 +106,13 @@ export const addressFormSchema: FormSchema[] = [
         helpMessage: ['区域ID'],
         required: true
     },
-    {
+    // {
-        field: 'code',
+    //     field: 'code',
-        label: '区域编码',
+    //     label: '区域编码',
-        component: 'Input',
+    //     component: 'Input',
-        required: true,
+    //     required: true,
-
+    //
-    },
+    // },
     {
         field:'sort',
         label:'排序',

src/views/institution/address/index.vue

@@ -1,7 +1,9 @@
 
 <template>
   <div>
-    <BasicTable @register="registerTable">
+    <BasicTable @register="registerTable"
+                @expand="onExpandClick"
+    >
       <template #toolbar>
         <a-button
           type="primary"
@@ -62,8 +64,8 @@ import { listToTree } from '/@/utils/helper/treeHelper';
 /** 通用变量统一声明区域 */
 const { createMessage } = useMessage();
 const [registerModal, { openModal }] = useModal();
-const [registerTable, { reload, expandAll, collapseAll }] = useTable({
+const [registerTable, { reload, expandAll, collapseAll,getDataSource }] = useTable({
-  title: '项目列表',
+  title: '地址列表',
   api: listAddr,
   rowKey: 'id',
   columns,
@@ -88,9 +90,25 @@ const [registerTable, { reload, expandAll, collapseAll }] = useTable({
     slots: { customRender: 'action' },
     fixed: false
   },
-  afterFetch: (result) => listToTree(result, { id: 'id' })
+  // afterFetch: (result) => listToTree(result, { id: 'id' }),
+  searchInfo: {parentId: '0'}
 });
 
+
+  function onExpandClick(e, info) {
+    let reqObj = {
+      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 });