<script lang="ts" setup>
|
import type { ModelCategoryInfo } from '#/api/bpm/model';
|
|
import {
|
computed,
|
onActivated,
|
onMounted,
|
reactive,
|
ref,
|
useTemplateRef,
|
watch,
|
} from 'vue';
|
|
import { useAccess } from '@vben/access';
|
import { Page, useVbenModal } from '@vben/common-ui';
|
import { IconifyIcon } from '@vben/icons';
|
import { cloneDeep } from '@vben/utils';
|
|
import { useSortable } from '@vueuse/integrations/useSortable';
|
import {
|
Button,
|
Card,
|
Dropdown,
|
Input,
|
Menu,
|
message,
|
Switch,
|
Tooltip,
|
} from 'ant-design-vue';
|
|
import {
|
getAutoApproveList,
|
updateGlobalAutoApprove,
|
} from '#/api/bpm/autoApprove';
|
import {
|
getCategorySimpleList,
|
updateCategorySortBatch,
|
} from '#/api/bpm/category';
|
import { getModelList } from '#/api/bpm/model';
|
import { router } from '#/router';
|
|
import CategoryForm from '../category/modules/form.vue';
|
import CategoryDraggableModel from './modules/category-draggable-model.vue';
|
|
const [CategoryFormModal, categoryFormModalApi] = useVbenModal({
|
connectedComponent: CategoryForm,
|
destroyOnClose: true,
|
});
|
|
const modelListSpinning = ref(false); // 模型列表加载状态
|
|
/** 全局免审批总开关占用的流程 Key（与后端 BpmProcessAutoApproveService.GLOBAL_KEY 保持一致） */
|
const GLOBAL_AUTO_APPROVE_KEY = '*';
|
const globalAutoApprove = ref(false); // 全局免审批总开关
|
const globalAutoApproveLoading = ref(false); // 总开关提交状态
|
|
const { hasAccessByCodes } = useAccess();
|
/** 免审批开关的权限：无权限时开关置灰，避免点了才报错 */
|
const hasPermiAutoApprove = computed(() => {
|
return hasAccessByCodes(['bpm:process-auto-approve:update']);
|
});
|
|
const saveSortLoading = ref(false); // 保存排序状态
|
const categoryGroup = ref<ModelCategoryInfo[]>([]); // 按照 category 分组的数据
|
const originalData = ref<ModelCategoryInfo[]>([]); // 未排序前的原始数据
|
|
const sortable = useTemplateRef<HTMLElement>('categoryGroupRef'); // 可以排序元素的容器
|
const sortableInstance = ref<any>(null); // 排序引用，以便后续启用或禁用排序
|
const isCategorySorting = ref(false); // 分类排序状态
|
|
const queryParams = reactive({
|
name: '',
|
}); // 查询参数
|
|
/** 监听分类排序模式切换 */
|
watch(
|
() => isCategorySorting.value,
|
(newValue) => {
|
if (sortableInstance.value) {
|
if (newValue) {
|
// 启用排序功能
|
sortableInstance.value.option('disabled', false);
|
} else {
|
// 禁用排序功能
|
sortableInstance.value.option('disabled', true);
|
}
|
}
|
},
|
);
|
|
/** 加载数据 */
|
async function getList() {
|
modelListSpinning.value = true;
|
try {
|
const [modelList, categoryList, autoApproveList] = await Promise.all([
|
getModelList(queryParams.name),
|
getCategorySimpleList(),
|
getAutoApproveList(),
|
]);
|
// 免审批配置按「流程 Key」建立映射，合并到模型行数据上，供列表内的免审批开关列直接读取
|
const autoApproveMap = new Map<string, boolean>();
|
autoApproveList.forEach((config) => {
|
autoApproveMap.set(config.processDefinitionKey, config.autoApprove);
|
});
|
modelList.forEach((model: any) => {
|
model.autoApprove = autoApproveMap.get(model.key) ?? false;
|
});
|
// 全局总开关以特殊 Key 存放在同一条配置里
|
globalAutoApprove.value =
|
autoApproveMap.get(GLOBAL_AUTO_APPROVE_KEY) ?? false;
|
// 按照 category 聚合
|
categoryGroup.value = categoryList.map((category: any) => ({
|
...category,
|
modelList: modelList.filter(
|
(model: any) => model.categoryName === category.name,
|
),
|
}));
|
// 重置排序实例
|
sortableInstance.value = null;
|
} finally {
|
modelListSpinning.value = false;
|
}
|
}
|
|
/** 初始化 */
|
onMounted(() => {
|
getList();
|
});
|
|
/** 激活时刷新（keep-alive 缓存场景下从编辑页返回时触发） */
|
onActivated(() => {
|
getList();
|
});
|
|
/** 新增模型 */
|
function createModel() {
|
router.push({
|
name: 'BpmModelCreate',
|
});
|
}
|
|
/** 处理下拉菜单命令 */
|
function handleCommand(command: string) {
|
if (command === 'handleCategoryAdd') {
|
// 打开新建流程分类弹窗
|
categoryFormModalApi.open();
|
} else if (command === 'handleCategorySort') {
|
originalData.value = cloneDeep(categoryGroup.value);
|
isCategorySorting.value = true;
|
// 如果排序实例不存在，则初始化
|
if (sortableInstance.value) {
|
// 已存在实例，则启用排序功能
|
sortableInstance.value.option('disabled', false);
|
} else {
|
sortableInstance.value = useSortable(sortable, categoryGroup, {
|
disabled: false, // 启用排序
|
});
|
}
|
}
|
}
|
|
/** 取消分类排序 */
|
function handleCategorySortCancel() {
|
// 恢复初始数据
|
categoryGroup.value = cloneDeep(originalData.value);
|
isCategorySorting.value = false;
|
// 直接禁用排序功能
|
if (sortableInstance.value) {
|
sortableInstance.value.option('disabled', true);
|
}
|
}
|
|
/** 提交分类排序 */
|
async function handleCategorySortSubmit() {
|
saveSortLoading.value = true;
|
try {
|
// 保存排序逻辑
|
const ids = categoryGroup.value.map((item: any) => item.id);
|
await updateCategorySortBatch(ids);
|
message.success('分类排序成功');
|
} finally {
|
saveSortLoading.value = false;
|
}
|
isCategorySorting.value = false;
|
// 刷新列表
|
await getList();
|
// 禁用排序功能
|
if (sortableInstance.value) {
|
sortableInstance.value.option('disabled', true);
|
}
|
}
|
|
/** 切换全局免审批总开关：开启后所有流程一律免审批 */
|
async function handleGlobalAutoApproveChange(checked: boolean) {
|
globalAutoApprove.value = checked;
|
globalAutoApproveLoading.value = true;
|
try {
|
await updateGlobalAutoApprove(checked);
|
message.success(
|
checked
|
? '已开启全局免审批：所有流程提交后将直接通过'
|
: '已关闭全局免审批：恢复为按各流程开关判定',
|
);
|
// 重新拉取列表，同步各流程开关的展示
|
await getList();
|
} catch (error) {
|
// 失败回滚
|
globalAutoApprove.value = !checked;
|
console.error('设置全局免审批开关失败', error);
|
} finally {
|
globalAutoApproveLoading.value = false;
|
}
|
}
|
</script>
|
|
<template>
|
<Page auto-content-height>
|
<!-- 流程分类表单弹窗 -->
|
<CategoryFormModal @success="getList" />
|
<Card
|
:body-style="{ padding: '10px' }"
|
class="mb-4"
|
title="流程模型"
|
v-spinning="modelListSpinning"
|
>
|
<template #extra>
|
<div v-if="!isCategorySorting">
|
<Tooltip title="开启后所有流程一律免审批（优先于各流程自己的开关）">
|
<span class="mr-1">全部免审批</span>
|
</Tooltip>
|
<Switch
|
:checked="globalAutoApprove"
|
:loading="globalAutoApproveLoading"
|
:disabled="!hasPermiAutoApprove"
|
class="mr-3"
|
@change="(checked: any) => handleGlobalAutoApproveChange(checked)"
|
/>
|
<Input
|
v-model:value="queryParams.name"
|
placeholder="搜索流程"
|
allow-clear
|
@press-enter="getList"
|
class="!w-60"
|
/>
|
<Button class="ml-2" type="primary" @click="createModel">
|
<IconifyIcon icon="lucide:plus" /> 新建模型
|
</Button>
|
<Dropdown class="ml-2" placement="bottomRight" arrow>
|
<Button>
|
<template #icon>
|
<div class="flex items-center justify-center">
|
<IconifyIcon icon="lucide:settings" />
|
</div>
|
</template>
|
</Button>
|
<template #overlay>
|
<Menu @click="(e) => handleCommand(e.key as string)">
|
<Menu.Item key="handleCategoryAdd">
|
<div class="flex items-center gap-1">
|
<IconifyIcon icon="lucide:plus" />
|
新建分类
|
</div>
|
</Menu.Item>
|
<Menu.Item key="handleCategorySort">
|
<div class="flex items-center gap-1">
|
<IconifyIcon icon="lucide:align-start-vertical" />
|
分类排序
|
</div>
|
</Menu.Item>
|
</Menu>
|
</template>
|
</Dropdown>
|
</div>
|
<div class="flex h-full items-center justify-between" v-else>
|
<Button @click="handleCategorySortCancel" class="mr-3">
|
取 消
|
</Button>
|
<Button
|
type="primary"
|
:loading="saveSortLoading"
|
@click="handleCategorySortSubmit"
|
>
|
保存排序
|
</Button>
|
</div>
|
</template>
|
|
<!-- 按照分类，展示其所属的模型列表 -->
|
<div class="px-3" ref="categoryGroupRef">
|
<CategoryDraggableModel
|
v-for="(element, index) in categoryGroup"
|
:class="isCategorySorting ? 'cursor-move' : ''"
|
:key="element.id"
|
:category-info="element"
|
:is-category-sorting="isCategorySorting"
|
:is-first="index === 0"
|
@success="getList"
|
/>
|
</div>
|
</Card>
|
</Page>
|
</template>
|
