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

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
-                     @node-click="handleChange" @node-expand="handleChange">
+                     :default-expanded-keys="expandedKeys" lazy :load="loadNode" accordion
+                     @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) => {
-  let params = {}
-  if (flag === 1) {
-    isSearch.value = true;
-    params = {
-      chooseId: 0,
-      chooseName: filterText.value
-    }
-    selectItem = {
-      type: -1,
-      value: "0"
-    };
-  } else {
-
-    params = {
-      chooseId: radio.value,
-      chooseName: filterText.value
-    }
+const getList = () => {
+  let params = {
+    chooseId: 0,
+    chooseName: filterText.value
   }
   getMosrUser(params).then(res => {
-    // if (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;
-    }
-    // }
+    dataList.value = 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)
-  // if(props.setNullToSelectList){
-  //   selectList.value = []
-  // }else {
-
-    selectList.value =_value.value
-  // }
-  chooseId.value = 0;
+  selectList.value = _value.value
   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){
-    checkMatrix(selectList.value[0].id).then(res=>{
+  if (props.checkMatrix) {
+    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;