reactor:部分列表页面样式调整;

.env.development

@@ -3,11 +3,11 @@ 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
 # 数据共享平台请求地址
 VITE_DATASHARE_API_YRL=http://ds.12345lm.cn
 # socket API
-VITE_API_SOCKET_URL=http://110.188.24.28:50100/hubs/hotline
+VITE_API_SOCKET_URL=http://110.188.24.28:50300/hubs/hotline
 # 上传 API
 VITE_API_UPLOAD_URL=http://110.188.24.28:50120
 # 文件上传地址前缀
@@ -25,4 +25,4 @@ VITE_JTHS_API_URL=http://118.121.58.161:19021
 # 捷通华声AppKey
 VITE_JTHS_APPKEY=MTAwMDAx
 # 当前地州市
-VITE_CURRENT_CITY=yibin
+VITE_CURRENT_CITY=zigong

src/views/quality/done/index.vue

@@ -1,58 +1,62 @@
 <template>
-	<div class="quality-done-container layout-pd">
-		<el-card shadow="never">
-			<el-tabs v-model="state.queryParams.Source" @tab-change="handleQuery">
+	<div class="quality-done-container layout-padding">
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<el-tabs v-model="state.queryParams.Source" @tab-change="handleQuery" class="tabs h100">
 				<el-tab-pane label="受理已质检" :name="1"></el-tab-pane>
 				<el-tab-pane label="派单已质检" :name="2"></el-tab-pane>
 				<el-tab-pane label="回访已质检" :name="3"></el-tab-pane>
+				<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 #table-search>
+						<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="value">
+								<input-number-range v-model="state.queryParams.value" />
+							</el-form-item>
+							<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="handleQuery"
+									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>
+					</template>
+					<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="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>
+				</ProTable>
 			</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="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"
-						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="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>
-			</ProTable>
-		</el-card>
+		</div>
 		<!-- 质检 -->
 		<quality-inspection ref="qualityInspectionRef" @updateList="queryList" />
 	</div>
@@ -64,6 +68,7 @@ import { FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { qualityBaseData, qualityList } from '@/api/quality';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
+import Other from '@/utils/other';
 
 // 引入组件
 const QualityInspection = defineAsyncComponent(() => import('@/views/quality/done/components/Quality-inspection.vue')); // 质检
@@ -75,16 +80,16 @@ const proTableRef = ref<RefType>(); // 表格ref
 const columns = ref<any[]>([]);
 
 // 定义变量内容
-const state = reactive({
+const state = reactive<any>({
 	loading: false, // 加载状态
 	queryParams: {
 		// 查询参数
 		PageIndex: 1,
-		PageSize: 10,
+		PageSize: 20,
 		Source: 1,
 		CreationTimeStart: null, // 创建时间 开始
 		CreationTimeEnd: null, // 创建时间 结束
-		exTime: [], // 办理期限
+		crTime: [], // 办理期限
 		State: 1, // 待质检
 		Keyword: null,
 		value: [0, 100],
@@ -104,20 +109,6 @@ const getBaseData = async () => {
 		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: '工单编码', minWidth: 140 },
@@ -218,6 +209,7 @@ const handleQuery = () => {
 	queryList();
 };
 // 查询已质检列表
+const requestParams = ref({});
 const queryList = () => {
 	state.loading = true;
 	switch (state.queryParams.Source) {
@@ -233,12 +225,14 @@ const queryList = () => {
 		default:
 			break;
 	}
-	const request = {
-		...state.queryParams,
-		MaxGrade: state.queryParams.value[1],
-		MinGrade: state.queryParams.value[0],
-	};
-	qualityList(request)
+	requestParams.value = Other.deepClone(state.queryParams);
+	requestParams.value.CreationTimeStart = state.queryParams.crTime === null ? null : state.queryParams.crTime[0]; // 生成时间
+	requestParams.value.CreationTimeEnd = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
+	Reflect.deleteProperty(requestParams.value, 'crTime'); // 删除无用的参数
+	requestParams.value.MinGrade = state.queryParams.value === null ? null : state.queryParams.value[0]; // 分数区间
+	requestParams.value.MaxGrade = state.queryParams.value === null ? null : state.queryParams.value[1];
+	Reflect.deleteProperty(requestParams.value, 'value'); // 删除无用的参数
+	qualityList(requestParams.value)
 		.then((res) => {
 			state.loading = false;
 			state.tableData = res.result.items ?? [];
@@ -271,3 +265,18 @@ onMounted(() => {
 	queryList();
 });
 </script>
+<style lang="scss" scoped>
+.quality-done-container {
+	.tabs {
+		display: flex;
+		flex-direction: column;
+		overflow: auto;
+		:deep(.pro-table-main) {
+			height: 100%;
+		}
+		:deep(.el-tabs__content) {
+			height: 100%;
+		}
+	}
+}
+</style>

src/views/quality/index/index.vue

@@ -1,53 +1,57 @@
 <template>
-	<div class="quality-container layout-pd">
-		<el-card shadow="never">
-			<el-tabs v-model="state.queryParams.Source" @tab-change="handleQuery">
+	<div class="quality-container layout-padding">
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<el-tabs v-model="state.queryParams.Source" @tab-change="handleQuery" class="tabs h100">
 				<el-tab-pane :label="item.value" :name="item.key" v-for="item in qualitySourceOptions" :key="item.key"></el-tab-pane>
+				<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 #table-search>
+						<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="crTime">
+								<el-date-picker
+									v-model="state.queryParams.crTime"
+									type="datetimerange"
+									unlink-panels
+									range-separator="至"
+									start-placeholder="开始时间"
+									end-placeholder="结束时间"
+									:shortcuts="shortcuts"
+									@change="handleQuery"
+									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>
+					</template>
+					<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-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>
+		</div>
 		<!-- 质检 -->
 		<quality-inspection ref="qualityInspectionRef" @updateList="queryList" />
 	</div>
@@ -59,6 +63,7 @@ import { FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { qualityBaseData, qualityList } from '@/api/quality';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
+import Other from '@/utils/other';
 
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
@@ -85,16 +90,16 @@ const columns = ref<any[]>([
 	{ label: '操作', minWidth: 140, fixed: 'right', align: 'center', prop: 'operation' },
 ]);
 // 定义变量内容
-const state = reactive({
+const state = reactive<any>({
 	loading: false, // 加载状态
 	queryParams: {
 		// 查询参数
 		PageIndex: 1,
-		PageSize: 10,
+		PageSize: 20,
 		Source: 1, // 受理待质检
+		crTime: [], // 创建时间
 		CreationTimeStart: null, // 创建时间 开始
 		CreationTimeEnd: null, // 创建时间 结束
-		exTime: [], // 办理期限
 		State: 0, // 待质检
 		Keyword: null,
 	},
@@ -113,20 +118,6 @@ const getBaseData = async () => {
 		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: '工单编码', minWidth: 140 },
@@ -141,7 +132,7 @@ const acceptQualityColumns = [
 	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
 	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
 	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'order.hotspotName', label: '热点分类' , minWidth: 150},
+	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
 	{
 		prop: 'order.acceptorName',
 		label: '受理人',
@@ -154,7 +145,7 @@ const acceptQualityColumns = [
 const assignQualityColumns = [
 	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
 	{ prop: 'aiQuality', label: '质检方式', minWidth: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
-	{ prop: 'order.sourceChannel', label: '来源渠道' , minWidth: 100},
+	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
 	{
 		prop: 'order.startTime',
 		label: '受理时间',
@@ -162,7 +153,7 @@ const assignQualityColumns = [
 		render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS'),
 	},
 	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.statusText', label: '工单状态' , minWidth: 100},
+	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
 	{ prop: 'title', label: '工单标题', minWidth: 200 },
 	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
 	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
@@ -218,7 +209,7 @@ const visitQualityColumns = [
 		minWidth: 160,
 		render: (scope: any) => formatDate(scope.row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS'),
 	},
-	{ prop: 'order.counterSignTypeText', label: '是否会签',minWidth: 90 },
+	{ prop: 'order.counterSignTypeText', label: '是否会签', minWidth: 90 },
 	{ label: '操作', width: 140, fixed: 'right', align: 'center', prop: 'operation' },
 ];
 // 手动查询，将页码设置为1
@@ -227,6 +218,7 @@ const handleQuery = () => {
 	queryList();
 };
 // 查询质检列表
+const requestParams = ref({});
 const queryList = () => {
 	state.loading = true;
 	switch (state.queryParams.Source) {
@@ -242,7 +234,11 @@ const queryList = () => {
 		default:
 			break;
 	}
-	qualityList(state.queryParams)
+	requestParams.value = Other.deepClone(state.queryParams);
+	requestParams.value.CreationTimeStart = state.queryParams.crTime === null ? null : state.queryParams.crTime[0]; // 生成时间
+	requestParams.value.CreationTimeEnd = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
+  Reflect.deleteProperty(requestParams.value, 'crTime'); // 删除无用的参数
+	qualityList(requestParams.value)
 		.then((res) => {
 			state.loading = false;
 			state.tableData = res.result.items ?? [];
@@ -274,5 +270,16 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .quality-container {
+	.tabs {
+		display: flex;
+		flex-direction: column;
+		overflow: auto;
+		:deep(.pro-table-main) {
+			height: 100%;
+		}
+		:deep(.el-tabs__content) {
+			height: 100%;
+		}
+	}
 }
 </style>

src/views/quality/lexicon/index.vue

@@ -1,27 +1,6 @@
 <template>
-	<div class="quality-lexicon-container layout-pd">
-		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-				<el-form-item label="违禁词" prop="Name">
-					<el-input v-model="state.queryParams.Name" placeholder="请填写违禁词" clearable @keyup.enter="handleQuery" class="keyword-input" />
-				</el-form-item>
-				<el-form-item label="违禁词分类" prop="Classify">
-					<el-select v-model="state.queryParams.Classify" placeholder="请选择违禁词分类" @change="handleQuery">
-						<el-option v-for="item in prohibitedClassify" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="违禁词属性" prop="Type">
-					<el-select v-model="state.queryParams.Type" placeholder="请选择违禁词属性" @change="handleQuery">
-						<el-option v-for="item in prohibitedType" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
-					</el-select>
-				</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>
-		</el-card>
-		<el-card shadow="never">
+	<div class="quality-lexicon-container layout-padding">
+    <div class="layout-padding-auto layout-padding-view pd20">
 			<ProTable
 				ref="proTableRef"
 				:columns="columns"
@@ -32,7 +11,27 @@
 				v-model:page-index="state.queryParams.PageIndex"
 				v-model:page-size="state.queryParams.PageSize"
 			>
-				<!-- 表格 header 按钮 -->
+        <template #table-search>
+          <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+            <el-form-item label="违禁词" prop="Name">
+              <el-input v-model="state.queryParams.Name" placeholder="请填写违禁词" clearable @keyup.enter="handleQuery" class="keyword-input" />
+            </el-form-item>
+            <el-form-item label="违禁词分类" prop="Classify">
+              <el-select v-model="state.queryParams.Classify" placeholder="请选择违禁词分类" @change="handleQuery">
+                <el-option v-for="item in prohibitedClassify" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="违禁词属性" prop="Type">
+              <el-select v-model="state.queryParams.Type" placeholder="请选择违禁词属性" @change="handleQuery">
+                <el-option v-for="item in prohibitedType" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+              </el-select>
+            </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>
+        </template>
 				<template #tableHeader="scope">
 					<el-button type="primary" @click="onLexiconAdd" v-auth="'quality:lexicon:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
 					<el-button type="danger" @click="onLexiconDelete" v-auth="'quality:lexicon:delete'" :disabled="!scope.isSelected">
@@ -44,7 +43,7 @@
 					<el-button link type="primary" @click="onLexiconEdit(row)" v-auth="'quality:lexicon:edit'" title="编辑违禁词"> 编辑 </el-button>
 				</template>
 			</ProTable>
-		</el-card>
+		</div>
 		<!--  违禁词新增  -->
 		<lexicon-add ref="lexiconAddRef" @updateList="queryList" :prohibitedClassify="prohibitedClassify" :prohibitedType="prohibitedType" />
 		<!--  违禁词编辑  -->
@@ -95,7 +94,7 @@ const state = reactive({
 	queryParams: {
 		// 查询参数
 		PageIndex: 1,
-		PageSize: 10,
+		PageSize: 20,
 		Classify: null,
 		Type: null,
 		Name: null,

src/views/quality/project/index.vue

@@ -1,22 +1,6 @@
 <template>
-	<div class="quality-project-container layout-pd">
-		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-				<el-form-item label="质检项名称" prop="Name">
-					<el-input v-model="state.queryParams.Name" placeholder="请填写质检项目名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
-				</el-form-item>
-				<el-form-item label="质检项分组" prop="GroupingName">
-					<el-select v-model="state.queryParams.GroupingName" placeholder="请选择质检项目分组" @change="handleQuery">
-						<el-option v-for="item in qualityItemGrouping" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
-					</el-select>
-				</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>
-		</el-card>
-		<el-card shadow="never">
+	<div class="quality-project-container layout-padding">
+    <div class="layout-padding-auto layout-padding-view pd20">
 			<ProTable
 				ref="proTableRef"
 				:columns="columns"
@@ -27,6 +11,22 @@
 				v-model:page-index="state.queryParams.PageIndex"
 				v-model:page-size="state.queryParams.PageSize"
 			>
+        <template #table-search>
+          <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+            <el-form-item label="质检项名称" prop="Name">
+              <el-input v-model="state.queryParams.Name" placeholder="请填写质检项目名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
+            </el-form-item>
+            <el-form-item label="质检项分组" prop="GroupingName">
+              <el-select v-model="state.queryParams.GroupingName" placeholder="请选择质检项目分组" @change="handleQuery">
+                <el-option v-for="item in qualityItemGrouping" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+              </el-select>
+            </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>
+        </template>
 				<!-- 表格 header 按钮 -->
 				<template #tableHeader="scope">
 					<el-button type="primary" @click="onProjectAdd" v-waves v-auth="'quality:project:add'">
@@ -44,7 +44,7 @@
 					<el-button link type="primary" @click="onProjectEdit(row)" v-auth="'quality:project:edit'" title="编辑质检项目"> 编辑 </el-button>
 				</template>
 			</ProTable>
-		</el-card>
+		</div>
 		<!--  质检项目新增  -->
 		<project-add ref="projectAddRef" @updateList="queryList" :qualityItemGrouping="qualityItemGrouping" />
 		<!--  质检项目编辑  -->
@@ -120,7 +120,7 @@ const state = reactive({
 	queryParams: {
 		// 查询参数
 		PageIndex: 1,
-		PageSize: 10,
+		PageSize: 20,
 		GroupingName: null,
 		Type: null,
 		Name: null,

src/views/quality/template/index.vue

@@ -1,22 +1,6 @@
 <template>
-	<div class="quality-template-container layout-pd">
-		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-				<el-form-item label="模版名称" prop="Name">
-					<el-input v-model="state.queryParams.Name" placeholder="请填写模版名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
-				</el-form-item>
-				<el-form-item label="质检分类" prop="Grouping">
-					<el-select v-model="state.queryParams.Grouping" placeholder="请选择质检分类" @change="handleQuery">
-						<el-option v-for="item in templateGrouping" :value="item.key" :key="item.key" :label="item.value" />
-					</el-select>
-				</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>
-		</el-card>
-		<el-card shadow="never">
+	<div class="quality-template-container layout-padding">
+    <div class="layout-padding-auto layout-padding-view pd20">
 			<ProTable
 				ref="proTableRef"
 				:columns="columns"
@@ -27,7 +11,22 @@
 				v-model:page-index="state.queryParams.PageIndex"
 				v-model:page-size="state.queryParams.PageSize"
 			>
-				<!-- 表格 header 按钮 -->
+        <template #table-search>
+          <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+            <el-form-item label="模版名称" prop="Name">
+              <el-input v-model="state.queryParams.Name" placeholder="请填写模版名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
+            </el-form-item>
+            <el-form-item label="质检分类" prop="Grouping">
+              <el-select v-model="state.queryParams.Grouping" placeholder="请选择质检分类" @change="handleQuery">
+                <el-option v-for="item in templateGrouping" :value="item.key" :key="item.key" :label="item.value" />
+              </el-select>
+            </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>
+        </template>
 				<template #tableHeader="scope">
 					<el-button type="primary" @click="onTemplateAdd" v-auth="'quality:template:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
 					<el-button type="danger" @click="onTemplateDelete" v-auth="'quality:template:delete'" :disabled="!scope.isSelected">
@@ -42,7 +41,7 @@
 					<el-button link type="primary" @click="onTemplateEdit(row)" v-auth="'quality:template:edit'" title="编辑模板"> 编辑 </el-button>
 				</template>
 			</ProTable>
-		</el-card>
+		</div>
 		<!--  模板新增  -->
 		<quality-template-add ref="templateAdd" @updateList="queryList" :templateGrouping="templateGrouping" />
 		<!--  模板编辑  -->
@@ -116,7 +115,7 @@ const state = reactive({
 	queryParams: {
 		// 查询参数
 		PageIndex: 1,
-		PageSize: 10,
+		PageSize: 20,
 		Grouping: null,
 		Name: null,
 	},

src/views/system/config/holiday/index.vue

@@ -1,66 +1,66 @@
 <template>
-	<div class="system-holidayConfig-container layout-padding">
-		<div class="layout-padding-auto layout-padding-view pd20">
-			<el-calendar v-model="today" :range="dateRange" v-loading="loading" style="overflow:auto;">
-				<template #header="{ date }">
-					<div class="flex-center-center">
+  <div class="system-holidayConfig-container layout-pd">
+    <el-card shadow="never">
+      <el-calendar v-model="today" :range="dateRange" v-loading="loading">
+        <template #header="{ date }">
+          <div class="flex-center-center">
 						<span class="mr5">选择月份：</span
-						><el-date-picker v-model="month" type="month" :clearable="false" placeholder="请选择月份" @change="selectMonth" />
-					</div>
-					<el-button-group v-auth="'system:holiday:workDay'">
-						<el-button type="primary" @click="setHoliday" :disabled="!multipleDates.length">
-							<SvgIcon name="ele-Sunny" class="mr3" /> 设定休息日</el-button
-						>
-						<el-button type="primary" @click="setWorkDay" :disabled="!multipleDates.length">
-							<SvgIcon name="ele-Monitor" class="mr3" /> 设定工作日</el-button
-						>
-						<el-button type="primary" @click="clearSelect" :disabled="!multipleDates.length"
-							><SvgIcon name="ele-Delete" class="mr3" /> 清空选择</el-button
-						>
-					</el-button-group>
-					<!--					<el-button-group>
-						<el-button @click="setWorkTime"><SvgIcon name="ele-AlarmClock" class="mr3" /> 设定工作时间</el-button>
-					</el-button-group>-->
-				</template>
-				<template #date-cell="{ data }">
-					<template v-for="(item, index) in state.calendarData" :key="index">
-						<div v-if="data.day === item.currantTime" class="h100">
-							<el-checkbox v-model="item.checked" class="w100 h100">
-								<div>
-									{{ dayjs(data.day).format('D')
-									}}<span :class="item.isWorkDay ? 'color-primary' : 'color-success'">（{{ item.isWorkDay ? '工作日' : '休息日' }}）</span>
-								</div>
-								<div class="lunar" :class="{ 'color-danger font-bold': isFestival(data) }">{{ solarToLunar(data) }}</div>
-							</el-checkbox>
-						</div>
-					</template>
-				</template>
-			</el-calendar>
-		</div>
-		<!--  工作时间设置  -->
-		<el-dialog title="设定工作时间" v-model="dialogVisible" width="600px" draggable>
-			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="120px">
-				<el-row :gutter="35">
-					<el-col>
-						<el-form-item label="休息日工作时间" prop="time" :rules="[{ required: true, message: '请选择休息日工作时间', trigger: 'change' }]">
-							<el-time-picker v-model="state.ruleForm.time" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
-						</el-form-item>
-					</el-col>
-					<el-col>
-						<el-form-item label="工作日工作时间" prop="time1" :rules="[{ required: true, message: '请选择工作日工作时间', trigger: 'change' }]">
-							<el-time-picker v-model="state.ruleForm.time1" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
-						</el-form-item>
-					</el-col>
-				</el-row>
-			</el-form>
-			<template #footer>
+            ><el-date-picker v-model="month" type="month" :clearable="false" placeholder="请选择月份" @change="selectMonth" />
+          </div>
+          <el-button-group v-auth="'system:holiday:workDay'">
+            <el-button type="primary" @click="setHoliday" :disabled="!multipleDates.length">
+              <SvgIcon name="ele-Sunny" class="mr3" /> 设定休息日</el-button
+            >
+            <el-button type="primary" @click="setWorkDay" :disabled="!multipleDates.length">
+              <SvgIcon name="ele-Monitor" class="mr3" /> 设定工作日</el-button
+            >
+            <el-button type="primary" @click="clearSelect" :disabled="!multipleDates.length"
+            ><SvgIcon name="ele-Delete" class="mr3" /> 清空选择</el-button
+            >
+          </el-button-group>
+          <!--					<el-button-group>
+            <el-button @click="setWorkTime"><SvgIcon name="ele-AlarmClock" class="mr3" /> 设定工作时间</el-button>
+          </el-button-group>-->
+        </template>
+        <template #date-cell="{ data }">
+          <template v-for="(item, index) in state.calendarData" :key="index">
+            <div v-if="data.day === item.currantTime" class="h100">
+              <el-checkbox v-model="item.checked" class="w100 h100">
+                <div>
+                  {{ dayjs(data.day).format('D')
+                  }}<span :class="item.isWorkDay ? 'color-primary' : 'color-success'">（{{ item.isWorkDay ? '工作日' : '休息日' }}）</span>
+                </div>
+                <div class="lunar" :class="{ 'color-danger font-bold': isFestival(data) }">{{ solarToLunar(data) }}</div>
+              </el-checkbox>
+            </div>
+          </template>
+        </template>
+      </el-calendar>
+    </el-card>
+    <!--  工作时间设置  -->
+    <el-dialog title="设定工作时间" v-model="dialogVisible" width="600px" draggable>
+      <el-form :model="state.ruleForm" ref="ruleFormRef" label-width="120px">
+        <el-row :gutter="35">
+          <el-col>
+            <el-form-item label="休息日工作时间" prop="time" :rules="[{ required: true, message: '请选择休息日工作时间', trigger: 'change' }]">
+              <el-time-picker v-model="state.ruleForm.time" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
+            </el-form-item>
+          </el-col>
+          <el-col>
+            <el-form-item label="工作日工作时间" prop="time1" :rules="[{ required: true, message: '请选择工作日工作时间', trigger: 'change' }]">
+              <el-time-picker v-model="state.ruleForm.time1" is-range range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
 				<span class="dialog-footer">
 					<el-button @click="dialogVisible = false" class="default-button">取 消</el-button>
 					<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="loading">确 定 </el-button>
 				</span>
-			</template>
-		</el-dialog>
-	</div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script setup lang="ts" name="holidayConfig">
@@ -72,11 +72,11 @@ import { getDaysSetting, setHolidayApi } from '@/api/system/holiday';
 import { auth } from '@/utils/authFunction';
 
 const state = reactive<any>({
-	ruleForm: {
-		time: '',
-		time1: '',
-	},
-	calendarData: [], // 日历数据
+  ruleForm: {
+    time: '',
+    time1: '',
+  },
+  calendarData: [], // 日历数据
 });
 const today = ref(new Date()); // 当前日期
 const month = ref(new Date()); // 月份
@@ -84,132 +84,132 @@ const dialogVisible = ref(false); // 是否显示弹窗
 const loading = ref(false); // 加载状态
 // 选择月份
 const selectMonth = async (val: Date) => {
-	state.calendarData = [];
-	const days: number = dayjs(val).daysInMonth();
-	state.calendarData = Array.from({ length: days }, (_, i) => ({
-		currantTime: dayjs(val).startOf('month').add(i, 'day').format('YYYY-MM-DD'),
-		checked: false,
-		isWorkDay: ![0, 6].includes(dayjs(val).startOf('month').add(i, 'day').day()),
-	}));
-	dateRange.value = [new Date(dayjs(val).startOf('month').format('YYYY-MM-DD')), new Date(dayjs(val).endOf('month').format('YYYY-MM-DD'))];
-	await getSetting(dayjs(val).format('YYYY'), dayjs(val).format('MM'));
-	today.value = val;
+  state.calendarData = [];
+  const days: number = dayjs(val).daysInMonth();
+  state.calendarData = Array.from({ length: days }, (_, i) => ({
+    currantTime: dayjs(val).startOf('month').add(i, 'day').format('YYYY-MM-DD'),
+    checked: false,
+    isWorkDay: ![0, 6].includes(dayjs(val).startOf('month').add(i, 'day').day()),
+  }));
+  dateRange.value = [new Date(dayjs(val).startOf('month').format('YYYY-MM-DD')), new Date(dayjs(val).endOf('month').format('YYYY-MM-DD'))];
+  await getSetting(dayjs(val).format('YYYY'), dayjs(val).format('MM'));
+  today.value = val;
 };
 // 日期范围
 const dateRange = ref([
-	new Date(dayjs(today.value).startOf('month').format('YYYY-MM-DD')),
-	new Date(dayjs(today.value).endOf('month').format('YYYY-MM-DD')),
+  new Date(dayjs(today.value).startOf('month').format('YYYY-MM-DD')),
+  new Date(dayjs(today.value).endOf('month').format('YYYY-MM-DD')),
 ]); // 日期范围
 // 设置休息日
 const setHoliday = () => {
-	ElMessageBox.confirm(`您确定要将【${multipleDates.value.map((item: any) => dayjs(item).format('YYYY-MM-DD')).join(',')}】设为休息日吗？`, '提示', {
-		type: 'warning',
-		draggable: true,
-	})
-		.then(() => {
-			setHolidayApi({
-				list: multipleDates.value,
-				isWorkDay: false,
-			}).then(() => {
-				ElMessage.success('设置成功');
-				selectMonth(today.value);
-			});
-		})
-		.catch(() => {});
+  ElMessageBox.confirm(`您确定要将【${multipleDates.value.map((item: any) => dayjs(item).format('YYYY-MM-DD')).join(',')}】设为休息日吗？`, '提示', {
+    type: 'warning',
+    draggable: true,
+  })
+      .then(() => {
+        setHolidayApi({
+          list: multipleDates.value,
+          isWorkDay: false,
+        }).then(() => {
+          ElMessage.success('设置成功');
+          selectMonth(today.value);
+        });
+      })
+      .catch(() => {});
 };
 // 设置工作日
 const setWorkDay = () => {
-	ElMessageBox.confirm(`您确定要将【${multipleDates.value.map((item: any) => dayjs(item).format('YYYY-MM-DD')).join(',')}】设为工作日吗？`, '提示', {
-		type: 'warning',
-		draggable: true,
-	})
-		.then(() => {
-			setHolidayApi({
-				list: multipleDates.value,
-				isWorkDay: true,
-			}).then(() => {
-				ElMessage.success('设置成功');
-				selectMonth(today.value);
-			});
-		})
-		.catch(() => {});
+  ElMessageBox.confirm(`您确定要将【${multipleDates.value.map((item: any) => dayjs(item).format('YYYY-MM-DD')).join(',')}】设为工作日吗？`, '提示', {
+    type: 'warning',
+    draggable: true,
+  })
+      .then(() => {
+        setHolidayApi({
+          list: multipleDates.value,
+          isWorkDay: true,
+        }).then(() => {
+          ElMessage.success('设置成功');
+          selectMonth(today.value);
+        });
+      })
+      .catch(() => {});
 };
 // 设置工作时间
 const setWorkTime = () => {
-	dialogVisible.value = true;
+  dialogVisible.value = true;
 };
 // 清除选择
 const clearSelect = () => {
-	state.calendarData.forEach((item: any) => {
-		item.checked = false;
-	});
+  state.calendarData.forEach((item: any) => {
+    item.checked = false;
+  });
 };
 // 获取所选中的日期
 const multipleDates = computed(() => {
-	return state.calendarData.filter((item: any) => item.checked).map((item: any) => item.currantTime);
+  return state.calendarData.filter((item: any) => item.checked).map((item: any) => item.currantTime);
 });
 // 表单ref
 const ruleFormRef = ref<RefType>();
 // 表单提交
 const onSubmit = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.validate((valid: boolean) => {
-		if (!valid) return;
-	});
+  if (!formEl) return;
+  formEl.validate((valid: boolean) => {
+    if (!valid) return;
+  });
 };
 // 获取休息日设置
 const getSetting = async (dateYear: string, dateMoth: string) => {
-	loading.value = true;
-	try {
-		const { result } = await getDaysSetting(dateYear, dateMoth);
-		result.forEach((i: any) => {
-			const item = state.calendarData.find((j: any) => dayjs(i.day).format('YYYY-MM-DD') === j.currantTime);
-			if (item) {
-				item.isWorkDay = i.isWorkDay;
-			}
-		});
-	} catch {
-		// handle error if needed
-	} finally {
-		loading.value = false;
-	}
+  loading.value = true;
+  try {
+    const { result } = await getDaysSetting(dateYear, dateMoth);
+    result.forEach((i: any) => {
+      const item = state.calendarData.find((j: any) => dayjs(i.day).format('YYYY-MM-DD') === j.currantTime);
+      if (item) {
+        item.isWorkDay = i.isWorkDay;
+      }
+    });
+  } catch {
+    // handle error if needed
+  } finally {
+    loading.value = false;
+  }
 };
 // 是否休息日
 const isFestival = (slotData: any) => {
-	let solarDayArr = slotData.day.split('-');
-	let lunarDay: any = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2]);
-	return lunarDay.lunarFestival || lunarDay.festival;
+  let solarDayArr = slotData.day.split('-');
+  let lunarDay: any = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2]);
+  return lunarDay.lunarFestival || lunarDay.festival;
 };
 // 公历转农历
 const solarToLunar = (slotData: any) => {
-	let solarDayArr = slotData.day.split('-');
-	let lunarDay: any = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2]);
-	// 农历日期
-	let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn;
-	return lunarDay.lunarFestival ? lunarDay.lunarFestival : lunarDay.festival ? lunarDay.festival : lunarMD;
+  let solarDayArr = slotData.day.split('-');
+  let lunarDay: any = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2]);
+  // 农历日期
+  let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn;
+  return lunarDay.lunarFestival ? lunarDay.lunarFestival : lunarDay.festival ? lunarDay.festival : lunarMD;
 };
 onMounted(async () => {
-	const days: number = dayjs(today.value).daysInMonth();
-	state.calendarData = Array.from({ length: days }, (_, i) => ({
-		currantTime: dayjs(today.value).startOf('month').add(i, 'day').format('YYYY-MM-DD'),
-		isWorkDay: ![0, 6].includes(dayjs(today.value).startOf('month').add(i, 'day').day()),
-		checked: false,
-	}));
-	await getSetting(dayjs(today.value).format('YYYY'), dayjs(today.value).format('MM'));
+  const days: number = dayjs(today.value).daysInMonth();
+  state.calendarData = Array.from({ length: days }, (_, i) => ({
+    currantTime: dayjs(today.value).startOf('month').add(i, 'day').format('YYYY-MM-DD'),
+    isWorkDay: ![0, 6].includes(dayjs(today.value).startOf('month').add(i, 'day').day()),
+    checked: false,
+  }));
+  await getSetting(dayjs(today.value).format('YYYY'), dayjs(today.value).format('MM'));
 });
 </script>
 <style scoped lang="scss">
 /**日期div的样式-农历*/
 .el-calendar-table .el-calendar-day > div .lunar {
-	padding-top: 10px;
+  padding-top: 10px;
 }
 :deep(.el-checkbox) {
-	align-items: center;
-	justify-content: center;
+  align-items: center;
+  justify-content: center;
 }
 :deep(.el-checkbox__input) {
-	position: absolute;
-	right: 0;
-	top: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
 </style>

src/views/system/dataAuth/index.vue

@@ -11,7 +11,6 @@
 				</template>
 			</ProTable>
 		</div>
-
 		<data-auth-add ref="dataAuthAddRef" @updateList="queryList" />
 		<data-auth-edit ref="dataAuthEditRef" @updateList="queryList" />
 	</div>

src/views/tels/callLog/ybCallLog.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="tels-callLog-container layout-pd">
-		<el-card shadow="never">
-			<el-tabs v-model="state.queryParams.type" @tab-change="changeTba">
+	<div class="tels-callLog-container layout-padding">
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<el-tabs v-model="state.queryParams.type" @tab-change="changeTba" class="tabs h100">
 				<el-tab-pane name="0" label="全部"></el-tab-pane>
 				<el-tab-pane name="1" label="呼入已接"></el-tab-pane>
 				<el-tab-pane name="2" label="呼出已接"></el-tab-pane>
@@ -9,284 +9,307 @@
 				<el-tab-pane name="4" label="智能应答"></el-tab-pane>
 				<el-tab-pane name="5" label="呼入白名单"></el-tab-pane>
 				<el-tab-pane name="6" label="呼入黑名单"></el-tab-pane>
-			</el-tabs>
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-width="20px">
-				<el-row :gutter="10">
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-						<el-form-item prop="CPN">
-							<el-input v-model="state.queryParams.CPN" placeholder="主叫号码" clearable @keyup.enter="handleQuery" />
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-						<el-form-item prop="CDPN">
-							<el-input v-model="state.queryParams.CDPN" placeholder="被叫号码" clearable @keyup.enter="handleQuery" />
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="['0', '1', '2', '3', '5', '6'].includes(state.queryParams.type)">
-						<el-form-item prop="TelNo">
-							<el-input v-model="state.queryParams.TelNo" placeholder="响应分机" clearable @keyup.enter="handleQuery" />
-						</el-form-item>
-					</el-col>
+				<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 #table-search>
+						<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-width="20px">
+							<el-row :gutter="10">
+								<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+									<el-form-item prop="CPN">
+										<el-input v-model="state.queryParams.CPN" placeholder="主叫号码" clearable @keyup.enter="handleQuery" />
+									</el-form-item>
+								</el-col>
+								<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+									<el-form-item prop="CDPN">
+										<el-input v-model="state.queryParams.CDPN" placeholder="被叫号码" clearable @keyup.enter="handleQuery" />
+									</el-form-item>
+								</el-col>
+								<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="['0', '1', '2', '3', '5', '6'].includes(state.queryParams.type)">
+									<el-form-item prop="TelNo">
+										<el-input v-model="state.queryParams.TelNo" placeholder="响应分机" clearable @keyup.enter="handleQuery" />
+									</el-form-item>
+								</el-col>
 
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="['0', '1', '2', '3', '5'].includes(state.queryParams.type)">
-						<el-form-item prop="UserName">
-							<el-input v-model="state.queryParams.UserName" placeholder="话务员名称" clearable @keyup.enter="handleQuery" />
-						</el-form-item>
-					</el-col>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol || ['4', '6'].includes(state.queryParams.type)">
-							<el-form-item prop="gateway">
-								<el-input v-model="state.queryParams.gateway" placeholder="中继号码" clearable @keyup.enter="handleQuery" />
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '3'].includes(state.queryParams.type)">
-							<el-form-item prop="CallDirection">
-								<el-select v-model="state.queryParams.CallDirection" placeholder="电话方向" clearable class="w100" @change="handleQuery">
-									<el-option v-for="item in state.callDirection" :value="item.key" :key="item.key" :label="item.value" />
-								</el-select>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0'].includes(state.queryParams.type)">
-							<el-form-item prop="OnState">
-								<el-select v-model="state.queryParams.OnState" placeholder="通话结果" clearable class="w100" @change="handleQuery">
-									<el-option v-for="item in state.onState" :value="item.key" :key="item.key" :label="item.value" />
-								</el-select>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol || ['4'].includes(state.queryParams.type)">
-							<el-form-item prop="EndBy">
-								<el-select v-model="state.queryParams.EndBy" placeholder="挂机类型" clearable class="w100" @change="handleQuery">
-									<el-option v-for="item in state.endByOptions" :value="item.key" :key="item.key" :label="item.value" />
-								</el-select>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3', '4', '5'].includes(state.queryParams.type)">
-							<el-form-item prop="beginIvrTime">
-								<el-date-picker
-									v-model="state.queryParams.beginIvrTime"
-									type="datetimerange"
-									unlink-panels
-									range-separator="至"
-									start-placeholder="ivr开始开始时间"
-									end-placeholder="ivr开始结束时间"
-									:shortcuts="shortcuts"
-									@change="handleQuery"
-									value-format="YYYY-MM-DD[T]HH:mm:ss"
-									:default-time="defaultTimeStartEnd"
-								/>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3', '4', '5'].includes(state.queryParams.type)">
-							<el-form-item prop="endIvrTime">
-								<el-date-picker
-									v-model="state.queryParams.endIvrTime"
-									type="datetimerange"
-									unlink-panels
-									range-separator="至"
-									start-placeholder="ivr结束开始时间"
-									end-placeholder="ivr结束结束时间"
-									:shortcuts="shortcuts"
-									@change="handleQuery"
-									value-format="YYYY-MM-DD[T]HH:mm:ss"
-									:default-time="defaultTimeStartEnd"
-								/>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3', '5'].includes(state.queryParams.type)">
-							<el-form-item prop="beginQueueTime">
-								<el-date-picker
-									v-model="state.queryParams.beginQueueTime"
-									type="datetimerange"
-									unlink-panels
-									range-separator="至"
-									start-placeholder="队列开始开始时间"
-									end-placeholder="队列开始结束时间"
-									:shortcuts="shortcuts"
-									@change="handleQuery"
-									value-format="YYYY-MM-DD[T]HH:mm:ss"
-									:default-time="defaultTimeStartEnd"
-								/>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3', '5'].includes(state.queryParams.type)">
-							<el-form-item prop="endQueueTime">
-								<el-date-picker
-									v-model="state.queryParams.endQueueTime"
-									type="datetimerange"
-									unlink-panels
-									range-separator="至"
-									start-placeholder="队列结束开始时间"
-									end-placeholder="队列结束结束时间"
-									:shortcuts="shortcuts"
-									@change="handleQuery"
-									value-format="YYYY-MM-DD[T]HH:mm:ss"
-									:default-time="defaultTimeStartEnd"
-								/>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3', '5'].includes(state.queryParams.type)">
-							<el-form-item prop="beginRingTime">
-								<el-date-picker
-									v-model="state.queryParams.beginRingTime"
-									type="datetimerange"
-									unlink-panels
-									range-separator="至"
-									start-placeholder="振铃开始开始时间"
-									end-placeholder="振铃开始结束时间"
-									:shortcuts="shortcuts"
-									@change="handleQuery"
-									value-format="YYYY-MM-DD[T]HH:mm:ss"
-									:default-time="defaultTimeStartEnd"
-								/>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3', '5'].includes(state.queryParams.type)">
-							<el-form-item prop="endRingTime">
-								<el-date-picker
-									v-model="state.queryParams.endRingTime"
-									type="datetimerange"
-									unlink-panels
-									range-separator="至"
-									start-placeholder="振铃结束开始时间"
-									end-placeholder="振铃结束结束时间"
-									:shortcuts="shortcuts"
-									@change="handleQuery"
-									value-format="YYYY-MM-DD[T]HH:mm:ss"
-									:default-time="defaultTimeStartEnd"
-								/>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
-							<el-form-item prop="callTime">
-								<el-date-picker
-									v-model="state.queryParams.callTime"
-									type="datetimerange"
-									unlink-panels
-									range-separator="至"
-									start-placeholder="开始开始时间"
-									end-placeholder="开始结束时间"
-									:shortcuts="shortcuts"
-									@change="handleQuery"
-									value-format="YYYY-MM-DD[T]HH:mm:ss"
-									:default-time="defaultTimeStartEnd"
-								/>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '2', '4', '5'].includes(state.queryParams.type)">
-							<el-form-item prop="answeredTime">
-								<el-date-picker
-									v-model="state.queryParams.answeredTime"
-									type="datetimerange"
-									unlink-panels
-									range-separator="至"
-									start-placeholder="接通开始时间"
-									end-placeholder="接通结束时间"
-									:shortcuts="shortcuts"
-									@change="handleQuery"
-									value-format="YYYY-MM-DD[T]HH:mm:ss"
-									:default-time="defaultTimeStartEnd"
-								/>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
-							<el-form-item prop="overTime">
-								<el-date-picker
-									v-model="state.queryParams.overTime"
-									type="datetimerange"
-									unlink-panels
-									range-separator="至"
-									start-placeholder="挂断开始时间"
-									end-placeholder="挂断结束时间"
-									:shortcuts="shortcuts"
-									@change="handleQuery"
-									value-format="YYYY-MM-DD[T]HH:mm:ss"
-									:default-time="defaultTimeStartEnd"
-								/>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1'].includes(state.queryParams.type)">
-							<el-form-item prop="OrderNo">
-								<el-input v-model="state.queryParams.OrderNo" placeholder="工单编码" clearable @keyup.enter="handleQuery" />
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1'].includes(state.queryParams.type)">
-							<el-form-item prop="Title">
-								<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" />
-							</el-form-item>
-						</el-col>
-					</transition>
-				</el-row>
-				<div class="w100 ml20">
-					<el-button type="primary" @click="handleQuery" :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-button link type="primary" @click="closeSearch" :loading="state.loading">
-						{{ searchCol ? '展开' : '收起' }}
-						<SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
-					</el-button>
-				</div>
-			</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 #operation="{ row }">
-					<template v-if="['1'].includes(state.queryParams.type)">
-						<el-button link type="primary" @click="onCreate(row)" title="创建失联工单" v-auth="'tels:callLog:connectOrder'" v-if="!row.externalId">
-							失联工单
-						</el-button>
-						<el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.externalId">
-							关联业务
-						</el-button>
-						<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.recordingAbsolutePath">播放录音</el-button>
-						<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.recordingAbsolutePath"> 下载录音 </el-button>
+								<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="['0', '1', '2', '3', '5'].includes(state.queryParams.type)">
+									<el-form-item prop="UserName">
+										<el-input v-model="state.queryParams.UserName" placeholder="话务员名称" clearable @keyup.enter="handleQuery" />
+									</el-form-item>
+								</el-col>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol || ['4', '6'].includes(state.queryParams.type)">
+										<el-form-item prop="gateway">
+											<el-input v-model="state.queryParams.gateway" placeholder="中继号码" clearable @keyup.enter="handleQuery" />
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '3'].includes(state.queryParams.type)">
+										<el-form-item prop="CallDirection">
+											<el-select v-model="state.queryParams.CallDirection" placeholder="电话方向" clearable class="w100" @change="handleQuery">
+												<el-option v-for="item in state.callDirection" :value="item.key" :key="item.key" :label="item.value" />
+											</el-select>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0'].includes(state.queryParams.type)">
+										<el-form-item prop="OnState">
+											<el-select v-model="state.queryParams.OnState" placeholder="通话结果" clearable class="w100" @change="handleQuery">
+												<el-option v-for="item in state.onState" :value="item.key" :key="item.key" :label="item.value" />
+											</el-select>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol || ['4'].includes(state.queryParams.type)">
+										<el-form-item prop="EndBy">
+											<el-select v-model="state.queryParams.EndBy" placeholder="挂机类型" clearable class="w100" @change="handleQuery">
+												<el-option v-for="item in state.endByOptions" :value="item.key" :key="item.key" :label="item.value" />
+											</el-select>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col
+										:xs="24"
+										:sm="12"
+										:md="12"
+										:lg="6"
+										:xl="6"
+										v-show="!searchCol && ['0', '1', '3', '4', '5'].includes(state.queryParams.type)"
+									>
+										<el-form-item prop="beginIvrTime">
+											<el-date-picker
+												v-model="state.queryParams.beginIvrTime"
+												type="datetimerange"
+												unlink-panels
+												range-separator="至"
+												start-placeholder="ivr开始开始时间"
+												end-placeholder="ivr开始结束时间"
+												:shortcuts="shortcuts"
+												@change="handleQuery"
+												value-format="YYYY-MM-DD[T]HH:mm:ss"
+												:default-time="defaultTimeStartEnd"
+											/>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col
+										:xs="24"
+										:sm="12"
+										:md="12"
+										:lg="6"
+										:xl="6"
+										v-show="!searchCol && ['0', '1', '3', '4', '5'].includes(state.queryParams.type)"
+									>
+										<el-form-item prop="endIvrTime">
+											<el-date-picker
+												v-model="state.queryParams.endIvrTime"
+												type="datetimerange"
+												unlink-panels
+												range-separator="至"
+												start-placeholder="ivr结束开始时间"
+												end-placeholder="ivr结束结束时间"
+												:shortcuts="shortcuts"
+												@change="handleQuery"
+												value-format="YYYY-MM-DD[T]HH:mm:ss"
+												:default-time="defaultTimeStartEnd"
+											/>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3', '5'].includes(state.queryParams.type)">
+										<el-form-item prop="beginQueueTime">
+											<el-date-picker
+												v-model="state.queryParams.beginQueueTime"
+												type="datetimerange"
+												unlink-panels
+												range-separator="至"
+												start-placeholder="队列开始开始时间"
+												end-placeholder="队列开始结束时间"
+												:shortcuts="shortcuts"
+												@change="handleQuery"
+												value-format="YYYY-MM-DD[T]HH:mm:ss"
+												:default-time="defaultTimeStartEnd"
+											/>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3', '5'].includes(state.queryParams.type)">
+										<el-form-item prop="endQueueTime">
+											<el-date-picker
+												v-model="state.queryParams.endQueueTime"
+												type="datetimerange"
+												unlink-panels
+												range-separator="至"
+												start-placeholder="队列结束开始时间"
+												end-placeholder="队列结束结束时间"
+												:shortcuts="shortcuts"
+												@change="handleQuery"
+												value-format="YYYY-MM-DD[T]HH:mm:ss"
+												:default-time="defaultTimeStartEnd"
+											/>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3', '5'].includes(state.queryParams.type)">
+										<el-form-item prop="beginRingTime">
+											<el-date-picker
+												v-model="state.queryParams.beginRingTime"
+												type="datetimerange"
+												unlink-panels
+												range-separator="至"
+												start-placeholder="振铃开始开始时间"
+												end-placeholder="振铃开始结束时间"
+												:shortcuts="shortcuts"
+												@change="handleQuery"
+												value-format="YYYY-MM-DD[T]HH:mm:ss"
+												:default-time="defaultTimeStartEnd"
+											/>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1', '3', '5'].includes(state.queryParams.type)">
+										<el-form-item prop="endRingTime">
+											<el-date-picker
+												v-model="state.queryParams.endRingTime"
+												type="datetimerange"
+												unlink-panels
+												range-separator="至"
+												start-placeholder="振铃结束开始时间"
+												end-placeholder="振铃结束结束时间"
+												:shortcuts="shortcuts"
+												@change="handleQuery"
+												value-format="YYYY-MM-DD[T]HH:mm:ss"
+												:default-time="defaultTimeStartEnd"
+											/>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+										<el-form-item prop="callTime">
+											<el-date-picker
+												v-model="state.queryParams.callTime"
+												type="datetimerange"
+												unlink-panels
+												range-separator="至"
+												start-placeholder="开始开始时间"
+												end-placeholder="开始结束时间"
+												:shortcuts="shortcuts"
+												@change="handleQuery"
+												value-format="YYYY-MM-DD[T]HH:mm:ss"
+												:default-time="defaultTimeStartEnd"
+											/>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col
+										:xs="24"
+										:sm="12"
+										:md="12"
+										:lg="6"
+										:xl="6"
+										v-show="!searchCol && ['0', '1', '2', '4', '5'].includes(state.queryParams.type)"
+									>
+										<el-form-item prop="answeredTime">
+											<el-date-picker
+												v-model="state.queryParams.answeredTime"
+												type="datetimerange"
+												unlink-panels
+												range-separator="至"
+												start-placeholder="接通开始时间"
+												end-placeholder="接通结束时间"
+												:shortcuts="shortcuts"
+												@change="handleQuery"
+												value-format="YYYY-MM-DD[T]HH:mm:ss"
+												:default-time="defaultTimeStartEnd"
+											/>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol">
+										<el-form-item prop="overTime">
+											<el-date-picker
+												v-model="state.queryParams.overTime"
+												type="datetimerange"
+												unlink-panels
+												range-separator="至"
+												start-placeholder="挂断开始时间"
+												end-placeholder="挂断结束时间"
+												:shortcuts="shortcuts"
+												@change="handleQuery"
+												value-format="YYYY-MM-DD[T]HH:mm:ss"
+												:default-time="defaultTimeStartEnd"
+											/>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1'].includes(state.queryParams.type)">
+										<el-form-item prop="OrderNo">
+											<el-input v-model="state.queryParams.OrderNo" placeholder="工单编码" clearable @keyup.enter="handleQuery" />
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1'].includes(state.queryParams.type)">
+										<el-form-item prop="Title">
+											<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" />
+										</el-form-item>
+									</el-col>
+								</transition>
+							</el-row>
+							<div class="w100 ml20">
+								<el-button type="primary" @click="handleQuery" :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-button link type="primary" @click="closeSearch" :loading="state.loading">
+									{{ searchCol ? '展开' : '收起' }}
+									<SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
+								</el-button>
+							</div>
+						</el-form>
+					</template>
+					<template #operation="{ row }">
+						<template v-if="['1'].includes(state.queryParams.type)">
+							<el-button link type="primary" @click="onCreate(row)" title="创建失联工单" v-auth="'tels:callLog:connectOrder'" v-if="!row.externalId">
+								失联工单
+							</el-button>
+							<el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.externalId">
+								关联业务
+							</el-button>
+							<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.recordingAbsolutePath">播放录音</el-button>
+							<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.recordingAbsolutePath"> 下载录音 </el-button>
+						</template>
+						<template v-else>
+							<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.recordingAbsolutePath">播放录音</el-button>
+							<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.recordingAbsolutePath"> 下载录音 </el-button>
+						</template>
 					</template>
-					<template v-else>
-						<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.recordingAbsolutePath">播放录音</el-button>
-						<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.recordingAbsolutePath"> 下载录音 </el-button>
+					<template #title="{ row }">
+						<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
 					</template>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-			</ProTable>
-		</el-card>
+				</ProTable>
+			</el-tabs>
+		</div>
 		<!-- 播放录音 -->
 		<play-record ref="playRecordRef" />
 		<!-- 业务关联 -->
@@ -321,7 +344,7 @@ const columns = ref<any[]>([]);
 const state = reactive<any>({
 	queryParams: {
 		PageIndex: 1, // 当前页
-		PageSize: 10, // 每页条数
+		PageSize: 20, // 每页条数
 		type: '0',
 		StaffNo: null, // 分机号
 		CPN: null, // 主叫号码
@@ -379,7 +402,7 @@ const allColumns = [
 	{ prop: 'cdpn', label: '被叫号码', minWidth: 120 },
 	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
 	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'telNo', label: '响应分机'},
+	{ prop: 'telNo', label: '响应分机' },
 	{ prop: 'gateway', label: '中继号码', minWidth: 100 },
 	{ prop: 'mobileAreaName', label: '号码归属地', minWidth: 120 },
 	{ prop: 'userName', label: '话务员', minWidth: 120 },
@@ -876,11 +899,24 @@ onBeforeUnmount(() => {
 });
 </script>
 <style lang="scss" scoped>
-.arrow {
-	transition: transform var(--el-transition-duration);
-	cursor: pointer;
-}
-.arrow.is-reverse {
-	transform: rotateZ(-180deg);
+.tels-callLog-container {
+	.arrow {
+		transition: transform var(--el-transition-duration);
+		cursor: pointer;
+	}
+	.arrow.is-reverse {
+		transform: rotateZ(-180deg);
+	}
+	.tabs {
+		display: flex;
+		flex-direction: column;
+		overflow: auto;
+		:deep(.pro-table-main) {
+			height: 100%;
+		}
+		:deep(.el-tabs__content) {
+			height: 100%;
+		}
+	}
 }
 </style>

src/views/tels/callLog/zgCallLog.vue

@@ -1,151 +1,155 @@
 <template>
-	<div class="tels-callLog-container layout-pd">
-		<el-card shadow="never">
-			<el-tabs v-model="state.queryParams.type" @tab-change="changeTba">
+	<div class="tels-callLog-container layout-padding">
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<el-tabs v-model="state.queryParams.type" @tab-change="changeTba" class="tabs h100">
 				<!--				<el-tab-pane name="0" label="全部"></el-tab-pane>-->
 				<el-tab-pane name="1" label="呼入列表"></el-tab-pane>
 				<el-tab-pane name="2" label="呼出列表"></el-tab-pane>
 				<el-tab-pane name="3" label="未接列表"></el-tab-pane>
-			</el-tabs>
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-minWidth="20px" class="mb10">
-				<el-row :gutter="10">
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-						<el-form-item prop="FromNo">
-							<el-input v-model="state.queryParams.FromNo" placeholder="主叫号码" clearable @keyup.enter="handleQuery" />
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-						<el-form-item prop="ToNo">
-							<el-input v-model="state.queryParams.ToNo" placeholder="被叫号码" clearable @keyup.enter="handleQuery" />
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-						<el-form-item prop="TelNo">
-							<el-input v-model="state.queryParams.TelNo" placeholder="响应分机" clearable @keyup.enter="handleQuery" />
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-						<el-form-item prop="crTime">
-							<el-date-picker
-								v-model="state.queryParams.crTime"
-								type="datetimerange"
-								unlink-panels
-								range-separator="至"
-								start-placeholder="开始时间"
-								end-placeholder="挂断时间"
-								:shortcuts="shortcuts"
-								@change="handleQuery"
-								value-format="YYYY-MM-DD[T]HH:mm:ss"
-								:default-time="defaultTimeStartEnd"
-							/>
-						</el-form-item>
-					</el-col>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['3'].includes(state.queryParams.type)">
-							<el-form-item prop="Direction">
-								<el-select v-model="state.queryParams.Direction" placeholder="电话方向" clearable class="w100" @change="handleQuery">
-									<el-option v-for="item in state.callDirectionOption" :value="item.key" :key="item.key" :label="item.value" />
-								</el-select>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol || ['4'].includes(state.queryParams.type)">
-							<el-form-item prop="EndBy">
-								<el-select v-model="state.queryParams.EndBy" placeholder="挂断状态" clearable class="w100" @change="handleQuery">
-									<el-option v-for="item in state.endByOptions" :value="item.key" :key="item.key" :label="item.value" />
-								</el-select>
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['1'].includes(state.queryParams.type)">
-							<el-form-item prop="UserName">
-								<el-input v-model="state.queryParams.UserName" placeholder="话务员名称" clearable @keyup.enter="handleQuery" />
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1'].includes(state.queryParams.type)">
-							<el-form-item prop="OrderNo">
-								<el-input v-model="state.queryParams.OrderNo" placeholder="工单编码" clearable @keyup.enter="handleQuery" />
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1'].includes(state.queryParams.type)">
-							<el-form-item prop="Title">
-								<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" />
-							</el-form-item>
-						</el-col>
-					</transition>
-					<transition name="el-zoom-in-top">
-						<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['3'].includes(state.queryParams.type)">
-							<el-form-item prop="WaitDurationStart">
-								<el-row :gutter="10">
-									<el-col :span="12">
-										<el-input placeholder="等待时长开始" v-model.number="state.queryParams.WaitDurationStart" clearable />
+				<ProTable
+					ref="proTableRef"
+					:columns="columns"
+					:data="state.tableData"
+					@updateTable="queryList"
+					:loading="state.loading"
+					:key="Math.random()"
+					:pagination="false"
+				>
+					<template #table-search>
+						<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-minWidth="20px">
+							<el-row :gutter="10">
+								<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+									<el-form-item prop="FromNo">
+										<el-input v-model="state.queryParams.FromNo" placeholder="主叫号码" clearable @keyup.enter="handleQuery" />
+									</el-form-item>
+								</el-col>
+								<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+									<el-form-item prop="ToNo">
+										<el-input v-model="state.queryParams.ToNo" placeholder="被叫号码" clearable @keyup.enter="handleQuery" />
+									</el-form-item>
+								</el-col>
+								<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+									<el-form-item prop="TelNo">
+										<el-input v-model="state.queryParams.TelNo" placeholder="响应分机" clearable @keyup.enter="handleQuery" />
+									</el-form-item>
+								</el-col>
+								<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+									<el-form-item prop="crTime">
+										<el-date-picker
+											v-model="state.queryParams.crTime"
+											type="datetimerange"
+											unlink-panels
+											range-separator="至"
+											start-placeholder="开始时间"
+											end-placeholder="挂断时间"
+											:shortcuts="shortcuts"
+											@change="handleQuery"
+											value-format="YYYY-MM-DD[T]HH:mm:ss"
+											:default-time="defaultTimeStartEnd"
+										/>
+									</el-form-item>
+								</el-col>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['3'].includes(state.queryParams.type)">
+										<el-form-item prop="Direction">
+											<el-select v-model="state.queryParams.Direction" placeholder="电话方向" clearable class="w100" @change="handleQuery">
+												<el-option v-for="item in state.callDirectionOption" :value="item.key" :key="item.key" :label="item.value" />
+											</el-select>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol || ['4'].includes(state.queryParams.type)">
+										<el-form-item prop="EndBy">
+											<el-select v-model="state.queryParams.EndBy" placeholder="挂断状态" clearable class="w100" @change="handleQuery">
+												<el-option v-for="item in state.endByOptions" :value="item.key" :key="item.key" :label="item.value" />
+											</el-select>
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['1'].includes(state.queryParams.type)">
+										<el-form-item prop="UserName">
+											<el-input v-model="state.queryParams.UserName" placeholder="话务员名称" clearable @keyup.enter="handleQuery" />
+										</el-form-item>
 									</el-col>
-									<el-col :span="12">
-										<el-input placeholder="等待时长结束" v-model.number="state.queryParams.WaitDurationEnd" clearable />
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1'].includes(state.queryParams.type)">
+										<el-form-item prop="OrderNo">
+											<el-input v-model="state.queryParams.OrderNo" placeholder="工单编码" clearable @keyup.enter="handleQuery" />
+										</el-form-item>
 									</el-col>
-								</el-row>
-							</el-form-item>
-						</el-col>
-					</transition>
-				</el-row>
-				<div class="w100 ml20">
-					<el-button type="primary" @click="handleQuery" :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-button link type="primary" @click="closeSearch" :loading="state.loading">
-						{{ searchCol ? '展开' : '收起' }}
-						<SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
-					</el-button>
-				</div>
-			</el-form>
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
-				:key="Math.random()"
-				:pagination="false"
-			>
-				<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.externalId">
-							失联工单
-						</el-button>
-						<!--						<el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.externalId">
-							关联业务
-						</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>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['0', '1'].includes(state.queryParams.type)">
+										<el-form-item prop="Title">
+											<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" />
+										</el-form-item>
+									</el-col>
+								</transition>
+								<transition name="el-zoom-in-top">
+									<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-show="!searchCol && ['3'].includes(state.queryParams.type)">
+										<el-form-item prop="WaitDurationStart">
+											<el-row :gutter="10">
+												<el-col :span="12">
+													<el-input placeholder="等待时长开始" v-model.number="state.queryParams.WaitDurationStart" clearable />
+												</el-col>
+												<el-col :span="12">
+													<el-input placeholder="等待时长结束" v-model.number="state.queryParams.WaitDurationEnd" clearable />
+												</el-col>
+											</el-row>
+										</el-form-item>
+									</el-col>
+								</transition>
+							</el-row>
+							<div class="w100 ml20">
+								<el-button type="primary" @click="handleQuery" :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-button link type="primary" @click="closeSearch" :loading="state.loading">
+									{{ searchCol ? '展开' : '收起' }}
+									<SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
+								</el-button>
+							</div>
+						</el-form>
 					</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 #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.externalId">
+								失联工单
+							</el-button>
+							<!--						<el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.externalId">
+                关联业务
+              </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>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-			</ProTable>
-			<div class="flex-end mt20">
-				<!--					<el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
-				<el-pagination
-					layout="prev, pager, next"
-					:total="totalSize"
-					@current-change="handleCurrentChange"
-					:page-size="currentSize"
-					:current-page="currentPage"
-					:pager-count="5"
-				/>
-			</div>
-		</el-card>
+					<template #title="{ row }">
+						<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+					</template>
+					<template #pagination>
+						<div class="flex-end mt20">
+							<!--					<el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
+							<el-pagination
+								layout="prev, pager, next"
+								:total="totalSize"
+								@current-change="handleCurrentChange"
+								:page-size="currentSize"
+								:current-page="currentPage"
+								:pager-count="5"
+							/>
+						</div>
+					</template>
+				</ProTable>
+			</el-tabs>
+		</div>
 		<!-- 播放录音 -->
 		<play-record ref="playRecordRef" />
 		<!-- 业务关联 -->
@@ -179,7 +183,7 @@ const columns = ref<any[]>([]);
 const state = reactive<any>({
 	queryParams: {
 		PageIndex: 1, // 当前页
-		PageSize: 10, // 每页条数
+		PageSize: 20, // 每页条数
 		type: '1', // 默认呼入列表
 		IsConnected: null, // 接通状态
 		FromNo: null, // 主叫
@@ -311,7 +315,7 @@ const handleQuery = () => {
 };
 // 改变页码
 const currentPage = ref(1); // 当前页
-const currentSize = ref(10); // 每页条数
+const currentSize = ref(20); // 每页条数
 const totalSize = ref(0); // 数据条总数
 const queryIndex = ref(0); // 数据批次
 const totalTable = ref([]); // 数据总数
@@ -381,7 +385,7 @@ const queryList = async (isQuery: boolean = false) => {
 const resetQuery = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
-  queryIndex.value = 0;
+	queryIndex.value = 0;
 	queryList();
 };
 // 播放录音
@@ -446,11 +450,24 @@ onBeforeUnmount(() => {
 });
 </script>
 <style lang="scss" scoped>
-.arrow {
-	transition: transform var(--el-transition-duration);
-	cursor: pointer;
-}
-.arrow.is-reverse {
-	transform: rotateZ(-180deg);
+.tels-callLog-container {
+	.arrow {
+		transition: transform var(--el-transition-duration);
+		cursor: pointer;
+	}
+	.arrow.is-reverse {
+		transform: rotateZ(-180deg);
+	}
+	.tabs {
+		display: flex;
+		flex-direction: column;
+		overflow: auto;
+		:deep(.pro-table-main) {
+			height: 100%;
+		}
+		:deep(.el-tabs__content) {
+			height: 100%;
+		}
+	}
 }
 </style>

src/views/tels/phoneAction.vue

@@ -1,44 +1,6 @@
 <template>
-	<div class="tels-callLog-container layout-pd">
-		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-width="20px">
-				<el-row :gutter="10">
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-						<el-form-item prop="UserName">
-							<el-input v-model="state.queryParams.UserName" placeholder="坐席人员" clearable @keyup.enter="handleQuery" />
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-						<el-form-item prop="StaffNo">
-							<el-input v-model="state.queryParams.StaffNo" placeholder="工号" clearable @keyup.enter="handleQuery" />
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-						<el-form-item prop="GroupId">
-							<el-input v-model="state.queryParams.GroupId" placeholder="工作组" clearable @keyup.enter="handleQuery" />
-						</el-form-item>
-					</el-col>
-					<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
-						<el-form-item prop="OperateState">
-							<el-select v-model="state.queryParams.OperateState" placeholder="动作类型" clearable class="w100" @change="handleQuery">
-								<el-option v-for="item in state.operations" :value="item.key" :key="item.key" :label="item.value" />
-							</el-select>
-						</el-form-item>
-					</el-col>
-				</el-row>
-				<div class="w100 ml20">
-					<el-button type="primary" @click="handleQuery" :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-button link type="primary" @click="closeSearch" :loading="state.loading">
-						{{ searchCol ? '展开' : '收起' }}
-						<SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
-					</el-button>-->
-				</div>
-			</el-form>
-		</el-card>
-		<el-card shadow="never">
+	<div class="tels-callLog-container layout-padding">
+		<div class="layout-padding-auto layout-padding-view pd20">
 			<ProTable
 				ref="proTableRef"
 				:columns="columns"
@@ -48,19 +10,59 @@
 				:key="Math.random()"
 				:pagination="false"
 			>
+				<template #table-search>
+					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-width="20px">
+						<el-row :gutter="10">
+							<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+								<el-form-item prop="UserName">
+									<el-input v-model="state.queryParams.UserName" placeholder="坐席人员" clearable @keyup.enter="handleQuery" />
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+								<el-form-item prop="StaffNo">
+									<el-input v-model="state.queryParams.StaffNo" placeholder="工号" clearable @keyup.enter="handleQuery" />
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+								<el-form-item prop="GroupId">
+									<el-input v-model="state.queryParams.GroupId" placeholder="工作组" clearable @keyup.enter="handleQuery" />
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+								<el-form-item prop="OperateState">
+									<el-select v-model="state.queryParams.OperateState" placeholder="动作类型" clearable class="w100" @change="handleQuery">
+										<el-option v-for="item in state.operations" :value="item.key" :key="item.key" :label="item.value" />
+									</el-select>
+								</el-form-item>
+							</el-col>
+						</el-row>
+						<div class="w100 ml20">
+							<el-button type="primary" @click="handleQuery" :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-button link type="primary" @click="closeSearch" :loading="state.loading">
+                          {{ searchCol ? '展开' : '收起' }}
+                          <SvgIcon :class="{ 'is-reverse': searchCol }" name="ele-ArrowUp" class="mr5 arrow" size="18px" />
+                        </el-button>-->
+						</div>
+					</el-form>
+				</template>
+				<template #pagination>
+					<div class="flex-end mt20">
+						<!--					<el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
+						<el-pagination
+							layout="prev, pager, next"
+							:total="totalSize"
+							@current-change="handleCurrentChange"
+							:page-size="currentSize"
+							:current-page="currentPage"
+							:pager-count="5"
+						/>
+					</div>
+				</template>
 			</ProTable>
-			<div class="flex-end mt20">
-				<!--					<el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
-				<el-pagination
-					layout="prev, pager, next"
-					:total="totalSize"
-					@current-change="handleCurrentChange"
-					:page-size="currentSize"
-					:current-page="currentPage"
-					:pager-count="5"
-				/>
-			</div>
-		</el-card>
+		</div>
 		<!-- 播放录音 -->
 		<play-record ref="playRecordRef" />
 		<!-- 业务关联 -->
@@ -73,9 +75,8 @@ import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { getNeedArr } from '@/utils/tools';
 import { formatDate } from '@/utils/formatTime';
-import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import Other from '@/utils/other';
-import { getCallCenterCallRecordBaseData, getCallCenterOperateRecord, getCallCenterOperateRecordBaseData } from '@/api/callCenter';
+import { getCallCenterOperateRecord, getCallCenterOperateRecordBaseData } from '@/api/callCenter';
 
 // 引入组件
 const PlayRecord = defineAsyncComponent(() => import('@/views/tels/callLog/component/Play-record.vue')); // 播放录音
@@ -112,7 +113,7 @@ const state = reactive<any>({
 	loading: false, // 加载
 	total: 0, // 总条数
 	callDirection: [],
-  operations: [],
+	operations: [],
 });
 const ruleFormRef = ref<FormInstance>(); // 表单ref
 const searchCol = ref(true); // 展开/收起
@@ -128,7 +129,7 @@ const handleQuery = () => {
 };
 // 改变页码
 const currentPage = ref(1); // 当前页
-const currentSize = ref(10); // 每页条数
+const currentSize = ref(20); // 每页条数
 const totalSize = ref(0); // 数据条总数
 const queryIndex = ref(0); // 数据批次
 const totalTable = ref([]); // 数据总数