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

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,11 +119,8 @@ function onBack() {
   });
 }
 
-// ============================== 审核流程相关 ==============================
-
 /** 审批相关：获取审批详情 */
 async function getApprovalDetail() {
-  try {
   const data = await getApprovalDetailApi({
     processDefinitionId: processDefinitionId.value,
     // TODO 小北：可以支持 processDefinitionKey 查询
@@ -160,10 +155,8 @@ async function getApprovalDetail() {
           : [];
     }
   }
-  } 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,

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: '请输入原因',
-      },
+        allowClear: true,
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
       },
     },
   ];
@@ -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: '原因',

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;
+    loading.value = true;
-    detailData.value = await getLeave(Number(props.id || queryId.value));
+    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
+    <Spin :spinning="loading" tip="加载中...">
-      :data="detailData"
+      <Descriptions :data="formData" />
-      :schema="useDetailFormSchema()"
+    </Spin>
-      :component-props="{
-        column: 1,
-        bordered: true,
-        size: 'small',
-      }"
-    />
   </ContentWrap>
 </template>
-
-<style lang="scss" scoped>
-:deep(.ant-descriptions-item-label) {
-  width: 150px;
-}
-</style>

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'],
+              ifShow: row.result === BpmProcessInstanceStatus.RUNNING,
-              popConfirm: {
+              onClick: handleCancel.bind(null, row),
-                title: '取消流程',
-                confirm: handleCancel.bind(null, row),
-              },
             },
           ]"
         />