新增批量保存节点属性功能

hookehuyr
Commit db3b44a36d8aa70936f6bd0b66bea64d9a23a1a3 db3b44a3 1 parent c751b0b0
Showing 5 changed files with 242 additions and 120 deletions
doc/App.vue
doc/api/index.js
doc/selectUserView.vue
src/shape/control.ts
src/utils/utils.ts
--- a/doc/App.vue
View file @db3b44a
+++ b/doc/App.vue
View file @db3b44a
@@ -455,7 +455,7 @@ import type { FormInstance, FormRules } from 'element-plus'
 import qs from 'qs'
 import { after } from 'lodash-es';
 // import { VueSpinner } from 'vue3-spinners';
-import { flowVersionAPI, saveFlowAPI, flowNodesAPI, enableFlowVersionAPI, flowNodePropertyAPI, saveFlowNodePropertyAPI } from "./api";
+import { flowVersionAPI, saveFlowAPI, flowNodesAPI, enableFlowVersionAPI, flowNodePropertyAPI, saveFlowNodePropertyAPI, saveAllFlowNodePropertyAPI } from "./api";
 const G6 = (window as any).G6.default as any
@@ -519,12 +519,14 @@ export default {
           desc: '拖拽新增流程',
           color: '#ed8383',
           img: 'https://cdn.ipadbiz.cn/oa/flow/icons-flow.png',
+          error: '',
         },
         cc: {
           text: '抄送节点',
           desc: '拖拽新增抄送',
           color: '#ed8383',
           img: 'https://cdn.ipadbiz.cn/oa/flow/icon-cc.png',
+          error: '',
         },
       },
       controlConfig: {
@@ -540,12 +542,14 @@ export default {
           desc: '流程节点',
           color: '#ed8383',
           img: 'https://cdn.ipadbiz.cn/oa/flow/icons-flow.png',
+          error: '',
         },
         cc: {
           text: '抄送节点',
           desc: '抄送节点',
           color: '#ed8383',
           img: 'https://cdn.ipadbiz.cn/oa/flow/icon-cc.png',
+          error: '',
         },
         end: {
           id: 'end-node',
@@ -751,7 +755,7 @@ export default {
           }
         }
       },
-      { immediate: true }
+      // { immediate: true }
     );
     watch(
       () => state.more_attr,
@@ -779,6 +783,7 @@ export default {
      * @param note
      */
     const onSelectFlowVersion = (id: number, code: number, note: string) => {
+      state.node_tree = {}; // 清空当前版本的节点树状态缓存
       state.reloadLoading = true; // 打开loading
       state.select_flow_version = code;
       updateFlowId(id); // 更新缓存flow_id
@@ -1115,8 +1120,7 @@ export default {
     /******************* END *******************/
     const handleNodeNameChange = (val) => {
-      state.detailModel.text = val; // 更新节点名称显示
+      // state.detailModel.text = val; // 更新节点名称显示
-      editor.updateModel(state.detailModel); // 更新流程图信息
     }
     /***************** 用户选择控件弹框 ****************/
@@ -1126,6 +1130,7 @@ export default {
      */
     const openUserForm = () => {
       state.dialogUserFormVisible = true;
+      state.dialogUserTags = state.node_tree[state.detailModel.id].user;
     }
     const onCloseUserView = (status: boolean) => {
@@ -1322,16 +1327,25 @@ export default {
           editor.openModel();
-          // 储存原始节点属性
+          // // 储存原始节点属性
-          state.node_attr = {
+          // state.node_attr = {
-            name: _.cloneDeep(state.node_name),
+          //   name: _.cloneDeep(state.node_name),
-            user: _.cloneDeep(state.userTags),
+          //   user: _.cloneDeep(state.userTags),
-            field: _.cloneDeep(state.field_extend),
+          //   field: _.cloneDeep(state.field_extend),
-            property: _.cloneDeep(state.more_attr)
+          //   property: _.cloneDeep(state.more_attr)
-          }
+          // }
           // 临时保存树信息
-          setNodeTree(model.id, { name: _.cloneDeep(state.node_name), user: _.cloneDeep(state.userTags), field: _.cloneDeep(state.field_auths), property: _.cloneDeep(state.more_attr) });
+          setNodeTree(model.id,
+            {
+              name: _.cloneDeep(state.node_name),
+              user: model_id === 'start-node' ? '' : _.cloneDeep(state.userTags), // 开始节点没有负责人
+              field: _.cloneDeep(state.field_auths),
+              field_extend: _.cloneDeep(state.field_extend),
+              property: _.cloneDeep(state.more_attr),
+              model
+            }
+          );
         } else {
           state.statusLoading = false;
@@ -1424,45 +1438,52 @@ export default {
       state.main_attr_set = true;
     }
-    /**
+    const checkSaveNodeTree = () => { // 检查需要保存的节点树属性
-     * 保存表单信息
+      let models = [];
-     *
+      for (const key in state.node_tree) {
-     */
+        const element = state.node_tree[key];
-    async function saveForm() {
+        let avail_visible_count = element.field.filter((ele) => {
-      if (state.node_name === '') {
-        ElMessage({
-          type: 'error',
-          message: '节点名称不能为空',
-        });
-        return;
-      }
-      if (state.detailModel.id !== 'start-node' && state.userTags.length === 0) {
-        ElMessage({
-          type: 'error',
-          message: '节点负责人不能为空',
-        });
-        return;
-      }
-      let avail_visible_count = state.field_auths.filter((ele) => {
           if (ele.visible.checked && !ele.visible.disabled) {
             return ele;
           }
         });
-      let avail_editable_count = state.field_auths.filter((ele) => {
+        let avail_editable_count = element.field.filter((ele) => {
           if (ele.editable.checked && !ele.editable.disabled) {
             return ele;
           }
         });
-      if (avail_visible_count.length === 0 && avail_editable_count.length === 0) {
+
+        if (
+            (element.name === '') ||
+            (key !=='start-node' && !element.user.length) || // 开始节点不需要检查负责人
+            (avail_visible_count.length === 0 && avail_editable_count.length === 0)
+          ) { // 节点名称为空, 节点负责人不能为空, 请至少选择一个字段权限
+          models.push(element.model);
+        }
+      }
+
+      if (models.length) {
         ElMessage({
           type: 'error',
-          message: '请至少选择一个字段权限',
+          message: '流程配置不完善，请点击节点红点完善。',
         });
-        return;
       }
+
+      // 批量新增节点提示
+      models.forEach(ele => {
+        ele.desc = 'https://cdn.ipadbiz.cn/oa/flow/icons-error1.png';
+        editor.updateModel(ele); // 更新流程图信息
+      });
+
+      return models;
+    }
+
+    const batchSaveForm = async () => { // 批量保存节点信息
+      for (const key in state.node_tree) {
+        const element = state.node_tree[key];
         // 调整数据结构
-      state.field_extend.forEach(ele => {
+        element.field_extend.forEach(ele => {
-        state.field_auths.forEach(auth => {
+          element.field.forEach(auth => {
             if (ele.field_id === auth.field_id) {
               ele.field_extend.visibled = auth.visible.checked;
               ele.field_extend.editabled = auth.editable.checked;
@@ -1470,23 +1491,142 @@ export default {
             }
           })
         });
+        // 没有错误，修改节点名称
+        element.field = element.field_extend; // 字段权限保存需要的数据结构
+        element.model.text = element.name; // 修改节点名称
+        element.model.desc = ''; // 清空节点错误提示
+        editor.updateModel(element.model); // 更新流程图信息
+      }
       let flow_id = getFlowId(); // 流程id
       // TAG: 保存表单信息
-      const { code, data } = await saveFlowNodePropertyAPI({ flow_id: +flow_id, node_code: state.detailModel.id, data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr }) })
+      const { code, data } = await saveAllFlowNodePropertyAPI({ flow_id: +flow_id, data: JSON.stringify(state.node_tree) })
+      if (code) {
+        state.node_tree = {}; // 清空节点树缓存
+        editor.closeModel();
+      }
+    }
+
+    const saveFlowData = async () => { // 保存流程图结构信息
+      let { nodes, edges } = editor.editorState.graph.save();
+
+      // 使用时需要把自定义节点的类型带过去 activity/control
+      nodes.forEach((node: { [x: string]: string; shape: string }) => {
+        if (node.shape === 'control') {
+          node['control'] = node['control']
+        }
+      });
+
+      nodes = nodes.map(
+        ({ data, id, label, shape, x, y, text, desc, img, control }) => ({
+          data,
+          id,
+          label,
+          shape,
+          x,
+          y,
+          text,
+          desc,
+          img,
+          control,
+        }),
+      );
+      edges = edges.map(({ shape, source, sourceAnchor, target, targetAnchor }) => ({
+        shape,
+        source,
+        sourceAnchor,
+        target,
+        targetAnchor,
+      }));
+
+      // 检查路径有效性
+      const paths = [];
+      findPathsToEndNode(edges, 'start-node', [], paths);
+
+      let flow_id = getFlowId(); // 流程id
+
+      if (paths.length) {
+        const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: +flow_id, data: JSON.stringify({ nodes, edges }) });
         if (code) {
           ElMessage({
-          type:'success',
+            type: 'success',
-          message: '保存成功',
+            message: '保存流程图成功',
           });
-        state.detailModel.text = state.node_name; // 更新节点名称显示
+          updateFlowId(data); // 更新缓存flow_id
-        editor.updateModel(state.detailModel); // 更新流程图信息
+          console.log(paths); // 输出满足条件的路径结果数组
-        editor.closeModel();
+        }
+      } else {
+        ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
       }
     }
     /**
+     * 保存表单信息
+     *
+     */
+    // async function saveForm() {
+    //   if (state.node_name === '') {
+    //     ElMessage({
+    //       type: 'error',
+    //       message: '节点名称不能为空',
+    //     });
+    //     return;
+    //   }
+    //   if (state.detailModel.id !== 'start-node' && state.userTags.length === 0) {
+    //     ElMessage({
+    //       type: 'error',
+    //       message: '节点负责人不能为空',
+    //     });
+    //     return;
+    //   }
+    //   let avail_visible_count = state.field_auths.filter((ele) => {
+    //     if (ele.visible.checked && !ele.visible.disabled) {
+    //       return ele;
+    //     }
+    //   });
+    //   let avail_editable_count = state.field_auths.filter((ele) => {
+    //     if (ele.editable.checked && !ele.editable.disabled) {
+    //       return ele;
+    //     }
+    //   });
+    //   if (avail_visible_count.length === 0 && avail_editable_count.length === 0) {
+    //     ElMessage({
+    //       type: 'error',
+    //       message: '请至少选择一个字段权限',
+    //     });
+    //     return;
+    //   }
+    //   // 调整数据结构
+    //   state.field_extend.forEach(ele => {
+    //     state.field_auths.forEach(auth => {
+    //       if (ele.field_id === auth.field_id) {
+    //         ele.field_extend.visibled = auth.visible.checked;
+    //         ele.field_extend.editabled = auth.editable.checked;
+    //         ele.field_extend.readonly = auth.editable.disabled;
+    //       }
+    //     })
+    //   });
+
+    //   let flow_id = getFlowId(); // 流程id
+
+    //   // TODO: 需要一个可以保存多个表单的接口,field字段的结构要重新遍历state.field_extend
+    //   // TODO：只要失焦的话就需要判断表单是否为空，为空需要用户继续填写不能走。
+    //   console.warn(state.node_tree);
+    //   // TAG: 保存表单信息
+    //   const { code, data } = await saveFlowNodePropertyAPI({ flow_id: +flow_id, node_code: state.detailModel.id, data: JSON.stringify({ name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr }) })
+    //   if (code) {
+    //     ElMessage({
+    //       type:'success',
+    //       message: '保存成功',
+    //     });
+    //     state.detailModel.text = state.node_name; // 更新节点名称显示
+    //     editor.updateModel(state.detailModel); // 更新流程图信息
+    //     editor.closeModel();
+    //   }
+    // }
+
+    /**
      * 删除前校验
      *
      * @param {Object} model - The model object.
@@ -1660,19 +1800,19 @@ export default {
       editor.closeModel()
     }
-    const checkFormEdited = () => { // 检查表单是否修改过内容
+    // const checkFormEdited = () => { // 检查表单是否修改过内容
-      state.field_extend.forEach(ele => {
+    //   state.field_extend.forEach(ele => {
-        state.field_auths.forEach(auth => {
+    //     state.field_auths.forEach(auth => {
-          if (ele.field_id === auth.field_id) {
+    //       if (ele.field_id === auth.field_id) {
-            ele.field_extend.visibled = auth.visible.checked;
+    //         ele.field_extend.visibled = auth.visible.checked;
-            ele.field_extend.editabled = auth.editable.checked;
+    //         ele.field_extend.editabled = auth.editable.checked;
-            ele.field_extend.readonly = auth.editable.disabled;
+    //         ele.field_extend.readonly = auth.editable.disabled;
-          }
+    //       }
-        })
+    //     })
-      });
+    //   });
-      return  _.isEqual(state.node_attr, {name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr})
+    //   return  _.isEqual(state.node_attr, {name: state.node_name, user: state.userTags, field: state.field_extend, property: state.more_attr})
-    }
+    // }
     /**
      * 拖动节点结束回调
@@ -1703,11 +1843,14 @@ export default {
      *
      * @return {void} No return value.
      */
-    function saveData(): void {
+    const saveData = async () => {
-      // 如果表单打开状态，走表单保存逻辑
+      if (checkSaveNodeTree().length) {
-      if (state.detailModel) {
+        return;
+      }
+
+      if (_.isEmpty(state.node_tree)) {
         ElMessageBox.confirm(
-          '是否确定保存流程信息?',
+          '是否确定保存流程?',
           '温馨提示',
           {
             confirmButtonText: '确认',
@@ -1716,46 +1859,13 @@ export default {
           }
         )
           .then(async () => {
-            saveForm();
+            saveFlowData();
           })
           .catch(() => {
           });
-        return;
+      } else {
-      }
-
-      let { nodes, edges } = editor.editorState.graph.save();
-
-      // 使用时需要把自定义节点的类型带过去 activity/control
-      nodes.forEach((node: { [x: string]: string; shape: string }) => {
-        if (node.shape === 'control') {
-          node['control'] = node['control']
-        }
-      });
-
-      nodes = nodes.map(
-        ({ data, id, label, shape, x, y, text, desc, img, control }) => ({
-          data,
-          id,
-          label,
-          shape,
-          x,
-          y,
-          text,
-          desc,
-          img,
-          control,
-        }),
-      );
-      edges = edges.map(({ shape, source, sourceAnchor, target, targetAnchor }) => ({
-        shape,
-        source,
-        sourceAnchor,
-        target,
-        targetAnchor,
-      }));
-
         ElMessageBox.confirm(
-        '是否确定保存流程图?',
+          '是否确定保存流程?',
           '温馨提示',
           {
             confirmButtonText: '确认',
@@ -1764,29 +1874,13 @@ export default {
           }
         )
           .then(async () => {
-          // 检查路径有效性
+            batchSaveForm();
-          const paths = [];
+            saveFlowData();
-          findPathsToEndNode(edges, 'start-node', [], paths);
-
-          let flow_id = getFlowId(); // 流程id
-
-          if (paths.length) {
-            const { code, data } = await saveFlowAPI({ form_id: +form_id, flow_id: +flow_id, data: JSON.stringify({ nodes, edges }) });
-            if (code) {
-              ElMessage({
-                type: 'success',
-                message: '保存流程图成功',
-              });
-              updateFlowId(data); // 更新缓存flow_id
-              console.log(paths); // 输出满足条件的路径结果数组
-            }
-          } else {
-            ElNotification.error('缺少一条从开始节点到结束节点的完整流程！');
-          }
           })
           .catch(() => {
           });
       }
+    }
     const startFlow = () => { // 启用流程图
@@ -1856,7 +1950,7 @@ export default {
       cancel,
       setMoreAttr,
       onConfirmMoreAttr,
-      saveForm,
+      // saveForm,
       handleBeforeDelete,
       handleAfterDelete,
       handleBeforeAdd,
--- a/doc/api/index.js
View file @db3b44a
+++ b/doc/api/index.js
View file @db3b44a
 /*
  * @Date: 2023-11-30 10:34:01
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-02 15:08:01
+ * @LastEditTime: 2023-12-06 11:36:04
  * @FilePath: /vue-flow-editor/doc/api/index.js
  * @Description: 文件描述
  */
@@ -14,6 +14,7 @@ const Api = {
   ENABLE_FLOW_VERSION: '/admin/?a=enable_flow_version',
   FLOW_NODE_PROPERTY: '/admin/?a=flow_node_property',
   SAVE_FLOW_NODE_PROPERTY: '/admin/?a=save_node_property',
+  SAVE_ALL_FLOW_NODE_PROPERTY: '/admin/?a=save_all_node_property',
 }
 /**
@@ -64,3 +65,11 @@ export const flowNodePropertyAPI = (params) => fn(fetch.get(Api.FLOW_NODE_PROPER
  * @returns
  */
 export const saveFlowNodePropertyAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_FLOW_NODE_PROPERTY, params));
+
+/**
+ * @description: 保存所有节点属性
+ * @param {*} flow_id 流程 ID
+ * @param {*} data 节点属性的数据，json格式字符串
+ * @returns
+ */
+export const saveAllFlowNodePropertyAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_ALL_FLOW_NODE_PROPERTY, params));
--- a/doc/selectUserView.vue
View file @db3b44a
+++ b/doc/selectUserView.vue
View file @db3b44a
 <!--
  * @Date: 2023-11-01 10:18:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-24 16:23:41
+ * @LastEditTime: 2023-12-06 12:52:57
  * @FilePath: /vue-flow-editor/doc/selectUserView.vue
  * @Description: 成员列表选择控件
 -->
@@ -411,6 +411,18 @@ watch(
       nextTick(() => {
         tabTextWidth.value = $("#" + activeTabId.value).width() + "px";
       });
+      userTags.value = _.cloneDeep(props.list);
+      // 第一项目是组织结构树，默认展开第一个节点
+      if (userTabs.value[activeTabIdx.value]['type'] === 'corp-tree') {
+        if (userTabs.value[activeTabIdx.value]['data'].length) {
+          // 默认展开第一个节点
+          defaultExpandedKeys.value = [userTabs.value[activeTabIdx.value]['data'][0]['id']];
+          // 把用户选中的节点注入树结构显示选中状态
+          nextTick(() => {
+            currentCheckedNodeKey.value = userTags.value.map(ele => ele.id);
+          });
+        }
+      }
     }
   }
 );
--- a/src/shape/control.ts
View file @db3b44a
+++ b/src/shape/control.ts
View file @db3b44a
 /*
  * @Date: 2023-10-27 09:29:59
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-14 15:31:33
+ * @LastEditTime: 2023-12-06 09:51:19
  * @FilePath: /vue-flow-editor/src/shape/control.ts
  * @Description: 自定义控制节点
  */
@@ -53,7 +53,8 @@ export function registerControl(G6) {
         },
         drawShape(cfg, group) { // 继承了基类，可以使用drawShape，如果没有继承，必须要有draw
-            let {text, desc, img, color} = cfg
+            let {text, desc, img, error, color} = cfg
+
             color = color || BASE_COLOR
             desc = desc || '无描述'
@@ -77,6 +78,10 @@ export function registerControl(G6) {
                     type: 'image',
                     attrs: {x: height / 4 - width / 2, y: height / 4 - height / 2, width: height / 2, height: height / 2, img},
                 },
+                error: {
+                    type: 'image',
+                    attrs: {x: height / 4 + width / 4 + 5, y: height / 4 - height / 2, width: height / 2.1, height: height / 2.1, img: error},
+                },
                 label: {
                     type: 'text',
                     attrs: {text, x: height - width / 2, y: height * (4 / 8) - height / 2, fontSize: 14, textAlign: 'left', textBaseline: 'middle', fill: 'black'},
@@ -111,6 +116,7 @@ export function registerControl(G6) {
             group = group.getContainer()
             // group.shapes.sideRect.attr({fill: cfg.color})
             group.shapes.img.attr({img: cfg.img})
+            group.shapes.error.attr({img: cfg.desc})
             group.shapes.label.attr({text: cfg.text})
             // group.shapes.desc.attr({text: cfg.desc})
         },
--- a/src/utils/utils.ts
View file @db3b44a
+++ b/src/utils/utils.ts
View file @db3b44a
@@ -157,6 +157,7 @@ export function formatNodeModel_control(model: any, controlConfig: object) {
         // 把 control 的配置挂到model上
         model.shape = 'control'
         model.img = controlConfig[control].img
+        model.error = controlConfig[control].error
         model.color = controlConfig[control].color
     }