feat: [BPM 工作流] - 流程模型历史

apps/web-antd/src/router/routes/modules/bpm.ts

@@ -86,6 +86,18 @@ const routes: RouteRecordRaw[] = [
           keepAlive: true,
         },
       },
+      {
+        path: 'manager/definition',
+        component: () => import('#/views/bpm/model/definition/index.vue'),
+        name: 'BpmProcessDefinition',
+        meta: {
+          title: '流程定义',
+          activePath: '/bpm/manager/model',
+          icon: 'carbon:flow-modeler',
+          hideInMenu: true,
+          keepAlive: true,
+        },
+      },
     ],
   },
 ];

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

@@ -0,0 +1,65 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+
+import { DICT_TYPE } from '#/utils';
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<BpmProcessDefinitionApi.ProcessDefinitionVO>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '定义编号',
+      minWidth: 250,
+    },
+    {
+      field: 'name',
+      title: '流程名称',
+      minWidth: 150,
+    },
+    {
+      field: 'icon',
+      title: '流程图标',
+      minWidth: 100,
+      slots: { default: 'icon' },
+    },
+    {
+      field: 'startUsers',
+      title: '可见范围',
+      minWidth: 100,
+      slots: { default: 'startUsers' },
+    },
+    {
+      field: 'modelType',
+      title: '流程类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BPM_MODEL_TYPE },
+      },
+    },
+    {
+      field: 'formType',
+      title: '表单信息',
+      minWidth: 150,
+      slots: { default: 'formInfo' },
+    },
+    {
+      field: 'version',
+      title: '流程版本',
+      minWidth: 80,
+      slots: { default: 'version' },
+    },
+    {
+      field: 'deploymentTime',
+      title: '部署时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}

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

@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, Tag, Tooltip } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProcessDefinitionPage } from '#/api/bpm/definition';
+import { DocAlert } from '#/components/doc-alert';
+import { BpmModelFormType } from '#/utils/constants';
+
+// 导入 FormCreate 表单详情
+import FormCreateDetail from '../../form/modules/detail.vue';
+import { useGridColumns } from './data';
+
+defineOptions({ name: 'BpmProcessDefinition' });
+
+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 onRefresh() {
+  gridApi.query();
+}
+
+const route = useRoute();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const params = {
+            pageNo: page?.currentPage,
+            pageSize: page?.pageSize,
+            key: route.query.key,
+          };
+          return await getProcessDefinitionPage(params);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+    },
+  } as VxeTableGridOptions,
+});
+
+/** 初始化 */
+onMounted(() => {
+  onRefresh();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
+    <Grid table-title="流程定义列表">
+      <template #icon="{ row }">
+        <Image
+          v-if="row.icon"
+          :src="row.icon"
+          :width="24"
+          :height="24"
+          class="rounded"
+        />
+        <span v-else> 无图标 </span>
+      </template>
+      <template #startUsers="{ row }">
+        <template v-if="!row.startUsers?.length">全部可见</template>
+        <template v-else-if="row.startUsers.length === 1">
+          {{ 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.length }} 人可见
+          </Tooltip>
+        </template>
+      </template>
+      <template #formInfo="{ row }">
+        <Button
+          v-if="row.formType === BpmModelFormType.NORMAL"
+          type="link"
+          @click="handleFormDetail(row)"
+        >
+          <span>{{ row.formName }}</span>
+        </Button>
+        <Button
+          v-else-if="row.formType === BpmModelFormType.CUSTOM"
+          type="link"
+          @click="handleFormDetail(row)"
+        >
+          <span>{{ row.formCustomCreatePath }}</span>
+        </Button>
+        <span v-else>暂无表单</span>
+      </template>
+      <template #version="{ row }">
+        <Tag>v{{ row.version }}</Tag>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '恢复',
+              type: 'link',
+              auth: ['bpm:model:update'],
+              onClick: openModelForm.bind(null, row.id),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+    <FormCreateDetailModal />
+  </Page>
+</template>

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -257,7 +257,7 @@ function handleModelCommand(command: string, row: any) {
       break;
     }
     case 'handleDefinitionList': {
-      console.warn('历史待实现', row);
+      handleDefinitionList(row);
       break;
     }
     case 'handleDelete': {
@@ -331,6 +331,16 @@ function handleDelete(row: any) {
   });
 }
 
+/** 跳转到指定流程定义列表 */
+function handleDefinitionList(row: any) {
+  router.push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key,
+    },
+  });
+}
+
 /** 更新 modelList 模型列表 */
 const updateModelList = useDebounceFn(() => {
   const newModelList = props.categoryInfo.modelList;
@@ -620,7 +630,6 @@ const handleRenameSuccess = () => {
                   </Button>
                   <Dropdown placement="bottomRight" arrow>
                     <Button type="link" size="small" class="px-1">更多</Button>
-                    <!-- TODO 待实现 -->
                     <template #overlay>
                       <Menu
                         @click="
@@ -629,12 +638,14 @@ const handleRenameSuccess = () => {
                       >
                         <Menu.Item key="handleCopy"> 复制 </Menu.Item>
                         <Menu.Item key="handleDefinitionList"> 历史 </Menu.Item>
+
+                        <!-- TODO 待实现报表
                         <Menu.Item
                           key="handleReport"
                           :disabled="!isManagerUser(record)"
                         >
                           报表
-                        </Menu.Item>
+                        </Menu.Item> -->
                         <Menu.Item
                           key="handleChangeState"
                           v-if="record.processDefinition"