reactor:自贡通话记录表格重构;

.env.development

@@ -3,7 +3,7 @@ VITE_MODE_NAME=development
 # 防止部署多套系统到同一域名不同目录时，变量共用的问题 设置不同的前缀
 VITE_STORAGE_NAME=dev
 # 业务系统基础请求地址
-VITE_API_URL=http://110.188.24.28:50100
+VITE_API_URL=http://110.188.24.28:50300
 # 业务系统socket请求地址
 VITE_API_SOCKET_URL=http://110.188.24.28:50100/hubs/hotline
 # 业务系统文件上传上传请求地址

src/views/tels/callLog/ybCallLog.vue

@@ -484,7 +484,6 @@ const ConnectBusiness = defineAsyncComponent(() => import('@/views/tels/callLog/
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
-const proTableRef = ref<RefType>(); // 表格ref
 // 定义变量内容
 const state = reactive<any>({
 	queryParams: {

src/views/tels/callLog/zgCallLog.vue

@@ -6,174 +6,127 @@
 				<el-tab-pane name="2" label="呼出列表" :disabled="state.loading"></el-tab-pane>
 				<el-tab-pane name="3" label="未接列表" :disabled="state.loading"></el-tab-pane>
 			</el-tabs>
-			<ProTable
-				ref="proTableRef"
-				:columns="inColumns"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
-				:pagination="false"
-				v-if="state.queryParams.type === '1'"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-minWidth="100px" inline>
-						<el-form-item prop="FromNo">
-							<el-input v-model="state.queryParams.FromNo" placeholder="主叫号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item prop="ToNo">
-							<el-input v-model="state.queryParams.ToNo" placeholder="被叫号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item prop="IsMissOrder">
-							<el-checkbox v-model="IsMissOrder" border @change="changeMissOrder">失联工单</el-checkbox>
-						</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="drawer = true" class="default-button" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #operation="{ row }">
-					<template v-if="['1', '2'].includes(state.queryParams.type)">
-						<el-button link type="primary" @click="onCreate(row)" title="创建失联工单" v-auth="'tels:callLog:connectOrder'" v-if="!row.orderId && row.callState !== 0">
-							失联工单
-						</el-button>
-						<!--						<el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.orderId">
-              关联业务
-            </el-button>-->
-						<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
-						<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
-					</template>
-					<template v-else>
-						<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
-						<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
-					</template>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="{ ...row, id: row.orderId }" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-				<template #pagination>
-					<div class="flex-end mt10">
-						<!--					<el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
-						<el-pagination
-							layout="prev, pager, next"
-							:total="state.total"
-							@current-change="handleCurrentChange"
-							:page-size="state.queryParams.PageSize"
-							:current-page="state.queryParams.PageIndex"
-						/>
-					</div>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="outColumns"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
-				v-if="state.queryParams.type === '2'"
-				:pagination="false"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-minWidth="100px" inline>
-						<el-form-item prop="FromNo">
-							<el-input v-model="state.queryParams.FromNo" placeholder="主叫号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item prop="ToNo">
-							<el-input v-model="state.queryParams.ToNo" placeholder="被叫号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</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="drawer = true" class="default-button" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #operation="{ row }">
-					<template v-if="['1', '2'].includes(state.queryParams.type)">
-						<el-button link type="primary" @click="onCreate(row)" title="创建失联工单" v-auth="'tels:callLog:connectOrder'" v-if="!row.orderId && row.callState !== 0">
-							失联工单
-						</el-button>
-						<!--						<el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.orderId">
-              关联业务
-            </el-button>-->
-						<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
-						<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
-					</template>
-					<template v-else>
-						<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
-						<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
-					</template>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="{ ...row, id: row.orderId }" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-				<template #pagination>
-					<div class="flex-end mt10">
-						<!--					<el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
-						<el-pagination
-							layout="prev, pager, next"
-							:total="state.total"
-							@current-change="handleCurrentChange"
-							:page-size="state.queryParams.PageSize"
-							:current-page="state.queryParams.PageIndex"
-						/>
-					</div>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="noColumns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-minWidth="100px" inline>
+				<el-form-item prop="FromNo">
+					<el-input v-model="state.queryParams.FromNo" placeholder="主叫号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item prop="ToNo">
+					<el-input v-model="state.queryParams.ToNo" placeholder="被叫号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item prop="IsMissOrder" v-if="['1'].includes(state.queryParams.type)">
+					<el-checkbox v-model="IsMissOrder" border @change="changeMissOrder">失联工单</el-checkbox>
+				</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="drawer = true" class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Search" class="mr5" />更多查询</el-button
+					>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				v-if="state.queryParams.type === '3'"
-				:pagination="false"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-minWidth="100px" inline>
-						<el-form-item prop="FromNo">
-							<el-input v-model="state.queryParams.FromNo" placeholder="主叫号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item prop="ToNo">
-							<el-input v-model="state.queryParams.ToNo" placeholder="被叫号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</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="drawer = true" class="default-button" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #operation="{ row }">
-					<template v-if="['1', '2'].includes(state.queryParams.type)">
-						<el-button link type="primary" @click="onCreate(row)" title="创建失联工单" v-auth="'tels:callLog:connectOrder'" v-if="!row.orderId && row.callState !== 0">
-							失联工单
-						</el-button>
-						<!--						<el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.orderId">
-              关联业务
-            </el-button>-->
-						<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
-						<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
-					</template>
-					<template v-else>
-						<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
-						<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
-					</template>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="{ ...row, id: row.orderId }" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-				<template #pagination>
-					<div class="flex-end mt10">
-						<!--					<el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
-						<el-pagination
-							layout="prev, pager, next"
-							:total="state.total"
-							@current-change="handleCurrentChange"
-							:page-size="state.queryParams.PageSize"
-							:current-page="state.queryParams.PageIndex"
-						/>
-					</div>
-				</template>
-			</ProTable>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:sort-config="{ remote: true }"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:print-config="{}"
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="telsCallLog"
+					showHeaderOverflow
+					:custom-config="{
+						storage: true,
+						checkMethod({ column }) {
+							switch (state.queryParams.type) {
+								case '1': //呼入列表
+									return !['directionText', 'waitDuration'].includes(column.field);
+								case '2': //呼出列表
+									return !['mobileAreaName', 'userName', 'directionText', 'waitDuration'].includes(column.field);
+								case '3': //未接列表
+									return !['orderNo', 'title', 'mobileAreaName', 'userName', 'duration', 'answeredTime', 'endByText'].includes(column.field);
+							}
+						},
+					}"
+				>
+					<vxe-column field="fromNo" title="主叫号码" min-width="120"></vxe-column>
+					<vxe-column field="toNo" title="被叫号码" min-width="120"></vxe-column>
+					<vxe-column field="orderNo" title="工单编码" width="140" :visible="['1', '2'].includes(state.queryParams.type)"></vxe-column>
+					<vxe-column field="title" title="工单标题" width="200" :visible="['1', '2'].includes(state.queryParams.type)">
+						<template #default="{ row }">
+							<order-detail :order="{ ...row, id: row.orderId }" @updateList="queryList">{{ row.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="telNo" title="响应分机" width="100"></vxe-column>
+					<vxe-column field="staffNo" title="工号" width="100"></vxe-column>
+					<vxe-column field="mobileAreaName" title="号码归属地" min-width="120" :visible="['1'].includes(state.queryParams.type)"></vxe-column>
+					<vxe-column field="userName" title="话务员" width="120" :visible="['1'].includes(state.queryParams.type)"></vxe-column>
+					<vxe-column field="groupId" title="功能组号码" width="100"></vxe-column>
+					<vxe-column field="duration" title="通话时间(秒)" width="110" :visible="['1', '2'].includes(state.queryParams.type)"></vxe-column>
+					<vxe-column field="endByText" title="挂断状态" width="100" :visible="['1', '2'].includes(state.queryParams.type)"></vxe-column>
+					<vxe-column field="directionText" title="呼叫方向" width="100" :visible="['3'].includes(state.queryParams.type)"></vxe-column>
+					<vxe-column field="beginIvrTime" title="开始时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="answeredTime" title="接通时间" width="160" :visible="['1', '2'].includes(state.queryParams.type)">
+						<template #default="{ row }">
+							{{ formatDate(row.answeredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="endTime" title="挂断时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.endTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="waitDuration" title="等待时长(秒)" width="120" :visible="['3'].includes(state.queryParams.type)"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="240" align="center" v-if="['1', '2'].includes(state.queryParams.type)">
+						<template #default="{ row }">
+							<el-button
+								link
+								type="primary"
+								@click="onCreate(row)"
+								title="创建失联工单"
+								v-auth="'tels:callLog:connectOrder'"
+								v-if="!row.orderId && row.callState !== 0"
+							>
+								失联工单
+							</el-button>
+							<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
+							<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="160" align="center" v-else>
+						<template #default="{ row }">
+							<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
+							<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<div class="flex-end">
+				<el-pagination
+					layout="prev, pager, next"
+					:total="state.total"
+					@current-change="handleCurrentChange"
+					:page-size="state.queryParams.PageSize"
+					:current-page="state.queryParams.PageIndex"
+				/>
+			</div>
 			<el-drawer v-model="drawer" title="更多查询" size="500px">
 				<el-form :model="state.queryParams" ref="drawerRuleFormRef" @submit.native.prevent label-width="100px">
 					<el-form-item prop="TelNo" label="响应分机">
@@ -231,8 +184,6 @@
 		</div>
 		<!-- 播放录音 -->
 		<play-record ref="playRecordRef" />
-		<!-- 业务关联 -->
-		<connect-business ref="connectBusinessRef" @updateList="queryList" />
 	</div>
 </template>
 
@@ -252,10 +203,8 @@ import { storeToRefs } from 'pinia';
 
 // 引入组件
 const PlayRecord = defineAsyncComponent(() => import('@/components/PlayRecord/index.vue')); // 播放录音
-const ConnectBusiness = defineAsyncComponent(() => import('@/views/tels/callLog/components/Connect-business.vue')); // 关联工单还是回访
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 
-const proTableRef = ref<RefType>(); // 表格ref
 // 表格配置项
 // 定义变量内容
 const state = reactive<any>({
@@ -275,7 +224,7 @@ const state = reactive<any>({
 		CallStartTimeEnd: null,
 		WaitDurationStart: null,
 		WaitDurationEnd: null,
-		IsMissOrder:null,
+		IsMissOrder: null,
 	},
 	tableData: [], // 列表数据
 	loading: false, // 加载
@@ -285,78 +234,6 @@ const state = reactive<any>({
 	endByOptions: [],
 });
 const ruleFormRef = ref<FormInstance>(); // 表单ref
-// 呼入列表表头(已接通)
-const inColumns = ref<any[]>([
-	{ prop: 'fromNo', label: '主叫号码', minWidth: 120 },
-	{ prop: 'toNo', label: '被叫号码', minWidth: 120 },
-	{ prop: 'orderNo', label: '工单编码', minWidth: 140 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'telNo', label: '响应分机' },
-	{ prop: 'staffNo', label: '工号' },
-	{ prop: 'mobileAreaName', label: '号码归属地', minWidth: 120 },
-	{ prop: 'userName', label: '话务员', minWidth: 100 },
-	{ prop: 'groupId', label: '功能组号码', minWidth: 120 },
-	{ prop: 'duration', label: '通话时间(秒)', minWidth: 110 },
-	{ prop: 'endByText', label: '挂断状态', minWidth: 100 },
-	{
-		prop: 'beginIvrTime',
-		label: '开始时间',
-		minWidth: 160,
-		render: (scope: any) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-	},
-	{
-		prop: 'answeredTime',
-		label: '接通时间',
-		minWidth: 160,
-		render: (scope: any) => <span>{formatDate(scope.row.answeredTime, ' YYYY-mm-dd HH:MM:SS')}</span>,
-	},
-	{ prop: 'endTime', label: '挂断时间', minWidth: 160, render: (scope: any) => <span>{formatDate(scope.row.endTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 240, align: 'center' },
-]);
-// 呼出列表表头(已接通)
-const outColumns = ref<any[]>([
-	{ prop: 'fromNo', label: '主叫号码', minWidth: 120 },
-	{ prop: 'toNo', label: '被叫号码', minWidth: 120 },
-	{ prop: 'telNo', label: '响应分机' },
-	{ prop: 'staffNo', label: '工号' },
-	{ prop: 'orderNo', label: '工单编码', minWidth: 140 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'endByText', label: '挂断状态', minWidth: 100 },
-	{ prop: 'groupId', label: '功能组号码', minWidth: 120 },
-	{ prop: 'duration', label: '通话时间(秒)', minWidth: 110 },
-	{
-		prop: 'beginIvrTime',
-		label: '开始时间',
-		minWidth: 160,
-		render: (scope: any) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-	},
-	{
-		prop: 'answeredTime',
-		label: '接通时间',
-		minWidth: 160,
-		render: (scope: any) => <span>{formatDate(scope.row.answeredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-	},
-	{ prop: 'endTime', label: '挂断时间', minWidth: 160, render: (scope: any) => <span>{formatDate(scope.row.endTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 240, align: 'center' },
-]);
-// 未接表头
-const noColumns = ref<any[]>([
-	{ prop: 'directionText', label: '呼叫方向' },
-	{ prop: 'fromNo', label: '主叫号码', minWidth: 120 },
-	{ prop: 'toNo', label: '被叫号码', minWidth: 120 },
-	{ prop: 'telNo', label: '响应分机' },
-	{ prop: 'staffNo', label: '工号' },
-	{ prop: 'groupId', label: '功能组号码', minWidth: 120 },
-	{
-		prop: 'beginIvrTime',
-		label: '开始时间',
-		minWidth: 160,
-		render: (scope: any) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-	},
-	{ prop: 'endTime', label: '挂断时间', minWidth: 160, render: (scope: any) => <span>{formatDate(scope.row.endTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
-	{ prop: 'waitDuration', label: '等待时长(秒)', minWidth: 110 },
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 160, align: 'center' },
-]);
 const changeTba = () => {
 	ruleFormRef.value?.resetFields();
 	drawerRuleFormRef.value?.resetFields();
@@ -413,11 +290,11 @@ const queryList = async (isQuery: boolean = false) => {
 };
 // 失联工单
 const IsMissOrder = ref(false);
-const changeMissOrder = (val: any)=>{
-	if(!val) state.queryParams.IsMissOrder = null;
+const changeMissOrder = (val: any) => {
+	if (!val) state.queryParams.IsMissOrder = null;
 	else state.queryParams.IsMissOrder = val;
 	handleQuery();
-}
+};
 /** 重置按钮操作 */
 const drawer = ref(false);
 const drawerRuleFormRef = ref();
@@ -447,7 +324,6 @@ const onDownload = (row: any) => {
 		autofocus: false,
 	})
 		.then(() => {
-			// window.open(themeConfig.value.recordPrefix + row.audioFile);
 			downloadFileBySrc(themeConfig.value.recordPrefix + row.audioFile, row.audioFile);
 		})
 		.catch(() => {});
@@ -479,7 +355,12 @@ const getBaseData = async () => {
 onMounted(() => {
 	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onActivated(() => {
 	mittBus.on('clearCachePage', () => {
 		//清除缓存
@@ -490,10 +371,3 @@ onBeforeUnmount(() => {
 	mittBus.off('clearCachePage');
 });
 </script>
-<style lang="scss" scoped>
-.tels-callLog-container {
-	:deep(.pro-table-main) {
-		height: calc(100% - 42px);
-	}
-}
-</style>