feat: [bpm][ele] 流程定义列表
This commit is contained in:
jason
@@ -85,6 +85,10 @@ setupVbenVxeTable({
|
||||
src,
|
||||
previewSrcList: [src],
|
||||
class: props?.class,
|
||||
style: {
|
||||
width: props?.width ? `${props.width}px` : undefined,
|
||||
height: props?.height ? `${props.height}px` : undefined,
|
||||
},
|
||||
previewTeleported: true,
|
||||
});
|
||||
},
|
||||
|
||||
@@ -9,24 +9,24 @@ const routes: RouteRecordRaw[] = [
|
||||
hideInMenu: true,
|
||||
},
|
||||
children: [
|
||||
// {
|
||||
// path: 'task',
|
||||
// name: 'BpmTask',
|
||||
// meta: {
|
||||
// title: '审批中心',
|
||||
// icon: 'ant-design:history-outlined',
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'my',
|
||||
// name: 'BpmTaskMy',
|
||||
// component: () => import('#/views/bpm/processInstance/index.vue'),
|
||||
// meta: {
|
||||
// title: '我的流程',
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
path: 'task',
|
||||
name: 'BpmTask',
|
||||
meta: {
|
||||
title: '审批中心',
|
||||
icon: 'ant-design:history-outlined',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'my',
|
||||
name: 'BpmTaskMy',
|
||||
component: () => import('#/views/bpm/processInstance/index.vue'),
|
||||
meta: {
|
||||
title: '我的流程',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// path: 'process-instance/detail',
|
||||
// component: () => import('#/views/bpm/processInstance/detail/index.vue'),
|
||||
@@ -86,18 +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,
|
||||
// },
|
||||
// },
|
||||
{
|
||||
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,
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'process-instance/report',
|
||||
component: () => import('#/views/bpm/processInstance/report/index.vue'),
|
||||
|
||||
73
apps/web-ele/src/views/bpm/model/definition/data.ts
Normal file
73
apps/web-ele/src/views/bpm/model/definition/data.ts
Normal file
@@ -0,0 +1,73 @@
|
||||
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
|
||||
|
||||
import { DICT_TYPE } from '@vben/constants';
|
||||
|
||||
/** 列表的字段 */
|
||||
export function useGridColumns(): VxeTableGridOptions['columns'] {
|
||||
return [
|
||||
{
|
||||
field: 'id',
|
||||
title: '定义编号',
|
||||
minWidth: 250,
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
title: '流程名称',
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
field: 'icon',
|
||||
title: '流程图标',
|
||||
minWidth: 100,
|
||||
cellRender: {
|
||||
name: 'CellImage',
|
||||
props: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
class: 'rounded',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
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,
|
||||
cellRender: {
|
||||
name: 'CellTag',
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'deploymentTime',
|
||||
title: '部署时间',
|
||||
minWidth: 180,
|
||||
formatter: 'formatDateTime',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 120,
|
||||
fixed: 'right',
|
||||
slots: { default: 'actions' },
|
||||
},
|
||||
];
|
||||
}
|
||||
151
apps/web-ele/src/views/bpm/model/definition/index.vue
Normal file
151
apps/web-ele/src/views/bpm/model/definition/index.vue
Normal file
@@ -0,0 +1,151 @@
|
||||
<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';
|
||||
|
||||
import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
|
||||
import { BpmModelFormType } from '@vben/constants';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { ElButton, ElTooltip } from 'element-plus';
|
||||
|
||||
import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { getProcessDefinitionPage } from '#/api/bpm/definition';
|
||||
|
||||
import FormCreateDetail from '../../form/modules/detail.vue';
|
||||
import { useGridColumns } from './data';
|
||||
|
||||
defineOptions({ name: 'BpmProcessDefinition' });
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
const [FormCreateDetailModal, formCreateDetailModalApi] = useVbenModal({
|
||||
connectedComponent: FormCreateDetail,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 刷新表格 */
|
||||
function handleRefresh() {
|
||||
gridApi.query();
|
||||
}
|
||||
|
||||
/** 查看表单详情 */
|
||||
async function handleFormDetail(
|
||||
row: BpmProcessDefinitionApi.ProcessDefinition,
|
||||
) {
|
||||
if (row.formType === BpmModelFormType.NORMAL) {
|
||||
const data = {
|
||||
id: row.formId,
|
||||
};
|
||||
formCreateDetailModalApi.setData(data).open();
|
||||
} else {
|
||||
await router.push({
|
||||
path: row.formCustomCreatePath,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** 恢复流程模型 */
|
||||
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,
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }) => {
|
||||
return await getProcessDefinitionPage({
|
||||
pageNo: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
key: route.query.key as string,
|
||||
});
|
||||
},
|
||||
},
|
||||
},
|
||||
rowConfig: {
|
||||
keyField: 'id',
|
||||
isHover: true,
|
||||
},
|
||||
toolbarConfig: {
|
||||
refresh: true,
|
||||
},
|
||||
} as VxeTableGridOptions<BpmProcessDefinitionApi.ProcessDefinition>,
|
||||
});
|
||||
|
||||
/** 初始化 */
|
||||
onMounted(() => {
|
||||
handleRefresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
<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 || row.startUsers.length === 0">
|
||||
全部可见
|
||||
</template>
|
||||
<template v-else-if="row.startUsers.length === 1">
|
||||
{{ row.startUsers[0]!.nickname }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<ElTooltip
|
||||
placement="top"
|
||||
:content="
|
||||
row.startUsers.map((user: any) => user.nickname).join(',')
|
||||
"
|
||||
>
|
||||
{{ row.startUsers[0]!.nickname }}等
|
||||
{{ row.startUsers.length }} 人可见
|
||||
</ElTooltip>
|
||||
</template>
|
||||
</template>
|
||||
<template #formInfo="{ row }">
|
||||
<ElButton
|
||||
v-if="row.formType === BpmModelFormType.NORMAL"
|
||||
link
|
||||
@click="handleFormDetail(row)"
|
||||
>
|
||||
<IconifyIcon icon="lucide:file-text" class="mr-1" />
|
||||
<span>{{ row.formName }}</span>
|
||||
</ElButton>
|
||||
<ElButton
|
||||
v-else-if="row.formType === BpmModelFormType.CUSTOM"
|
||||
link
|
||||
@click="handleFormDetail(row)"
|
||||
>
|
||||
<IconifyIcon icon="lucide:file-code" class="mr-1" />
|
||||
<span>{{ row.formCustomCreatePath }}</span>
|
||||
</ElButton>
|
||||
<span v-else>暂无表单</span>
|
||||
</template>
|
||||
<template #actions="{ row }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '恢复',
|
||||
icon: 'lucide:undo-2',
|
||||
link: true,
|
||||
auth: ['bpm:model:update'],
|
||||
onClick: handleRecover.bind(null, row),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
Reference in New Issue
Block a user