仿钉钉设计流程：增加字段权限设置

src/components/SimpleProcessDesigner/src/addNode.vue

@@ -70,6 +70,10 @@ let props = defineProps({
   showAddButton:{
     type:Boolean,
     default:true
+  },
+  defaultFieldsPermission : {
+    type: Array,
+    default: () => ([])
   }
 })
 let emits = defineEmits(['update:childNodeP'])
@@ -78,6 +82,7 @@ const addType = (type: number) => {
   visible.value = false
   // 审核节点
   if (type === NodeType.APPROVE_USER_NODE) {
+    console.log("props.defaultFieldsPermission", props.defaultFieldsPermission)
     const data = {
       name: '审核人',
       error: true,
@@ -86,7 +91,8 @@ const addType = (type: number) => {
       attributes: {
         approveMethod: undefined,
         candidateStrategy: undefined,
-        candidateParam: undefined
+        candidateParam: undefined,
+        fieldsPermission: props.defaultFieldsPermission,
       },
       childNode: props.childNodeP
     }

src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/html-self-closing -->
 <template>
   <el-drawer
     :append-to-body="true"
@@ -5,152 +6,218 @@
     :show-close="false"
     :size="550"
     :before-close="saveConfig"
+    class="justify-start"
   >
     <template #header>
-      <div class="user-task-header">审批设置</div>
+      <div class="w-full flex flex-col">
+        <span class="text-size-2xl">审批设置</span>
+        <el-divider />
+      </div>
     </template>
-    <div>
-      <el-form label-position="top" label-width="100px">
-        <el-form-item label="审批方式" prop="approveMethod">
-          <el-select v-model="candidateConfig.approveMethod" style="width: 100%" clearable>
-            <el-option
-              v-for="dict in approveMethods"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
+    <el-tabs type="border-card">
+      <el-tab-pane label="审批人">
+        <div>
+          <el-form label-position="top" label-width="100px">
+            <el-form-item label="审批方式" prop="approveMethod">
+              <el-select v-model="candidateConfig.approveMethod" style="width: 100%" clearable>
+                <el-option
+                  v-for="dict in approveMethods"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
 
-        <el-form-item label="审批人规则类型" prop="candidateStrategy">
-          <el-select v-model="candidateConfig.candidateStrategy" style="width: 100%" clearable @change="changecandidateStrategy">
-            <el-option
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
+            <el-form-item label="审批人规则类型" prop="candidateStrategy">
+              <el-select
+                v-model="candidateConfig.candidateStrategy"
+                style="width: 100%"
+                clearable
+                @change="changecandidateStrategy"
+              >
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_CANDIDATE_STRATEGY)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
 
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy == 10"
-          label="指定角色"
-          prop="candidateParam"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in roleOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy == 20 || candidateConfig.candidateStrategy == 21"
-          label="指定部门"
-          prop="candidateParam"
-          span="24"
-        >
-          <el-tree-select
-            ref="treeRef"
-            v-model="candidateConfig.candidateParam"
-            :data="deptTreeOptions"
-            :props="defaultProps"
-            empty-text="加载中，请稍后"
-            multiple
-            node-key="id"
-            style="width: 100%"
-            show-checkbox
-          />
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy == 22"
-          label="指定岗位"
-          prop="candidateParam"
-          span="24"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in postOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="
-            candidateConfig.candidateStrategy == 30 ||
-            candidateConfig.candidateStrategy == 31 ||
-            candidateConfig.candidateStrategy == 32
-          "
-          label="指定用户"
-          prop="candidateParam"
-          span="24"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in userOptions"
-              :key="item.id"
-              :label="item.nickname"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy === 40"
-          label="指定用户组"
-          prop="candidateParam"
-        >
-          <el-select
-            v-model="candidateConfig.candidateParam"
-            clearable
-            multiple
-            style="width: 100%"
-          >
-            <el-option
-              v-for="item in userGroupOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="candidateConfig.candidateStrategy === 60"
-          label="流程表达式"
-          prop="candidateParam"
-        >
-          <el-input
-            type="textarea"
-            v-model="candidateConfig.candidateParam[0]"
-            clearable
-            style="width: 100%"
-          />
-        </el-form-item>
-      </el-form>
-    </div>
-    <div class="demo-drawer__footer clear">
-      <el-button type="primary" @click="saveConfig">确 定</el-button>
-      <el-button @click="closeDrawer">取 消</el-button>
-    </div>
+            <el-form-item
+              v-if="candidateConfig.candidateStrategy == 10"
+              label="指定角色"
+              prop="candidateParam"
+            >
+              <el-select
+                v-model="candidateConfig.candidateParam"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in roleOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                candidateConfig.candidateStrategy == 20 || candidateConfig.candidateStrategy == 21
+              "
+              label="指定部门"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-tree-select
+                ref="treeRef"
+                v-model="candidateConfig.candidateParam"
+                :data="deptTreeOptions"
+                :props="defaultProps"
+                empty-text="加载中，请稍后"
+                multiple
+                node-key="id"
+                style="width: 100%"
+                show-checkbox
+              />
+            </el-form-item>
+            <el-form-item
+              v-if="candidateConfig.candidateStrategy == 22"
+              label="指定岗位"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-select
+                v-model="candidateConfig.candidateParam"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in postOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                candidateConfig.candidateStrategy == 30 ||
+                candidateConfig.candidateStrategy == 31 ||
+                candidateConfig.candidateStrategy == 32
+              "
+              label="指定用户"
+              prop="candidateParam"
+              span="24"
+            >
+              <el-select
+                v-model="candidateConfig.candidateParam"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in userOptions"
+                  :key="item.id"
+                  :label="item.nickname"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="candidateConfig.candidateStrategy === 40"
+              label="指定用户组"
+              prop="candidateParam"
+            >
+              <el-select
+                v-model="candidateConfig.candidateParam"
+                clearable
+                multiple
+                style="width: 100%"
+              >
+                <el-option
+                  v-for="item in userGroupOptions"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="candidateConfig.candidateStrategy === 60"
+              label="流程表达式"
+              prop="candidateParam"
+            >
+              <el-input
+                type="textarea"
+                v-model="candidateConfig.candidateParam[0]"
+                clearable
+                style="width: 100%"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="设置字段权限">
+        <div class="field-setting-pane h-full w-full flex flex-col">
+          <div class="field-setting-content mr-2 overflow-auto py-4 pr-2">
+            <div class="field-container flex flex-col flex-items-start">
+              <div class="mb-2 ml-4 font-bold">字段权限</div>
+              <div class="field-body ml-4 mt-2">
+                <div class="field-permit-box text-size--13px">
+                  <div class="field-permit-title">
+                    <span class="setting-title-label">组件名称</span>
+                    <span class="setting-title-label">可编辑</span>
+                    <span class="setting-title-label">只读</span>
+                    <span class="setting-title-label">隐藏</span>
+                  </div>
+                  <div class="field-setting-item">
+                    <span class="field-setting-item-label">全选</span>
+                    <span class="all-checkbox-wrap">
+                      <el-checkbox label="" size="large" />
+                    </span>
+                    <span class="all-checkbox-wrap">
+                      <el-checkbox label="" size="large" />
+                    </span>
+                    <span class="all-checkbox-wrap">
+                      <el-checkbox label="" size="large" />
+                    </span>
+                  </div>
+                  <div class="field-setting-item-check">
+                    <div class="field-setting-item" v-for="(item,index) in candidateConfig.fieldsPermission" :key="index">
+                      <span class="field-setting-item-label"> {{ item.title }}</span>
+                      <el-radio-group v-model="item.permission" >
+                        <div class="item-radio-wrap">
+                            <el-radio value="1"  size="large" label="1"/>
+                        </div>
+                        <div class="item-radio-wrap">
+                            <el-radio value="2"  size="large" label="2"/>
+                        </div>
+                        <div class="item-radio-wrap">
+                            <el-radio value="3"  size="large" label="3"/>
+                        </div>
+                      </el-radio-group>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+
+    <template #footer>
+      <el-divider />
+      <div>
+        <el-button type="primary" @click="saveConfig">确 定</el-button>
+        <el-button @click="closeDrawer">取 消</el-button>
+      </div>
+    </template>
   </el-drawer>
 </template>
 <script lang="ts" setup>
@@ -173,12 +240,13 @@ const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 const candidateConfig = ref({
   candidateStrategy: undefined,
   candidateParam: [],
-  approveMethod: undefined
+  approveMethod: undefined,
+  fieldsPermission:[]
 })
-let approverConfig = ref({})
+// let approverConfig = ref({})
 let store = useWorkFlowStoreWithOut()
 let { setApproverDrawer, setUserTaskConfig } = store
-let approverConfig1 = computed(() => store.approverConfig1)
+// let approverConfig1 = computed(() => store.approverConfig1)
 let approverDrawer = computed(() => store.approverDrawer)
 const userTaskConfig = computed(() => store.userTaskConfig)
 
@@ -192,34 +260,34 @@ let visible = computed({
 })
 watch(userTaskConfig, (val) => {
   if (val.value.attributes) {
-    console.log('val.value.attributes', val.value.attributes);
     candidateConfig.value.approveMethod = val.value.attributes.approveMethod
     candidateConfig.value.candidateStrategy = val.value.attributes.candidateStrategy
-    const candidateParamStr =  val.value.attributes.candidateParam;
-    if(val.value.attributes.candidateStrategy === 60) {
+    const candidateParamStr = val.value.attributes.candidateParam
+    if (val.value.attributes.candidateStrategy === 60) {
       candidateConfig.value.candidateParam = [candidateParamStr]
     } else {
-      if(candidateParamStr){
-        candidateConfig.value.candidateParam =  candidateParamStr.split(',').map((item) => +item)
+      if (candidateParamStr) {
+        candidateConfig.value.candidateParam = candidateParamStr.split(',').map((item) => +item)
       }
     }
-    
-    // candidateConfig.value = val.value.attributes
+    console.log('val.value.attributes.fieldsPermission', val.value.attributes.fieldsPermission)
+    candidateConfig.value.fieldsPermission = val.value.attributes.fieldsPermission
   }
 })
-watch(approverConfig1, (val) => {
-  approverConfig.value = val.value
-})
+// watch(approverConfig1, (val) => {
+//   approverConfig.value = val.value
+// })
 
 const saveConfig = () => {
   const rawConfig = toRaw(userTaskConfig.value)
-  const { approveMethod, candidateStrategy , candidateParam} = toRaw(candidateConfig.value);
+  const { approveMethod, candidateStrategy, candidateParam, fieldsPermission } = toRaw(candidateConfig.value)
   const candidateParamStr = candidateParam.join(',')
   rawConfig.value.attributes = {
     approveMethod,
     candidateStrategy,
-    candidateParam: candidateParamStr
-  } 
+    candidateParam: candidateParamStr,
+    fieldsPermission: fieldsPermission
+  }
   rawConfig.flag = true
   // TODO 进行校验
   // setApproverConfig({
@@ -230,7 +298,7 @@ const saveConfig = () => {
   setUserTaskConfig({
     value: rawConfig.value,
     flag: true,
-    id: userTaskConfig.value.id,
+    id: userTaskConfig.value.id
   })
   closeDrawer()
 }
@@ -253,10 +321,84 @@ onMounted(async () => {
   deptTreeOptions.value = handleTree(deptOptions, 'id')
   // 获得用户组列表
   userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
+
 })
 </script>
 <style lang="scss" scoped>
-.user-task-header {
-  font-size: 16px !important;
+// ::v-deep .el-drawer__header {
+//   margin-bottom: 2px;
+// }
+.field-permit-title {
+  height: 45px;
+  padding: 0 0 0 12px;
+  line-height: 32px;
+  background-color: rgba(248, 250, 252, 0.04);
+  border: 1px solid rgba(31, 56, 88, 0.1);
+
+  .setting-title-label:first-child {
+    text-align: left;
+  }
+
+  .setting-title-label {
+    display: inline-block;
+    width: 110px;
+    padding: 5px 0;
+    font-size: 13px;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.6);
+    text-align: center;
+  }
 }
+
+.field-setting-item {
+  display: flex;
+  align-items: center;
+  height: 38px;
+  padding-bottom: 0;
+  padding-left: 12px;
+  line-height: 38px;
+  border-right: 1px solid rgba(31, 56, 88, 0.1);
+  border-bottom: 1px solid rgba(31, 56, 88, 0.1);
+  border-left: 1px solid rgba(31, 56, 88, 0.1);
+
+  .no-label {
+    font-size: 0;
+  }
+
+  .field-setting-item-label {
+    display: inline-block;
+    width: 110px;
+    min-height: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: text;
+  }
+
+  .all-checkbox-wrap {
+    display: inline-block;
+    width: 110px;
+    text-align: center;
+  }
+
+  .item-radio-wrap {
+    display: inline-block;
+    width: 110px;
+    padding-left: 6px;
+    text-align: center;
+  }
+
+}
+
+::v-deep(.el-radio__label) {  
+  opacity: 0; /* 隐藏标签文本 */  
+}
+
+::v-deep(.el-divider--horizontal) {  
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin: 4px 0;
+  border-top: 1px var(--el-border-color) var(--el-border-style);
+} 
 </style>

src/components/SimpleProcessDesigner/src/nodeWrap.vue

@@ -44,7 +44,7 @@
         <i class="anticon anticon-exclamation-circle"></i>
       </div>
     </div>
-    <addNode v-model:childNodeP="nodeConfig.childNode" />
+    <addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 4">
     <div class="branch-box-wrap">
@@ -92,10 +92,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode" />
+              <addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
           <template v-if="index == 0">
             <div class="top-left-cover-line"></div>
             <div class="bottom-left-cover-line"></div>
@@ -106,7 +106,7 @@
           </template>
         </div>
       </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" />
+      <addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
     </div>
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 5">
@@ -137,10 +137,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode" />
+              <addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission" />
           <template v-if="index == 0">
             <div class="top-left-cover-line"></div>
             <div class="bottom-left-cover-line"></div>
@@ -151,7 +151,7 @@
           </template>
         </div>
       </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
+      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" :default-fields-permission="props.defaultFieldsPermission"/>
     </div>
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 7">
@@ -186,10 +186,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode" />
+              <addNode v-model:childNodeP="item.childNode"  :default-fields-permission="props.defaultFieldsPermission"/>
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission" />
           <template v-if="index == 0">
             <div class="top-left-cover-line"></div>
             <div class="bottom-left-cover-line"></div>
@@ -200,7 +200,7 @@
           </template>
         </div>
       </div>
-      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
+      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" :default-fields-permission="props.defaultFieldsPermission" />
     </div>
   </div>
   <div class="node-wrap" v-if="nodeConfig.type === NodeType.PARALLEL_NODE_JOIN || nodeConfig.type === NodeType.INCLUSIVE_NODE_JOIN">
@@ -209,9 +209,9 @@
         <div class="text">聚合</div>
       </div>
     </div>
-    <addNode v-model:childNodeP="nodeConfig.childNode" />
+    <addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
   </div>
-  <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
+  <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
 </template>
 <script lang="ts" setup>
 import addNode from './addNode.vue'
@@ -232,6 +232,10 @@ let props = defineProps({
   nodeConfig: {
     type: Object as () => WorkFlowNode,
     default: () => ({}) as WorkFlowNode
+  },
+  defaultFieldsPermission : {
+    type: Array,
+    default: () => ([])
   }
 })