feat：【antd】【bpm】bpm/definition 的优化

apps/web-antd/src/api/bpm/definition/index.ts

@@ -1,5 +1,7 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { BpmModelApi } from '#/api/bpm/model';
+
 import { requestClient } from '#/api/request';
 
 export namespace BpmProcessDefinitionApi {
@@ -16,10 +18,14 @@ export namespace BpmProcessDefinitionApi {
     modelType: number;
     modelId: string;
     formType?: number;
+    formId?: number;
+    formName?: string;
+    formCustomCreatePath?: string;
     bpmnXml?: string;
     simpleModel?: string;
     formFields?: string[];
     icon?: string;
+    startUsers?: BpmModelApi.UserInfo[];
   }
 }
 

apps/web-antd/src/views/bpm/model/definition/data.ts

@@ -4,7 +4,7 @@ import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 import { DICT_TYPE } from '@vben/constants';
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions<BpmProcessDefinitionApi.ProcessDefinition>['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',

apps/web-antd/src/views/bpm/model/definition/index.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 
 import { onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -17,67 +18,64 @@ import { useGridColumns } from './data';
 
 defineOptions({ name: 'BpmProcessDefinition' });
 
+const route = useRoute();
+const router = useRouter();
+
 const [FormCreateDetailModal, formCreateDetailModalApi] = useVbenModal({
   connectedComponent: FormCreateDetail,
   destroyOnClose: true,
 });
 
-/** 查看表单详情 */
-function handleFormDetail(row: any) {
-  if (row.formType === BpmModelFormType.NORMAL) {
-    const data = {
-      id: row.formId,
-    };
-    formCreateDetailModalApi.setData(data).open();
-  } else {
-    // TODO 待实现
-    console.warn('业务表单待实现', row);
-  }
-}
-
-const router = useRouter();
-/** 恢复流程模型 */
-async function openModelForm(id?: number) {
-  await router.push({
-    name: 'BpmModelUpdate',
-    params: { id, type: 'definition' },
-  });
-}
-
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-const route = useRoute();
+/** 查看表单详情 */
+function handleFormDetail(row: BpmProcessDefinitionApi.ProcessDefinition) {
+  if (row.formType === BpmModelFormType.NORMAL) {
+    const data = {
+      id: row.formId,
+    };
+    formCreateDetailModalApi.setData(data).open();
+  } else {
+    // TODO 待实现 jason 这里要改么？
+    console.warn('业务表单待实现', row);
+  }
+}
+
+/** 恢复流程模型 */
+async function handleRecover(row: BpmProcessDefinitionApi.ProcessDefinition) {
+  await router.push({
+    name: 'BpmModelUpdate',
+    params: { id: row.id, type: 'definition' },
+  });
+}
 
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
-    pagerConfig: {
-      enabled: true,
-    },
     proxyConfig: {
       ajax: {
         query: async ({ page }) => {
-          const params = {
+          return await getProcessDefinitionPage({
-            pageNo: page?.currentPage,
+            pageNo: page.currentPage,
-            pageSize: page?.pageSize,
+            pageSize: page.pageSize,
-            key: route.query.key,
+            key: route.query.key as string,
-          };
+          });
-          return await getProcessDefinitionPage(params);
         },
       },
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
     },
-  } as VxeTableGridOptions,
+  } as VxeTableGridOptions<BpmProcessDefinitionApi.ProcessDefinition>,
 });
 
 /** 初始化 */
@@ -88,21 +86,24 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height>
+    <FormCreateDetailModal />
     <template #doc>
       <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
     </template>
     <Grid table-title="流程定义列表">
       <template #startUsers="{ row }">
-        <template v-if="!row.startUsers?.length">全部可见</template>
+        <template v-if="!row.startUsers || row.startUsers.length === 0">
+          全部可见
+        </template>
         <template v-else-if="row.startUsers.length === 1">
-          {{ row.startUsers[0].nickname }}
+          {{ row.startUsers[0]!.nickname }}
         </template>
         <template v-else>
           <Tooltip
             placement="top"
             :title="row.startUsers.map((user: any) => user.nickname).join(',')"
           >
-            {{ row.startUsers[0].nickname }}等
+            {{ row.startUsers[0]!.nickname }}等
             {{ row.startUsers.length }} 人可见
           </Tooltip>
         </template>
@@ -131,12 +132,11 @@ onMounted(() => {
               label: '恢复',
               type: 'link',
               auth: ['bpm:model:update'],
-              onClick: openModelForm.bind(null, row.id),
+              onClick: handleRecover.bind(null, row),
             },
           ]"
         />
       </template>
     </Grid>
-    <FormCreateDetailModal />
   </Page>
 </template>