iailab-plat-ui-vue3.git

dengzedong

5 天以前 f9b459a3fefd5fab0ee8e19268adb9d9eadab2a7

提交 \| 用户 \| 时间
3e359e	1	<template>
H	2	<div class="flex items-center h-50px">
	3	<!-- 头部：分类名 -->
	4	<div class="flex items-center">
	5	<el-tooltip content="拖动排序" v-if="isCategorySorting">
	6	<Icon
	7	:size="22"
	8	icon="ic:round-drag-indicator"
	9	class="ml-10px category-drag-icon cursor-move text-#8a909c"
	10	/>
	11	</el-tooltip>
	12	<h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
	13	<div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length \|\| 0 }}) </div>
	14	</div>
	15	<!-- 头部：操作 -->
	16	<div class="flex-1 flex" v-if="!isCategorySorting">
	17	<div
	18	v-if="categoryInfo.modelList.length > 0"
	19	class="ml-20px flex items-center"
	20	:class="[
	21	'transition-transform duration-300 cursor-pointer',
	22	isExpand ? 'rotate-180' : 'rotate-0'
	23	]"
	24	@click="isExpand = !isExpand"
	25	>
	26	<Icon icon="ep:arrow-down-bold" color="#999" />
	27	</div>
	28	<div class="ml-auto flex items-center" :class="isModelSorting ? 'mr-15px' : 'mr-45px'">
	29	<template v-if="!isModelSorting">
	30	<el-button
	31	v-if="categoryInfo.modelList.length > 0"
	32	link
	33	type="info"
	34	class="mr-20px"
	35	@click.stop="handleModelSort"
	36	>
	37	<Icon icon="fa:sort-amount-desc" class="mr-5px" />
	38	排序
	39	</el-button>
	40	<el-button v-else link type="info" class="mr-20px" @click.stop="openModelForm('create')">
	41	<Icon icon="fa:plus" class="mr-5px" />
	42	新建
	43	</el-button>
	44	<el-dropdown
	45	@command="(command) => handleCategoryCommand(command, categoryInfo)"
	46	placement="bottom"
	47	>
	48	<el-button link type="info">
	49	<Icon icon="ep:setting" class="mr-5px" />
	50	分类
	51	</el-button>
	52	<template #dropdown>
	53	<el-dropdown-menu>
	54	<el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
	55	<el-dropdown-item command="handleDeleteCategory"> 删除该类 </el-dropdown-item>
	56	</el-dropdown-menu>
	57	</template>
	58	</el-dropdown>
	59	</template>
	60	<template v-else>
	61	<el-button @click.stop="handleModelSortCancel"> 取消 </el-button>
	62	<el-button type="primary" @click.stop="handleModelSortSubmit"> 保存排序 </el-button>
	63	</template>
	64	</div>
	65	</div>
	66	</div>
	67	<!-- 模型列表 -->
	68	<el-collapse-transition>
	69	<div v-show="isExpand">
	70	<el-table
	71	:class="categoryInfo.name"
	72	ref="tableRef"
	73	:header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
	74	:cell-style="{ paddingLeft: '10px' }"
	75	:row-style="{ height: '68px' }"
	76	:data="modelList"
	77	row-key="id"
	78	>
	79	<el-table-column label="流程名" prop="name" min-width="150">
	80	<template #default="scope">
	81	<div class="flex items-center">
	82	<el-tooltip content="拖动排序" v-if="isModelSorting">
	83	<Icon
	84	icon="ic:round-drag-indicator"
	85	class="drag-icon cursor-move text-#8a909c mr-10px"
	86	/>
	87	</el-tooltip>
	88	<el-image :src="scope.row.icon" class="h-38px w-38px mr-10px rounded" />
	89	{{ scope.row.name }}
	90	</div>
	91	</template>
	92	</el-table-column>
	93	<el-table-column label="可见范围" prop="startUserIds" min-width="100">
	94	<template #default="scope">
	95	<el-text v-if="!scope.row.startUsers \|\| scope.row.startUsers.length === 0">
	96	全部可见
	97	</el-text>
	98	<el-text v-else-if="scope.row.startUsers.length == 1">
	99	{{ scope.row.startUsers[0].nickname }}
	100	</el-text>
	101	<el-text v-else>
	102	<el-tooltip
	103	class="box-item"
	104	effect="dark"
	105	placement="top"
	106	:content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
	107	>
	108	{{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
	109	</el-tooltip>
	110	</el-text>
	111	</template>
	112	</el-table-column>
	113	<el-table-column label="表单信息" prop="formType" min-width="200">
	114	<template #default="scope">
	115	<el-button
	116	v-if="scope.row.formType === BpmModelFormType.NORMAL"
	117	type="primary"
	118	link
	119	@click="handleFormDetail(scope.row)"
	120	>
	121	<span>{{ scope.row.formName }}</span>
	122	</el-button>
	123	<el-button
	124	v-else-if="scope.row.formType === BpmModelFormType.CUSTOM"
	125	type="primary"
	126	link
	127	@click="handleFormDetail(scope.row)"
	128	>
	129	<span>{{ scope.row.formCustomCreatePath }}</span>
	130	</el-button>
	131	<label v-else>暂无表单</label>
	132	</template>
	133	</el-table-column>
	134	<el-table-column label="最后发布" prop="deploymentTime" min-width="250">
	135	<template #default="scope">
	136	<div class="flex items-center">
	137	<span v-if="scope.row.processDefinition" class="w-150px">
	138	{{ formatDate(scope.row.processDefinition.deploymentTime) }}
	139	</span>
	140	<el-tag v-if="scope.row.processDefinition">
	141	v{{ scope.row.processDefinition.version }}
	142	</el-tag>
	143	<el-tag v-else type="warning">未部署</el-tag>
	144	<el-tag
	145	v-if="scope.row.processDefinition?.suspensionState === 2"
	146	type="warning"
	147	class="ml-10px"
	148	>
	149	已停用
	150	</el-tag>
	151	</div>
	152	</template>
	153	</el-table-column>
	154	<el-table-column label="操作" width="200" fixed="right">
	155	<template #default="scope">
	156	<el-button
	157	link
	158	type="primary"
	159	@click="openModelForm('update', scope.row.id)"
	160	v-hasPermi="['bpm:model:update']"
	161	:disabled="!isManagerUser(scope.row)"
	162	>
	163	修改
	164	</el-button>
	165	<el-button
	166	link
	167	class="!ml-5px"
	168	type="primary"
	169	@click="handleDesign(scope.row)"
	170	v-hasPermi="['bpm:model:update']"
	171	:disabled="!isManagerUser(scope.row)"
	172	>
	173	设计
	174	</el-button>
	175	<el-button
	176	link
	177	class="!ml-5px"
	178	type="primary"
	179	@click="handleDeploy(scope.row)"
	180	v-hasPermi="['bpm:model:deploy']"
	181	:disabled="!isManagerUser(scope.row)"
	182	>
	183	发布
	184	</el-button>
	185	<el-dropdown
	186	class="!align-middle ml-5px"
	187	@command="(command) => handleModelCommand(command, scope.row)"
	188	v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
	189	>
	190	<el-button type="primary" link>更多</el-button>
	191	<template #dropdown>
	192	<el-dropdown-menu>
	193	<el-dropdown-item
	194	command="handleDefinitionList"
	195	v-if="checkPermi(['bpm:process-definition:query'])"
	196	>
	197	历史
	198	</el-dropdown-item>
	199	<el-dropdown-item
	200	command="handleChangeState"
	201	v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
	202	:disabled="!isManagerUser(scope.row)"
	203	>
	204	{{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
	205	</el-dropdown-item>
	206	<el-dropdown-item
	207	type="danger"
	208	command="handleDelete"
	209	v-if="checkPermi(['bpm:model:delete'])"
	210	:disabled="!isManagerUser(scope.row)"
	211	>
	212	删除
	213	</el-dropdown-item>
	214	</el-dropdown-menu>
	215	</template>
	216	</el-dropdown>
	217	</template>
	218	</el-table-column>
	219	</el-table>
	220	</div>
	221	</el-collapse-transition>
	222
	223	<!-- 弹窗：重命名分类 -->
	224	<Dialog :fullscreen="false" class="rename-dialog" v-model="renameCategoryVisible" width="400">
	225	<template #title>
	226	<div class="pl-10px font-bold text-18px"> 重命名分类 </div>
	227	</template>
	228	<div class="px-30px">
	229	<el-input v-model="renameCategoryForm.name" />
	230	</div>
	231	<template #footer>
	232	<div class="pr-25px pb-25px">
	233	<el-button @click="renameCategoryVisible = false">取消</el-button>
	234	<el-button type="primary" @click="handleRenameConfirm">确定</el-button>
	235	</div>
	236	</template>
	237	</Dialog>
	238
	239	<!-- 表单弹窗：添加流程模型 -->
	240	<ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
	241	</template>
	242
	243	<script lang="ts" setup>
	244	import ModelForm from './ModelForm.vue'
	245	import { CategoryApi, CategoryVO } from '@/api/bpm/category'
	246	import Sortable from 'sortablejs'
	247	import { propTypes } from '@/utils/propTypes'
	248	import { formatDate } from '@/utils/formatTime'
	249	import * as ModelApi from '@/api/bpm/model'
	250	import * as FormApi from '@/api/bpm/form'
	251	import { setConfAndFields2 } from '@/utils/formCreate'
	252	import { BpmModelFormType, BpmModelType } from '@/utils/constants'
	253	import { checkPermi } from '@/utils/permission'
	254	import { useUserStoreWithOut } from '@/store/modules/user'
	255	import { useAppStore } from '@/store/modules/app'
	256	import { cloneDeep } from 'lodash-es'
	257
	258	defineOptions({ name: 'BpmModel' })
	259
	260	const props = defineProps({
	261	categoryInfo: propTypes.object.def([]), // 分类后的数据
	262	isCategorySorting: propTypes.bool.def(false) // 是否分类在排序
	263	})
	264	const emit = defineEmits(['success'])
	265	const message = useMessage() // 消息弹窗
	266	const { t } = useI18n() // 国际化
	267	const { push } = useRouter() // 路由
	268	const userStore = useUserStoreWithOut() // 用户信息缓存
	269	const isDark = computed(() => useAppStore().getIsDark) // 是否黑暗模式
	270
	271	const isModelSorting = ref(false) // 是否正处于排序状态
	272	const originalData: any = ref([]) // 原始数据
	273	const modelList: any = ref([]) // 模型列表
	274	const isExpand = ref(false) // 是否处于展开状态
	275
	276	/** '更多'操作按钮 */
	277	const handleModelCommand = (command: string, row: any) => {
	278	switch (command) {
	279	case 'handleDefinitionList':
	280	handleDefinitionList(row)
	281	break
	282	case 'handleDelete':
	283	handleDelete(row)
	284	break
	285	case 'handleChangeState':
	286	handleChangeState(row)
	287	break
	288	default:
	289	break
	290	}
	291	}
	292
	293	/** '分类'操作按钮 */
	294	const handleCategoryCommand = async (command: string, row: any) => {
	295	switch (command) {
	296	case 'handleRename':
	297	renameCategoryForm.value = await CategoryApi.getCategory(row.id)
	298	renameCategoryVisible.value = true
	299	break
	300	case 'handleDeleteCategory':
	301	await handleDeleteCategory()
	302	break
	303	default:
	304	break
	305	}
	306	}
	307
	308	/** 删除按钮操作 */
	309	const handleDelete = async (row: any) => {
	310	try {
	311	// 删除的二次确认
	312	await message.delConfirm()
	313	// 发起删除
	314	await ModelApi.deleteModel(row.id)
	315	message.success(t('common.delSuccess'))
	316	// 刷新列表
	317	emit('success')
	318	} catch {}
	319	}
	320
	321	/** 更新状态操作 */
	322	const handleChangeState = async (row: any) => {
	323	const state = row.processDefinition.suspensionState
	324	const newState = state === 1 ? 2 : 1
	325	try {
	326	// 修改状态的二次确认
	327	const id = row.id
	328	debugger
	329	const statusState = state === 1 ? '停用' : '启用'
	330	const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
	331	await message.confirm(content)
	332	// 发起修改状态
	333	await ModelApi.updateModelState(id, newState)
	334	message.success(statusState + '成功')
	335	// 刷新列表
	336	emit('success')
	337	} catch {}
	338	}
	339
	340	/** 设计流程 */
	341	const handleDesign = (row: any) => {
	342	if (row.type == BpmModelType.BPMN) {
	343	push({
	344	name: 'BpmModelEditor',
	345	query: {
	346	modelId: row.id
	347	}
	348	})
	349	} else {
	350	push({
	351	name: 'SimpleModelDesign',
	352	query: {
	353	modelId: row.id
	354	}
	355	})
	356	}
	357	}
	358
	359	/** 发布流程 */
	360	const handleDeploy = async (row: any) => {
	361	try {
	362	// 删除的二次确认
	363	await message.confirm('是否部署该流程！！')
	364	// 发起部署
	365	await ModelApi.deployModel(row.id)
	366	message.success(t('部署成功'))
	367	// 刷新列表
	368	emit('success')
	369	} catch {}
	370	}
	371
	372	/** 跳转到指定流程定义列表 */
	373	const handleDefinitionList = (row: any) => {
	374	push({
	375	name: 'BpmProcessDefinition',
	376	query: {
	377	key: row.key
	378	}
	379	})
	380	}
	381
	382	/** 流程表单的详情按钮操作 */
	383	const formDetailVisible = ref(false)
	384	const formDetailPreview = ref({
	385	rule: [],
	386	option: {}
	387	})
	388	const handleFormDetail = async (row: any) => {
	389	if (row.formType == 10) {
	390	// 设置表单
	391	const data = await FormApi.getForm(row.formId)
	392	setConfAndFields2(formDetailPreview, data.conf, data.fields)
	393	// 弹窗打开
	394	formDetailVisible.value = true
	395	} else {
	396	await push({
	397	path: row.formCustomCreatePath
	398	})
	399	}
	400	}
	401
	402	/** 判断是否可以操作 */
	403	const isManagerUser = (row: any) => {
	404	const userId = userStore.getUser.id
	405	return row.managerUserIds && row.managerUserIds.includes(userId)
	406	}
	407
	408	/ 处理模型的排序 /
	409	const handleModelSort = () => {
	410	// 保存初始数据
	411	originalData.value = cloneDeep(props.categoryInfo.modelList)
	412	isModelSorting.value = true
	413	initSort()
	414	}
	415
	416	/** 处理模型的排序提交 */
	417	const handleModelSortSubmit = async () => {
	418	// 保存排序
	419	const ids = modelList.value.map((item: any) => item.id)
	420	await ModelApi.updateModelSortBatch(ids)
	421	// 刷新列表
	422	isModelSorting.value = false
	423	message.success('排序模型成功')
	424	emit('success')
	425	}
	426
	427	/** 处理模型的排序取消 */
	428	const handleModelSortCancel = () => {
	429	// 恢复初始数据
	430	modelList.value = cloneDeep(originalData.value)
	431	isModelSorting.value = false
	432	}
	433
	434	/** 创建拖拽实例 */
	435	const tableRef = ref()
	436	const initSort = () => {
	437	const table = document.querySelector(`.${props.categoryInfo.name} .el-table__body-wrapper tbody`)
	438	Sortable.create(table, {
	439	group: 'shared',
	440	animation: 150,
	441	draggable: '.el-table__row',
	442	handle: '.drag-icon',
	443	// 结束拖动事件
	444	onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
	445	if (oldDraggableIndex !== newDraggableIndex) {
	446	modelList.value.splice(
	447	newDraggableIndex,
	448	0,
	449	modelList.value.splice(oldDraggableIndex, 1)[0]
	450	)
	451	}
	452	}
	453	})
	454	}
	455
	456	/** 更新 modelList 模型列表 */
	457	const updateModeList = () => {
	458	modelList.value = cloneDeep(props.categoryInfo.modelList)
	459	if (props.categoryInfo.modelList.length > 0) {
	460	isExpand.value = true
	461	}
	462	}
	463
	464	/** 重命名弹窗确定 */
	465	const renameCategoryVisible = ref(false)
	466	const renameCategoryForm = ref({
	467	name: ''
	468	})
	469	const handleRenameConfirm = async () => {
	470	if (renameCategoryForm.value?.name.length === 0) {
	471	return message.warning('请输入名称')
	472	}
	473	// 发起修改
	474	await CategoryApi.updateCategory(renameCategoryForm.value as CategoryVO)
	475	message.success('重命名成功')
	476	// 刷新列表
	477	renameCategoryVisible.value = false
	478	emit('success')
	479	}
	480
	481	/** 删除分类 */
	482	const handleDeleteCategory = async () => {
	483	try {
	484	if (props.categoryInfo.modelList.length > 0) {
	485	return message.warning('该分类下仍有流程定义,不允许删除')
	486	}
	487	await message.confirm('确认删除分类吗?')
	488	// 发起删除
	489	await CategoryApi.deleteCategory(props.categoryInfo.id)
	490	message.success(t('common.delSuccess'))
	491	// 刷新列表
	492	emit('success')
	493	} catch {}
	494	}
	495
	496	/** 添加流程模型弹窗 */
	497	const modelFormRef = ref()
	498	const openModelForm = (type: string, id?: number) => {
	499	modelFormRef.value.open(type, id)
	500	}
	501
	502	watch(() => props.categoryInfo.modelList, updateModeList, { immediate: true })
	503	watch(
	504	() => props.isCategorySorting,
	505	(val) => {
	506	if (val) isExpand.value = false
	507	},
	508	{ immediate: true }
	509	)
	510	</script>
	511
	512	<style lang="scss">
	513	.rename-dialog.el-dialog {
	514	padding: 0 !important;
	515
	516	.el-dialog__header {
	517	border-bottom: none;
	518	}
	519
	520	.el-dialog__footer {
	521	border-top: none !important;
	522	}
	523	}
	524	</style>
	525	<style lang="scss" scoped>
	526	:deep() {
	527	.el-table__cell {
	528	overflow: hidden;
	529	border-bottom: none !important;
	530	}
	531	}
	532	</style>