新增抄送类型节点，抄送节点点击时节点属性不显示

hookehuyr
Commit 3f952699a39b31a0e99a320487956ed074476cb5 3f952699 1 parent 50369aed
Showing 2 changed files with 109 additions and 63 deletions
doc/App.vue
doc/data.js
--- a/doc/App.vue
View file @3f95269
+++ b/doc/App.vue
View file @3f95269
@@ -171,7 +171,11 @@
                   </el-form-item>
                   <div v-if="state.attr_radio === '更多属性'">
                     <div class="more-attr">
-                      <div v-for="(attr, index) in state.more_attr" :key="index" class="more-attr-item">
+                      <div
+                        v-for="(attr, index) in state.more_attr"
+                        :key="index"
+                        class="more-attr-item"
+                      >
                         <div style="display: flex; align-items: center;">
                           <p class="title">{{ attr.label }}</p>&nbsp;
                           <el-tooltip
@@ -182,7 +186,11 @@
                             <el-icon><InfoFilled color="#b5b8be" /></el-icon>
                           </el-tooltip>
                         </div>
-                        <div v-for="(item, idx) in attr.data" :key="idx" class="content">
+                        <div
+                          v-for="(item, idx) in attr.data"
+                          :key="idx"
+                          class="content"
+                        >
                           <div v-if="item.btnText" class="left">
                             <span v-if="item.label === item.btnText">{{ item.label }}</span>
                             <span v-else>
@@ -268,11 +276,16 @@
       <template v-slot:toolbar>
         <el-tooltip content="保存流程图数据">
           <div class="vue-flow-editor-toolbar-item" @click="saveData">
-            <!-- <el-icon><Coin /></el-icon> -->
             <i class="el-icon-coin" style=" margin-top: 4px;" />
             <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">保存</span>
           </div>
         </el-tooltip>
+        <!-- <el-tooltip content="启用流程图数据">
+          <div class="vue-flow-editor-toolbar-item" @click="startFlow">
+            <i class="el-icon-check" style=" margin-top: 4px;" />
+            <span style="font-size: 12px; transform: scale(0.8); margin-top: 2px;">启用</span>
+          </div>
+        </el-tooltip> -->
       </template>
       <!-- 表单底部按钮 -->
       <template v-slot:foot>
@@ -419,6 +432,12 @@ export default {
           color: '#ed8383',
           img: 'https://cdn.ipadbiz.cn/oa/coupon-node.svg',
         },
+        cc: {
+          text: '抄送节点',
+          desc: '抄送节点',
+          color: '#ed8383',
+          img: 'https://cdn.ipadbiz.cn/oa/coupon-node.svg',
+        },
         end: {
           id: 'end-node',
           text: '结束',
@@ -432,64 +451,7 @@ export default {
       attr_radio: '基础属性',
       main_attr_set: true,
       more_attr_switch: false,
-      more_attr: [ // 更多属性
+      more_attr: [], // 更多属性
-        {
-          id: 'no-1',
-          label: '审批意见',
-          desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
-          data: [
-            {
-              id: 'text-1',
-              label: '文本意见',
-              show: true,
-              desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
-              btnText: '',
-            },
-            {
-              id: 'signature-1',
-              label: '手写签名',
-              show: false,
-              desc: '用户在处理流程时，需要签名确认。',
-              btnText: ''
-            },
-          ]
-        },
-        {
-          id: 'no-2',
-          label: '节点操作',
-          desc: '定义流程负责人在处理流程时可以进行的操作',
-          data: [
-            {
-              id: 'node-1',
-              label: '提交',
-              show: true,
-              desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
-              btnText: '提交'
-            },
-            {
-              id: 'node-2',
-              label: '暂存',
-              show: false,
-              desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
-              btnText: '暂存'
-            },
-            {
-              id: 'node-3',
-              label: '撤回',
-              show: false,
-              desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
-              btnText: '撤回'
-            },
-            {
-              id: 'node-4',
-              label: '回退',
-              show: false,
-              desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
-              btnText: '回退'
-            },
-          ],
-        }
-      ],
       more_attr_data: {
         label: '',
         show: false,
@@ -736,8 +698,73 @@ export default {
         // 检查字段权限选中情况
         checkAuthAll('visible');
         checkAuthAll('editable');
+        // TODO: 需要处理更多属性数据，节点类型是抄送时不显示节点操作
+        state.more_attr = [ // 更多属性
+          {
+            id: 'no-1',
+            label: '审批意见',
+            desc: '开启审批意见后，节点负责人处理流程时须按要求填写审批意见',
+            data: [
+              {
+                id: 'text-1',
+                label: '文本意见',
+                show: true,
+                desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
+                btnText: '',
+              },
+              {
+                id: 'signature-1',
+                label: '手写签名',
+                show: false,
+                desc: '用户在处理流程时，需要签名确认。',
+                btnText: ''
+              },
+            ]
+          },
+          {
+            id: 'no-2',
+            label: '节点操作',
+            desc: '定义流程负责人在处理流程时可以进行的操作',
+            data: [
+              {
+                id: 'node-1',
+                label: '提交',
+                show: true,
+                desc: '用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，流程数据流转至后续节点。',
+                btnText: '提交'
+              },
+              {
+                id: 'node-2',
+                label: '暂存',
+                show: false,
+                desc: '暂存后将保存在此节点中对数据的更改，流程不发生流转。',
+                btnText: '暂存'
+              },
+              {
+                id: 'node-3',
+                label: '撤回',
+                show: false,
+                desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
+                btnText: '撤回'
+              },
+              {
+                id: 'node-4',
+                label: '回退',
+                show: false,
+                desc: '开启后，用户在处理流程时点击此按钮，将保存用户在此节点中对数据的更改，同时流程退回到指定的节点中。',
+                btnText: '回退'
+              },
+            ],
+          }
+        ];
+        if (state.detailModel.control === 'cc') {
+          state.more_attr = state.more_attr.filter((ele: any) => {
+            return ele.label !== '节点操作'
+          });
+        }
         // 打开属性表单
-        editor.openModel()
+        state.attr_radio = '基础属性'; // 还原tab默认值
+        editor.openModel();
       } else {
         editor.closeModel()
       }
@@ -1005,6 +1032,10 @@ export default {
       console.log(edges)
     }
+    const startFlow = () => { // 启用流程图
+
+    }
+
     /**
      * 格式化工具栏按钮
      *
@@ -1051,6 +1082,7 @@ export default {
       onConfirmUserView,
       saveData,
+      startFlow,
       toolbarButtonHandler,
       onRef: (e: any) => (editor = e),
--- a/doc/data.js
View file @3f95269
+++ b/doc/data.js
View file @3f95269
 /*
  * @Date: 2023-10-27 09:29:48
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-15 16:16:04
+ * @LastEditTime: 2023-11-17 15:08:51
  * @FilePath: /vue-flow-editor/doc/data.js
  * @Description: 初始化结构，数据都是固定的
  */
@@ -24,6 +24,14 @@ export const AppData = {
             control: 'flow',
         },
         {
+            id: '1700204887203',
+            x: 465,
+            y: 210,
+            text: '抄送节点',
+            desc: '',
+            control: 'cc',
+        },
+        {
             id: 'end-node',
             x: 225,
             y: 335,
@@ -45,5 +53,11 @@ export const AppData = {
             target: 'end-node',
             targetAnchor: 0,
         },
+        {
+            source: '5353453523',
+            sourceAnchor: 3,
+            target: '1700204887203',
+            targetAnchor: 1,
+        },
     ],
 }