完善功能

hookehuyr
Commit 738329a74887e928a776b92e6e524922ceae180d 738329a7 1 parent 30583cb7
Showing 1 changed file with 247 additions and 87 deletions
doc/App.vue
--- a/doc/App.vue
View file @738329a
+++ b/doc/App.vue
View file @738329a
@@ -240,27 +240,24 @@
                 </div>
               </div>
             </div>
-            <div
+            <div class="flow-tab-search" @click="activeSearchBtn">
-              class="flow-tab-search"
-              @click="state.is_active_search = !state.is_active_search"
-            >
               <el-icon :size="15"><Search /></el-icon> &nbsp;搜索框
             </div>
           </div>
           <div v-else>
             <el-input
               v-model="state.search_input"
-              class="w-50 m-2"
+              class="search-btn-wrapper"
               placeholder="请输入关键字"
             >
               <template #prefix>
                 <el-icon class="el-input__icon"><search /></el-icon>
               </template>
               <template #append>
-                <el-button
+                <div class="search-group">
-                  @click="state.is_active_search = !state.is_active_search"
+                  <div class="confirm-btn" @click="onSearch">搜索</div>
-                  >取消</el-button
+                  <div class="cancel-btn" @click="onClearSearch">取消</div>
-                >
+                </div>
               </template>
             </el-input>
           </div>
@@ -292,6 +289,7 @@
                       :key="idx"
                       :label="user.id"
                       :disabled="user.disabled"
+                      @change="handleCheckedUserListChange(user, $event)"
                       >{{ user.label }}</el-checkbox
                     >
                   </el-checkbox-group>
@@ -307,7 +305,11 @@
               v-model="activeTabContent"
               @tab-click="handleTabContentClick"
             >
-              <el-tab-pane v-for="(role, idx) in item.data" :key="idx" :label="role.label">
+              <el-tab-pane
+                v-for="(role, idx) in item.data"
+                :key="idx"
+                :label="role.label"
+              >
                 <el-checkbox-group
                   class="flow-checkbox-group"
                   v-model="state.checkedUserList"
@@ -317,6 +319,7 @@
                     :key="idx"
                     :label="user.id"
                     :disabled="user.disabled"
+                    @change="handleCheckedUserListChange(user, $event)"
                     >{{ user.label }}</el-checkbox
                   >
                 </el-checkbox-group>
@@ -330,13 +333,16 @@
         <el-checkbox-group
           class="flow-checkbox-group"
           style="padding-left: 10px;"
-          v-model="state.searchUserList"
+          v-model="state.checkedSearchUserList"
+        >
+          <el-checkbox
+            v-for="(user, idx) in state.searchUserList"
+            :key="idx"
+            :label="user.id"
+            :disabled="user.disabled"
+            @change="handleCheckedUserListChange(user, $event)"
+            >{{ user.label }}</el-checkbox
           >
-          <el-checkbox label="1">选项 A</el-checkbox>
-          <el-checkbox label="2">选项 B</el-checkbox>
-          <el-checkbox label="3">选项 C</el-checkbox>
-          <el-checkbox label="4" disabled>禁用</el-checkbox>
-          <el-checkbox label="5" disabled>选中和禁用</el-checkbox>
         </el-checkbox-group>
       </div>
     </div>
@@ -458,12 +464,7 @@ export default {
           }
         }
       ],
-      userTags: [
+      userTags: [],
-        { name: "成员1", id: "1" },
-        { name: "成员2", id: "2" },
-        { name: "成员3", id: "3" },
-        { name: "成员4", id: "4" }
-      ],
       activeTabId: "tab-1", // TODO: 需要获取默认第一个ID
       userTabs: [
         {
@@ -548,13 +549,13 @@ export default {
                 {
                   id: "role-1-2",
                   label: "选项 A",
-                  checked: true,
+                  checked: false,
                   disabled: false
                 },
                 {
                   id: "role-1-3",
                   label: "选项 B",
-                  checked: false,
+                  checked: true,
                   disabled: false
                 },
                 {
@@ -564,21 +565,24 @@ export default {
                   disabled: true
                 }
               ]
-            }, {
+            },
+            {
               id: "role-1-2",
               label: "成员字段",
               children: [],
-              list: [],
+              list: []
-            }, {
+            },
+            {
               id: "role-1-3",
               label: "部门字段",
               children: [],
-              list: [],
+              list: []
-            }, {
+            },
+            {
               id: "role-1-4",
               label: "主管",
               children: [],
-              list: [],
+              list: []
             }
           ]
         }
@@ -591,51 +595,8 @@ export default {
       search_input: "",
       userList: [],
       checkedUserList: [],
-      checkedDeptUserList: [], // 选中部门用户ID
-      deptUserList: [
-        {
-          id: "dept-1",
-          label: "部门1",
-          checked: false,
-          disabled: false
-        },
-        {
-          id: "dept-2",
-          label: "部门2",
-          checked: false,
-          disabled: false
-        },
-        {
-          id: "dept-3",
-          label: "部门3",
-          checked: false,
-          disabled: true
-        }
-      ], // 组织架构框 选中 用户ID
-      checkedRoleUserList: [], // 选中角色用户ID
-      roleUserList: [], // 角色框 选中 用户ID
       searchUserList: [], // 搜索框 选中 用户ID
-      userGroup: [], // 待选用户列表
+      checkedSearchUserList: [],
-      tree_data: [
-        {
-          label: "上级部门 1",
-          children: [
-            {
-              label: "部门名称 1-1",
-              children: []
-            }
-          ]
-        },
-        {
-          label: "上级部门 2",
-          children: [
-            {
-              label: "部门名称 2-1",
-              children: []
-            }
-          ]
-        }
-      ],
       defaultProps: {
         children: "children",
         label: "label"
@@ -670,7 +631,7 @@ export default {
       state.tabSelectData = tab.data; // tab选中数据提供给list类型使用
       state.userList = []; // 清空用户列表
       state.checkedUserList = []; // 清空选中用户列表
-      console.log(tab, event);
+      // console.log(tab, event);
       // 设置当前激活的tab
       state.userTabType = tab.type;
       state.activeTabId = tab.id;
@@ -686,45 +647,145 @@ export default {
       if (tab?.data[0]?.list) {
         let list = tab.data[0].list;
         state.userList = list;
-        state.checkedUserList = list.filter(ele => {
+        state.checkedUserList = list
+          .filter(ele => {
             return ele.checked;
-        }).map(ele => {
+          })
+          .map(ele => {
             return ele.id;
           });
       }
     };
-    const handleTabContentClick = (tab, event) => { // 侧边栏Tab点击回调
+    const handleTabContentClick = (tab, event) => {
+      // 侧边栏Tab点击回调
       // console.log(event);
       state.tabSelectData.forEach(ele => {
         if (ele.label === tab.props.label) {
           state.userList = ele.list;
-          state.checkedUserList = ele.list.filter(ele => {
+          state.checkedUserList = ele.list
+            .filter(ele => {
               return ele.checked;
-          }).map(ele => {
+            })
+            .map(ele => {
               return ele.id;
             });
         }
-      })
+      });
     };
     const handleNodeClick = data => {
-      console.log(data);
+      // console.log(data);
       if (data.list) {
         state.userList = data.list;
-        state.checkedUserList = data.list.filter(ele => {
+        state.checkedUserList = data.list
+          .filter(ele => {
             return ele.checked;
-        }).map(ele => {
+          })
+          .map(ele => {
             return ele.id;
           });
-        console.warn(state.checkedUserList);
+        // console.warn(state.checkedUserList);
+      }
+    };
+
+    function modifyFieldValue(obj, fieldName, targetValue, newValue) {
+      // 遍历相应ID修改选中值
+      // 检查当前层级的字段值是否匹配目标值
+      if (obj[fieldName] === targetValue) {
+        obj["checked"] = newValue;
+      }
+
+      // 遍历当前层级的子项（如果有）
+      for (var key in obj) {
+        if (typeof obj[key] === "object" && obj[key] !== null) {
+          modifyFieldValue(obj[key], fieldName, targetValue, newValue);
+        }
+      }
     }
+
+    const handleCheckedUserListChange = (user, checked) => {
+      // 勾选用户回调
+      // 修改选中值状态
+      modifyFieldValue(state.userTabs, "id", user.id, checked);
+    };
+
+    function getAllListItems(arr) {
+      // 遍历递归获取list下面的数据
+      var result = [];
+
+      function recursiveGetListItems(subArr) {
+        for (var i = 0; i < subArr.length; i++) {
+          var item = subArr[i];
+          if (item.list && Array.isArray(item.list)) {
+            result = result.concat(item.list);
+          }
+          if (item.children && Array.isArray(item.children)) {
+            recursiveGetListItems(item.children);
+          }
+        }
+      }
+
+      recursiveGetListItems(arr);
+      return result;
+    }
+
+    const setTagsList = val => {
+      let userList = [];
+      val.forEach(ele => {
+        let data = getAllListItems(ele.data);
+        userList.push(data);
+      });
+      // 合并成一维数组列表
+      userList = [...userList.flat()];
+      // 勾选变化后同步到选中列表
+      state.userTags = userList
+        .filter(ele => {
+          return ele.checked;
+        })
+        .map(ele => {
+          return {
+            id: ele.id,
+            name: ele.label
+          };
+        });
     };
+    // 监听数据结构选中值变化
+    watch(
+      () => state.userTabs,
+      val => {
+        if (val) {
+          // 设置tag选中列表
+          setTagsList(val);
+        }
+      },
+      { deep: true }
+    );
+
     const handleTagClose = tag => {
       // 移除成员标签回调
-      state.userTags.splice(state.userTags.indexOf(tag), 1);
+      state.userTags.splice(state.userTags.indexOf(tag), 1); // 删除标签列表中的项
-      console.log(tag);
+      // 移除数据结构中的选中值
+      modifyFieldValue(state.userTabs, "id", tag.id, false);
+      //
+      let tagsId = state.userTags.map(ele => {
+        return ele.id;
+      });
+      // console.warn(tagsId);
+      // 获取tags中已删除的, 勾选列表中还勾选的值
+      let result = state.checkedUserList.filter(
+        value => !tagsId.includes(value)
+      );
+      // 选中列表中不存在勾选列表中项时，需要删除勾选列表中的项
+      if (result.length) {
+        result.forEach(ele => {
+          state.checkedUserList.splice(state.checkedUserList.indexOf(ele), 1);
+        });
+      }
+      // console.log(result);
+      // console.log(state.userTags);
+      // console.log(state.checkedUserList);
     };
     const closeUserForm = () => {
@@ -737,6 +798,74 @@ export default {
       console.log(state.userTags);
     };
+    const activeSearchBtn = () => {
+      state.is_active_search = !state.is_active_search;
+      state.searchUserList = [];
+    };
+
+    const checkSearchStatus = () => {
+      // 在搜索框中同步显示tag框选中的用户
+      state.userTags.forEach(ele => {
+        state.searchUserList.forEach(item => {
+          if (ele.id === item.id) {
+            item.checked = true;
+          }
+        });
+      });
+      // 显示选中tags的用户
+      state.checkedSearchUserList = state.searchUserList
+        .filter(ele => ele.checked)
+        .map(ele => ele.id);
+    };
+
+    const onClearSearch = () => {
+      // 清空搜索回调
+      state.is_active_search = !state.is_active_search;
+    };
+    const onSearch = () => {
+      // 搜索回调
+      state.searchUserList = [
+        {
+          id: "user-1-1",
+          label: "用户1-1",
+          checked: true,
+          disabled: false
+        },
+        {
+          id: "user-1-2",
+          label: "用户1-2",
+          checked: false,
+          disabled: false
+        },
+        {
+          id: "user-1-3",
+          label: "用户1-3",
+          checked: false,
+          disabled: true
+        },
+        {
+          id: "role-1-2",
+          label: "选项 A",
+          checked: false,
+          disabled: false
+        },
+        {
+          id: "role-1-3",
+          label: "选项 B",
+          checked: true,
+          disabled: false
+        },
+        {
+          id: "role-1-4",
+          label: "选项 C",
+          checked: false,
+          disabled: true
+        }
+      ];
+      // console.log(state.userTags);
+      checkSearchStatus();
+    };
+
     onMounted(() => {
       // // 显示提示框的标志位
       // var showConfirmation = true;
@@ -763,6 +892,8 @@ export default {
       //   console.warn(res.data);
       // });
       // $('.el-tabs__nav')
+      // 根据数据获取选中的tag标签
+      setTagsList(state.userTabs);
     });
     watch(
@@ -910,6 +1041,10 @@ export default {
       handleTagClose,
       closeUserForm,
       confirmUserForm,
+      handleCheckedUserListChange,
+      onSearch,
+      onClearSearch,
+      activeSearchBtn,
       logData,
@@ -1037,4 +1172,29 @@ body {
     display: flex !important;
   }
 }
+
+.search-btn-wrapper {
+  .el-input-group__append {
+    width: 100px !important;
+    padding: 0 !important;
+  }
+  .search-group {
+    display: flex;
+    text-align: center;
+    .confirm-btn {
+      width: 50px;
+      color: #fff;
+      background-color: #409eff;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    .cancel-btn {
+      width: 50px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
 </style>