iailab-plat-ui-vue3.git

houzhongjian

2024-09-13 39248bc48bd1c2b66e18337dadd70d50b2bfaae6

提交 \| 用户 \| 时间
820397	1	<template>
H	2
	3	<ContentWrap>
	4	<!-- 搜索工作栏 -->
	5	<el-form
	6	class="-mb-15px"
	7	:model="queryParams"
	8	ref="queryFormRef"
	9	:inline="true"
	10	label-width="68px"
	11	>
	12	<el-form-item label="流程名称" prop="name">
	13	<el-input
	14	v-model="queryParams.name"
	15	placeholder="请输入流程名称"
	16	clearable
	17	@keyup.enter="handleQuery"
	18	class="!w-240px"
	19	/>
	20	</el-form-item>
	21	<el-form-item label="所属流程" prop="processDefinitionId">
	22	<el-input
	23	v-model="queryParams.processDefinitionId"
	24	placeholder="请输入流程定义的编号"
	25	clearable
	26	@keyup.enter="handleQuery"
	27	class="!w-240px"
	28	/>
	29	</el-form-item>
	30	<el-form-item label="流程分类" prop="category">
	31	<el-select
	32	v-model="queryParams.category"
	33	placeholder="请选择流程分类"
	34	clearable
	35	class="!w-240px"
	36	>
	37	<el-option
	38	v-for="category in categoryList"
	39	:key="category.code"
	40	:label="category.name"
	41	:value="category.code"
	42	/>
	43	</el-select>
	44	</el-form-item>
	45	<el-form-item label="流程状态" prop="status">
	46	<el-select
	47	v-model="queryParams.status"
	48	placeholder="请选择流程状态"
	49	clearable
	50	class="!w-240px"
	51	>
	52	<el-option
	53	v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
	54	:key="dict.value"
	55	:label="dict.label"
	56	:value="dict.value"
	57	/>
	58	</el-select>
	59	</el-form-item>
	60	<el-form-item label="发起时间" prop="createTime">
	61	<el-date-picker
	62	v-model="queryParams.createTime"
	63	value-format="YYYY-MM-DD HH:mm:ss"
	64	type="daterange"
	65	start-placeholder="开始日期"
	66	end-placeholder="结束日期"
	67	:default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
	68	class="!w-240px"
	69	/>
	70	</el-form-item>
	71	<el-form-item>
	72	<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
	73	<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
	74	<el-button
	75	type="primary"
	76	plain
	77	v-hasPermi="['bpm:process-instance:query']"
	78	@click="handleCreate(undefined)"
	79	>
	80	<Icon icon="ep:plus" class="mr-5px" /> 发起流程
	81	</el-button>
	82	</el-form-item>
	83	</el-form>
	84	</ContentWrap>
	85
	86	<!-- 列表 -->
	87	<ContentWrap>
	88	<el-table v-loading="loading" :data="list">
	89	<el-table-column label="流程名称" align="center" prop="name" min-width="200px" fixed="left" />
	90	<el-table-column
	91	label="流程分类"
	92	align="center"
	93	prop="categoryName"
	94	min-width="100"
	95	fixed="left"
	96	/>
	97	<el-table-column label="流程状态" prop="status" width="120">
	98	<template #default="scope">
	99	<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
	100	</template>
	101	</el-table-column>
	102	<el-table-column
	103	label="发起时间"
	104	align="center"
	105	prop="startTime"
	106	width="180"
	107	:formatter="dateFormatter"
	108	/>
	109	<el-table-column
	110	label="结束时间"
	111	align="center"
	112	prop="endTime"
	113	width="180"
	114	:formatter="dateFormatter"
	115	/>
	116	<el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
	117	<template #default="scope">
	118	{{ scope.row.durationInMillis > 0 ? formatPast2(scope.row.durationInMillis) : '-' }}
	119	</template>
	120	</el-table-column>
	121	<el-table-column label="当前审批任务" align="center" prop="tasks" min-width="120px">
	122	<template #default="scope">
	123	<el-button type="primary" v-for="task in scope.row.tasks" :key="task.id" link>
	124	<span>{{ task.name }}</span>
	125	</el-button>
	126	</template>
	127	</el-table-column>
	128	<el-table-column label="流程编号" align="center" prop="id" min-width="320px" />
	129	<el-table-column label="操作" align="center" fixed="right" width="180">
	130	<template #default="scope">
	131	<el-button
	132	link
	133	type="primary"
	134	v-hasPermi="['bpm:process-instance:cancel']"
	135	@click="handleDetail(scope.row)"
	136	>
	137	详情
	138	</el-button>
	139	<el-button
	140	link
	141	type="primary"
	142	v-if="scope.row.status === 1"
	143	v-hasPermi="['bpm:process-instance:query']"
	144	@click="handleCancel(scope.row)"
	145	>
	146	取消
	147	</el-button>
	148	<el-button link type="primary" v-else @click="handleCreate(scope.row)">
	149	重新发起
	150	</el-button>
	151	</template>
	152	</el-table-column>
	153	</el-table>
	154	<!-- 分页 -->
	155	<Pagination
	156	:total="total"
	157	v-model:page="queryParams.pageNo"
	158	v-model:limit="queryParams.pageSize"
	159	@pagination="getList"
	160	/>
	161	</ContentWrap>
	162	</template>
	163	<script lang="ts" setup>
	164	import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
	165	import { dateFormatter, formatPast2 } from '@/utils/formatTime'
	166	import { ElMessageBox } from 'element-plus'
	167	import * as ProcessInstanceApi from '@/api/bpm/processInstance'
	168	import { CategoryApi } from '@/api/bpm/category'
	169	import { ProcessInstanceVO } from '@/api/bpm/processInstance'
	170	import * as DefinitionApi from '@/api/bpm/definition'
	171
	172	defineOptions({ name: 'BpmProcessInstanceMy' })
	173
	174	const router = useRouter() // 路由
	175	const message = useMessage() // 消息弹窗
	176	const { t } = useI18n() // 国际化
	177
	178	const loading = ref(true) // 列表的加载中
	179	const total = ref(0) // 列表的总页数
	180	const list = ref([]) // 列表的数据
	181	const queryParams = reactive({
	182	pageNo: 1,
	183	pageSize: 10,
	184	name: '',
	185	processDefinitionId: undefined,
	186	category: undefined,
	187	status: undefined,
	188	createTime: []
	189	})
	190	const queryFormRef = ref() // 搜索的表单
	191	const categoryList = ref([]) // 流程分类列表
	192
	193	/** 查询列表 */
	194	const getList = async () => {
	195	loading.value = true
	196	try {
	197	const data = await ProcessInstanceApi.getProcessInstanceMyPage(queryParams)
	198	list.value = data.list
	199	total.value = data.total
	200	} finally {
	201	loading.value = false
	202	}
	203	}
	204
	205	/** 搜索按钮操作 */
	206	const handleQuery = () => {
	207	queryParams.pageNo = 1
	208	getList()
	209	}
	210
	211	/** 重置按钮操作 */
	212	const resetQuery = () => {
	213	queryFormRef.value.resetFields()
	214	handleQuery()
	215	}
	216
	217	/ 发起流程操作 /
	218	const handleCreate = async (row?: ProcessInstanceVO) => {
	219	// 如果是【业务表单】，不支持重新发起
	220	if (row?.id) {
	221	const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
	222	row.processDefinitionId
	223	)
	224	if (processDefinitionDetail.formType === 20) {
	225	message.error('重新发起流程失败，原因：该流程使用业务表单，不支持重新发起')
	226	return
	227	}
	228	}
	229	// 跳转发起流程界面
	230	await router.push({
	231	name: 'BpmProcessInstanceCreate',
	232	query: { processInstanceId: row?.id }
	233	})
	234	}
	235
	236	/** 查看详情 */
	237	const handleDetail = (row) => {
	238	router.push({
	239	name: 'BpmProcessInstanceDetail',
	240	query: {
	241	id: row.id
	242	}
	243	})
	244	}
	245
	246	/** 取消按钮操作 */
	247	const handleCancel = async (row) => {
	248	// 二次确认
	249	const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
	250	confirmButtonText: t('common.ok'),
	251	cancelButtonText: t('common.cancel'),
	252	inputPattern: /^[\s\S].\S[\s\S]*$/, // 判断非空，且非空格
	253	inputErrorMessage: '取消原因不能为空'
	254	})
	255	// 发起取消
	256	await ProcessInstanceApi.cancelProcessInstanceByStartUser(row.id, value)
	257	message.success('取消成功')
	258	// 刷新列表
	259	await getList()
	260	}
	261
	262	/ 激活时 /
	263	onActivated(() => {
	264	getList()
	265	})
	266
	267	/ 初始化 /
	268	onMounted(async () => {
	269	await getList()
	270	categoryList.value = await CategoryApi.getCategorySimpleList()
	271	})
	272	</script>