reactor:数据共享平台表格重构完成;

src/views/business/discern/components/Discern-edit.vue

@@ -83,7 +83,7 @@
 				</el-col>
 				<!-- 非退回流程都需要选择并且如果选择了结束节点就不需要选择办理对象 -->
 				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="showHandlers">
-					<el-form-item label="办理对象" prop="nextHandlers" :rules="[{ required: false, message: '请选择办理对象', trigger: 'change' }]">
+					<el-form-item label="办理对象" prop="nextHandlers" :rules="[{ required: true, message: '请选择办理对象', trigger: 'change' }]">
 						<el-select-v2
 							v-model="state.ruleForm.nextHandlers"
 							:options="state.handlerOptions"

src/views/dataShare/RecordDialog.vue

@@ -1,7 +1,28 @@
 <template>
 	<el-dialog v-model="state.dialogVisible" width="60%" draggable title="查看修改记录" append-to-body destroy-on-close>
-		<ProTable ref="proTableRef" :columns="columns" :data="state.tableData" @updateTable="queryList" :loading="state.loading" :pagination="false">
-		</ProTable>
+		<vxe-table
+			border
+			:loading="state.loading"
+			:data="state.tableData"
+			:column-config="{ resizable: true }"
+			:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+			ref="tableRef"
+			max-height="400px"
+			show-overflow
+			:scrollY="{ enabled: true, gt: 0 }"
+		>
+			<vxe-column field="updateOrderTypeText" title="修改类型" width="140"></vxe-column>
+			<vxe-column field="oldValue" title="修改前" width="200"></vxe-column>
+			<vxe-column field="newValue" title="修改后" width="200"></vxe-column>
+			<vxe-column field="creatorName" title="修改人" width="120"></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="orderNo" title="工单编码" width="140"></vxe-column>
+			<vxe-column field="provinceNo" title="省本地编码" width="240"></vxe-column>
+		</vxe-table>
 		<template #footer>
 			<el-button @click="state.dialogVisible = false" class="default-button">关 闭</el-button>
 		</template>
@@ -9,7 +30,7 @@
 </template>
 <script setup lang="tsx">
 import { formatDate } from '@/utils/formatTime';
-import { reactive, ref } from 'vue';
+import { reactive } from 'vue';
 import { getEditRecord } from '@/api/dataShare';
 
 const state = reactive({
@@ -21,22 +42,6 @@ const state = reactive({
 	total: 0, // 总数
 	dialogVisible: false, // 弹窗
 });
-const columns = ref<any[]>([
-	{ prop: 'updateOrderTypeText', label: '修改类型', width: 150 },
-	{ prop: 'oldValue', label: '修改前' },
-	{ prop: 'newValue', label: '修改后' },
-	{
-		label: '修改时间',
-		prop: 'creationTime',
-		width: 170,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'creatorName', label: '修改人' },
-	{ prop: 'orderNo', label: '工单编码' },
-	{ prop: 'provinceNo', label: '省本地编码',width: 210 },
-]);
 // 打开弹窗
 const openDialog = (row?: any) => {
 	if (row) {

src/views/dataShare/callLog.vue

@@ -1,124 +1,116 @@
 <template>
 	<div class="dataShare-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" @submit.native.prevent inline>
+				<el-form-item label="省本地编码" prop="CaseSerial">
+					<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="是否及时" prop="IsSuccess">
+					<el-select v-model="state.queryParams.IsSuccess" placeholder="请选择是否及时" @change="handleQuery" clearable>
+						<el-option label="及时" value="true" />
+						<el-option label="不及时" value="false" />
+					</el-select>
+				</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"
+						:clearable="false"
+					/>
+				</el-form-item>
+				<el-form-item label-width="0">
+					<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"
+					: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="dataShareCallLog"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="provinceNo" title="省本地编码" min-width="240"></vxe-column>
+					<vxe-column field="requestData.CALL_END" title="挂断时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.requestData?.CALL_END, '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="firstTime" title="第一次上传省上的时间" width="170">
+						<template #default="{ row }">
+							{{ formatDate(row.firstTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="lastTime" title="最近一次推送时间" width="170">
+						<template #default="{ row }">
+							{{ formatDate(row.lastTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="intervalTime" title="推送时差(秒)" width="120"></vxe-column>
+					<vxe-column field="requestData.PHONE_NUMBER" title="来电号码" width="140"></vxe-column>
+					<vxe-column field="requestData.PHONE_STATUS" title="通话结果" width="140">
+						<template #default="{ row }">
+							{{ row.requestData.PHONE_STATUS === '10' ? '接通' : '未接通' }}
+						</template>
+					</vxe-column>
+					<vxe-column field="requestData.IS_PHONECALL" title="电话方向" width="140">
+						<template #default="{ row }">
+							{{ row.requestData.IS_PHONECALL === '0' ? '呼入' : '呼出' }}
+						</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" @submit.native.prevent inline>
-						<el-form-item label="省本地编码" prop="CaseSerial">
-							<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="是否及时" prop="IsSuccess">
-							<el-select v-model="state.queryParams.IsSuccess" placeholder="请选择是否及时" @change="handleQuery" clearable>
-								<el-option label="及时" value="true" />
-								<el-option label="不及时" value="false" />
-							</el-select>
-						</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"
-								:clearable="false"
-							/>
-						</el-form-item>
-						<el-form-item label-width="0">
-							<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>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
 <script setup lang="tsx" name="dataShareCallLog">
-import { onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { defaultDateTime, defaultTimeStartEnd, shortcuts } from "@/utils/constants";
+import { defaultDateTime, defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import { formatDate } from '@/utils/formatTime';
 import { getCallList } from '@/api/dataShare';
-import Other from "@/utils/other";
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'provinceNo', label: '省本地编码', align: 'center', minWidth: 220 },
-  {
-    prop: 'requestData.CALL_END',
-    label: '挂断时间',
-    align: 'center',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.requestData?.CALL_END, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'creationTime',
-    label: '入库时间',
-    align: 'center',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-	{
-		prop: 'firstTime',
-		label: '第一次上传省上的时间',
-		align: 'center',
-		width: 170,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.firstTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'lastTime',
-		label: '最近一次推送时间',
-		align: 'center',
-		width: 170,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'intervalTime',
-		label: '推送时差(秒)',
-		align: 'center',
-	},
-	{ prop: 'requestData.PHONE_NUMBER', label: '来电号码', width: 120, align: 'center' },
-	{
-		prop: 'requestData.PHONE_STATUS',
-		label: '通话结果',
-		align: 'center',
-		render: (scope) => {
-			return <span>{scope.row.requestData.PHONE_STATUS === '10' ? '接通' : '未接通'}</span>;
-		},
-	},
-	{
-		prop: 'requestData.IS_PHONECALL',
-		label: '电话方向',
-		align: 'center',
-		render: (scope) => {
-			return <span>{scope.row.requestData.IS_PHONECALL === '0' ? '呼入' : '呼出'}</span>;
-		},
-	},
-]);
+import Other from '@/utils/other';
+
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -130,9 +122,9 @@ const state = reactive<any>({
 		IsSuccess: null, // 是否成功
 		Keyword: null, // 关键字
 		crTime: defaultDateTime,
-    StartTime:null,
-    EndTime:null,
-		CaseSerial:null
+		StartTime: null,
+		EndTime: null,
+		CaseSerial: null,
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -140,16 +132,16 @@ const state = reactive<any>({
 });
 /** 搜索按钮操作 */
 const handleQuery = () => {
-	// state.queryParams.PageIndex = 1;
+	state.queryParams.PageIndex = 1;
 	queryList();
 };
 /** 获取列表 */
 const queryList = () => {
 	state.loading = true;
-  let request = Other.deepClone(state.queryParams);
-  request.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
-  request.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
-  Reflect.deleteProperty(request, 'crTime');
+	let request = Other.deepClone(state.queryParams);
+	request.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
+	request.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
+	Reflect.deleteProperty(request, 'crTime');
 	getCallList(request)
 		.then((res: any) => {
 			state.tableData = res.result?.items ?? [];
@@ -166,7 +158,12 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/dataShare/editExpire.vue

@@ -1,80 +1,135 @@
 <template>
 	<div class="dataShare-editExpire-container layout-padding">
-    <div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<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 label="工单编码" prop="No">
+					<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="省本地编码" prop="ProvinceNo">
+					<el-input v-model="state.queryParams.ProvinceNo" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label-width="0">
+					<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"
+					: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="dataShareEditExpire"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="provinceNo" title="省本地编码" width="240"></vxe-column>
+					<vxe-column field="isProvinceText" title="省/市工单" width="90"></vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="filedTime" title="办结时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="orgLevelOneName" title="一级部门" width="140"></vxe-column>
+					<vxe-column field="actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="counterSignTypeText" title="是否会签" width="110"></vxe-column>
+					<vxe-column field="sourceChannel" title="来源渠道" width="100"></vxe-column>
+					<vxe-column field="hotspotSpliceName" title="热点全称" width="150"></vxe-column>
+					<vxe-column field="hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="content" title="受理内容" width="200" :visible="false"></vxe-column>
+					<vxe-column field="fileOpinion" title="承办意见" width="200" :visible="false"></vxe-column>
+					<vxe-column title="操作" width="190" fixed="right">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onEdit(row)" title="查看修改记录"> 修改期满时间 </el-button>
+							<el-button link type="primary" @click="onRecord(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"
-			>
-        <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 label="工单编码" prop="No">
-              <el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery"  class="keyword-input"/>
-            </el-form-item>
-            <el-form-item label="省本地编码" prop="ProvinceNo">
-              <el-input v-model="state.queryParams.ProvinceNo" placeholder="省本地编码" clearable @keyup.enter="handleQuery"  class="keyword-input"/>
-            </el-form-item>
-            <el-form-item label-width="0">
-              <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 #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-          <el-button link type="primary" @click="onEdit(row)" title="查看修改记录"> 修改期满时间 </el-button>
-          <el-button link type="primary" @click="onRecord(row)" title="查看修改记录"> 修改记录 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
-    <el-dialog title="修改期满时间" v-model="state.dialogVisible" width="500px" destroy-on-close append-to-body draggable>
-      <el-form :model="state.form" ref="formRef"  label-width="100px">
-        <el-form-item label="期满时间" prop="expiredTime" :rules="[{ required: true, message: '请选择修改后的期满时间', trigger: 'change' }]">
-          <el-date-picker
-            v-model="state.form.expiredTime"
-            type="datetime"
-            placeholder="请选择修改后的期满时间"
-            value-format="YYYY-MM-DD[T]HH:mm:ss"
-            class="w100"
-          />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button @click="state.dialogVisible = false" class="default-button">取 消</el-button>
-        <el-button type="primary" @click="onSubmit(formRef)" :loading="state.loading">确 定</el-button>
-      </template>
-    </el-dialog>
-    <edit-record ref="editRecordRef"/>
+		<el-dialog title="修改期满时间" v-model="state.dialogVisible" width="500px" destroy-on-close append-to-body draggable>
+			<el-form :model="state.form" ref="formRef" label-width="100px">
+				<el-form-item label="期满时间" prop="expiredTime" :rules="[{ required: true, message: '请选择修改后的期满时间', trigger: 'change' }]">
+					<el-date-picker
+						v-model="state.form.expiredTime"
+						type="datetime"
+						placeholder="请选择修改后的期满时间"
+						value-format="YYYY-MM-DD[T]HH:mm:ss"
+						class="w100"
+					/>
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<el-button @click="state.dialogVisible = false" class="default-button">取 消</el-button>
+				<el-button type="primary" @click="onSubmit(formRef)" :loading="state.loading">确 定</el-button>
+			</template>
+		</el-dialog>
+		<edit-record ref="editRecordRef" />
 	</div>
 </template>
 <script setup lang="tsx" name="dataShareEditExpire">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
-import { useRoute, useRouter } from 'vue-router';
 import { formatDate } from '@/utils/formatTime';
 import { orderList } from '@/api/business/order';
-import { ElMessage } from "element-plus";
-import { editExpireTime } from "@/api/dataShare";
+import { ElMessage } from 'element-plus';
+import { editExpireTime } from '@/api/dataShare';
 
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const EditRecord = defineAsyncComponent(() => import('@/views/dataShare/RecordDialog.vue')); // 修改记录弹窗
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -85,54 +140,10 @@ const state = reactive<any>({
 	tableData: [], //表单
 	loading: false, // 加载
 	total: 0, // 总数
-  dialogVisible:false,
-  form:{}
+	dialogVisible: false,
+	form: {},
 });
 const ruleFormRef = ref<RefType>(); // 表单ref
-const route = useRoute(); // 路由
-const router = useRouter(); // 路由
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'expiredStatusText', label: '超期状态', align: 'center', width: 80 },
-	{ prop: 'no', label: '工单编码', minWidth: 150 },
-  { prop: 'provinceNo', label: '省本地编码', minWidth: 200 },
-	{ prop: 'isProvinceText', label: '省/市工单', minWidth: 90 },
-	{ prop: 'currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{
-		prop: 'startTime',
-		label: '受理时间',
-    minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'expiredTime',
-		label: '工单期满时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'filedTime',
-		label: '办结时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'orgLevelOneName', label: '一级部门', minWidth: 140 },
-	{ prop: 'actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{ prop: 'acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'acceptorName', label: '受理人', minWidth: 100 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 190, align: 'center' },
-]);
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -159,37 +170,42 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 };
 // 修改期满时间
 const onEdit = (row: any) => {
-  state.form = {
-    expiredTime: row.expiredTime,
-    id: row.id,
-    isPush: true
-  }
-  state.dialogVisible = true
-}
+	state.form = {
+		expiredTime: row.expiredTime,
+		id: row.id,
+		isPush: true,
+	};
+	state.dialogVisible = true;
+};
 const formRef = ref<RefType>();
 const onSubmit = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.validate((valid: boolean) => {
-    if (!valid) return;
-    state.loading = true;
-    editExpireTime(state.form)
-      .then(() => {
-        state.loading = false;
-        state.dialogVisible = false;
-        queryList();
-        ElMessage.success('操作成功');
-      })
-      .catch(() => {
-        state.loading = false;
-      });
-  });
+	if (!formEl) return;
+	formEl.validate((valid: boolean) => {
+		if (!valid) return;
+		state.loading = true;
+		editExpireTime(state.form)
+			.then(() => {
+				state.loading = false;
+				state.dialogVisible = false;
+				queryList();
+				ElMessage.success('操作成功');
+			})
+			.catch(() => {
+				state.loading = false;
+			});
+	});
 };
 // 查看修改记录
 const editRecordRef = ref<RefType>();
 const onRecord = (row: any) => {
-  editRecordRef.value.openDialog(row);
-}
+	editRecordRef.value.openDialog(row);
+};
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/dataShare/orderList.vue

@@ -1,54 +1,101 @@
 <template>
 	<div class="dataShare-orderList-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" @submit.native.prevent inline>
+				<el-form-item label="省本地编码" prop="CaseSerial">
+					<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="是否及时" prop="IsSuccess">
+					<el-select v-model="state.queryParams.IsSuccess" placeholder="请选择是否及时" @change="handleQuery" clearable>
+						<el-option label="及时" value="true" />
+						<el-option label="不及时" value="false" />
+					</el-select>
+				</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"
+						:clearable="false"
+					/>
+				</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"
+					: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="dataShareOrderList"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="requestData.CASE_TITLE" title="工单标题" min-width="200">
+						<template #default="{ row }">
+							<order-detail :order="{ id: row.orderId }" :disabled="!row.orderId" @updateList="queryList">{{
+								row.requestData?.CASE_TITLE
+							}}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="provinceNo" title="省本地编码" min-width="240"></vxe-column>
+					<vxe-column field="caseSource" title="来源渠道" width="100"></vxe-column>
+					<vxe-column field="startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.startTime, '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="firstTime" title="第一次上传省上的时间" width="180">
+						<template #default="{ row }">
+							{{ formatDate(row.firstTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="lastTime" title="最近一次推送时间" width="180">
+						<template #default="{ row }">
+							{{ formatDate(row.lastTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="intervalTime" title="推送时差(秒)" width="110"></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" @submit.native.prevent inline>
-						<el-form-item label="省本地编码" prop="CaseSerial">
-							<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="是否及时" prop="IsSuccess">
-							<el-select v-model="state.queryParams.IsSuccess" placeholder="请选择是否及时" @change="handleQuery" clearable>
-								<el-option label="及时" value="true" />
-								<el-option label="不及时" value="false" />
-							</el-select>
-						</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"
-								:clearable="false"
-							/>
-						</el-form-item>
-						<el-form-item label-width="0">
-							<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 #CASE_TITLE="{ row }">
-					<order-detail :order="{id:row.orderId}" :disabled="!row.orderId" @updateList="queryList">{{ row.requestData?.CASE_TITLE }}</order-detail>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
@@ -61,54 +108,7 @@ import { formatDate } from '@/utils/formatTime';
 import Other from '@/utils/other';
 
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'requestData.CASE_TITLE', label: '工单标题', align: 'center', minWidth: 200 },
-	{ prop: 'provinceNo', label: '省本地编码', align: 'center', minWidth: 200 },
-	{ prop: 'caseSource', label: '来源渠道', align: 'center' },
-	{
-		prop: 'startTime',
-		label: '受理时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'creationTime',
-		label: '入库时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'firstTime',
-		label: '第一次上传省上的时间',
-		align: 'center',
-		width: 170,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.firstTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'lastTime',
-		label: '最近一次推送时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'intervalTime',
-		label: '推送时差(秒)',
-		align: 'center',
-	},
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -122,7 +122,7 @@ const state = reactive<any>({
 		crTime: defaultDateTime,
 		StartTime: null,
 		EndTime: null,
-		CaseSerial:null,
+		CaseSerial: null,
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -130,7 +130,7 @@ const state = reactive<any>({
 });
 /** 搜索按钮操作 */
 const handleQuery = () => {
-	// state.queryParams.PageIndex = 1;
+	state.queryParams.PageIndex = 1;
 	queryList();
 };
 /** 获取列表 */
@@ -156,7 +156,12 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/dataShare/orderNoCallLog.vue

@@ -20,14 +20,13 @@
 						:clearable="false"
 					/>
 				</el-form-item>
-				<el-form-item label-width="0">
+				<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"
@@ -40,7 +39,6 @@
 					<el-button type="primary" @click="onEdit(true)" :disabled="isChecked" :loading="state.loading" title="修改并推送"> 修改并推送 </el-button>
 				</template>
 			</vxe-toolbar>
-
 			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
 				<vxe-table
 					border

src/views/dataShare/otherPlatform.vue

@@ -1,62 +1,80 @@
 <template>
 	<div class="dataShare-other-platform-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" @submit.native.prevent inline>
+				<el-form-item label="时间段" prop="crTime">
+					<el-date-picker
+						v-model="state.queryParams.crTime"
+						type="datetimerange"
+						unlink-panels
+						range-separator="至"
+						start-placeholder="开始时间"
+						end-placeholder="结束时间"
+						:shortcuts="shortcuts"
+						@change="handleQuery"
+						value-format="YYYY-MM-DD[T]HH:mm:ss"
+						:default-time="defaultTimeStartEnd"
+						:clearable="false"
+					/>
+				</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"
+					: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="dataShareOtherPlatform"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="orderNo" title="工单编码" min-width="140"></vxe-column>
+					<vxe-column field="source" title="业务平台" width="120"></vxe-column>
+					<vxe-column field="platformsName" title="平台名称" width="120"></vxe-column>
+					<vxe-column field="receiveData" title="原始数据" min-width="200"></vxe-column>
+					<vxe-column field="operationType" title="操作" width="200"></vxe-column>
+					<vxe-column field="opinion" title="办理意见" width="200"></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" @submit.native.prevent inline>
-						<el-form-item label="时间段" prop="crTime">
-							<el-date-picker
-								v-model="state.queryParams.crTime"
-								type="datetimerange"
-								unlink-panels
-								range-separator="至"
-								start-placeholder="开始时间"
-								end-placeholder="结束时间"
-								:shortcuts="shortcuts"
-								@change="handleQuery"
-								value-format="YYYY-MM-DD[T]HH:mm:ss"
-								:default-time="defaultTimeStartEnd"
-								:clearable="false"
-							/>
-						</el-form-item>
-						<el-form-item label-width="0">
-							<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>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
 <script setup lang="tsx" name="dataShareOtherPlatform">
-import { onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { defaultDateTime, defaultTimeStartEnd, shortcuts } from "@/utils/constants";
-import { formatDate } from '@/utils/formatTime';
 import { getReceiveData } from '@/api/dataShare';
 import Other from "@/utils/other";
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'orderNo', label: '工单编码', align: 'center', width: 140 },
-	{ prop: 'source', label: '业务平台', align: 'center',width: 120 },
-	{ prop: 'platformsName', label: '平台名称', align: 'center',width: 120 },
-	{ prop: 'receiveData ', label: '原始数据', minWidth: 200, align: 'center' },
-	{ prop: 'operationType', label: '操作', align: 'center' },
-	{ prop: 'opinion', label: '办理意见', align: 'center' }
-]);
+
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
+
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -101,7 +119,12 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/dataShare/pushData.vue

@@ -5,136 +5,118 @@
 				<el-tab-pane name="province" label="省平台" :disabled="state.loading"></el-tab-pane>
 				<el-tab-pane name="other" label="其他平台" :disabled="state.loading"></el-tab-pane>
 			</el-tabs>
-      <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"
-      >
-        <template #table-search>
-          <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="省本地编码" prop="CaseSerial">
-							<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-<!--						<el-form-item label="请求地址" prop="Path">
-							<el-input v-model="state.queryParams.Path" placeholder="请求地址" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>-->
-						<el-form-item label="任务类型" prop="type">
-							<el-cascader
-								v-model="state.queryParams.type"
-								:options="options"
-								clearable
-								placeholder="请选择任务类型"
-								@change="selectPath"
-								filterable
-							/>
-						</el-form-item>
-						<el-form-item label="平台名称" prop="PlatformSource" v-if="['other'].includes(platform)">
-							<el-select v-model="state.queryParams.PlatformSource" placeholder="请选择平台名称" clearable @change="handleQuery">
-								<el-option :value="item.key" :label="item.value" v-for="item in ePlatformSource"/>
-							</el-select>
-						</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"
-                  :clearable="false"
-              />
-            </el-form-item>
-            <el-form-item label-width="0">
-              <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 #operation="{ row }">
-					<el-button link type="primary" @click="onDetail(row)" title="查看任务明细"> 任务明细 </el-button>
-				</template>
-      </ProTable>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="省本地编码" prop="CaseSerial">
+					<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="任务类型" prop="type">
+					<el-cascader v-model="state.queryParams.type" :options="options" clearable placeholder="请选择任务类型" @change="selectPath" filterable />
+				</el-form-item>
+				<el-form-item label="平台名称" prop="PlatformSource" v-if="['other'].includes(platform)">
+					<el-select v-model="state.queryParams.PlatformSource" placeholder="请选择平台名称" clearable @change="handleQuery">
+						<el-option :value="item.key" :label="item.value" v-for="item in ePlatformSource" />
+					</el-select>
+				</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"
+						:clearable="false"
+					/>
+				</el-form-item>
+				<el-form-item label-width="0">
+					<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"
+					: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="dataSharePushData"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="provinceNo" title="省本地编码" min-width="240"></vxe-column>
+					<vxe-column field="firstTime" title="初次推送时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.firstTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="lastTime" title="最近一次推送时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.lastTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="sendTimes" title="推送次数" width="100"></vxe-column>
+					<vxe-column field="stateText" title="推送状态" width="100"></vxe-column>
+					<vxe-column field="platformSourceText" title="平台名称" width="100"></vxe-column>
+					<vxe-column field="pathText" title="任务类型" width="140"></vxe-column>
+					<vxe-column field="request" title="请求参数" min-width="200"></vxe-column>
+					<vxe-column field="generationTime" title="生成时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.generationTime, '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 title="操作" width="90" fixed="right">
+						<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"
+			/>
 		</div>
 	</div>
 </template>
 <script setup lang="tsx" name="dataSharePushData">
-import { onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { defaultDateTime, defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import { getDataShareBaseData, getOtherPushData, getProvincePushData } from '@/api/dataShare';
 import { formatDate } from '@/utils/formatTime';
 import other from '@/utils/other';
 import { useRouter } from 'vue-router';
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'provinceNo', label: '省本地编码', align: 'center', minWidth: 200 },
-	{
-		prop: 'firstTime',
-		label: '初次推送时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.firstTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'lastTime',
-		label: '最近一次推送时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'sendTimes',
-		label: '推送次数',
-		align: 'center',
-	},
-	{
-		prop: 'stateText',
-		label: '推送状态',
-		align: 'center',
-	},
-	{
-		prop: 'platformSourceText',
-		label: '平台名称',
-		align: 'center',
-	},
-	{ prop: 'pathText', label: '任务类型', align: 'center' },
-	{ prop: 'request', label: '请求参数', align: 'center', minWidth: 200 },
-	{
-		prop: 'generationTime',
-		label: '生成时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.generationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 90, align: 'center' },
-]);
+
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
+
 const options = [
 	{
 		value: 'ywhj',
@@ -163,64 +145,82 @@ const options = [
 			{
 				value: 'submit_case_extends',
 				label: '服务工单拓展信息接口',
-			},{
+			},
+			{
 				value: 'get_case_material_info',
 				label: '材料接口',
-			},{
+			},
+			{
 				value: 'submit_case_total',
 				label: '统计数据接口',
-			},{
+			},
+			{
 				value: 'sendrealtimestatus',
 				label: '实时服务上报接口',
-			}
-		]
-	},{
+			},
+		],
+	},
+	{
 		value: 'ywxt',
 		label: '业务协同',
 		children: [
 			{
 				value: 'get_case_back_apply',
 				label: '退回申请接口',
-			},{
+			},
+			{
 				value: 'send_supervise_process_info',
 				label: '服务工单督办过程接口',
-			},{
+			},
+			{
 				value: 'send_supervise_result_info',
 				label: '服务工单督办结果接口',
-			},{
+			},
+			{
 				value: 'screen_case_info_send',
 				label: '工单发起甄别接口',
-			},{
+			},
+			{
 				value: 'screen_case_info_send',
 				label: '工单发起甄别接口',
-			},{
+			},
+			{
 				value: 'delay_case_info_send',
 				label: '服务工单申请延时接口',
-			},{
+			},
+			{
 				value: 'get_case_process_receive',
 				label: '服务工单交办处理过程接口',
-			},{
+			},
+			{
 				value: 'supply_case_info_send',
 				label: '上报补充诉求接口',
-			},{
+			},
+			{
 				value: 'revoke_case_info',
 				label: '服务工单撤单接口',
-			},{
+			},
+			{
 				value: 'remind_case_info',
 				label: '服务工单催单接口',
-			},{
+			},
+			{
 				value: 'get_case_result_receive',
 				label: '服务工单交办处理结果接口',
-			},{
+			},
+			{
 				value: 'zmhd_case_info_public',
 				label: '政民互动提交公开',
-			},{
+			},
+			{
 				value: 'get_knowledge_info_send',
 				label: '知识库上报接口',
-			},{
+			},
+			{
 				value: 'get_knowledge_info_update',
 				label: '知识库变更接口',
-			},{
+			},
+			{
 				value: 'get_knowledge_info_abandon',
 				label: '知识库下架接口',
 			},
@@ -231,10 +231,10 @@ const options = [
 			{
 				value: 'send_case_info',
 				label: '服务工单上报',
-			}
-		]
-	}
-]
+			},
+		],
+	},
+];
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const platform = ref('province');
@@ -246,10 +246,10 @@ const state = reactive<any>({
 		crTime: defaultDateTime,
 		StartTime: null,
 		EndTime: null,
-		CaseSerial:null,
+		CaseSerial: null,
 		Path: null,
-		PlatformSource:null,
-		type:null,
+		PlatformSource: null,
+		type: null,
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -261,15 +261,15 @@ const handleQuery = () => {
 	queryList();
 };
 // 选择任务类型
-const selectPath = (val:any)=>{
-	if(val){
+const selectPath = (val: any) => {
+	if (val) {
 		state.queryParams.path = val[1];
 		handleQuery();
-	}else{
+	} else {
 		state.queryParams.path = null;
 		handleQuery();
 	}
-}
+};
 // 获取基础数据
 const ePlatformSource = ref<EmptyArrayType>([]); // 基础数据
 const getBaseData = async () => {
@@ -279,7 +279,7 @@ const getBaseData = async () => {
 	} catch (e) {
 		console.log(e);
 	}
-}
+};
 /** 获取列表 */
 const queryList = async () => {
 	state.loading = true;
@@ -337,8 +337,13 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
-</script>
+</script>

src/views/dataShare/pushFail.vue

@@ -1,95 +1,100 @@
 <template>
 	<div class="dataShare-pushTask-container layout-padding">
-    <div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="时间段" prop="crTime">
+					<el-date-picker
+						v-model="state.queryParams.crTime"
+						type="datetimerange"
+						unlink-panels
+						range-separator="至"
+						start-placeholder="开始时间"
+						end-placeholder="结束时间"
+						:shortcuts="shortcuts"
+						@change="handleQuery"
+						value-format="YYYY-MM-DD[T]HH:mm:ss"
+						:default-time="defaultTimeStartEnd"
+						:clearable="false"
+					/>
+				</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"
+					: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="dataSharePushFail"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="platformSource" title="平台名称" width="120"></vxe-column>
+					<vxe-column field="receiveServiceInterface" title="接收接口名称" width="160"></vxe-column>
+					<vxe-column field="rawData" title="接收的原始数据" min-width="200"></vxe-column>
+					<vxe-column field="requestData" title="组装参数" min-width="200"></vxe-column>
+					<vxe-column field="sendTimes" title="推送次数" width="100"></vxe-column>
+					<vxe-column field="path" title="请求地址" width="180"></vxe-column>
+					<vxe-column field="httpMethod" title="请求方式" width="100"></vxe-column>
+					<vxe-column field="errorMessage" title="错误信息" min-width="200"></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="onRePush(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"
-			>
-        <template #table-search>
-          <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-            <el-form-item label="时间段" prop="crTime">
-              <el-date-picker
-                  v-model="state.queryParams.crTime"
-                  type="datetimerange"
-                  unlink-panels
-                  range-separator="至"
-                  start-placeholder="开始时间"
-                  end-placeholder="结束时间"
-                  :shortcuts="shortcuts"
-                  @change="handleQuery"
-                  value-format="YYYY-MM-DD[T]HH:mm:ss"
-                  :default-time="defaultTimeStartEnd"
-                  :clearable="false"
-              />
-            </el-form-item>
-            <el-form-item label-width="0">
-              <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 #operation="{ row }">
-					<el-button link type="primary" @click="onRePush(row)" title="重新推送"> 重推 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
 <script setup lang="tsx" name="dataSharePushFail">
-import { onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { defaultDateTime, defaultTimeStartEnd, shortcuts } from '@/utils/constants';
-import { getPushFailData, pushFailData, taskPushed } from '@/api/dataShare';
+import { getPushFailData, pushFailData } from '@/api/dataShare';
 import { formatDate } from '@/utils/formatTime';
-import { useRouter } from 'vue-router';
 import other from '@/utils/other';
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'platformSource', label: '平台名称', align: 'center', minWidth: 120 },
-	{ prop: 'receiveServiceInterface', label: '接收接口名称', align: 'center', minWidth: 160 },
-	{ prop: 'rawData', label: '接收的原始数据', align: 'center', minWidth: 200 },
-	{ prop: 'requestData', label: '组装参数', align: 'center', minWidth: 200 },
-	{ prop: 'sendTimes', label: '推送次数', align: 'center', minWidth: 100 },
-	{
-		prop: 'path',
-		label: '请求地址',
-		align: 'center',
-		width: 170,
-	},
-	{ prop: 'httpMethod', label: '请求方式', align: 'center', width: 100 },
-	{
-		prop: 'errorMessage',
-		label: '错误信息',
-		align: 'center',
-		minWidth: 200,
-	},
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
+
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
+
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
 	queryParams: {
 		// 查询条件
 		PageIndex: 1,
-		PageSize: 20,
+		PageSize: 2,
 		crTime: defaultDateTime,
 		StartTime: null,
 		EndTime: null,
@@ -151,7 +156,12 @@ const onRePush = (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/dataShare/pushNoResult.vue

@@ -1,54 +1,91 @@
 <template>
 	<div class="dataShare-push-no-result-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" @submit.native.prevent inline>
+				<el-form-item label="省本地编码" prop="CaseSerial">
+					<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="是否超期" prop="IsSuccess">
+					<el-select v-model="state.queryParams.IsSuccess" placeholder="请选择是否超期" @change="handleQuery" clearable>
+						<el-option label="是" value="true" />
+						<el-option label="否" value="false" />
+					</el-select>
+				</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"
+						:clearable="false"
+					/>
+				</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"
+					: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="dataSharePushNoResult"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="requestData.CASE_TITLE" title="工单标题" min-width="200">
+						<template #default="{ row }">
+							<order-detail :order="{ id: row.orderId }" :disabled="!row.orderId" @updateList="queryList">{{
+								row.requestData?.CASE_TITLE
+							}}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="provinceNo" title="省本地编码" min-width="240"></vxe-column>
+					<vxe-column field="caseSource" title="来源渠道" width="100"></vxe-column>
+					<vxe-column field="startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="tfdBackTimeBf" title="期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.tfdBackTimeBf, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="isOverText" title="是否超期" width="100"></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" @submit.native.prevent inline>
-						<el-form-item label="省本地编码" prop="CaseSerial">
-							<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="是否超期" prop="IsSuccess">
-							<el-select v-model="state.queryParams.IsSuccess" placeholder="请选择是否超期" @change="handleQuery" clearable>
-								<el-option label="是" value="true" />
-								<el-option label="否" value="false" />
-							</el-select>
-						</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"
-								:clearable="false"
-							/>
-						</el-form-item>
-						<el-form-item label-width="0">
-							<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 #CASE_TITLE="{ row }">
-					<order-detail :order="{id:row.orderId}" :disabled="!row.orderId" @updateList="queryList">{{ row.requestData?.CASE_TITLE }}</order-detail>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
@@ -61,36 +98,8 @@ import { formatDate } from '@/utils/formatTime';
 import Other from '@/utils/other';
 
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'requestData.CASE_TITLE', label: '工单标题', align: 'center', minWidth: 200 },
-	{ prop: 'provinceNo', label: '省本地编码', align: 'center', minWidth: 200 },
-	{ prop: 'caseSource', label: '来源渠道', align: 'center' },
-	{
-		prop: 'startTime',
-		label: '受理时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'tfdBackTimeBf',
-		label: '期满时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.tfdBackTimeBf, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'isOverText',
-		label: '是否超期',
-		align: 'center',
-	},
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
+
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -104,7 +113,7 @@ const state = reactive<any>({
 		crTime: defaultDateTime,
 		StartTime: null,
 		EndTime: null,
-		CaseSerial:null,
+		CaseSerial: null,
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -138,7 +147,12 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/dataShare/pushedTask.vue

@@ -9,394 +9,139 @@
 				<el-tab-pane name="5" label="省平台推送其他" :disabled="state.loading"></el-tab-pane>
 				<el-tab-pane name="6" label="其他平台" :disabled="state.loading"></el-tab-pane>
 			</el-tabs>
-			<ProTable
-				:columns="columns1"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="省本地编码" prop="CaseSerial">
+					<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="推送状态" prop="IsSuccess">
+					<el-select v-model="state.queryParams.IsSuccess" placeholder="请选择推送状态" clearable @change="handleQuery">
+						<el-option :value="true" label="推送成功" />
+						<el-option :value="false" label="推送失败" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="平台名称" prop="PlatformSource" v-if="['6'].includes(state.queryParams.SelectType)">
+					<el-select v-model="state.queryParams.PlatformSource" placeholder="请选择平台名称" clearable @change="handleQuery">
+						<el-option :value="item.key" :label="item.value" v-for="item in ePlatformSource" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="任务类型" prop="type" v-if="['5'].includes(state.queryParams.SelectType)">
+					<el-cascader v-model="state.queryParams.type" :options="options" clearable placeholder="请选择任务类型" @change="selectPath" filterable />
+				</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"
+						:clearable="false"
+					/>
+				</el-form-item>
+				<el-form-item label-width="0">
+					<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"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-				v-if="['1'].includes(state.queryParams.SelectType)"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="省本地编码" prop="CaseSerial">
-							<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="推送状态" prop="IsSuccess">
-							<el-select v-model="state.queryParams.IsSuccess" placeholder="请选择推送状态" clearable @change="handleQuery">
-								<el-option :value="true" label="推送成功" />
-								<el-option :value="false" label="推送失败" />
-							</el-select>
-						</el-form-item>
-<!--						<el-form-item label="请求地址" prop="Path">
-							<el-input v-model="state.queryParams.Path" 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"
-								:clearable="false"
-							/>
-						</el-form-item>
-						<el-form-item label-width="0">
-							<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 #operation="{ row }">
-					<el-button link type="primary" @click="onDetail(row)" title="查看任务明细"> 任务明细 </el-button>
-					<el-button link type="primary" @click="onRePush(row)" title="重新推送"> 重推 </el-button>
-				</template>
-			</ProTable>
-			<ProTable
-				:columns="columns4"
-				: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"
-				v-if="['4'].includes(state.queryParams.SelectType)"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="省本地编码" prop="CaseSerial">
-							<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="推送状态" prop="IsSuccess">
-							<el-select v-model="state.queryParams.IsSuccess" placeholder="请选择推送状态" clearable @change="handleQuery">
-								<el-option :value="true" label="推送成功" />
-								<el-option :value="false" label="推送失败" />
-							</el-select>
-						</el-form-item>
-<!--						<el-form-item label="请求地址" prop="Path">
-							<el-input v-model="state.queryParams.Path" 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"
-								:clearable="false"
-							/>
-						</el-form-item>
-						<el-form-item label-width="0">
-							<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 #operation="{ row }">
-					<el-button link type="primary" @click="onDetail(row)" title="查看任务明细"> 任务明细 </el-button>
-					<el-button link type="primary" @click="onRePush(row)" title="重新推送"> 重推 </el-button>
-				</template>
-			</ProTable>
-			<ProTable
-				:columns="columns"
-				: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
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="dataSharePushedTask"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="provinceNo" title="省本地编码" min-width="220"></vxe-column>
+					<template v-if="['1', '4'].includes(state.queryParams.SelectType)">
+						<vxe-column field="expiredTime" title="期满时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+					</template>
+					<template v-if="['4'].includes(state.queryParams.SelectType)">
+						<vxe-column field="filedTime" title="办结时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="isOverdueText" title="是否超期" min-width="110"></vxe-column>
+					</template>
+					<vxe-column field="firstTime" title="初次推送时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.firstTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="lastTime" title="最近一次推送时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.lastTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="sendTimes" title="推送次数" width="100"></vxe-column>
+					<vxe-column field="isSuccesseText" title="推送状态" width="100"></vxe-column>
+					<vxe-column field="platformSourceText" title="平台名称" width="100"></vxe-column>
+					<vxe-column field="pathText" title="任务类型" width="200"></vxe-column>
+					<vxe-column field="request" title="请求参数" min-width="200"></vxe-column>
+					<vxe-column field="generationTime" title="生成时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.generationTime, '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 title="操作" width="140" fixed="right" :show-overflow="false">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onDetail(row)" title="查看任务明细"> 任务明细 </el-button>
+							<el-button link type="primary" @click="onRePush(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-if="['2', '3', '5', '6'].includes(state.queryParams.SelectType)"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="省本地编码" prop="CaseSerial">
-							<el-input v-model="state.queryParams.CaseSerial" placeholder="省本地编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="推送状态" prop="IsSuccess">
-							<el-select v-model="state.queryParams.IsSuccess" placeholder="请选择推送状态" clearable @change="handleQuery">
-								<el-option :value="true" label="推送成功" />
-								<el-option :value="false" label="推送失败" />
-							</el-select>
-						</el-form-item>
-						<el-form-item label="平台名称" prop="PlatformSource" v-if="['6'].includes(state.queryParams.SelectType)">
-							<el-select v-model="state.queryParams.PlatformSource" placeholder="请选择平台名称" clearable @change="handleQuery">
-								<el-option :value="item.key" :label="item.value" v-for="item in ePlatformSource"/>
-							</el-select>
-						</el-form-item>
-						<el-form-item label="任务类型" prop="type"  v-if="['5'].includes(state.queryParams.SelectType)">
-							<el-cascader
-								v-model="state.queryParams.type"
-								:options="options"
-								clearable
-								placeholder="请选择任务类型"
-								@change="selectPath"
-								filterable
-							/>
-						</el-form-item>
-<!--						<el-form-item label="请求地址" prop="Path">
-							<el-input v-model="state.queryParams.Path" 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"
-								:clearable="false"
-							/>
-						</el-form-item>
-						<el-form-item label-width="0">
-							<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 #operation="{ row }">
-					<el-button link type="primary" @click="onDetail(row)" title="查看任务明细"> 任务明细 </el-button>
-					<el-button link type="primary" @click="onRePush(row)" title="重新推送"> 重推 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
 <script setup lang="tsx" name="dataSharePushedTask">
-import { onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { defaultDateTime, defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import { getDataShareBaseData, getPushedTask, rePushNew } from '@/api/dataShare';
 import { formatDate } from '@/utils/formatTime';
 import { useRouter } from 'vue-router';
 import other from '@/utils/other';
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'provinceNo', label: '省本地编码', align: 'center', minWidth: 200 },
-	{
-		prop: 'firstTime',
-		label: '初次推送时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.firstTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'lastTime',
-		label: '最近一次推送时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'sendTimes',
-		label: '推送次数',
-		align: 'center',
-	},
-	{
-		prop: 'isSuccesseText',
-		label: '推送状态',
-		align: 'center',
-	},
-	{
-		prop: 'platformSourceText',
-		label: '平台名称',
-		align: 'center',
-	},
-	{ prop: 'pathText', label: '任务类型', align: 'center', minWidth: 150 },
-	{ prop: 'request', label: '请求参数', align: 'center', minWidth: 200 },
-	{
-		prop: 'generationTime',
-		label: '生成时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.generationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 140, align: 'center' },
-]);
-const columns1 = ref<any[]>([
-	{ prop: 'provinceNo', label: '省本地编码', align: 'center', minWidth: 200 },
-	{
-		prop: 'expiredTime',
-		label: '期满时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'firstTime',
-		label: '初次推送时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.firstTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'lastTime',
-		label: '最近一次推送时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'sendTimes',
-		label: '推送次数',
-		align: 'center',
-	},
-	{
-		prop: 'isSuccesseText',
-		label: '推送状态',
-		align: 'center',
-		minWidth: 100,
-	},
-	{
-		prop: 'platformSourceText',
-		label: '平台名称',
-		align: 'center',
-	},
-	{ prop: 'pathText', label: '任务类型', align: 'center', minWidth: 150 },
-	{ prop: 'request', label: '请求参数', align: 'center', minWidth: 200 },
-	{
-		prop: 'generationTime',
-		label: '生成时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.generationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 140, align: 'center' },
-]);
-const columns4 = ref<any[]>([
-	{ prop: 'provinceNo', label: '省本地编码', align: 'center', minWidth: 200 },
-	{
-		prop: 'isOverdueText',
-		label: '是否超期',
-		align: 'center',
-	},
-	{
-		prop: 'expiredTime',
-		label: '期满时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'filedTime',
-		label: '办结时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'firstTime',
-		label: '初次推送时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.firstTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'lastTime',
-		label: '最近一次推送时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'sendTimes',
-		label: '推送次数',
-		align: 'center',
-	},
-	{
-		prop: 'isSuccesseText',
-		label: '推送状态',
-		align: 'center',
-		minWidth: 100,
-	},
-	{
-		prop: 'platformSourceText',
-		label: '平台名称',
-		align: 'center',
-	},
-	{ prop: 'pathText', label: '任务类型', align: 'center', minWidth: 150 },
-	{ prop: 'request', label: '请求参数', align: 'center', minWidth: 200 },
-	{
-		prop: 'generationTime',
-		label: '生成时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.generationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		align: 'center',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 140, align: 'center' },
-]);
+
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -413,8 +158,8 @@ const state = reactive<any>({
 		EndTime: null,
 		CaseSerial: null,
 		Path: null,
-		PlatformSource:null,
-		type:null,
+		PlatformSource: null,
+		type: null,
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -471,64 +216,82 @@ const options = [
 			{
 				value: 'submit_case_extends',
 				label: '服务工单拓展信息接口',
-			},{
+			},
+			{
 				value: 'get_case_material_info',
 				label: '材料接口',
-			},{
+			},
+			{
 				value: 'submit_case_total',
 				label: '统计数据接口',
-			},{
+			},
+			{
 				value: 'sendrealtimestatus',
 				label: '实时服务上报接口',
-			}
-		]
-	},{
+			},
+		],
+	},
+	{
 		value: 'ywxt',
 		label: '业务协同',
 		children: [
 			{
 				value: 'get_case_back_apply',
 				label: '退回申请接口',
-			},{
+			},
+			{
 				value: 'send_supervise_process_info',
 				label: '服务工单督办过程接口',
-			},{
+			},
+			{
 				value: 'send_supervise_result_info',
 				label: '服务工单督办结果接口',
-			},{
+			},
+			{
 				value: 'screen_case_info_send',
 				label: '工单发起甄别接口',
-			},{
+			},
+			{
 				value: 'screen_case_info_send',
 				label: '工单发起甄别接口',
-			},{
+			},
+			{
 				value: 'delay_case_info_send',
 				label: '服务工单申请延时接口',
-			},{
+			},
+			{
 				value: 'get_case_process_receive',
 				label: '服务工单交办处理过程接口',
-			},{
+			},
+			{
 				value: 'supply_case_info_send',
 				label: '上报补充诉求接口',
-			},{
+			},
+			{
 				value: 'revoke_case_info',
 				label: '服务工单撤单接口',
-			},{
+			},
+			{
 				value: 'remind_case_info',
 				label: '服务工单催单接口',
-			},{
+			},
+			{
 				value: 'get_case_result_receive',
 				label: '服务工单交办处理结果接口',
-			},{
+			},
+			{
 				value: 'zmhd_case_info_public',
 				label: '政民互动提交公开',
-			},{
+			},
+			{
 				value: 'get_knowledge_info_send',
 				label: '知识库上报接口',
-			},{
+			},
+			{
 				value: 'get_knowledge_info_update',
 				label: '知识库变更接口',
-			},{
+			},
+			{
 				value: 'get_knowledge_info_abandon',
 				label: '知识库下架接口',
 			},
@@ -539,10 +302,10 @@ const options = [
 			{
 				value: 'send_case_info',
 				label: '服务工单上报',
-			}
-		]
-	}
-]
+			},
+		],
+	},
+];
 /** 重置按钮操作 */
 const resetQuery = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
@@ -589,19 +352,24 @@ const getBaseData = async () => {
 	} catch (e) {
 		console.log(e);
 	}
-}
+};
 // 选择任务类型
-const selectPath = (val:any)=>{
-	if(val){
+const selectPath = (val: any) => {
+	if (val) {
 		state.queryParams.path = val[1];
 		handleQuery();
-	}else{
+	} else {
 		state.queryParams.path = null;
 		handleQuery();
 	}
-}
+};
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	queryList();
 	getBaseData();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	queryList();
 });
 </script>

src/views/dataShare/taskDetail.vue

@@ -1,51 +1,63 @@
 <template>
   <div class="dataShare-taskDetail-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"
-        :total="state.total"
-        v-model:page-index="state.queryParams.PageIndex"
-        v-model:page-size="state.queryParams.PageSize"
-      >
-      </ProTable>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: queryList,
+				}"
+			>
+			</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
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="dataShareTaskDetail"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="provinceNo" title="推送状态" width="100">
+						<template #default="{ row }">
+							{{ row.isSuccess ? '成功' : '失败' }}
+						</template>
+					</vxe-column>
+					<vxe-column field="result" title="返回数据" min-width="200"></vxe-column>
+					<vxe-column field="resultErrorData" title="错误数据" min-width="200"></vxe-column>
+					<vxe-column field="processingServices" title="推送平台" width="140"></vxe-column>
+					<vxe-column field="创建时间" title="推送平台" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</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"
+			/>
     </div>
   </div>
 </template>
 <script setup lang="tsx" name="dataShareTaskDetail">
-import { onMounted, reactive, ref } from 'vue';
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { getPushTaskDetailNew } from "@/api/dataShare";
 import { useRoute } from "vue-router";
 import { formatDate } from "@/utils/formatTime";
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-  {
-    prop: 'isSuccess',
-    label: '推送状态',
-    align: 'center',
-    render: (scope) => {
-      return <span>{scope.row.isSuccess ? '成功' : '失败'}</span>;
-    },
-  },
-  { prop: 'result', label: '返回数据', align: 'center' },
-  { prop: 'resultErrorData', label: '错误数据', align: 'center' },
-  { prop: 'processingServices', label: '推送平台', align: 'center' },
-  {
-    prop: 'creationTime',
-    label: '创建时间',
-    align: 'center',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-]);
+
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
-const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive({
   queryParams: {
     // 查询条件
@@ -57,7 +69,6 @@ const state = reactive({
   total: 0, // 总数
 });
 /** 获取列表 */
-const historyParams = history.state;
 const route = useRoute();
 const queryList = () => {
   state.loading = true;
@@ -76,7 +87,12 @@ const queryList = () => {
       state.loading = false;
     });
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
   queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/dataShare/userInfo.vue

@@ -1,35 +1,66 @@
 <template>
 	<div class="dataShare-userInfo-container layout-padding">
-    <div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<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 label-width="0">
+					<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"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
+				custom
+				:refresh="{
+					queryMethod: queryList,
+				}"
 			>
-        <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 label-width="0">
-              <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 #tableHeader="scope">
+				<template #buttons>
 					<el-button type="primary" @click="onAdd(false)" :loading="state.loading" title="新增账号">
 						<SvgIcon name="ele-Plus" class="mr5" />新增账号
 					</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"
+					: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="dataShareUserInfo"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="accountId" title="账号"></vxe-column>
+					<vxe-column field="accountSecret" title="密码"></vxe-column>
+					<vxe-column field="platformSource" title="所属平台code"></vxe-column>
+					<vxe-column field="platformSourceName" title="所属平台名称"></vxe-column>
+					<vxe-column field="addressUrl" title="数据推送地址"></vxe-column>
+					<vxe-column field="state" title="状态" width="160">
+						<template #default="{ row }">
+							{{ row.state === '0' ? '未启用' : row.state === '1' ? '正常' : '禁用' }}
+						</template>
+					</vxe-column>
+					<vxe-column field="remark" title="备注"></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"
+			/>
 		</div>
 		<el-dialog title="新增账号" v-model="state.dialogVisible" destroy-on-close append-to-body draggable>
 			<el-form :model="state.form" ref="formRef" label-width="120px">
@@ -49,11 +80,11 @@
 							<el-input v-model="state.form.platformSource" placeholder="请填写所属平台code" clearable></el-input>
 						</el-form-item>
 					</el-col>
-          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
-            <el-form-item label="数据推送地址" prop="addressUrl" :rules="[{ required: false, message: '请填写数据推送地址', trigger: 'blur' }]">
-              <el-input v-model="state.form.addressUrl" placeholder="请填写数据推送地址" clearable></el-input>
-            </el-form-item>
-          </el-col>
+					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+						<el-form-item label="数据推送地址" prop="addressUrl" :rules="[{ required: false, message: '请填写数据推送地址', trigger: 'blur' }]">
+							<el-input v-model="state.form.addressUrl" placeholder="请填写数据推送地址" clearable></el-input>
+						</el-form-item>
+					</el-col>
 					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
 						<el-form-item
 							label="所属平台名称"
@@ -80,18 +111,17 @@
 <script setup lang="tsx" name="dataShareUserInfo">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
-import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { getUserList, platformSourceAddUser } from '@/api/dataShare';
 
 // 引入组件
-const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
 	queryParams: {
 		PageIndex: 1, // 当前页
-		PageSize: 20, // 每页条数
+		PageSize: 2, // 每页条数
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -100,26 +130,6 @@ const state = reactive<any>({
 	form: {},
 });
 const ruleFormRef = ref<RefType>(); // 表单ref
-const route = useRoute(); // 路由
-const router = useRouter(); // 路由
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'accountId', label: '账号', align: 'center' },
-	{ prop: 'accountSecret', label: '密码', align: 'center' },
-	{ prop: 'platformSource', label: '所属平台code', align: 'center' },
-	{ prop: 'platformSourceName', label: '所属平台名称', align: 'center' },
-  { prop: 'addressUrl', label: '数据推送地址', align: 'center' },
-	{
-		prop: 'state',
-		label: '状态',
-		width: 150,
-		render: (scope) => {
-			return <span>{scope.row.state === '0' ? '未启用' : scope.row.state === '1' ? '正常' : '禁用'}</span>;
-		},
-	},
-	{ prop: 'remark', label: '备注' },
-]);
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -166,7 +176,12 @@ const onSubmit = (formEl: FormInstance | undefined) => {
 			});
 	});
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>