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

cfc00033 · jason · 11b7cf32 · cfc00033 · cfc00033 · cfc00033
Commit cfc00033 authored Apr 14, 2024 by jason
4 changed files
--- a/src/components/SimpleProcessDesigner/src/addNode.vue
+++ b/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
    }

--- a/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
+++ b/src/components/SimpleProcessDesigner/src/drawer/approverDrawer.vue
--- a/src/components/SimpleProcessDesigner/src/nodeWrap.vue
+++ b/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: () => ([])
  }
 })

--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/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: '发起人',
+  name: '发起人',
-    type: 0,
+  type: 0,
-    id: 'StartEvent_' + uid,
+  id: 'StartEvent_' + uid,
-    childNode: undefined,
+  childNode: undefined,
-    attributes: undefined,
+  attributes: undefined,
-    conditionNodes: 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;
+  position: absolute;
-    inset: 0;
+  inset: 0;
-    z-index: -1;
+  z-index: -1;
-    width: 2px;
+  width: 2px;
-    height: 100%;
+  height: 100%;
-    margin: auto;
+  margin: auto;
-    background-color: #cacaca;
+  background-color: #cacaca;
-    content: "";
+  content: '';
 }
 .start-event-node-line {