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

pull/137/head
jason 2025-06-10 22:35:38 +08:00
parent c23de92503
commit f0585cebf7
4 changed files with 248 additions and 3 deletions

View File

@ -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,
},
},
],
},
];

View File

@ -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' },
},
];
}

View File

@ -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>

View File

@ -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"