feat: [bpm][ele] 发起流程迁移
This commit is contained in:
jason
339
apps/web-ele/src/views/bpm/processInstance/create/index.vue
Normal file
339
apps/web-ele/src/views/bpm/processInstance/create/index.vue
Normal file
@@ -0,0 +1,339 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { BpmCategoryApi } from '#/api/bpm/category';
|
||||||
|
import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
|
||||||
|
|
||||||
|
import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
||||||
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
import { Page } from '@vben/common-ui';
|
||||||
|
import { groupBy } from '@vben/utils';
|
||||||
|
|
||||||
|
import {
|
||||||
|
ElCard,
|
||||||
|
ElCol,
|
||||||
|
ElInput,
|
||||||
|
ElMessage,
|
||||||
|
ElRow,
|
||||||
|
ElSpace,
|
||||||
|
ElTabPane,
|
||||||
|
ElTabs,
|
||||||
|
ElTooltip,
|
||||||
|
} from 'element-plus';
|
||||||
|
|
||||||
|
import { getCategorySimpleList } from '#/api/bpm/category';
|
||||||
|
import { getProcessDefinitionList } from '#/api/bpm/definition';
|
||||||
|
import { getProcessInstance } from '#/api/bpm/processInstance';
|
||||||
|
|
||||||
|
import ProcessDefinitionDetail from './modules/form.vue';
|
||||||
|
|
||||||
|
defineOptions({ name: 'BpmProcessInstanceCreate' });
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const loading = ref(true); // 加载中
|
||||||
|
const processInstanceId: any = route.query.processInstanceId; // 流程实例编号。场景：重新发起时
|
||||||
|
|
||||||
|
const categoryList: any = ref([]); // 分类的列表
|
||||||
|
const activeCategory = ref(''); // 当前选中的分类
|
||||||
|
|
||||||
|
const searchName = ref(''); // 当前搜索关键字
|
||||||
|
const processDefinitionList = ref<BpmProcessDefinitionApi.ProcessDefinition[]>(
|
||||||
|
[],
|
||||||
|
); // 流程定义的列表
|
||||||
|
const filteredProcessDefinitionList = ref<
|
||||||
|
BpmProcessDefinitionApi.ProcessDefinition[]
|
||||||
|
>([]); // 用于存储搜索过滤后的流程定义
|
||||||
|
|
||||||
|
const selectProcessDefinition = ref(); // 选择的流程定义
|
||||||
|
const processDefinitionDetailRef = ref();
|
||||||
|
|
||||||
|
/** 查询列表 */
|
||||||
|
async function getList() {
|
||||||
|
loading.value = true;
|
||||||
|
try {
|
||||||
|
// 1.1 所有流程分类数据
|
||||||
|
await loadCategoryList();
|
||||||
|
// 1.2 所有流程定义数据
|
||||||
|
await loadProcessDefinitionList();
|
||||||
|
|
||||||
|
// 2. 如果 processInstanceId 非空，说明是重新发起
|
||||||
|
if (processInstanceId?.length > 0) {
|
||||||
|
const processInstance = await getProcessInstance(processInstanceId);
|
||||||
|
if (!processInstance) {
|
||||||
|
ElMessage.error('重新发起流程失败，原因：流程实例不存在');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const processDefinition = processDefinitionList.value.find(
|
||||||
|
(item: any) => item.key === processInstance.processDefinition?.key,
|
||||||
|
);
|
||||||
|
if (!processDefinition) {
|
||||||
|
ElMessage.error('重新发起流程失败，原因：流程定义不存在');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await handleSelect(processDefinition, processInstance.formVariables);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取所有流程分类数据 */
|
||||||
|
async function loadCategoryList() {
|
||||||
|
categoryList.value = await getCategorySimpleList();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 获取所有流程定义数据 */
|
||||||
|
async function loadProcessDefinitionList() {
|
||||||
|
// 流程定义
|
||||||
|
processDefinitionList.value = await getProcessDefinitionList({
|
||||||
|
suspensionState: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 空搜索，初始化相关数据
|
||||||
|
handleQuery();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 搜索流程 */
|
||||||
|
function handleQuery() {
|
||||||
|
if (searchName.value.trim()) {
|
||||||
|
// 如果有搜索关键字，进行过滤
|
||||||
|
filteredProcessDefinitionList.value = processDefinitionList.value.filter(
|
||||||
|
(definition: any) =>
|
||||||
|
definition.name.toLowerCase().includes(searchName.value.toLowerCase()),
|
||||||
|
);
|
||||||
|
// 如果有匹配，切换到第一个包含匹配结果的分类
|
||||||
|
activeCategory.value = availableCategories.value[0]?.name;
|
||||||
|
} else {
|
||||||
|
// 如果没有搜索关键字，恢复所有数据
|
||||||
|
filteredProcessDefinitionList.value = processDefinitionList.value;
|
||||||
|
// 恢复到第一个可用分类
|
||||||
|
if (availableCategories.value.length > 0) {
|
||||||
|
activeCategory.value = availableCategories.value[0].code;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 流程定义的分组 */
|
||||||
|
const processDefinitionGroup = computed(() => {
|
||||||
|
if (!processDefinitionList.value?.length) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
// 按照 categoryList 的顺序重新组织数据
|
||||||
|
const grouped = groupBy(filteredProcessDefinitionList.value, 'category');
|
||||||
|
const orderedGroup: Record<
|
||||||
|
string,
|
||||||
|
BpmProcessDefinitionApi.ProcessDefinition[]
|
||||||
|
> = {};
|
||||||
|
categoryList.value.forEach((category: BpmCategoryApi.Category) => {
|
||||||
|
if (grouped[category.code]) {
|
||||||
|
orderedGroup[category.code] = grouped[
|
||||||
|
category.code
|
||||||
|
] as BpmProcessDefinitionApi.ProcessDefinition[];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return orderedGroup;
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 处理选择流程的按钮操作 */
|
||||||
|
async function handleSelect(
|
||||||
|
row: BpmProcessDefinitionApi.ProcessDefinition,
|
||||||
|
formVariables?: any,
|
||||||
|
) {
|
||||||
|
// 设置选择的流程
|
||||||
|
selectProcessDefinition.value = row;
|
||||||
|
// 初始化流程定义详情
|
||||||
|
await nextTick();
|
||||||
|
processDefinitionDetailRef.value?.initProcessInfo(row, formVariables);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 过滤出有流程的分类列表。目的：只展示有流程的分类 */
|
||||||
|
const availableCategories = computed(() => {
|
||||||
|
if (!categoryList.value?.length || !processDefinitionGroup.value) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
// 获取所有有流程的分类代码
|
||||||
|
const availableCategoryCodes = Object.keys(processDefinitionGroup.value);
|
||||||
|
// 过滤出有流程的分类
|
||||||
|
return categoryList.value.filter((category: BpmCategoryApi.Category) =>
|
||||||
|
availableCategoryCodes.includes(category.code),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 监听可用分类变化，自动设置正确的活动分类 */
|
||||||
|
watch(
|
||||||
|
availableCategories,
|
||||||
|
(newCategories) => {
|
||||||
|
if (newCategories.length > 0) {
|
||||||
|
// 如果当前活动分类不在可用分类中，切换到第一个可用分类
|
||||||
|
const currentCategoryExists = newCategories.some(
|
||||||
|
(category: BpmCategoryApi.Category) =>
|
||||||
|
category.code === activeCategory.value,
|
||||||
|
);
|
||||||
|
if (!currentCategoryExists) {
|
||||||
|
activeCategory.value = newCategories[0].code;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
/** 初始化 */
|
||||||
|
onMounted(() => {
|
||||||
|
getList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height>
|
||||||
|
<!-- 第一步，通过流程定义的列表，选择对应的流程 -->
|
||||||
|
<template v-if="!selectProcessDefinition">
|
||||||
|
<ElCard
|
||||||
|
class="h-full"
|
||||||
|
shadow="never"
|
||||||
|
:class="{
|
||||||
|
'process-definition-container': filteredProcessDefinitionList?.length,
|
||||||
|
}"
|
||||||
|
v-loading="loading"
|
||||||
|
>
|
||||||
|
<template #header>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-lg font-medium">全部流程</span>
|
||||||
|
<div class="w-1/3">
|
||||||
|
<ElInput
|
||||||
|
v-model="searchName"
|
||||||
|
placeholder="请输入流程名称检索"
|
||||||
|
clearable
|
||||||
|
@input="handleQuery"
|
||||||
|
@clear="handleQuery"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div v-if="filteredProcessDefinitionList?.length" class="h-full">
|
||||||
|
<ElTabs v-model="activeCategory" tab-position="left" class="h-full">
|
||||||
|
<ElTabPane
|
||||||
|
v-for="category in availableCategories"
|
||||||
|
:key="category.code"
|
||||||
|
:label="category.name"
|
||||||
|
:name="category.code"
|
||||||
|
class="h-full"
|
||||||
|
>
|
||||||
|
<div class="px-4">
|
||||||
|
<ElRow :gutter="16">
|
||||||
|
<ElCol
|
||||||
|
v-for="definition in processDefinitionGroup[category.code]"
|
||||||
|
:key="definition.id"
|
||||||
|
:xs="24"
|
||||||
|
:sm="12"
|
||||||
|
:md="8"
|
||||||
|
:lg="8"
|
||||||
|
:xl="6"
|
||||||
|
class="mb-4"
|
||||||
|
@click="handleSelect(definition)"
|
||||||
|
>
|
||||||
|
<ElCard
|
||||||
|
shadow="hover"
|
||||||
|
class="definition-item-card w-full cursor-pointer"
|
||||||
|
:class="{
|
||||||
|
'search-match': searchName.trim().length > 0,
|
||||||
|
}"
|
||||||
|
:body-style="{
|
||||||
|
width: '100%',
|
||||||
|
padding: '16px',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<img
|
||||||
|
v-if="definition.icon"
|
||||||
|
:src="definition.icon"
|
||||||
|
class="flow-icon-img object-contain"
|
||||||
|
alt="流程图标"
|
||||||
|
/>
|
||||||
|
<div v-else class="flow-icon flex-shrink-0">
|
||||||
|
<span class="text-xs text-white">
|
||||||
|
{{ definition.name?.slice(0, 2) }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="ml-3 flex-1 truncate text-base">
|
||||||
|
<ElTooltip
|
||||||
|
placement="top-start"
|
||||||
|
:content="definition.description"
|
||||||
|
>
|
||||||
|
{{ definition.name }}
|
||||||
|
</ElTooltip>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</ElCard>
|
||||||
|
</ElCol>
|
||||||
|
</ElRow>
|
||||||
|
</div>
|
||||||
|
</ElTabPane>
|
||||||
|
</ElTabs>
|
||||||
|
</div>
|
||||||
|
<div v-else class="!py-48 text-center">
|
||||||
|
<ElSpace direction="vertical" size="large">
|
||||||
|
<span class="text-gray-500">没有找到搜索结果</span>
|
||||||
|
</ElSpace>
|
||||||
|
</div>
|
||||||
|
</ElCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- 第二步，填写表单，进行流程的提交 -->
|
||||||
|
<ProcessDefinitionDetail
|
||||||
|
v-else
|
||||||
|
ref="processDefinitionDetailRef"
|
||||||
|
:select-process-definition="selectProcessDefinition"
|
||||||
|
@cancel="selectProcessDefinition = undefined"
|
||||||
|
/>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@keyframes bounce {
|
||||||
|
0%,
|
||||||
|
50% {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-definition-container {
|
||||||
|
.definition-item-card {
|
||||||
|
.flow-icon-img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-icon {
|
||||||
|
@apply bg-primary;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.search-match {
|
||||||
|
background-color: rgb(63 115 247 / 10%);
|
||||||
|
border: 1px solid var(--primary);
|
||||||
|
animation: bounce 0.5s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__content) {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,372 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
|
||||||
|
import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
|
||||||
|
|
||||||
|
import { computed, nextTick, ref, watch } from 'vue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
BpmCandidateStrategyEnum,
|
||||||
|
BpmFieldPermissionType,
|
||||||
|
BpmModelFormType,
|
||||||
|
BpmModelType,
|
||||||
|
BpmNodeIdEnum,
|
||||||
|
} from '@vben/constants';
|
||||||
|
import { useTabs } from '@vben/hooks';
|
||||||
|
import { IconifyIcon } from '@vben/icons';
|
||||||
|
|
||||||
|
import FormCreate from '@form-create/element-ui';
|
||||||
|
import {
|
||||||
|
ElButton,
|
||||||
|
ElCard,
|
||||||
|
ElCol,
|
||||||
|
ElMessage,
|
||||||
|
ElRow,
|
||||||
|
ElTabPane,
|
||||||
|
ElTabs,
|
||||||
|
} from 'element-plus';
|
||||||
|
|
||||||
|
import { getProcessDefinition } from '#/api/bpm/definition';
|
||||||
|
import {
|
||||||
|
createProcessInstance,
|
||||||
|
getApprovalDetail as getApprovalDetailApi,
|
||||||
|
} from '#/api/bpm/processInstance';
|
||||||
|
import { decodeFields, setConfAndFields2 } from '#/components/form-create';
|
||||||
|
import { router } from '#/router';
|
||||||
|
import ProcessInstanceBpmnViewer from '#/views/bpm/processInstance/detail/modules/bpm-viewer.vue';
|
||||||
|
import ProcessInstanceSimpleViewer from '#/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue';
|
||||||
|
import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
|
||||||
|
|
||||||
|
/** 类型定义 */
|
||||||
|
interface ProcessFormData {
|
||||||
|
rule: any[];
|
||||||
|
option: Record<string, any>;
|
||||||
|
value: Record<string, any>;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UserTask {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
defineOptions({ name: 'BpmProcessInstanceCreateForm' });
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
selectProcessDefinition: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const emit = defineEmits(['cancel']);
|
||||||
|
const { closeCurrentTab } = useTabs();
|
||||||
|
|
||||||
|
const getTitle = computed(() => {
|
||||||
|
return `流程表单 - ${props.selectProcessDefinition.name}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const detailForm = ref<ProcessFormData>({
|
||||||
|
rule: [],
|
||||||
|
option: {},
|
||||||
|
value: {},
|
||||||
|
});
|
||||||
|
const fApi = ref<any>();
|
||||||
|
|
||||||
|
const startUserSelectTasks = ref<UserTask[]>([]);
|
||||||
|
const startUserSelectAssignees = ref<Record<string, string[]>>({});
|
||||||
|
const tempStartUserSelectAssignees = ref<Record<string, string[]>>({});
|
||||||
|
|
||||||
|
const bpmnXML = ref<string | undefined>(undefined);
|
||||||
|
const simpleJson = ref<string | undefined>(undefined);
|
||||||
|
|
||||||
|
const timelineRef = ref<any>();
|
||||||
|
const activeTab = ref('form');
|
||||||
|
const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
|
||||||
|
const processInstanceStartLoading = ref(false);
|
||||||
|
|
||||||
|
/** 提交按钮 */
|
||||||
|
async function submitForm() {
|
||||||
|
if (!fApi.value || !props.selectProcessDefinition) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 流程表单校验
|
||||||
|
await fApi.value.validate();
|
||||||
|
// 校验指定审批人
|
||||||
|
if (startUserSelectTasks.value?.length > 0) {
|
||||||
|
for (const userTask of startUserSelectTasks.value) {
|
||||||
|
const assignees = startUserSelectAssignees.value[userTask.id];
|
||||||
|
if (Array.isArray(assignees) && assignees.length === 0) {
|
||||||
|
ElMessage.warning(`请选择${userTask.name}的候选人`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
processInstanceStartLoading.value = true;
|
||||||
|
try {
|
||||||
|
// 提交请求
|
||||||
|
await createProcessInstance({
|
||||||
|
processDefinitionId: props.selectProcessDefinition.id,
|
||||||
|
variables: detailForm.value.value,
|
||||||
|
startUserSelectAssignees: startUserSelectAssignees.value,
|
||||||
|
});
|
||||||
|
// 关闭并提示
|
||||||
|
ElMessage.success('发起流程成功');
|
||||||
|
await closeCurrentTab();
|
||||||
|
await router.push({ name: 'BpmTaskMy' });
|
||||||
|
} finally {
|
||||||
|
processInstanceStartLoading.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 设置表单信息、获取流程图数据 */
|
||||||
|
async function initProcessInfo(row: any, formVariables?: any) {
|
||||||
|
// 重置指定审批人
|
||||||
|
startUserSelectTasks.value = [];
|
||||||
|
startUserSelectAssignees.value = {};
|
||||||
|
|
||||||
|
// 情况一：流程表单
|
||||||
|
if (row.formType === BpmModelFormType.NORMAL) {
|
||||||
|
// 设置表单
|
||||||
|
// 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
|
||||||
|
// 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
|
||||||
|
// 这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
|
||||||
|
|
||||||
|
// 解析表单字段列表（不创建实例，避免重复渲染）
|
||||||
|
const decodedFields = decodeFields(row.formFields);
|
||||||
|
const allowedFields = new Set(
|
||||||
|
decodedFields.map((field: any) => field.field).filter(Boolean),
|
||||||
|
);
|
||||||
|
|
||||||
|
// 过滤掉不允许的字段
|
||||||
|
if (formVariables) {
|
||||||
|
for (const key in formVariables) {
|
||||||
|
if (!allowedFields.has(key)) {
|
||||||
|
delete formVariables[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables);
|
||||||
|
|
||||||
|
// 在配置中禁用 form-create 自带的提交和重置按钮
|
||||||
|
detailForm.value.option = {
|
||||||
|
...detailForm.value.option,
|
||||||
|
submitBtn: false,
|
||||||
|
resetBtn: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
await nextTick();
|
||||||
|
|
||||||
|
// 获取流程审批信息,当再次发起时，流程审批节点要根据原始表单参数预测出来
|
||||||
|
await getApprovalDetail({
|
||||||
|
id: row.id,
|
||||||
|
processVariablesStr: JSON.stringify(formVariables),
|
||||||
|
});
|
||||||
|
|
||||||
|
// 加载流程图
|
||||||
|
const processDefinitionDetail: BpmProcessDefinitionApi.ProcessDefinition =
|
||||||
|
await getProcessDefinition(row.id);
|
||||||
|
if (processDefinitionDetail) {
|
||||||
|
bpmnXML.value = processDefinitionDetail.bpmnXml;
|
||||||
|
simpleJson.value = processDefinitionDetail.simpleModel;
|
||||||
|
}
|
||||||
|
// 情况二：业务表单
|
||||||
|
} else if (row.formCustomCreatePath) {
|
||||||
|
// 这里暂时无需加载流程图，因为跳出到另外个 Tab；
|
||||||
|
await router.push({
|
||||||
|
path: row.formCustomCreatePath,
|
||||||
|
});
|
||||||
|
// 返回选择流程
|
||||||
|
emit('cancel');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
|
||||||
|
watch(
|
||||||
|
() => detailForm.value.value,
|
||||||
|
(newValue) => {
|
||||||
|
if (newValue && Object.keys(newValue).length > 0) {
|
||||||
|
// 记录之前的节点审批人
|
||||||
|
tempStartUserSelectAssignees.value = startUserSelectAssignees.value;
|
||||||
|
startUserSelectAssignees.value = {};
|
||||||
|
// 加载最新的审批详情
|
||||||
|
getApprovalDetail({
|
||||||
|
id: props.selectProcessDefinition.id,
|
||||||
|
processVariablesStr: JSON.stringify(newValue), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
/** 获取审批详情 */
|
||||||
|
async function getApprovalDetail(row: {
|
||||||
|
id: string;
|
||||||
|
processVariablesStr: string;
|
||||||
|
}) {
|
||||||
|
const data = await getApprovalDetailApi({
|
||||||
|
processDefinitionId: row.id,
|
||||||
|
activityId: BpmNodeIdEnum.START_USER_NODE_ID,
|
||||||
|
processVariablesStr: row.processVariablesStr,
|
||||||
|
});
|
||||||
|
if (!data) {
|
||||||
|
ElMessage.error('查询不到审批详情信息！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取审批节点
|
||||||
|
activityNodes.value = data.activityNodes;
|
||||||
|
|
||||||
|
// 获取发起人自选的任务
|
||||||
|
startUserSelectTasks.value = (data.activityNodes?.filter(
|
||||||
|
(node) =>
|
||||||
|
BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
|
||||||
|
) || []) as unknown as UserTask[];
|
||||||
|
|
||||||
|
// 恢复之前的选择审批人
|
||||||
|
if (startUserSelectTasks.value.length > 0) {
|
||||||
|
for (const node of startUserSelectTasks.value) {
|
||||||
|
const tempAssignees = tempStartUserSelectAssignees.value[node.id];
|
||||||
|
startUserSelectAssignees.value[node.id] = tempAssignees?.length
|
||||||
|
? tempAssignees
|
||||||
|
: [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置表单字段权限
|
||||||
|
const formFieldsPermission = data.formFieldsPermission;
|
||||||
|
if (formFieldsPermission) {
|
||||||
|
Object.entries(formFieldsPermission).forEach(([field, permission]) => {
|
||||||
|
setFieldPermission(field, permission as string);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 设置表单权限 */
|
||||||
|
function setFieldPermission(field: string, permission: string) {
|
||||||
|
if (permission === BpmFieldPermissionType.READ) {
|
||||||
|
fApi.value?.disabled(true, field);
|
||||||
|
}
|
||||||
|
if (permission === BpmFieldPermissionType.WRITE) {
|
||||||
|
fApi.value?.disabled(false, field);
|
||||||
|
}
|
||||||
|
if (permission === BpmFieldPermissionType.NONE) {
|
||||||
|
fApi.value?.hidden(true, field);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 取消发起审批 */
|
||||||
|
function handleCancel() {
|
||||||
|
emit('cancel');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 选择发起人 */
|
||||||
|
function selectUserConfirm(activityId: string, userList: any[]) {
|
||||||
|
if (!activityId || !Array.isArray(userList)) return;
|
||||||
|
startUserSelectAssignees.value[activityId] = userList.map((item) => item.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ initProcessInfo });
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<ElCard class="h-full overflow-hidden" shadow="never">
|
||||||
|
<template #header>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<span class="text-lg font-medium">{{ getTitle }}</span>
|
||||||
|
<ElButton plain type="default" @click="handleCancel">
|
||||||
|
<IconifyIcon icon="lucide:arrow-left" /> 返回
|
||||||
|
</ElButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="flex h-full flex-col">
|
||||||
|
<ElTabs v-model="activeTab" class="flex flex-1 flex-col overflow-hidden">
|
||||||
|
<ElTabPane label="表单填写" name="form">
|
||||||
|
<div class="h-full overflow-y-auto p-6">
|
||||||
|
<ElRow :gutter="48">
|
||||||
|
<ElCol :xs="24" :sm="24" :md="18" :lg="18" :xl="18">
|
||||||
|
<FormCreate
|
||||||
|
:rule="detailForm.rule"
|
||||||
|
v-model:api="fApi"
|
||||||
|
v-model="detailForm.value"
|
||||||
|
:option="detailForm.option"
|
||||||
|
@submit="submitForm"
|
||||||
|
/>
|
||||||
|
</ElCol>
|
||||||
|
<ElCol :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
|
||||||
|
<ProcessInstanceTimeline
|
||||||
|
ref="timelineRef"
|
||||||
|
:activity-nodes="activityNodes"
|
||||||
|
:show-status-icon="false"
|
||||||
|
@select-user-confirm="selectUserConfirm"
|
||||||
|
/>
|
||||||
|
</ElCol>
|
||||||
|
</ElRow>
|
||||||
|
</div>
|
||||||
|
</ElTabPane>
|
||||||
|
<ElTabPane
|
||||||
|
label="流程图"
|
||||||
|
name="flow"
|
||||||
|
class="flex flex-1 overflow-hidden"
|
||||||
|
>
|
||||||
|
<div class="h-full w-full overflow-y-auto">
|
||||||
|
<!-- BPMN 流程图预览 -->
|
||||||
|
<ProcessInstanceBpmnViewer
|
||||||
|
:bpmn-xml="bpmnXML"
|
||||||
|
v-if="BpmModelType.BPMN === selectProcessDefinition.modelType"
|
||||||
|
/>
|
||||||
|
<ProcessInstanceSimpleViewer
|
||||||
|
:simple-json="simpleJson"
|
||||||
|
v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</ElTabPane>
|
||||||
|
</ElTabs>
|
||||||
|
|
||||||
|
<div v-if="activeTab === 'form'" class="border-t pb-4 pt-2">
|
||||||
|
<div class="flex w-full items-center justify-center">
|
||||||
|
<ElButton
|
||||||
|
plain
|
||||||
|
type="primary"
|
||||||
|
@click="submitForm"
|
||||||
|
:loading="processInstanceStartLoading"
|
||||||
|
>
|
||||||
|
<IconifyIcon icon="lucide:check" />
|
||||||
|
<span class="ml-1">发起</span>
|
||||||
|
</ElButton>
|
||||||
|
<ElButton plain type="default" @click="handleCancel">
|
||||||
|
<IconifyIcon icon="lucide:x" />
|
||||||
|
<span class="ml-1">取消</span>
|
||||||
|
</ElButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ElCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-card__body) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: calc(100% - 60px); // header height approx
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__content) {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tab-pane) {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__header) {
|
||||||
|
padding: 0 16px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -246,7 +246,7 @@ onMounted(async () => {
|
|||||||
<span class="text-gray-500">编号：{{ id || '-' }}</span>
|
<span class="text-gray-500">编号：{{ id || '-' }}</span>
|
||||||
<IconifyIcon
|
<IconifyIcon
|
||||||
icon="lucide:printer"
|
icon="lucide:printer"
|
||||||
class="hover:text-primary cursor-pointer"
|
class="cursor-pointer hover:text-primary"
|
||||||
@click="handlePrint"
|
@click="handlePrint"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user