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

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/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: () => ([])
   }
 })
 

src/views/bpm/simpleWorkflow/index.vue

@@ -12,7 +12,7 @@
           <div class="start-event-node-circle">开始</div>
         </div>
         <div class="start-event-node-line"></div>
-        <nodeWrap v-model:nodeConfig="nodeConfig" />
+        <nodeWrap v-model:nodeConfig="nodeConfig" :defaultFieldsPermission="defaultFieldsPermission" />
         <!-- <div class="end-node">
           <div class="end-node-circle"></div>
           <div class="end-node-text">流程结束</div>
@@ -23,7 +23,7 @@
       </div>
     </section>
   </div>
-  <approverDrawer />
+  <approverDrawer/>
   <copyerDrawer />
 </template>
 <script lang="ts" setup>
@@ -33,6 +33,8 @@ import copyerDrawer from '@/components/SimpleProcessDesigner/src/drawer/copyerDr
 import { WorkFlowNode } from '@/components/SimpleProcessDesigner/src/consts'
 import { ref } from 'vue'
 import { saveBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
+import { getModel } from '@/api/bpm/model'
+import { getForm, FormVO } from '@/api/bpm/form'
 defineOptions({ name: 'SimpleWorkflowDesignEditor' })
 const uid = getCurrentInstance().uid
 const router = useRouter() // 路由
@@ -40,33 +42,33 @@ const { query } = useRoute() // 路由的查询
 const modelId = query.modelId
 const message = useMessage() // 国际化
 const nodeConfig = ref<WorkFlowNode>({
-    name: '发起人',
-    type: 0,
-    id: 'StartEvent_' + uid,
-    childNode: undefined,
-    attributes: undefined,
-    conditionNodes: undefined
-  }
-)
+  name: '发起人',
+  type: 0,
+  id: 'StartEvent_' + uid,
+  childNode: undefined,
+  attributes: undefined,
+  conditionNodes: []
+})
+// 默认的表单字段权限
+const defaultFieldsPermission: any[] = []
 const test = async () => {
   if (!modelId) {
     message.error('缺少模型 modelId 编号')
     return
   }
-  const test = nodeConfig.value;
+  const test = nodeConfig.value
   console.log('test is ', test)
   console.log('nodeConfig.value ', nodeConfig.value)
-  const data = {
+  const data1 = {
     modelId: modelId,
     simpleModelBody: toRaw(nodeConfig.value)
   }
-  const data1 = {
+  const data = {
     modelId: modelId,
     simpleModelBody: nodeConfig.value
   }
-  console.log('request json data is ', data)
   console.log('request json data1 is ', data1)
-  const result = await saveBpmSimpleModel(data1)
+  const result = await saveBpmSimpleModel(data)
   console.log('save the result is ', result)
   if (result) {
     message.success('修改成功')
@@ -74,17 +76,35 @@ const test = async () => {
   } else {
     message.alert('修改失败')
   }
-  
 }
 const close = () => {
   router.push({ path: '/bpm/manager/model' })
 }
 onMounted(async () => {
+  const bpmnModel = await getModel(modelId)
+  if (bpmnModel) {
+    const formType = bpmnModel.formType
+    if (formType === 10) {
+      const bpmnForm = await getForm(bpmnModel.formId) as unknown as FormVO
+      const formFields = bpmnForm?.fields
+      if (formFields) {
+        formFields.forEach((fieldStr: string) => {
+          const { field, title } = JSON.parse(fieldStr)
+          defaultFieldsPermission.push({
+            field,
+            title,
+            permission: '2'
+          })
+        })
+      }
+      console.log('defaultFieldsPermissions', defaultFieldsPermission);
+    }
+  }
   console.log('the modelId is ', modelId)
   const result = await getBpmSimpleModel(modelId)
-  if(result){
+  if (result) {
     console.log('get the result is ', result)
-    nodeConfig.value = result;
+    nodeConfig.value = result
   }
 })
 </script>
@@ -104,7 +124,7 @@ onMounted(async () => {
   height: 40px;
   font-size: 14px;
   color: #f8f8fa;
-  background-image: linear-gradient(-30deg,#bbbbc4,#d5d5de),linear-gradient(#bcbcc5,#bcbcc5);
+  background-image: linear-gradient(-30deg, #bbbbc4, #d5d5de), linear-gradient(#bcbcc5, #bcbcc5);
   border-radius: 50%;
   justify-content: center;
   align-items: center;
@@ -130,19 +150,19 @@ onMounted(async () => {
   justify-content: center;
   font-size: 14px;
   color: #f8f8fa;
-  background-image: linear-gradient(90deg,#ff6a00,#f78b3e),linear-gradient(#ff6a00,#ff6a00);
+  background-image: linear-gradient(90deg, #ff6a00, #f78b3e), linear-gradient(#ff6a00, #ff6a00);
   border-radius: 50%;
 }
 
 .start-event-node-line::before {
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    width: 2px;
-    height: 100%;
-    margin: auto;
-    background-color: #cacaca;
-    content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  width: 2px;
+  height: 100%;
+  margin: auto;
+  background-color: #cacaca;
+  content: '';
 }
 
 .start-event-node-line {