reactor:工单统计部分表格重构:

src/components/OrderDetail/index.vue

@@ -112,7 +112,9 @@
 								</el-form-item>
 							</el-col>
 							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.provinceNo">
-								<el-form-item label="省工单编码"> {{ state.ruleForm.provinceNo }} </el-form-item>
+								<el-form-item label="省工单编码">
+									<div style="word-break: break-all">{{ state.ruleForm.provinceNo }}</div>
+								</el-form-item>
 							</el-col>
 							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm?.orderExtension?.orderTypeCode">
 								<el-form-item label="工单类型">
@@ -547,7 +549,7 @@
 import { defineAsyncComponent, PropType, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { throttle, transformFile } from '@/utils/tools';
-import { cancelDelay, endCounterSign, orderDetail } from "@/api/business/order";
+import { cancelDelay, endCounterSign, orderDetail } from '@/api/business/order';
 import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
 import { ola } from '@/utils/ola_api';
 import { formatDate } from '@/utils/formatTime';
@@ -842,14 +844,15 @@ const onCancelDelay = () => {
 		autofocus: false,
 	})
 		.then(() => {
-      cancelDelay({ id: state.ruleForm.id }).then(() => {
-        ElMessage.success('取消延期成功');
-        emit('updateList');
-        closeDialog();
-      })
-        .catch(() => {
-          emit('updateList');
-        });
+			cancelDelay({ id: state.ruleForm.id })
+				.then(() => {
+					ElMessage.success('取消延期成功');
+					emit('updateList');
+					closeDialog();
+				})
+				.catch(() => {
+					emit('updateList');
+				});
 		})
 		.catch(() => {});
 };

src/theme/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3778985 */
-  src: url('iconfont.woff2?t=1710379620305') format('woff2'),
-       url('iconfont.woff?t=1710379620305') format('woff'),
-       url('iconfont.ttf?t=1710379620305') format('truetype');
+  src: url('iconfont.woff2?t=1710506040484') format('woff2'),
+       url('iconfont.woff?t=1710506040484') format('woff'),
+       url('iconfont.ttf?t=1710506040484') format('truetype');
 }
 
 .iconfont {

src/theme/iconfont/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1132450",
+      "name": "导出",
+      "font_class": "daochu1",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "4922626",
+      "name": "导出",
+      "font_class": "export",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
     {
       "icon_id": "2794637",
       "name": "pdf",

src/views/quality/done/index.vue

@@ -10,9 +10,9 @@
 				<el-form-item label="关键词" prop="Keyword">
 					<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="queryList" class="keyword-input" />
 				</el-form-item>
-        <el-form-item label="分数区间" prop="value">
-            <input-number-range v-model="state.queryParams.value"/>
-        </el-form-item>
+				<el-form-item label="分数区间" prop="value">
+					<input-number-range v-model="state.queryParams.value" />
+				</el-form-item>
 				<el-form-item label="创建时间" prop="exTime">
 					<el-date-picker
 						v-model="state.queryParams.exTime"
@@ -31,148 +31,40 @@
 					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
 				</el-form-item>
 			</el-form>
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading" row-key="id" ref="multipleTableRef" @selection-change="handleSelectionChange">
-				<el-table-column type="selection" width="55" />
-				<template v-if="state.queryParams.Source === 1">
-					<el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
-					<el-table-column prop="mode" label="质检方式" show-overflow-tooltip width="100"></el-table-column>
-					<el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
-					<el-table-column label="受理时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="order.statusText" label="工单状态" show-overflow-tooltip></el-table-column>
-					<el-table-column label="工单标题" show-overflow-tooltip width="300">
-						<template #default="{ row }">
-              <order-detail :order="row.order">{{ row.order?.title }}</order-detail>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip min-width="120"></el-table-column>
-					<el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
-						<template #default="{ row }">
-							<span
-								>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
-							</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.fromPhone" label="来电电话" show-overflow-tooltip width="120"></el-table-column>
-				</template>
-				<template v-if="state.queryParams.Source === 2">
-					<el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
-					<el-table-column prop="mode" label="质检方式" show-overflow-tooltip width="100"></el-table-column>
-					<el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
-					<el-table-column label="受理时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="order.statusText" label="工单状态" show-overflow-tooltip></el-table-column>
-					<el-table-column label="工单标题" show-overflow-tooltip width="300">
-						<template #default="{ row }">
-							<span class="color-primary">{{ row.order?.title }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip min-width="120"></el-table-column>
-					<el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
-						<template #default="{ row }">
-							<span
-								>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
-							</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="creationTime" label="交办时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.fromPhone" label="来电电话" show-overflow-tooltip width="120"></el-table-column>
+			<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 v-if="state.queryParams.Source === 3">
-					<el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
-					<el-table-column prop="mode" label="质检方式" show-overflow-tooltip width="100"></el-table-column>
-					<el-table-column label="工单标题" show-overflow-tooltip width="300">
-						<template #default="{ row }">
-							<span class="color-primary">{{ row.order?.title }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="visit.visitStateText" label="回访状态" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="visit.visitTypeText" label="回访方式" show-overflow-tooltip width="100"></el-table-column>
-					<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip min-width="120"></el-table-column>
-					<el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
-						<template #default="{ row }">
-							<span
-								>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
-							</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.actualHandleOrgName" label="接办对象" show-overflow-tooltip width="170"></el-table-column>
-					<el-table-column label="受理时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column label="办结时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="startTime" label="发布时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.visit?.publishTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column label="回访任务创建时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.visit?.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="visit.employeeName" label="回访人" show-overflow-tooltip width="170"></el-table-column>
-					<el-table-column label="回访时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.counterSignTypeText" label="是否会签" show-overflow-tooltip></el-table-column>
+				<template #employeeName="{ row }">
+					<span
+						>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
+					</span>
 				</template>
-				<el-table-column prop="userName" label="质检人" show-overflow-tooltip></el-table-column>
-				<el-table-column label="质检时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.qualityTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="grade" label="质检得分" show-overflow-tooltip></el-table-column>
-				<el-table-column label="操作" width="120" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onQualityView(row)" v-auth="'quality:done:view'" title="查看质检详情"> 查看 </el-button>
-						<el-button link type="primary" @click="onQualityEdit(row)" v-auth="'quality:done:edit'" title="编辑质检"> 编辑 </el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onQualityView(row)" v-auth="'quality:done:view'" title="查看质检详情"> 查看 </el-button>
+					<el-button link type="primary" @click="onQualityEdit(row)" v-auth="'quality:done:edit'" title="编辑质检"> 编辑 </el-button>
 				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
-				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+			</ProTable>
 		</el-card>
 		<!-- 质检 -->
 		<quality-inspection ref="qualityInspectionRef" @updateList="queryList" />
 	</div>
 </template>
 
-<script lang="ts" setup name="qualityDone">
+<script lang="tsx" setup name="qualityDone">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import { FormInstance } from 'element-plus';
+import { ElButton, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { qualityBaseData, qualityList } from '@/api/quality';
 import { shortcuts } from '@/utils/constants';
@@ -180,10 +72,29 @@ import { shortcuts } from '@/utils/constants';
 // 引入组件
 const QualityInspection = defineAsyncComponent(() => import('@/views/quality/done/components/Quality-inspection.vue')); // 质检
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
-const InputNumberRange  = defineAsyncComponent(() => import('@/components/NumberRange/index.vue')); // 数字区间
+const InputNumberRange = defineAsyncComponent(() => import('@/components/NumberRange/index.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: 'employeeName', label: '受理人', width: 120 },
+	{ prop: 'order.fromPhone', label: '来电电话', width: 120 },
+	{ prop: 'userName', label: '质检人' },
+	{ prop: 'qualityTime', label: '质检时间', width: 170, render: (scope: any) => formatDate(scope.row.qualityTime, 'YYYY-mm-dd HH:MM:SS') },
+	{ prop: 'grade', label: '质检得分' },
+	{ label: '操作', width: 140, fixed: 'right', align: 'center', prop: 'operation' },
+]);
 
 // 定义变量内容
-const state = reactive<any>({
+const state = reactive({
 	loading: false, // 加载状态
 	queryParams: {
 		// 查询参数
@@ -195,7 +106,7 @@ const state = reactive<any>({
 		exTime: [], // 办理期限
 		State: 1, // 待质检
 		Keyword: null,
-    value:[0, 100]
+		value: [0, 100],
 	},
 	total: 0, // 总条数
 	tableData: [], // 表格数据
@@ -225,14 +136,96 @@ const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
 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: 'employeeName', label: '受理人', width: 120 },
+	{ prop: 'order.fromPhone', label: '来电电话', width: 120 },
+	{ prop: 'userName', label: '质检人' },
+	{ prop: 'qualityTime', label: '质检时间', width: 170, render: (scope: any) => formatDate(scope.row.qualityTime, 'YYYY-mm-dd HH:MM:SS') },
+	{ prop: 'grade', label: '质检得分' },
+	{ 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: 'employeeName', label: '受理人', width: 120 },
+	{ prop: 'creationTime', label: '交办时间', width: 170, render: (scope: any) => formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS') },
+	{ prop: 'order.fromPhone', label: '来电电话', width: 120 },
+	{ prop: 'userName', label: '质检人' },
+	{ prop: 'qualityTime', label: '质检时间', width: 170, render: (scope: any) => formatDate(scope.row.qualityTime, 'YYYY-mm-dd HH:MM:SS') },
+	{ prop: 'grade', label: '质检得分' },
+	{ 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: 'employeeName', 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: '是否会签' },
+	{ prop: 'userName', label: '质检人' },
+	{ prop: 'qualityTime', label: '质检时间', width: 170, render: (scope: any) => formatDate(scope.row.qualityTime, 'YYYY-mm-dd HH:MM:SS') },
+	{ prop: 'grade', label: '质检得分' },
+	{ label: '操作', width: 140, fixed: 'right', align: 'center', prop: 'operation' },
+];
 // 获取参数列表
 const queryList = () => {
 	state.loading = true;
-  const request = {
-    ...state.queryParams,
-    MaxGrade: state.queryParams.value[1],
-    MinGrade: state.queryParams.value[0],
-  }
+	switch (state.queryParams.Source) {
+		case 1:
+			columns.value = acceptQualityColumns;
+			break;
+		case 2:
+			columns.value = assignQualityColumns;
+			break;
+		case 3:
+			columns.value = visitQualityColumns;
+			break;
+		default:
+			break;
+	}
+	const request = {
+		...state.queryParams,
+		MaxGrade: state.queryParams.value[1],
+		MinGrade: state.queryParams.value[0],
+	};
 	qualityList(request)
 		.then((res) => {
 			state.loading = false;
@@ -271,4 +264,4 @@ onMounted(() => {
 	getBaseData();
 	queryList();
 });
-</script>
+</script>

src/views/quality/index/index.vue

@@ -26,153 +26,40 @@
 					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
 				</el-form-item>
 			</el-form>
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading" row-key="id" ref="multipleTableRef" @selection-change="handleSelectionChange">
-				<el-table-column type="selection" width="55" />
-				<template v-if="state.queryParams.Source === 1">
-					<el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
-					<el-table-column label="质检方式" show-overflow-tooltip width="100">
-						<template #default="{ row }">
-							<span>{{ row.aiQuality ? '智能质检' : '人工质检' }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
-					<el-table-column label="受理时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="order.statusText" label="工单状态" show-overflow-tooltip></el-table-column>
-					<el-table-column label="工单标题" show-overflow-tooltip width="300">
-						<template #default="{ row }">
-              <order-detail :order="row.order">{{ row.order?.title }}</order-detail>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
-						<template #default="{ row }">
-							<span
-								>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
-							</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.fromPhone" label="来电电话" show-overflow-tooltip width="120"></el-table-column>
-				</template>
-				<template v-if="state.queryParams.Source === 2">
-					<el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
-					<el-table-column label="质检方式" show-overflow-tooltip width="100">
-						<template #default="{ row }">
-							<span>{{ row.aiQuality ? '智能质检' : '人工质检' }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
-					<el-table-column label="受理时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="order.statusText" label="工单状态" show-overflow-tooltip></el-table-column>
-					<el-table-column label="工单标题" show-overflow-tooltip width="300">
-						<template #default="{ row }">
-							<span class="color-primary">{{ row.order?.title }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
-						<template #default="{ row }">
-							<span
-								>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
-							</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="creationTime" label="交办时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.fromPhone" label="来电电话" show-overflow-tooltip width="120"></el-table-column>
+			<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 v-if="state.queryParams.Source === 3">
-					<el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
-					<el-table-column label="质检方式" show-overflow-tooltip width="100">
-						<template #default="{ row }">
-							<span>{{ row.aiQuality ? '智能质检' : '人工质检' }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column label="工单标题" show-overflow-tooltip width="300">
-						<template #default="{ row }">
-							<span class="color-primary">{{ row.order?.title }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="visit.visitStateText" label="回访状态" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="visit.visitTypeText" label="回访方式" show-overflow-tooltip width="100"></el-table-column>
-					<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip width="120"></el-table-column>
-					<el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="120">
-						<template #default="{ row }">
-							<span
-								>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
-							</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.actualHandleOrgName" label="接办对象" show-overflow-tooltip width="170"></el-table-column>
-					<el-table-column label="受理时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column label="办结时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column label="发布时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.visit?.publishTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column label="回访任务创建时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.visit?.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="visit.employeeName" label="回访人" show-overflow-tooltip width="170"></el-table-column>
-					<el-table-column label="回访时间" show-overflow-tooltip width="170">
-						<template #default="{ row }">
-							<span>{{ formatDate(row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-						</template>
-					</el-table-column>
-					<el-table-column prop="order.counterSignTypeText" label="是否会签" show-overflow-tooltip></el-table-column>
+				<template #employeeName="{ row }">
+					<span
+						>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
+					</span>
 				</template>
-				<el-table-column label="操作" width="140" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onQualityInspection(row)" v-auth="'quality:inspection'" title="质检"> 质检 </el-button>
-						<order-detail :order="row.order" />
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onQualityInspection(row)" v-auth="'quality:inspection'" title="质检"> 质检 </el-button>
+					<order-detail :order="row.order" />
 				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
-				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+			</ProTable>
 		</el-card>
 		<!-- 质检 -->
 		<quality-inspection ref="qualityInspectionRef" @updateList="queryList" />
 	</div>
 </template>
 
-<script lang="ts" setup name="quality">
+<script lang="tsx" setup name="quality">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import { ElMessage, FormInstance } from 'element-plus';
+import { ElButton, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { qualityBaseData, qualityList } from '@/api/quality';
 import { shortcuts } from '@/utils/constants';
@@ -180,8 +67,24 @@ import { 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: 'employeeName',label: '受理人',width: 120},
+	{ prop: 'order.fromPhone', label: '来电电话', width: 120 },
+	{label: '操作',width: 140,fixed: 'right',align: 'center',prop: 'operation'}
+]);
 // 定义变量内容
-const state = reactive<any>({
+const state = reactive({
 	loading: false, // 加载状态
 	queryParams: {
 		// 查询参数
@@ -222,9 +125,86 @@ const handleTimeChange = (val: string[], startKey: string, endKey: string) => {
 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: 'employeeName',
+		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: 'employeeName', label: '受理人', width: 120 },
+	{ prop: 'creationTime', label: '交办时间', width: 170, render: (scope: any) => formatDate(scope.row.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: 'employeeName', 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' },
+];
 // 获取参数列表
 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;

src/views/statistics/call/hotNumber.vue

@@ -28,48 +28,62 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading" ref="multipleTableRef" @selection-change="handleSelectionChange" show-summary>
-				<el-table-column type="selection" width="55" align="center" />
-				<el-table-column label="热线号码" show-overflow-tooltip align="center">
-                <template #default="scope"> {{ ''+scope.row.gateWay }} </template>
-        </el-table-column>
-				<el-table-column label="电话呼入汇总" align="center">
-					<el-table-column prop="callInCount" label="呼入" show-overflow-tooltip align="center" sortable></el-table-column>
-					<el-table-column prop="connectCount" label="接通" show-overflow-tooltip align="center" sortable></el-table-column>
-					<el-table-column prop="noConnectByeCount" label="未接通秒挂" show-overflow-tooltip align="center" sortable></el-table-column>
-					<el-table-column label="接通率" show-overflow-tooltip align="center" sortable>
-						<template #default="scope"> {{ scope.row.callInConnectRate }}% </template>
-					</el-table-column>
-				</el-table-column>
-        <el-table-column label="接通话务分析" align="center">
-          <el-table-column prop="effectiveCount" label="有效接通" show-overflow-tooltip align="center" sortable></el-table-column>
-          <el-table-column prop="aveDuration" label="平均时长" show-overflow-tooltip align="center" sortable></el-table-column>
-          <el-table-column prop="durationSum" label="通话时总长" show-overflow-tooltip align="center" sortable></el-table-column>
-          <el-table-column prop="connectByeCount" label="接通秒挂" show-overflow-tooltip align="center" sortable></el-table-column>
-          <el-table-column prop="timelyAnswerCount" label="及时应答数" show-overflow-tooltip align="center" sortable></el-table-column>
-          <el-table-column label="有效率" show-overflow-tooltip align="center" sortable>
-            <template #default="scope"> {{ scope.row.effectiveRate }}% </template>
-          </el-table-column>
-        </el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
+				:pagination="false"
+				show-summary
+				border
+				:summary-method="getSummaries"
+			>
+			</ProTable>
 		</el-card>
 	</div>
 </template>
-<script setup lang="ts" name="statisticsCallHotNumber">
+<script setup lang="tsx" name="statisticsCallHotNumber">
 import { onMounted, reactive, ref } from 'vue';
 import { ElButton, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
 import { callHotline } from '@/api/statistics/call';
 import { shortcuts } from '@/utils/constants';
-
 import dayjs from 'dayjs';
+
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
+	{ prop: 'gateWay', label: '热线号码', align: 'center' },
+	{
+		prop: 'allCall',
+		label: '电话呼入汇总',
+		align: 'center',
+		_children: [
+			{ prop: 'callInCount', label: '呼入', align: 'center', sortable: true },
+			{ prop: 'connectCount', label: '接通', align: 'center', sortable: true },
+			{ prop: 'noConnectByeCount', label: '未接通秒挂', align: 'center', sortable: true },
+			{ prop: 'callInConnectRate', label: '接通率', align: 'center', render: (scope) => <span>{scope.row.callInConnectRate}%</span> },
+		],
+	},
+	{
+		prop: 'effective',
+		label: '接通话务分析',
+		align: 'center',
+		_children: [
+			{ prop: 'effectiveCount', label: '有效接通', align: 'center', sortable: true },
+			{ prop: 'aveDuration', label: '平均时长', align: 'center', sortable: true },
+			{ prop: 'durationSum', label: '通话时总长', align: 'center', sortable: true },
+			{ prop: 'connectByeCount', label: '接通秒挂', align: 'center', sortable: true },
+			{ prop: 'timelyAnswerCount', label: '及时应答数', align: 'center', sortable: true },
+			{ prop: 'effectiveRate', label: '有效率', align: 'center', render: (scope) => <span>{'' + scope.row.effectiveRate}%</span> },
+		],
+	},
+]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const state = reactive(<any>{
+const state = reactive({
 	queryParams: {
 		// 查询条件
 		gateway: null, // 热线号码
@@ -117,7 +131,35 @@ const multipleSelection = ref<any>([]);
 const handleSelectionChange = (val: any[]) => {
 	multipleSelection.value = val;
 };
-
+// 合计
+const getSummaries = (param: any) => {
+	const { columns, data } = param;
+	const sums: string[] = [];
+	columns.forEach((column: { property: string }, index: number) => {
+		if (index === 0) {
+			sums[index] = '合计';
+			return;
+		}
+		const values = data.map((item: { [x: string]: any }) => Number(item[column.property]));
+		if (['callInConnectRate', 'effectiveRate', 'gateWay'].includes(column.property)) {
+			//百分比不能计算
+			sums[index] = '';
+			return '';
+		} else if (!values.every((value: unknown) => Number.isNaN(value))) {
+			sums[index] = `${values.reduce((prev: any, curr: any) => {
+				const value = Number(curr);
+				if (!Number.isNaN(value)) {
+					return prev + curr;
+				} else {
+					return prev;
+				}
+			}, 0)}`;
+		} else {
+			sums[index] = ' ';
+		}
+	});
+	return sums;
+};
 onMounted(() => {
 	queryList();
 });

src/views/statistics/call/index.vue

@@ -2,7 +2,7 @@
 	<div class="statistics-call-container layout-pd">
 		<!-- 搜索  -->
 		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent  inline>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
 				<el-form-item label="来源" prop="Keyword">
 					<el-input v-model="state.queryParams.Keyword" placeholder="来源" clearable @keyup.enter="queryList" class="keyword-input" />
 				</el-form-item>
@@ -28,44 +28,43 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<!-- 表格 -->
-			<el-table
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
 				:data="state.tableData"
-				v-loading="state.loading"
-				row-key="id"
-				ref="multipleTableRef"
-				@selection-change="handleSelectionChange"
+				@updateTable="queryList"
+				:loading="state.loading"
+				:pagination="false"
 				show-summary
-				border
+        border
 			>
-				<el-table-column type="selection" width="55" />
-				<el-table-column prop="hourRange" label="时段" show-overflow-tooltip align="center"> </el-table-column>
-				<el-table-column prop="hour" label="呼入数量" show-overflow-tooltip sortable align="center"></el-table-column>
-				<el-table-column prop="answered" label="接通数量" show-overflow-tooltip sortable align="center"></el-table-column>
-				<el-table-column prop="hanguped" label="挂断数量" show-overflow-tooltip sortable align="center"></el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
+			</ProTable>
 		</el-card>
 	</div>
 </template>
-<script setup lang="ts" name="statisticsCall">
+<script setup lang="tsx" name="statisticsCall">
 import { onMounted, reactive, ref } from 'vue';
 import { ElButton, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
 import { callList } from '@/api/statistics/call';
 import { shortcuts } from '@/utils/constants';
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
+
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'hourRange', label: '时段', align: 'center' },
+	{ prop: 'hour', label: '呼入数量', align: 'center', sortable: true },
+	{ prop: 'answered', label: '接通数量', align: 'center', sortable: true },
+	{ prop: 'hanguped', label: '挂断数量', align: 'center', sortable: true },
+]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const state = reactive(<any>{
+const state = reactive({
 	queryParams: {
 		// 查询条件
 		Keyword: null, // 关键词
-		crTime: [
-      dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-    ], //
+		crTime: [dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')], //
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -104,12 +103,6 @@ const resetQuery = throttle((formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 }, 300);
-// 表格多选
-const multipleTableRef = ref<RefType>();
-const multipleSelection = ref<any>([]);
-const handleSelectionChange = (val: any[]) => {
-	multipleSelection.value = val;
-};
 onMounted(() => {
 	queryList();
 });

src/views/statistics/call/seatsRest.vue

@@ -2,7 +2,7 @@
 	<div class="statistics-call-seats-rest-container layout-pd">
 		<!-- 搜索  -->
 		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent  inline>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
 				<el-form-item label="工号" prop="StaffNo">
 					<el-input v-model="state.queryParams.StaffNo" placeholder="工号" clearable @keyup.enter="queryList" class="keyword-input" />
 				</el-form-item>
@@ -31,31 +31,21 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<!-- 表格 -->
-			<el-table
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
 				:data="state.tableData"
-				v-loading="state.loading"
-				ref="multipleTableRef"
-				@selection-change="handleSelectionChange"
+				@updateTable="queryList"
+				:loading="state.loading"
+				:pagination="false"
+				border
 				@sort-change="sortChange"
 			>
-				<el-table-column type="selection" width="55" align="center" />
-				<el-table-column prop="staffNo" label="工号" show-overflow-tooltip align="center"></el-table-column>
-				<el-table-column prop="userName" label="坐席名称" show-overflow-tooltip align="center"></el-table-column>
-				<el-table-column prop="restCount" label="小休次数" show-overflow-tooltip align="center" sortable="custom"></el-table-column>
-				<el-table-column prop="restDuration" label="小休平均时长(分)" show-overflow-tooltip align="center" sortable="custom">
-					<template #default="{ row }">
-						{{ Number(row.restDuration).toFixed(2) }}
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
+			</ProTable>
 		</el-card>
 	</div>
 </template>
-<script setup lang="ts" name="statisticsCallSeatsRest">
+<script setup lang="tsx" name="statisticsCallSeatsRest">
 import { onMounted, reactive, ref } from 'vue';
 import { ElButton, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
@@ -63,9 +53,25 @@ import { callRest } from '@/api/statistics/call';
 import { shortcuts } from '@/utils/constants';
 
 import dayjs from 'dayjs';
+
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
+	{ prop: 'staffNo', label: '工号', align: 'center' },
+	{ prop: 'userName', label: '坐席名称', align: 'center' },
+	{ prop: 'restCount', label: '小休次数', align: 'center', sortable: 'custom' },
+	{
+		prop: 'restDuration',
+		label: '小休平均时长(分)',
+		align: 'center',
+		sortable: 'custom',
+		render: (scope) => <span>{Number(scope.row.restDuration).toFixed(2)}</span>,
+	},
+]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const state = reactive(<any>{
+const state = reactive({
 	queryParams: {
 		// 查询条件
 		StaffNo: null, // 工号
@@ -85,8 +91,8 @@ const queryList = throttle(() => {
 	let StartTime = null;
 	let EndTime = null;
 	if (state.queryParams?.crTime) {
-    StartTime = state.queryParams?.crTime[0];
-    EndTime = state.queryParams?.crTime[1];
+		StartTime = state.queryParams?.crTime[0];
+		EndTime = state.queryParams?.crTime[1];
 	}
 	const request = {
 		StartTime,
@@ -120,13 +126,6 @@ const resetQuery = throttle((formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 }, 300);
-// 表格多选
-const multipleTableRef = ref<RefType>();
-const multipleSelection = ref<any>([]);
-const handleSelectionChange = (val: any[]) => {
-	multipleSelection.value = val;
-};
-
 onMounted(() => {
 	queryList();
 });

src/views/statistics/call/talkTime.vue

@@ -1,114 +1,116 @@
 <template>
-  <div class="statistics-call-talk-time-container layout-pd">
-    <!-- 搜索  -->
-    <el-card shadow="never">
-      <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent  inline>
-        <el-form-item label="时间段" prop="crTime">
-          <el-date-picker
-            v-model="state.queryParams.crTime"
-            type="datetimerange"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            :shortcuts="shortcuts"
-            @change="queryList"
-            value-format="YYYY-MM-DD[T]HH:mm:ss"
-          />
-        </el-form-item>
-        <el-form-item label-width="0">
-          <el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-          <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
-            <SvgIcon name="ele-Refresh" class="mr5" />重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-    <el-card shadow="never">
-      <!-- 表格 -->
-      <el-table
-        :data="state.tableData"
-        v-loading="state.loading"
-        row-key="id"
-        ref="multipleTableRef"
-        @selection-change="handleSelectionChange"
-        show-summary
-        border
-      >
-        <el-table-column type="selection" width="55" />
-        <el-table-column prop="hourTo" label="时间段" show-overflow-tooltip align="center"> </el-table-column>
-        <el-table-column prop="count" label="呼入总量" show-overflow-tooltip align="center"></el-table-column>
-        <el-table-column prop="effectiveCount" label="有效接通" show-overflow-tooltip align="center"></el-table-column>
-        <el-table-column prop="connectByeCount" label="接通秒挂" show-overflow-tooltip align="center"></el-table-column>
-        <el-table-column prop="noConnectByeCount" label="未接通秒挂" show-overflow-tooltip align="center"></el-table-column>
-        <el-table-column prop="queueByeCount" label="队列挂断" show-overflow-tooltip align="center"></el-table-column>
-        <el-table-column prop="ivrByeCount" label="IVR挂断" show-overflow-tooltip align="center"></el-table-column>
-        <template #empty>
-          <Empty />
-        </template>
-      </el-table>
-    </el-card>
-  </div>
+	<div class="statistics-call-talk-time-container layout-pd">
+		<!-- 搜索  -->
+		<el-card shadow="never">
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="时间段" prop="crTime">
+					<el-date-picker
+						v-model="state.queryParams.crTime"
+						type="datetimerange"
+						unlink-panels
+						range-separator="至"
+						start-placeholder="开始时间"
+						end-placeholder="结束时间"
+						:shortcuts="shortcuts"
+						@change="queryList"
+						value-format="YYYY-MM-DD[T]HH:mm:ss"
+					/>
+				</el-form-item>
+				<el-form-item label-width="0">
+					<el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
+				</el-form-item>
+			</el-form>
+		</el-card>
+		<el-card shadow="never">
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
+				:pagination="false"
+				border
+				show-summary
+			>
+			</ProTable>
+		</el-card>
+	</div>
 </template>
-<script setup lang="ts" name="statisticsCallTalkTime">
+<script setup lang="tsx" name="statisticsCallTalkTime">
 import { onMounted, reactive, ref } from 'vue';
 import { ElButton, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
-import {  callPeriod } from "@/api/statistics/call";
+import { callPeriod } from '@/api/statistics/call';
 import { shortcuts } from '@/utils/constants';
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
+
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
+	{ prop: 'hourTo', label: '时间段', align: 'center' },
+	{ prop: 'count', label: '呼入总量', align: 'center' },
+	{ prop: 'effectiveCount', label: '有效接通', align: 'center' },
+	{ prop: 'connectByeCount', label: '接通秒挂', align: 'center' },
+	{ prop: 'noConnectByeCount', label: '未接通秒挂', align: 'center' },
+	{ prop: 'queueByeCount', label: '队列挂断', align: 'center' },
+	{ prop: 'ivrByeCount', label: 'IVR挂断', align: 'center' },
+]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const state = reactive(<any>{
-  queryParams: {
-    // 查询条件
-    Keyword: null, // 关键词
-    crTime: [dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')], //
-  },
-  tableData: [], //表单
-  loading: false, // 加载
-  total: 0, // 总数
+const state = reactive({
+	queryParams: {
+		// 查询条件
+		Keyword: null, // 关键词
+		crTime: [dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'), dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')], //
+	},
+	tableData: [], //表单
+	loading: false, // 加载
+	total: 0, // 总数
 });
 // 受理时间
 /** 获取列表 */
 const queryList = throttle(() => {
-  state.loading = true;
-  let beginDate = null;
-  let endDate = null;
-  if (state.queryParams?.crTime) {
-    beginDate = state.queryParams?.crTime[0];
-    endDate = state.queryParams?.crTime[1];
-  }
-  const request = {
-    beginDate,
-    endDate,
-    DelayState: state.queryParams.DelayState,
-    PageIndex: state.queryParams.PageIndex,
-    PageSize: state.queryParams.PageSize,
-    Keyword: state.queryParams.Keyword,
-  };
-  callPeriod(request)
-    .then((res: any) => {
-      state.tableData = res.result;
-      state.loading = false;
-    })
-    .catch(() => {
-      state.loading = false;
-    });
+	state.loading = true;
+	let beginDate = null;
+	let endDate = null;
+	if (state.queryParams?.crTime) {
+		beginDate = state.queryParams?.crTime[0];
+		endDate = state.queryParams?.crTime[1];
+	}
+	const request = {
+		beginDate,
+		endDate,
+		DelayState: state.queryParams.DelayState,
+		PageIndex: state.queryParams.PageIndex,
+		PageSize: state.queryParams.PageSize,
+		Keyword: state.queryParams.Keyword,
+	};
+	callPeriod(request)
+		.then((res: any) => {
+			state.tableData = res.result;
+			state.loading = false;
+		})
+		.catch(() => {
+			state.loading = false;
+		});
 }, 300);
 /** 重置按钮操作 */
 const resetQuery = throttle((formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-  queryList();
+	if (!formEl) return;
+	formEl.resetFields();
+	queryList();
 }, 300);
 // 表格多选
 const multipleTableRef = ref<RefType>();
 const multipleSelection = ref<any>([]);
 const handleSelectionChange = (val: any[]) => {
-  multipleSelection.value = val;
+	multipleSelection.value = val;
 };
 onMounted(() => {
-  queryList();
+	queryList();
 });
 </script>

src/views/statistics/call/telephone.vue

@@ -2,7 +2,7 @@
 	<div class="statistics-call-telephone-container layout-pd">
 		<!-- 搜索  -->
 		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent  label-width="100px">
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-width="100px">
 				<el-row :gutter="10">
 					<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
 						<el-form-item label="时间段" prop="crTime">
@@ -103,19 +103,55 @@
 				v-model:limit="state.queryParams.PageSize"
 				@pagination="queryList"
 			/>
+
+			<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"
+			>
+			</ProTable>
 		</el-card>
 	</div>
 </template>
-<script setup lang="ts" name="statisticsCallTel">
+<script setup lang="tsx" name="statisticsCallTel">
 import { onMounted, reactive, ref } from 'vue';
 import { ElButton, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
 import { knowledgeList } from '@/api/statistics/knowledge';
 import { shortcuts } from '@/utils/constants';
 import { formatDate } from '@/utils/formatTime';
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
+	{ prop: 'orgName', label: '坐席人员', align: 'center' },
+	{ prop: 'addNum', label: '工号', align: 'center', sortable: 'custom' },
+	{ prop: 'addNum', label: '工作组', align: 'center', sortable: 'custom' },
+	{ prop: 'addNum', label: '工作类型', align: 'center', sortable: 'custom' },
+	{
+		prop: 'addNum',
+		label: '开始时间',
+		align: 'center',
+		sortable: 'custom',
+		render: (scope) => <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{
+		prop: 'deleteNum',
+		label: '结束时间',
+		align: 'center',
+		sortable: 'custom',
+		render: (scope) => <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
+	},
+	{ prop: 'deleteNum', label: '使用时间(秒)', align: 'center', sortable: 'custom' },
+]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const state = reactive(<any>{
+const state = reactive({
 	queryParams: {
 		// 查询条件
 		PageIndex: 1,
@@ -136,12 +172,12 @@ const closeSearch = () => {
 /** 获取列表 */
 const queryList = throttle(() => {
 	state.loading = true;
-  let CreationTimeStart = null;
-  let CreationTimeEnd = null;
-  if (state.queryParams?.crTime) {
-    CreationTimeStart = state.queryParams?.crTime[0];
-    CreationTimeEnd = state.queryParams?.crTime[1];
-  }
+	let CreationTimeStart = null;
+	let CreationTimeEnd = null;
+	if (state.queryParams?.crTime) {
+		CreationTimeStart = state.queryParams?.crTime[0];
+		CreationTimeEnd = state.queryParams?.crTime[1];
+	}
 	const request = {
 		CreationTimeStart,
 		CreationTimeEnd,

src/views/statistics/call/telephonist.vue

@@ -2,7 +2,7 @@
 	<div class="statistics-call-telephonist-container layout-pd">
 		<!-- 搜索  -->
 		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent  inline>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
 				<el-form-item label="时间段" prop="crTime">
 					<el-date-picker
 						v-model="state.queryParams.crTime"
@@ -25,107 +25,64 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<!-- 表格 -->
-			<el-table
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
 				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
+				:pagination="false"
 				show-summary
-				v-loading="state.loading"
+				border
 				row-key="orgId"
-				ref="multipleTableRef"
-				@selection-change="handleSelectionChange"
 				@sort-change="sortChange"
-				border
 				:summary-method="getSummaries"
 			>
-				<el-table-column type="selection" width="55" align="center" />
-				<el-table-column label="坐席工号" show-overflow-tooltip align="center" min-width="120">
-					<template #default="{ row }">
-						<span
-							>{{ row.name }} <span v-if="row.staffNo">({{ row.staffNo }})</span></span
-						>
-					</template>
-				</el-table-column>
-				<el-table-column prop="inTotal" label="呼入总量" show-overflow-tooltip align="center" sortable="custom" width="130"></el-table-column>
-				<el-table-column prop="inAnswered" label="接通总量" show-overflow-tooltip align="center" sortable="custom" width="130"></el-table-column>
-				<el-table-column
-					prop="inHangupImmediate"
-					label="呼入秒挂"
-					show-overflow-tooltip
-					align="center"
-					sortable="custom"
-					width="130"
-				></el-table-column>
-				<el-table-column prop="inHanguped" label="呼入超时未接" show-overflow-tooltip align="center" sortable="custom" width="140"></el-table-column>
-				<el-table-column prop="inAnsweredRate" label="接通率" show-overflow-tooltip align="center" sortable="custom" min-width="100">
-					<template #default="{ row }">
-						<span>{{ row.inAnsweredRate }}%</span>
-					</template>
-				</el-table-column>
-				<el-table-column
-					prop="outDurationAvg"
-					label="呼入平均时长"
-					show-overflow-tooltip
-					width="140"
-					align="center"
-					sortable="custom"
-				></el-table-column>
-				<el-table-column prop="inAvailableAnswer" label="有效接通率" show-overflow-tooltip align="center" sortable="custom" min-width="130">
-					<template #default="{ row }">
-						<span>{{ row.inAvailableAnswer }}%</span>
-					</template>
-				</el-table-column>
-				<el-table-column
-					prop="inHangupImmediateWhenAnswered"
-					label="接通秒挂"
-					show-overflow-tooltip
-					align="center"
-					sortable="custom"
-					width="130"
-				></el-table-column>
-				<el-table-column
-					prop="inAnsweredRate"
-					label="有效接通率"
-					show-overflow-tooltip
-					align="center"
-					width="130"
-					sortable="custom"
-				></el-table-column>
-				<el-table-column prop="outTotal" label="呼出总量" show-overflow-tooltip align="center" sortable="custom" width="130"></el-table-column>
-				<el-table-column prop="outAnswered" label="呼出接通量" show-overflow-tooltip align="center" sortable="custom" width="130"></el-table-column>
-				<el-table-column prop="outAnsweredRate" label="呼出接通率" show-overflow-tooltip align="center" sortable="custom" min-width="130">
-					<template #default="{ row }">
-						<span>{{ row.outAnsweredRate }}%</span>
-					</template>
-				</el-table-column>
-				<el-table-column
-					prop="outDurationAvg"
-					label="呼出平均时长"
-					show-overflow-tooltip
-					align="center"
-					width="150"
-					sortable="custom"
-					min-width="130"
-				></el-table-column>
-				<!--				<el-table-column prop="loginDuration" label="登录时长(分钟)" show-overflow-tooltip align="center"></el-table-column>
-				<el-table-column prop="restDuration" label="小休+摘记时长" show-overflow-tooltip align="center"></el-table-column>
-				<el-table-column prop="workRate" label="工作效率" show-overflow-tooltip align="center"></el-table-column>-->
-				<template #empty>
-					<Empty />
+				<template #name="{ row }">
+					<span
+						>{{ row.name }} <span v-if="row.staffNo">({{ row.staffNo }})</span></span
+					>
 				</template>
-			</el-table>
+			</ProTable>
 		</el-card>
 	</div>
 </template>
-<script setup lang="ts" name="statisticsCallTelephonist">
+<script setup lang="tsx" name="statisticsCallTelephonist">
 import { onMounted, reactive, ref } from 'vue';
 import { ElButton, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
 import { callAgent } from '@/api/statistics/call';
 import { shortcuts } from '@/utils/constants';
-import dayjs from "dayjs";
+import dayjs from 'dayjs';
+
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
+	{ prop: 'name', label: '坐席工号', align: 'center' },
+	{ prop: 'inTotal', label: '呼入总量', align: 'center', sortable: 'custom' },
+	{ prop: 'inAnswered', label: '接通总量', align: 'center', sortable: 'custom' },
+	{ prop: 'inHangupImmediate', label: '呼入秒挂', align: 'center', sortable: 'custom' },
+	{ prop: 'inHanguped', label: '呼入超时未接', align: 'center', sortable: 'custom' },
+	{
+		prop: 'inAnsweredRate',
+		label: '接通率',
+		align: 'center',
+		sortable: 'custom',
+		render: (scope) => <span>{scope.row.inAnsweredRate}%</span>
+	},
+	{ prop: 'outDurationAvg', label: '呼入平均时长', align: 'center', sortable: 'custom' },
+	{ prop: 'inAvailableAnswer', label: '有效接通率', align: 'center', sortable: 'custom',render: (scope) => <span>{scope.row.inAvailableAnswer}%</span> },
+	{ prop: 'inHangupImmediateWhenAnswered', label: '接通秒挂', align: 'center', sortable: 'custom' },
+	{ prop: 'inAnsweredRate', label: '有效接通率', align: 'center', sortable: 'custom',render: (scope) => <span>{scope.row.inAnsweredRate}%</span> },
+	{ prop: 'outTotal', label: '呼出总量', align: 'center', sortable: 'custom' },
+	{ prop: 'outAnswered', label: '呼出接通量', align: 'center', sortable: 'custom' },
+	{ prop: 'outAnsweredRate', label: '呼出接通率', align: 'center', sortable: 'custom',render: (scope) => <span>{scope.row.outAnsweredRate}%</span> },
+	{ prop: 'outDurationAvg', label: '呼出平均时长', align: 'center', sortable: 'custom' },
+]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const state = reactive(<any>{
+const state = reactive({
 	queryParams: {
 		// 查询条件
 		PageIndex: 1,
@@ -174,12 +131,6 @@ const resetQuery = throttle((formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 }, 300);
-// 表格多选
-const multipleTableRef = ref<RefType>();
-const multipleSelection = ref<any>([]);
-const handleSelectionChange = (val: any[]) => {
-	multipleSelection.value = val;
-};
 // 合计
 const getSummaries = (param: any) => {
 	const { columns, data } = param;

src/views/statistics/call/transferOut.vue

@@ -31,33 +31,21 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading" row-key="userId" ref="multipleTableRef" @selection-change="handleSelectionChange">
-				<el-table-column type="selection" width="55" align="center" />
-				<el-table-column prop="cdpn" label="外线号码" show-overflow-tooltip align="center"></el-table-column>
-				<el-table-column prop="cpn" label="来电号码" show-overflow-tooltip align="center"></el-table-column>
-				<el-table-column prop="telNo" label="转接分机号" show-overflow-tooltip align="center"></el-table-column>
-				<el-table-column prop="invalid" label="转外线时间" show-overflow-tooltip align="center">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.createdTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="userName" label="受理人" show-overflow-tooltip align="center"></el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
-				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+      <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"
+      >
+      </ProTable>
 		</el-card>
 	</div>
 </template>
-<script setup lang="ts" name="statisticsCallTransferOut">
+<script setup lang="tsx" name="statisticsCallTransferOut">
 import { onMounted, reactive, ref } from 'vue';
 import { ElButton, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
@@ -65,9 +53,20 @@ import { callTransfer } from '@/api/statistics/call';
 import { shortcuts } from '@/utils/constants';
 import { formatDate } from '@/utils/formatTime';
 import dayjs from 'dayjs';
+
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+    { type: 'index', fixed: 'left', width: 55, label: '序号', align: 'center' },
+  { prop: 'cdpn', label: '外线号码', align: 'center' },
+  { prop: 'cpn', label: '来电号码', align: 'center' },
+  { prop: 'telNo', label: '转接分机号', align: 'center' },
+  { prop: 'createdTime', label: '转外线时间', align: 'center',render: (scope) =>  <span>{formatDate(scope.row.createdTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
+  { prop: 'userName', label: '受理人', align: 'center' },
+]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const state = reactive(<any>{
+const state = reactive({
 	queryParams: {
 		// 查询条件
 		PageIndex: 1,