reactor:延期列表和延期待审批表格重构完成;

src/views/business/delay/audit.vue

@@ -5,76 +5,116 @@
 				<el-tab-pane name="false" label="延期待审批" :disabled="state.loading"></el-tab-pane>
 				<el-tab-pane name="true" label="延期已审批" :disabled="state.loading"></el-tab-pane>
 			</el-tabs>
-			<ProTable
-				ref="proTableRef"
-				:columns="columnsTodo"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="关键字" prop="Keyword">
+					<el-input v-model.trim="state.queryParams.Keyword" 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="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-				v-if="state.queryParams.IsApply === 'false'"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="关键字" prop="Keyword">
-							<el-input v-model.trim="state.queryParams.Keyword" 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="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-				</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="onDetail(row)" title="延期详情"> 延期详情 </el-button>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="columnsDone"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					: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="businessDelayAudit"
+					:custom-config="{
+						storage: true,
+						checkMethod({ column }) {
+							if(state.queryParams.IsApply === 'false') {
+								return !['currentStepName','actualHandlerName'].includes(column.field);
+							}else{
+								return ![''].includes(column.field);
+							}
+						},
+					}"
+					showHeaderOverflow
+				>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.isProvinceText" title="省/市工单" width="90"></vxe-column>
+					<vxe-column field="order.title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" width="120" :visible="state.queryParams.IsApply === 'true'"></vxe-column>
+					<vxe-column field="actualHandlerName" title="当前审批人" width="120" :visible="state.queryParams.IsApply === 'true'"></vxe-column>
+					<vxe-column field="delayStateText" title="延期审批状态" width="110"></vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.orgLevelOneName" title="一级部门" width="140"></vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="order.actualHandleTime" title="接办时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="creationTime" title="延期申请时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="creatorName" title="延期申请人" width="120"></vxe-column>
+					<vxe-column field="creatorOrgName" title="延期申请部门" width="140"></vxe-column>
+					<vxe-column field="delayNum" title="延期申请时限" width="110"></vxe-column>
+					<vxe-column field="delayUnitText" title="延期申请单位" width="110"></vxe-column>
+					<vxe-column field="delayReason" title="申请理由" width="150"></vxe-column>
+					<vxe-column field="beforeDelay" title="申请前期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.beforeDelay, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="afterDelay" title="通过后期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.afterDelay, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="90" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onDetail(row)" title="延期详情"> 延期详情 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
 				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
+				v-model:current-page="state.queryParams.PageIndex"
 				v-model:page-size="state.queryParams.PageSize"
-				v-else
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="关键字" prop="Keyword">
-							<el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="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="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-				</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="onDetail(row)" title="延期详情"> 延期详情 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--  延期详情  -->
 		<delay-detail-com ref="delayDetailRef" @updateList="queryList" />
@@ -86,13 +126,13 @@
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
-import { useRouter } from 'vue-router';
 import { delayList } from '@/api/todo/delay';
 import { delayDetail } from '@/api/business/delay';
 // 引入组件
 const DelayDetailCom = defineAsyncComponent(() => import('@/views/business/delay/components/Delay-detail.vue')); // 延期详情
 const DelayEdit = defineAsyncComponent(() => import('@/views/business/delay/components/Delay-edit.vue')); // 延期修改
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive({
@@ -108,129 +148,6 @@ const state = reactive({
 	total: 0, // 总数
 });
 const ruleFormRef = ref<RefType>(); // 表单ref
-const router = useRouter(); // 路由
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([]);
-const columnsTodo = ref<any[]>([
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', width: 80 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'order.isProvinceText', label: '省/市工单', minWidth: 90 },
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'delayStateText', label: '延期审批状态', minWidth: 110 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.orgLevelOneName', label: '一级部门', minWidth: 140 },
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'order.actualHandleTime',
-		label: '接办时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'creationTime',
-		label: '延期申请时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'creatorOrgName', label: '延期申请部门', minWidth: 140 },
-	{ prop: 'creatorName', label: '延期申请人', minWidth: 120 },
-	{ prop: 'delayNum', label: '延期申请时限', minWidth: 110 },
-	{ prop: 'delayUnitText', label: '延期申请单位', minWidth: 110 },
-	{ prop: 'delayReason', label: '申请理由', minWidth: 150 },
-	{
-		prop: 'beforeDelay',
-		label: '申请前期满时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.beforeDelay, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'afterDelay',
-		label: '通过后期满时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.afterDelay, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 90, align: 'center' },
-])
-const columnsDone = ref<any[]>([
-	// 已办
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', width: 80 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'order.isProvinceText', label: '省/市工单', minWidth: 90 },
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'actualHandlerName', label: '当前审批人', minWidth: 120 },
-	{ prop: 'delayStateText', label: '延期审批状态', minWidth: 110 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.orgLevelOneName', label: '一级部门', minWidth: 140 },
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'order.actualHandleTime',
-		label: '接办时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'creationTime',
-		label: '延期申请时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'creatorOrgName', label: '延期申请部门', minWidth: 140 },
-	{ prop: 'creatorName', label: '延期申请人', minWidth: 120 },
-	{ prop: 'delayNum', label: '延期申请时限', minWidth: 110 },
-	{ prop: 'delayUnitText', label: '延期申请单位', minWidth: 110 },
-	{ prop: 'delayReason', label: '申请理由', minWidth: 150 },
-	{
-		prop: 'beforeDelay',
-		label: '申请前期满时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.beforeDelay, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'afterDelay',
-		label: '通过后期满时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.afterDelay, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 90, align: 'center' },
-])
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -275,7 +192,12 @@ const onDetail = async (row: any) => {
 		console.log(e);
 	}
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/business/delay/index.vue

@@ -1,7 +1,145 @@
 <template>
 	<div class="business-delay-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="数据范围" prop="DataScope" v-auth="'business:delay:DataScope'">
+					<el-segmented
+						:options="[
+									{
+										value: 1,
+										label: '我的',
+									},
+									{
+										value: 0,
+										label: '全部',
+									},
+								]"
+						v-model="state.queryParams.DataScope"
+						@change="handleQuery"
+						:disabled="state.loading"
+					/>
+				</el-form-item>
+				<el-form-item label="快捷查询" prop="QueryDelayState">
+					<el-segmented :options="queryDelayState" v-model="state.queryParams.QueryDelayState" @change="handleQuery" :disabled="state.loading" />
+				</el-form-item>
+				<el-form-item label="关键字" prop="Keyword">
+					<el-input
+						v-model.trim="state.queryParams.Keyword"
+						placeholder="工单编码/标题"
+						clearable
+						@keyup.enter="handleQuery"
+						class="keyword-input"
+					/>
+				</el-form-item>
+				<el-form-item label="延期状态" prop="DelayState">
+					<el-select v-model="state.queryParams.DelayState" placeholder="请选择延期状态" @change="handleQuery">
+						<el-option v-for="item in delayStateOptions" :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="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					: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="orderDelay"
+					:custom-config="{
+						storage: true,
+						checkMethod({ column }) {
+							if (['YiBin'].includes(themeConfig.appScope)) {
+								return !['automaticDelayNum'].includes(column.field);
+							}
+						},
+					}"
+					showHeaderOverflow
+				>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.isProvinceText" title="省/市工单" width="90"></vxe-column>
+					<vxe-column field="order.title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="automaticDelayNum" title="自动延期次数" width="120" :visible="['ZiGong'].includes(themeConfig.appScope)"></vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="actualHandlerName" title="审批人" width="120"></vxe-column>
+					<vxe-column field="delayStateText" title="延期申请状态" width="110"></vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.orgLevelOneName" title="一级部门" width="140"></vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="order.actualHandleTime" title="接办时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="creationTime" title="延期申请时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="creatorName" title="延期申请人" width="120"></vxe-column>
+					<vxe-column field="creatorOrgName" title="延期申请部门" width="140"></vxe-column>
+					<vxe-column field="delayNum" title="延期申请时限" width="110"></vxe-column>
+					<vxe-column field="delayUnitText" title="延期申请单位" width="110"></vxe-column>
+					<vxe-column field="delayReason" title="申请理由" width="150"></vxe-column>
+					<vxe-column field="beforeDelay" title="申请前期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.beforeDelay, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="afterDelay" title="通过后期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.afterDelay, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="90" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onDetail(row)" title="查看延期详情"> 延期详情 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
+<!--			<ProTable
 				ref="proTableRef"
 				:columns="columns"
 				:data="state.tableData"
@@ -13,68 +151,7 @@
 				v-if="['YiBin', 'LuZhou'].includes(themeConfig.appScope)"
 			>
 				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="数据范围" prop="DataScope" v-auth="'business:delay:DataScope'">
-							<el-segmented
-								:options="[
-									{
-										value: 1,
-										label: '我的',
-									},
-									{
-										value: 0,
-										label: '全部',
-									},
-								]"
-								v-model="state.queryParams.DataScope"
-								@change="handleQuery"
-								:disabled="state.loading"
-							/>
-						</el-form-item>
-						<el-form-item label="快捷查询" prop="QueryDelayState">
-							<el-segmented
-								:options="[
-									{
-										value: 0,
-										label: '全部',
-									},
-									{
-										value: 1,
-										label: '待审批',
-									},
-									{
-										value: 2,
-										label: '审批通过',
-									},
-									{
-										value: -1,
-										label: '审批拒绝',
-									},
-								]"
-								v-model="state.queryParams.QueryDelayState"
-								@change="handleQuery"
-								:disabled="state.loading"
-							/>
-						</el-form-item>
-						<el-form-item label="关键字" prop="Keyword">
-							<el-input
-								v-model.trim="state.queryParams.Keyword"
-								placeholder="工单编码/标题"
-								clearable
-								@keyup.enter="handleQuery"
-								class="keyword-input"
-							/>
-						</el-form-item>
-						<el-form-item label="延期状态" prop="DelayState">
-							<el-select v-model="state.queryParams.DelayState" placeholder="请选择延期状态" @change="handleQuery">
-								<el-option v-for="item in delayStateOptions" :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="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
+
 				</template>
 				<template #expiredStatusText="{ row }">
 					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
@@ -82,7 +159,7 @@
 				<template #title="{ row }">
 					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
 				</template>
-				<!-- 表格操作 -->
+				&lt;!&ndash; 表格操作 &ndash;&gt;
 				<template #operation="{ row }">
 					<el-button link type="primary" @click="onDetail(row)" title="查看延期详情"> 延期详情 </el-button>
 				</template>
@@ -162,11 +239,11 @@
 				<template #title="{ row }">
 					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
 				</template>
-				<!-- 表格操作 -->
+				&lt;!&ndash; 表格操作 &ndash;&gt;
 				<template #operation="{ row }">
 					<el-button link type="primary" @click="onDetail(row)" title="查看延期详情"> 延期详情 </el-button>
 				</template>
-			</ProTable>
+			</ProTable>-->
 		</div>
 		<!--  延期详情  -->
 		<delay-detail-com ref="delayDetailRef" @updateList="queryList" />
@@ -176,7 +253,7 @@
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
 			<el-form :model="state.queryParams" ref="drawerRuleFormRef" @submit.native.prevent label-width="100px">
 				<el-form-item label="当前节点" prop="CurrentStepName">
-<!--					<el-select v-model="state.queryParams.CurrentStepName" placeholder="当前节点" @change="handleQuery" clearable>
+					<!--					<el-select v-model="state.queryParams.CurrentStepName" placeholder="当前节点" @change="handleQuery" clearable>
 						<el-option v-for="item in state.visitTypeOptions" :value="item.key" :key="item.key" :label="item.value" />
 					</el-select>-->
 					<el-input v-model.trim="state.queryParams.CurrentStepName" placeholder="当前节点" clearable @keyup.enter="handleQuery" />
@@ -222,6 +299,7 @@ import Other from '@/utils/other';
 const DelayDetailCom = defineAsyncComponent(() => import('@/views/business/delay/components/Delay-detail.vue')); // 延期详情
 const DelayEdit = defineAsyncComponent(() => import('@/views/business/delay/components/Delay-edit.vue')); // 延期修改
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -357,7 +435,7 @@ const state = reactive<any>({
 		Keyword: null, // 关键字
 		DelayState: null,
 		DataScope: 1, // 默认我的
-		QueryDelayState: 0, // 快捷查询
+		QueryDelayState: -1, // 快捷查询 默认全部
 		CurrentStepName: null, // 当前节点
 		ActualHandlerName: null, // 审批人
 		OrgLevelOneName: null, // 一级部门
@@ -372,9 +450,18 @@ const state = reactive<any>({
 });
 // 获取查询条件基础信息
 const delayStateOptions = ref<EmptyArrayType>([]); // 延期状态
+const queryDelayState = ref<EmptyArrayType>([]); // 延期状态快捷查询
 const getBaseData = async () => {
 	const res: any = await delayBaseData();
 	delayStateOptions.value = res.result?.delayState ?? [];
+	queryDelayState.value = res.result?.queryDelayState
+		.map((item: any) => {
+			return {
+				label: item.value,
+				value: item.key,
+			};
+		})
+		.sort((a, b) => a.value - b.value);
 };
 // 手动查询，将页码设置为1
 const handleQuery = () => {
@@ -426,8 +513,13 @@ const onDetail = async (row: any) => {
 		console.log(e);
 	}
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(async () => {
 	await getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/business/order/index.vue

@@ -448,7 +448,7 @@
 					</vxe-column>
 				</vxe-table>
 			</div>
-			<div class="flex-end mt20" style="align-items: center">
+			<div class="flex-end" style="align-items: center">
 				<span v-loading="totalLoading" class="mr10">共 {{ totalCount }} 条</span>
 <!--				sizes-->
 				<el-pagination

src/views/tels/blacklist/index.vue

@@ -1,35 +1,68 @@
 <template>
 	<div class="tels-blacklist-container layout-padding">
-		<div  class="layout-padding-auto layout-padding-view pd20">
-			<ProTable ref="proTableRef" :columns="columns" :data="state.tableData" @updateTable="queryList" :loading="state.loading" :pagination="false">
-        <template #table-search>
-          <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-            <el-form-item label="黑白名单号码" prop="Phone">
-              <el-input v-model="state.queryParams.Phone" placeholder="请填写黑白名单号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-            </el-form-item>
-            <el-form-item label="类型" prop="SpecialFlag">
-              <el-select v-model="state.queryParams.SpecialFlag" placeholder="请选择类型">
-                <el-option v-for="item in specialFlagList" :key="item.value" :label="item.label" :value="item.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleQuery" :loading="state.loading" v-waves> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-              <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
-                <SvgIcon name="ele-Refresh" class="mr5" />重置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </template>
-				<template #tableHeader>
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+				<el-form-item label="黑白名单号码" prop="Phone">
+					<el-input v-model="state.queryParams.Phone" placeholder="请填写黑白名单号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="类型" prop="SpecialFlag">
+					<el-select v-model="state.queryParams.SpecialFlag" placeholder="请选择类型">
+						<el-option v-for="item in specialFlagList" :key="item.value" :label="item.label" :value="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)" class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+				<template #buttons>
 					<el-button type="primary" @click="onAddBlacklist" v-auth="'tels:blackList:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
 				</template>
-				<template #specialFlag="{ row }">
-					<span>{{ specialFlagList.find((item) => row.specialFlag === item.value).label }}</span>
-				</template>
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onRemove(row)" title="删除黑名单" v-auth="'tels:blackList:delete'"> 删除 </el-button>
-				</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
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="blacklist"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="phone" title="黑白名单号码" min-width="140"></vxe-column>
+					<vxe-column field="specialFlag" title="类型" min-width="140">
+						<template #default="{ row }">
+							<span>{{ specialFlagList.find((item) => row.specialFlag === item.value).label }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="creationTime" title="创建时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="90" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onRemove(row)" title="删除黑名单" v-auth="'tels:blackList:delete'"> 删除 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
 		</div>
 		<!--  新增黑名单  -->
 		<blacklist-add ref="blacklistAddRef" @updateList="handleQuery" :specialFlagList="specialFlagList" />
@@ -38,27 +71,13 @@
 
 <script lang="tsx" setup name="blacklist">
 import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
-import { ElMessageBox, ElMessage} from 'element-plus';
+import { ElMessageBox, ElMessage } from 'element-plus';
 import type { FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { queryBlacklist, removeBlacklist } from '@/api/public/wex';
 
 // 引入组件
 const BlacklistAdd = defineAsyncComponent(() => import('@/views/tels/blacklist/components/Blacklist-add.vue')); // 新增黑名单
-
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'phone', label: '黑白名单号码',minWidth:120 },
-	{ prop: 'specialFlag', label: '类型' },
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		width: 170,
-		render: (scope:any) => <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 140, align: 'center' },
-]);
 // 定义变量内容
 const state = reactive({
 	queryParams: {
@@ -74,7 +93,7 @@ const ruleFormRef = ref<FormInstance>(); // 表单ref
 /** 搜索按钮操作 节流操作 */
 const handleQuery = () => {
 	queryList();
-}
+};
 const specialFlagList = ref<any>([
 	{ value: 1, label: '白名单' },
 	{ value: 2, label: '呼入黑名单' },
@@ -98,7 +117,7 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
 	handleQuery();
-}
+};
 // 打开新增黑名单弹窗
 const blacklistAddRef = ref<RefType>();
 const onAddBlacklist = () => {
@@ -122,7 +141,12 @@ const onRemove = (row: any) => {
 		})
 		.catch(() => {});
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/tels/extension/YBExtension.vue

@@ -1,81 +1,105 @@
 <template>
 	<div class="tels-callLog-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				:pagination="false"
-				row-key="telNo"
+				custom
+				:refresh="{
+					queryMethod: queryList,
+				}"
 			>
-				<template #tableHeader>
+				<template #buttons>
 					<el-radio-group v-model="telState" class="mb10" @change="search">
 						<el-radio value=" "
-						>总数：
+							>总数：
 							<el-tag>{{ state.tableList.length }}</el-tag>
 						</el-radio>
 						<el-radio value="device"
-						>注册数：
+							>注册数：
 							<el-tag type="success">{{ registerCount }}</el-tag>
 						</el-radio>
 						<el-radio value="login"
-						>签入数：
+							>签入数：
 							<el-tag type="danger">{{ loginCount }}</el-tag>
 						</el-radio>
 						<el-radio value="ready"
-						>示闲数：
+							>示闲数：
 							<el-tag type="info">{{ readyCount }}</el-tag>
 						</el-radio>
 						<el-radio value="unready"
-						>小休数：
+							>小休数：
 							<el-tag type="success">{{ unreadyCount }}</el-tag>
 						</el-radio>
 						<el-radio value="ring"
-						>振铃数：
+							>振铃数：
 							<el-tag type="info">{{ busyCount }}</el-tag>
 						</el-radio>
 						<el-radio value="busy"
-						>通话数：
+							>通话数：
 							<el-tag type="danger">{{ busyCount }}</el-tag>
 						</el-radio>
 						<el-radio value="acw"
-						>整理数：
+							>整理数：
 							<el-tag type="info">{{ acwCount }}</el-tag>
 						</el-radio>
 						<el-radio value="held"
-						>保持数：
+							>保持数：
 							<el-tag type="success">{{ heldCount }}</el-tag>
 						</el-radio>
 						<el-radio value="threeWay"
-						>三方会议数：
+							>三方会议数：
 							<el-tag type="danger">{{ threeWayCount }}</el-tag>
 						</el-radio>
 					</el-radio-group>
 				</template>
-				<template #sipState="{ row }">
-					<el-tag v-if="row.sipState === 'true'" type="success">已注册</el-tag>
-					<el-tag v-else type="danger">未注册</el-tag>
-				</template>
-				<template #state="{ row }">
-					<el-tag v-if="row.state === 'login'" type="success">签入</el-tag>
-					<el-tag v-else-if="row.state === 'ready'" type="info">示闲</el-tag>
-					<el-tag v-else-if="row.state === 'unready'" type="warning">小休</el-tag>
-					<el-tag v-else-if="row.state === 'ring'" type="danger">振铃中</el-tag>
-					<el-tag v-else-if="row.state === 'busy'">通话</el-tag>
-					<el-tag v-else-if="row.state === 'acw'" type="info">整理</el-tag>
-					<el-tag v-else-if="row.state === 'logout'" type="danger">签出</el-tag>
-					<el-tag v-else-if="row.state === 'held'" type="danger">保持</el-tag>
-					<el-tag v-else-if="row.state === 'threeWay'" type="danger">三方会议</el-tag>
-				</template>
-				<template #operation="{ row }">
-					<!--              <el-button link type="primary" @click="onListen(row)" title="监听分机" v-auth="'tels:extension:listen'" v-if="row.state === 'busy'">
-                监听分机
-              </el-button>-->
-					<el-button link type="primary" @click="onOffline(row)" title="强制下线" v-auth="'tels:extension:forceLogout'"> 强制下线 </el-button>
-				</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
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="telsExtension"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="telNo" title="分机号" width="150"></vxe-column>
+					<vxe-column field="sipState" title="是否注册" width="150">
+						<template #default="{ row }">
+							<el-tag v-if="row.sipState === 'true'" type="success">已注册</el-tag>
+							<el-tag v-else type="danger">未注册</el-tag>
+						</template>
+					</vxe-column>
+					<vxe-column field="device" title="注册信息" min-width="150">
+						<template #default="{ row }"> {{ row.device }}({{ row.sipIp }}) </template>
+					</vxe-column>
+					<vxe-column field="state" title="状态" min-width="150">
+						<template #default="{ row }">
+							<el-tag v-if="row.state === 'login'" type="success">签入</el-tag>
+							<el-tag v-else-if="row.state === 'ready'" type="info">示闲</el-tag>
+							<el-tag v-else-if="row.state === 'unready'" type="warning">小休</el-tag>
+							<el-tag v-else-if="row.state === 'ring'" type="danger">振铃中</el-tag>
+							<el-tag v-else-if="row.state === 'busy'">通话</el-tag>
+							<el-tag v-else-if="row.state === 'acw'" type="info">整理</el-tag>
+							<el-tag v-else-if="row.state === 'logout'" type="danger">签出</el-tag>
+							<el-tag v-else-if="row.state === 'held'" type="danger">保持</el-tag>
+							<el-tag v-else-if="row.state === 'threeWay'" type="danger">三方会议</el-tag>
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="90" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onOffline(row)" title="强制下线" v-auth="'tels:extension:forceLogout'"> 强制下线 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
 		</div>
 	</div>
 </template>
@@ -86,31 +110,11 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import signalR from '@/utils/signalR';
 import { extensionList, forceLogout } from '@/api/tels/extension';
 
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'telNo', label: '分机号', width: 200 },
-	{ prop: 'sipState', label: '是否注册', width: 200 },
-	{
-		prop: 'device',
-		label: '注册信息',
-		render: (scope: any) => {
-			return (
-				<span>
-					{scope.row.device}({scope.row.sipIp})
-				</span>
-			);
-		},
-	},
-	{ prop: 'state', label: '状态', width: 200 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 90, align: 'center' },
-]);
 // 定义变量内容
 const state = reactive({
 	tableList: [], // 列表数据
 	tableData: [], // 显示的列表数据
 	loading: false, // 加载
-	total: 0, // 总条数
 });
 const telState = ref<string>(' ');
 /** 通话记录列表 */
@@ -193,12 +197,16 @@ const onOffline = (row: any) => {
 				.catch(() => {});
 		})
 		.catch(() => {});
-	// forceLogout(row.telNo);
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 	signalR.joinGroup('BigScreen-SeatState');
-	signalR.SR?.on('SeatState', (data:any) => {
+	signalR.SR?.on('SeatState', (data: any) => {
 		const item = state.tableList.find((item: any) => item.telNo === data.telNo);
 		if (item) {
 			item.state = data.state;

src/views/tels/extension/ZGExtension.vue

@@ -1,49 +1,68 @@
 <template>
 	<div class="tels-callLog-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+				<el-form-item label="分机号" prop="no">
+					<el-input v-model="state.queryParams.no" 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="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+			</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
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="telsExtension"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="no" title="分机号" min-width="150"></vxe-column>
+					<vxe-column field="registerIP" title="注册IP" min-width="150"></vxe-column>
+					<vxe-column field="telStatusText" title="分机状态" min-width="150"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="90" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onOffline(row)" v-auth="'tels:extension:forceLogout'" title="强制下线"> 强制下线 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
 				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
+				v-model:current-page="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="no">
-							<el-input v-model="state.queryParams.no" 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="resetQuery(ruleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onOffline(row)" v-auth="'tels:extension:forceLogout'" title="强制下线"> 强制下线 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
 
 <script lang="tsx" setup name="telsExtension">
-import { onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
-import { forceLogout, forceLogoutSelf, getExtensionList } from '@/api/tels/extension';
+import { forceLogoutSelf, getExtensionList } from '@/api/tels/extension';
 // 引入组件
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'no', label: '分机号' },
-	{ prop: 'registerIP', label: '注册IP', minWidth: 150 },
-	{ prop: 'telStatusText', label: '分机状态', minWidth: 150 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
 // 定义变量内容
 const state = reactive({
 	loading: false, // 加载状态
@@ -100,7 +119,12 @@ const onOffline = (row: any) => {
 		.catch(() => {});
 };
 // 页面加载时
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/tels/phoneAction.vue

@@ -1,44 +1,74 @@
 <template>
 	<div class="tels-callLog-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable ref="proTableRef" :columns="columns" :data="state.tableData" @updateTable="queryList" :loading="state.loading" :pagination="false">
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item prop="UserName">
-							<el-input v-model="state.queryParams.UserName" placeholder="坐席人员" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item prop="StaffNo">
-							<el-input v-model="state.queryParams.StaffNo" placeholder="工号" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item prop="GroupId">
-							<el-input v-model="state.queryParams.GroupId" placeholder="工作组" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<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-form-item>
-							<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-form-item>
-					</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="state.total"
-							@current-change="handleCurrentChange"
-							:page-size="state.queryParams.PageSize"
-							:current-page="state.queryParams.PageIndex"
-						/>
-					</div>
-				</template>
-			</ProTable>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item prop="UserName">
+					<el-input v-model="state.queryParams.UserName" placeholder="坐席人员" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item prop="StaffNo">
+					<el-input v-model="state.queryParams.StaffNo" placeholder="工号" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item prop="GroupId">
+					<el-input v-model="state.queryParams.GroupId" placeholder="工作组" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<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-form-item>
+					<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-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+			</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
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="telsPhoneAction"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="userName" title="坐席人员" min-width="140"></vxe-column>
+					<vxe-column field="telNo" title="分机号" min-width="140"></vxe-column>
+					<vxe-column field="staffNo" title="工号" min-width="140"></vxe-column>
+					<vxe-column field="groupId" title="工作组" min-width="140"></vxe-column>
+					<vxe-column field="operateStateText" title="动作类型" min-width="200"></vxe-column>
+					<vxe-column field="operateTime" title="开始时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.operateTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</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>
 		</div>
 	</div>
 </template>
@@ -51,23 +81,6 @@ import { formatDate } from '@/utils/formatTime';
 import Other from '@/utils/other';
 import { getCallCenterOperateRecord, getCallCenterOperateRecordBaseData } from '@/api/callCenter';
 
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'userName', label: '坐席人员' },
-	{ prop: 'telNo', label: '分机号' },
-	{ prop: 'staffNo', label: '工号' },
-	{ prop: 'groupId', label: '工作组', minWith: 150 },
-	{ prop: 'operateStateText', label: '动作类型', width: 200 },
-	{
-		prop: 'operateTime',
-		label: '开始时间',
-		width: 160,
-		render: (scope: any) => <span>{formatDate(scope.row.operateTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-	},
-	// { prop: 'overTime', label: '结束时间', width: 160, render: (scope) => <span>{formatDate(scope.row.overTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
-	// { prop: 'hangupBy', label: '使用时间(秒)' },
-]);
 // 定义变量内容
 const state = reactive<any>({
 	queryParams: {
@@ -147,8 +160,13 @@ const getBaseData = async () => {
 		console.log(e);
 	}
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>