refactor: bpm

2025-06-06 20:45:45 +08:00
parent 7e8f2a1328
commit 2c3dd668e3
47 changed files with 1454 additions and 1898 deletions
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -7,6 +7,7 @@ import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import { computed, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';

+import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { useUserStore } from '@vben/stores';
 import { isEmpty } from '@vben/utils';
@@ -60,6 +61,17 @@ const props = defineProps<{
  writableFields: string[]; // 流程表单可以编辑的字段
 }>(); // 当前登录的编号
 const emit = defineEmits(['success']);
+
+const [SignatureModal, signatureModalApi] = useVbenModal({
+  connectedComponent: Signature,
+  destroyOnClose: true,
+});
+
+/** 创建流程表达式 */
+function openSignatureModal() {
+  signatureModalApi.setData(null).open();
+}
+
 const router = useRouter(); // 路由
 const userStore = useUserStore();
 const userId = userStore.userInfo?.id;
@@ -86,7 +98,6 @@ const nodeTypeName = ref('审批'); // 节点类型名称
 // 审批通过意见表单
 const reasonRequire = ref();
 const approveFormRef = ref<FormInstance>();
-const signRef = ref();
 const approveSignFormRef = ref();
 const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
  [],
@@ -235,7 +246,7 @@ watch(
 );

 /** 弹出气泡卡 */
-const openPopover = async (type: string) => {
+async function openPopover(type: string) {
  if (type === 'approve') {
    // 校验流程表单
    const valid = await validateNormalForm();
@@ -258,19 +269,19 @@ const openPopover = async (type: string) => {
  });
  // await nextTick()
  // formRef.value.resetFields()
-};
+}

 /** 关闭气泡卡 */
-const closePopover = (type: string, formRef: any | FormInstance) => {
+function closePopover(type: string, formRef: any | FormInstance) {
  if (formRef) {
    formRef.resetFields();
  }
  if (popOverVisible.value[type]) popOverVisible.value[type] = false;
  nextAssigneesActivityNode.value = [];
-};
+}

 /** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
-const initNextAssigneesFormField = async () => {
+async function initNextAssigneesFormField() {
  // 获取修改的流程变量, 暂时只支持流程表单
  const variables = getUpdatedProcessInstanceVariables();
  const data = await getNextApprovalNodes({
@@ -293,14 +304,14 @@ const initNextAssigneesFormField = async () => {
      }
    });
  }
-};
+}

 /** 选择下一个节点的审批人 */
-const selectNextAssigneesConfirm = (id: string, userList: any[]) => {
+function selectNextAssigneesConfirm(id: string, userList: any[]) {
  approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id);
-};
+}
 /** 审批通过时，校验每个自选审批人的节点是否都已配置了审批人 */
-const validateNextAssignees = () => {
+function validateNextAssignees() {
  if (Object.keys(nextAssigneesActivityNode.value).length === 0) {
    return true;
  }
@@ -312,13 +323,10 @@ const validateNextAssignees = () => {
    }
  }
  return true;
-};
+}

 /** 处理审批通过和不通过的操作 */
-const handleAudit = async (
-  pass: boolean,
-  formRef: FormInstance | undefined,
-) => {
+async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
  formLoading.value = true;
  try {
    // 校验表单
@@ -375,10 +383,10 @@ const handleAudit = async (
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理抄送 */
-const handleCopy = async () => {
+async function handleCopy() {
  formLoading.value = true;
  try {
    // 1. 校验表单
@@ -397,10 +405,10 @@ const handleCopy = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理转交 */
-const handleTransfer = async () => {
+async function handleTransfer() {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -421,10 +429,10 @@ const handleTransfer = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理委派 */
-const handleDelegate = async () => {
+async function handleDelegate() {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -446,10 +454,10 @@ const handleDelegate = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理加签 */
-const handlerAddSign = async (type: string) => {
+async function handlerAddSign(type: string) {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -471,10 +479,10 @@ const handlerAddSign = async (type: string) => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理退回 */
-const handleReturn = async () => {
+async function handleReturn() {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -496,10 +504,10 @@ const handleReturn = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理取消 */
-const handleCancel = async () => {
+async function handleCancel() {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -518,26 +526,26 @@ const handleCancel = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理再次提交 */
-const handleReCreate = async () => {
+async function handleReCreate() {
  // 跳转发起流程界面
  await router.push({
    path: '/bpm/task/create',
    query: { processInstanceId: props.processInstance?.id },
  });
  // router.push('/bpm/task/my');
-};
+}

 /** 获取减签人员标签 */
-const getDeleteSignUserLabel = (task: any): string => {
+function getDeleteSignUserLabel(task: any): string {
  const deptName = task?.assigneeUser?.deptName || task?.ownerUser?.deptName;
  const nickname = task?.assigneeUser?.nickname || task?.ownerUser?.nickname;
  return `${nickname} ( 所属部门：${deptName} )`;
-};
+}
 /** 处理减签 */
-const handlerDeleteSign = async () => {
+async function handlerDeleteSign() {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -557,23 +565,23 @@ const handlerDeleteSign = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}
 /** 重新加载数据 */
-const reload = () => {
+function reload() {
  emit('success');
-};
+}

 /** 任务是否为处理中状态 */
-const isHandleTaskStatus = () => {
+function isHandleTaskStatus() {
  let canHandle = false;
  if (BpmTaskStatusEnum.RUNNING === runningTask.value?.status) {
    canHandle = true;
  }
  return canHandle;
-};
+}

 /** 流程状态是否为结束状态 */
-const isEndProcessStatus = (status: number) => {
+function isEndProcessStatus(status: number) {
  let isEndStatus = false;
  if (
    BpmProcessInstanceStatus.APPROVE === status ||
@@ -583,10 +591,10 @@ const isEndProcessStatus = (status: number) => {
    isEndStatus = true;
  }
  return isEndStatus;
-};
+}

 /** 是否显示按钮 */
-const isShowButton = (btnType: BpmTaskOperationButtonTypeEnum): boolean => {
+function isShowButton(btnType: BpmTaskOperationButtonTypeEnum): boolean {
  let isShow = true;
  if (
    runningTask.value?.buttonsSetting &&
@@ -595,10 +603,10 @@ const isShowButton = (btnType: BpmTaskOperationButtonTypeEnum): boolean => {
    isShow = runningTask.value.buttonsSetting[btnType].enable;
  }
  return isShow;
-};
+}

 /** 获取按钮的显示名称 */
-const getButtonDisplayName = (btnType: BpmTaskOperationButtonTypeEnum) => {
+function getButtonDisplayName(btnType: BpmTaskOperationButtonTypeEnum) {
  let displayName = OPERATION_BUTTON_NAME.get(btnType);
  if (
    runningTask.value?.buttonsSetting &&
@@ -607,9 +615,9 @@ const getButtonDisplayName = (btnType: BpmTaskOperationButtonTypeEnum) => {
    displayName = runningTask.value.buttonsSetting[btnType].displayName;
  }
  return displayName;
-};
+}

-const loadTodoTask = (task: any) => {
+function loadTodoTask(task: any) {
  approveForm.value = {};
  runningTask.value = task;
  approveFormFApi.value = {};
@@ -629,10 +637,10 @@ const loadTodoTask = (task: any) => {
  } else {
    approveForm.value = {}; // 占位，避免为空
  }
-};
+}

 /** 校验流程表单 */
-const validateNormalForm = async () => {
+async function validateNormalForm() {
  if (props.processDefinition?.formType === BpmModelFormType.NORMAL) {
    let valid = true;
    try {
@@ -644,31 +652,31 @@ const validateNormalForm = async () => {
  } else {
    return true;
  }
-};
+}

 /** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
-const getUpdatedProcessInstanceVariables = () => {
+function getUpdatedProcessInstanceVariables() {
  const variables: any = {};
  props.writableFields.forEach((field: string) => {
    if (field && variables[field])
      variables[field] = props.normalFormApi.getValue(field);
  });
  return variables;
-};
+}

 /** 处理签名完成 */
-const handleSignFinish = (url: string) => {
+function handleSignFinish(url: string) {
  approveReasonForm.signPicUrl = url;
  approveFormRef.value?.validateFields(['signPicUrl']);
-};
+}

 /** 处理弹窗可见性 */
-const handlePopoverVisible = (visible: boolean) => {
+function handlePopoverVisible(visible: boolean) {
  if (!visible) {
    // 拦截关闭事件
    popOverVisible.value.approve = true;
  }
-};
+}

 defineExpose({ loadTodoTask });
 </script>
@@ -745,7 +753,7 @@ defineExpose({ loadTodoTask });
                name="signPicUrl"
                ref="approveSignFormRef"
              >
-                <Button @click="signRef.open()" type="primary">
+                <Button @click="openSignatureModal" type="primary">
                  {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
                </Button>

@@ -802,7 +810,7 @@ defineExpose({ loadTodoTask });
        "
      >
        <Button ghost danger type="primary" @click="openPopover('reject')">
-          <IconifyIcon icon="icon-park-outline:close" />
+          <IconifyIcon icon="lucide:x" />
          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.REJECT) }}
        </Button>
        <template #content>
@@ -862,7 +870,7 @@ defineExpose({ loadTodoTask });
        "
      >
        <Button type="dashed" @click="openPopover('copy')">
-          <IconifyIcon icon="icon-park-outline:copy" />
+          <IconifyIcon icon="lucide:copy" />
          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.COPY) }}
        </Button>
        <template #content>
@@ -1387,5 +1395,5 @@ defineExpose({ loadTodoTask });
  </div>

  <!-- 签名弹窗 -->
-  <Signature ref="signRef" @success="handleSignFinish" />
+  <SignatureModal @success="handleSignFinish" />
 </template>
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
@@ -16,6 +16,8 @@ defineOptions({

 const emits = defineEmits(['success']);

+const signature = ref<InstanceType<typeof Vue3Signature>>();
+
 const [Modal, modalApi] = useVbenModal({
  title: '流程签名',
  onOpenChange(visible) {
@@ -23,42 +25,30 @@ const [Modal, modalApi] = useVbenModal({
      modalApi.close();
    }
  },
-  onConfirm: () => {
-    submit();
+  async onConfirm() {
+    message.success({
+      content: '签名上传中请稍等。。。',
+    });
+    const signFileUrl = await uploadFile({
+      file: download.base64ToFile(
+        signature?.value?.save('image/jpeg') || '',
+        '签名',
+      ),
+    });
+    emits('success', signFileUrl);
+    modalApi.close();
  },
 });
-
-const signature = ref<InstanceType<typeof Vue3Signature>>();
-
-const open = async () => {
-  modalApi.open();
-};
-
-defineExpose({ open });
-
-const submit = async () => {
-  message.success({
-    content: '签名上传中请稍等。。。',
-  });
-  const signFileUrl = await uploadFile({
-    file: download.base64ToFile(
-      signature?.value?.save('image/jpeg') || '',
-      '签名',
-    ),
-  });
-  emits('success', signFileUrl);
-  modalApi.close();
-};
 </script>

 <template>
-  <Modal class="h-[500px] w-[900px]">
+  <Modal class="h-[40%] w-[60%]">
    <div class="mb-2 flex justify-end">
      <Space>
        <Tooltip title="撤销上一步操作">
          <Button @click="signature?.undo()">
            <template #icon>
-              <IconifyIcon icon="mi:undo" class="mb-[4px] size-[16px]" />
+              <IconifyIcon icon="lucide:undo" class="mb-[4px] size-[16px]" />
            </template>
            撤销
          </Button>
@@ -67,10 +57,7 @@ const submit = async () => {
        <Tooltip title="清空画布">
          <Button @click="signature?.clear()">
            <template #icon>
-              <IconifyIcon
-                icon="mdi:delete-outline"
-                class="mb-[4px] size-[16px]"
-              />
+              <IconifyIcon icon="lucide:trash" class="mb-[4px] size-[16px]" />
            </template>
            <span>清除</span>
          </Button>
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
@@ -14,7 +14,7 @@ import { Button } from 'ant-design-vue';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTaskListByProcessInstanceId } from '#/api/bpm/task';
-import { DICT_TYPE, formatPast2, setConfAndFields2 } from '#/utils';
+import { DICT_TYPE, setConfAndFields2 } from '#/utils';

 defineOptions({
  name: 'BpmProcessInstanceTaskList',
@@ -75,11 +75,7 @@ const columns = shallowRef([
    field: 'durationInMillis',
    title: '耗时',
    minWidth: 180,
-    slots: {
-      default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
-        return formatPast2(row.durationInMillis);
-      },
-    },
+    formatter: 'formatPast2',
  },
 ]);

@@ -116,9 +112,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /**
 * 刷新表格数据
 */
-const refresh = (): void => {
+function refresh() {
  gridApi.query();
-};
+}

 // 表单相关
 interface TaskForm {
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -108,12 +108,12 @@ const nodeTypeSvgMap = {
 const onlyStatusIconShow = [-1, 0, 1];

 // 获取审批节点类型图标
-const getApprovalNodeTypeIcon = (nodeType: BpmNodeTypeEnum) => {
+function getApprovalNodeTypeIcon(nodeType: BpmNodeTypeEnum) {
  return nodeTypeSvgMap[nodeType]?.icon;
-};
+}

 // 获取审批节点图标
-const getApprovalNodeIcon = (taskStatus: number, nodeType: BpmNodeTypeEnum) => {
+function getApprovalNodeIcon(taskStatus: number, nodeType: BpmNodeTypeEnum) {
  if (taskStatus === BpmTaskStatusEnum.NOT_START) {
    return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
  }
@@ -128,15 +128,15 @@ const getApprovalNodeIcon = (taskStatus: number, nodeType: BpmNodeTypeEnum) => {
    return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
  }
  return 'mdi:clock-outline';
-};
+}

 // 获取审批节点颜色
-const getApprovalNodeColor = (taskStatus: number) => {
+function getApprovalNodeColor(taskStatus: number) {
  return statusIconMap[taskStatus]?.color;
-};
+}

 // 获取审批节点时间
-const getApprovalNodeTime = (node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
+function getApprovalNodeTime(node: BpmProcessInstanceApi.ApprovalNodeInfo) {
  if (node.nodeType === BpmNodeTypeEnum.START_USER_NODE && node.startTime) {
    return formatDateTime(node.startTime);
  }
@@ -147,7 +147,7 @@ const getApprovalNodeTime = (node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
    return formatDateTime(node.startTime);
  }
  return '';
-};
+}

 // 选择自定义审批人
 const userSelectFormRef = ref();
@@ -164,26 +164,26 @@ const handleSelectUser = (activityId: string, selectedList: any[]) => {

 // 选择用户完成
 const selectedUsers = ref<number[]>([]);
-const handleUserSelectConfirm = (userList: any[]) => {
+function handleUserSelectConfirm(userList: any[]) {
  customApproveUsers.value[selectedActivityNodeId.value] = userList || [];

  emit('selectUserConfirm', selectedActivityNodeId.value, userList);
-};
+}

 /** 跳转子流程 */
-const handleChildProcess = (activity: any) => {
+function handleChildProcess(activity: any) {
  push({
    name: 'BpmProcessInstanceDetail',
    query: {
      id: activity.processInstanceId,
    },
  });
-};
+}

 // 判断是否需要显示自定义选择审批人
-const shouldShowCustomUserSelect = (
+function shouldShowCustomUserSelect(
  activity: BpmProcessInstanceApi.ApprovalNodeInfo,
-) => {
+) {
  return (
    isEmpty(activity.tasks) &&
    isEmpty(activity.candidateUsers) &&
@@ -192,27 +192,27 @@ const shouldShowCustomUserSelect = (
      BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
        activity.candidateStrategy)
  );
-};
+}

 // 判断是否需要显示审批意见
-const shouldShowApprovalReason = (task: any, nodeType: BpmNodeTypeEnum) => {
+function shouldShowApprovalReason(task: any, nodeType: BpmNodeTypeEnum) {
  return (
    task.reason &&
    [BpmNodeTypeEnum.END_EVENT_NODE, BpmNodeTypeEnum.USER_TASK_NODE].includes(
      nodeType,
    )
  );
-};
+}

 // 用户选择弹窗关闭
-const handleUserSelectClosed = () => {
+function handleUserSelectClosed() {
  selectedUsers.value = [];
-};
+}

 // 用户选择弹窗取消
-const handleUserSelectCancel = () => {
+function handleUserSelectCancel() {
  selectedUsers.value = [];
-};
+}
 </script>

 <template>