hotline-admin-wex/src/views/business/order/components/Order-circulation-record.vue

<template>
	<div>
		<el-dialog v-model="state.dialogVisible" draggable title="流转记录" width="80%" append-to-body>
			<div v-loading="state.loading">
				<el-form label-width="90px" ref="ruleFormRef">
					<el-row :gutter="35">
						<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
							<el-form-item label="工单编码"> {{ state.ruleForm.no }} </el-form-item>
						</el-col>
						<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
							<el-form-item label="工单标题"> {{ state.ruleForm.title }} </el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<process-time-line :data="state.traces" defaultExpandAll/>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button class="default-button" @click="state.dialogVisible = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

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

const ProcessTimeLine = defineAsyncComponent(() => import('/@/components/ProcessTimeLine/index.vue'));  // 流程时间轴

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 弹窗显示隐藏
	ruleForm: {}, // 表单数据
	loading: false, // 加载状态
	traces: []  // 流转记录
});
const ruleFormRef = ref<RefType>();
// 打开弹窗
const openDialog = async (val: any) => {
	try {
		state.loading = true;
		const res = await workflowTraces(val.workflowId);
		state.traces = res.result?.traces ?? [];
		state.traces = formatTraces(state.traces);
		state.ruleForm = val;
		state.dialogVisible = 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.dialogVisible = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style lang="scss" scoped></style>