hotline-web/src/views/quality/index/index.vue

<template>
	<div class="quality-container layout-pd">
		<el-card shadow="never">
			<el-tabs v-model="state.queryParams.Source" @tab-change="handleQuery">
				<el-tab-pane :label="item.value" :name="item.key" v-for="item in qualitySourceOptions" :key="item.key"></el-tab-pane>
			</el-tabs>
			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
				<el-form-item label="关键词" prop="Keyword">
					<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="handleQuery" class="keyword-input" />
				</el-form-item>
				<el-form-item label="创建时间" prop="exTime">
					<el-date-picker
						v-model="state.queryParams.exTime"
						type="datetimerange"
						unlink-panels
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:shortcuts="shortcuts"
						@change="timeStartChangeCr"
						value-format="YYYY-MM-DD[T]HH:mm:ss"
            :default-time="defaultTimeStartEnd"
					/>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
				</el-form-item>
			</el-form>
			<ProTable
				ref="proTableRef"
				:columns="columns"
				:data="state.tableData"
				@updateTable="queryList"
				:loading="state.loading"
				:total="state.total"
				v-model:page-index="state.queryParams.PageIndex"
				v-model:page-size="state.queryParams.PageSize"
				:key="Math.random()"
			>
				<template #title="{ row }">
					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
				</template>
				<!-- 表格操作 -->
				<template #operation="{ row }">
					<el-button link type="primary" @click="onQualityInspection(row)" v-auth="'quality:inspection'" title="质检"> 质检 </el-button>
					<order-detail :order="row.order" />
				</template>
			</ProTable>
		</el-card>
		<!-- 质检 -->
		<quality-inspection ref="qualityInspectionRef" @updateList="queryList" />
	</div>
</template>

<script lang="tsx" setup name="quality">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { FormInstance } from 'element-plus';
import { formatDate } from '@/utils/formatTime';
import { qualityBaseData, qualityList } from '@/api/quality';
import { defaultTimeStartEnd, shortcuts } from "@/utils/constants";

// 引入组件
const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
const QualityInspection = defineAsyncComponent(() => import('@/views/quality/index/components/Quality-inspection.vue')); // 质检

const proTableRef = ref<RefType>(); // 表格ref
// 表格配置项
const columns = ref<any[]>([
	{ prop: 'order.no', label: '工单编码', width: 150 },
	{ prop: 'aiQuality', label: '质检方式', width: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
	{ prop: 'order.sourceChannel', label: '来源渠道' },
	{ prop: 'order.startTime', label: '受理时间', width: 170, render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') },
	{ prop: 'order.acceptType', label: '受理类型' },
	{ prop: 'order.statusText', label: '工单状态' },
	{ prop: 'order.title', label: '工单标题', width: 300 },
	{ prop: 'order.hotspotName', label: '热点分类' },
	{	prop: 'order.acceptorName',label: '受理人',width: 120},
	{ prop: 'order.fromPhone', label: '来电电话', width: 120 },
	{label: '操作',width: 140,fixed: 'right',align: 'center',prop: 'operation'}
]);
// 定义变量内容
const state = reactive({
	loading: false, // 加载状态
	queryParams: {
		// 查询参数
		PageIndex: 1,
		PageSize: 10,
		Source: 1, // 受理待质检
		CreationTimeStart: null, // 创建时间 开始
		CreationTimeEnd: null, // 创建时间 结束
		exTime: [], // 办理期限
		State: 0, // 待质检
		Keyword: null,
	},
	total: 0, // 总条数
	tableData: [], // 表格数据
});
const ruleFormRef = ref<RefType>(null); // 表单ref
const qualitySourceOptions = ref<EmptyArrayType>([]); // 违禁词分类
const qualityStateOptions = ref<EmptyArrayType>([]); // 违禁词属性
const getBaseData = async () => {
	try {
		const res = await qualityBaseData();
		qualitySourceOptions.value = res.result?.qualitySource ?? [];
		qualityStateOptions.value = res.result?.qualityState ?? [];
	} catch (error) {
		console.log(error);
	}
};
const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
	if (val) {
		state.queryParams[startKey] = val[0];
		state.queryParams[endKey] = val[1];
	} else {
		state.queryParams[startKey] = null;
		state.queryParams[endKey] = null;
	}
  handleQuery()
};
// 甄别时间
const timeStartChangeCr = (val: string[]) => {
	handleTimeChange(val, 'CreationTimeStart', 'CreationTimeEnd');
};
// 受理待质检表头
const acceptQualityColumns = [
	{ prop: 'order.no', label: '工单编码', width: 150 },
	{ prop: 'aiQuality', label: '质检方式', width: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
	{ prop: 'order.sourceChannel', label: '来源渠道' },
	{ prop: 'order.startTime', label: '受理时间', width: 170, render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') },
	{ prop: 'order.acceptType', label: '受理类型' },
	{ prop: 'order.statusText', label: '工单状态' },
	{ prop: 'order.title', label: '工单标题', width: 300 },
	{ prop: 'order.hotspotName', label: '热点分类' },
	{
		prop: 'order.acceptorName',
		label: '受理人',
		width: 120,
	},
	{ prop: 'order.fromPhone', label: '来电电话', width: 120 },
	{ label: '操作', width: 140, fixed: 'right', align: 'center', prop: 'operation' },
];
// 交办待质检表头
const assignQualityColumns = [
	{ prop: 'order.no', label: '工单编码', width: 150 },
	{ prop: 'aiQuality', label: '质检方式', width: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
	{ prop: 'order.sourceChannel', label: '来源渠道' },
	{ prop: 'order.startTime', label: '受理时间', width: 170, render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') },
	{ prop: 'order.acceptType', label: '受理类型' },
	{ prop: 'order.statusText', label: '工单状态' },
	{ prop: 'title', label: '工单标题', width: 300 },
	{ prop: 'order.hotspotName', label: '热点分类' },
	{ prop: 'order.acceptorName', label: '受理人', width: 120 },
	{ prop: 'order.centerToOrgTime', label: '交办时间', width: 170, render: (scope: any) => formatDate(scope.row.centerToOrgTime?.creationTime, 'YYYY-mm-dd HH:MM:SS') },
	{ prop: 'order.fromPhone', label: '来电电话', width: 120 },
	{ label: '操作', width: 140, fixed: 'right', align: 'center', prop: 'operation' },
];
// 回访待质检表头
const visitQualityColumns = [
	{ prop: 'order.no', label: '工单编码', width: 150 },
	{ prop: 'aiQuality', label: '质检方式', width: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
	{ prop: 'title', label: '工单标题', width: 300 },
	{ prop: 'order.sourceChannel', label: '来源渠道' },
	{ prop: 'visit.visitStateText', label: '回访状态' },
	{ prop: 'visit.visitTypeText', label: '回访方式', width: 100 },
	{ prop: 'order.acceptType', label: '受理类型' },
	{ prop: 'order.hotspotName', label: '热点分类', width: 120 },
	{ prop: 'order.acceptorName', label: '受理人', width: 120 },
	{ prop: 'order.actualHandleOrgName', label: '接办部门', width: 170 },
	{ prop: 'order.startTime', label: '受理时间', width: 170, render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') },
	{ prop: 'order.filedTime', label: '办结时间', width: 170, render: (scope: any) => formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') },
	{
		prop: 'visit.publishTime',
		label: '发布时间',
		width: 170,
		render: (scope: any) => formatDate(scope.row.visit?.publishTime, 'YYYY-mm-dd HH:MM:SS'),
	},
	{
		prop: 'visit.creationTime',
		label: '回访任务创建时间',
		width: 170,
		render: (scope: any) => formatDate(scope.row.visit?.creationTime, 'YYYY-mm-dd HH:MM:SS'),
	},
	{ prop: 'visit.employeeName', label: '回访人', width: 170 },
	{ prop: 'visit.visitTime', label: '回访时间', width: 170, render: (scope: any) => formatDate(scope.row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS') },
	{ prop: 'order.counterSignTypeText', label: '是否会签' },
	{ label: '操作', width: 140, fixed: 'right', align: 'center', prop: 'operation' },
];
// 手动查询，将页码设置为1
const handleQuery = () => {
  state.queryParams.PageIndex = 1;
  queryList();
};
// 查询质检列表
const queryList = () => {
	state.loading = true;
	switch (state.queryParams.Source) {
		case 1:
			columns.value = acceptQualityColumns;
			break;
		case 2:
			columns.value = assignQualityColumns;
			break;
		case 3:
			columns.value = visitQualityColumns;
			break;
		default:
			break;
	}
	qualityList(state.queryParams)
		.then((res) => {
			state.loading = false;
			state.tableData = res.result.items ?? [];
			state.total = res.result.total ?? 0;
		})
		.finally(() => {
			state.loading = false;
		});
};
// 重置表单
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	state.queryParams.CreationTimeStart = null;
	state.queryParams.CreationTimeEnd = null;
	queryList();
};
// 质检
const qualityInspectionRef = ref<RefType>();
const onQualityInspection = (row: any) => {
	qualityInspectionRef.value.openDialog(row, state.queryParams.Source);
};
// 页面加载时
onMounted(() => {
	getBaseData();
	queryList();
});
</script>

<style lang="scss" scoped>
.quality-container {
}
</style>