feat: 模型列表 50%
jason
parent
059687e1f5
commit
16140848b1
|
|
@ -44,8 +44,8 @@
|
|||
"@vben/types": "workspace:*",
|
||||
"@vben/utils": "workspace:*",
|
||||
"@vueuse/core": "catalog:",
|
||||
"@vueuse/integrations": "catalog:",
|
||||
"ant-design-vue": "catalog:",
|
||||
"vxe-table": "catalog:",
|
||||
"cropperjs": "catalog:",
|
||||
"crypto-js": "catalog:",
|
||||
"dayjs": "catalog:",
|
||||
|
|
@ -53,7 +53,8 @@
|
|||
"pinia": "catalog:",
|
||||
"vue": "catalog:",
|
||||
"vue-dompurify-html": "catalog:",
|
||||
"vue-router": "catalog:"
|
||||
"vue-router": "catalog:",
|
||||
"vxe-table": "catalog:"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/crypto-js": "catalog:"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import type { PageParam, PageResult } from '@vben/request';
|
||||
|
||||
import type { BpmModelApi } from '#/api/bpm/model';
|
||||
|
||||
import { requestClient } from '#/api/request';
|
||||
|
||||
export namespace BpmCategoryApi {
|
||||
|
|
@ -11,6 +13,13 @@ export namespace BpmCategoryApi {
|
|||
status: number;
|
||||
sort: number; // 分类排序
|
||||
}
|
||||
|
||||
/** 模型分类信息 */
|
||||
export interface ModelCategoryInfo {
|
||||
id: number;
|
||||
name: string;
|
||||
modelList: BpmModelApi.ModelVO[];
|
||||
}
|
||||
}
|
||||
|
||||
/** 查询流程分类分页 */
|
||||
|
|
@ -30,15 +39,30 @@ export async function getCategory(id: number) {
|
|||
|
||||
/** 新增流程分类 */
|
||||
export async function createCategory(data: BpmCategoryApi.CategoryVO) {
|
||||
return requestClient.post('/bpm/category/create', data);
|
||||
return requestClient.post<number>('/bpm/category/create', data);
|
||||
}
|
||||
|
||||
/** 修改流程分类 */
|
||||
export async function updateCategory(data: BpmCategoryApi.CategoryVO) {
|
||||
return requestClient.put('/bpm/category/update', data);
|
||||
return requestClient.put<boolean>('/bpm/category/update', data);
|
||||
}
|
||||
|
||||
/** 删除流程分类 */
|
||||
export async function deleteCategory(id: number) {
|
||||
return requestClient.delete(`/bpm/category/delete?id=${id}`);
|
||||
return requestClient.delete<boolean>(`/bpm/category/delete?id=${id}`);
|
||||
}
|
||||
|
||||
/** 查询流程分类列表 */
|
||||
export async function getCategorySimpleList() {
|
||||
return requestClient.get<BpmCategoryApi.CategoryVO[]>(
|
||||
`/bpm/category/simple-list`,
|
||||
);
|
||||
}
|
||||
|
||||
/** 批量修改流程分类的排序 */
|
||||
export async function updateCategorySortBatch(ids: number[]) {
|
||||
const params = ids.join(',');
|
||||
return requestClient.put<boolean>(
|
||||
`/bpm/category/update-sort-batch?ids=${params}`,
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
import { requestClient } from '#/api/request';
|
||||
|
||||
export namespace BpmModelApi {
|
||||
/** 用户信息 TODO 这个是不是可以抽取出来定义在公共模块 */
|
||||
export interface UserInfo {
|
||||
id: number;
|
||||
nickname: string;
|
||||
avatar?: string;
|
||||
deptId?: number;
|
||||
deptName?: string;
|
||||
}
|
||||
/** 流程定义 VO */
|
||||
export interface ProcessDefinitionVO {
|
||||
id: string;
|
||||
version: number;
|
||||
deploymentTime: number;
|
||||
suspensionState: number;
|
||||
formType?: number;
|
||||
}
|
||||
|
||||
/** 流程模型 VO */
|
||||
export interface ModelVO {
|
||||
id: number;
|
||||
key: string;
|
||||
name: string;
|
||||
icon?: string;
|
||||
description: string;
|
||||
category: string;
|
||||
formName: string;
|
||||
formType: number;
|
||||
formId: number;
|
||||
formCustomCreatePath: string;
|
||||
formCustomViewPath: string;
|
||||
processDefinition: ProcessDefinitionVO;
|
||||
status: number;
|
||||
remark: string;
|
||||
createTime: string;
|
||||
bpmnXml: string;
|
||||
startUsers?: UserInfo[];
|
||||
}
|
||||
|
||||
/** 模型分类信息 */
|
||||
export interface ModelCategoryInfo {
|
||||
id: number;
|
||||
name: string;
|
||||
modelList: ModelVO[];
|
||||
}
|
||||
}
|
||||
|
||||
/** 获取流程模型列表 */
|
||||
export async function getModelList(name: string | undefined) {
|
||||
return requestClient.get<BpmModelApi.ModelVO[]>('/bpm/model/list', {
|
||||
params: { name },
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取流程模型详情 */
|
||||
export async function getModel(id: string) {
|
||||
return requestClient.get<BpmModelApi.ModelVO>(`/bpm/model/get?id=${id}`);
|
||||
}
|
||||
|
||||
/** 更新流程模型 */
|
||||
export async function updateModel(data: BpmModelApi.ModelVO) {
|
||||
return requestClient.put('/bpm/model/update', data);
|
||||
}
|
||||
|
||||
/** 批量修改流程模型排序 */
|
||||
export async function updateModelSortBatch(ids: number[]) {
|
||||
const params = ids.join(',');
|
||||
return requestClient.put<boolean>(
|
||||
`/bpm/model/update-sort-batch?ids=${params}`,
|
||||
);
|
||||
}
|
||||
|
||||
/** 更新流程模型的 BPMN XML */
|
||||
export async function updateModelBpmn(data: BpmModelApi.ModelVO) {
|
||||
return requestClient.put('/bpm/model/update-bpmn', data);
|
||||
}
|
||||
|
||||
/** 更新流程模型状态 */
|
||||
export async function updateModelState(id: number, state: number) {
|
||||
const data = {
|
||||
id,
|
||||
state,
|
||||
};
|
||||
return requestClient.put('/bpm/model/update-state', data);
|
||||
}
|
||||
|
||||
/** 创建流程模型 */
|
||||
export async function createModel(data: BpmModelApi.ModelVO) {
|
||||
return requestClient.post('/bpm/model/create', data);
|
||||
}
|
||||
|
||||
/** 删除流程模型 */
|
||||
export async function deleteModel(id: number) {
|
||||
return requestClient.delete(`/bpm/model/delete?id=${id}`);
|
||||
}
|
||||
|
||||
/** 部署流程模型 */
|
||||
export async function deployModel(id: number) {
|
||||
return requestClient.post(`/bpm/model/deploy?id=${id}`);
|
||||
}
|
||||
|
||||
/** 清理流程模型 */
|
||||
export async function cleanModel(id: number) {
|
||||
return requestClient.delete(`/bpm/model/clean?id=${id}`);
|
||||
}
|
||||
|
|
@ -1,28 +1,242 @@
|
|||
<script lang="ts" setup>
|
||||
import { Page } from '@vben/common-ui';
|
||||
import type { BpmModelApi } from '#/api/bpm/model';
|
||||
|
||||
import { Button } from 'ant-design-vue';
|
||||
import { onActivated, reactive, ref, useTemplateRef, watch } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
import { Plus, Search, Settings } from '@vben/icons';
|
||||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { refAutoReset } from '@vueuse/core';
|
||||
import { useSortable } from '@vueuse/integrations/useSortable';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Dropdown,
|
||||
Form,
|
||||
Input,
|
||||
Menu,
|
||||
message,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import {
|
||||
getCategorySimpleList,
|
||||
updateCategorySortBatch,
|
||||
} from '#/api/bpm/category';
|
||||
import { getModelList } from '#/api/bpm/model';
|
||||
|
||||
import CategoryDraggableModel from './modules/category-draggable-model.vue';
|
||||
// 模型列表加载状态
|
||||
const modelListSpinning = refAutoReset(false, 3000);
|
||||
// 保存排序状态
|
||||
const saveSortLoading = ref(false);
|
||||
// 按照 category 分组的数据
|
||||
const categoryGroup = ref<BpmModelApi.ModelCategoryInfo[]>([]);
|
||||
// 未排序前的原始数据
|
||||
const originalData = ref<BpmModelApi.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);
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
/** 加载数据 */
|
||||
const getList = async () => {
|
||||
modelListSpinning.value = true;
|
||||
try {
|
||||
const modelList = await getModelList(queryParams.name);
|
||||
const categoryList = await getCategorySimpleList();
|
||||
// 按照 category 聚合
|
||||
categoryGroup.value = categoryList.map((category: any) => ({
|
||||
...category,
|
||||
modelList: modelList.filter(
|
||||
(model: any) => model.categoryName === category.name,
|
||||
),
|
||||
}));
|
||||
// 重置排序实例
|
||||
sortableInstance.value = null;
|
||||
} finally {
|
||||
modelListSpinning.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 初始化 */
|
||||
onActivated(() => {
|
||||
getList();
|
||||
});
|
||||
|
||||
/** 查询方法 */
|
||||
const handleQuery = () => {
|
||||
getList();
|
||||
};
|
||||
|
||||
/** 新增模型 */
|
||||
const createModel = () => {
|
||||
// TODO 新增模型
|
||||
};
|
||||
|
||||
/** 处理下拉菜单命令 */
|
||||
const handleCommand = (command: string) => {
|
||||
if (command === 'handleCategoryAdd') {
|
||||
// TODO 新建分类逻辑
|
||||
} 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, // 启用排序
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/** 取消分类排序 */
|
||||
const handleCategorySortCancel = () => {
|
||||
// 恢复初始数据
|
||||
categoryGroup.value = cloneDeep(originalData.value);
|
||||
isCategorySorting.value = false;
|
||||
// 直接禁用排序功能
|
||||
if (sortableInstance.value) {
|
||||
sortableInstance.value.option('disabled', true);
|
||||
}
|
||||
};
|
||||
|
||||
/** 提交分类排序 */
|
||||
const handleCategorySortSubmit = async () => {
|
||||
saveSortLoading.value = true;
|
||||
try {
|
||||
// 保存排序逻辑
|
||||
const ids = categoryGroup.value.map((item: any) => item.id);
|
||||
await updateCategorySortBatch(ids);
|
||||
} finally {
|
||||
saveSortLoading.value = false;
|
||||
}
|
||||
message.success('分类排序成功');
|
||||
isCategorySorting.value = false;
|
||||
// 刷新列表
|
||||
await getList();
|
||||
// 禁用排序功能
|
||||
if (sortableInstance.value) {
|
||||
sortableInstance.value.option('disabled', true);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page>
|
||||
<Button
|
||||
danger
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3"
|
||||
<Page auto-content-height>
|
||||
<Card
|
||||
:body-style="{ padding: '10px' }"
|
||||
class="mb-4"
|
||||
v-spinning="modelListSpinning"
|
||||
>
|
||||
该功能支持 Vue3 + element-plus 版本！
|
||||
</Button>
|
||||
<br />
|
||||
<Button
|
||||
type="link"
|
||||
target="_blank"
|
||||
href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/model/index"
|
||||
>
|
||||
可参考
|
||||
https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/bpm/model/index
|
||||
代码，pull request 贡献给我们！
|
||||
</Button>
|
||||
<div class="flex items-center justify-between pl-5">
|
||||
<span class="-mb-4 text-lg font-extrabold">流程模型</span>
|
||||
<!-- 搜索工作栏 -->
|
||||
<Form
|
||||
v-if="!isCategorySorting"
|
||||
class="-mb-4 mr-2.5 flex"
|
||||
:model="queryParams"
|
||||
layout="inline"
|
||||
>
|
||||
<Form.Item name="name" class="ml-auto">
|
||||
<Input
|
||||
v-model:value="queryParams.name"
|
||||
placeholder="搜索流程"
|
||||
allow-clear
|
||||
@press-enter="handleQuery"
|
||||
class="!w-60"
|
||||
>
|
||||
<template #prefix>
|
||||
<Search class="mx-2.5" />
|
||||
</template>
|
||||
</Input>
|
||||
</Form.Item>
|
||||
<!-- 右上角：新建模型、更多操作 -->
|
||||
<Form.Item>
|
||||
<Button type="primary" @click="createModel">
|
||||
<Plus class="size-5" /> 新建模型
|
||||
</Button>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Dropdown placement="bottomRight">
|
||||
<Button>
|
||||
<template #icon>
|
||||
<Settings class="size-4" />
|
||||
</template>
|
||||
</Button>
|
||||
<template #overlay>
|
||||
<Menu @click="(e) => handleCommand(e.key as string)">
|
||||
<Menu.Item key="handleCategoryAdd">
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
class="icon-[ant-design--plus-outlined] mr-1.5 text-[18px]"
|
||||
></span>
|
||||
新建分类
|
||||
</div>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="handleCategorySort">
|
||||
<div class="flex items-center">
|
||||
<span class="icon-[fa--sort-amount-desc] mr-1.5"></span>
|
||||
分类排序
|
||||
</div>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<div class="-mb-4 mr-6" v-else>
|
||||
<Button @click="handleCategorySortCancel" class="mr-3">
|
||||
取 消
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
:loading="saveSortLoading"
|
||||
@click="handleCategorySortSubmit"
|
||||
>
|
||||
保存排序
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
<!-- 按照分类，展示其所属的模型列表 -->
|
||||
<div class="px-5" ref="categoryGroupRef">
|
||||
<CategoryDraggableModel
|
||||
v-for="element in categoryGroup"
|
||||
:class="isCategorySorting ? 'cursor-move' : ''"
|
||||
:key="element.id"
|
||||
:category-info="element"
|
||||
:is-category-sorting="isCategorySorting"
|
||||
@success="getList"
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</Page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,398 @@
|
|||
<script lang="ts" setup>
|
||||
import type { BpmCategoryApi } from '#/api/bpm/category';
|
||||
import type { BpmModelApi } from '#/api/bpm/model';
|
||||
|
||||
import { computed, ref, watchEffect } from 'vue';
|
||||
|
||||
import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
|
||||
|
||||
import { useDebounceFn } from '@vueuse/core';
|
||||
import { useSortable } from '@vueuse/integrations/useSortable';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Collapse,
|
||||
message,
|
||||
Table,
|
||||
Tag,
|
||||
Tooltip,
|
||||
} from 'ant-design-vue';
|
||||
|
||||
import { updateModelSortBatch } from '#/api/bpm/model';
|
||||
import { DictTag } from '#/components/dict-tag';
|
||||
import { DICT_TYPE } from '#/utils/dict';
|
||||
|
||||
const props = defineProps<{
|
||||
categoryInfo: BpmCategoryApi.ModelCategoryInfo;
|
||||
isCategorySorting: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits(['success']);
|
||||
|
||||
const isModelSorting = ref(false);
|
||||
const originalData = ref<BpmModelApi.ModelVO[]>([]);
|
||||
const modelList = ref<BpmModelApi.ModelVO[]>([]);
|
||||
const isExpand = ref(false);
|
||||
const tableRef = ref();
|
||||
|
||||
// 排序引用，以便后续启用或禁用排序
|
||||
const sortableInstance = ref<any>(null);
|
||||
/** 解决 v-model 问题，使用计算属性 */
|
||||
const expandKeys = computed(() => (isExpand.value ? ['1'] : []));
|
||||
|
||||
// 表格列配置
|
||||
const columns = [
|
||||
{
|
||||
title: '流程名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
align: 'left' as const,
|
||||
minWidth: 250,
|
||||
},
|
||||
{
|
||||
title: '可见范围',
|
||||
dataIndex: 'startUserIds',
|
||||
key: 'startUserIds',
|
||||
align: 'center' as const,
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
title: '流程类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align: 'center' as const,
|
||||
minWidth: 120,
|
||||
},
|
||||
{
|
||||
title: '表单信息',
|
||||
dataIndex: 'formType',
|
||||
key: 'formType',
|
||||
align: 'center' as const,
|
||||
minWidth: 150,
|
||||
},
|
||||
{
|
||||
title: '最后发布',
|
||||
dataIndex: 'deploymentTime',
|
||||
key: 'deploymentTime',
|
||||
align: 'center' as const,
|
||||
minWidth: 250,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
align: 'center' as const,
|
||||
fixed: 'right' as const,
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
|
||||
/** 处理模型的排序 */
|
||||
const handleModelSort = () => {
|
||||
// 保存初始数据
|
||||
originalData.value = cloneDeep(props.categoryInfo.modelList);
|
||||
// 展开数据
|
||||
isExpand.value = true;
|
||||
isModelSorting.value = true;
|
||||
// 如果排序实例不存在，则初始化
|
||||
if (sortableInstance.value) {
|
||||
// 已存在实例，则启用排序功能
|
||||
sortableInstance.value.option('disabled', false);
|
||||
} else {
|
||||
const sortableClass = `.category-${props.categoryInfo.id} .ant-table .ant-table-tbody`;
|
||||
sortableInstance.value = useSortable(sortableClass, modelList, {
|
||||
disabled: false, // 启用排序
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/** 处理模型的排序提交 */
|
||||
const handleModelSortSubmit = async () => {
|
||||
try {
|
||||
// 保存排序
|
||||
const ids = modelList.value.map((item) => item.id);
|
||||
await updateModelSortBatch(ids);
|
||||
// 刷新列表
|
||||
isModelSorting.value = false;
|
||||
message.success('排序模型成功');
|
||||
emit('success');
|
||||
} catch (error) {
|
||||
console.error('排序保存失败', error);
|
||||
}
|
||||
};
|
||||
|
||||
/** 处理模型的排序取消 */
|
||||
const handleModelSortCancel = () => {
|
||||
// 恢复初始数据
|
||||
modelList.value = cloneDeep(originalData.value);
|
||||
isModelSorting.value = false;
|
||||
// 禁用排序功能
|
||||
if (sortableInstance.value) {
|
||||
sortableInstance.value.option('disabled', true);
|
||||
}
|
||||
};
|
||||
|
||||
/** 处理表单详情点击 */
|
||||
const handleFormDetail = (row: any) => {
|
||||
// TODO 待实现
|
||||
console.warn('待实现', row);
|
||||
};
|
||||
|
||||
/** 更新 modelList 模型列表 */
|
||||
const updateModelList = useDebounceFn(() => {
|
||||
const newModelList = props.categoryInfo.modelList;
|
||||
if (!isEqual(modelList.value, newModelList)) {
|
||||
modelList.value = cloneDeep(newModelList);
|
||||
if (newModelList?.length > 0) {
|
||||
isExpand.value = true;
|
||||
}
|
||||
// 关闭排序
|
||||
isModelSorting.value = false;
|
||||
// 重置排序实例
|
||||
sortableInstance.value = null;
|
||||
}
|
||||
}, 100);
|
||||
|
||||
/** 监听分类信息和排序状态变化 */
|
||||
watchEffect(() => {
|
||||
if (props.categoryInfo?.modelList) {
|
||||
updateModelList();
|
||||
}
|
||||
|
||||
if (props.isCategorySorting) {
|
||||
isExpand.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
/** 自定义表格行渲染 */
|
||||
const customRow = (_record: any) => {
|
||||
return {
|
||||
class: isModelSorting.value ? 'cursor-move' : '',
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Card
|
||||
:body-style="{ padding: 0 }"
|
||||
class="category-draggable-model mb-5 rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
|
||||
>
|
||||
<div class="flex h-12 items-center">
|
||||
<!-- 头部：分类名 -->
|
||||
<div class="flex items-center">
|
||||
<Tooltip v-if="isCategorySorting" title="拖动排序">
|
||||
<span
|
||||
class="icon-[ic--round-drag-indicator] ml-2.5 cursor-move text-2xl text-gray-500"
|
||||
></span>
|
||||
</Tooltip>
|
||||
<div class="ml-4 mr-2 text-lg font-medium">{{ categoryInfo.name }}</div>
|
||||
<div class="text-gray-500">
|
||||
({{ categoryInfo.modelList?.length || 0 }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 头部：操作 -->
|
||||
<div class="flex flex-1 items-center" v-show="!isCategorySorting">
|
||||
<div
|
||||
v-if="categoryInfo.modelList.length > 0"
|
||||
class="ml-3 flex cursor-pointer items-center transition-transform duration-300"
|
||||
:class="isExpand ? 'rotate-180' : 'rotate-0'"
|
||||
@click="isExpand = !isExpand"
|
||||
>
|
||||
<span
|
||||
class="icon-[ic--round-expand-more] text-3xl text-gray-400"
|
||||
></span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="ml-auto flex items-center"
|
||||
:class="isModelSorting ? 'mr-4' : 'mr-12'"
|
||||
>
|
||||
<template v-if="!isModelSorting">
|
||||
<Button
|
||||
v-if="categoryInfo.modelList.length > 0"
|
||||
type="link"
|
||||
class="mr-5 flex items-center text-[14px]"
|
||||
@click.stop="handleModelSort"
|
||||
>
|
||||
<template #icon>
|
||||
<span class="icon-[fa--sort-amount-desc] mr-1"></span>
|
||||
</template>
|
||||
排序
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<Button @click.stop="handleModelSortCancel" class="mr-2">
|
||||
取 消
|
||||
</Button>
|
||||
<Button type="primary" @click.stop="handleModelSortSubmit">
|
||||
保存排序
|
||||
</Button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模型列表 -->
|
||||
<Collapse :active-key="expandKeys" :bordered="false" class="bg-transparent">
|
||||
<Collapse.Panel
|
||||
key="1"
|
||||
:show-arrow="false"
|
||||
class="border-0 bg-transparent p-0"
|
||||
v-show="isExpand"
|
||||
>
|
||||
<Table
|
||||
v-if="modelList && modelList.length > 0"
|
||||
:class="`category-${categoryInfo.id}`"
|
||||
ref="tableRef"
|
||||
:data-source="modelList"
|
||||
:columns="columns"
|
||||
:pagination="false"
|
||||
:custom-row="customRow"
|
||||
row-key="id"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<!-- 流程名 -->
|
||||
<template v-if="column.key === 'name'">
|
||||
<div class="flex items-center">
|
||||
<Tooltip v-if="isModelSorting" title="拖动排序">
|
||||
<span
|
||||
class="icon-[ic--round-drag-indicator] mr-2.5 cursor-move text-2xl text-gray-500"
|
||||
></span>
|
||||
</Tooltip>
|
||||
<div
|
||||
v-if="!record.icon"
|
||||
class="mr-2.5 flex h-9 w-9 items-center justify-center rounded bg-blue-500 text-white"
|
||||
>
|
||||
<span style="font-size: 12px">{{
|
||||
record.name.substring(0, 2)
|
||||
}}</span>
|
||||
</div>
|
||||
<img
|
||||
v-else
|
||||
:src="record.icon"
|
||||
class="mr-2.5 h-9 w-9 rounded"
|
||||
alt="图标"
|
||||
/>
|
||||
{{ record.name }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 可见范围列-->
|
||||
<template v-else-if="column.key === 'startUserIds'">
|
||||
<span
|
||||
v-if="!record.startUsers?.length && !record.startDepts?.length"
|
||||
>
|
||||
全部可见
|
||||
</span>
|
||||
<span v-else-if="record.startUsers?.length === 1">
|
||||
{{ record.startUsers[0].nickname }}
|
||||
</span>
|
||||
<span v-else-if="record.startDepts?.length === 1">
|
||||
{{ record.startDepts[0].name }}
|
||||
</span>
|
||||
<span v-else-if="record.startDepts?.length > 1">
|
||||
<Tooltip
|
||||
placement="top"
|
||||
:title="
|
||||
record.startDepts.map((dept: any) => dept.name).join('、')
|
||||
"
|
||||
>
|
||||
{{ record.startDepts[0].name }}等
|
||||
{{ record.startDepts.length }} 个部门可见
|
||||
</Tooltip>
|
||||
</span>
|
||||
<span v-else-if="record.startUsers?.length > 1">
|
||||
<Tooltip
|
||||
placement="top"
|
||||
:title="
|
||||
record.startUsers
|
||||
.map((user: any) => user.nickname)
|
||||
.join('、')
|
||||
"
|
||||
>
|
||||
{{ record.startUsers[0].nickname }}等
|
||||
{{ record.startUsers.length }} 人可见
|
||||
</Tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<!-- 流程类型列 -->
|
||||
<template v-else-if="column.key === 'type'">
|
||||
<!-- <DictTag :value="record.type" :type="DICT_TYPE.BPM_MODEL_TYPE" /> -->
|
||||
<!-- <Tag>{{ record.type }}</Tag> -->
|
||||
<DictTag :type="DICT_TYPE.BPM_MODEL_TYPE" :value="record.type" />
|
||||
</template>
|
||||
<!-- 表单信息列 -->
|
||||
<template v-else-if="column.key === 'formType'">
|
||||
<!-- TODO BpmModelFormType.NORMAL -->
|
||||
<Button
|
||||
v-if="record.formType === 10"
|
||||
type="link"
|
||||
@click="handleFormDetail(record)"
|
||||
>
|
||||
{{ record.formName }}
|
||||
</Button>
|
||||
<!-- TODO BpmModelFormType.CUSTOM -->
|
||||
<Button
|
||||
v-else-if="record.formType === 20"
|
||||
type="link"
|
||||
@click="handleFormDetail(record)"
|
||||
>
|
||||
{{ record.formCustomCreatePath }}
|
||||
</Button>
|
||||
<span v-else>暂无表单</span>
|
||||
</template>
|
||||
<!-- 最后发布列 -->
|
||||
<template v-else-if="column.key === 'deploymentTime'">
|
||||
<div class="flex items-center justify-center">
|
||||
<span v-if="record.processDefinition" class="w-[150px]">
|
||||
{{ formatDateTime(record.processDefinition.deploymentTime) }}
|
||||
</span>
|
||||
<Tag v-if="record.processDefinition">
|
||||
v{{ record.processDefinition.version }}
|
||||
</Tag>
|
||||
<Tag v-else color="warning">未部署</Tag>
|
||||
<Tag
|
||||
v-if="record.processDefinition?.suspensionState === 2"
|
||||
color="warning"
|
||||
class="ml-[10px]"
|
||||
>
|
||||
已停用
|
||||
</Tag>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 操作列 -->
|
||||
<template v-else-if="column.key === 'operation'">
|
||||
<div class="flex items-center justify-center">待实现</div>
|
||||
</template>
|
||||
</template>
|
||||
</Table>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.category-draggable-model {
|
||||
// ant-table-tbody 自定义样式
|
||||
:deep(.ant-table-tbody > tr > td) {
|
||||
overflow: hidden;
|
||||
border-bottom: none;
|
||||
}
|
||||
// ant-collapse-header 自定义样式
|
||||
:deep(.ant-collapse-header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 优化表格渲染性能
|
||||
:deep(.ant-table-tbody) {
|
||||
transform: translateZ(0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
// 折叠面板样式
|
||||
:deep(.ant-collapse-content-box) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -728,6 +728,9 @@ importers:
|
|||
'@vueuse/core':
|
||||
specifier: 'catalog:'
|
||||
version: 12.8.2(typescript@5.8.3)
|
||||
'@vueuse/integrations':
|
||||
specifier: 'catalog:'
|
||||
version: 12.8.2(async-validator@4.2.5)(axios@1.8.4)(focus-trap@7.6.4)(jwt-decode@4.0.0)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.8.3)
|
||||
ant-design-vue:
|
||||
specifier: 'catalog:'
|
||||
version: 4.2.6(vue@3.5.13(typescript@5.8.3))
|
||||
|
|
|
|||
Loading…
Reference in New Issue