节点属性里面更多属性功能显示新增

hookehuyr
Commit 3b257a35ea9130b1ae61e5068b43e5b074e773a5 3b257a35 1 parent d6736f79
Showing 1 changed file with 176 additions and 5 deletions
doc/App.vue
--- a/doc/App.vue
View file @3b257a3
+++ b/doc/App.vue
View file @3b257a3
@@ -84,6 +84,7 @@
               stretch
             >
               <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem">
+                <div v-if="state.main_attr_set" class="main-attr-set">
                   <el-form-item prop="label">
                     <div slot="label">
                       节点名称 <span style="color: red;">*</span>
@@ -169,11 +170,43 @@
                     </el-row>
                   </el-form-item>
                   <div v-if="state.attr_radio === '更多属性'">
-                  <div>
+                    <div class="more-attr">
-                    <p style="font-size: 14px;">审批意见</p>
+                      <div v-for="(attr, index) in state.more_attr" :key="index" class="more-attr-item">
+                        <p class="title">{{ attr.label }}</p>
+                        <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>
+                              {{ item.btnText }} <span style="color: #838892;">| 原名：{{ item.label }}</span>
+                            </span>
                           </div>
-                  <div>
+                          <div v-else class="left">
-                    <p style="font-size: 14px;">节点操作</p>
+                            <span>
+                              {{ item.label }}
+                            </span>
+                          </div>
+                          <div :class="['right', item.show ? 'active' : '']">{{ item.show? '已开启' : '未开启' }}</div>
+                          <div class="btn-action" @click="setMoreAttr(attr, idx)">
+                            <el-icon :size="14"><Edit /></el-icon>&nbsp;<span>编辑</span>
+                          </div>
+                        </div>
+                      </div>
+                      <!-- <div class="more-attr-item">
+                        <p class="title">节点操作</p>
+                      </div> -->
+                    </div>
+                  </div>
+                </div>
+                <div v-else class="more-attr-set">
+                  <el-button @click="onConfirmMoreAttr(state.more_attr_data)" type="primary" style="width: 100%;">完成</el-button>
+                  <div class="more-attr-switch">
+                    <div class="more-attr-title">{{ state.more_attr_data.label }}</div>
+                    <div><el-switch v-model="state.more_attr_data.show" /></div>
+                  </div>
+                  <p class="more-attr-tip">{{ state.more_attr_data.desc }}</p>
+                  <div v-if="state.more_attr_data.btnText">
+                    <p style="font-size: 14px; font-weight: bold;">按钮文字</p>
+                    <el-input v-model="state.more_attr_data.btnText" />
                   </div>
                 </div>
               </el-tab-pane>
@@ -236,8 +269,10 @@
       </template>
       <!-- 表单底部按钮 -->
       <template v-slot:foot>
+        <div v-if="state.main_attr_set">
           <el-button type="primary" @click="saveForm">保存</el-button>
           <el-button @click="cancel">取消</el-button>
+        </div>
       </template>
     </vue-flow-editor>
   </div>
@@ -388,6 +423,70 @@ export default {
       dialogUserFormVisible: false,
       activeName: 'node',
       attr_radio: '基础属性',
+      main_attr_set: true,
+      more_attr_switch: false,
+      more_attr: [ // 更多属性
+        {
+          id: 'no-1',
+          label: '审批意见',
+          data: [
+            {
+              id: 'text-1',
+              label: '文本意见',
+              show: true,
+              desc: '用户在处理流程时，可通过输入框或快捷选项录入文本意见。',
+              btnText: '',
+            },
+            {
+              id: 'signature-1',
+              label: '手写签名',
+              show: false,
+              desc: '用户在处理流程时，需要签名确认。',
+              btnText: ''
+            },
+          ]
+        },
+        {
+          id: 'no-2',
+          label: '节点操作',
+          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,
+        desc: '',
+        btnText: '',
+      },
       node_name: '', // 节点名称
       userTags: [ // 节点负责人
         { id: "user-1-1", name: "用户1-1" }
@@ -666,6 +765,14 @@ export default {
       editor.closeModel()
     }
+    const setMoreAttr = (attr: any, index: any) => { // 打开更多属性细节回调
+      state.main_attr_set = false;
+      state.more_attr_data = attr['data'][index]; // 同步数据
+    }
+    const onConfirmMoreAttr = (item: any) => { // 保存更多属性细节回调
+      state.main_attr_set = true;
+    }
+
     /**
      * 保存表单信息
      *
@@ -678,7 +785,6 @@ export default {
       //   }
       // })
       state.detailModel.text = state.node_name
-
       // state.detailModel.label = state.node_name
       // 更新流程图信息
       editor.updateModel(state.detailModel)
@@ -686,6 +792,7 @@ export default {
       console.log('节点名称', state.node_name)
       console.log('节点负责人', state.userTags)
       console.log('字段权限', state.field_auths)
+      console.log('更多属性', state.more_attr)
     }
     /**
@@ -916,6 +1023,8 @@ export default {
       onDragEndNode,
       onDblClickEdge,
       cancel,
+      setMoreAttr,
+      onConfirmMoreAttr,
       saveForm,
       handleBeforeDelete,
       handleAfterDelete,
@@ -986,4 +1095,66 @@ body {
     color: #dcdfe6;
   }
 }
+
+.more-attr {
+  .more-attr-item {
+    .title {
+      font-size: 14px;
+      color: #000;
+      margin-bottom: 8px;
+    }
+    .content {
+      font-size: 14px;
+      background: #f0f1f4;
+      border: 1px solid #e6e8ed;
+      border-radius: 2px;
+      padding: 10px;
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .left {
+      }
+      .right {
+      }
+      .active {
+        color: #409eff;
+      }
+    }
+    .content:hover .btn-action {
+      display: flex;
+    }
+    .btn-action {
+      background: hsla(0, 0%, 94%, 0.8);
+      display: none;
+      font-size: 14px;
+      height: 100%;
+      left: 0;
+      position: absolute;
+      text-align: center;
+      top: 0;
+      width: 100%;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+.more-attr-set {
+  .more-attr-switch {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+    align-items: center;
+    .more-attr-title {
+      font-size: 14px;
+      font-weight: bold;
+    }
+  }
+  .more-attr-tip {
+    color: #525967;
+    margin-top: 10px;
+    font-size: 14px;
+  }
+}
 </style>