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

@@ -84,96 +84,129 @@
               stretch
               stretch
             >
             >
               <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem">
               <el-tab-pane label="节点属性" name="node" style="padding: 0 1rem">
-                <el-form-item prop="label">
-                  <div slot="label">
-                    节点名称 <span style="color: red;">*</span>
+                <div v-if="state.main_attr_set" class="main-attr-set">
+                  <el-form-item prop="label">
+                    <div slot="label">
+                      节点名称 <span style="color: red;">*</span>
+                    </div>
+                    <el-input v-model="state.node_name" />
+                  </el-form-item>
+                  <div class="node-user">
+                    <div style="font-size: 14px; margin-bottom: 10px;">
+                      节点负责人 <span style="color: red;">*</span>
+                    </div>
+                    <div class="flow-tag__wrapper" @click="openUserForm">
+                      <el-tag
+                        v-if="state.userTags.length"
+                        v-for="tag in state.userTags"
+                        :key="tag.name"
+                        style="margin-left: 0.25rem; margin-right: 0.25rem;"
+                      >
+                        {{ tag.name }}
+                      </el-tag>
+                      <div v-else class="text-empty">请选择成员</div>
+                    </div>
                   </div>
                   </div>
-                  <el-input v-model="state.node_name" />
-                </el-form-item>
-                <div class="node-user">
-                  <div style="font-size: 14px; margin-bottom: 10px;">
-                    节点负责人 <span style="color: red;">*</span>
-                  </div>
-                  <div class="flow-tag__wrapper" @click="openUserForm">
-                    <el-tag
-                      v-if="state.userTags.length"
-                      v-for="tag in state.userTags"
-                      :key="tag.name"
-                      style="margin-left: 0.25rem; margin-right: 0.25rem;"
+                  <el-form-item prop="attr">
+                    <el-radio-group
+                      v-model="state.attr_radio"
+                      size="large"
+                      class="attr-radio-group"
+                    >
+                      <el-radio-button label="基础属性" />
+                      <el-radio-button label="更多属性" />
+                    </el-radio-group>
+                  </el-form-item>
+                  <el-form-item v-if="state.attr_radio === '基础属性'" prop="">
+                    <div slot="label">
+                      字段权限 <span style="color: red;">*</span>
+                    </div>
+                    <el-row
+                      style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"
                     >
                     >
-                      {{ tag.name }}
-                    </el-tag>
-                    <div v-else class="text-empty">请选择成员</div>
+                      <el-col :span="12">字段</el-col>
+                      <el-col :span="6">可见</el-col>
+                      <el-col :span="6">可编辑</el-col>
+                    </el-row>
+                    <el-row style="width: 100%; padding-left: 10px;">
+                      <el-col :span="12" style="color: #409eff;">全选</el-col>
+                      <el-col :span="6" style="padding-left: 5px;"
+                        ><el-checkbox
+                          @change="onAuthAllChange"
+                          v-model="state.auth_all_checked"
+                          label=""
+                          size="large"
+                      /></el-col>
+                      <el-col :span="6" style="padding-left: 5px;"
+                        ><el-checkbox
+                          @change="onAuthAllEditChange"
+                          v-model="state.auth_all_edit"
+                          label=""
+                          size="large"
+                      /></el-col>
+                    </el-row>
+                    <el-row
+                      v-for="(field, index) in state.field_auths"
+                      :key="index"
+                      style="width: 100%; padding-left: 10px;"
+                    >
+                      <el-col :span="12" style="">{{ field.name }}</el-col>
+                      <el-col :span="6" style="padding-left: 5px;"
+                        ><el-checkbox
+                          v-model="field.visible.checked"
+                          :disabled="field.visible.disabled"
+                          label=""
+                          size="large"
+                          @change="onAuthVisibleChange(field, index)"
+                      /></el-col>
+                      <el-col :span="6" style="padding-left: 5px;"
+                        ><el-checkbox
+                          v-model="field.editable.checked"
+                          :disabled="field.editable.disabled"
+                          label=""
+                          size="large"
+                          @change="onAuthEditableChange(field, index)"
+                      /></el-col>
+                    </el-row>
+                  </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">
+                        <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 v-else class="left">
+                            <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>
                 </div>
-                <el-form-item prop="attr">
-                  <el-radio-group
-                    v-model="state.attr_radio"
-                    size="large"
-                    class="attr-radio-group"
-                  >
-                    <el-radio-button label="基础属性" />
-                    <el-radio-button label="更多属性" />
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item v-if="state.attr_radio === '基础属性'" prop="">
-                  <div slot="label">
-                    字段权限 <span style="color: red;">*</span>
-                  </div>
-                  <el-row
-                    style="width: 100%; background-color: #f0f1f4; padding-left: 10px;"
-                  >
-                    <el-col :span="12">字段</el-col>
-                    <el-col :span="6">可见</el-col>
-                    <el-col :span="6">可编辑</el-col>
-                  </el-row>
-                  <el-row style="width: 100%; padding-left: 10px;">
-                    <el-col :span="12" style="color: #409eff;">全选</el-col>
-                    <el-col :span="6" style="padding-left: 5px;"
-                      ><el-checkbox
-                        @change="onAuthAllChange"
-                        v-model="state.auth_all_checked"
-                        label=""
-                        size="large"
-                    /></el-col>
-                    <el-col :span="6" style="padding-left: 5px;"
-                      ><el-checkbox
-                        @change="onAuthAllEditChange"
-                        v-model="state.auth_all_edit"
-                        label=""
-                        size="large"
-                    /></el-col>
-                  </el-row>
-                  <el-row
-                    v-for="(field, index) in state.field_auths"
-                    :key="index"
-                    style="width: 100%; padding-left: 10px;"
-                  >
-                    <el-col :span="12" style="">{{ field.name }}</el-col>
-                    <el-col :span="6" style="padding-left: 5px;"
-                      ><el-checkbox
-                        v-model="field.visible.checked"
-                        :disabled="field.visible.disabled"
-                        label=""
-                        size="large"
-                        @change="onAuthVisibleChange(field, index)"
-                    /></el-col>
-                    <el-col :span="6" style="padding-left: 5px;"
-                      ><el-checkbox
-                        v-model="field.editable.checked"
-                        :disabled="field.editable.disabled"
-                        label=""
-                        size="large"
-                        @change="onAuthEditableChange(field, index)"
-                    /></el-col>
-                  </el-row>
-                </el-form-item>
-                <div v-if="state.attr_radio === '更多属性'">
-                  <div>
-                    <p style="font-size: 14px;">审批意见</p>
+                <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>
                   </div>
-                  <div>
-                    <p style="font-size: 14px;">节点操作</p>
+                  <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>
                 </div>
                 </div>
               </el-tab-pane>
               </el-tab-pane>
@@ -236,8 +269,10 @@
       </template>
       </template>
       <!-- 表单底部按钮 -->
       <!-- 表单底部按钮 -->
       <template v-slot:foot>
       <template v-slot:foot>
-        <el-button type="primary" @click="saveForm">保存</el-button>
-        <el-button @click="cancel">取消</el-button>
+        <div v-if="state.main_attr_set">
+          <el-button type="primary" @click="saveForm">保存</el-button>
+          <el-button @click="cancel">取消</el-button>
+        </div>
       </template>
       </template>
     </vue-flow-editor>
     </vue-flow-editor>
   </div>
   </div>
@@ -388,6 +423,70 @@ export default {
       dialogUserFormVisible: false,
       dialogUserFormVisible: false,
       activeName: 'node',
       activeName: 'node',
       attr_radio: '基础属性',
       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: '', // 节点名称
       node_name: '', // 节点名称
       userTags: [ // 节点负责人
       userTags: [ // 节点负责人
         { id: "user-1-1", name: "用户1-1" }
         { id: "user-1-1", name: "用户1-1" }
@@ -666,6 +765,14 @@ export default {
       editor.closeModel()
       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.text = state.node_name
-
       // state.detailModel.label = state.node_name
       // state.detailModel.label = state.node_name
       // 更新流程图信息
       // 更新流程图信息
       editor.updateModel(state.detailModel)
       editor.updateModel(state.detailModel)
@@ -686,6 +792,7 @@ export default {
       console.log('节点名称', state.node_name)
       console.log('节点名称', state.node_name)
       console.log('节点负责人', state.userTags)
       console.log('节点负责人', state.userTags)
       console.log('字段权限', state.field_auths)
       console.log('字段权限', state.field_auths)
+      console.log('更多属性', state.more_attr)
     }
     }
 
 
     /**
     /**
@@ -916,6 +1023,8 @@ export default {
       onDragEndNode,
       onDragEndNode,
       onDblClickEdge,
       onDblClickEdge,
       cancel,
       cancel,
+      setMoreAttr,
+      onConfirmMoreAttr,
       saveForm,
       saveForm,
       handleBeforeDelete,
       handleBeforeDelete,
       handleAfterDelete,
       handleAfterDelete,
@@ -986,4 +1095,66 @@ body {
     color: #dcdfe6;
     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>
 </style>