From 0f812dbfd936e9966a8e738bbed48c150b286ce5 Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Fri, 14 Feb 2025 08:26:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E4=BB=A5=E5=8C=BA=E5=88=86=E4=B8=8D=E5=90=8C?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/handle.svg                    |  1 +
 .../SimpleProcessDesignerV2/src/NodeHandler.vue   |  5 ++---
 .../src/nodes-config/UserTaskNodeConfig.vue       | 15 +++++++++------
 .../src/nodes/UserTaskNode.vue                    |  8 +++++++-
 .../theme/simple-process-designer.scss            | 10 +++++++++-
 .../detail/ProcessInstanceOperationButton.vue     | 13 +++++++++----
 .../detail/ProcessInstanceTimeline.vue            |  5 +++--
 7 files changed, 40 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/svgs/bpm/handle.svg

diff --git a/src/assets/svgs/bpm/handle.svg b/src/assets/svgs/bpm/handle.svg
new file mode 100644
index 00000000..a9547a7d
--- /dev/null
+++ b/src/assets/svgs/bpm/handle.svg
@@ -0,0 +1 @@
+<svg t="1739406626368" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1300" width="200" height="200"><path d="M803.221 925.573H224.356c-68.568 0-124.352-55.784-124.352-124.353V222.356c0-68.568 55.784-124.352 124.352-124.352h355.311v64H224.356c-33.278 0-60.352 27.074-60.352 60.352V801.22c0 33.278 27.074 60.353 60.352 60.353H803.22c33.278 0 60.353-27.074 60.353-60.353V448.208h64V801.22c0 68.569-55.784 124.353-124.352 124.353z" fill="#ffffff" p-id="1301"></path><path d="M300.357 756.916l35.024-195.867L770.117 84.404c10.05-11.02 25.015-18.052 41.058-19.293 16.017-1.247 31.987 3.379 43.841 12.667l83.662 65.549c21.643 16.956 24.254 45.964 5.942 66.038l-437.613 479.8-206.65 67.751z m104.994-170.751l-13.14 73.487 69.671-22.842 415.465-455.517-59.909-46.939-412.087 451.811z" fill="#ffffff" p-id="1302"></path><path d="M732.25 220.897l41.144-49.023 81.151 68.11-41.145 49.023z" fill="#ffffff" p-id="1303"></path></svg>
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 0dcd63e4..9af188a7 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -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>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index b0d10ff0..b6ce9ed3 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.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'
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index eac24ce8..78f4f89e 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.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"
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index f3d8b443..55042790 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -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 {
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index f9f63fa9..1adde08f 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -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 = {}
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 83567417..519da3ef 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.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 },
   // 条件分支节点