feat: [BPM 工作流] - 流程模型历史
parent
c23de92503
commit
f0585cebf7
|
@ -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,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
@ -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' },
|
||||
},
|
||||
];
|
||||
}
|
|
@ -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>
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue