fix 树形选中组件代码整理

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-05-31 11:32:37
+ * @LastEditTime: 2024-05-31 17:09:02
  * @FilePath: /data-table/src/components/TreeField/index.vue
  * @Description: 树形组件
 -->
@@ -65,8 +65,7 @@
             :showFooter="false"
             :cascade="false"
             :defaultExpandAll="false"
-            @search="searchMethod"
-            @checked-change="checkedChangeMethod"
+            @checked-change="deptTreeCheckedChange"
             style=" height: 60vh; overflow: scroll;"
           >
             <span slot="empty">暂无数据</span>
@@ -102,7 +101,7 @@
                 :expandOnFilter="false"
                 :showCheckedButton="false"
                 @update:modelValue="() => {}"
-                @click="onNodeClick"
+                @click="onUserTreeClick"
               >
                 <span slot="empty">暂无数据</span>
               </Vtree>
@@ -141,7 +140,7 @@
           <p>部门</p>
           <div>
             <van-checkbox
-              @click="onSearchDeptChange(dept, $event)"
+              @click="onSearchResultClick(dept, $event)"
               v-for="(dept) in user_dept_role.dept"
               :id="dept.id"
               :type="dept.type"
@@ -157,7 +156,7 @@
           <p>角色</p>
           <div>
             <van-checkbox
-              @click="onSearchRoleChange(role, $event)"
+              @click="onSearchResultClick(role, $event)"
               v-for="(role) in user_dept_role.role"
               :id="role.id"
               :type="role.type"
@@ -173,7 +172,7 @@
           <p>成员</p>
           <div>
             <van-checkbox
-              @click="onSearchUserChange(user, $event)"
+              @click="onSearchResultClick(user, $event)"
               v-for="(user) in user_dept_role.user"
               :id="user.id"
               :type="user.type"
@@ -202,7 +201,6 @@ import Vtree, { VTreeNode, VTreeSearch, VTreeDrop } from '@wsfe/vue-tree'
 import '@wsfe/vue-tree/style.css';
 import role_list from './flow_role_list.json'
 import dept_list from './flow_dept_list.json'
-// import user_dept_role from './user_dept_role.json'
 import $ from 'jquery';
 import _ from 'lodash';
 
@@ -267,16 +265,55 @@ const onCloseSearch = () => { // 点击搜索关闭按钮回调
 }
 /****************************** END ********************************/
 
+/**
+ * 中间通用显示勾选结果集
+ */
+
+const checkedGroup = ref({
+  dept: [], // 组织结构
+  role: [], // 角色
+  user: [] // 成员
+});
+
+const onRemoveDeptTag = (dept) => { // 移除部门标签
+  // 移除选中框显示
+  const index = checkedGroup.value.dept.indexOf(dept);
+  checkedGroup.value.dept.splice(index, 1);
+  // 组织结构移除对应ID
+  deptTreeRef.value?.setChecked(dept.id, false);
+  // 移除搜索结果选中显示
+  const idx = search_result_checked.value.indexOf(dept);
+  search_result_checked.value.splice(idx, 1);
+}
+
+const onRemoveRoleTag = (role) => { // 移除角色标签
+  const index = checkedGroup.value.role.indexOf(role);
+  checkedGroup.value.role.splice(index, 1);
+  //
+  const idx = role_checked.value.indexOf(role);
+  role_checked.value.splice(index, 1);
+  // 移除搜索结果选中显示
+  const i = search_result_checked.value.indexOf(role);
+  search_result_checked.value.splice(i, 1);
+}
+
+const onRemoveUserTag = (user) => { // 移除成员标签
+  const index = checkedGroup.value.user.indexOf(user);
+  checkedGroup.value.user.splice(index, 1);
+  //
+  const idx = user_checked.value.indexOf(user);
+  user_checked.value.splice(index, 1);
+  // 移除搜索结果选中显示
+  const i = search_result_checked.value.indexOf(user);
+  search_result_checked.value.splice(i, 1);
+}
+
 /*************** Tab 功能模块 ****************/
 const tabRef = ref(null);
 const tabActive = ref(0);
-const select_dept_value = ref(); // 组织结构树形选中值
 const deptTreeRef = ref();
-const role_checked = ref([]); // 角色多选选中值
-const roleList = ref([]);
-const select_user_value = ref(); // 成员树形选中值
-const userTreeRef = ref();
-const user_checked = ref([]); // 成员多选选中值
+
+
 const userList = ref([]);
 
 const onClickTab = ({ title }) => { // tab点击事件
@@ -293,149 +330,109 @@ const onClickTab = ({ title }) => { // tab点击事件
   });
 };
 
-const checkedGroup = ref({
-  dept: [],
-  role: [],
-  user: []
-});
-
-// 使用watch进行深度监听
-watch(
-  checkedGroup,
-  (newCheckedGroup, oldCheckedGroup, onInvalidate) => {
-    // console.log('checkedGroup changed:', newCheckedGroup);
-    // role_checked.value = newCheckedGroup.role.map(item => item.id);
-    // 如果需要在下次更新前清理副作用，可以使用onInvalidate
-    // onInvalidate(() => {
-    //   console.log('Watch invalidated');
-    // });
-  },
-  {
-    deep: true, // 深度监听
-    immediate: true, // 立即触发回调
-  }
-);
-
-onMounted(() => {
-  props.item.value = props.item.component_props.default;
-
-  // TODO：获取数据
-  deptTreeRef.value.setData(role_list);
-  // 默认展开第一个
-  deptTreeRef.value.setExpand(35697, true)
-  // // 默认展开第一个
-  // userTreeRef.value.setExpand(1, true)
-});
-
-const searchMethod = (value) => {
-  console.log(value)
-}
-
-const checkedChangeMethod = (arr) => {
-  let list = [];
-  arr.forEach((item) => {
-    list.push({
-      id: item.id,
-      name: item.name
-    })
-  })
-  // console.log(deptTreeRef.value.getCheckedNodes())
-  // checkedGroup.value.dept = [];
-  checkedGroup.value.dept = list;
-}
-
-
 const deptListReset = () => { // 组织重置列表
   deptTreeRef.value.setData(role_list);
-
   deptTreeRef.value.setExpand(35697, true)
 }
-const roleListReset = () => {
+
+const roleListReset = () => { // 角色重置列表
   roleList.value = dept_list;
 }
-const userListReset = () => {
-  userTreeRef.value.setData(role_list);
 
+const userListReset = () => { // 成员重置列表
+  userTreeRef.value.setData(role_list);
   userTreeRef.value.setExpand(35697, true)
 }
+/**************** END *****************/
 
-const onNodeClick = (node) => {
-  // console.warn(node);
-  console.warn(checkedGroup.value.user);
-  // console.warn(node.user);
-  userList.value = node.user;
-  user_checked.value = checkedGroup.value.user.map(item => item.id)
+onMounted(() => {
+  props.item.value = props.item.component_props.default;
+  // TODO：获取数据
+  getDeptTreeData();
+});
+
+/************* 组织结构模块 ***************/
+const select_dept_value = ref(); // 组织结构树形选中值
+
+const getDeptTreeData = () => { // 获取组织结构数据
+  deptTreeRef.value.setData(role_list);
+  // 默认展开第一个
+  deptTreeRef.value.setExpand(35697, true);
 }
 
-const roleChangeMethod = (val) => { // 角色多选组点击回调
-  let list = [];
-  roleList.value.forEach((item) => {
-    val.forEach((v) => {
-      if (item.id === v) {
-        list.push({
-          id: v,
-          name: item.name
-        })
+const deptTreeCheckedChange = (arr) => { // 组织结构勾选回调
+  checkedGroup.value.dept = arr.map((item) => {
+    return {
+      id: item.id,
+      name: item.name,
+      type: 'dept'
     }
-    })
   });
-  //
-  // checkedGroup.value.role = [];
-  checkedGroup.value.role = list;
 }
+/**************** END *****************/
+
+/************* 角色模块 ***************/
+const role_checked = ref([]); // 角色多选选中值
+const roleList = ref([]);
 
-const onChange = (val) => {
-  console.warn(userList.value);
+const roleChangeMethod = (val) => { // 角色多选组点击回调
+  let result = val.map(id => roleList.value.find(obj => obj.id === id));
+  // 过滤掉未找到的项（即返回undefined的项）
+  checkedGroup.value.role = result.filter(item => item !== undefined);
 }
+/**************** END *****************/
 
-const roleTreeList = ref(role_list);
+/************* 成员模块 ***************/
+const userTreeRef = ref();
+const select_user_value = ref(); // 成员树形选中值
+const user_checked = ref([]); // 成员多选选中值
 
-const onUserChange = (val) => { // 成员多选组点击回调
-  // userList.value.forEach(item => {
-  //   if (val.includes(item.id)) {
-  //     item.checked = true;
-  //   } else {
-  //     item.checked = false;
-  //   }
-  // });
-
-  // checkedGroup.value.user = user_checked.value;
+const onUserTreeClick = (node) => { // 点击成员树形回调
+  userList.value = node.user;
+  user_checked.value = checkedGroup.value.user.map(item => item.id)
 }
 
-const onRemoveDeptTag = (dept) => { // 移除部门标签
-  // 移除选中框显示
-  const index = checkedGroup.value.dept.indexOf(dept);
-  checkedGroup.value.dept.splice(index, 1);
-  // 组织结构移除对应ID
-  deptTreeRef.value?.setChecked(dept.id, false);
-  // 移除搜索结果选中显示
-  const idx = search_result_checked.value.indexOf(dept);
-  search_result_checked.value.splice(idx, 1);
+const onUserChange = (val) => { // 成员多选组点击回调
 }
 
-const onRemoveRoleTag = (role) => { // 移除角色标签
-  const index = checkedGroup.value.role.indexOf(role);
-  checkedGroup.value.role.splice(index, 1);
+const onCheckUserChange = (val, evt) => {
+  nextTick(() => {
+    let checked = false;
+    let id = '';
+    let name = '';
+    let type = '';
+    if ($(evt.target).attr('aria-checked') === undefined) {
+      checked = $(evt.target).parents('.van-checkbox').attr('aria-checked');
+      id = $(evt.target).parents('.van-checkbox').attr('id');
+      name = $(evt.target).parents('.van-checkbox').attr('text');
+      type = $(evt.target).parents('.van-checkbox').attr('type');
+    } else {
+      checked = $(evt.target).attr('aria-checked');
+      id = $(evt.target).attr('id');
+      name = $(evt.target).attr('text');
+      type = $(evt.target).attr('type');
+    }
+    let obj = {
+      id: +id,
+      name,
+      type
+    }
+    checkedGroup.value.user.push(obj);
+    checkedGroup.value.user = _.uniqBy(checkedGroup.value.user, 'id');
     //
-  const idx = role_checked.value.indexOf(role);
-  role_checked.value.splice(index, 1);
-  // 移除搜索结果选中显示
-  const i = search_result_checked.value.indexOf(role);
-  search_result_checked.value.splice(i, 1);
-}
-
-const onRemoveUserTag = (user) => { // 移除成员标签
-  console.warn(user);
-  const index = checkedGroup.value.user.indexOf(user);
+    if (checked === 'false') {
+      if (val.type === 'user') {
+        const index = checkedGroup.value.user.indexOf(val);
         checkedGroup.value.user.splice(index, 1);
-  //
-  const idx = user_checked.value.indexOf(user);
-  user_checked.value.splice(index, 1);
-  // 移除搜索结果选中显示
-  const i = search_result_checked.value.indexOf(user);
-  search_result_checked.value.splice(i, 1);
+      }
+    }
+  })
 }
+/**************** END *****************/
+
+/***************** 搜索结果集模块 ********************/
 
+// 模拟数据
 const user_dept_role = ref({
   "dept": [
     {
@@ -474,184 +471,50 @@ const user_dept_role = ref({
   ]
 });
 
-
-
-// watch(
-//   search_result_checked
-//   ,(newVal, oldVal) => {
-//     console.warn(newVal);
-//     console.warn(oldVal);
-//   }, {
-//     deep: true,
-//   })
-
 const onSearchResultChange = (val) => { // 监听搜索结果集点击回调，结果集为选中项
-  // console.warn(val);
-  // val.forEach((item) => { // 把选中项合并到显示框中
-  //   if (item.type === 'dept') { // 部门
-  //     checkedGroup.value.dept.push(item);
-  //     checkedGroup.value.dept = _.uniqBy(checkedGroup.value.dept, 'id');
-  //   }
-  //   if (item.type === 'role') { // 角色
-  //     checkedGroup.value.role.push(item);
-  //     checkedGroup.value.role = _.uniqBy(checkedGroup.value.role, 'id');
-  //   }
-  //   if (item.type === 'user') { // 成员
-  //     checkedGroup.value.user.push(item);
-  //     checkedGroup.value.user = _.uniqBy(checkedGroup.value.user, 'id');
-  //   }
-  // });
 }
 
-const onSearchDeptChange = (val, evt) => {
-  nextTick(() => {
-    let checked = false;
-    let id = '';
-    let name = '';
-    let type = '';
-    if ($(evt.target).attr('aria-checked') === undefined) {
-      checked = $(evt.target).parents('.van-checkbox').attr('aria-checked');
-      id = $(evt.target).parents('.van-checkbox').attr('id');
-      name = $(evt.target).parents('.van-checkbox').attr('text');
-      type = $(evt.target).parents('.van-checkbox').attr('type');
-    } else {
-      checked = $(evt.target).attr('aria-checked');
-      id = $(evt.target).attr('id');
-      name = $(evt.target).attr('text');
-      type = $(evt.target).attr('type');
-    }
-    let obj = {
-      id: +id,
-      name,
-      type
-    }
-    checkedGroup.value.dept.push(obj);
-    checkedGroup.value.dept = _.uniqBy(checkedGroup.value.dept, 'id');
-    //
-    if (checked === 'false') {
-      if (val.type === 'dept') {
-        console.warn(obj);
-        const index = checkedGroup.value.dept.findIndex(dept => dept.id === obj.id);
-        checkedGroup.value.dept.splice(index, 1);
-        // 移除搜索结果选中显示
-        // const idx = search_result_checked.value.indexOf(obj);
-        // search_result_checked.value.splice(idx, 1);
-        // 组织结构移除对应ID
-        deptTreeRef.value?.setChecked(obj.id, false);
-      }
-    }
-  })
-}
-const onSearchRoleChange = (val, evt) => {
+const onSearchResultClick = (val, evt) => { // 搜索结果集项点击回调
   nextTick(() => {
     let checked = false;
     let id = '';
     let name = '';
     let type = '';
-    if ($(evt.target).attr('aria-checked') === undefined) {
-      checked = $(evt.target).parents('.van-checkbox').attr('aria-checked');
-      id = $(evt.target).parents('.van-checkbox').attr('id');
-      name = $(evt.target).parents('.van-checkbox').attr('text');
-      type = $(evt.target).parents('.van-checkbox').attr('type');
-    } else {
-      checked = $(evt.target).attr('aria-checked');
-      id = $(evt.target).attr('id');
-      name = $(evt.target).attr('text');
-      type = $(evt.target).attr('type');
-    }
-    let obj = {
-      id: +id,
-      name,
-      type
-    }
-    checkedGroup.value.role.push(obj);
-    checkedGroup.value.role = _.uniqBy(checkedGroup.value.role, 'id');
-    //
-    if (checked === 'false') {
-      if (val.type === 'role') {
-        const index = checkedGroup.value.role.findIndex(role => role.id === obj.id);
-        checkedGroup.value.role.splice(index, 1);
-        // const idx = role_checked.value.indexOf(obj);
-        // role_checked.value.splice(index, 1);
-        // 移除搜索结果选中显示
-        // const i = search_result_checked.value.indexOf(obj);
-        // search_result_checked.value.splice(i, 1);
-      }
-    }
-  })
-}
-const onSearchUserChange = (val, evt) => {
-  nextTick(() => {
-    let checked = false;
-    let id = '';
-    let name = '';
-    let type = '';
-    if ($(evt.target).attr('aria-checked') === undefined) {
-      checked = $(evt.target).parents('.van-checkbox').attr('aria-checked');
-      id = $(evt.target).parents('.van-checkbox').attr('id');
-      name = $(evt.target).parents('.van-checkbox').attr('text');
-      type = $(evt.target).parents('.van-checkbox').attr('type');
-    } else {
-      checked = $(evt.target).attr('aria-checked');
-      id = $(evt.target).attr('id');
-      name = $(evt.target).attr('text');
-      type = $(evt.target).attr('type');
-    }
-    let obj = {
-      id: +id,
-      name,
-      type
-    }
-    checkedGroup.value.user.push(obj);
-    checkedGroup.value.user = _.uniqBy(checkedGroup.value.user, 'id');
-    //
-    if (checked === 'false') {
-      if (val.type === 'user') {
-        const index = checkedGroup.value.user.findIndex(user => user.id === obj.id);
-        checkedGroup.value.user.splice(index, 1);
-        // //
-        // const idx = user_checked.value.indexOf(obj);
-        // user_checked.value.splice(index, 1);
-        // // 移除搜索结果选中显示
-        // const i = search_result_checked.value.indexOf(obj);
-        // search_result_checked.value.splice(i, 1);
-      }
-    }
-  })
-}
 
-const onCheckUserChange = (val, evt) => {
-  nextTick(() => {
-    let checked = false;
-    let id = '';
-    let name = '';
-    let type = '';
-    if ($(evt.target).attr('aria-checked') === undefined) {
+    if ($(evt.target).attr('aria-checked') === undefined) { // 点击子元素
       checked = $(evt.target).parents('.van-checkbox').attr('aria-checked');
       id = $(evt.target).parents('.van-checkbox').attr('id');
       name = $(evt.target).parents('.van-checkbox').attr('text');
       type = $(evt.target).parents('.van-checkbox').attr('type');
-    } else {
+    } else { // 点击父元素
       checked = $(evt.target).attr('aria-checked');
       id = $(evt.target).attr('id');
       name = $(evt.target).attr('text');
       type = $(evt.target).attr('type');
     }
-    let obj = {
+
+    let obj = { // 点击元素属性
       id: +id,
       name,
       type
     }
-    checkedGroup.value.user.push(obj);
-    checkedGroup.value.user = _.uniqBy(checkedGroup.value.user, 'id');
-    //
+
+    // 对应类型添加到选中组
+    checkedGroup.value[type].push(obj);
+    checkedGroup.value[type] = _.uniqBy(checkedGroup.value[type], 'id');
+
+    // 取消选中处理
     if (checked === 'false') {
-      if (val.type === 'user') {
-        const index = checkedGroup.value.user.indexOf(val);
-        checkedGroup.value.user.splice(index, 1);
+      // 移除对应的数据集
+      const index = checkedGroup.value[type].findIndex(item => item.id === obj.id);
+      checkedGroup.value[type].splice(index, 1);
+
+      if (type === 'dept') {
+        // 树形 组织结构移除对应ID
+        deptTreeRef.value?.setChecked(obj.id, false);
       }
     }
-  })
+  });
 }
 </script>