新增备注

hookehuyr
Commit 7982f4f92af0e5fb66f5758f305393b327562873 7982f4f9 1 parent acdbcae5
Showing 1 changed file with 149 additions and 96 deletions
doc/App.vue
--- a/doc/App.vue
View file @7982f4f
+++ b/doc/App.vue
View file @7982f4f
@@ -487,12 +487,41 @@ export default {
       }
     });
+    onMounted(() => {
+      // // 显示提示框的标志位
+      // var showConfirmation = true;
+      // // 监听 beforeunload 事件
+      // window.addEventListener('beforeunload', function (event) {
+      //   if (showConfirmation) {
+      //     // 取消事件的默认行为（弹出确认对话框）
+      //     event.preventDefault();
+      //     // Chrome 和 Firefox 需要返回一个值以显示确认对话框
+      //     event.returnValue = '';
+      //     // 显示自定义的提示信息
+      //     var confirmationMessage = '确定要离开此页面吗？';
+      //     (event || window.event).returnValue = confirmationMessage;  // 兼容旧版浏览器
+      //     return confirmationMessage;
+      //   }
+      // });
+      // // 监听 unload 事件
+      // window.addEventListener('unload', function () {
+      //   // 设置标志位为 false，避免在刷新页面时再次显示提示框
+      //   showConfirmation = false;
+      // });
+      // axios.get('/srv/?a=query_form_all_field')
+      // .then(res => {
+      //   console.warn(res.data);
+      // });
+      // $('.el-tabs__nav')
+      // 根据数据获取选中的tag标签
+      // setTagsList(state.userTabs);
+    });
+
     function handleActiveChange(name) {
       console.warn(name);
     }
-    const onAuthAllChange = val => {
+    const onAuthAllChange = val => { // 全选可见按钮回调
-      // 全选可见按钮回调
       if (val) {
         // 全部选中
         state.field_auths.forEach(ele => {
@@ -505,14 +534,16 @@ export default {
         });
       }
     };
-    const onAuthAllEditChange = val => {
+    const onAuthAllEditChange = val => { // 全选可编辑按钮回调
-      // 全选可编辑按钮回调
       console.warn(val);
     };
-    const openUserForm = () => {
+    const openUserForm = () => { // 打开设置用户弹框
       state.dialogUserFormVisible = true;
       // TODO:查询到的用户列表数据
+      state.userTags = [
+        { id: "user-1-1", name: "用户1-1" },
+      ]
       state.userTabs = [
         {
           id: "tab-1",
@@ -531,7 +562,7 @@ export default {
                     {
                       id: "user-1-1",
                       label: "用户1-1",
-                      checked: true,
+                      checked: false,
                       disabled: false
                     },
                     {
@@ -634,10 +665,13 @@ export default {
           ]
         }
       ];
+      // 对比选中的用户的 ID，选中的 ID 同步状态到 userTabs 的数据结构上
+      state.userTags.forEach(ele => {
+        modifyFieldValue(state.userTabs, "id", ele.id, true);
+      });
     };
-    const handleTabClick = (tab, event, idx) => {
+    const handleTabClick = (tab, event, idx) => { // 点击Tab切换回调
-      // 点击Tab切换回调
       state.tabSelectData = tab.data; // tab选中数据提供给list类型使用
       state.userList = []; // 清空用户列表
       state.checkedUserList = []; // 清空选中用户列表
@@ -669,8 +703,7 @@ export default {
       // }
     };
-    const handleTabContentClick = (tab, event) => {
+    const handleTabContentClick = (tab, event) => { // 侧边栏Tab点击回调
-      // 侧边栏Tab点击回调
       // console.log(state.activeTabContent);
       // console.log(tab);
       // console.log(event);
@@ -688,7 +721,7 @@ export default {
       });
     };
-    const handleNodeClick = data => {
+    const handleNodeClick = data => { // 树形结构点击回调
       // console.log(data);
       if (data.list) {
         state.userList = data.list;
@@ -704,8 +737,15 @@ export default {
       }
     };
+    /**
+     * 递归查找匹配字段，并修改字段为新值
+     *
+     * @param {object} obj - 修改对象
+     * @param {string} fieldName - 修改字段
+     * @param {any} targetValue - 匹配值
+     * @param {any} newValue - 修改新值
+     */
     function modifyFieldValue(obj, fieldName, targetValue, newValue) {
-      // 遍历相应ID修改选中值
       // 检查当前层级的字段值是否匹配目标值
       if (obj[fieldName] === targetValue) {
         obj["checked"] = newValue;
@@ -719,14 +759,18 @@ export default {
       }
     }
-    const handleCheckedUserListChange = (user, checked) => {
+    const handleCheckedUserListChange = (user, checked) => { // 勾选用户回调
-      // 勾选用户回调
       // 修改选中值状态
       modifyFieldValue(state.userTabs, "id", user.id, checked);
     };
+    /**
+     * 递归获取树形结构下的所有list字段数据
+     *
+     * @param {Array} arr - The array to traverse.
+     * @return {Array} - The list items found.
+     */
     function getAllListItems(arr) {
-      // 遍历递归获取list下面的数据
       var result = [];
       function recursiveGetListItems(subArr) {
@@ -745,8 +789,14 @@ export default {
       return result;
     }
-    const setTagsList = val => {
+    /**
-      let userList = [];
+     * 根据 userTabs 的选中状态，更新 tag 选中列表显示
+     * 获取生成 list 集合的 checked 状态，生成 tags 的勾选显示
+     *
+     * @param {Array} val - userTabs
+     */
+    const setTagsList = (val) => {
+      let userList = []; // 存储所有的list数据
       val.forEach(ele => {
         let data = getAllListItems(ele.data);
         userList.push(data);
@@ -771,20 +821,18 @@ export default {
         });
     };
-    // 监听数据结构选中值变化
+    watch( // TAG: watch state.userTabs 监听数据结构选中值变化
-    watch(
       () => state.userTabs,
       val => {
         if (val) {
-          // 设置tag选中列表
+          // 更新 tags 选中列表显示
           setTagsList(val);
         }
       },
       { deep: true }
     );
-    const handleTagClose = tag => {
+    const handleTagClose = (tag) => { // 移除 tags 成员标签回调
-      // 移除成员标签回调
       state.userTags.splice(state.userTags.indexOf(tag), 1); // 删除标签列表中的项
       // 移除数据结构中的选中值
       modifyFieldValue(state.userTabs, "id", tag.id, false);
@@ -792,55 +840,42 @@ export default {
       let tagsId = state.userTags.map(ele => {
         return ele.id;
       });
-      // console.warn(tagsId);
+      // 处理tags列表和下面选中列表同步问题
-      if (state.is_active_search) { // 搜索状态
+      let checkDataList = [];
-        // 获取tags中已删除的, 勾选列表中还勾选的值
+      if (state.is_active_search) { // 激活搜索状态
-        let result = state.checkedSearchUserList.filter(
+        checkDataList = state.checkedSearchUserList;
-          value => !tagsId.includes(value)
+      } else { // 激活非搜索状态
-        );
+        checkDataList = state.checkedUserList;
-        // 选中列表中不存在勾选列表中项时，需要删除勾选列表中的项
+      }
-        if (result.length) {
+      // 获取 tags 中已删除的, 勾选列表中还勾选的值
-          result.forEach(ele => {
+      let result = checkDataList.filter(
-            state.checkedSearchUserList.splice(
-              state.checkedSearchUserList.indexOf(ele),
-              1
-            );
-          });
-        }
-      } else { // 非搜索状态
-        // 获取tags中已删除的, 勾选列表中还勾选的值
-        let result = state.checkedUserList.filter(
           value => !tagsId.includes(value)
-        );
+      );
-        // 选中列表中不存在勾选列表中项时，需要删除勾选列表中的项
+      // 如果存在不同步的值，需要在列表中删除勾选列表中的项
-        if (result.length) {
+      if (result.length) {
-          result.forEach(ele => {
+        result.forEach(ele => {
-            state.checkedUserList.splice(state.checkedUserList.indexOf(ele), 1);
+          checkDataList.splice(
-          });
+            checkDataList.indexOf(ele),
-        }
+            1
+          );
+        });
       }
-      // console.log(result);
-      // console.log(state.userTags);
-      // console.log(state.checkedUserList);
     };
-    const closeUserForm = () => {
+    const closeUserForm = () => { // 关闭用户列表表单回调
-      // 关闭用户列表表单回调
       state.dialogUserFormVisible = false;
     };
-    const confirmUserForm = () => {
+    const confirmUserForm = () => { // 确认用户列表表单回调
-      // 确认用户列表表单回调
       state.dialogUserFormVisible = false;
       console.log(state.userTags);
     };
-    const activeSearchBtn = () => {
+    const activeSearchBtn = () => { // 激活搜索按钮操作
       state.is_active_search = !state.is_active_search;
-      state.searchUserList = [];
+      state.searchUserList = []; // 清空搜索列表
     };
-    const checkSearchStatus = () => {
+    const checkSearchStatus = () => { // 在搜索框中同步显示tag框选中的用户
-      // 在搜索框中同步显示tag框选中的用户
       state.userTags.forEach(ele => {
         state.searchUserList.forEach(item => {
           if (ele.id === item.id) {
@@ -853,8 +888,7 @@ export default {
         .filter(ele => ele.checked)
         .map(ele => ele.id);
     };
-    const checkUserStatus = () => {
+    const checkUserStatus = () => { // 在搜索框中同步显示tag框选中的用户
-      // 在搜索框中同步显示tag框选中的用户
       state.userTags.forEach(ele => {
         state.userList.forEach(item => {
           if (ele.id === item.id) {
@@ -868,14 +902,13 @@ export default {
         .map(ele => ele.id);
     };
-    const onClearSearch = () => {
+    const onClearSearch = () => { // 清空搜索回调
-      // 清空搜索回调
       state.is_active_search = !state.is_active_search;
       // 同步显示tag框选中的用户
       checkUserStatus();
     };
-    const onSearch = () => {
+    const onSearch = () => { // 搜索回调
-      // TODO: 搜索回调
+      // TODO: 获取后台数据
       state.searchUserList = [
         {
           id: "user-1-1",
@@ -896,41 +929,11 @@ export default {
           disabled: true
         }
       ];
-      // console.log(state.userTags);
+      // 如果 tags 里存在的值，需要在搜索列表中勾选
       checkSearchStatus();
     };
-    onMounted(() => {
+    watch( // TAG: watch state.dialogUserFormVisible 监听弹框显示，修改tab文字宽度
-      // // 显示提示框的标志位
-      // var showConfirmation = true;
-      // // 监听 beforeunload 事件
-      // window.addEventListener('beforeunload', function (event) {
-      //   if (showConfirmation) {
-      //     // 取消事件的默认行为（弹出确认对话框）
-      //     event.preventDefault();
-      //     // Chrome 和 Firefox 需要返回一个值以显示确认对话框
-      //     event.returnValue = '';
-      //     // 显示自定义的提示信息
-      //     var confirmationMessage = '确定要离开此页面吗？';
-      //     (event || window.event).returnValue = confirmationMessage;  // 兼容旧版浏览器
-      //     return confirmationMessage;
-      //   }
-      // });
-      // // 监听 unload 事件
-      // window.addEventListener('unload', function () {
-      //   // 设置标志位为 false，避免在刷新页面时再次显示提示框
-      //   showConfirmation = false;
-      // });
-      // axios.get('/srv/?a=query_form_all_field')
-      // .then(res => {
-      //   console.warn(res.data);
-      // });
-      // $('.el-tabs__nav')
-      // 根据数据获取选中的tag标签
-      setTagsList(state.userTabs);
-    });
-
-    watch(
       () => state.dialogUserFormVisible,
       val => {
         if (val) {
@@ -941,8 +944,16 @@ export default {
       }
     );
+
+    /********** 流程图功能函数 **********/
+
     let editor;
+    /**
+     * Handle the event when a node is double-clicked.
+     *
+     * @param {Object} e - The event object
+     */
     function onDblclickNode(e) {
       const model = G6.Util.clone(e.item.get("model"));
       model.style = model.style || {};
@@ -952,6 +963,11 @@ export default {
       editor.openModel();
     }
+    /**
+     * Handles the double click event on an edge.
+     *
+     * @param {Event} e - The event object representing the double click event.
+     */
     function onDblClickEdge(e) {
       const { source, target, style, labelCfg, label } = e.item.get("model");
       const model = {
@@ -970,15 +986,34 @@ export default {
       editor.openModel();
     }
+    /**
+     * Cancels the operation and closes the editor model.
+     *
+     * @param {}
+     * @return {}
+     */
     function cancel() {
       editor.closeModel();
     }
+    /**
+     * Saves the changes made in the editor.
+     *
+     * @param {type} paramName - description of parameter
+     * @return {type} description of return value
+     */
     function save() {
       editor.updateModel(state.detailModel);
       editor.closeModel();
     }
+    /**
+     * Handles the before delete event of the model.
+     *
+     * @param {Object} model - The model object.
+     * @param {string} type - The type of the model.
+     * @return {Promise} A promise that resolves when the event is handled.
+     */
     async function handleBeforeDelete(model, type) {
       if (type === "node") {
         if (model.label === "开始") {
@@ -991,6 +1026,12 @@ export default {
       }
     }
+    /**
+     * Handles the logic after deleting a model.
+     *
+     * @param {Object} model - The model being deleted.
+     * @param {string} type - The type of the model being deleted.
+     */
     function handleAfterDelete(model, type) {
       if (type === "edge") {
         console.log("delete edge");
@@ -999,6 +1040,13 @@ export default {
       }
     }
+    /**
+     * A function to handle something before adding.
+     *
+     * @param {object} model - The model object.
+     * @param {string} type - The type of the model.
+     * @return {Promise} A promise that resolves to a result or rejects with an error.
+     */
     function handleBeforeAdd(model, type) {
       if (type === "edge") {
         if (model.source === "end-node") {
@@ -1028,6 +1076,11 @@ export default {
       }
     }
+    /**
+     * Logs the data from the editor's graph.
+     *
+     * @return {undefined} No return value.
+     */
     function logData() {
       let { nodes, edges } = editor.editorState.graph.save();
       nodes = nodes.map(