hotline-web/src/components/ProcessDetail/index.vue

<!--流程的流转记录-->
<template>
	<div class="tels-restApply-precess-record">
		<el-dialog :title="state.dialogTitle" v-model="state.dialogVisible" width="90%" draggable destroy-on-close append-to-body>
			<slot name="header"></slot>
			<slot>
				<vxe-table
					border
					:scrollY="{ enabled: true, gt: 100 }"
					:column-config="{
						resizable: true,
					}"
					showOverflow
					:loading="gridOptions.loading"
					:data="gridOptions.data"
					:row-config="{
						isHover: true,
						height: 30,
						useKey: true,
					}"
					:expand-config="{
						padding: true,
						trigger: 'row',
					}"
					max-height="600px"
					align="center"
				>
					<vxe-column type="seq" width="50"></vxe-column>
					<vxe-column type="expand" width="50">
						<template #content="{ row }">
							<!--流程节点-->
							<template v-if="row.traceStyle === 0">
								<div class="mb10 formatted-text">
									<el-text tag="p" class="font-bold">{{ row.handleModeTypeText }}：</el-text>{{ row.opinion }}
								</div>
								<div class="mb10 formatted-text" v-if="row.remark"><el-text tag="p" class="font-bold">备注信息：</el-text>{{ row.remark }}</div>
								<template v-if="row.files.length">
									<annex-list name="附件" readonly businessId="" classify="查看附件" v-model="row.files" />
								</template>
							</template>
							<!--发布-->
							<template v-if="row.traceStyle === 1">
								<div class="mb5"><el-text tag="b">发布状态：</el-text>：{{ row.handleModeText }}</div>
								<div class="mb10 formatted-text"><el-text tag="p" class="font-bold">办理意见：</el-text>{{ row.arrangeOpinion }}</div>
							</template>
							<!--回访-->
							<template v-if="row.traceStyle === 2">
								<div class="mb5 formatted-text" v-if="row.voiceEvaluateText"><el-text tag="b">语音评价：</el-text>{{ row.voiceEvaluateText }}</div>
								<div class="mb5 formatted-text" v-if="row.seatEvaluateText"><el-text tag="b">话务员评价：</el-text>{{ row.seatEvaluateText }}</div>
								<div class="mb5 formatted-text" v-if="row.visitContent"><el-text tag="b">话务员回访内容：</el-text>{{ row.visitContent }}</div>
								<template v-if="row.orderFlowVisitDetails && row.orderFlowVisitDetails.length">
									<div class="mt10" v-for="(item, index) in row.orderFlowVisitDetails" :key="index">
										<el-row :gutter="10">
											<el-col>
												<el-text tag="p" type="primary" class="font-bold mb5" size="large">{{ item.visitOrgName }}</el-text>
											</el-col>
											<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
												<div class="mb5"><el-text tag="b">部门办件结果：</el-text>{{ item.orgProcessingResults }}</div>
											</el-col>
											<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="item.orgNoSatisfiedReason && item.orgNoSatisfiedReason.length">
												<div class="mb5">
													<el-text tag="b">不满意原因：</el-text>{{ item.orgNoSatisfiedReason.map((item: any) => item).join(',') }}
												</div>
											</el-col>
											<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="item.orgHandledAttitude">
												<div class="mb5"><el-text tag="b">部门办件态度：</el-text>{{ item.orgHandledAttitude }}</div>
											</el-col>
											<el-col>
												<div class="mb5 formatted-text"><el-text tag="p" class="font-bold">部门回访内容：</el-text>{{ item.visitContent }}</div>
											</el-col>
										</el-row>
									</div>
								</template>
							</template>
							<!--解释-->
							<template v-if="row.traceStyle === 9">
								<div class="mb10 formatted-text"><el-text tag="p" class="font-bold">办理意见：</el-text>{{ row.opinion }}</div>
								<div class="mb10 formatted-text" v-if="row.remark"><el-text tag="p" class="font-bold">备注信息：</el-text>{{ row.remark }}</div>
								<template v-if="row.files.length">
									<annex-list name="附件" readonly businessId="" classify="查看附件" v-model="row.files" />
								</template>
							</template>
						</template>
					</vxe-column>
					<vxe-column field="creationTime" title="建立时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="name" title="当前节点"></vxe-column>
					<vxe-column field="assignerName" title="交办人"></vxe-column>
					<vxe-column field="assignOrgName" title="交办部门"></vxe-column>
					<vxe-column field="acceptorName" title="接办人"></vxe-column>
					<vxe-column field="acceptorOrgName" title="接办部门"></vxe-column>
					<vxe-column field="handlerName" title="办理人"></vxe-column>
					<vxe-column field="acceptTime" title="签收时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.acceptTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="handleTime" title="办理时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.handleTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="stepExpiredTime" title="期满时间" width="160">
						<template #default="{ row }">
							{{ formatDate(row.stepExpiredTime, 'YYYY-mm-dd HH:MM:SS') }}
						</template>
					</vxe-column>
					<vxe-column field="expiredStatusText" title="超期状态"></vxe-column>
					<vxe-column field="handleModeText" title="流转状态">
						<template #default="{ row }">
							<el-text :type="row.handleMode !== 0 ? 'danger' : ''">{{ row.handleModeText }}</el-text>
						</template>
					</vxe-column>
					<vxe-column title="是否会签" width="90">
						<template #default="{ row }">
							<template v-if="row.traces && row.traces.length">
								<el-button link type="primary" @click.stop="onCountersign(row)">查看会签</el-button>
							</template>
							<span v-else></span>
						</template>
					</vxe-column>
				</vxe-table>
				<!--				<vxe-grid v-bind="gridOptions">
					<template #expand_content="{ row }">
						&lt;!&ndash;流程节点&ndash;&gt;
						<template v-if="row.traceStyle === 0">
							<div class="mb10 formatted-text">
								<el-text tag="p" class="font-bold">{{ row.handleModeTypeText }}：</el-text>{{ row.opinion }}
							</div>
							<div class="mb10 formatted-text" v-if="row.remark"><el-text tag="p" class="font-bold">备注信息：</el-text>{{ row.remark }}</div>
							<template v-if="row.files.length">
								<annex-list name="附件" readonly businessId="" classify="查看附件" v-model="row.files" />
							</template>
						</template>
						&lt;!&ndash;发布&ndash;&gt;
						<template v-if="row.traceStyle === 1">
							<div class="mb5"><el-text tag="b">发布状态：</el-text>：{{ row.handleModeText }}</div>
							<div class="mb10 formatted-text"><el-text tag="p" class="font-bold">办理意见：</el-text>{{ row.arrangeOpinion }}</div>
						</template>
						&lt;!&ndash;回访&ndash;&gt;
						<template v-if="row.traceStyle === 2">
							<div class="mb5 formatted-text" v-if="row.voiceEvaluateText"><el-text tag="b">语音评价：</el-text>{{ row.voiceEvaluateText }}</div>
							<div class="mb5 formatted-text" v-if="row.seatEvaluateText"><el-text tag="b">话务员评价：</el-text>{{ row.seatEvaluateText }}</div>
							<div class="mb5 formatted-text" v-if="row.visitContent"><el-text tag="b">话务员回访内容：</el-text>{{ row.visitContent }}</div>
							<template v-if="row.orderFlowVisitDetails && row.orderFlowVisitDetails.length">
								<div class="mt10" v-for="(item, index) in row.orderFlowVisitDetails" :key="index">
									<el-row :gutter="10">
										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
											<div class="mb5"><el-text tag="b">部门办件结果：</el-text>{{ item.orgProcessingResults }}</div>
										</el-col>
										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="item.orgNoSatisfiedReason">
											<div class="mb5"><el-text tag="b">不满意原因：</el-text>{{ item.orgNoSatisfiedReason }}</div>
										</el-col>
										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="item.orgHandledAttitude">
											<div class="mb5"><el-text tag="b">部门办件态度：</el-text>{{ item.orgHandledAttitude }}</div>
										</el-col>
										<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
											<div class="mb5"><el-text tag="b">部门回访内容：</el-text>{{ item.visitContent }}</div>
										</el-col>
									</el-row>
								</div>
							</template>
						</template>
						&lt;!&ndash;结束&ndash;&gt;
						<template v-if="row.traceStyle === 9">
							<div class="mb10 formatted-text"><el-text tag="p" class="font-bold">办理意见：</el-text>{{ row.opinion }}</div>
							<div class="mb10 formatted-text" v-if="row.remark"><el-text tag="p" class="font-bold">备注信息：</el-text>{{ row.remark }}</div>
							<template v-if="row.files.length">
								<annex-list name="附件" readonly businessId="" classify="查看附件" v-model="row.files" />
							</template>
						</template>
					</template>
					<template #action="{ row }">
						<template v-if="row.traces && row.traces.length">
							<el-button link type="primary" @click="onCountersign(row)">查看会签</el-button>
						</template>
						<span v-else></span>
					</template>
					<template #handleModeText="{ row }">
						<el-text :type="row.handleMode !== 0 ? 'danger' : ''">{{ row.handleModeText }}</el-text>
					</template>
				</vxe-grid>-->
			</slot>
			<slot name="footer"></slot>
			<template #footer>
				<el-button @click="closeDialog" class="default-button">关闭</el-button>
			</template>
		</el-dialog>
		<el-dialog title="查看会签" v-model="countersignDialog" append-to-body draggable destroy-on-close>
			<el-form class="show-info-form">
				<el-row class="w100">
					<!--					<p class="border-title">发起会签信息</p>
					<el-row class="pd15 w100">
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="发起人：">{{ currentRow.createUserName }}</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="发起部门：">{{ currentRow.createUserName }}</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="发起时间：">{{ currentRow.createUserName }}</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="会签状态：">{{ currentRow.createUserName }}</el-form-item>
						</el-col>
						<el-col>
							<el-form-item label="发起意见：">{{ currentRow.createUserName }}</el-form-item>
						</el-col>
					</el-row>
					20241128000027
					<el-divider />-->
					<el-col>
						<p class="border-title mt10 mb20">会签部门信息</p>
					</el-col>
					<countersign-data :data="state.countersignData" />
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="closeDialogCountersign" class="default-button">关闭</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="auditRecord">
import { reactive, defineAsyncComponent, ref } from 'vue';
import { workflowDetail } from '@/api/system/workflow';
import { transformFile } from '@/utils/tools';
import { formatDate } from '@/utils/formatTime';

const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
const CountersignData = defineAsyncComponent(() => import('@/components/ProcessDetail/Countersign-data.vue'));

// 定义变量内容
const state = reactive<any>({
	dialogVisible: false,
	traces: [],
	loading: false,
	dialogTitle: '流程明细',
	countersignData: [], //会签信息
});

const currentRow = ref();
const gridOptions = reactive<any>({
	border: true,
	loading: false,
	showOverflow: true,
	columnConfig: {
		resizable: true,
	},
	scrollY: {
		enabled: true,
		gt: 100,
	},
	rowConfig: { isHover: true, height: 30, useKey: true },
	expandConfig: { padding: true, trigger: true },
	align: 'center',
	maxHeight: '500px',
	columns: [
		{ type: 'seq', width: 50 },
		{ type: 'expand', width: 50, slots: { content: 'expand_content' } },
		{ field: 'creationTime', title: '建立时间', width: 160, formatter: 'formatDate' },
		{ field: 'name', title: '当前节点', width: 110 },
		{ field: 'assignerName', title: '交办人', width: 120 },
		{ field: 'assignOrgName', title: '交办部门', width: 140 },
		{ field: 'acceptorName', title: '接办人', width: 120 },
		{ field: 'acceptorOrgName', title: '接办部门', width: 140 },
		{ field: 'handlerName', title: '办理人', width: 120 },
		{ field: 'acceptTime', title: '签收时间', width: 160, formatter: 'formatDate' },
		{ field: 'handleTime', title: '办理时间', width: 160, formatter: 'formatDate' },
		{ field: 'stepExpiredTime', title: '期满时间', width: 160, formatter: 'formatDate' },
		{ field: 'expiredStatusText', title: '超期状态', width: 100 },
		{ field: 'handleModeText', title: '流转状态', width: 100, slots: { default: 'handleModeText' } },
		{ title: '是否会签', width: 90, fixed: 'right', slots: { default: 'action' } },
	],
	data: [],
});
// 打开弹窗
const openDialog = async (row: any) => {
	gridOptions.loading = true;
	state.dialogVisible = true;
	await getTable(row);
	currentRow.value = row;
};
const getTable = async (row: any) => {
	try {
		// 查询审核记录
		const { result } = await workflowDetail(row.workflowId);
		state.traces = result ?? [];
		state.traces = formatTraces(state.traces);
		state.dialogTitle = row.dialogTitle ?? '流程明细';
		gridOptions.data = formatTraces(state.traces);
		gridOptions.loading = false;
	} catch (error) {
		console.log(error, '错误');
		gridOptions.loading = false;
	}
};
const formatTraces = (val: any) => {
	if (!val || !val.length) return [];
	val.forEach((item: any) => {
		item.files = transformFile(item.files);
		if (item.traceStyle === 1) {
			// 发布需要特殊处理
			item.handleModeText = item.publishState ? '公开' : '不公开';
		}
		if (item.traceStyle === 2) {
			// 回访需要特殊处理
			item.handleModeText = item.orderFlowVisitDetails
				.map((item: any) => {
					return item.orgProcessingResults;
				})
				.join(',');
		}
		// 需要给意见做一个映射关系 正常就是办理意见 其他状态就是其他意见 比如重办就是重办意见
		switch (item.handleMode) {
			case 0:
				item.handleModeTypeText = '办理意见';
				break;
			case 100:
				item.handleModeTypeText = '退回意见';
				break;
			case 200:
				item.handleModeTypeText = '特提意见';
				break;
			case 201:
				item.handleModeTypeText = '重办意见';
				break;
			default:
				break;
		}
		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;
};
// 会签弹窗
const countersignDialog = ref(false);
// 查看会签
const onCountersign = (row: any) => {
	state.countersignData = row.traces;
	countersignDialog.value = true;
};
// 关闭会签弹窗
const closeDialogCountersign = () => {
	state.countersignData = [];
	countersignDialog.value = false;
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>