fix

hookehuyr
Commit 322f79a2b059ba837c0c73566bdbadf5c44c47d4 322f79a2 1 parent 23c50786
Showing 1 changed file with 90 additions and 36 deletions
doc/selectUserView.vue
--- a/doc/selectUserView.vue
View file @322f79a
+++ b/doc/selectUserView.vue
View file @322f79a
 <!--
  * @Date: 2023-11-01 10:18:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-01 14:07:53
+ * @LastEditTime: 2023-11-01 15:32:45
  * @FilePath: /vue-flow-editor/doc/selectUserView.vue
  * @Description: 文件描述
 -->
@@ -205,16 +205,15 @@ const defaultProps = ref({
 });
 onMounted(() => {
-  // console.log(props.visible);
   // axios.get('/srv/?a=query_form_all_field')
   // .then(res => {
   //   console.warn(res.data);
   // });
-  // $('.el-tabs__nav')
   // 根据数据获取选中的tag标签
   // setTagsList(userTabs);
-  // TODO:查询到的用户列表数据
+  // TODO: 查询到的用户选中列表数据
   userTags.value = [{ id: "user-1-1", name: "用户1-1" }];
+  // TODO: 查询到的用户列表数据
   userTabs.value = [
     {
       id: "tab-1",
@@ -338,12 +337,12 @@ onMounted(() => {
   ];
   // 对比选中的用户的 ID，选中的 ID 同步状态到 userTabs 的数据结构上
   userTags.value.forEach(ele => {
-    modifyFieldValue(userTabs.value, "id", ele.id, true);
+    modifyFieldValue(userTabs.value, "id", ele.id, "checked", true);
   });
 });
 watch(() => {
-  //
+  // 监听弹框状态
   if (props.visible) {
     dialogUserFormVisible.value = true;
   } else {
@@ -351,14 +350,19 @@ watch(() => {
   }
 });
+/**
+ * 点击Tab切换回调
+ *
+ * @param {object} tab - The tab object that was clicked.
+ * @param {object} event - The event object generated by the click event.
+ * @param {number} idx - The index of the clicked tab.
+ */
 const handleTabClick = (tab, event, idx) => {
-  // 点击Tab切换回调
   tabSelectData.value = tab.data; // tab选中数据提供给list类型使用
   userList.value = []; // 清空用户列表
   checkedUserList.value = []; // 清空选中用户列表
   activeTabContent.value = ""; // 清空侧边栏显示
   currentNodeKey.value = []; // 清空树形的默认展开
-  // console.log(tab, event);
   // 设置当前激活的tab
   userTabType.value = tab.type;
   activeTabId.value = tab.id;
@@ -384,13 +388,16 @@ const handleTabClick = (tab, event, idx) => {
   // }
 };
+/**
+ * 侧边栏Tab点击回调
+ *
+ * @param {type} tab - description of parameter
+ * @param {type} event - description of parameter
+ */
 const handleTabContentClick = (tab, event) => {
-  // 侧边栏Tab点击回调
-  // console.log(activeTabContent.value);
-  // console.log(tab);
-  // console.log(event);
   tabSelectData.value.forEach(ele => {
     if (ele.label === tab.props.label) {
+      // 设置右侧显示数据
       userList.value = ele.list;
       checkedUserList.value = ele.list
         .filter(ele => {
@@ -403,10 +410,15 @@ const handleTabContentClick = (tab, event) => {
   });
 };
+/**
+ * 树形结构点击回调
+ *
+ * @param {object} data - The data associated with the clicked node.
+ * @return {void}
+ */
 const handleNodeClick = data => {
-  // 树形结构点击回调
-  // console.log(data);
   if (data.list) {
+    // 如果节点下存在 list 字段，设置为右侧显示数据列表
     userList.value = data.list;
     checkedUserList.value = data.list
       .filter(ele => {
@@ -415,41 +427,48 @@ const handleNodeClick = data => {
       .map(ele => {
         return ele.id;
       });
-    // console.warn(checkedUserList.value);
+    // 默认展开相应ID节点
     currentNodeKey.value = [data.id];
   }
 };
 /**
- * 递归查找匹配字段，并修改字段为新值
+ * 递归查找匹配字段，并修改字段的值为新值
  *
  * @param {object} obj - 修改对象
- * @param {string} fieldName - 修改字段
+ * @param {string} fieldName - 查找字段
- * @param {any} targetValue - 匹配值
+ * @param {any} fieldValue - 匹配值
+ * @param {any} targetName - 目标字段
  * @param {any} newValue - 修改新值
  */
-function modifyFieldValue(obj, fieldName, targetValue, newValue) {
+function modifyFieldValue(obj, fieldName, fieldValue, targetName, newValue) {
   // 检查当前层级的字段值是否匹配目标值
-  if (obj[fieldName] === targetValue) {
+  if (obj[fieldName] === fieldValue) {
-    obj["checked"] = newValue;
+    obj[targetName] = newValue;
   }
   // 遍历当前层级的子项（如果有）
   for (var key in obj) {
     if (typeof obj[key] === "object" && obj[key] !== null) {
-      modifyFieldValue(obj[key], fieldName, targetValue, newValue);
+      modifyFieldValue(obj[key], fieldName, fieldValue, targetName, newValue);
     }
   }
 }
+/**
+ * 操作勾选框回调
+ *
+ * @param {type} user - description of parameter
+ * @param {type} checked - description of parameter
+ * @return {type} description of return value
+ */
 const handleCheckedUserListChange = (user, checked) => {
-  // 勾选用户回调
   // 修改选中值状态
-  modifyFieldValue(userTabs.value, "id", user.id, checked);
+  modifyFieldValue(userTabs.value, "id", user.id, "checked", checked);
 };
 /**
- * 递归获取树形结构下的所有list字段数据
+ * 递归获取树形结构下的所有 list 字段数据
  *
  * @param {Array} arr - The array to traverse.
  * @return {Array} - The list items found.
@@ -516,12 +535,17 @@ watch(
   { deep: true }
 );
+/**
+ * 移除 tags 成员标签回调
+ *
+ * @param {string} tag - The tag to be closed.
+ * @return {undefined} No return value.
+ */
 const handleTagClose = tag => {
-  // 移除 tags 成员标签回调
   userTags.value.splice(userTags.value.indexOf(tag), 1); // 删除标签列表中的项
   // 移除数据结构中的选中值
-  modifyFieldValue(userTabs.value, "id", tag.id, false);
+  modifyFieldValue(userTabs.value, "id", tag.id, "checked", false);
-  //
+  // ID集合
   let tagsId = userTags.value.map(ele => {
     return ele.id;
   });
@@ -544,27 +568,42 @@ const handleTagClose = tag => {
   }
 };
+/**
+ * 关闭用户列表表单回调
+ *
+ * @return {void} - No return value.
+ */
 const closeUserForm = () => {
-  // 关闭用户列表表单回调
   dialogUserFormVisible.value = false;
   emit("close", dialogUserFormVisible.value);
 };
+/**
+ * 确认用户列表表单回调
+ *
+ * @return {void} No return value.
+ */
 const confirmUserForm = () => {
-  // 确认用户列表表单回调
   dialogUserFormVisible.value = false;
-  // console.log(userTags.value);
   emit("close", dialogUserFormVisible.value);
   emit("confirm", userTags.value);
 };
+/**
+ * 激活搜索按钮操作
+ *
+ * @return {void} No return value.
+ */
 const activeSearchBtn = () => {
-  // 激活搜索按钮操作
   is_active_search.value = !is_active_search.value;
   searchUserList.value = []; // 清空搜索列表
 };
+/**
+ * 在搜索框中同步显示tag框选中的用户
+ *
+ * @return {void}
+ */
 const checkSearchStatus = () => {
-  // 在搜索框中同步显示tag框选中的用户
   userTags.value.forEach(ele => {
     searchUserList.value.forEach(item => {
       if (ele.id === item.id) {
@@ -577,8 +616,15 @@ const checkSearchStatus = () => {
     .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 = () => {
-  // 在搜索框中同步显示tag框选中的用户
   userTags.value.forEach(ele => {
     userList.value.forEach(item => {
       if (ele.id === item.id) {
@@ -592,14 +638,22 @@ const checkUserStatus = () => {
     .map(ele => ele.id);
 };
+/**
+ * 清空搜索回调
+ *
+ * @return {void}
+ */
 const onClearSearch = () => {
-  // 清空搜索回调
   is_active_search.value = !is_active_search.value;
   // 同步显示tag框选中的用户
   checkUserStatus();
 };
+/**
+ * 搜索回调
+ *
+ * @return {void} No return value.
+ */
 const onSearch = () => {
-  // 搜索回调
   // TODO: 获取后台数据
   searchUserList.value = [
     {