!137 Merge remote-tracking branch 'yudao/dev' into dev
Merge pull request !137 from Jason/devpull/138/head^2
xingyu
Gitee
commit
3befa5f2cb
|
|
@ -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>
|
||||
|
|
@ -178,13 +178,13 @@ async function handleCategorySortSubmit() {
|
|||
<template #overlay>
|
||||
<Menu @click="(e) => handleCommand(e.key as string)">
|
||||
<Menu.Item key="handleCategoryAdd">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-1">
|
||||
<IconifyIcon icon="lucide:plus" />
|
||||
新建分类
|
||||
</div>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="handleCategorySort">
|
||||
<div class="flex items-center">
|
||||
<div class="flex items-center gap-1">
|
||||
<IconifyIcon icon="lucide:align-start-vertical" />
|
||||
分类排序
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import type { BpmModelApi, ModelCategoryInfo } from '#/api/bpm/model';
|
|||
import { computed, ref, watchEffect } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { confirm, useVbenModal } from '@vben/common-ui';
|
||||
import { confirm, EllipsisText, useVbenModal } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useUserStore } from '@vben/stores';
|
||||
import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
|
||||
|
|
@ -33,10 +33,12 @@ import {
|
|||
} from '#/api/bpm/model';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { $t } from '#/locales';
|
||||
import { DICT_TYPE } from '#/utils';
|
||||
import { BpmModelFormType, DICT_TYPE } from '#/utils';
|
||||
|
||||
// 导入重命名表单
|
||||
import CategoryRenameForm from '../../category/modules/rename-form.vue';
|
||||
// 导入 FormCreate 表单详情
|
||||
import FormCreateDetail from '../../form/modules/detail.vue';
|
||||
|
||||
const props = defineProps<{
|
||||
categoryInfo: ModelCategoryInfo;
|
||||
|
|
@ -45,12 +47,18 @@ const props = defineProps<{
|
|||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
// 重命名分类对话框
|
||||
/** 重命名分类对话框 */
|
||||
const [CategoryRenameModal, categoryRenameModalApi] = useVbenModal({
|
||||
connectedComponent: CategoryRenameForm,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
/** 流程表单详情对话框 */
|
||||
const [FormCreateDetailModal, formCreateDetailModalApi] = useVbenModal({
|
||||
connectedComponent: FormCreateDetail,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
// 获取当前登录用户Id
|
||||
const userStore = useUserStore();
|
||||
|
|
@ -73,8 +81,7 @@ const columns = [
|
|||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'left' as const,
|
||||
ellipsis: true,
|
||||
width: 230,
|
||||
width: 250,
|
||||
},
|
||||
{
|
||||
title: '可见范围',
|
||||
|
|
@ -193,8 +200,15 @@ async function handleDeleteCategory() {
|
|||
|
||||
/** 处理表单详情点击 */
|
||||
function handleFormDetail(row: any) {
|
||||
// TODO 待实现
|
||||
console.warn('待实现', row);
|
||||
if (row.formType === BpmModelFormType.NORMAL) {
|
||||
const data = {
|
||||
id: row.formId,
|
||||
};
|
||||
formCreateDetailModalApi.setData(data).open();
|
||||
} else {
|
||||
// TODO 待实现
|
||||
console.warn('业务表单待实现', row);
|
||||
}
|
||||
}
|
||||
|
||||
/** 判断是否是流程管理员 */
|
||||
|
|
@ -243,7 +257,7 @@ function handleModelCommand(command: string, row: any) {
|
|||
break;
|
||||
}
|
||||
case 'handleDefinitionList': {
|
||||
console.warn('历史待实现', row);
|
||||
handleDefinitionList(row);
|
||||
break;
|
||||
}
|
||||
case 'handleDelete': {
|
||||
|
|
@ -317,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;
|
||||
|
|
@ -486,7 +510,9 @@ const handleRenameSuccess = () => {
|
|||
class="mr-2.5 h-9 w-9 rounded"
|
||||
alt="图标"
|
||||
/>
|
||||
{{ record.name }}
|
||||
<EllipsisText :max-width="160" :tooltip-when-ellipsis="true">
|
||||
{{ record.name }}
|
||||
</EllipsisText>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -543,7 +569,7 @@ const handleRenameSuccess = () => {
|
|||
<template v-else-if="column.key === 'formType'">
|
||||
<!-- TODO BpmModelFormType.NORMAL -->
|
||||
<Button
|
||||
v-if="record.formType === 10"
|
||||
v-if="record.formType === BpmModelFormType.NORMAL"
|
||||
type="link"
|
||||
@click="handleFormDetail(record)"
|
||||
>
|
||||
|
|
@ -551,7 +577,7 @@ const handleRenameSuccess = () => {
|
|||
</Button>
|
||||
<!-- TODO BpmModelFormType.CUSTOM -->
|
||||
<Button
|
||||
v-else-if="record.formType === 20"
|
||||
v-else-if="record.formType === BpmModelFormType.CUSTOM"
|
||||
type="link"
|
||||
@click="handleFormDetail(record)"
|
||||
>
|
||||
|
|
@ -604,7 +630,6 @@ const handleRenameSuccess = () => {
|
|||
</Button>
|
||||
<Dropdown placement="bottomRight" arrow>
|
||||
<Button type="link" size="small" class="px-1">更多</Button>
|
||||
<!-- TODO 待实现 -->
|
||||
<template #overlay>
|
||||
<Menu
|
||||
@click="
|
||||
|
|
@ -613,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"
|
||||
|
|
@ -657,6 +684,8 @@ const handleRenameSuccess = () => {
|
|||
|
||||
<!-- 重命名分类弹窗 -->
|
||||
<CategoryRenameModal @success="handleRenameSuccess" />
|
||||
<!-- 流程表单详情对话框 -->
|
||||
<FormCreateDetailModal />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue