yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pre Merge pull request !142 from Jason/dev

pull/142/MERGE
Jason 2025-06-15 03:02:54 +00:00 committed by Gitee
parent 96ea1f98c0 e2a449351e
commit 78a21f1912
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
16 changed files with 446 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/web-antd/src/api/bpm/category/index.ts
View File

@ -3,9 +3,8 @@ import type { PageParam, PageResult } from '@vben/request';
import { requestClient } from '#/api/request';
export namespace BpmCategoryApi {
/** 流程分类 VO */
// TODO @jason：不用 VO 后缀哈
export interface CategoryVO {
/** 流程分类 */
export interface Category {
id: number;
name: string;
code: string;
@ -17,7 +16,7 @@ export namespace BpmCategoryApi {
/** 查询流程分类分页 */
export async function getCategoryPage(params: PageParam) {
return requestClient.get<PageResult<BpmCategoryApi.CategoryVO>>(
return requestClient.get<PageResult<BpmCategoryApi.Category>>(
'/bpm/category/page',
{ params },
);
@ -25,18 +24,18 @@ export async function getCategoryPage(params: PageParam) {
/** 查询流程分类详情 */
export async function getCategory(id: number) {
return requestClient.get<BpmCategoryApi.CategoryVO>(
return requestClient.get<BpmCategoryApi.Category>(
`/bpm/category/get?id=${id}`,
);
}
/** 新增流程分类 */
export async function createCategory(data: BpmCategoryApi.CategoryVO) {
export async function createCategory(data: BpmCategoryApi.Category) {
return requestClient.post<number>('/bpm/category/create', data);
}
/** 修改流程分类 */
export async function updateCategory(data: BpmCategoryApi.CategoryVO) {
export async function updateCategory(data: BpmCategoryApi.Category) {
return requestClient.put<boolean>('/bpm/category/update', data);
}
@ -47,7 +46,7 @@ export async function deleteCategory(id: number) {
/** 查询流程分类列表 */
export async function getCategorySimpleList() {
return requestClient.get<BpmCategoryApi.CategoryVO[]>(
return requestClient.get<BpmCategoryApi.Category[]>(
`/bpm/category/simple-list`,
);
}

1
apps/web-antd/src/api/bpm/definition/index.ts
View File

@ -15,6 +15,7 @@ export namespace BpmProcessDefinitionApi {
formType?: number;
bpmnXml?: string;
simpleModel?: string;
formFields?: string[];
}
}

2
apps/web-antd/src/api/bpm/form/index.ts
View File

@ -4,7 +4,7 @@ import { requestClient } from '#/api/request';
export namespace BpmFormApi {
/** 流程表单 */
// TODO @jason：不用 VO 后缀哈
// TODO @ziye：不用 VO 后缀哈
export interface FormVO {
id?: number | undefined;
name: string;

23
apps/web-antd/src/api/bpm/model/index.ts
View File

@ -11,9 +11,8 @@ export namespace BpmModelApi {
deptName?: string;
}
/** 流程定义 VO */
// TODO @jason：不用 VO 后缀哈
export interface ProcessDefinitionVO {
/** 流程定义 */
export interface ProcessDefinition {
id: string;
key?: string;
version: number;
@ -23,8 +22,8 @@ export namespace BpmModelApi {
formCustomViewPath?: string;
}
/** 流程模型 VO */
export interface ModelVO {
/** 流程模型 */
export interface Model {
id: number;
key: string;
name: string;
@ -36,7 +35,7 @@ export namespace BpmModelApi {
formId: number;
formCustomCreatePath: string;
formCustomViewPath: string;
processDefinition: ProcessDefinitionVO;
processDefinition: ProcessDefinition;
status: number;
remark: string;
createTime: string;
@ -49,23 +48,23 @@ export namespace BpmModelApi {
export interface ModelCategoryInfo {
id: number;
name: string;
modelList: BpmModelApi.ModelVO[];
modelList: BpmModelApi.Model[];
}
/** 获取流程模型列表 */
export async function getModelList(name: string | undefined) {
return requestClient.get<BpmModelApi.ModelVO[]>('/bpm/model/list', {
return requestClient.get<BpmModelApi.Model[]>('/bpm/model/list', {
params: { name },
});
}
/** 获取流程模型详情 */
export async function getModel(id: string) {
return requestClient.get<BpmModelApi.ModelVO>(`/bpm/model/get?id=${id}`);
return requestClient.get<BpmModelApi.Model>(`/bpm/model/get?id=${id}`);
}
/** 更新流程模型 */
export async function updateModel(data: BpmModelApi.ModelVO) {
export async function updateModel(data: BpmModelApi.Model) {
return requestClient.put('/bpm/model/update', data);
}
@ -78,7 +77,7 @@ export async function updateModelSortBatch(ids: number[]) {
}
/** 更新流程模型的 BPMN XML */
export async function updateModelBpmn(data: BpmModelApi.ModelVO) {
export async function updateModelBpmn(data: BpmModelApi.Model) {
return requestClient.put('/bpm/model/update-bpmn', data);
}
@ -92,7 +91,7 @@ export async function updateModelState(id: number, state: number) {
}
/** 创建流程模型 */
export async function createModel(data: BpmModelApi.ModelVO) {
export async function createModel(data: BpmModelApi.Model) {
return requestClient.post('/bpm/model/create', data);
}

4
apps/web-antd/src/api/bpm/processInstance/index.ts
View File

@ -53,7 +53,7 @@ export namespace BpmProcessInstanceApi {
formVariables: Record<string, any>;
id: number;
name: string;
processDefinition?: BpmModelApi.ProcessDefinitionVO;
processDefinition?: BpmModelApi.ProcessDefinition;
processDefinitionId: string;
remark: string;
result: number;
@ -67,7 +67,7 @@ export namespace BpmProcessInstanceApi {
export type ApprovalDetail = {
activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[];
formFieldsPermission: any;
processDefinition: BpmModelApi.ProcessDefinitionVO;
processDefinition: BpmModelApi.ProcessDefinition;
processInstance: BpmProcessInstanceApi.ProcessInstanceVO;
status: number;
todoTask: BpmTaskApi.TaskVO;

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

@ -98,6 +98,18 @@ const routes: RouteRecordRaw[] = [
keepAlive: true,
},
},
{
path: 'process-instance/report',
component: () => import('#/views/bpm/processInstance/report/index.vue'),
name: 'BpmProcessInstanceReport',
meta: {
title: '数据报表',
activeMenu: '/bpm/manager/model',
icon: 'carbon:data-2',
hideInMenu: true,
keepAlive: true,
},
},
],
},
];

6
apps/web-antd/src/views/bpm/category/index.vue
View File

@ -29,12 +29,12 @@ function handleCreate() {
}
/** 编辑流程分类 */
function handleEdit(row: BpmCategoryApi.CategoryVO) {
function handleEdit(row: BpmCategoryApi.Category) {
formModalApi.setData(row).open();
}
/** 删除流程分类 */
async function handleDelete(row: BpmCategoryApi.CategoryVO) {
async function handleDelete(row: BpmCategoryApi.Category) {
const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.code]),
key: 'action_key_msg',
@ -77,7 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
refresh: { code: 'query' },
search: true,
},
} as VxeTableGridOptions<BpmCategoryApi.CategoryVO>,
} as VxeTableGridOptions<BpmCategoryApi.Category>,
});
</script>

6
apps/web-antd/src/views/bpm/category/modules/form.vue
View File

@ -18,7 +18,7 @@ import { $t } from '#/locales';
import { useFormSchema } from '../data';
const emit = defineEmits(['success']);
const formData = ref<BpmCategoryApi.CategoryVO>();
const formData = ref<BpmCategoryApi.Category>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['流程分类'])
@ -39,7 +39,7 @@ const [Modal, modalApi] = useVbenModal({
}
modalApi.lock();
// 提交表单
const data = (await formApi.getValues()) as BpmCategoryApi.CategoryVO;
const data = (await formApi.getValues()) as BpmCategoryApi.Category;
try {
await (formData.value?.id ? updateCategory(data) : createCategory(data));
// 关闭并提示
@ -56,7 +56,7 @@ const [Modal, modalApi] = useVbenModal({
return;
}
// 加载数据
const data = modalApi.getData<BpmCategoryApi.CategoryVO>();
const data = modalApi.getData<BpmCategoryApi.Category>();
if (!data || !data.id) {
return;
}

6
apps/web-antd/src/views/bpm/category/modules/rename-form.vue
View File

@ -12,7 +12,7 @@ import { getCategory, updateCategory } from '#/api/bpm/category';
import { $t } from '#/locales';
const emit = defineEmits(['success']);
const formData = ref<BpmCategoryApi.CategoryVO>();
const formData = ref<BpmCategoryApi.Category>();
// 定义表单结构
const formSchema = [
@ -53,7 +53,7 @@ const [Modal, modalApi] = useVbenModal({
status: formData.value?.status,
description: formData.value?.description,
sort: formData.value?.sort,
} as BpmCategoryApi.CategoryVO;
} as BpmCategoryApi.Category;
try {
await updateCategory(data);
@ -74,7 +74,7 @@ const [Modal, modalApi] = useVbenModal({
}
// 加载数据
const data = modalApi.getData<BpmCategoryApi.CategoryVO>();
const data = modalApi.getData<BpmCategoryApi.Category>();
if (!data || !data.id) {
return;

2
apps/web-antd/src/views/bpm/model/form/index.vue
View File

@ -133,7 +133,7 @@ provide('modelData', formData);
// 数据列表
const formList = ref<BpmFormApi.FormVO[]>([]);
const categoryList = ref<BpmCategoryApi.CategoryVO[]>([]);
const categoryList = ref<BpmCategoryApi.Category[]>([]);
const userList = ref<SystemUserApi.User[]>([]);
const deptList = ref<SystemDeptApi.Dept[]>([]);

2
apps/web-antd/src/views/bpm/model/form/modules/basic-info.vue
View File

@ -29,7 +29,7 @@ import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '#/utils';
const props = defineProps({
categoryList: {
type: Array as PropType<BpmCategoryApi.CategoryVO[]>,
type: Array as PropType<BpmCategoryApi.Category[]>,
required: true,
},
userList: {

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

@ -5,7 +5,8 @@ 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 { useAccess } from '@vben/access';
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';
@ -65,8 +66,8 @@ const router = useRouter();
const userStore = useUserStore();
const userId = userStore.userInfo?.id;
const isModelSorting = ref(false);
const originalData = ref<BpmModelApi.ModelVO[]>([]);
const modelList = ref<BpmModelApi.ModelVO[]>([]);
const originalData = ref<BpmModelApi.Model[]>([]);
const modelList = ref<BpmModelApi.Model[]>([]);
const isExpand = ref(false);
const [Grid, gridApi] = useVbenVxeGrid({
@ -90,6 +91,18 @@ const sortableInstance = ref<any>(null);
/** 解决 v-model 问题，使用计算属性 */
const expandKeys = computed(() => (isExpand.value ? ['1'] : []));
const { hasAccessByCodes } = useAccess();
/** 权限校验：通过 computed 解决列表的卡顿问题 */
const hasPermiUpdate = computed(() => {
return hasAccessByCodes(['bpm:model:update']);
});
const hasPermiDelete = computed(() => {
return hasAccessByCodes(['bpm:model:delete']);
});
const hasPermiDeploy = computed(() => {
return hasAccessByCodes(['bpm:model:deploy']);
});
/** 处理模型的排序 */
function handleModelSort() {
// 保存初始数据并确保数据完整
@ -145,21 +158,9 @@ async function handleModelSortSubmit() {
message.error('排序数据异常，请重试');
return;
}
// 保存排序
const ids = modelList.value.map((item) => item.id);
// 检查是否有所有必要的ID
if (ids.length === props.categoryInfo.modelList.length) {
// 使用排序后的数据
await updateModelSortBatch(ids);
} else {
console.warn('排序数据不完整，尝试使用原始数据');
// 如果数据不完整，使用原始数据
const originalIds = props.categoryInfo.modelList.map((item) => item.id);
await updateModelSortBatch(originalIds);
}
await updateModelSortBatch(ids);
// 刷新列表
isModelSorting.value = false;
message.success('排序模型成功');
@ -283,7 +284,7 @@ function handleModelCommand(command: string, row: any) {
break;
}
case 'handleReport': {
console.warn('报表待实现', row);
handleReport(row);
break;
}
default: {
@ -359,6 +360,17 @@ function handleDefinitionList(row: any) {
});
}
/** 跳转到流程报表页面 */
function handleReport(row: any) {
router.push({
name: 'BpmProcessInstanceReport',
query: {
processDefinitionId: row.processDefinition.id,
processDefinitionKey: row.key,
},
});
}
/** 更新 modelList 模型列表 */
const updateModelList = useDebounceFn(() => {
const newModelList = props.categoryInfo.modelList;
@ -520,11 +532,9 @@ const handleRenameSuccess = () => {
class="mr-2.5 h-9 w-9 flex-shrink-0 rounded"
alt="图标"
/>
<div class="min-w-0">
<EllipsisText :max-width="100" :tooltip-when-ellipsis="true">
{{ row.name }}
</EllipsisText>
</div>
<EllipsisText :max-width="160" :tooltip-when-ellipsis="true">
{{ row.name }}
</EllipsisText>
</div>
</template>
<template #startUserIds="{ row }">
@ -568,7 +578,6 @@ const handleRenameSuccess = () => {
>
{{ row.formName }}
</Button>
<!-- TODO BpmModelFormType.CUSTOM -->
<Button
v-else-if="row.formType === BpmModelFormType.CUSTOM"
type="link"
@ -598,13 +607,12 @@ const handleRenameSuccess = () => {
</template>
<template #actions="{ row }">
<div class="flex items-center space-x-0">
<!-- TODO 权限校验-->
<Button
type="link"
size="small"
class="px-1"
@click="modelOperation('update', row.id)"
:disabled="!isManagerUser(row)"
:disabled="!isManagerUser(row) || !hasPermiUpdate"
>
修改
</Button>
@ -613,7 +621,7 @@ const handleRenameSuccess = () => {
size="small"
class="px-1"
@click="handleDeploy(row)"
:disabled="!isManagerUser(row)"
:disabled="!isManagerUser(row) || !hasPermiDeploy"
>
发布
</Button>
@ -626,13 +634,12 @@ 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
key="handleReport"
:disabled="!isManagerUser(row)"
>
报表
</Menu.Item>
<Menu.Item
key="handleChangeState"
v-if="row.processDefinition"
@ -654,7 +661,7 @@ const handleRenameSuccess = () => {
<Menu.Item
danger
key="handleDelete"
:disabled="!isManagerUser(row)"
:disabled="!isManagerUser(row) || !hasPermiDelete"
>
删除
</Menu.Item>

10
apps/web-antd/src/views/bpm/model/modules/data.ts
View File

@ -4,12 +4,12 @@ import type { BpmModelApi } from '#/api/bpm/model';
import { DICT_TYPE } from '#/utils';
/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions<BpmModelApi.ModelVO>['columns'] {
export function useGridColumns(): VxeTableGridOptions<BpmModelApi.Model>['columns'] {
return [
{
field: 'name',
title: '流程名称',
minWidth: 250,
minWidth: 200,
slots: { default: 'name' },
},
{
@ -21,7 +21,7 @@ export function useGridColumns(): VxeTableGridOptions<BpmModelApi.ModelVO>['colu
{
field: 'type',
title: '流程类型',
minWidth: 150,
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.BPM_MODEL_TYPE },
@ -36,12 +36,12 @@ export function useGridColumns(): VxeTableGridOptions<BpmModelApi.ModelVO>['colu
{
field: 'deploymentTime',
title: '最后发布',
minWidth: 260,
minWidth: 280,
slots: { default: 'deploymentTime' },
},
{
title: '操作',
width: 200,
width: 150,
fixed: 'right',
slots: { default: 'actions' },
},

4
apps/web-antd/src/views/bpm/processInstance/create/index.vue
View File

@ -161,7 +161,7 @@ const processDefinitionGroup = computed(() => {
string,
BpmProcessDefinitionApi.ProcessDefinitionVO[]
> = {};
categoryList.value.forEach((category: BpmCategoryApi.CategoryVO) => {
categoryList.value.forEach((category: BpmCategoryApi.Category) => {
if (grouped[category.code]) {
orderedGroup[category.code] = grouped[
category.code
@ -203,7 +203,7 @@ const availableCategories = computed(() => {
const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
// 过滤出有流程的分类
return categoryList.value.filter((category: BpmCategoryApi.CategoryVO) =>
return categoryList.value.filter((category: BpmCategoryApi.Category) =>
availableCategoryCodes.includes(category.code),
);
});

153
apps/web-antd/src/views/bpm/processInstance/report/data.ts Normal file
View File

@ -0,0 +1,153 @@
import type { VbenFormSchema } from '#/adapter/form';
import type {
VxeGridPropTypes,
VxeTableGridOptions,
} from '#/adapter/vxe-table';
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
/** 搜索的表单 */
export function useGridFormSchema(
userList: any[] = [],
formFields: any[] = [],
): VbenFormSchema[] {
// 基础搜索字段
const baseFormSchema = [
{
fieldName: 'startUserId',
label: '发起人',
component: 'Select',
componentProps: {
placeholder: '请选择发起人',
allowClear: true,
options: userList.map((user) => ({
label: user.nickname,
value: user.id,
})),
},
},
{
fieldName: 'name',
label: '流程名称',
component: 'Input',
componentProps: {
placeholder: '请输入流程名称',
allowClear: true,
},
},
{
fieldName: 'status',
label: '流程状态',
component: 'Select',
componentProps: {
placeholder: '请选择流程状态',
allowClear: true,
options: getDictOptions(
DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS,
'number',
),
},
},
{
fieldName: 'createTime',
label: '发起时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
placeholder: ['开始日期', '结束日期'],
allowClear: true,
},
},
{
fieldName: 'endTime',
label: '结束时间',
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
placeholder: ['开始日期', '结束日期'],
allowClear: true,
},
},
];
// 动态表单字段 暂时只支持 input 和 textarea, TODO 其他类型的支持
const dynamicFormSchema = formFields
.filter((item) => item.type === 'input' || item.type === 'textarea')
// 根据类型选择合适的表单组件
.map((item) => {
return {
fieldName: `formFieldsParams.${item.field}`,
label: item.title,
component: 'Input',
componentProps: {
placeholder: `请输入${item.title}`,
allowClear: true,
},
};
});
return [...baseFormSchema, ...dynamicFormSchema];
}
/** 列表的字段 */
export function useGridColumns(
formFields: any[] = [],
): VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>['columns'] {
const baseColumns: VxeGridPropTypes.Columns<BpmProcessInstanceApi.ProcessInstanceVO> =
[
{
field: 'name',
title: '流程名称',
minWidth: 250,
fixed: 'left',
},
{
field: 'startUser.nickname',
title: '流程发起人',
minWidth: 200,
},
{
field: 'status',
title: '流程状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS },
},
},
{
field: 'startTime',
title: '发起时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'endTime',
title: '结束时间',
minWidth: 180,
formatter: 'formatDateTime',
},
];
// 添加动态表单字段列，暂时全部以字符串，TODO 展示优化, 按 type 展示控制
const formFieldColumns = (formFields || []).map((item) => ({
field: `formVariables.${item.field}`,
title: item.title,
minWidth: 120,
formatter: ({ row }: any) => {
return row.formVariables?.[item.field] ?? '';
},
}));
return [
...baseColumns,
...formFieldColumns,
{
title: '操作',
width: 180,
fixed: 'right',
slots: { default: 'actions' },
},
];
}

200
apps/web-antd/src/views/bpm/processInstance/report/index.vue Normal file
View File

@ -0,0 +1,200 @@
<script lang="ts" setup>
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
import { h, nextTick, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { confirm, Page } from '@vben/common-ui';
import { Input, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getProcessDefinition } from '#/api/bpm/definition';
import {
cancelProcessInstanceByAdmin,
getProcessInstanceManagerPage,
} from '#/api/bpm/processInstance';
import { getSimpleUserList } from '#/api/system/user';
import { parseFormFields } from '#/components/simple-process-design';
import { useGridColumns, useGridFormSchema } from './data';
defineOptions({ name: 'BpmProcessInstanceReport' });
const router = useRouter(); // 路由
const { query } = useRoute();
const processDefinitionId = query.processDefinitionId as string;
const formFields = ref<any[]>([]);
const userList = ref<any[]>([]); // 用户列表
const gridReady = ref(false); // 表格是否准备好
const cancelReason = ref(''); // 取消原因
// 表格的列需要解析表单字段，这里定义成变量，解析表单字段后再渲染
let Grid: any = null;
let gridApi: any = null;
/** 获取流程定义 */
const getProcessDefinitionData = async () => {
try {
const processDefinition = await getProcessDefinition(processDefinitionId);
if (processDefinition && processDefinition.formFields) {
formFields.value = parseFormCreateFields(processDefinition.formFields);
}
} catch (error) {
console.error('获取流程定义失败', error);
}
};
/** 解析表单字段 */
const parseFormCreateFields = (formFields?: string[]) => {
const result: Array<Record<string, any>> = [];
if (formFields) {
formFields.forEach((fieldStr: string) => {
try {
parseFormFields(JSON.parse(fieldStr), result);
} catch (error) {
console.error('解析表单字段失败', error);
}
});
}
return result;
};
/** 刷新表格 */
function onRefresh() {
if (gridApi) {
gridApi.query();
}
}
/** 查看详情 */
const handleDetail = (row: BpmProcessInstanceApi.ProcessInstanceVO) => {
router.push({
name: 'BpmProcessInstanceDetail',
query: {
id: row.id,
},
});
};
/** 取消按钮操作 */
const handleCancel = async (row: BpmProcessInstanceApi.ProcessInstanceVO) => {
cancelReason.value = ''; // 重置取消原因
confirm({
title: '取消流程',
content: h('div', [
h('p', '请输入取消原因：'),
h(Input, {
value: cancelReason.value,
'onUpdate:value': (val: string) => {
cancelReason.value = val;
},
placeholder: '请输入取消原因',
}),
]),
beforeClose: async ({ isConfirm }) => {
if (!isConfirm) return;
if (!cancelReason.value.trim()) {
message.warning('请输入取消原因');
return false;
}
await cancelProcessInstanceByAdmin(row.id, cancelReason.value);
return true;
},
}).then(() => {
message.success('取消成功');
onRefresh();
});
};
/** 创建表格 */
const createGrid = () => {
const [GridCompnent, api] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(userList.value, formFields.value),
},
gridOptions: {
columns: useGridColumns(formFields.value),
height: 'auto',
keepSource: true,
rowConfig: {
keyField: 'id',
},
toolbarConfig: {
refresh: { code: 'query' },
search: true,
},
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
// 处理表单值，将 formFieldsParams 对象提取出来
const { formFieldsParams = {}, ...restValues } = formValues || {};
const params = {
pageNo: page.currentPage,
pageSize: page.pageSize,
...restValues,
processDefinitionKey: query.processDefinitionKey,
formFieldsParams: JSON.stringify(formFieldsParams),
};
return await getProcessInstanceManagerPage(params);
},
},
},
} as VxeTableGridOptions,
});
Grid = GridCompnent;
gridApi = api;
gridReady.value = true;
};
/** 初始化 */
onMounted(async () => {
// 获取用户列表
userList.value = await getSimpleUserList();
// 获取流程定义，并获取表单字段。
await getProcessDefinitionData();
// 解析表单字段后，再创建表格，表格的列依赖于表单字段
createGrid();
// 确保 DOM 更新完成
await nextTick();
// 加载表格数据
gridApi.query();
});
</script>
<template>
<Page auto-content-height>
<!-- 动态渲染表格 -->
<component :is="Grid" v-if="gridReady" table-title="流程实例列表">
<template #actions="{ row }">
<TableAction
:actions="[
{
label: '详情',
type: 'link',
icon: ACTION_ICON.VIEW,
auth: ['bpm:process-instance:query'],
onClick: handleDetail.bind(null, row),
},
{
label: '取消',
type: 'link',
icon: ACTION_ICON.DELETE,
auth: ['bpm:process-instance:cancel'],
ifShow: row.status === 1,
onClick: handleCancel.bind(null, row),
},
]"
/>
</template>
</component>
</Page>
</template>