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

0f812dbf · Lesan · 666fb16d · 0f812dbf · 0f812dbf · 0f812dbf
Commit 0f812dbf authored Feb 14, 2025 by Lesan
7 changed files
--- a/src/assets/svgs/bpm/handle.svg
+++ b/src/assets/svgs/bpm/handle.svg
+<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
--- 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">
+            <div class="handle handler-item-icon">
-              <span class="iconfont icon-approve icon-size"></span>
+              <span class="iconfont icon-handle icon-size"></span>
            </div>
            <div class="handler-item-text">办理人</div>
          </div>

--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
-<!-- 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'

--- 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"

--- 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;
@@ -294,6 +298,10 @@
          &.router-node {
            color: #ca3a31
          }
+          &.transactor-task {
+            color: #330099;
+          }
        }
        .node-title {

--- 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="`${taskName}意见`" prop="reason">
-          <el-form-item label="审批意见" 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 = {}

--- 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 },
  // 条件分支节点