!314 Merge remote-tracking branch 'yudao/dev' into dev

Merge pull request !314 from Jason/dev

apps/web-antd/src/views/bpm/oa/leave/create.vue

@@ -10,7 +10,7 @@ import { BpmCandidateStrategyEnum, BpmNodeIdEnum } from '@vben/constants';
 import { useTabs } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, Card, message, Space } from 'ant-design-vue';
+import { Button, Card, Col, message, Row, Space } from 'ant-design-vue';
 import dayjs from 'dayjs';
 
 import { getProcessDefinition } from '#/api/bpm/definition';
@@ -26,6 +26,7 @@ const { closeCurrentTab } = useTabs();
 const { query } = useRoute();
 
 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const processTimeLineLoading = ref(false); // 审批流的加载中
 
 const processDefineKey = 'oa_leave'; // 流程定义 Key
 const startUserSelectTasks = ref<any>([]); // 发起人需要选择审批人的用户任务列表
@@ -95,6 +96,7 @@ async function onSubmit() {
       content: $t('ui.actionMessage.operationSuccess'),
       key: 'action_process_msg',
     });
+    closeCurrentTab();
     await router.push({
       name: 'BpmOALeave',
     });
@@ -119,38 +121,43 @@ function onBack() {
 
 /** 审批相关：获取审批详情 */
 async function getApprovalDetail() {
-  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;
-
-  // 获取发起人自选的任务
-  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]
-          : [];
+  processTimeLineLoading.value = true;
+  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
+    });
+    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]
+            : [];
+      }
+    }
+  } finally {
+    processTimeLineLoading.value = false;
   }
 }
 
@@ -231,30 +238,35 @@ onMounted(async () => {
 
 <template>
   <Page>
-    <div class="mx-auto w-[80vw] max-w-[920px]">
-      <Card :title="getTitle" class="w-full">
-        <template #extra>
-          <Button type="default" @click="onBack">
-            <IconifyIcon icon="lucide:arrow-left" />
-            返回
-          </Button>
-        </template>
+    <Row :gutter="16">
+      <Col :span="16">
+        <Card :title="getTitle" class="w-full" v-loading="formLoading">
+          <template #extra>
+            <Button type="default" @click="onBack">
+              <IconifyIcon icon="lucide:arrow-left" />
+              返回
+            </Button>
+          </template>
 
-        <Form />
-      </Card>
-
-      <Card title="流程" class="mt-2 w-full">
-        <ProcessInstanceTimeline
-          :activity-nodes="activityNodes"
-          :show-status-icon="false"
-          @select-user-confirm="selectUserConfirm"
-        />
-        <template #actions>
-          <Space warp :size="12" class="w-full px-6">
-            <Button type="primary" @click="onSubmit"> 提交 </Button>
-          </Space>
-        </template>
-      </Card>
-    </div>
+          <Form />
+          <template #actions>
+            <Space warp :size="12" class="w-full px-6">
+              <Button type="primary" @click="onSubmit" :loading="formLoading">
+                提交
+              </Button>
+            </Space>
+          </template>
+        </Card>
+      </Col>
+      <Col :span="8">
+        <Card title="流程" class="w-full" v-loading="processTimeLineLoading">
+          <ProcessInstanceTimeline
+            :activity-nodes="activityNodes"
+            :show-status-icon="false"
+            @select-user-confirm="selectUserConfirm"
+          />
+        </Card>
+      </Col>
+    </Row>
   </Page>
 </template>

apps/web-ele/src/router/routes/modules/leave.ts

@@ -0,0 +1,45 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+// OA 请假相关路由配置
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/bpm/oa',
+    name: 'OALeave',
+    meta: {
+      title: 'OA请假',
+      hideInMenu: true,
+      redirect: '/bpm/oa/leave/index',
+    },
+    children: [
+      {
+        path: 'leave',
+        name: 'OALeaveIndex',
+        component: () => import('#/views/bpm/oa/leave/index.vue'),
+        meta: {
+          title: '请假列表',
+          activePath: '/bpm/oa/leave',
+        },
+      },
+      {
+        path: 'leave/create',
+        name: 'OALeaveCreate',
+        component: () => import('#/views/bpm/oa/leave/create.vue'),
+        meta: {
+          title: '创建请假',
+          activePath: '/bpm/oa/leave',
+        },
+      },
+      {
+        path: 'leave/detail',
+        name: 'OALeaveDetail',
+        component: () => import('#/views/bpm/oa/leave/detail.vue'),
+        meta: {
+          title: '请假详情',
+          activePath: '/bpm/oa/leave',
+        },
+      },
+    ],
+  },
+];
+
+export default routes;

apps/web-ele/src/views/bpm/oa/leave/create.vue

@@ -0,0 +1,282 @@
+<script lang="ts" setup>
+import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
+import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
+
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { confirm, Page, useVbenForm } from '@vben/common-ui';
+import { BpmCandidateStrategyEnum, BpmNodeIdEnum } from '@vben/constants';
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import dayjs from 'dayjs';
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElMessage,
+  ElRow,
+  ElSpace,
+} from 'element-plus';
+
+import { getProcessDefinition } from '#/api/bpm/definition';
+import { createLeave, getLeave, updateLeave } from '#/api/bpm/oa/leave';
+import { getApprovalDetail as getApprovalDetailApi } from '#/api/bpm/processInstance';
+import { $t } from '#/locales';
+import { router } from '#/router';
+import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
+
+import { useFormSchema } from './data';
+
+const { closeCurrentTab } = useTabs();
+const { query } = useRoute();
+
+const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const processTimeLineLoading = ref(false); // 审批流的加载中
+
+const processDefineKey = 'oa_leave'; // 流程定义 Key
+const startUserSelectTasks = ref<any>([]); // 发起人需要选择审批人的用户任务列表
+const startUserSelectAssignees = ref<any>({}); // 发起人选择审批人的数据
+const tempStartUserSelectAssignees = ref<any>({}); // 历史发起人选择审批人的数据，用于每次表单变更时，临时保存
+const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]); // 审批节点信息
+const processDefinitionId = ref('');
+
+const formData = ref<BpmOALeaveApi.Leave>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? '重新发起请假'
+    : $t('ui.actionTitle.create', ['请假']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 提交申请 */
+async function onSubmit() {
+  // 1.1 表单校验
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  // 1.2 审批相关：校验指定审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    for (const userTask of startUserSelectTasks.value) {
+      if (
+        Array.isArray(startUserSelectAssignees.value[userTask.id]) &&
+        startUserSelectAssignees.value[userTask.id].length === 0
+      ) {
+        return ElMessage.warning(`请选择${userTask.name}的审批人`);
+      }
+    }
+  }
+
+  // 提交表单
+  const data = (await formApi.getValues()) as BpmOALeaveApi.Leave;
+  // 审批相关：设置指定审批人
+  if (startUserSelectTasks.value?.length > 0) {
+    data.startUserSelectAssignees = startUserSelectAssignees.value;
+  }
+  // 格式化开始时间和结束时间的值
+  const submitData: BpmOALeaveApi.Leave = {
+    ...data,
+    startTime: Number(data.startTime),
+    endTime: Number(data.endTime),
+  };
+  try {
+    formLoading.value = true;
+    await (formData.value?.id
+      ? updateLeave(submitData)
+      : createLeave(submitData));
+    // 关闭并提示
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    closeCurrentTab();
+    await router.push({
+      name: 'BpmOALeave',
+    });
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 返回上一页 */
+function onBack() {
+  confirm({
+    content: '确定要返回上一页吗？请先保存您填写的信息！',
+    icon: 'warning',
+    beforeClose({ isConfirm }) {
+      if (isConfirm) {
+        closeCurrentTab();
+      }
+      return Promise.resolve(true);
+    },
+  });
+}
+
+/** 审批相关：获取审批详情 */
+async function getApprovalDetail() {
+  processTimeLineLoading.value = true;
+  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
+    });
+    if (!data) {
+      ElMessage.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]
+            : [];
+      }
+    }
+  } finally {
+    processTimeLineLoading.value = false;
+  }
+}
+
+/** 审批相关：选择发起人 */
+function selectUserConfirm(id: string, userList: any[]) {
+  startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id);
+}
+
+/** 获取请假数据，用于重新发起时自动填充 */
+async function getDetail(id: number) {
+  formLoading.value = true;
+  try {
+    const data = await getLeave(id);
+    if (!data) {
+      ElMessage.error('重新发起请假失败，原因：请假数据不存在');
+      return;
+    }
+    formData.value = {
+      ...formData.value,
+      id: data.id,
+      type: data.type,
+      reason: data.reason,
+      startTime: data.startTime,
+      endTime: data.endTime,
+    } as BpmOALeaveApi.Leave;
+    await formApi.setValues({
+      type: data.type,
+      reason: data.reason,
+      startTime: data.startTime,
+      endTime: data.endTime,
+    });
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 审批相关：预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次, formData.value可改成实际业务中的特定字段 */
+watch(
+  formData.value as object,
+  (newValue, oldValue) => {
+    if (!oldValue) {
+      return;
+    }
+    if (newValue && Object.keys(newValue).length > 0) {
+      // 记录之前的节点审批人
+      tempStartUserSelectAssignees.value = startUserSelectAssignees.value;
+      startUserSelectAssignees.value = {};
+      // 加载最新的审批详情,主要用于节点预测
+      getApprovalDetail();
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  const processDefinitionDetail: any = await getProcessDefinition(
+    undefined,
+    processDefineKey,
+  );
+  if (!processDefinitionDetail) {
+    ElMessage.error('OA 请假的流程模型未配置，请检查！');
+    return;
+  }
+  processDefinitionId.value = processDefinitionDetail.id;
+  startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks;
+
+  // 如果是重新发起，则加载请假数据
+  if (query.id) {
+    await getDetail(Number(query.id));
+  }
+
+  await getApprovalDetail();
+});
+</script>
+
+<template>
+  <Page>
+    <ElRow :gutter="16">
+      <ElCol :span="16">
+        <ElCard v-loading="formLoading">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span>{{ getTitle }}</span>
+              <ElButton @click="onBack">
+                <IconifyIcon icon="lucide:arrow-left" />
+                返回
+              </ElButton>
+            </div>
+          </template>
+
+          <Form />
+          <template #footer>
+            <ElSpace wrap :size="12" class="w-full px-6">
+              <ElButton type="primary" @click="onSubmit" :loading="formLoading">
+                提交
+              </ElButton>
+            </ElSpace>
+          </template>
+        </ElCard>
+      </ElCol>
+      <ElCol :span="8">
+        <ElCard v-loading="processTimeLineLoading">
+          <template #header>
+            <span>流程</span>
+          </template>
+          <ProcessInstanceTimeline
+            :activity-nodes="activityNodes"
+            :show-status-icon="false"
+            @select-user-confirm="selectUserConfirm"
+          />
+        </ElCard>
+      </ElCol>
+    </ElRow>
+  </Page>
+</template>

apps/web-ele/src/views/bpm/oa/leave/data.ts

@@ -0,0 +1,205 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDate } from '@vben/utils';
+
+import { DictTag } from '#/components/dict-tag';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '请假类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择请假类型',
+        options: getDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE, 'number'),
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+
+    {
+      fieldName: 'startTime',
+      label: '开始时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择开始时间',
+        showTime: true,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD HH:mm:ss',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '结束时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择结束时间',
+        showTime: true,
+        valueFormat: 'x',
+        format: 'YYYY-MM-DD HH:mm:ss',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'reason',
+      label: '原因',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入原因',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'type',
+      label: '请假类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择请假类型',
+        options: getDictOptions(DICT_TYPE.BPM_OA_LEAVE_TYPE, 'number'),
+        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',
+        ),
+      },
+    },
+    {
+      fieldName: 'reason',
+      label: '原因',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入原因',
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '申请编号',
+      minWidth: 100,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
+      },
+    },
+    {
+      field: 'startTime',
+      title: '开始时间',
+      minWidth: 180,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'endTime',
+      title: '结束时间',
+      minWidth: 180,
+      formatter: 'formatDate',
+    },
+    {
+      field: 'type',
+      title: '请假类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_OA_LEAVE_TYPE },
+      },
+    },
+    {
+      field: 'reason',
+      title: '原因',
+      minWidth: 150,
+    },
+    {
+      field: 'createTime',
+      title: '申请时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 详情 */
+export function useDetailFormSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      label: '请假类型',
+      field: 'type',
+      render: (val) =>
+        h(DictTag, {
+          type: DICT_TYPE.BPM_OA_LEAVE_TYPE,
+          value: val,
+        }),
+    },
+    {
+      label: '开始时间',
+      field: 'startTime',
+      render: (val) => formatDate(val) as string,
+    },
+    {
+      label: '结束时间',
+      field: 'endTime',
+      render: (val) => formatDate(val) as string,
+    },
+    {
+      label: '原因',
+      field: 'reason',
+    },
+  ];
+}

apps/web-ele/src/views/bpm/oa/leave/detail.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
+
+import { computed, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { ContentWrap } from '@vben/common-ui';
+
+import { getLeave } from '#/api/bpm/oa/leave';
+import { useDescription } from '#/components/description';
+
+import { useDetailFormSchema } from './data';
+
+const props = defineProps<{
+  id: string;
+}>();
+
+const { query } = useRoute();
+
+const loading = ref(false);
+const formData = ref<BpmOALeaveApi.Leave>();
+const queryId = computed(() => query.id as string);
+
+const [Descriptions] = useDescription({
+  border: true,
+  column: 1,
+  schema: useDetailFormSchema(),
+});
+
+/** 获取详情数据 */
+async function getDetailData() {
+  try {
+    loading.value = true;
+    formData.value = await getLeave(Number(props.id || queryId.value));
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getDetailData();
+});
+</script>
+
+<template>
+  <ContentWrap class="m-2" v-loading="loading" element-loading-text="加载中...">
+    <Descriptions :data="formData" class="mx-4" />
+  </ContentWrap>
+</template>

apps/web-ele/src/views/bpm/oa/leave/index.vue

@@ -0,0 +1,198 @@
+<script lang="ts" setup>
+import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
+
+import { onActivated } from 'vue';
+
+import { DocAlert, Page, prompt } from '@vben/common-ui';
+import { BpmProcessInstanceStatus } from '@vben/constants';
+
+import { ElInput, ElMessage } from 'element-plus';
+
+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 { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建请假 */
+function handleCreate() {
+  router.push({
+    name: 'OALeaveCreate',
+    query: {
+      formType: 'create',
+    },
+  });
+}
+
+/** 重新发起请假 */
+function handleReCreate(row: BpmOALeaveApi.Leave) {
+  router.push({
+    name: 'OALeaveCreate',
+    query: {
+      id: row.id,
+    },
+  });
+}
+
+/** 取消请假 */
+function handleCancel(row: BpmOALeaveApi.Leave) {
+  prompt({
+    title: '取消流程',
+    content: '请输入取消原因',
+    component: ElInput,
+    componentProps: {
+      placeholder: '请输入取消原因',
+      clearable: true,
+      type: 'textarea',
+      rows: 2,
+    },
+    modelPropName: 'modelValue',
+    async beforeClose(scope) {
+      if (!scope.isConfirm) {
+        return;
+      }
+      if (!scope.value) {
+        ElMessage.error('请输入取消原因');
+        return false;
+      }
+      const hideLoading = ElMessage({
+        type: 'info',
+        message: '正在取消中...',
+        duration: 0,
+      });
+      try {
+        await cancelProcessInstanceByStartUser(row.id, scope.value);
+        ElMessage.success('取消成功');
+        handleRefresh();
+      } catch {
+        return false;
+      } finally {
+        hideLoading.close();
+      }
+    },
+  });
+}
+
+/** 查看请假详情 */
+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: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async (
+          { page }: { page: { currentPage: number; pageSize: number } },
+          formValues: Record<string, any>,
+        ) => {
+          return await getLeavePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  },
+});
+
+/** 激活时 */
+onActivated(() => {
+  handleRefresh();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="审批接入（业务表单）"
+        url="https://doc.iocoder.cn/bpm/use-business-form/"
+      />
+    </template>
+
+    <Grid table-title="请假列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '发起请假',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: '审批进度',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: handleProgress.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: row.status === BpmProcessInstanceStatus.RUNNING,
+              onClick: handleCancel.bind(null, row),
+            },
+            {
+              label: '重新发起',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              ifShow: row.status !== BpmProcessInstanceStatus.RUNNING,
+              onClick: handleReCreate.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>