feat: 添加节点类型以区分不同节点

Author: LesanOuO

src/assets/svgs/bpm/handle.svg

@@ -15,10 +15,9 @@
             </div>
             <div class="handler-item-text">审批人</div>
           </div>
-          <!-- TODO @lesan：办理人增加自定义 icon 哈，可以换 jason 怎么弄！ -->
           <div class="handler-item" @click="addNode(NodeType.TRANSACTOR_NODE)">
-            <div class="approve handler-item-icon">
-              <span class="iconfont icon-approve icon-size"></span>
+            <div class="handle handler-item-icon">
+              <span class="iconfont icon-handle icon-size"></span>
             </div>
             <div class="handler-item-text">办理人</div>
           </div>

src/components/SimpleProcessDesignerV2/src/NodeHandler.vue

@@ -1,4 +1,3 @@
-<!-- TODO @lesan：涉及到“审批”关键字，需要换成“办理”，建议通过一个变量控制哈 -->
 <template>
   <el-drawer
     :append-to-body="true"
@@ -40,10 +39,10 @@
       </el-radio-group>
     </div>
     <el-tabs type="border-card" v-model="activeTabName" v-if="approveType === ApproveType.USER">
-      <el-tab-pane label="审批人" name="user">
+      <el-tab-pane :label="`${nodeTypeName}人`" name="user">
         <div>
           <el-form ref="formRef" :model="configForm" label-position="top" :rules="formRules">
-            <el-form-item label="审批人设置" prop="candidateStrategy">
+            <el-form-item :label="`${nodeTypeName}人设置`" prop="candidateStrategy">
               <el-radio-group
                 v-model="configForm.candidateStrategy"
                 @change="changeCandidateStrategy"
@@ -226,7 +225,7 @@
                 style="width: 100%"
               />
             </el-form-item>
-            <el-form-item label="多人审批方式" prop="approveMethod">
+            <el-form-item :label="`多人${nodeTypeName}方式`" prop="approveMethod">
               <el-radio-group v-model="configForm.approveMethod" @change="approveMethodChanged">
                 <div class="flex-col">
                   <div
@@ -350,7 +349,7 @@
               </el-form-item>
             </div>
 
-            <el-divider content-position="left">审批人为空时</el-divider>
+            <el-divider content-position="left">{{ nodeTypeName }}人为空时</el-divider>
             <el-form-item prop="assignEmptyHandlerType">
               <el-radio-group v-model="configForm.assignEmptyHandlerType">
                 <div class="flex-col">
@@ -449,7 +448,6 @@
           </div>
         </div>
       </el-tab-pane>
-      <!-- TODO @lesan：办理时，应该还是有字段权限 -->
       <el-tab-pane label="表单字段权限" name="fields" v-if="formType === 10">
         <div class="field-setting-pane">
           <div class="field-setting-desc">字段权限</div>
@@ -681,6 +679,11 @@ const {
 
 const userTaskListenerRef = ref()
 
+// 节点类型名称
+const nodeTypeName = computed(() => {
+  return currentNode.value.type === NodeType.TRANSACTOR_NODE ? '办理' : '审批'
+})
+
 // 保存配置
 const saveConfig = async () => {
   // activeTabName.value = 'user'

src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue

@@ -9,7 +9,13 @@
         ]"
       >
         <div class="node-title-container">
-          <div class="node-title-icon user-task"><span class="iconfont icon-approve"></span></div>
+          <div
+            :class="`node-title-icon ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'transactor-task' : 'user-task'}`"
+          >
+            <span
+              :class="`iconfont ${currentNode.type === NodeType.TRANSACTOR_NODE ? 'icon-handle' : 'icon-approve'}`"
+            ></span>
+          </div>
           <input
             v-if="!readonly && showInput"
             type="text"

src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue

@@ -177,6 +177,10 @@
     color: #ca3a31
   }
 
+  .handle {
+    color: #330099;
+  }
+
   .handler-item-text {
     margin-top: 4px;
     width: 80px;
@@ -290,10 +294,14 @@
           &.trigger-node {
             color: #3373d2;
           }
-          
+
           &.router-node {
             color: #ca3a31
           }
+
+          &.transactor-task {
+            color: #330099;
+          }
         }
 
         .node-title {

src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss

@@ -36,11 +36,10 @@
               :rule="approveForm.rule"
             />
           </el-card>
-          <!-- TODO @lesan：需要分成“审批”和“办理”意见，包括 label、placeholder、rule 校验 -->
-          <el-form-item label="审批意见" prop="reason">
+          <el-form-item :label="`${taskName}意见`" prop="reason">
             <el-input
               v-model="approveReasonForm.reason"
-              placeholder="请输入审批意见"
+              :placeholder="`请输入${taskName}意见`"
               type="textarea"
               :rows="4"
             />
@@ -505,6 +504,7 @@ import * as TaskApi from '@/api/bpm/task'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as UserApi from '@/api/system/user'
 import {
+  NodeType,
   OPERATION_BUTTON_NAME,
   OperationButtonType
 } from '@/components/SimpleProcessDesignerV2/src/consts'
@@ -559,7 +559,9 @@ const approveReasonForm = reactive({
 })
 const approveReasonRule = computed(() => {
   return {
-    reason: [{ required: reasonRequire.value, message: '审批意见不能为空', trigger: 'blur' }],
+    reason: [
+      { required: reasonRequire.value, message: taskName + '意见不能为空', trigger: 'blur' }
+    ],
     signPicUrl: [{ required: true, message: '签名不能为空', trigger: 'change' }]
   }
 })
@@ -968,11 +970,14 @@ const getButtonDisplayName = (btnType: OperationButtonType) => {
   return displayName
 }
 
+const taskName = ref('审批')
+
 const loadTodoTask = (task: any) => {
   approveForm.value = {}
   approveFormFApi.value = {}
   runningTask.value = task
   reasonRequire.value = task?.reasonRequire ?? false
+  taskName.value = task?.nodeType === NodeType.TRANSACTOR_NODE ? '办理' : '审批'
   // 处理 approve 表单.
   if (task && task.formId && task.formConf) {
     const tempApproveForm = {}

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

@@ -180,6 +180,7 @@ import copySvg from '@/assets/svgs/bpm/copy.svg'
 import conditionSvg from '@/assets/svgs/bpm/condition.svg'
 import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
 import finishSvg from '@/assets/svgs/bpm/finish.svg'
+import handleSvg from '@/assets/svgs/bpm/handle.svg'
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
 withDefaults(
@@ -241,8 +242,8 @@ const nodeTypeSvgMap = {
   [NodeType.START_USER_NODE]: { color: '#909398', svg: starterSvg },
   // 审批人节点
   [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
-  // 办理人节点 TODO @lesan：
-  [NodeType.TRANSACTOR_NODE]: { color: '#ff943e', svg: auditorSvg },
+  // 办理人节点
+  [NodeType.TRANSACTOR_NODE]: { color: '#ff943e', svg: handleSvg },
   // 抄送人节点
   [NodeType.COPY_TASK_NODE]: { color: '#3296fb', svg: copySvg },
   // 条件分支节点