【文案修改】工作流：“回退”统一改成“退回”，和飞书保持一致

dcdce412 · YunaiV · 410c3bc9 · dcdce412 · dcdce412 · dcdce412
Commit dcdce412 authored Oct 19, 2024 by YunaiV
8 changed files
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@@ -75,12 +75,12 @@ export const getTaskListByProcessInstanceId = async (processInstanceId: string) 
  })
 }
-// 获取所有可回退的节点
+// 获取所有可退回的节点
 export const getTaskListByReturn = async (id: string) => {
  return await request.get({ url: '/bpm/task/list-by-return', params: { id } })
 }
-// 回退
+// 退回
 export const returnTask = async (data: any) => {
  return await request.put({ url: '/bpm/task/return', data })
 }

--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -177,7 +177,7 @@ export enum ApproveMethodType {
 export type RejectHandler = {
  // 审批拒绝类型
  type: RejectHandlerType
-  // 回退节点 Id
+  // 退回节点 Id
  returnNodeId?: string
 }
@@ -359,7 +359,7 @@ export enum OperationButtonType {
   */
  ADD_SIGN = 5,
  /**
-   * 回退
+   * 退回
   */
  RETURN = 6,
  /**
@@ -516,7 +516,7 @@ export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: true },
  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: true },
  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: true },
-  { id: OperationButtonType.RETURN, displayName: '回退', enable: true }
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: true }
 ]
 // 发起人的按钮权限。暂时定死，不可以编辑
@@ -526,7 +526,7 @@ export const START_USER_BUTTON_SETTING: ButtonSetting[] = [
  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
-  { id: OperationButtonType.RETURN, displayName: '回退', enable: false }
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: false }
 ]
 export const MULTI_LEVEL_DEPT: DictDataVO = [

--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -134,12 +134,7 @@
              prop="userIds"
              span="24"
            >
-              <el-select
+              <el-select v-model="configForm.userIds" clearable multiple style="width: 100%">
-                v-model="configForm.userIds"
-                clearable
-                multiple
-                style="width: 100%"
-              >
                <el-option
                  v-for="item in userOptions"
                  :key="item.id"
@@ -183,10 +178,7 @@
                    :key="index"
                    class="flex items-center"
                  >
-                    <el-radio
+                    <el-radio :value="item.value" :label="item.value">
-                      :value="item.value"
-                      :label="item.value"
-                    >
                      {{ item.label }}
                    </el-radio>
                    <el-form-item prop="approveRatio">
@@ -552,7 +544,7 @@ const approveMethodChanged = () => {
  }
  formRef.value.clearValidate('approveRatio')
 }
-// 审批拒绝 可回退的节点
+// 审批拒绝 可退回的节点
 const returnTaskList = ref<SimpleFlowNode[]>([])
 // 审批人超时未处理设置
 const {

--- a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -282,9 +282,12 @@ const importXML = async (xml: string) => {
 /** 高亮流程 */
 const setProcessStatus = (view: any) => {
  // 设置相关变量
+  if (!view || !view.processInstance) {
+    return
+  }
  processInstance.value = view.processInstance
  tasks.value = view.tasks
-  if (isLoading.value || !processInstance.value || !bpmnViewer.value) {
+  if (isLoading.value || !bpmnViewer.value) {
    return
  }
  const {

--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -8,7 +8,7 @@
      placement="top-end"
      :width="420"
      trigger="click"
-      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
    >
      <template #reference>
        <el-button plain type="success" @click="openPopover('approve')">
@@ -60,7 +60,7 @@
      placement="top-end"
      :width="420"
      trigger="click"
-      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
    >
      <template #reference>
        <el-button class="mr-20px" plain type="danger" @click="openPopover('reject')">
@@ -171,7 +171,7 @@
      placement="top-start"
      :width="420"
      trigger="click"
-      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
    >
      <template #reference>
        <div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -397,7 +397,9 @@
      placement="top-start"
      :width="420"
      trigger="click"
-      v-if="userId === processInstance?.startUser?.id && !isEndProcessStatus(processInstance?.status)"
+      v-if="
+        userId === processInstance?.startUser?.id && !isEndProcessStatus(processInstance?.status)
+      "
    >
      <template #reference>
        <div @click="openPopover('cancel')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -414,7 +416,7 @@
          label-width="100px"
        >
          <el-form-item label="撤消理由" prop="cancelReason">
-            <span class=" text-#878c93 text-12px">&nbsp; 撤消后，该审批流程将自动结束</span>
+            <span class="text-#878c93 text-12px">&nbsp; 撤消后，该审批流程将自动结束</span>
            <el-input
              v-model="genericForm.cancelReason"
              clearable
@@ -424,7 +426,9 @@
            />
          </el-form-item>
          <el-form-item>
-            <el-button :disabled="formLoading" type="primary" @click="handleCancel()">撤消</el-button>
+            <el-button :disabled="formLoading" type="primary" @click="handleCancel()"
+              >撤消</el-button
+            >
            <el-button @click="popOverVisible.cancel = false"> 取消 </el-button>
          </el-form-item>
        </el-form>
@@ -434,15 +438,16 @@
    <div
      @click="handleReCreate()"
      class="hover-bg-gray-100 rounded-xl p-6px"
-      v-if="userId === processInstance?.startUser?.id && isEndProcessStatus(processInstance?.status) 
+      v-if="
-            && processDefinition?.formType === 10"
+        userId === processInstance?.startUser?.id &&
+        isEndProcessStatus(processInstance?.status) &&
+        processDefinition?.formType === 10
+      "
    >
      <Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
    </div>
    <!-- 弹窗：子任务  -->
    <TaskSignList ref="taskSignListRef" @success="reload" />
  </div>
 </template>
 <script lang="ts" setup>
@@ -457,20 +462,22 @@ import {
  OPERATION_BUTTON_NAME
 } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { BpmProcessInstanceStatus } from '@/utils/constants'
-defineOptions({ name: 'ProcessInstanceBtnConatiner' })
+defineOptions({ name: 'ProcessInstanceBtnContainer' })
 const router = useRouter() // 路由
 const message = useMessage() // 消息弹窗
 const { proxy } = getCurrentInstance() as any
 const userId = useUserStoreWithOut().getUser.id // 当前登录的编号
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const props = defineProps({
  processInstance: propTypes.object, // 流程实例信息
-  processDefinition : propTypes.object, // 流程定义信息
+  processDefinition: propTypes.object, // 流程定义信息
  userOptions: propTypes.any
 })
 const formLoading = ref(false) // 表单加载中
-/** 气泡卡是否展示 */
 const popOverVisible = ref({
  approve: false,
  reject: false,
@@ -480,16 +487,15 @@ const popOverVisible = ref({
  return: false,
  copy: false,
  cancel: false
-})
+}) // 气泡卡是否展示
-/** 退回节点 */
+const returnList = ref([] as any) // 退回节点
-const returnList = ref([] as any)
 // ========== 审批信息 ==========
 const runningTask = ref<any>() // 运行中的任务
 const genericForm = ref<any>({}) // 通用表单
 const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
 const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
 const formRef = ref()
-/** 表单校验规则 */
 const genericRule = reactive({
  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
  returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
@@ -498,8 +504,8 @@ const genericRule = reactive({
  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
  delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
  addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
-  targetTaskDefinitionKey:  [{ required: true, message: '退回节点不能为空', trigger: 'change' }]
+  targetTaskDefinitionKey: [{ required: true, message: '退回节点不能为空', trigger: 'change' }]
-})
+}) // 表单校验规则
 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
 watch(
@@ -520,20 +526,16 @@ const openReturnPopover = async () => {
    message.warning('当前没有可退回的节点')
    return
  }
-  openPopover('return')
+  await openPopover('return')
 }
 /** 弹出气泡卡 */
-const openPopover = (type: string) => {
+const openPopover = async (type: string) => {
  Object.keys(popOverVisible.value).forEach((item) => {
-    if (item === type) {
+    popOverVisible.value[item] = item === type
-      popOverVisible.value[item] = true
-    } else {
-      popOverVisible.value[item] = false
-    }
-  })
-  nextTick().then(() => {
-    formRef.value.resetFields()
  })
+  await nextTick()
+  formRef.value.resetFields()
 }
 /** 处理审批通过和不通过的操作 */
@@ -575,7 +577,7 @@ const handleAudit = async (pass: boolean) => {
  }
 }
-/* 处理抄送 */
+/** 处理抄送 */
 const handleCopy = async () => {
  formLoading.value = true
  try {
@@ -718,7 +720,10 @@ const handleCancel = async () => {
    const valid = await elForm.validate()
    if (!valid) return
    // 1.2 提交取消
-    await ProcessInstanceApi.cancelProcessInstanceByStartUser(props.processInstance.id, genericForm.value.cancelReason)
+    await ProcessInstanceApi.cancelProcessInstanceByStartUser(
+      props.processInstance.id,
+      genericForm.value.cancelReason
+    )
    popOverVisible.value.return = false
    message.success('操作成功')
    // 2 重新加载数据
@@ -764,8 +769,9 @@ const isHandleTaskStatus = () => {
 const isEndProcessStatus = (status: number) => {
  let isEndStatus = false
  if (
-     BpmProcessInstanceStatus.APPROVE === status || BpmProcessInstanceStatus.REJECT === status ||
+    BpmProcessInstanceStatus.APPROVE === status ||
-     BpmProcessInstanceStatus.CANCEL === status
+    BpmProcessInstanceStatus.REJECT === status ||
+    BpmProcessInstanceStatus.CANCEL === status
  ) {
    isEndStatus = true
  }
@@ -806,7 +812,6 @@ const loadTodoTask = (task: any) => {
 }
 defineExpose({ loadTodoTask })
 </script>
 <style lang="scss" scoped>

--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -11,28 +11,45 @@
    >
      <div class="flex flex-col items-start">
        <div class="font-bold"> {{ activity.name }}</div>
-        <div class="flex items-center flex-wrap mt-1 ">
+        <div class="flex items-center flex-wrap mt-1">
          <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
          <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
            <div class="flex flex-col pr-2">
              <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
                <!-- 信息：头像 -->
-                <el-tooltip :content="task.reason" placement="bottom" v-if="task.assigneeUser && task.assigneeUser.avatar" effect="light">
+                <el-tooltip
-                  <el-avatar
+                  :content="task.reason"
-                    :size="36"
+                  placement="bottom"
-                    :src="task.assigneeUser.avatar"
+                  v-if="task.assigneeUser && task.assigneeUser.avatar"
-                  />
+                  effect="light"
+                >
+                  <el-avatar :size="36" :src="task.assigneeUser.avatar" />
                </el-tooltip>
-                <el-tooltip :content="task.reason" placement="bottom" v-else-if="task.assigneeUser && task.assigneeUser.nickname" effect="light">
+                <el-tooltip
-                  <el-avatar >
+                  :content="task.reason"
+                  placement="bottom"
+                  v-else-if="task.assigneeUser && task.assigneeUser.nickname"
+                  effect="light"
+                >
+                  <el-avatar>
                    {{ task.assigneeUser.nickname.substring(0, 1) }}
                  </el-avatar>
                </el-tooltip>
-                <el-tooltip :content="task.reason" placement="bottom" v-else-if="task.ownerUser && task.ownerUser.avatar" effect="light">
+                <el-tooltip
-                  <el-avatar :src="task.ownerUser.avatar"/>
+                  :content="task.reason"
+                  placement="bottom"
+                  v-else-if="task.ownerUser && task.ownerUser.avatar"
+                  effect="light"
+                >
+                  <el-avatar :src="task.ownerUser.avatar" />
                </el-tooltip>
-                <el-tooltip :content="task.reason" placement="bottom" v-else-if="task.ownerUser && task.ownerUser.nickname" effect="light">
+                <el-tooltip
-                  <el-avatar >
+                  :content="task.reason"
+                  placement="bottom"
+                  v-else-if="task.ownerUser && task.ownerUser.nickname"
+                  effect="light"
+                >
+                  <el-avatar>
                    {{ task.ownerUser.nickname.substring(0, 1) }}
                  </el-avatar>
                </el-tooltip>
@@ -146,7 +163,6 @@ defineProps<{
 // 审批节点
 const statusIconMap2 = {
  // 未开始
  '-1': { color: '#e5e7ec', icon: 'ep-clock' },
@@ -160,7 +176,7 @@ const statusIconMap2 = {
  '3': { color: '#f46b6c', icon: 'fa-solid:times-circle' },
  // 取消
  '4': { color: '#cccccc', icon: 'ep:delete-filled' },
-  // 回退
+  // 退回
  '5': { color: '#f46b6c', icon: 'ep:remove-filled' },
  // 委派中
  '6': { color: '#448ef7', icon: 'ep:loading' },
@@ -180,7 +196,7 @@ const statusIconMap = {
  '3': { color: '#f46b6c', icon: Close },
  // 已取消
  '4': { color: '#cccccc', icon: Delete },
-  // 回退
+  // 退回
  '5': { color: '#f46b6c', icon: Minus },
  // 委派中
  '6': { color: '#448ef7', icon: Loading },

--- a/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue
+++ b/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue
 <template>
-  <Dialog v-model="dialogVisible" title="回退任务" width="500">
+  <Dialog v-model="dialogVisible" title="退回任务" width="500">
    <el-form
      ref="formRef"
      v-loading="formLoading"
@@ -17,8 +17,8 @@
          />
        </el-select>
      </el-form-item>
-      <el-form-item label="回退理由" prop="reason">
+      <el-form-item label="退回理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入回退理由" />
+        <el-input v-model="formData.reason" clearable placeholder="请输入退回理由" />
      </el-form-item>
    </el-form>
    <template #footer>
@@ -39,8 +39,8 @@ const formData = ref({
  reason: ''
 })
 const formRules = ref({
-  targetTaskDefinitionKey: [{ required: true, message: '必须选择回退节点', trigger: 'change' }],
+  targetTaskDefinitionKey: [{ required: true, message: '必须选择退回节点', trigger: 'change' }],
-  reason: [{ required: true, message: '回退理由不能为空', trigger: 'blur' }]
+  reason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
@@ -49,7 +49,7 @@ const returnList = ref([] as any)
 const open = async (id: string) => {
  returnList.value = await TaskApi.getTaskListByReturn(id)
  if (returnList.value.length === 0) {
-    message.warning('当前没有可回退的节点')
+    message.warning('当前没有可退回的节点')
    return false
  }
  dialogVisible.value = true
@@ -69,7 +69,7 @@ const submitForm = async () => {
  formLoading.value = true
  try {
    await TaskApi.returnTask(formData.value)
-    message.success('回退成功')
+    message.success('退回成功')
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')

--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -161,7 +161,7 @@
    <!-- 弹窗：转派审批人 -->
    <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
-    <!-- 弹窗：回退节点 -->
+    <!-- 弹窗：退回节点 -->
    <TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
    <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />