code review 修改

src/components/SimpleProcessDesigner/src/addNode.vue

@@ -71,18 +71,15 @@ let props = defineProps({
     type:Boolean,
     default:true
   },
-  defaultFieldsPermission : {
-    type: Array,
-    default: () => ([])
-  }
 })
 let emits = defineEmits(['update:childNodeP'])
 let visible = ref(false)
+const defaultFieldsPermission = inject('defaultFieldsPermission')
+
 const addType = (type: number) => {
   visible.value = false
   // 审核节点
   if (type === NodeType.APPROVE_USER_NODE) {
-    console.log("props.defaultFieldsPermission", props.defaultFieldsPermission)
     const data = {
       name: '审核人',
       error: true,
@@ -92,7 +89,7 @@ const addType = (type: number) => {
         approveMethod: undefined,
         candidateStrategy: undefined,
         candidateParam: undefined,
-        fieldsPermission: props.defaultFieldsPermission,
+        fieldsPermission: defaultFieldsPermission,
       },
       childNode: props.childNodeP
     }

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

@@ -162,7 +162,7 @@
           </el-form>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="设置字段权限">
+      <el-tab-pane label="设置字段权限" v-if ="formType === 10">
         <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">
@@ -175,30 +175,43 @@
                     <span class="setting-title-label">只读</span>
                     <span class="setting-title-label">隐藏</span>
                   </div>
-                  <div class="field-setting-item">
+                  <!-- <div class="field-setting-item">
                     <span class="field-setting-item-label">全选</span>
                     <span class="all-checkbox-wrap">
-                      <el-checkbox label="" size="large" />
+                      <el-checkbox
+                        label=""
+                        size="large"
+                      />
                     </span>
                     <span class="all-checkbox-wrap">
-                      <el-checkbox label="" size="large" />
+                      <el-checkbox
+                        label=""
+                        size="large"
+                      />
                     </span>
                     <span class="all-checkbox-wrap">
-                      <el-checkbox label="" size="large" />
+                      <el-checkbox
+                        label=""
+                        size="large"
+                      />
                     </span>
-                  </div>
+                  </div> -->
                   <div class="field-setting-item-check">
-                    <div class="field-setting-item" v-for="(item,index) in candidateConfig.fieldsPermission" :key="index">
+                    <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" >
+                      <el-radio-group v-model="item.permission">
                         <div class="item-radio-wrap">
-                            <el-radio value="1"  size="large" label="1"/>
+                          <el-radio value="1" size="large" label="1" />
                         </div>
                         <div class="item-radio-wrap">
-                            <el-radio value="2"  size="large" label="2"/>
+                          <el-radio value="2" size="large" label="2" />
                         </div>
                         <div class="item-radio-wrap">
-                            <el-radio value="3"  size="large" label="3"/>
+                          <el-radio value="3" size="large" label="3" />
                         </div>
                       </el-radio-group>
                     </div>
@@ -223,8 +236,8 @@
 <script lang="ts" setup>
 import { ref, watch, computed, toRaw } from 'vue'
 import { approveMethods } from '../util'
-import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
-import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
+import { useWorkFlowStoreWithOut } from '@/store/modules/bpm/simpleWorkflow'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { defaultProps, handleTree } from '@/utils/tree'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
@@ -241,15 +254,14 @@ const candidateConfig = ref({
   candidateStrategy: undefined,
   candidateParam: [],
   approveMethod: undefined,
-  fieldsPermission:[]
+  fieldsPermission: []
 })
-// let approverConfig = ref({})
-let store = useWorkFlowStoreWithOut()
+const store = useWorkFlowStoreWithOut()
 let { setApproverDrawer, setUserTaskConfig } = store
 // let approverConfig1 = computed(() => store.approverConfig1)
 let approverDrawer = computed(() => store.approverDrawer)
 const userTaskConfig = computed(() => store.userTaskConfig)
-
+const formType = inject('formType')
 let visible = computed({
   get() {
     return approverDrawer.value
@@ -280,7 +292,9 @@ watch(userTaskConfig, (val) => {
 
 const saveConfig = () => {
   const rawConfig = toRaw(userTaskConfig.value)
-  const { approveMethod, candidateStrategy, candidateParam, fieldsPermission } = toRaw(candidateConfig.value)
+  const { approveMethod, candidateStrategy, candidateParam, fieldsPermission } = toRaw(
+    candidateConfig.value
+  )
   const candidateParamStr = candidateParam.join(',')
   rawConfig.value.attributes = {
     approveMethod,
@@ -309,6 +323,24 @@ const closeDrawer = () => {
 const changecandidateStrategy = () => {
   candidateConfig.value.candidateParam = []
 }
+const handleAllCheck = (event, type) => {
+  console.log('event', event);
+  console.log('type', type);
+  event.target.checked = true;  
+  let permission = '1'
+  if (type === 'edit' && editAllChecked.value) {
+    permission = '1'
+  }
+  if (type === 'read' && readAllChecked.value) {
+    permission = '2'
+  }
+  if (type === 'hide' && hideAllChecked.value) {
+    permission = '3'
+  }
+  candidateConfig.value.fieldsPermission.forEach((item) => {
+    item.permission = permission
+  })
+}
 onMounted(async () => {
   // 获得角色列表
   roleOptions.value = await RoleApi.getSimpleRoleList()
@@ -321,7 +353,6 @@ onMounted(async () => {
   deptTreeOptions.value = handleTree(deptOptions, 'id')
   // 获得用户组列表
   userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
-
 })
 </script>
 <style lang="scss" scoped>
@@ -387,18 +418,17 @@ onMounted(async () => {
     padding-left: 6px;
     text-align: center;
   }
-
 }
 
-::v-deep(.el-radio__label) {  
-  opacity: 0; /* 隐藏标签文本 */  
+::v-deep(.el-radio__label) {
+  opacity: 0; /* 隐藏标签文本 */
 }
 
-::v-deep(.el-divider--horizontal) {  
+::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/drawer/copyerDrawer.vue

@@ -144,7 +144,7 @@
 </template>
 <script lang="ts" setup>
 import { ref, watch, computed, toRaw } from 'vue'
-import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
+import { useWorkFlowStoreWithOut } from '@/store/modules/bpm/simpleWorkflow'
 import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
 import { defaultProps, handleTree } from '@/utils/tree'
 import * as RoleApi from '@/api/system/role'

src/components/SimpleProcessDesigner/src/nodeWrap.vue

@@ -22,7 +22,7 @@
             class="ant-input editable-title-input"
             @blur="blurEvent(-1)"
             @focus="$event.currentTarget?.select()"
-            v-mountedFoucs
+            v-mountedFocus
             v-model="nodeConfig.name"
             :placeholder="defaultText"
           />
@@ -44,7 +44,7 @@
         <i class="anticon anticon-exclamation-circle"></i>
       </div>
     </div>
-    <addNode v-model:childNodeP="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
+    <addNode v-model:childNodeP="nodeConfig.childNode" />
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 4">
     <div class="branch-box-wrap">
@@ -60,7 +60,7 @@
                   class="ant-input editable-title-input"
                   @blur="blurEvent(index)"
                   @focus="$event.currentTarget?.select()"
-                  v-mountedFoucs
+                  v-mountedFocus
                   v-model="item.name"
                 />
                 <span v-else class="editable-title" @click="clickEvent(index)">{{
@@ -92,10 +92,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
+              <addNode v-model:childNodeP="item.childNode" />
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
           <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" :default-fields-permission="props.defaultFieldsPermission"/>
+      <addNode v-model:childNodeP="nodeConfig.childNode" />
     </div>
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 5">
@@ -123,7 +123,7 @@
                   class="ant-input editable-title-input"
                   @blur="blurEvent(index)"
                   @focus="$event.currentTarget?.select()"
-                  v-mountedFoucs
+                  v-mountedFocus
                   v-model="item.name"
                 />
                 <span v-else class="editable-title" @click="clickEvent(index)">{{
@@ -137,10 +137,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode" :default-fields-permission="props.defaultFieldsPermission"/>
+              <addNode v-model:childNodeP="item.childNode" />
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission" />
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
           <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" :default-fields-permission="props.defaultFieldsPermission"/>
+      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
     </div>
   </div>
   <div class="branch-wrap" v-if="nodeConfig.type == 7">
@@ -168,7 +168,7 @@
                   class="ant-input editable-title-input"
                   @blur="blurEvent(index)"
                   @focus="$event.currentTarget?.select()"
-                  v-mountedFoucs
+                  v-mountedFocus
                   v-model="item.name"
                 />
                 <span v-else class="editable-title" @click="clickEvent(index)">
@@ -186,10 +186,10 @@
                   <i class="anticon anticon-exclamation-circle"></i>
                 </div>
               </div>
-              <addNode v-model:childNodeP="item.childNode"  :default-fields-permission="props.defaultFieldsPermission"/>
+              <addNode v-model:childNodeP="item.childNode" />
             </div>
           </div>
-          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" :default-fields-permission="props.defaultFieldsPermission" />
+          <nodeWrap v-if="item.childNode" v-model:nodeConfig="item.childNode" />
           <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" :default-fields-permission="props.defaultFieldsPermission" />
+      <addNode v-model:childNodeP="nodeConfig.childNode" :show-add-button="false" />
     </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" :default-fields-permission="props.defaultFieldsPermission" />
+    <addNode v-model:childNodeP="nodeConfig.childNode"  />
   </div>
-  <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" :default-fields-permission="props.defaultFieldsPermission" />
+  <nodeWrap v-if="nodeConfig.childNode" v-model:nodeConfig="nodeConfig.childNode" />
 </template>
 <script lang="ts" setup>
 import addNode from './addNode.vue'
@@ -225,17 +225,13 @@ import {
   getApproverShowText
 } from './util'
 import { WorkFlowNode, NodeType } from './consts'
-import { useWorkFlowStoreWithOut } from '@/store/modules/simpleWorkflow'
+import { useWorkFlowStoreWithOut } from '@/store/modules/bpm/simpleWorkflow'
 let _uid = getCurrentInstance().uid
 import { generateUUID } from '@/utils'
 let props = defineProps({
   nodeConfig: {
     type: Object as () => WorkFlowNode,
     default: () => ({}) as WorkFlowNode
-  },
-  defaultFieldsPermission : {
-    type: Array,
-    default: () => ([])
   }
 })
 

src/directives/index.ts

@@ -12,12 +12,11 @@ export const setupAuth = (app: App<Element>) => {
   hasPermi(app)
 }
 
-// TODO @jason：拼写是不是 Focus 聚焦？
 /**
- * 导出指令：v-mountedFoucs
+ * 导出指令：v-mountedFocus
  */
-export const setupMountedFoucs = (app: App<Element>) => {
-  app.directive('mountedFoucs', {
+export const setupMountedFocus = (app: App<Element>) => {
+  app.directive('mountedFocus', {
     mounted(el) {
       el.focus()
     }

src/main.ts

@@ -29,7 +29,7 @@ import '@/plugins/animate.css'
 import router, { setupRouter } from '@/router'
 
 // 其它指令 
-import { setupAuth, setupMountedFoucs } from '@/directives'
+import { setupAuth, setupMountedFocus } from '@/directives'
 
 import { createApp } from 'vue'
 
@@ -60,7 +60,7 @@ const setupAll = async () => {
 
   setupAuth(app)
 
-  setupMountedFoucs(app)
+  setupMountedFocus(app)
 
   await router.isReady()
 

src/store/modules/simpleWorkflow.ts → src/store/modules/bpm/simpleWorkflow.ts

@@ -1,5 +1,4 @@
-// TODO @jason：这个放到 store/modules/bpm/simpleWorkflow.ts
-import { store } from '../index'
+import { store } from '../../index'
 import { defineStore } from 'pinia'
 
 export const useWorkFlowStore = defineStore('simpleWorkflow', {

src/views/bpm/simpleWorkflow/index.vue

@@ -1,22 +1,16 @@
 <template>
   <div>
     <section class="dingflow-design">
-      <el-row>
-        <el-col :span="20" />
-        <el-col :span="4">
-          <el-button type="primary" size="small" @click="test">保存(用于测试，还未完成)</el-button>
-        </el-col>
-      </el-row>
+      <div class="sticky right-0 top-0 z-10 w-full flex justify-end bg-white p-2 pr-4">
+        <el-button type="primary" size="small" @click="test">保存(测试中，待完善)</el-button>
+      </div>
       <div class="box-scale">
         <div class="start-event-node">
           <div class="start-event-node-circle">开始</div>
         </div>
         <div class="start-event-node-line"></div>
-        <nodeWrap v-model:nodeConfig="nodeConfig" :defaultFieldsPermission="defaultFieldsPermission" />
-        <!-- <div class="end-node">
-          <div class="end-node-circle"></div>
-          <div class="end-node-text">流程结束</div>
-        </div> -->
+        <nodeWrap v-model:nodeConfig="nodeConfig"/>
+       
         <div class="end-event">
           <div class="end-event-circle">结束</div>
         </div>
@@ -51,6 +45,9 @@ const nodeConfig = ref<WorkFlowNode>({
 })
 // 默认的表单字段权限
 const defaultFieldsPermission: any[] = []
+const  formType = ref(20);
+provide('defaultFieldsPermission', defaultFieldsPermission)
+provide('formType', formType)
 const test = async () => {
   if (!modelId) {
     message.error('缺少模型 modelId 编号')
@@ -83,8 +80,8 @@ const close = () => {
 onMounted(async () => {
   const bpmnModel = await getModel(modelId)
   if (bpmnModel) {
-    const formType = bpmnModel.formType
-    if (formType === 10) {
+    formType.value = bpmnModel.formType
+    if (formType.value === 10) {
       const bpmnForm = await getForm(bpmnModel.formId) as unknown as FormVO
       const formFields = bpmnForm?.fields
       if (formFields) {