fix : 人员组件和组织结构组件改为懒加载模式

src/views/system/organizationalStructure/index.vue

@@ -2,27 +2,29 @@
   <div class="organization-layout">
     <div class="layout-left">
       <div class="candidate" v-loading="loading">
-        <el-form :model="queryType" @submit.prevent="getList(1)">
+        <el-form :model="queryType" @submit.prevent="getList">
           <el-form-item prop="dictName">
-            <el-input v-model="queryType.chooseName" @change="getList(1)"
+            <el-input v-model="queryType.chooseName" @change="getList"
                       clearable placeholder="输入公司或部门名称进行搜索">
               <template #append>
-                <el-button @click="getList(1)">搜索</el-button>
+                <el-button @click="getList">搜索</el-button>
               </template>
             </el-input>
           </el-form-item>
         </el-form>
-        <el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
         <el-scrollbar>
           <div class="tree scrollbar-dict">
             <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
-                     :default-expanded-keys="expandedKeys" default-expand-all
+                     :default-expanded-keys="expandedKeys" :lazy="true" :load="handleLoad"
-                     @node-click="handleClick" @node-expand="handleClick">
+                     @node-expand="handleNodeExpand" @node-click="handleClick"
+            >
               <template #default="{ node, data }">
                 <div class="tree-node">
-                  <div style="display: flex;align-items: center;padding: 3px 0;" :class="data.value === selectNodeKey ? 'highlight': ''">
+                  <div style="display: flex;align-items: center;padding: 3px 0;"
+                       :class="data.value === selectNodeKey ? 'highlight': ''">
                     <svg-icon name="oran" v-if="data.type===0" class-name="oran-icon"/>
-                    <el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'" style="margin-right: 4px;">
+                    <el-icon v-else-if="data.type===1" :color="data.matrix?'#67C23A':'#fa3534'"
+                             style="margin-right: 4px;">
                       <FolderOpened/>
                     </el-icon>
                     {{ data.organizationalStructureName }}
@@ -36,7 +38,7 @@
     </div>
     <div class="layout-right">
       <depart-component v-if="showDept" v-model:value="deptId"/>
-      <company-detail v-if="showCompany"  v-model:value="companyId"></company-detail>
+      <company-detail v-if="showCompany" v-model:value="companyId"></company-detail>
       <!--      <department v-if="selectItem.type===2" :id="selectItem.value"></department>-->
     </div>
   </div>
@@ -53,12 +55,10 @@ import CompanyDetail from "@/components/organizationalStructure/CompanyDetail.vu
 const queryType = reactive({
   chooseName: ""
 });
-const chooseId = ref(0);
 const deptId = ref(0);
 const companyId = ref(0);
 const showDept = ref(false);
 const showCompany = ref(false);
-const organizationStructureType = ref(0);
 let selectItem = reactive({
   type: -1,
   value: "0"
@@ -67,16 +67,12 @@ const loading = ref(false);
 const dataList = ref([]);
 const tree = ref([]);
 const selectNodeKey = ref("")
-const isSearch = ref(false);
 const expandedKeys = ref([]);
 const defaultProps = {
   value: "value",
   label: "organizationalStructureName",
   children: "children",
   isLeaf: (data) => {
-    // if (data.isLeaf) {
-    //   return true
-    // }
   }
 };
 const emit = defineEmits();
@@ -90,39 +86,18 @@ const _value = computed({
   }
 });
 
-const getList = (flag, type) => {
+const getList = () => {
-  let params = {}
+  let params = {
-  if (flag === 1) {
+    chooseId: 0,
-    isSearch.value = true;
+    type: 0,
-    params = {
+    chooseName: queryType.chooseName
-      chooseId: 0,
-      type: 0,
-      chooseName: queryType.chooseName
-    }
-    selectItem = {
-      type: -1,
-      value: "0"
-    };
-  } else {
-    params = {
-      chooseId: chooseId.value,
-      type: organizationStructureType.value,
-      chooseName: queryType.chooseName
-    }
   }
+  selectItem = {
+    type: -1,
+    value: "0"
+  };
   getOrganizationStructure(params).then(res => {
-    if (selectItem.type === -1) {
+    dataList.value = res.data;
-      dataList.value = res.data;
-    } else if (type === 2) {
-      selectItem.children = [...res.data]
-      if (res.data.length === 0) {
-        selectItem.isLeaf = true
-        //   selectItem.children = [{
-        //     type: 2
-        //   }
-      }
-    }
-    console.log(selectItem.children,"selectItem.children")
   });
 };
 const init = () => {
@@ -131,11 +106,30 @@ const init = () => {
     value: "0"
   };
   dataList.value = [];
-  chooseId.value = 0;
   expandedKeys.value = [];
   queryType.chooseName = ""
-  getList();
 };
+
+async function handleLoad(node, resolve, reject) {
+  let data = node.data
+  let params
+  if (data.organizationalStructureId) {
+    params = {
+      chooseId: data.organizationalStructureId,
+      type: data.type
+    }
+  } else {
+    params = {
+      chooseId: 0,
+      type: 0,
+    }
+  }
+  let result = await getOrganizationStructure(params).then(res => {
+    return res.data
+  })
+  resolve(result)
+}
+
 const handleClick = (item, data) => {
   selectNodeKey.value = item.value
   if (item.type === 1) {
@@ -145,41 +139,25 @@ const handleClick = (item, data) => {
       showDept.value = true
     })
     deptId.value = item.organizationalStructureId
-  }else{
+  } else {
     showDept.value = false
     showCompany.value = false
     nextTick(() => {
       showCompany.value = true
     })
-    companyId.value=item.organizationalStructureId
+    companyId.value = item.organizationalStructureId
   }
   selectItem = item;
-  if (isSearch.value) {
-    queryType.chooseName = ""
-    chooseId.value = item.organizationalStructureId;
-    getList('', 2);
-    return;
-  } else {
-    //渲染子节点用户或部门及用户数据
-    if (data.expanded) {
-      if (expandedKeys.value.indexOf(item.value) === -1) {
-        expandedKeys.value.push(item.value);
-        organizationStructureType.value = item.type
-        chooseId.value = item.organizationalStructureId;
-        getList('', 2);
-        return;
-      }
-    }
-  }
 };
 init()
 
 </script>
 <style lang="scss" scoped>
-.highlight{
+.highlight {
   color: black; //节点的字体颜色
   font-weight: bold;
 }
+
 $containWidth: 550px;
 .organization-layout {
   display: flex;

src/views/workflow/process/common/UserPicker.vue

@@ -4,19 +4,18 @@
              :destroy-on-close="true">
     <div class="picker">
       <div class="candidate" v-loading="loading">
-        <el-input v-model="filterText" @change="getList(1)"
+        <el-input v-model="filterText" @change="getList"
                   clearable placeholder="输入昵称进行搜索">
           <template #append>
-            <el-button @click="getList(1)">搜索</el-button>
+            <el-button @click="getList">搜索</el-button>
           </template>
         </el-input>
         <!-- 人员选择 -->
-        <el-empty :image-size="100" description="似乎没有数据" v-show="dataList.length === 0"/>
         <el-scrollbar style="height:90%;">
           <div class="tree">
             <el-tree :data="dataList" ref="tree" :props="defaultProps" empty-text="" node-key="value"
-                     :default-expanded-keys="expandedKeys" default-expand-all accordion
+                     :default-expanded-keys="expandedKeys" lazy :load="loadNode" accordion
-                     @node-click="handleChange" @node-expand="handleChange">
+                     @node-click="handleClick">
               <template #default="{ node, data }">
                 <div class="tree-node">
                   <div v-if="data.type === 0" style="display: flex;align-items: center;padding: 3px 0">
@@ -100,12 +99,10 @@ const props = defineProps({
   }
 });
 const radio = ref(0);
-const chooseId = ref(0);
 let selectItem = reactive({
   type: -1,
   value: "0"
 });
-const activeNames = ref(["1"]);
 const visible = ref(false);
 const loading = ref(false);
 const title = ref("请选择");
@@ -140,56 +137,15 @@ watch(() => filterText.value, (newVal) => {
   filterText.value = newVal
 });
 
-const getList = (flag) => {
+const getList = () => {
-  let params = {}
+  let params = {
-  if (flag === 1) {
+    chooseId: 0,
-    isSearch.value = true;
+    chooseName: filterText.value
-    params = {
-      chooseId: 0,
-      chooseName: filterText.value
-    }
-    selectItem = {
-      type: -1,
-      value: "0"
-    };
-  } else {
-
-    params = {
-      chooseId: radio.value,
-      chooseName: filterText.value
-    }
   }
   getMosrUser(params).then(res => {
-    // if (res.data) {
+    dataList.value = res.data;
-    if (selectItem.type === -1) {
-      dataList.value = res.data;
-    } else if (selectItem.type === 1) {
-      selectItem.children = res.data;
-      if (res.data.length === 0) {
-        selectItem.children = [{
-          type: 1,
-          name: '暂无数据'
-        }]
-      }
-    } else if (selectItem.type === 2) {
-      selectItem.children = res.data;
-    }
-    // }
   });
 };
-
-const setData = (source) => {
-  // for (let item of source) {
-  //   this.$set(item, "value", selectItem.value + "-" + item.id)
-  // }
-  return source;
-};
-
-//通过关键字过滤树节点
-// filterNode(value, data) {
-//   if (!value) return true;
-//   return data.name.indexOf(value) !== -1;
-// },
 //用于用户选择
 const showUserPicker = () => {
   selectItem = {
@@ -197,26 +153,41 @@ const showUserPicker = () => {
     value: "0"
   };
   dataList.value = [];
-  // console.log('_value.value',_value.value)
+  selectList.value = _value.value
-  // if(props.setNullToSelectList){
-  //   selectList.value = []
-  // }else {
-
-    selectList.value =_value.value
-  // }
-  chooseId.value = 0;
   radio.value = 0;
   visible.value = true;
   expandedKeys.value = [];
   filterText.value = ''
-  getList();
 };
-const handleChange = (item, data) => {
+
+async function loadNode(node, resolve) {
+  let data = node.data
+  let params = {}
+  if (data.id) {
+    params = {
+      chooseId: data.id
+    }
+  } else {
+    params = {
+      chooseId: 0
+    }
+  }
+  let result = await getMosrUser(params).then(res => {
+    if (res.data.length === 0) {
+      return []
+    } else {
+      return res.data
+    }
+  })
+  resolve(result)
+}
+
+
+const handleClick = (item, data) => {
   selectItem = item;
   if (isSearch.value && item.type !== 0) {
     filterText.value = ""
     radio.value = item.id;
-    getList();
     return;
   } else if (!isSearch.value) {
     //渲染子节点用户或部门及用户数据
@@ -225,25 +196,12 @@ const handleChange = (item, data) => {
         expandedKeys.value.push(item.value);
         if (item.type !== 0) {
           radio.value = item.id;
-          getList();
           return;
         }
       }
     }
   }
 
-  // if(expandedKeys.value.indexOf(item.value)==-1){
-  //   expandedKeys.value.push(item.value);
-  // }else {
-  //   if (data.expanded === true) {
-  //     if (item.type !== 0) {
-  //       chooseId.value = item.id;
-  //       getList();
-  //       return;
-  //     }
-  //   }
-  // }
-
   //仅选择用户
   if (item.type === 0) {
     if (props.multiple) {
@@ -259,7 +217,6 @@ const handleChange = (item, data) => {
       selectList.value = [item];
     }
   }
-  // _value = selectList.value
 };
 
 const noSelected = (selectItem) => {
@@ -284,22 +241,22 @@ const clearSelected = () => {
 };
 const selectConfirm = () => {
   //确定按钮
-  if (props.checkMatrix){
+  if (props.checkMatrix) {
-    checkMatrix(selectList.value[0].id).then(res=>{
+    checkMatrix(selectList.value[0].id).then(res => {
       console.log(res)
-      if (res.code === 2000){
+      if (res.code === 2000) {
         ElNotification({
           title: '提示',
           message: res.msg,
           type: 'error'
         })
-      }else {
+      } else {
         emit("ok", selectList.value);
         dataList.value = []
         visible.value = false;
       }
     })
-  }else {
+  } else {
     emit("ok", selectList.value);
     dataList.value = []
     visible.value = false;