iailab-plat-ui-vue3.git

dengzedong

5 天以前 f9b459a3fefd5fab0ee8e19268adb9d9eadab2a7

提交 \| 用户 \| 时间
820397	1	<template>
H	2	<ContentWrap>
3e359e	3	<div class="flex justify-between pl-20px items-center">
H	4	<h3 class="font-extrabold">流程模型</h3>
	5	<!-- 搜索工作栏 -->
	6	<el-form
	7	v-if="!isCategorySorting"
	8	class="-mb-15px flex mr-10px"
	9	:model="queryParams"
	10	ref="queryFormRef"
	11	:inline="true"
	12	label-width="68px"
	13	@submit.prevent
	14	>
	15	<el-form-item prop="name" class="ml-auto">
	16	<el-input
	17	v-model="queryParams.name"
	18	placeholder="搜索流程"
	19	clearable
	20	@keyup.enter="handleQuery"
	21	class="!w-240px"
	22	>
	23	<template #prefix>
	24	<Icon icon="ep:search" class="mx-10px" />
	25	</template>
	26	</el-input>
	27	</el-form-item>
	28	<!-- 右上角：新建模型、更多操作 -->
	29	<el-form-item>
	30	<el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
	31	<Icon icon="ep:plus" class="mr-5px" /> 新建模型
	32	</el-button>
	33	</el-form-item>
	34	<el-form-item>
	35	<el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
	36	<el-button class="w-30px" plain>
	37	<Icon icon="ep:setting" />
	38	</el-button>
	39	<template #dropdown>
	40	<el-dropdown-menu>
	41	<el-dropdown-item command="handleCategoryAdd">
	42	<Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
	43	新建分类
	44	</el-dropdown-item>
	45	<el-dropdown-item command="handleCategorySort">
	46	<Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
	47	分类排序
	48	</el-dropdown-item>
	49	</el-dropdown-menu>
	50	</template>
	51	</el-dropdown>
	52	</el-form-item>
	53	</el-form>
	54	<div class="mr-20px" v-else>
	55	<el-button @click="handleCategorySortCancel"> 取消 </el-button>
	56	<el-button type="primary" @click="handleCategorySortSubmit"> 保存排序 </el-button>
	57	</div>
	58	</div>
820397	59
3e359e	60	<el-divider />
H	61
	62	<!-- 按照分类，展示其所属的模型列表 -->
	63	<div class="px-15px">
	64	<draggable
	65	:disabled="!isCategorySorting"
	66	v-model="categoryGroup"
	67	item-key="id"
	68	:animation="400"
	69	>
	70	<template #item="{ element }">
	71	<ContentWrap
	72	class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
	73	v-loading="loading"
	74	:body-style="{ padding: 0 }"
	75	:key="element.id"
820397	76	>
3e359e	77	<CategoryDraggableModel
H	78	:isCategorySorting="isCategorySorting"
	79	:categoryInfo="element"
	80	@success="getList"
820397	81	/>
3e359e	82	</ContentWrap>
820397	83	</template>
3e359e	84	</draggable>
H	85	</div>
820397	86	</ContentWrap>
H	87
	88	<!-- 表单弹窗：添加/修改流程 -->
	89	<ModelForm ref="formRef" @success="getList" />
3e359e	90	<!-- 表单弹窗：添加分类 -->
H	91	<CategoryForm ref="categoryFormRef" @success="getList" />
820397	92	<!-- 弹窗：表单详情 -->
H	93	<Dialog title="表单详情" v-model="formDetailVisible" width="800">
	94	<form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
	95	</Dialog>
	96	</template>
	97
	98	<script lang="ts" setup>
3e359e	99	import draggable from 'vuedraggable'
820397	100	import { CategoryApi } from '@/api/bpm/category'
3e359e	101	import * as ModelApi from '@/api/bpm/model'
H	102	import ModelForm from './ModelForm.vue'
	103	import CategoryForm from '../category/CategoryForm.vue'
	104	import { cloneDeep } from 'lodash-es'
	105	import CategoryDraggableModel from './CategoryDraggableModel.vue'
820397	106
H	107	defineOptions({ name: 'BpmModel' })
	108
	109	const message = useMessage() // 消息弹窗
	110	const loading = ref(true) // 列表的加载中
3e359e	111	const isCategorySorting = ref(false) // 是否 category 正处于排序状态
820397	112	const queryParams = reactive({
3e359e	113	name: undefined
820397	114	})
H	115	const queryFormRef = ref() // 搜索的表单
3e359e	116	const categoryGroup: any = ref([]) // 按照 category 分组的数据
H	117	const originalData: any = ref([]) // 原始数据
820397	118
H	119	/** 搜索按钮操作 */
	120	const handleQuery = () => {
	121	getList()
	122	}
	123
	124	/** 添加/修改操作 */
	125	const formRef = ref()
	126	const openForm = (type: string, id?: number) => {
	127	formRef.value.open(type, id)
	128	}
	129
	130	/** 流程表单的详情按钮操作 */
	131	const formDetailVisible = ref(false)
	132	const formDetailPreview = ref({
	133	rule: [],
	134	option: {}
	135	})
3e359e	136
H	137	/** 右上角设置按钮 */
	138	const handleCommand = (command: string) => {
	139	switch (command) {
	140	case 'handleCategoryAdd':
	141	handleCategoryAdd()
	142	break
	143	case 'handleCategorySort':
	144	handleCategorySort()
	145	break
	146	default:
	147	break
820397	148	}
H	149	}
	150
3e359e	151	/** 新建分类 */
H	152	const categoryFormRef = ref()
	153	const handleCategoryAdd = () => {
	154	categoryFormRef.value.open('create')
	155	}
	156
	157	/** 分类排序的提交 */
	158	const handleCategorySort = () => {
	159	// 保存初始数据
	160	originalData.value = cloneDeep(categoryGroup.value)
	161	isCategorySorting.value = true
	162	}
	163
	164	/** 分类排序的取消 */
	165	const handleCategorySortCancel = () => {
	166	// 恢复初始数据
	167	categoryGroup.value = cloneDeep(originalData.value)
	168	isCategorySorting.value = false
	169	}
	170
	171	/** 分类排序的保存 */
	172	const handleCategorySortSubmit = async () => {
	173	// 保存排序
	174	const ids = categoryGroup.value.map((item: any) => item.id)
	175	await CategoryApi.updateCategorySortBatch(ids)
	176	// 刷新列表
	177	isCategorySorting.value = false
	178	message.success('排序分类成功')
	179	await getList()
	180	}
	181
	182	/** 加载数据 */
	183	const getList = async () => {
	184	loading.value = true
	185	try {
	186	// 查询模型 + 分裂的列表
	187	const modelList = await ModelApi.getModelList(queryParams.name)
	188	const categoryList = await CategoryApi.getCategorySimpleList()
	189	// 按照 category 聚合
	190	// 注意：必须一次性赋值给 categoryGroup，否则每次操作后，列表会重新渲染，滚动条的位置会偏离！！！
	191	categoryGroup.value = categoryList.map((category: any) => ({
	192	...category,
	193	modelList: modelList.filter((model: any) => model.categoryName == category.name)
	194	}))
	195	} finally {
	196	loading.value = false
	197	}
820397	198	}
H	199
	200	/ 初始化 /
3e359e	201	onMounted(() => {
H	202	getList()
820397	203	})
H	204	</script>
3e359e	205
H	206	<style lang="scss" scoped>
	207	:deep() {
	208	.el-table--fit .el-table__inner-wrapper:before {
	209	height: 0;
	210	}
	211	.el-card {
	212	border-radius: 8px;
	213	}
	214	.el-form--inline .el-form-item {
	215	margin-right: 10px;
	216	}
	217	.el-divider--horizontal {
	218	margin-top: 6px;
	219	}
	220	}
	221	</style>