feat：【antd】【bpm】oa 相关代码优化

2025-10-24 22:18:32 +08:00
parent 616dbf3b32
commit d181c2a228
4 changed files with 147 additions and 150 deletions
--- a/apps/web-antd/src/views/bpm/oa/leave/create.vue
+++ b/apps/web-antd/src/views/bpm/oa/leave/create.vue
@@ -22,7 +22,6 @@ import { useFormSchema } from './data';

 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

-// 审批相关：变量
 const processDefineKey = 'oa_leave'; // 流程定义 Key
 const startUserSelectTasks = ref<any>([]); // 发起人需要选择审批人的用户任务列表
 const startUserSelectAssignees = ref<any>({}); // 发起人选择审批人的数据
@@ -95,7 +94,6 @@ async function onSubmit() {
      key: 'action_process_msg',
    });

-    // TODO @ziye、@jason：好像跳转不了？
    await router.push({
      name: 'BpmOALeave',
    });
@@ -121,49 +119,44 @@ function onBack() {
  });
 }

-// ============================== 审核流程相关 ==============================
-
 /** 审批相关：获取审批详情 */
 async function getApprovalDetail() {
-  try {
-    const data = await getApprovalDetailApi({
-      processDefinitionId: processDefinitionId.value,
-      // TODO 小北：可以支持 processDefinitionKey 查询
-      activityId: BpmNodeIdEnum.START_USER_NODE_ID,
-      processVariablesStr: JSON.stringify({
-        day: dayjs(formData.value?.startTime).diff(
-          dayjs(formData.value?.endTime),
-          'day',
-        ),
-      }), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
-    });
+  const data = await getApprovalDetailApi({
+    processDefinitionId: processDefinitionId.value,
+    // TODO 小北：可以支持 processDefinitionKey 查询
+    activityId: BpmNodeIdEnum.START_USER_NODE_ID,
+    processVariablesStr: JSON.stringify({
+      day: dayjs(formData.value?.startTime).diff(
+        dayjs(formData.value?.endTime),
+        'day',
+      ),
+    }), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+  });

-    if (!data) {
-      message.error('查询不到审批详情信息！');
-      return;
-    }
-    // 获取审批节点，显示 Timeline 的数据
-    activityNodes.value = data.activityNodes;
+  if (!data) {
+    message.error('查询不到审批详情信息！');
+    return;
+  }
+  // 获取审批节点，显示 Timeline 的数据
+  activityNodes.value = data.activityNodes;

-    // 获取发起人自选的任务
-    startUserSelectTasks.value = data.activityNodes?.filter(
-      (node: BpmProcessInstanceApi.ApprovalNodeInfo) =>
-        BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
-    );
-    // 恢复之前的选择审批人
-    if (startUserSelectTasks.value?.length > 0) {
-      for (const node of startUserSelectTasks.value) {
-        startUserSelectAssignees.value[node.id] =
-          tempStartUserSelectAssignees.value[node.id] &&
-          tempStartUserSelectAssignees.value[node.id].length > 0
-            ? tempStartUserSelectAssignees.value[node.id]
-            : [];
-      }
+  // 获取发起人自选的任务
+  startUserSelectTasks.value = data.activityNodes?.filter(
+    (node: BpmProcessInstanceApi.ApprovalNodeInfo) =>
+      BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
+  );
+  // 恢复之前的选择审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    for (const node of startUserSelectTasks.value) {
+      startUserSelectAssignees.value[node.id] =
+        tempStartUserSelectAssignees.value[node.id] &&
+        tempStartUserSelectAssignees.value[node.id].length > 0
+          ? tempStartUserSelectAssignees.value[node.id]
+          : [];
    }
-  } finally {
-    //
  }
 }
+
 /** 审批相关：选择发起人 */
 function selectUserConfirm(id: string, userList: any[]) {
  startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id);
@@ -189,7 +182,6 @@ watch(
  },
 );

-// ============================== 生命周期 ==============================
 onMounted(async () => {
  const processDefinitionDetail: any = await getProcessDefinition(
    undefined,
--- a/apps/web-antd/src/views/bpm/oa/leave/data.ts
+++ b/apps/web-antd/src/views/bpm/oa/leave/data.ts
@@ -6,7 +6,7 @@ import { h } from 'vue';

 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-import { formatDateTime } from '@vben/utils';
+import { formatDate } from '@vben/utils';

 import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
@@ -71,7 +71,7 @@ export function useFormSchema(): VbenFormSchema[] {
 }

 /** 列表的搜索表单 */
-export function GridFormSchema(): VbenFormSchema[] {
+export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'type',
@@ -83,17 +83,26 @@ export function GridFormSchema(): VbenFormSchema[] {
        allowClear: true,
      },
    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
    {
      fieldName: 'status',
      label: '审批结果',
      component: 'Select',
      componentProps: {
        placeholder: '请选择审批结果',
+        allowClear: true,
        options: getDictOptions(
          DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
          'number',
        ),
-        allowClear: true,
      },
    },
    {
@@ -102,14 +111,7 @@ export function GridFormSchema(): VbenFormSchema[] {
      component: 'Input',
      componentProps: {
        placeholder: '请输入原因',
-      },
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
+        allowClear: true,
      },
    },
  ];
@@ -136,13 +138,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
      field: 'startTime',
      title: '开始时间',
      minWidth: 180,
-      formatter: 'formatDateTime',
+      formatter: 'formatDate',
    },
    {
      field: 'endTime',
      title: '结束时间',
      minWidth: 180,
-      formatter: 'formatDateTime',
+      formatter: 'formatDate',
    },
    {
      field: 'type',
@@ -188,12 +190,12 @@ export function useDetailFormSchema(): DescriptionItemSchema[] {
    {
      label: '开始时间',
      field: 'startTime',
-      render: (val) => formatDateTime(val) as string,
+      render: (val) => formatDate(val) as string,
    },
    {
      label: '结束时间',
      field: 'endTime',
-      render: (val) => formatDateTime(val) as string,
+      render: (val) => formatDate(val) as string,
    },
    {
      label: '原因',
--- a/apps/web-antd/src/views/bpm/oa/leave/detail.vue
+++ b/apps/web-antd/src/views/bpm/oa/leave/detail.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';

 import { computed, onMounted, ref } from 'vue';
@@ -6,29 +6,41 @@ import { useRoute } from 'vue-router';

 import { ContentWrap } from '@vben/common-ui';

+import { Spin } from 'ant-design-vue';
+
 import { getLeave } from '#/api/bpm/oa/leave';
-import { Description } from '#/components/description';
+import { useDescription } from '#/components/description';

 import { useDetailFormSchema } from './data';

 const props = defineProps<{
  id: string;
 }>();
-const datailLoading = ref(false);
-const detailData = ref<BpmOALeaveApi.Leave>();

 const { query } = useRoute();
+
+const loading = ref(false);
+const formData = ref<BpmOALeaveApi.Leave>();
 const queryId = computed(() => query.id as string);

+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 1,
+  class: 'mx-4',
+  schema: useDetailFormSchema(),
+});
+
+/** 获取详情数据 */
 async function getDetailData() {
  try {
-    datailLoading.value = true;
-    detailData.value = await getLeave(Number(props.id || queryId.value));
+    loading.value = true;
+    formData.value = await getLeave(Number(props.id || queryId.value));
  } finally {
-    datailLoading.value = false;
+    loading.value = false;
  }
 }

+/** 初始化 */
 onMounted(() => {
  getDetailData();
 });
@@ -36,20 +48,8 @@ onMounted(() => {

 <template>
  <ContentWrap class="m-2">
-    <Description
-      :data="detailData"
-      :schema="useDetailFormSchema()"
-      :component-props="{
-        column: 1,
-        bordered: true,
-        size: 'small',
-      }"
-    />
+    <Spin :spinning="loading" tip="加载中...">
+      <Descriptions :data="formData" />
+    </Spin>
  </ContentWrap>
 </template>
-
-<style lang="scss" scoped>
-:deep(.ant-descriptions-item-label) {
-  width: 150px;
-}
-</style>
--- a/apps/web-antd/src/views/bpm/oa/leave/index.vue
+++ b/apps/web-antd/src/views/bpm/oa/leave/index.vue
@@ -5,19 +5,91 @@ import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
 import { h } from 'vue';

 import { DocAlert, Page, prompt } from '@vben/common-ui';
+import { BpmProcessInstanceStatus } from '@vben/constants';

 import { message, Textarea } from 'ant-design-vue';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getLeavePage } from '#/api/bpm/oa/leave';
 import { cancelProcessInstanceByStartUser } from '#/api/bpm/processInstance';
+import { $t } from '#/locales';
 import { router } from '#/router';

-import { GridFormSchema, useGridColumns } from './data';
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建请假 */
+function handleCreate() {
+  router.push({
+    name: 'OALeaveCreate',
+    query: {
+      formType: 'create',
+    },
+  });
+}
+
+/** 取消请假 */
+function handleCancel(row: BpmOALeaveApi.Leave) {
+  prompt({
+    title: '取消流程',
+    content: '请输入取消原因',
+    modelPropName: 'value',
+    component: () => {
+      return h(Textarea, {
+        placeholder: '请输入取消原因',
+        allowClear: true,
+        rows: 2,
+        rules: [{ required: true, message: '请输入取消原因' }],
+      });
+    },
+    async beforeClose(scope) {
+      if (!scope.isConfirm) {
+        return;
+      }
+      if (!scope.value) {
+        message.error('请输入取消原因');
+        return false;
+      }
+      const hideLoading = message.loading({
+        content: '正在取消中...',
+        duration: 0,
+      });
+      try {
+        await cancelProcessInstanceByStartUser(row.id, scope.value);
+        message.success('取消成功');
+        handleRefresh();
+      } catch {
+        return false;
+      } finally {
+        hideLoading();
+      }
+    },
+  });
+}
+
+/** 查看请假详情 */
+function handleDetail(row: BpmOALeaveApi.Leave) {
+  router.push({
+    name: 'OALeaveDetail',
+    query: { id: row.id },
+  });
+}
+
+/** 审批进度 */
+function handleProgress(row: BpmOALeaveApi.Leave) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.processInstanceId },
+  });
+}

 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
-    schema: GridFormSchema(),
+    schema: useGridFormSchema(),
  },
  gridOptions: {
    columns: useGridColumns(),
@@ -36,6 +108,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -43,70 +116,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
  } as VxeTableGridOptions<BpmOALeaveApi.Leave>,
 });
-
-/** 创建请假 */
-function handleCreate() {
-  router.push({
-    name: 'OALeaveCreate',
-    query: {
-      formType: 'create',
-    },
-  });
-}
-
-/** 查看请假详情 */
-function handleDetail(row: BpmOALeaveApi.Leave) {
-  router.push({
-    name: 'OALeaveDetail',
-    query: { id: row.id },
-  });
-}
-
-/** 取消请假 */
-function handleCancel(row: BpmOALeaveApi.Leave) {
-  prompt({
-    async beforeClose(scope) {
-      if (scope.isConfirm) {
-        if (scope.value) {
-          try {
-            await cancelProcessInstanceByStartUser(row.id, scope.value);
-            message.success('取消成功');
-            handleRefresh();
-          } catch {
-            return false;
-          }
-        } else {
-          message.error('请输入取消原因');
-          return false;
-        }
-      }
-    },
-    component: () => {
-      return h(Textarea, {
-        placeholder: '请输入取消原因',
-        allowClear: true,
-        rows: 2,
-        rules: [{ required: true, message: '请输入取消原因' }],
-      });
-    },
-    content: '请输入取消原因',
-    title: '取消流程',
-    modelPropName: 'value',
-  });
-}
-
-/** 审批进度 */
-function handleProgress(row: BpmOALeaveApi.Leave) {
-  router.push({
-    name: 'BpmProcessInstanceDetail',
-    query: { id: row.processInstanceId },
-  });
-}
-
-/** 刷新表格 */
-function handleRefresh() {
-  gridApi.query();
-}
 </script>

 <template>
@@ -126,7 +135,6 @@ function handleRefresh() {
              label: '发起请假',
              type: 'primary',
              icon: ACTION_ICON.ADD,
-              auth: ['bpm:oa-leave:create'],
              onClick: handleCreate,
            },
          ]"
@@ -139,14 +147,12 @@ function handleRefresh() {
              label: $t('common.detail'),
              type: 'link',
              icon: ACTION_ICON.VIEW,
-              auth: ['bpm:oa-leave:query'],
              onClick: handleDetail.bind(null, row),
            },
            {
              label: '审批进度',
              type: 'link',
              icon: ACTION_ICON.VIEW,
-              auth: ['bpm:oa-leave:query'],
              onClick: handleProgress.bind(null, row),
            },
            {
@@ -154,11 +160,8 @@ function handleRefresh() {
              type: 'link',
              danger: true,
              icon: ACTION_ICON.DELETE,
-              auth: ['bpm:user-group:query'],
-              popConfirm: {
-                title: '取消流程',
-                confirm: handleCancel.bind(null, row),
-              },
+              ifShow: row.result === BpmProcessInstanceStatus.RUNNING,
+              onClick: handleCancel.bind(null, row),
            },
          ]"
        />