搜索查询结果API联调

 <!--
  * @Date: 2023-11-01 10:18:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-23 10:24:27
+ * @LastEditTime: 2023-11-23 16:00:07
  * @FilePath: /vue-flow-editor/doc/selectUserView.vue
  * @Description: 成员列表选择控件
 -->
@@ -71,7 +71,6 @@
               </template>
               <template #append>
                 <div class="search-group">
-                  <!-- <div class="confirm-btn" @click="onSearch">搜索</div> -->
                   <div class="cancel-btn" @click="onClearSearch">关闭</div>
                 </div>
               </template>
@@ -193,25 +192,69 @@
         </div>
       </div>
       <div v-else style="height: 300px; overflow: scroll;">
-        <el-checkbox-group
-          class="flow-checkbox-group"
-          style="padding-left: 10px;"
-          v-model="checkedSearchUserList"
+        <div v-if="searchUserList.dept">
+          <div style="margin-top: 5px;">部门</div>
+          <template
+            v-if="searchUserList.dept.length"
+            v-for="(dept, idx) in searchUserList.dept"
+            :key="idx"
+          >
+            <el-checkbox
+              style="width: 98%; margin-left: 2%;"
+              :model-value="dept.checked"
+              :checked="dept.checked"
+              :label="dept.id"
+              @change="handleCheckedUserListChange(dept, $event)"
+              >
+              {{ dept.name }}
+            </el-checkbox>
+          </template>
+          <template v-else>
+            <div style="font-size: 12px; color: gray; margin-top: 5px; margin-left: 2%;">暂无相关部门</div>
+          </template>
+        </div>
+        <div v-if="searchUserList.role">
+          <div style="margin-top: 5px;">角色</div>
+          <template
+            v-if="searchUserList.role.length"
+            v-for="(role, idx) in searchUserList.role"
+            :key="idx"
+          >
+            <el-checkbox
+              style="width: 98%; margin-left: 2%;"
+              :label="role.id"
+              :model-value="role.checked"
+              :checked="role.checked"
+              @change="handleCheckedUserListChange(role, $event)"
               >
+              {{ role.name }}
+            </el-checkbox>
+          </template>
+          <template v-else>
+            <div style="font-size: 12px; color: gray; margin-top: 5px; margin-left: 2%;">暂无相关角色</div>
+          </template>
+        </div>
+        <div v-if="searchUserList.user">
+          <div style="margin-top: 5px;">成员</div>
           <template
-            v-for="(user, idx) in searchUserList"
+            v-if="searchUserList.user.length"
+            v-for="(user, idx) in searchUserList.user"
             :key="idx"
           >
             <el-checkbox
-            v-if="user.show"
+              style="width: 98%; margin-left: 2%;"
               :label="user.id"
-            :disabled="user.disabled"
+              :model-value="user.checked"
+              :checked="user.checked"
               @change="handleCheckedUserListChange(user, $event)"
               >
               {{ user.name }}
             </el-checkbox>
           </template>
-        </el-checkbox-group>
+          <template v-else>
+            <div style="font-size: 12px; color: gray; margin-top: 5px; margin-left: 2%;">暂无相关成员</div>
+          </template>
+        </div>
       </div>
     </div>
     <template #footer>
@@ -269,6 +312,7 @@ const userTabs = ref([
   }
 ]);
 const tabSelectData = ref([]);
+const tabCheckedData = ref({}); // 保存选中Tab的数据
 const userTabType = ref("user-tree");
 const tabOffset = ref("0px");
 const tabTextWidth = ref("76px"); // 文字宽度需要打开弹框时重新计算
@@ -276,7 +320,7 @@ const is_active_search = ref(false);
 const search_input = ref("");
 const userList = ref([]);
 const checkedUserList = ref([]);
-const searchUserList = ref([]); // 搜索框 选中 用户ID
+const searchUserList = ref({}); // 搜索框 选中 用户ID
 const checkedSearchUserList = ref([]);
 const defaultProps = ref({
   children: "children",
@@ -386,6 +430,7 @@ watch(
  */
 const handleTabClick = (tab, event, idx) => {
   tabSelectData.value = tab.data; // tab选中数据提供给左右选择结构使用
+  tabCheckedData.value = tab; // tab选中数据
   userList.value = []; // 清空用户列表
   checkedUserList.value = []; // 清空选中用户列表
   activeTabContent.value = ""; // 清空侧边栏显示
@@ -403,6 +448,17 @@ const handleTabClick = (tab, event, idx) => {
   }
   // 文字宽度
   tabTextWidth.value = $("#" + tab.id).width() + "px";
+  // 检查tab是否选中
+  checkTab(tab);
+};
+
+const checkTab = (tab) => {
+  if (!tab.type) { // 未点击过tab栏，默认设置组织结构项
+    nextTick(() => {
+      // 把用户选中的节点注入树结构显示选中状态
+      corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
+    });
+  }
   // 组织结构树
   if (tab.type === 'corp-tree') {
     if (tab.data.length) {
@@ -432,7 +488,7 @@ const handleTabClick = (tab, event, idx) => {
     userList.value = tab.data;
     checkedUserList.value = userTags.value.map(ele => ele.id);
   }
-};
+}
 
 /**
  * 侧边栏Tab点击回调
@@ -541,6 +597,14 @@ const handleCheckedUserListChange = (user, checked) => {
       return ele.id!== user.id;
     });
   }
+  // 适配搜索栏结果的勾选显示
+  const element = searchUserList.value[user.type];
+  for (let index = 0; index < element.length; index++) {
+    const ele = element[index];
+    if (user.id === ele.id) {
+      ele.checked = checked;
+    }
+  }
 };
 
 /**
@@ -657,14 +721,7 @@ const confirmUserForm = () => {
 const activeSearchBtn = () => {
   is_active_search.value = !is_active_search.value;
   search_input.value = '';
-  // 后台数据集合
-  searchUserList.value = _.cloneDeep(deptList.value[0]['user'].concat(roleList.value));
-  //
-  searchUserList.value.forEach((ele) => {
-    ele.show = true;
-  });
-  // 如果 tags 里存在的值，需要在搜索列表中勾选
-  checkSearchStatus();
+  searchUserList.value = {};
 };
 
 /**
@@ -673,38 +730,17 @@ const activeSearchBtn = () => {
  * @return {void}
  */
 const checkSearchStatus = () => {
-  userTags.value.forEach(ele => {
-    searchUserList.value.forEach(item => {
-      if (ele.id === item.id) {
-        item.checked = true;
+  userTags.value.forEach(tag => {
+    for (const key in searchUserList.value) {
+      const element = searchUserList.value[key];
+      for (let index = 0; index < element.length; index++) {
+        const ele = element[index];
+        if (tag.id === ele.id) {
+          ele.checked = true;
+        }
       }
-    });
-  });
-  // 显示选中tags的用户
-  checkedSearchUserList.value = searchUserList.value
-    .filter(ele => ele.checked)
-    .map(ele => ele.id);
-};
-/**
- * 在搜索框中同步显示tag框选中的用户
- *
- * @param {Array} userTags - The array of selected user tags.
- * @param {Array} userList - The array of all users.
- * @param {Array} checkedUserList - The array of users with selected tags.
- * @return {void} No return value.
- */
-const checkUserStatus = () => {
-  userTags.value.forEach(ele => {
-    userList.value.forEach(item => {
-      if (ele.id === item.id) {
-        item.checked = true;
     }
   });
-  });
-  // 显示选中tags的用户
-  checkedUserList.value = userList.value
-    .filter(ele => ele.checked)
-    .map(ele => ele.id);
 };
 
 /**
@@ -715,32 +751,37 @@ const checkUserStatus = () => {
 const onClearSearch = () => {
   is_active_search.value = !is_active_search.value;
   // 同步显示tag框选中的用户
-  checkUserStatus();
+  checkTab(tabCheckedData.value);
 };
+
 /**
- * 搜索回调
- *
- * @return {void} No return value.
+ * 搜索栏input回调
+ * @param {*} val
  */
-const onSearch = () => {
-  // 后台数据集合
-  searchUserList.value = _.cloneDeep(deptList.value[0]['user'].concat(roleList.value));
-  //
-  searchUserList.value.forEach((ele) => {
-    ele.show = true;
-  });
+const onSearchInput = (val) => {
+  axios.get('/admin/?a=search_user_dept_role&word=' + val)
+  .then(res => {
+    if (res.data.code) {
+      searchUserList.value = res.data.data;
+      // 给列表数据绑定默认选中状态
+      for (const key in searchUserList.value) {
+        const element = searchUserList.value[key];
+        if (element.length) {
+          for (let index = 0; index < element.length; index++) {
+            const ele = element[index];
+            ele.checked = false;
+          }
+        }
+      }
       // 如果 tags 里存在的值，需要在搜索列表中勾选
       checkSearchStatus();
-};
-
-const onSearchInput = (val) => {
-  searchUserList.value.forEach((ele) => {
-    if (ele.name.indexOf(val) > -1) {
-      ele.show = true;
     } else {
-      ele.show = false;
+
     }
   })
+  .catch(err => {
+    console.warn(err);
+  });
 }
 </script>