【代码评审】工作流：快搭部分的 code review

Author: YunaiV

src/components/SimpleProcessDesigner/src/addNode.vue

@@ -67,10 +67,10 @@ let props = defineProps({
     type: Object,
     default: () => ({})
   },
-  showAddButton:{
-    type:Boolean,
-    default:true
-  },
+  showAddButton: {
+    type: Boolean,
+    default: true
+  }
 })
 let emits = defineEmits(['update:childNodeP'])
 let visible = ref(false)
@@ -89,7 +89,7 @@ const addType = (type: number) => {
         approveMethod: undefined,
         candidateStrategy: undefined,
         candidateParam: undefined,
-        fieldsPermission: defaultFieldsPermission,
+        fieldsPermission: defaultFieldsPermission
       },
       childNode: props.childNodeP
     }
@@ -99,7 +99,7 @@ const addType = (type: number) => {
   if (type === NodeType.CC_USER_NODE) {
     const data = {
       name: '抄送人',
-      type: 2,
+      type: 2, // TODO @jason：这个要不要搞成枚举？NodeType 里貌似有枚举
       error: true,
       // 抄送节点配置
       attributes: {
@@ -161,7 +161,7 @@ const addType = (type: number) => {
         name: '并行分支_JOIN',
         type: 6,
         error: true,
-        childNode: props.childNodeP,
+        childNode: props.childNodeP
       }
     }
     emits('update:childNodeP', data)
@@ -190,7 +190,7 @@ const addType = (type: number) => {
         name: '包容分支_JOIN',
         type: 8,
         error: true,
-        childNode: props.childNodeP,
+        childNode: props.childNodeP
       }
     }
     emits('update:childNodeP', data)

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

@@ -162,7 +162,7 @@
           </el-form>
         </div>
       </el-tab-pane>
-      <el-tab-pane label="设置字段权限" v-if ="formType === 10">
+      <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">
@@ -324,12 +324,12 @@ const changecandidateStrategy = () => {
   candidateConfig.value.candidateParam = []
 }
 const handleAllCheck = (event, type) => {
-  console.log('event', event);
-  console.log('type', type);
-  event.target.checked = true;  
+  console.log('event', event)
+  console.log('type', type)
+  event.target.checked = true
   let permission = '1'
   if (type === 'edit' && editAllChecked.value) {
-    permission = '1'
+    permission = '1' // TODO @jaosn：这个要不要用枚举里的哈
   }
   if (type === 'read' && readAllChecked.value) {
     permission = '2'
@@ -344,7 +344,7 @@ const handleAllCheck = (event, type) => {
 onMounted(async () => {
   // 获得角色列表
   roleOptions.value = await RoleApi.getSimpleRoleList()
-
+  // 获得岗位列表
   postOptions.value = await PostApi.getSimplePostList()
   // 获得用户列表
   userOptions.value = await UserApi.getSimpleUserList()

src/components/SimpleProcessDesigner/src/drawer/copyerDrawer.vue

@@ -12,7 +12,12 @@
     <div>
       <el-form label-position="top" label-width="100px">
         <el-form-item label="选择抄送人" prop="candidateStrategy">
-          <el-select v-model="candidateConfig.candidateStrategy" style="width: 100%" clearable @change="changecandidateStrategy">
+          <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"
@@ -160,7 +165,7 @@ const deptTreeOptions = ref() // 部门树
 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
 const candidateConfig = ref({
   candidateStrategy: undefined,
-  candidateParam: [],
+  candidateParam: []
 })
 const store = useWorkFlowStoreWithOut()
 const { setCopyerDrawer, setCopyerConfig } = store
@@ -178,30 +183,29 @@ const visible = computed({
 })
 watch(copyerConfig, (val) => {
   if (val.value.attributes) {
-    console.log('val.value.attributes', val.value.attributes);
+    console.log('val.value.attributes', val.value.attributes)
     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
   }
 })
 
-
 const saveConfig = () => {
   const rawConfig = toRaw(copyerConfig.value)
-  const { candidateStrategy , candidateParam} = toRaw(candidateConfig.value);
+  const { candidateStrategy, candidateParam } = toRaw(candidateConfig.value)
   const candidateParamStr = candidateParam.join(',')
   rawConfig.value.attributes = {
     candidateStrategy,
     candidateParam: candidateParamStr
-  } 
+  }
   rawConfig.flag = true
   // TODO 进行校验
   // setApproverConfig({
@@ -213,7 +217,7 @@ const saveConfig = () => {
   setCopyerConfig({
     value: rawConfig.value,
     flag: true,
-    id: copyerConfig.value.id,
+    id: copyerConfig.value.id
   })
   console.log('after is copyerConfig', copyerConfig.value)
   closeDrawer()
@@ -228,7 +232,7 @@ const changecandidateStrategy = () => {
 onMounted(async () => {
   // 获得角色列表
   roleOptions.value = await RoleApi.getSimpleRoleList()
-
+  // 获得岗位列表
   postOptions.value = await PostApi.getSimplePostList()
   // 获得用户列表
   userOptions.value = await UserApi.getSimpleUserList()

src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue

@@ -146,7 +146,7 @@ onMounted(async () => {
     processNodeTree.value = {
       name: '开始',
       type: NodeType.START_EVENT_NODE,
-      id: 'StartEvent_1',
+      id: 'StartEvent_1', // TODO @jason：这个我们要不要 StartEvent 哈？
       childNode: {
         id: 'EndEvent_1',
         name: '结束',

src/components/SimpleProcessDesignerV2/src/consts.ts

@@ -213,7 +213,7 @@ export type ButtonSetting = {
   enable: boolean
 }
 
-// 操作按钮类型枚举 (用于审批节点)
+// 操作按钮类型枚举 (用于审批节点) // TODO @jason：建议不缩写哈
 export enum OpsButtonType {
   /**
    * 通过

src/main.ts

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

src/views/bpm/processInstance/detail/index.vue

@@ -56,12 +56,14 @@
           </el-form-item>
         </el-form>
         <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
+          <!-- TODO @jason：建议搞个 if 来判断，替代现有的 !item.buttonsSetting || item.buttonsSetting[OpsButtonType.APPROVE]?.enable -->
           <el-button
             type="success"
             v-if="!item.buttonsSetting || item.buttonsSetting[OpsButtonType.APPROVE]?.enable"
             @click="handleAudit(item, true)"
           >
             <Icon icon="ep:select" />
+            <!-- TODO @jason：这个也是类似哈，搞个方法来生成名字 -->
             {{
               item.buttonsSetting?.[OpsButtonType.APPROVE]?.displayName ||
               OPERATION_BUTTON_NAME.get(OpsButtonType.APPROVE)

src/views/bpm/simpleWorkflow/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <SimpleProcessDesigner :model-id="modelId"/>
+  <SimpleProcessDesigner :model-id="modelId" />
 </template>
-<script setup lang='ts'>
-import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/';
+<script setup lang="ts">
+import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
 import { getModel } from '@/api/bpm/model'
 import { getForm, FormVO } from '@/api/bpm/form'
 import { handleTree } from '@/utils/tree'
@@ -15,9 +15,9 @@ defineOptions({
   name: 'SimpleWorkflowDesignEditor'
 })
 const { query } = useRoute() // 路由的查询
-const modelId : string | undefined = query.modelId  as string;
+const modelId: string | undefined = query.modelId as string
 const formFields = ref<string[]>([])
-const formType = ref(20);
+const formType = ref(20)
 const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
 const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
@@ -32,28 +32,28 @@ provide('userList', userOptions)
 provide('deptList', deptOptions)
 provide('userGroupList', userGroupOptions)
 provide('deptTree', deptTreeOptions)
-onMounted( async () => {
-  const bpmnModel = await getModel(modelId);
+onMounted(async () => {
+  const bpmnModel = await getModel(modelId)
   if (bpmnModel) {
     formType.value = bpmnModel.formType
     if (formType.value === 10) {
-      const bpmnForm = await getForm(bpmnModel.formId) as unknown as FormVO
+      const bpmnForm = (await getForm(bpmnModel.formId)) as unknown as FormVO
       formFields.value = bpmnForm?.fields
     }
   }
   // 获得角色列表
   roleOptions.value = await RoleApi.getSimpleRoleList()
+  // 获得岗位列表
   postOptions.value = await PostApi.getSimplePostList()
   // 获得用户列表
   userOptions.value = await UserApi.getSimpleUserList()
   // 获得部门列表
   deptOptions.value = await DeptApi.getSimpleDeptList()
 
-  deptTreeOptions.value =  handleTree(deptOptions.value as DeptApi.DeptVO[], 'id');
+  deptTreeOptions.value = handleTree(deptOptions.value as DeptApi.DeptVO[], 'id')
 
   // 用户组列表
   userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
 })
 </script>
-<style lang='scss' scoped>
-</style>
+<style lang="scss" scoped></style>