!96 feat: 完善用户选择弹窗功能，添加分页和搜索功能，优化部门选择逻辑 进度 30%
Merge pull request !96 from 子夜/feature/bpm-process-instancepull/97/MERGE
xingyu
Gitee
commit
62570fa745
|
|
@ -18,6 +18,7 @@ export namespace BpmModelApi {
|
|||
deploymentTime: number;
|
||||
suspensionState: number;
|
||||
formType?: number;
|
||||
formCustomViewPath?: string;
|
||||
}
|
||||
|
||||
/** 流程模型 VO */
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import type { PageParam, PageResult } from '@vben/request';
|
||||
|
||||
import type { BpmModelApi } from '#/api/bpm/model';
|
||||
import type { CandidateStrategy, NodeType } from '#/utils';
|
||||
import type { CandidateStrategyEnum, NodeTypeEnum } from '#/utils';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
|
|
@ -29,12 +29,12 @@ export namespace BpmProcessInstanceApi {
|
|||
|
||||
// 审批节点信息
|
||||
export type ApprovalNodeInfo = {
|
||||
candidateStrategy?: CandidateStrategy;
|
||||
candidateStrategy?: CandidateStrategyEnum;
|
||||
candidateUsers?: User[];
|
||||
endTime?: Date;
|
||||
id: number;
|
||||
name: string;
|
||||
nodeType: NodeType;
|
||||
nodeType: NodeTypeEnum;
|
||||
startTime?: Date;
|
||||
status: number;
|
||||
tasks: ApprovalTaskInfo[];
|
||||
|
|
@ -46,14 +46,25 @@ export namespace BpmProcessInstanceApi {
|
|||
createTime: string;
|
||||
endTime: string;
|
||||
fields: string[];
|
||||
formVariables: Record<string, any>;
|
||||
id: number;
|
||||
name: string;
|
||||
processDefinition?: BpmModelApi.ProcessDefinitionVO;
|
||||
processDefinitionId: string;
|
||||
remark: string;
|
||||
result: number;
|
||||
startTime?: Date;
|
||||
startUser?: User;
|
||||
status: number;
|
||||
tasks?: BpmProcessInstanceApi.Task[];
|
||||
};
|
||||
|
||||
export type ApprovalDetail = {
|
||||
activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[];
|
||||
formFieldsPermission: any;
|
||||
processDefinition: BpmModelApi.ProcessDefinitionVO;
|
||||
processInstance: BpmProcessInstanceApi.ProcessInstanceVO;
|
||||
status: number;
|
||||
tasks: BpmProcessInstanceApi.Task[];
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -133,7 +144,7 @@ export async function updateProcessInstance(
|
|||
|
||||
/** 获取审批详情 */
|
||||
export async function getApprovalDetail(params: any) {
|
||||
return requestClient.get<BpmProcessInstanceApi.ProcessInstanceVO>(
|
||||
return requestClient.get<BpmProcessInstanceApi.ApprovalDetail>(
|
||||
`/bpm/process-instance/get-approval-detail`,
|
||||
{ params },
|
||||
);
|
||||
|
|
@ -156,7 +167,7 @@ export async function getFormFieldsPermission(params: any) {
|
|||
}
|
||||
|
||||
/** 获取流程实例 BPMN 模型视图 */
|
||||
export async function getProcessInstanceBpmnModelView(id: number) {
|
||||
export async function getProcessInstanceBpmnModelView(id: string) {
|
||||
return requestClient.get<BpmProcessInstanceApi.ProcessInstanceVO>(
|
||||
`/bpm/process-instance/get-bpmn-model-view?id=${id}`,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export { default as UserSelectModal } from './user-select-modal.vue';
|
||||
|
|
@ -0,0 +1,528 @@
|
|||
<script lang="ts" setup>
|
||||
import type { Key } from 'ant-design-vue/es/table/interface';
|
||||
|
||||
import type { SystemDeptApi } from '#/api/system/dept';
|
||||
import type { SystemUserApi } from '#/api/system/user';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { useVbenModal } from '@vben/common-ui';
|
||||
import { handleTree } from '@vben/utils';
|
||||
|
||||
import {
|
||||
Button,
|
||||
Col,
|
||||
Input,
|
||||
message,
|
||||
Pagination,
|
||||
Row,
|
||||
Spin,
|
||||
Transfer,
|
||||
Tree,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { getSimpleDeptList } from '#/api/system/dept';
|
||||
import { getUserPage } from '#/api/system/user';
|
||||
|
||||
// 部门树节点接口
|
||||
interface DeptTreeNode {
|
||||
key: string;
|
||||
title: string;
|
||||
children?: DeptTreeNode[];
|
||||
}
|
||||
|
||||
defineOptions({ name: 'UserSelectModal' });
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
cancelText?: string;
|
||||
confirmText?: string;
|
||||
multiple?: boolean;
|
||||
title?: string;
|
||||
value?: number[];
|
||||
}>(),
|
||||
{
|
||||
title: '选择用户',
|
||||
multiple: true,
|
||||
value: () => [],
|
||||
confirmText: '确定',
|
||||
cancelText: '取消',
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
cancel: [];
|
||||
confirm: [value: number[]];
|
||||
'update:value': [value: number[]];
|
||||
}>();
|
||||
|
||||
// 部门树数据
|
||||
const deptTree = ref<any[]>([]);
|
||||
const deptList = ref<SystemDeptApi.Dept[]>([]);
|
||||
const expandedKeys = ref<Key[]>([]);
|
||||
const selectedDeptId = ref<number>();
|
||||
const deptSearchKeys = ref('');
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false);
|
||||
|
||||
// 用户数据管理
|
||||
const userList = ref<SystemUserApi.User[]>([]); // 存储所有已知用户
|
||||
const selectedUserIds = ref<string[]>([]);
|
||||
|
||||
// 左侧列表状态
|
||||
const leftListState = ref({
|
||||
loading: false,
|
||||
searchValue: '',
|
||||
dataSource: [] as SystemUserApi.User[],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
},
|
||||
});
|
||||
|
||||
// 右侧列表状态
|
||||
const rightListState = ref({
|
||||
searchValue: '',
|
||||
dataSource: [] as SystemUserApi.User[],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
},
|
||||
});
|
||||
|
||||
// 计算属性：Transfer 数据源
|
||||
const transferDataSource = computed(() => {
|
||||
return [
|
||||
...leftListState.value.dataSource,
|
||||
...rightListState.value.dataSource,
|
||||
];
|
||||
});
|
||||
|
||||
// 过滤部门树数据
|
||||
const filteredDeptTree = computed(() => {
|
||||
if (!deptSearchKeys.value) return deptTree.value;
|
||||
|
||||
const filterNode = (node: any): any => {
|
||||
const title = node?.title?.toLowerCase();
|
||||
const search = deptSearchKeys.value.toLowerCase();
|
||||
|
||||
// 如果当前节点匹配
|
||||
if (title.includes(search)) {
|
||||
return {
|
||||
...node,
|
||||
children: node.children?.map((child: any) => filterNode(child)),
|
||||
};
|
||||
}
|
||||
|
||||
// 如果当前节点不匹配，检查子节点
|
||||
if (node.children) {
|
||||
const filteredChildren = node.children
|
||||
.map((child: any) => filterNode(child))
|
||||
.filter(Boolean);
|
||||
|
||||
if (filteredChildren.length > 0) {
|
||||
return {
|
||||
...node,
|
||||
children: filteredChildren,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
return deptTree.value.map((node: any) => filterNode(node)).filter(Boolean);
|
||||
});
|
||||
|
||||
// 加载用户数据
|
||||
const loadUserData = async (pageNo: number, pageSize: number) => {
|
||||
leftListState.value.loading = true;
|
||||
try {
|
||||
const { list, total } = await getUserPage({
|
||||
pageNo,
|
||||
pageSize,
|
||||
deptId: selectedDeptId.value,
|
||||
username: leftListState.value.searchValue || undefined,
|
||||
});
|
||||
|
||||
leftListState.value.dataSource = list;
|
||||
leftListState.value.pagination.total = total;
|
||||
leftListState.value.pagination.current = pageNo;
|
||||
leftListState.value.pagination.pageSize = pageSize;
|
||||
|
||||
// 更新用户列表缓存
|
||||
const newUsers = list.filter(
|
||||
(user) => !userList.value.some((u) => u.id === user.id),
|
||||
);
|
||||
if (newUsers.length > 0) {
|
||||
userList.value.push(...newUsers);
|
||||
}
|
||||
} finally {
|
||||
leftListState.value.loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 更新右侧列表数据
|
||||
const updateRightListData = () => {
|
||||
// 获取选中的用户
|
||||
const selectedUsers = userList.value.filter((user) =>
|
||||
selectedUserIds.value.includes(String(user.id)),
|
||||
);
|
||||
|
||||
// 应用搜索过滤
|
||||
const filteredUsers = rightListState.value.searchValue
|
||||
? selectedUsers.filter((user) =>
|
||||
user.nickname
|
||||
.toLowerCase()
|
||||
.includes(rightListState.value.searchValue.toLowerCase()),
|
||||
)
|
||||
: selectedUsers;
|
||||
|
||||
// 更新总数
|
||||
rightListState.value.pagination.total = filteredUsers.length;
|
||||
|
||||
// 应用分页
|
||||
const { current, pageSize } = rightListState.value.pagination;
|
||||
const startIndex = (current - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
|
||||
rightListState.value.dataSource = filteredUsers.slice(startIndex, endIndex);
|
||||
};
|
||||
|
||||
// 处理左侧分页变化
|
||||
const handleLeftPaginationChange = async (page: number, pageSize: number) => {
|
||||
await loadUserData(page, pageSize);
|
||||
};
|
||||
|
||||
// 处理右侧分页变化
|
||||
const handleRightPaginationChange = (page: number, pageSize: number) => {
|
||||
rightListState.value.pagination.current = page;
|
||||
rightListState.value.pagination.pageSize = pageSize;
|
||||
updateRightListData();
|
||||
};
|
||||
|
||||
// 处理用户搜索
|
||||
const handleUserSearch = async (direction: string, value: string) => {
|
||||
if (direction === 'left') {
|
||||
leftListState.value.searchValue = value;
|
||||
leftListState.value.pagination.current = 1;
|
||||
await loadUserData(1, leftListState.value.pagination.pageSize);
|
||||
} else {
|
||||
rightListState.value.searchValue = value;
|
||||
rightListState.value.pagination.current = 1;
|
||||
updateRightListData();
|
||||
}
|
||||
};
|
||||
|
||||
// 处理用户选择变化
|
||||
const handleUserChange = (targetKeys: string[]) => {
|
||||
selectedUserIds.value = targetKeys;
|
||||
emit('update:value', targetKeys.map(Number));
|
||||
updateRightListData();
|
||||
};
|
||||
|
||||
// 重置数据
|
||||
const resetData = () => {
|
||||
userList.value = [];
|
||||
selectedUserIds.value = [];
|
||||
|
||||
// 取消部门选中
|
||||
selectedDeptId.value = undefined;
|
||||
|
||||
// 取消选中的用户
|
||||
selectedUserIds.value = [];
|
||||
|
||||
leftListState.value = {
|
||||
loading: false,
|
||||
searchValue: '',
|
||||
dataSource: [],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
},
|
||||
};
|
||||
|
||||
rightListState.value = {
|
||||
searchValue: '',
|
||||
dataSource: [],
|
||||
pagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// 打开弹窗
|
||||
const open = async () => {
|
||||
resetData();
|
||||
loading.value = true;
|
||||
try {
|
||||
// 加载部门数据
|
||||
const deptData = await getSimpleDeptList();
|
||||
deptList.value = deptData;
|
||||
const treeData = handleTree(deptData);
|
||||
deptTree.value = treeData.map((node) => processDeptNode(node));
|
||||
expandedKeys.value = deptTree.value.map((node) => node.key);
|
||||
|
||||
// 加载初始用户数据
|
||||
await loadUserData(1, leftListState.value.pagination.pageSize);
|
||||
|
||||
// 设置已选用户
|
||||
if (props.value?.length) {
|
||||
selectedUserIds.value = props.value.map(String);
|
||||
// 加载已选用户的完整信息
|
||||
const { list } = await getUserPage({
|
||||
pageNo: 1,
|
||||
pageSize: props.value.length,
|
||||
userIds: props.value,
|
||||
});
|
||||
userList.value.push(...list);
|
||||
updateRightListData();
|
||||
}
|
||||
|
||||
modalApi.open();
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// TODO 后端接口目前仅支持 username 检索， 筛选条件需要跟后端请求参数保持一致。
|
||||
const filterOption = (inputValue: string, option: any) => {
|
||||
return option.username.toLowerCase().includes(inputValue.toLowerCase());
|
||||
};
|
||||
|
||||
// 处理部门树展开/折叠
|
||||
const handleExpand = (keys: Key[]) => {
|
||||
expandedKeys.value = keys;
|
||||
};
|
||||
|
||||
// 处理部门搜索
|
||||
const handleDeptSearch = (value: string) => {
|
||||
deptSearchKeys.value = value;
|
||||
|
||||
// 如果有搜索结果，自动展开所有节点
|
||||
if (value) {
|
||||
const getAllKeys = (nodes: any[]): string[] => {
|
||||
const keys: string[] = [];
|
||||
for (const node of nodes) {
|
||||
keys.push(node.key);
|
||||
if (node.children) {
|
||||
keys.push(...getAllKeys(node.children));
|
||||
}
|
||||
}
|
||||
return keys;
|
||||
};
|
||||
expandedKeys.value = getAllKeys(deptTree.value);
|
||||
} else {
|
||||
// 清空搜索时，只展开第一级节点
|
||||
expandedKeys.value = deptTree.value.map((node) => node.key);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理部门选择
|
||||
const handleDeptSelect = async (selectedKeys: Key[], _info: any) => {
|
||||
// 更新选中的部门ID
|
||||
const newDeptId =
|
||||
selectedKeys.length > 0 ? Number(selectedKeys[0]) : undefined;
|
||||
selectedDeptId.value =
|
||||
newDeptId === selectedDeptId.value ? undefined : newDeptId;
|
||||
|
||||
// 重置分页并加载数据
|
||||
const { pageSize } = leftListState.value.pagination;
|
||||
leftListState.value.pagination.current = 1;
|
||||
await loadUserData(1, pageSize);
|
||||
};
|
||||
|
||||
// 确认选择
|
||||
const handleConfirm = () => {
|
||||
if (selectedUserIds.value.length === 0) {
|
||||
message.warning('请选择用户');
|
||||
return;
|
||||
}
|
||||
emit('confirm', selectedUserIds.value.map(Number));
|
||||
modalApi.close();
|
||||
};
|
||||
|
||||
// 取消选择
|
||||
const handleCancel = () => {
|
||||
emit('cancel');
|
||||
modalApi.close();
|
||||
// 确保在动画结束后再重置数据
|
||||
setTimeout(() => {
|
||||
resetData();
|
||||
}, 300);
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const handleClosed = () => {
|
||||
resetData();
|
||||
};
|
||||
|
||||
// 弹窗配置
|
||||
const [ModalComponent, modalApi] = useVbenModal({
|
||||
title: props.title,
|
||||
onCancel: handleCancel,
|
||||
onClosed: handleClosed,
|
||||
destroyOnClose: true,
|
||||
});
|
||||
|
||||
// 递归处理部门树节点
|
||||
const processDeptNode = (node: any): DeptTreeNode => {
|
||||
return {
|
||||
key: String(node.id),
|
||||
title: `${node.name} (${node.id})`,
|
||||
children: node.children?.map((child: any) => processDeptNode(child)),
|
||||
};
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ModalComponent class="w-[1000px]" key="user-select-modal">
|
||||
<Spin :spinning="loading">
|
||||
<Row :gutter="[16, 16]">
|
||||
<Col :span="6">
|
||||
<div class="h-[500px] overflow-auto rounded border border-gray-200">
|
||||
<div class="border-b border-gray-200 p-2">
|
||||
<Input
|
||||
v-model:value="deptSearchKeys"
|
||||
placeholder="搜索部门"
|
||||
allow-clear
|
||||
@input="(e) => handleDeptSearch(e.target?.value ?? '')"
|
||||
/>
|
||||
</div>
|
||||
<Tree
|
||||
:tree-data="filteredDeptTree"
|
||||
:expanded-keys="expandedKeys"
|
||||
:selected-keys="selectedDeptId ? [String(selectedDeptId)] : []"
|
||||
@select="handleDeptSelect"
|
||||
@expand="handleExpand"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col :span="18">
|
||||
<Transfer
|
||||
:row-key="(record) => String(record.id)"
|
||||
:data-source="transferDataSource"
|
||||
v-model:target-keys="selectedUserIds"
|
||||
:titles="['未选', '已选']"
|
||||
:show-search="true"
|
||||
:show-select-all="true"
|
||||
:filter-option="filterOption"
|
||||
@change="handleUserChange"
|
||||
@search="handleUserSearch"
|
||||
>
|
||||
<template #render="item">
|
||||
{{ item.nickname }} ({{ item.id }})
|
||||
</template>
|
||||
|
||||
<template #footer="{ direction }">
|
||||
<div v-if="direction === 'left'">
|
||||
<Pagination
|
||||
v-model:current="leftListState.pagination.current"
|
||||
v-model:page-size="leftListState.pagination.pageSize"
|
||||
:total="leftListState.pagination.total"
|
||||
:show-size-changer="true"
|
||||
:show-total="(total) => `共 ${total} 条`"
|
||||
size="small"
|
||||
@change="handleLeftPaginationChange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="direction === 'right'">
|
||||
<Pagination
|
||||
v-model:current="rightListState.pagination.current"
|
||||
v-model:page-size="rightListState.pagination.pageSize"
|
||||
:total="rightListState.pagination.total"
|
||||
:show-size-changer="true"
|
||||
:show-total="(total) => `共 ${total} 条`"
|
||||
size="small"
|
||||
@change="handleRightPaginationChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Transfer>
|
||||
</Col>
|
||||
</Row>
|
||||
</Spin>
|
||||
<template #footer>
|
||||
<Button
|
||||
type="primary"
|
||||
:disabled="selectedUserIds.length === 0"
|
||||
@click="handleConfirm"
|
||||
>
|
||||
{{ confirmText }}
|
||||
</Button>
|
||||
<Button @click="handleCancel">{{ cancelText }}</Button>
|
||||
</template>
|
||||
</ModalComponent>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.ant-transfer) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list) {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
width: 300px !important;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-header) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-search) {
|
||||
flex-shrink: 0;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-body) {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-content) {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-content-item) {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-operation) {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-transfer-list-footer) {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination) {
|
||||
margin: 8px;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-options) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
:deep(.ant-pagination-options-size-changer) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import type { RouteRecordRaw } from 'vue-router';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/bpm',
|
||||
name: 'bpm',
|
||||
meta: {
|
||||
title: '工作流',
|
||||
hideInMenu: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'process-instance/detail',
|
||||
component: () => import('#/views/bpm/processInstance/detail/index.vue'),
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
meta: {
|
||||
title: '流程详情',
|
||||
activePath: '/bpm/task/my',
|
||||
icon: 'ant-design:history-outlined',
|
||||
keepAlive: false,
|
||||
hideInMenu: true,
|
||||
},
|
||||
props: (route) => {
|
||||
return {
|
||||
id: route.query.id,
|
||||
taskId: route.query.taskId,
|
||||
activityId: route.query.activityId,
|
||||
};
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
|
|
@ -466,7 +466,7 @@ export const BpmAutoApproveType = {
|
|||
};
|
||||
|
||||
// 候选人策略枚举 （ 用于审批节点。抄送节点 )
|
||||
export enum CandidateStrategy {
|
||||
export enum CandidateStrategyEnum {
|
||||
/**
|
||||
* 审批人自选
|
||||
*/
|
||||
|
|
@ -532,7 +532,7 @@ export enum CandidateStrategy {
|
|||
/**
|
||||
* 节点类型
|
||||
*/
|
||||
export enum NodeType {
|
||||
export enum NodeTypeEnum {
|
||||
/**
|
||||
* 子流程节点
|
||||
*/
|
||||
|
|
@ -593,3 +593,44 @@ export enum NodeType {
|
|||
*/
|
||||
USER_TASK_NODE = 11,
|
||||
}
|
||||
|
||||
/**
|
||||
* 任务状态枚举
|
||||
*/
|
||||
export enum TaskStatusEnum {
|
||||
/**
|
||||
* 审批通过
|
||||
*/
|
||||
APPROVE = 2,
|
||||
|
||||
/**
|
||||
* 审批通过中
|
||||
*/
|
||||
APPROVING = 7,
|
||||
/**
|
||||
* 已取消
|
||||
*/
|
||||
CANCEL = 4,
|
||||
/**
|
||||
* 未开始
|
||||
*/
|
||||
NOT_START = -1,
|
||||
|
||||
/**
|
||||
* 审批不通过
|
||||
*/
|
||||
REJECT = 3,
|
||||
|
||||
/**
|
||||
* 已退回
|
||||
*/
|
||||
RETURN = 5,
|
||||
/**
|
||||
* 审批中
|
||||
*/
|
||||
RUNNING = 1,
|
||||
/**
|
||||
* 待审批
|
||||
*/
|
||||
WAIT = 0,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
/**
|
||||
* 针对 https://github.com/xaboy/form-create-designer 封装的工具类
|
||||
*/
|
||||
|
||||
import { isRef } from 'vue';
|
||||
|
||||
// 编码表单 Conf
|
||||
export const encodeConf = (designerRef: object) => {
|
||||
// @ts-ignore designerRef.value is dynamically added by form-create-designer
|
||||
return JSON.stringify(designerRef.value.getOption());
|
||||
};
|
||||
|
||||
// 编码表单 Fields
|
||||
export const encodeFields = (designerRef: object) => {
|
||||
// @ts-ignore designerRef.value is dynamically added by form-create-designer
|
||||
const rule = JSON.parse(designerRef.value.getJson());
|
||||
const fields: string[] = [];
|
||||
rule.forEach((item: unknown) => {
|
||||
fields.push(JSON.stringify(item));
|
||||
});
|
||||
return fields;
|
||||
};
|
||||
|
||||
// 解码表单 Fields
|
||||
export const decodeFields = (fields: string[]) => {
|
||||
const rule: object[] = [];
|
||||
fields.forEach((item) => {
|
||||
rule.push(JSON.parse(item));
|
||||
});
|
||||
return rule;
|
||||
};
|
||||
|
||||
// 设置表单的 Conf 和 Fields，适用 FcDesigner 场景
|
||||
export const setConfAndFields = (
|
||||
designerRef: object,
|
||||
conf: string,
|
||||
fields: string,
|
||||
) => {
|
||||
// @ts-ignore designerRef.value is dynamically added by form-create-designer
|
||||
designerRef.value.setOption(JSON.parse(conf));
|
||||
// @ts-ignore designerRef.value is dynamically added by form-create-designer
|
||||
designerRef.value.setRule(decodeFields(fields));
|
||||
};
|
||||
|
||||
// 设置表单的 Conf 和 Fields，适用 form-create 场景
|
||||
export const setConfAndFields2 = (
|
||||
detailPreview: object,
|
||||
conf: string,
|
||||
fields: string[],
|
||||
value?: object,
|
||||
) => {
|
||||
if (isRef(detailPreview)) {
|
||||
// @ts-ignore detailPreview.value is dynamically added by form-create-designer
|
||||
detailPreview = detailPreview.value;
|
||||
}
|
||||
// @ts-ignore detailPreview properties are dynamically added by form-create-designer
|
||||
detailPreview.option = JSON.parse(conf);
|
||||
// @ts-ignore detailPreview properties are dynamically added by form-create-designer
|
||||
detailPreview.rule = decodeFields(fields);
|
||||
if (value) {
|
||||
// @ts-ignore detailPreview properties are dynamically added by form-create-designer
|
||||
detailPreview.value = value;
|
||||
}
|
||||
};
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
export * from './constants';
|
||||
export * from './dict';
|
||||
export * from './formatTime';
|
||||
export * from './formCreate';
|
||||
export * from './rangePickerProps';
|
||||
export * from './routerHelper';
|
||||
export * from './validator';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { defineAsyncComponent } from 'vue';
|
||||
|
||||
const modules = import.meta.glob('../views/**/*.{vue,tsx}');
|
||||
/**
|
||||
* 注册一个异步组件
|
||||
* @param componentPath 例:/bpm/oa/leave/detail
|
||||
*/
|
||||
export const registerComponent = (componentPath: string) => {
|
||||
for (const item in modules) {
|
||||
if (item.includes(componentPath)) {
|
||||
// 使用异步组件的方式来动态加载组件
|
||||
return defineAsyncComponent(modules[item] as any);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,354 @@
|
|||
<script lang="ts" setup>
|
||||
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
|
||||
import type { SystemUserApi } from '#/api/system/user';
|
||||
|
||||
import { nextTick, onMounted, ref } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
import {
|
||||
SvgBpmApproveIcon,
|
||||
SvgBpmCancelIcon,
|
||||
SvgBpmRejectIcon,
|
||||
SvgBpmRunningIcon,
|
||||
} from '@vben/icons';
|
||||
import { formatDateTime } from '@vben/utils';
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
message,
|
||||
Row,
|
||||
TabPane,
|
||||
Tabs,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
getApprovalDetail as getApprovalDetailApi,
|
||||
getProcessInstanceBpmnModelView,
|
||||
} from '#/api/bpm/processInstance';
|
||||
import { getSimpleUserList } from '#/api/system/user';
|
||||
import DictTag from '#/components/dict-tag/dict-tag.vue';
|
||||
import {
|
||||
BpmModelFormType,
|
||||
BpmModelType,
|
||||
DICT_TYPE,
|
||||
registerComponent,
|
||||
setConfAndFields2,
|
||||
TaskStatusEnum,
|
||||
} from '#/utils';
|
||||
|
||||
import TimeLine from './modules/time-line.vue';
|
||||
|
||||
defineOptions({ name: 'BpmProcessInstanceDetail' });
|
||||
|
||||
const props = defineProps<{
|
||||
activityId?: string; // 流程活动编号，用于抄送查看
|
||||
id: string; // 流程实例的编号
|
||||
taskId?: string; // 任务编号
|
||||
}>();
|
||||
|
||||
enum FieldPermissionType {
|
||||
/**
|
||||
* 隐藏
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
NONE = '3',
|
||||
/**
|
||||
* 只读
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
READ = '1',
|
||||
/**
|
||||
* 编辑
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
WRITE = '2',
|
||||
}
|
||||
|
||||
const processInstanceLoading = ref(false); // 流程实例的加载中
|
||||
const processInstance = ref<BpmProcessInstanceApi.ProcessInstanceVO>(); // 流程实例
|
||||
const processDefinition = ref<any>({}); // 流程定义
|
||||
const processModelView = ref<any>({}); // 流程模型视图
|
||||
// const operationButtonRef = ref(); // 操作按钮组件 ref
|
||||
const auditIconsMap: {
|
||||
[key: string]:
|
||||
| typeof SvgBpmApproveIcon
|
||||
| typeof SvgBpmCancelIcon
|
||||
| typeof SvgBpmRejectIcon
|
||||
| typeof SvgBpmRunningIcon;
|
||||
} = {
|
||||
[TaskStatusEnum.RUNNING]: SvgBpmRunningIcon,
|
||||
[TaskStatusEnum.APPROVE]: SvgBpmApproveIcon,
|
||||
[TaskStatusEnum.REJECT]: SvgBpmRejectIcon,
|
||||
[TaskStatusEnum.CANCEL]: SvgBpmCancelIcon,
|
||||
[TaskStatusEnum.APPROVING]: SvgBpmApproveIcon,
|
||||
[TaskStatusEnum.RETURN]: SvgBpmRejectIcon,
|
||||
[TaskStatusEnum.WAIT]: SvgBpmRunningIcon,
|
||||
};
|
||||
|
||||
// ========== 申请信息 ==========
|
||||
const fApi = ref<any>(); //
|
||||
const detailForm = ref({
|
||||
rule: [],
|
||||
option: {},
|
||||
value: {},
|
||||
}); // 流程实例的表单详情
|
||||
|
||||
const writableFields: Array<string> = []; // 表单可以编辑的字段
|
||||
|
||||
/** 加载流程实例 */
|
||||
const BusinessFormComponent = ref<any>(null); // 异步组件
|
||||
|
||||
/** 获取详情 */
|
||||
async function getDetail() {
|
||||
// 获得审批详情
|
||||
getApprovalDetail();
|
||||
|
||||
// 获得流程模型视图
|
||||
getProcessModelView();
|
||||
}
|
||||
|
||||
async function getApprovalDetail() {
|
||||
processInstanceLoading.value = true;
|
||||
try {
|
||||
const param = {
|
||||
processInstanceId: props.id,
|
||||
activityId: props.activityId,
|
||||
taskId: props.taskId,
|
||||
};
|
||||
const data = await getApprovalDetailApi(param);
|
||||
|
||||
if (!data) {
|
||||
message.error('查询不到审批详情信息！');
|
||||
}
|
||||
|
||||
if (!data.processDefinition || !data.processInstance) {
|
||||
message.error('查询不到流程信息！');
|
||||
}
|
||||
|
||||
processInstance.value = data.processInstance;
|
||||
processDefinition.value = data.processDefinition;
|
||||
|
||||
// 设置表单信息
|
||||
if (processDefinition.value.formType === BpmModelFormType.NORMAL) {
|
||||
// 获取表单字段权限
|
||||
const formFieldsPermission = data.formFieldsPermission;
|
||||
// 清空可编辑字段为空
|
||||
writableFields.splice(0);
|
||||
if (detailForm.value.rule?.length > 0) {
|
||||
// 避免刷新 form-create 显示不了
|
||||
detailForm.value.value = processInstance.value.formVariables;
|
||||
} else {
|
||||
setConfAndFields2(
|
||||
detailForm,
|
||||
processDefinition.value.formConf,
|
||||
processDefinition.value.formFields,
|
||||
processInstance.value.formVariables,
|
||||
);
|
||||
}
|
||||
nextTick().then(() => {
|
||||
fApi.value?.btn.show(false);
|
||||
fApi.value?.resetBtn.show(false);
|
||||
fApi.value?.disabled(true);
|
||||
// 设置表单字段权限
|
||||
if (formFieldsPermission) {
|
||||
Object.keys(data.formFieldsPermission).forEach((item) => {
|
||||
setFieldPermission(item, formFieldsPermission[item]);
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
|
||||
BusinessFormComponent.value = registerComponent(
|
||||
data?.processDefinition?.formCustomViewPath || '',
|
||||
);
|
||||
}
|
||||
|
||||
// 获取审批节点，显示 Timeline 的数据
|
||||
activityNodes.value = data.activityNodes;
|
||||
} catch {
|
||||
message.error('获取审批详情失败！');
|
||||
} finally {
|
||||
processInstanceLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取流程模型视图*/
|
||||
const getProcessModelView = async () => {
|
||||
if (BpmModelType.BPMN === processDefinition.value?.modelType) {
|
||||
// 重置，解决 BPMN 流程图刷新不会重新渲染问题
|
||||
processModelView.value = {
|
||||
bpmnXml: '',
|
||||
};
|
||||
}
|
||||
const data = await getProcessInstanceBpmnModelView(props.id);
|
||||
if (data) {
|
||||
processModelView.value = data;
|
||||
}
|
||||
};
|
||||
|
||||
// 审批节点信息
|
||||
const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
|
||||
/**
|
||||
* 设置表单权限
|
||||
*/
|
||||
const setFieldPermission = (field: string, permission: string) => {
|
||||
if (permission === FieldPermissionType.READ) {
|
||||
// @ts-ignore
|
||||
fApi.value?.disabled(true, field);
|
||||
}
|
||||
if (permission === FieldPermissionType.WRITE) {
|
||||
// @ts-ignore
|
||||
fApi.value?.disabled(false, field);
|
||||
// 加入可以编辑的字段
|
||||
writableFields.push(field);
|
||||
}
|
||||
if (permission === FieldPermissionType.NONE) {
|
||||
// @ts-ignore
|
||||
fApi.value?.hidden(true, field);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 操作成功后刷新
|
||||
*/
|
||||
// const refresh = () => {
|
||||
// // 重新获取详情
|
||||
// getDetail();
|
||||
// };
|
||||
|
||||
/** 当前的Tab */
|
||||
const activeTab = ref('form');
|
||||
|
||||
/** 初始化 */
|
||||
const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
|
||||
onMounted(async () => {
|
||||
getDetail();
|
||||
// 获得用户列表
|
||||
userOptions.value = await getSimpleUserList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<Card
|
||||
class="h-full"
|
||||
:body-style="{
|
||||
height: 'calc(100% - 140px)',
|
||||
overflowY: 'auto',
|
||||
paddingTop: '12px',
|
||||
}"
|
||||
>
|
||||
<template #title>
|
||||
<span class="text-[#878c93]">编号：{{ id || '-' }}</span>
|
||||
</template>
|
||||
|
||||
<div class="flex h-[100%] flex-col">
|
||||
<!-- 流程基本信息 -->
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="mb-10px h-40px flex items-center gap-5">
|
||||
<div class="mb-5px text-[26px] font-bold">
|
||||
{{ processInstance?.name }}
|
||||
</div>
|
||||
<DictTag
|
||||
v-if="processInstance?.status"
|
||||
:type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
|
||||
:value="processInstance.status"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-10px text-13px h-35px flex items-center gap-5">
|
||||
<div
|
||||
class="flex items-center gap-2 rounded-3xl bg-gray-100 px-[10px] py-[4px] dark:bg-gray-600"
|
||||
>
|
||||
<Avatar
|
||||
:size="28"
|
||||
v-if="processInstance?.startUser?.avatar"
|
||||
:src="processInstance?.startUser?.avatar"
|
||||
/>
|
||||
<Avatar
|
||||
:size="28"
|
||||
v-else-if="processInstance?.startUser?.nickname"
|
||||
>
|
||||
{{ processInstance?.startUser?.nickname.substring(0, 1) }}
|
||||
</Avatar>
|
||||
<span class="text-12px">{{
|
||||
processInstance?.startUser?.nickname
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="text-[#878c93]">
|
||||
{{ formatDateTime(processInstance?.startTime) }} 提交
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<component
|
||||
v-if="processInstance?.status"
|
||||
:is="auditIconsMap[processInstance?.status]"
|
||||
class="absolute right-[20px] top-[10px] size-[150px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 流程操作 -->
|
||||
<div class="flex-1">
|
||||
<Tabs v-model:active-key="activeTab" class="mt-0">
|
||||
<TabPane tab="审批详情" key="form">
|
||||
<Row :gutter="[48, 24]">
|
||||
<Col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
|
||||
<!-- 流程表单 -->
|
||||
<div
|
||||
v-if="
|
||||
processDefinition?.formType === BpmModelFormType.NORMAL
|
||||
"
|
||||
>
|
||||
<!-- v-model="detailForm.value" -->
|
||||
<form-create
|
||||
v-model="detailForm.value"
|
||||
v-model:api="fApi"
|
||||
:option="detailForm.option"
|
||||
:rule="detailForm.rule"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="
|
||||
processDefinition?.formType === BpmModelFormType.CUSTOM
|
||||
"
|
||||
>
|
||||
<BusinessFormComponent :id="processInstance?.businessKey" />
|
||||
</div>
|
||||
</Col>
|
||||
<Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
|
||||
<div class="mt-2">
|
||||
<TimeLine :activity-nodes="activityNodes" />
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</TabPane>
|
||||
|
||||
<TabPane tab="流程图" key="diagram">
|
||||
<div>流程图</div>
|
||||
</TabPane>
|
||||
|
||||
<TabPane tab="流转记录" key="record">
|
||||
<div>流转记录</div>
|
||||
</TabPane>
|
||||
|
||||
<!-- TODO 待开发 -->
|
||||
<TabPane tab="流转评论" key="comment" v-if="false">
|
||||
<div>流转评论</div>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #actions>
|
||||
<div class="flex justify-start gap-x-2 p-4">
|
||||
<Button type="primary">驳回</Button>
|
||||
<Button type="primary">同意</Button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,451 @@
|
|||
<!-- 审批详情的右侧：审批流 -->
|
||||
<script lang="ts" setup>
|
||||
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
|
||||
|
||||
import { h, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { formatDateTime, isEmpty } from '@vben/utils';
|
||||
|
||||
import { Avatar, Button, Image, Tooltip } from 'ant-design-vue';
|
||||
|
||||
import { UserSelectModal } from '#/components/user-select-modal';
|
||||
import { CandidateStrategyEnum, NodeTypeEnum, TaskStatusEnum } from '#/utils';
|
||||
|
||||
defineOptions({ name: 'BpmProcessInstanceTimeline' });
|
||||
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[]; // 审批节点信息
|
||||
showStatusIcon?: boolean; // 是否显示头像右下角状态图标
|
||||
}>(),
|
||||
{
|
||||
showStatusIcon: true, // 默认值为 true
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
selectUserConfirm: [id: string, userList: any[]];
|
||||
}>();
|
||||
|
||||
const { push } = useRouter(); // 路由
|
||||
|
||||
// 状态图标映射
|
||||
const statusIconMap: Record<
|
||||
string,
|
||||
{ animation?: string; color: string; icon: string }
|
||||
> = {
|
||||
// 审批未开始
|
||||
'-1': { color: '#909398', icon: 'mdi:clock-outline' },
|
||||
// 待审批
|
||||
'0': { color: '#00b32a', icon: 'mdi:loading' },
|
||||
// 审批中
|
||||
'1': { color: '#448ef7', icon: 'mdi:loading', animation: 'animate-spin' },
|
||||
// 审批通过
|
||||
'2': { color: '#00b32a', icon: 'mdi:check' },
|
||||
// 审批不通过
|
||||
'3': { color: '#f46b6c', icon: 'mdi:close' },
|
||||
// 已取消
|
||||
'4': { color: '#cccccc', icon: 'mdi:trash-can-outline' },
|
||||
// 退回
|
||||
'5': { color: '#f46b6c', icon: 'mdi:arrow-left' },
|
||||
// 委派中
|
||||
'6': { color: '#448ef7', icon: 'mdi:clock-outline' },
|
||||
// 审批通过中
|
||||
'7': { color: '#00b32a', icon: 'mdi:check' },
|
||||
};
|
||||
|
||||
// 节点类型图标映射
|
||||
const nodeTypeSvgMap = {
|
||||
// 结束节点
|
||||
[NodeTypeEnum.END_EVENT_NODE]: {
|
||||
color: '#909398',
|
||||
icon: 'mdi:power',
|
||||
},
|
||||
// 开始节点
|
||||
[NodeTypeEnum.START_USER_NODE]: {
|
||||
color: '#909398',
|
||||
icon: 'mdi:account-outline',
|
||||
},
|
||||
// 用户任务节点
|
||||
[NodeTypeEnum.USER_TASK_NODE]: {
|
||||
color: '#ff943e',
|
||||
icon: 'tdesign:seal',
|
||||
},
|
||||
// 事务节点
|
||||
[NodeTypeEnum.TRANSACTOR_NODE]: {
|
||||
color: '#ff943e',
|
||||
icon: 'mdi:file-edit-outline',
|
||||
},
|
||||
// 复制任务节点
|
||||
[NodeTypeEnum.COPY_TASK_NODE]: {
|
||||
color: '#3296fb',
|
||||
icon: 'mdi:content-copy',
|
||||
},
|
||||
// 条件分支节点
|
||||
[NodeTypeEnum.CONDITION_NODE]: {
|
||||
color: '#14bb83',
|
||||
icon: 'carbon:flow',
|
||||
},
|
||||
// 并行分支节点
|
||||
[NodeTypeEnum.PARALLEL_BRANCH_NODE]: {
|
||||
color: '#14bb83',
|
||||
icon: 'si:flow-parallel-line',
|
||||
},
|
||||
// 子流程节点
|
||||
[NodeTypeEnum.CHILD_PROCESS_NODE]: {
|
||||
color: '#14bb83',
|
||||
icon: 'icon-park-outline:tree-diagram',
|
||||
},
|
||||
};
|
||||
|
||||
// 只有状态是 -1、0、1 才展示头像右小角状态小icon
|
||||
const onlyStatusIconShow = [-1, 0, 1];
|
||||
|
||||
// 获取审批节点类型图标
|
||||
const getApprovalNodeTypeIcon = (nodeType: NodeTypeEnum) => {
|
||||
return nodeTypeSvgMap[nodeType]?.icon;
|
||||
};
|
||||
|
||||
// 获取审批节点图标
|
||||
const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeTypeEnum) => {
|
||||
if (taskStatus === TaskStatusEnum.NOT_START) {
|
||||
return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
|
||||
}
|
||||
|
||||
if (
|
||||
nodeType === NodeTypeEnum.START_USER_NODE ||
|
||||
nodeType === NodeTypeEnum.USER_TASK_NODE ||
|
||||
nodeType === NodeTypeEnum.TRANSACTOR_NODE ||
|
||||
nodeType === NodeTypeEnum.CHILD_PROCESS_NODE ||
|
||||
nodeType === NodeTypeEnum.END_EVENT_NODE
|
||||
) {
|
||||
return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
|
||||
}
|
||||
return 'mdi:clock-outline';
|
||||
};
|
||||
|
||||
// 获取审批节点颜色
|
||||
const getApprovalNodeColor = (taskStatus: number) => {
|
||||
return statusIconMap[taskStatus]?.color;
|
||||
};
|
||||
|
||||
// 获取审批节点时间
|
||||
const getApprovalNodeTime = (node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
|
||||
if (node.nodeType === NodeTypeEnum.START_USER_NODE && node.startTime) {
|
||||
return formatDateTime(node.startTime);
|
||||
}
|
||||
if (node.endTime) {
|
||||
return formatDateTime(node.endTime);
|
||||
}
|
||||
if (node.startTime) {
|
||||
return formatDateTime(node.startTime);
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
// 选择自定义审批人
|
||||
const userSelectFormRef = ref();
|
||||
const customApproveUsers = ref<Record<string, any[]>>({}); // key：activityId，value：用户列表
|
||||
|
||||
// 打开选择用户弹窗
|
||||
const handleSelectUser = (activityId: string, selectedList: any[]) => {
|
||||
console.log(userSelectFormRef.value);
|
||||
userSelectFormRef.value.open(activityId, selectedList);
|
||||
};
|
||||
|
||||
// 选择用户完成
|
||||
const selectedUsers = ref<number[]>([]);
|
||||
const handleUserSelectConfirm = (activityId: string, userList: any[]) => {
|
||||
customApproveUsers.value[activityId] = userList || [];
|
||||
emit('selectUserConfirm', activityId, userList);
|
||||
};
|
||||
|
||||
/** 跳转子流程 */
|
||||
const handleChildProcess = (activity: any) => {
|
||||
push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
query: {
|
||||
id: activity.processInstanceId,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// 渲染用户头像和昵称
|
||||
const renderUserAvatar = (user: any) => {
|
||||
if (!user) return null;
|
||||
|
||||
return h('div', {}, [
|
||||
user.avatar
|
||||
? h(Avatar, {
|
||||
class: '!m-[5px]',
|
||||
size: 28,
|
||||
src: user.avatar,
|
||||
})
|
||||
: h(
|
||||
Avatar,
|
||||
{
|
||||
class: '!m-[5px]',
|
||||
size: 28,
|
||||
},
|
||||
{
|
||||
default: () => user.nickname?.slice(0, 1),
|
||||
},
|
||||
),
|
||||
h('span', { class: 'text-[13px]' }, user.nickname),
|
||||
]);
|
||||
};
|
||||
|
||||
// 判断是否需要显示自定义选择审批人
|
||||
const shouldShowCustomUserSelect = (
|
||||
activity: BpmProcessInstanceApi.ApprovalNodeInfo,
|
||||
) => {
|
||||
return (
|
||||
isEmpty(activity.tasks) &&
|
||||
isEmpty(activity.candidateUsers) &&
|
||||
(CandidateStrategyEnum.START_USER_SELECT === activity.candidateStrategy ||
|
||||
CandidateStrategyEnum.APPROVE_USER_SELECT === activity.candidateStrategy)
|
||||
);
|
||||
};
|
||||
|
||||
// 判断是否需要显示审批意见
|
||||
const shouldShowApprovalReason = (task: any, nodeType: NodeTypeEnum) => {
|
||||
return (
|
||||
task.reason &&
|
||||
[NodeTypeEnum.END_EVENT_NODE, NodeTypeEnum.USER_TASK_NODE].includes(
|
||||
nodeType,
|
||||
)
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-timeline class="pt-20px">
|
||||
<!-- 遍历每个审批节点 -->
|
||||
<a-timeline-item
|
||||
v-for="(activity, index) in activityNodes"
|
||||
:key="index"
|
||||
:color="getApprovalNodeColor(activity.status)"
|
||||
>
|
||||
<template #dot>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="position-absolute left--10px top--6px flex h-[32px] w-[32px] items-center justify-center rounded-full border border-solid border-[#dedede] bg-[#3f73f7] p-[6px]"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="getApprovalNodeTypeIcon(activity.nodeType)"
|
||||
class="size-[24px] text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showStatusIcon"
|
||||
class="absolute right-[-10px] top-[18px] flex size-[20px] items-center rounded-full border-[2px] border-solid border-white p-[2px]"
|
||||
:style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
|
||||
class="text-white"
|
||||
:class="[statusIconMap[activity.status]?.animation]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div
|
||||
class="ml-2 flex flex-col items-start gap-2"
|
||||
:id="`activity-task-${activity.id}-${index}`"
|
||||
>
|
||||
<!-- 第一行：节点名称、时间 -->
|
||||
<div class="flex w-full">
|
||||
<div class="font-bold">{{ activity.name }}</div>
|
||||
<!-- 信息：时间 -->
|
||||
<div
|
||||
v-if="activity.status !== TaskStatusEnum.NOT_START"
|
||||
class="ml-auto mt-1 text-[13px] text-[#a5a5a5]"
|
||||
>
|
||||
{{ getApprovalNodeTime(activity) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 子流程节点 -->
|
||||
<div v-if="activity.nodeType === NodeTypeEnum.CHILD_PROCESS_NODE">
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
size="small"
|
||||
@click="handleChildProcess(activity)"
|
||||
>
|
||||
查看子流程
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<!-- 需要自定义选择审批人 -->
|
||||
<div
|
||||
v-if="true || shouldShowCustomUserSelect(activity)"
|
||||
class="flex flex-wrap items-center gap-2"
|
||||
>
|
||||
<Tooltip title="添加用户" placement="left">
|
||||
<Button
|
||||
type="primary"
|
||||
size="middle"
|
||||
ghost
|
||||
@click="
|
||||
handleSelectUser(activity.id, customApproveUsers[activity.id])
|
||||
"
|
||||
>
|
||||
<template #icon>
|
||||
<IconifyIcon
|
||||
icon="mdi:account-plus-outline"
|
||||
class="size-[18px]"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<div
|
||||
v-for="(user, userIndex) in customApproveUsers[activity.id]"
|
||||
:key="userIndex"
|
||||
class="relative flex h-[36px] items-center gap-2 rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
|
||||
>
|
||||
{{ renderUserAvatar(user) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="mt-1 flex flex-wrap items-center gap-2">
|
||||
<!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
|
||||
<div
|
||||
v-for="(task, idx) in activity.tasks"
|
||||
:key="idx"
|
||||
class="flex flex-col gap-2 pr-[8px]"
|
||||
>
|
||||
<div
|
||||
class="relative flex flex-wrap gap-2"
|
||||
v-if="task.assigneeUser || task.ownerUser"
|
||||
>
|
||||
<!-- 信息：头像昵称 -->
|
||||
<div
|
||||
class="h-35px relative flex items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
|
||||
>
|
||||
<template
|
||||
v-if="
|
||||
task.assigneeUser?.avatar || task.assigneeUser?.nickname
|
||||
"
|
||||
>
|
||||
<Avatar
|
||||
class="!m-[5px]"
|
||||
:size="28"
|
||||
v-if="task.assigneeUser?.avatar"
|
||||
:src="task.assigneeUser?.avatar"
|
||||
/>
|
||||
<Avatar class="!m-[5px]" :size="28" v-else>
|
||||
{{ task.assigneeUser?.nickname.substring(0, 1) }}
|
||||
</Avatar>
|
||||
{{ task.assigneeUser?.nickname }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname"
|
||||
>
|
||||
<Avatar
|
||||
class="!m-[5px]"
|
||||
:size="28"
|
||||
v-if="task.ownerUser?.avatar"
|
||||
:src="task.ownerUser?.avatar"
|
||||
/>
|
||||
<Avatar class="!m-[5px]" :size="28" v-else>
|
||||
{{ task.ownerUser?.nickname.substring(0, 1) }}
|
||||
</Avatar>
|
||||
{{ task.ownerUser?.nickname }}
|
||||
</template>
|
||||
|
||||
<!-- 信息：任务状态图标 -->
|
||||
<div
|
||||
v-if="
|
||||
showStatusIcon && onlyStatusIconShow.includes(task.status)
|
||||
"
|
||||
class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[2px]"
|
||||
:style="{
|
||||
backgroundColor: statusIconMap[task.status]?.color,
|
||||
}"
|
||||
>
|
||||
<IconifyIcon
|
||||
:icon="
|
||||
statusIconMap[task.status]?.icon || 'mdi:clock-outline'
|
||||
"
|
||||
class="size-[10px] text-white"
|
||||
:class="[statusIconMap[task.status]?.animation]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 审批意见和签名 -->
|
||||
<teleport defer :to="`#activity-task-${activity.id}-${index}`">
|
||||
<div
|
||||
v-if="shouldShowApprovalReason(task, activity.nodeType)"
|
||||
class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
|
||||
>
|
||||
审批意见：{{ task.reason }}
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
task.signPicUrl &&
|
||||
activity.nodeType === NodeTypeEnum.USER_TASK_NODE
|
||||
"
|
||||
class="mt-1 w-full rounded-md bg-[#f8f8fa] p-2 text-[13px] text-[#a5a5a5]"
|
||||
>
|
||||
签名：
|
||||
<Image
|
||||
class="ml-[5px] h-[40px] w-[90px]"
|
||||
:src="task.signPicUrl"
|
||||
:preview="{ src: task.signPicUrl }"
|
||||
/>
|
||||
</div>
|
||||
</teleport>
|
||||
</div>
|
||||
|
||||
<!-- 情况二：遍历每个审批节点下的【候选的】task 任务 -->
|
||||
<div
|
||||
v-for="(user, userIndex) in activity.candidateUsers"
|
||||
:key="userIndex"
|
||||
class="relative flex h-[35px] items-center rounded-3xl bg-gray-100 pr-[8px] dark:bg-gray-600"
|
||||
>
|
||||
<Avatar
|
||||
class="!m-[5px]"
|
||||
:size="28"
|
||||
v-if="user.avatar"
|
||||
:src="user.avatar"
|
||||
/>
|
||||
<Avatar class="!m-[5px]" :size="28" v-else>
|
||||
{{ user.nickname.substring(0, 1) }}
|
||||
</Avatar>
|
||||
<span class="text-[13px]">
|
||||
{{ user.nickname }}
|
||||
</span>
|
||||
|
||||
<!-- 候选任务状态图标 -->
|
||||
<div
|
||||
v-if="showStatusIcon"
|
||||
class="absolute left-[24px] top-[20px] flex items-center rounded-full border-2 border-solid border-white p-[1px]"
|
||||
:style="{ backgroundColor: statusIconMap['-1']?.color }"
|
||||
>
|
||||
<IconifyIcon
|
||||
class="text-[11px] text-white"
|
||||
:icon="statusIconMap['-1']?.icon || 'mdi:clock-outline'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-timeline-item>
|
||||
</a-timeline>
|
||||
|
||||
<!-- 用户选择弹窗 -->
|
||||
<UserSelectModal
|
||||
ref="userSelectFormRef"
|
||||
v-model:value="selectedUsers"
|
||||
:multiple="true"
|
||||
title="选择用户"
|
||||
@confirm="handleUserSelectConfirm"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -17,6 +17,7 @@ import {
|
|||
getProcessInstanceManagerPage,
|
||||
} from '#/api/bpm/processInstance';
|
||||
import { DocAlert } from '#/components/doc-alert';
|
||||
import { router } from '#/router';
|
||||
|
||||
import { useGridColumns, useGridFormSchema } from './data';
|
||||
|
||||
|
|
@ -110,6 +111,10 @@ function onCancel(row: BpmProcessInstanceApi.ProcessInstanceVO) {
|
|||
/** 查看流程实例 */
|
||||
function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
|
||||
console.warn(row);
|
||||
router.push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
query: { id: row.id },
|
||||
});
|
||||
}
|
||||
|
||||
/** 刷新表格 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.4 KiB |
|
|
@ -12,6 +12,12 @@ const SvgBellIcon = createIconifyIcon('svg:bell');
|
|||
const SvgCakeIcon = createIconifyIcon('svg:cake');
|
||||
const SvgAntdvLogoIcon = createIconifyIcon('svg:antdv-logo');
|
||||
|
||||
// bpm 图标
|
||||
const SvgBpmRunningIcon = createIconifyIcon('svg:bpm-running');
|
||||
const SvgBpmApproveIcon = createIconifyIcon('svg:bpm-approve');
|
||||
const SvgBpmRejectIcon = createIconifyIcon('svg:bpm-reject');
|
||||
const SvgBpmCancelIcon = createIconifyIcon('svg:bpm-cancel');
|
||||
|
||||
export {
|
||||
SvgAntdvLogoIcon,
|
||||
SvgAvatar1Icon,
|
||||
|
|
@ -19,6 +25,10 @@ export {
|
|||
SvgAvatar3Icon,
|
||||
SvgAvatar4Icon,
|
||||
SvgBellIcon,
|
||||
SvgBpmApproveIcon,
|
||||
SvgBpmCancelIcon,
|
||||
SvgBpmRejectIcon,
|
||||
SvgBpmRunningIcon,
|
||||
SvgCakeIcon,
|
||||
SvgCardIcon,
|
||||
SvgDownloadIcon,
|
||||
|
|
|
|||
Loading…
Reference in New Issue