hotline-admin/src/views/tels/restApply/components/Process-record.vue

<template>
	<div class="tels-restApply-precess-record">
		<el-dialog :title="`审核记录 （${state.title}）`" v-model="state.isShowDialog" width="80%" draggable>
			<div v-loading="state.loading">
				<process-time-line :data="state.traces" defaultExpandAll />
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.isShowDialog = false" class="default-button">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="restApplyProcessRecord">
import { reactive, defineAsyncComponent } from 'vue';
import { workflowTraces } from '/@/api/system/workflow';

// 引入组件
const ProcessTimeLine = defineAsyncComponent(() => import('/src/components/ProcessTimeLine/index.vue'));

// 定义变量内容
const state = reactive<any>({
	isShowDialog: false,
	traces: [],
	loading: false,
	title: '',
});
// 打开弹窗
const openDialog = async (row: any) => {
	try {
		state.loading = true;
		// 查询审核记录
		const res = await workflowTraces(row.workflowId);
		state.traces = res.result?.traces ?? [];
		state.traces = formatTraces(state.traces);
		state.title = row.title ?? '';
		state.isShowDialog = true;
		state.loading = false;
	} catch (error) {
		state.loading = false;
	}
};
const formatTraces = (val: any) => {
	if (!val || !val.length) return [];
	val.forEach((item: any) => {
		switch (item.expiredStatus) {
			case 0:
				item.type = 'success';
				break;
			case 1:
				item.type = 'primary';
				break;
			case 2:
				item.type = 'danger';
				break;

			default:
				break;
		}
		if (item.traces?.length) {
			formatTraces(item.traces);
		}
	});
	return val;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>