reactor:工单质检表格重构完成;

src/views/business/visit/components/Visit-detail.vue

@@ -413,6 +413,7 @@
 															(val) => {
 																item.orgProcessingResults.value = val?.dicDataName;
 																item.orgProcessingResults.key = val?.dicDataValue;
+																item.orgNoSatisfiedReason = [];
 															}
 														"
 													>
@@ -436,6 +437,7 @@
 														collapse-tags
 														collapse-tags-tooltip
 														@change="selectReason($event, index)"
+														clearable
 													>
 														<el-option v-for="items in dissatisfiedReason" :key="items.dicDataValue" :label="items.dicDataName" :value="items" />
 													</el-select>

src/views/quality/done/index.vue

@@ -6,154 +6,135 @@
 				<el-tab-pane label="派单已质检" :name="2" :disabled="state.loading"></el-tab-pane>
 				<el-tab-pane label="回访已质检" :name="3" :disabled="state.loading"></el-tab-pane>
 			</el-tabs>
-			<ProTable
-				ref="proTableRef"
-				:columns="acceptQualityColumns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+				<el-form-item label="关键词" prop="Keyword">
+					<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="handleQuery" class="keyword-input"/>
+				</el-form-item>
+				<el-form-item label="分数区间" prop="value">
+					<input-number-range v-model="state.queryParams.value" />
+				</el-form-item>
+				<el-form-item label="创建时间" prop="crTime">
+					<el-date-picker
+						v-model="state.queryParams.crTime"
+						type="datetimerange"
+						unlink-panels
+						range-separator="至"
+						start-placeholder="开始时间"
+						end-placeholder="结束时间"
+						:shortcuts="shortcuts"
+						@change="handleQuery"
+						value-format="YYYY-MM-DD[T]HH:mm:ss"
+						:default-time="defaultTimeStartEnd"
+					/>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-				v-if="state.queryParams.Source === 1"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-						<el-form-item label="关键词" prop="Keyword">
-							<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="分数区间" prop="value">
-							<input-number-range v-model="state.queryParams.value" />
-						</el-form-item>
-						<el-form-item label="创建时间" prop="crTime">
-							<el-date-picker
-								v-model="state.queryParams.crTime"
-								type="datetimerange"
-								unlink-panels
-								range-separator="至"
-								start-placeholder="开始时间"
-								end-placeholder="结束时间"
-								:shortcuts="shortcuts"
-								@change="handleQuery"
-								value-format="YYYY-MM-DD[T]HH:mm:ss"
-								:default-time="defaultTimeStartEnd"
-							/>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onQualityView(row)" v-auth="'quality:done:view'" title="查看质检详情"> 查看 </el-button>
-					<el-button link type="primary" @click="onQualityEdit(row)" v-auth="'quality:done:edit'" title="编辑质检"> 编辑 </el-button>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="assignQualityColumns"
-				: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-else-if="state.queryParams.Source === 2"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-						<el-form-item label="关键词" prop="Keyword">
-							<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="分数区间" prop="value">
-							<input-number-range v-model="state.queryParams.value" />
-						</el-form-item>
-						<el-form-item label="创建时间" prop="crTime">
-							<el-date-picker
-								v-model="state.queryParams.crTime"
-								type="datetimerange"
-								unlink-panels
-								range-separator="至"
-								start-placeholder="开始时间"
-								end-placeholder="结束时间"
-								:shortcuts="shortcuts"
-								@change="handleQuery"
-								value-format="YYYY-MM-DD[T]HH:mm:ss"
-								:default-time="defaultTimeStartEnd"
-							/>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onQualityView(row)" v-auth="'quality:done:view'" title="查看质检详情"> 查看 </el-button>
-					<el-button link type="primary" @click="onQualityEdit(row)" v-auth="'quality:done:edit'" title="编辑质检"> 编辑 </el-button>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="visitQualityColumns"
-				: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="qualityDone"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.title" title="工单标题" min-width="200">
+						<template #default="{ row }">
+							<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="aiQuality" title="质检方式" width="100">
+						<template #default="{ row }">
+							{{ row.aiQuality ? '智能质检' : '人工质检' }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.sourceChannel" title="来源渠道" width="110"></vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<template v-if="state.queryParams.Source === 3">
+						<vxe-column field="visit.visitStateText" title="回访状态" width="110"></vxe-column>
+						<vxe-column field="visit.visitTypeText" title="回访方式" width="110"></vxe-column>
+						<vxe-column field="order.filedTime" title="办结时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="visit.publishTime" title="发布时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.visit?.publishTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="visit.creationTime" title="回访任务创建时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.visit?.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="visit.employeeName" title="回访人" width="120"></vxe-column>
+						<vxe-column field="visit.visitTime" title="回访时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="order.counterSignTypeText" title="是否会签" width="100"></vxe-column>
+					</template>
+					<template v-if="state.queryParams.Source === 2">
+						<vxe-column field="creationTime" title="交办时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+					</template>
+					<vxe-column field="order.statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="100"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="order.fromPhone" title="来电电话" width="140"></vxe-column>
+					<vxe-column field="userName" title="质检人" width="120"></vxe-column>
+					<vxe-column field="qualityTime" title="质检时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.qualityTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="grade" title="质检得分" width="100"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="120" align="center" :show-overflow="false">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onQualityView(row)" v-auth="'quality:done:view'" title="查看质检详情"> 查看 </el-button>
+							<el-button link type="primary" @click="onQualityEdit(row)" v-auth="'quality:done:edit'" title="编辑质检"> 编辑 </el-button>
+						</template>
+					</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="state.queryParams.Source === 3"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-						<el-form-item label="关键词" prop="Keyword">
-							<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="分数区间" prop="value">
-							<input-number-range v-model="state.queryParams.value" />
-						</el-form-item>
-						<el-form-item label="创建时间" prop="crTime">
-							<el-date-picker
-								v-model="state.queryParams.crTime"
-								type="datetimerange"
-								unlink-panels
-								range-separator="至"
-								start-placeholder="开始时间"
-								end-placeholder="结束时间"
-								:shortcuts="shortcuts"
-								@change="handleQuery"
-								value-format="YYYY-MM-DD[T]HH:mm:ss"
-								:default-time="defaultTimeStartEnd"
-							/>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onQualityView(row)" v-auth="'quality:done:view'" title="查看质检详情"> 查看 </el-button>
-					<el-button link type="primary" @click="onQualityEdit(row)" v-auth="'quality:done:edit'" title="编辑质检"> 编辑 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!-- 质检 -->
 		<quality-inspection ref="qualityInspectionRef" @updateList="queryList" />
@@ -172,10 +153,7 @@ import Other from '@/utils/other';
 const QualityInspection = defineAsyncComponent(() => import('@/views/quality/done/components/Quality-inspection.vue')); // 质检
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const InputNumberRange = defineAsyncComponent(() => import('@/components/NumberRange/index.vue')); // 数字区间
-
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -207,122 +185,15 @@ const getBaseData = async () => {
 		console.log(error);
 	}
 };
-// 受理待质检表头
-const acceptQualityColumns = [
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'aiQuality', label: '质检方式', minWidth: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'order.fromPhone', label: '来电电话', minWidth: 140 },
-	{ prop: 'userName', label: '质检人', minWidth: 120 },
-	{ prop: 'qualityTime', label: '质检时间', minWidth: 160, render: (scope: any) => formatDate(scope.row.qualityTime, 'YYYY-mm-dd HH:MM:SS') },
-	{ prop: 'grade', label: '质检得分', minWidth: 100 },
-	{ label: '操作', width: 110, fixed: 'right', align: 'center', prop: 'operation' },
-];
-// 交办待质检表头
-const assignQualityColumns = [
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'aiQuality', label: '质检方式', minWidth: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'creationTime', label: '交办时间', minWidth: 160, render: (scope: any) => formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS') },
-	{ prop: 'order.fromPhone', label: '来电电话', minWidth: 140 },
-	{ prop: 'userName', label: '质检人', minWidth: 120 },
-	{ prop: 'qualityTime', label: '质检时间', minWidth: 160, render: (scope: any) => formatDate(scope.row.qualityTime, 'YYYY-mm-dd HH:MM:SS') },
-	{ prop: 'grade', label: '质检得分', minWidth: 100 },
-	{ label: '操作', width: 110, fixed: 'right', align: 'center', prop: 'operation' },
-];
-// 回访待质检表头
-const visitQualityColumns = [
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'aiQuality', label: '质检方式', minWidth: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'visit.visitStateText', label: '回访状态', minWidth: 100 },
-	{ prop: 'visit.visitTypeText', label: '回访方式', minWidth: 100 },
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{
-		prop: 'order.filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{
-		prop: 'visit.publishTime',
-		label: '发布时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.visit?.publishTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{
-		prop: 'visit.creationTime',
-		label: '回访任务创建时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.visit?.creationTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{ prop: 'visit.employeeName', label: '回访人', minWidth: 120 },
-	{
-		prop: 'visit.visitTime',
-		label: '回访时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{ prop: 'order.counterSignTypeText', label: '是否会签', minWidth: 90 },
-	{ prop: 'userName', label: '质检人', minWidth: 120 },
-	{ prop: 'qualityTime', label: '质检时间', minWidth: 160, render: (scope: any) => formatDate(scope.row.qualityTime, 'YYYY-mm-dd HH:MM:SS') },
-	{ prop: 'grade', label: '质检得分', minWidth: 100 },
-	{ label: '操作', width: 110, fixed: 'right', align: 'center', prop: 'operation' },
-];
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
 	queryList();
 };
 // 查询已质检列表
-const requestParams = ref({});
+const requestParams = ref<EmptyObjectType>({});
 const queryList = () => {
 	state.loading = true;
-	switch (state.queryParams.Source) {
-		case 1:
-			columns.value = acceptQualityColumns;
-			break;
-		case 2:
-			columns.value = assignQualityColumns;
-			break;
-		case 3:
-			columns.value = visitQualityColumns;
-			break;
-		default:
-			break;
-	}
 	requestParams.value = Other.deepClone(state.queryParams);
 	requestParams.value.CreationTimeStart = state.queryParams.crTime === null ? null : state.queryParams.crTime[0]; // 生成时间
 	requestParams.value.CreationTimeEnd = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
@@ -358,8 +229,13 @@ const onQualityEdit = (row: any) => {
 	qualityInspectionRef.value.openDialog(row, state.queryParams.Source);
 };
 // 页面加载时
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>

src/views/quality/index/index.vue

@@ -2,146 +2,130 @@
 	<div class="quality-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
 			<el-tabs v-model="state.queryParams.Source" @tab-change="handleQuery">
-				<el-tab-pane :label="item.value" :name="item.key" v-for="item in qualitySourceOptions" :key="item.key" :disabled="state.loading"></el-tab-pane>
+				<el-tab-pane
+					:label="item.value"
+					:name="item.key"
+					v-for="item in qualitySourceOptions"
+					:key="item.key"
+					:disabled="state.loading"
+				></el-tab-pane>
 			</el-tabs>
-			<ProTable
-				ref="proTableRef"
-				:columns="acceptQualityColumns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+				<el-form-item label="关键词" prop="Keyword">
+					<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="创建时间" prop="crTime">
+					<el-date-picker
+						v-model="state.queryParams.crTime"
+						type="datetimerange"
+						unlink-panels
+						range-separator="至"
+						start-placeholder="开始时间"
+						end-placeholder="结束时间"
+						:shortcuts="shortcuts"
+						@change="handleQuery"
+						value-format="YYYY-MM-DD[T]HH:mm:ss"
+						:default-time="defaultTimeStartEnd"
+					/>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-				v-if="state.queryParams.Source === 1"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-						<el-form-item label="关键词" prop="Keyword">
-							<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="创建时间" prop="crTime">
-							<el-date-picker
-								v-model="state.queryParams.crTime"
-								type="datetimerange"
-								unlink-panels
-								range-separator="至"
-								start-placeholder="开始时间"
-								end-placeholder="结束时间"
-								:shortcuts="shortcuts"
-								@change="handleQuery"
-								value-format="YYYY-MM-DD[T]HH:mm:ss"
-								:default-time="defaultTimeStartEnd"
-							/>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onQualityInspection(row)" v-auth="'quality:inspection'" title="质检"> 质检 </el-button>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="assignQualityColumns"
-				: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-else-if="state.queryParams.Source === 2"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-						<el-form-item label="关键词" prop="Keyword">
-							<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="创建时间" prop="crTime">
-							<el-date-picker
-								v-model="state.queryParams.crTime"
-								type="datetimerange"
-								unlink-panels
-								range-separator="至"
-								start-placeholder="开始时间"
-								end-placeholder="结束时间"
-								:shortcuts="shortcuts"
-								@change="handleQuery"
-								value-format="YYYY-MM-DD[T]HH:mm:ss"
-								:default-time="defaultTimeStartEnd"
-							/>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onQualityInspection(row)" v-auth="'quality:inspection'" title="质检"> 质检 </el-button>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="visitQualityColumns"
-				: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="quality"
+					:custom-config="{ storage: true }"
+				>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.title" title="工单标题" min-width="200">
+						<template #default="{ row }">
+							<order-detail :order="row.order" @updateList="queryList">{{ row.order.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="aiQuality" title="质检方式" width="100">
+						<template #default="{ row }">
+							{{ row.aiQuality ? '智能质检' : '人工质检' }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.sourceChannel" title="来源渠道" width="110"></vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<template v-if="state.queryParams.Source === 2">
+						<vxe-column field="order.centerToOrgTime" title="交办时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.order.centerToOrgTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+					</template>
+					<template v-if="state.queryParams.Source === 3">
+						<vxe-column field="visit.visitStateText" title="回访状态" width="110"></vxe-column>
+						<vxe-column field="visit.visitTypeText" title="回访方式" width="110"></vxe-column>
+						<vxe-column field="order.filedTime" title="办结时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="visit.publishTime" title="发布时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.visit?.publishTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="visit.creationTime" title="回访任务创建时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.visit?.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="visit.employeeName" title="回访人" width="120"></vxe-column>
+						<vxe-column field="visit.visitTime" title="回访时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="order.counterSignTypeText" title="是否会签" width="100"></vxe-column>
+					</template>
+					<vxe-column field="order.statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="100"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="order.fromPhone" title="来电电话" width="140"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="90" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onQualityInspection(row)" v-auth="'quality:inspection'" 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="state.queryParams.Source === 3"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-						<el-form-item label="关键词" prop="Keyword">
-							<el-input v-model="state.queryParams.Keyword" placeholder="关键词" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="创建时间" prop="crTime">
-							<el-date-picker
-								v-model="state.queryParams.crTime"
-								type="datetimerange"
-								unlink-panels
-								range-separator="至"
-								start-placeholder="开始时间"
-								end-placeholder="结束时间"
-								:shortcuts="shortcuts"
-								@change="handleQuery"
-								value-format="YYYY-MM-DD[T]HH:mm:ss"
-								:default-time="defaultTimeStartEnd"
-							/>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onQualityInspection(row)" v-auth="'quality:inspection'" title="质检"> 质检 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!-- 质检 -->
 		<quality-inspection ref="qualityInspectionRef" @updateList="queryList" />
@@ -159,8 +143,8 @@ import Other from '@/utils/other';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const QualityInspection = defineAsyncComponent(() => import('@/views/quality/index/components/Quality-inspection.vue')); // 质检
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
-const proTableRef = ref<RefType>(); // 表格ref
 // 定义变量内容
 const state = reactive<any>({
 	loading: false, // 加载状态
@@ -190,107 +174,13 @@ const getBaseData = async () => {
 		console.log(error);
 	}
 };
-// 受理待质检表头
-const acceptQualityColumns = [
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'aiQuality', label: '质检方式', minWidth: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{
-		prop: 'order.acceptorName',
-		label: '受理人',
-		minWidth: 120,
-	},
-	{ prop: 'order.fromPhone', label: '来电电话', minWidth: 140 },
-	{ label: '操作', width: 80, fixed: 'right', align: 'center', prop: 'operation' },
-];
-// 交办待质检表头
-const assignQualityColumns = [
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'aiQuality', label: '质检方式', minWidth: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{
-		prop: 'order.centerToOrgTime',
-		label: '交办时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.centerToOrgTime?.creationTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{ prop: 'order.fromPhone', label: '来电电话', minWidth: 140 },
-	{ label: '操作', width: 80, fixed: 'right', align: 'center', prop: 'operation' },
-];
-// 回访待质检表头
-const visitQualityColumns = [
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'aiQuality', label: '质检方式', minWidth: 100, render: (scope: any) => (scope.row.aiQuality ? '智能质检' : '人工质检') },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'visit.visitStateText', label: '回访状态', minWidth: 100 },
-	{ prop: 'visit.visitTypeText', label: '回访方式', minWidth: 100 },
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{
-		prop: 'order.filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{
-		prop: 'visit.publishTime',
-		label: '发布时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.visit?.publishTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{
-		prop: 'visit.creationTime',
-		label: '回访任务创建时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.visit?.creationTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{ prop: 'visit.employeeName', label: '回访人', minWidth: 120 },
-	{
-		prop: 'visit.visitTime',
-		label: '回访时间',
-		minWidth: 160,
-		render: (scope: any) => formatDate(scope.row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS'),
-	},
-	{ prop: 'order.counterSignTypeText', label: '是否会签', minWidth: 90 },
-	{ label: '操作', width: 80, fixed: 'right', align: 'center', prop: 'operation' },
-];
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
 	queryList();
 };
 // 查询质检列表
-const requestParams = ref({});
+const requestParams = ref<EmptyObjectType>({});
 const queryList = () => {
 	state.loading = true;
 	requestParams.value = Other.deepClone(state.queryParams);
@@ -321,8 +211,13 @@ const onQualityInspection = (row: any) => {
 	qualityInspectionRef.value.openDialog(row, state.queryParams.Source);
 };
 // 页面加载时
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>

src/views/quality/lexicon/components/Lexicon-edit.vue

@@ -105,13 +105,16 @@ const state = reactive<any>({
 
 // 打开弹窗
 const openDialog = async (row: any) => {
+	state.loading = true;
+	state.dialogVisible = true;
 	try {
 		const res = await lexiconDetail(row.id);
 		state.ruleForm = res.result ?? {};
 		dynamicTags.value = res.result.synonym?.split(',') ?? [];
-		state.dialogVisible = true;
+		state.loading = false;
 	} catch (e) {
 		console.log(e);
+		state.loading = false;
 	}
 };
 // 关闭弹窗

src/views/quality/lexicon/index.vue

@@ -1,48 +1,90 @@
 <template>
 	<div class="quality-lexicon-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" inline @submit.native.prevent>
+				<el-form-item label="违禁词" prop="Name">
+					<el-input v-model="state.queryParams.Name" placeholder="请填写违禁词" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="违禁词分类" prop="Classify">
+					<el-select v-model="state.queryParams.Classify" placeholder="请选择违禁词分类" @change="handleQuery">
+						<el-option v-for="item in prohibitedClassify" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="违禁词属性" prop="Type">
+					<el-select v-model="state.queryParams.Type" placeholder="请选择违禁词属性" @change="handleQuery">
+						<el-option v-for="item in prohibitedType" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+					</el-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+				</el-form-item>
+			</el-form>
+			<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: handleQuery,
+				}"
 			>
-        <template #table-search>
-          <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-            <el-form-item label="违禁词" prop="Name">
-              <el-input v-model="state.queryParams.Name" placeholder="请填写违禁词" clearable @keyup.enter="handleQuery" class="keyword-input" />
-            </el-form-item>
-            <el-form-item label="违禁词分类" prop="Classify">
-              <el-select v-model="state.queryParams.Classify" placeholder="请选择违禁词分类" @change="handleQuery">
-                <el-option v-for="item in prohibitedClassify" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
-              </el-select>
-            </el-form-item>
-            <el-form-item label="违禁词属性" prop="Type">
-              <el-select v-model="state.queryParams.Type" placeholder="请选择违禁词属性" @change="handleQuery">
-                <el-option v-for="item in prohibitedType" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-              <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
-            </el-form-item>
-          </el-form>
-        </template>
-				<template #tableHeader="scope">
-					<el-button type="primary" @click="onLexiconAdd" v-auth="'quality:lexicon:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
-					<el-button type="danger" @click="onLexiconDelete" v-auth="'quality:lexicon:delete'" :disabled="!scope.isSelected">
-						<SvgIcon name="ele-Delete" class="mr5" />删除<span v-if="proTableRef?.selectedList?.length">({{proTableRef?.selectedList?.length}})</span>
+				<template #buttons>
+					<el-button type="primary" @click="onLexiconAdd" v-auth="'quality:lexicon:add'">
+						<SvgIcon name="ele-Plus" class="mr5" />新增质检词</el-button
+					>
+					<el-button type="danger" @click="onLexiconDelete" v-auth="'quality:lexicon:delete'" :disabled="isChecked">
+						<SvgIcon name="ele-Delete" class="mr5" />删除
 					</el-button>
 				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onLexiconEdit(row)" v-auth="'quality:lexicon:edit'" title="编辑违禁词"> 编辑 </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="qualityLexicon"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+				>
+					<vxe-column type="checkbox" width="50" align="center"></vxe-column>
+					<vxe-column field="name" title="违禁词" min-width="150"></vxe-column>
+					<vxe-column field="classify" title="违禁词分类" width="200"></vxe-column>
+					<vxe-column field="type" title="违禁词属性" width="150"></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="lastModificationName" title="更新人" width="120"></vxe-column>
+					<vxe-column field="lastModificationTime" title="更新时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.lastModificationTime, '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="onLexiconEdit(row)" v-auth="'quality:lexicon:edit'" 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>
 		<!--  违禁词新增  -->
 		<lexicon-add ref="lexiconAddRef" @updateList="queryList" :prohibitedClassify="prohibitedClassify" :prohibitedType="prohibitedType" />
@@ -52,7 +94,7 @@
 </template>
 
 <script lang="tsx" setup name="qualityLexicon">
-import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { lexiconBaseData, lexiconDelete, lexiconList } from '@/api/quality/lexicon';
@@ -60,34 +102,8 @@ import { lexiconBaseData, lexiconDelete, lexiconList } from '@/api/quality/lexic
 // 引入组件
 const LexiconAdd = defineAsyncComponent(() => import('@/views/quality/lexicon/components/Lexicon-add.vue')); // 违禁词新增
 const LexiconEdit = defineAsyncComponent(() => import('@/views/quality/lexicon/components/Lexicon-edit.vue')); // 违禁词编辑
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', fixed: 'left', width: 40, align: 'center' },
-	{ prop: 'name', label: '违禁词', minWidth: 200 },
-	{ prop: 'classify', label: '违禁词分类', minWidth: 150 },
-	{ prop: 'type', label: '违禁词属性', minWidth: 100 },
-	{ prop: 'creatorName', label: '创建人', minWidth: 120 },
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		minWidth: 150,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'lastModificationName', label: '更新人', minWidth: 120 },
-	{
-		prop: 'lastModificationTime',
-		label: '更新时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
 // 定义变量内容
 const state = reactive({
 	loading: false, // 加载状态
@@ -127,9 +143,13 @@ const queryList = () => {
 			state.loading = false;
 			state.tableData = res.result.items ?? [];
 			state.total = res.result.total ?? 0;
+			tableRef.value.clearCheckboxRow();
+			checkTable.value = [];
 		})
 		.finally(() => {
 			state.loading = false;
+			tableRef.value.clearCheckboxRow();
+			checkTable.value = [];
 		});
 };
 // 重置表单
@@ -150,8 +170,8 @@ const onLexiconEdit = (row: any) => {
 };
 // 删除参数
 const onLexiconDelete = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
-	ElMessageBox.confirm(`您确定要删除选择的【${proTableRef.value.selectedList.length}】个违禁词，是否继续?`, '提示', {
+	const ids = checkTable.value.map((item: any) => item.id);
+	ElMessageBox.confirm(`您确定要删除选中的违禁词，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'warning',
@@ -161,20 +181,39 @@ const onLexiconDelete = () => {
 	})
 		.then(() => {
 			lexiconDelete({ ids }).then(() => {
-				ElMessage.success('操作成功');
+				ElMessage.success('删除成功');
 				queryList();
 			});
 		})
 		.catch(() => {});
 };
+const tableRef = ref<RefType>();
+const checkTable = ref<EmptyArrayType>([]);
+const selectAllChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
+	}
+};
+
+const selectChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '勾选事件' : '取消事件', records);
+	}
+};
+const isChecked = computed(() => {
+	return !Boolean(checkTable.value.length);
+});
+const toolbarRef = ref<RefType>();
 // 页面加载时
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>
-
-<style lang="scss" scoped>
-.quality-lexicon-container {
-}
-</style>

src/views/quality/project/components/Project-edit.vue

@@ -93,12 +93,15 @@ const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 // 打开弹窗
 const openDialog = async (row: any) => {
+	state.loading = true;
+	state.dialogVisible = true;
 	try {
 		const res = await projectDetail(row.id);
 		state.ruleForm = res.result ?? {};
-		state.dialogVisible = true;
+		state.loading = false;
 	} catch (e) {
 		console.log(e);
+		state.loading = false;
 	}
 };
 // 关闭弹窗

src/views/quality/project/index.vue

@@ -1,94 +1,108 @@
 <template>
 	<div class="quality-project-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" inline @submit.native.prevent>
+				<el-form-item label="质检项名称" prop="Name">
+					<el-input v-model="state.queryParams.Name" placeholder="请填写质检项目名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="质检项分组" prop="GroupingName">
+					<el-select v-model="state.queryParams.GroupingName" placeholder="请选择质检项目分组" @change="handleQuery">
+						<el-option v-for="item in qualityItemGrouping" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+					</el-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+				</el-form-item>
+			</el-form>
+			<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="['YiBin'].includes(themeConfig.appScope)"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
 			>
-        <template #table-search>
-          <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-            <el-form-item label="质检项名称" prop="Name">
-              <el-input v-model="state.queryParams.Name" placeholder="请填写质检项目名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
-            </el-form-item>
-            <el-form-item label="质检项分组" prop="GroupingName">
-              <el-select v-model="state.queryParams.GroupingName" placeholder="请选择质检项目分组" @change="handleQuery">
-                <el-option v-for="item in qualityItemGrouping" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-              <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
-            </el-form-item>
-          </el-form>
-        </template>
-				<!-- 表格 header 按钮 -->
-				<template #tableHeader="scope">
+				<template #buttons>
 					<el-button type="primary" @click="onProjectAdd" v-waves v-auth="'quality:project:add'">
-						<SvgIcon name="ele-Plus" class="mr5" />新增
+						<SvgIcon name="ele-Plus" class="mr5" />新增质检项
 					</el-button>
-					<el-button type="danger" @click="onProjectDelete" v-waves v-auth="'quality:project:delete'" :disabled="!scope.isSelected">
-						<SvgIcon name="ele-Delete" class="mr5" />删除<span v-if="proTableRef?.selectedList?.length">({{proTableRef?.selectedList?.length}})</span>
+					<el-button type="danger" @click="onProjectDelete" v-waves v-auth="'quality:project:delete'" :disabled="isChecked">
+						<SvgIcon name="ele-Delete" class="mr5" />删除
 					</el-button>
 				</template>
-				<template #type="{ row }">
-					{{ row.isIntelligent === 1 ? '是' : '否' }}
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onProjectEdit(row)" v-auth="'quality:project:edit'" title="编辑质检项目"> 编辑 </el-button>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="columnsZg"
-				: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="qualityProject"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+				>
+					<vxe-column type="checkbox" width="50" align="center"></vxe-column>
+					<vxe-column field="name" title="质检项名称" min-width="150"></vxe-column>
+					<vxe-column field="describe" title="质检项描述" width="200"></vxe-column>
+					<vxe-column field="groupingName" title="质检项分组" width="150"></vxe-column>
+					<vxe-column field="type" title="是否智能质检" width="120" v-if="['YiBin'].includes(themeConfig.appScope)">
+						<template #default="{ row }">
+							{{ row.isIntelligent === 1 ? '是' : '否' }}
+						</template>
+					</vxe-column>
+					<vxe-column field="grade" title="分值（分）" width="100"></vxe-column>
+					<vxe-column field="isEnable" title="是否启用" width="100">
+						<template #default="{ row }">
+							<template v-if="auth('quality:project:edit')">
+								<el-switch
+									v-model="row.isEnable"
+									active-text="启用"
+									inactive-text="禁用"
+									:active-value="1"
+									:inactive-value="0"
+									@change="changeIsEnable(row)"
+									inline-prompt
+									size="small"
+								/>
+							</template>
+							<span v-else>{{ row.isEnable ? '已启用' : '已禁用' }}</span>
+						</template>
+					</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="lastModificationName" title="更新人" width="120"></vxe-column>
+					<vxe-column field="lastModificationTime" title="更新时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.lastModificationTime, '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="onProjectEdit(row)" v-auth="'quality:project:edit'" 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="['ZiGong','LuZhou'].includes(themeConfig.appScope)"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-						<el-form-item label="质检项名称" prop="Name">
-							<el-input v-model="state.queryParams.Name" placeholder="请填写质检项目名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="质检项分组" prop="GroupingName">
-							<el-select v-model="state.queryParams.GroupingName" placeholder="请选择质检项目分组" @change="handleQuery">
-								<el-option v-for="item in qualityItemGrouping" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
-							</el-select>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<!-- 表格 header 按钮 -->
-				<template #tableHeader="scope">
-					<el-button type="primary" @click="onProjectAdd" v-waves v-auth="'quality:project:add'">
-						<SvgIcon name="ele-Plus" class="mr5" />新增
-					</el-button>
-					<el-button type="danger" @click="onProjectDelete" v-waves v-auth="'quality:project:delete'" :disabled="!scope.isSelected">
-						<SvgIcon name="ele-Delete" class="mr5" />删除
-					</el-button>
-				</template>
-				<template #type="{ row }">
-					{{ row.isIntelligent === 1 ? '是' : '否' }}
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onProjectEdit(row)" v-auth="'quality:project:edit'" title="编辑质检项目"> 编辑 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--  质检项目新增  -->
 		<project-add ref="projectAddRef" @updateList="queryList" :qualityItemGrouping="qualityItemGrouping" />
@@ -98,7 +112,7 @@
 </template>
 
 <script lang="tsx" setup name="qualityProject">
-import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { auth } from '@/utils/authFunction';
@@ -109,109 +123,8 @@ import { storeToRefs } from 'pinia';
 // 引入组件
 const ProjectAdd = defineAsyncComponent(() => import('@/views/quality/project/components/Project-add.vue')); // 质检项目新增
 const ProjectEdit = defineAsyncComponent(() => import('@/views/quality/project/components/Project-edit.vue')); // 质检项目编辑
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', fixed: 'left', width: 40, align: 'center' },
-	{ prop: 'name', label: '质检项名称', minWidth: 150 },
-	{ prop: 'describe', label: '质检项描述', minWidth: 200 },
-	{ prop: 'groupingName', label: '质检项分组', minWidth: 150 },
-	{ prop: 'type', label: '是否智能质检', minWidth: 120 },
-	{ prop: 'grade', label: '分值（分）', minWidth: 100 },
-	{
-		prop: 'isEnable',
-		label: '是否启用',
-		render: (scope) => {
-			return (
-				<>
-					{auth('quality:project:edit') ? (
-						<el-switch
-							model-value={scope.row.isEnable}
-							active-text="启用"
-							inactive-text="禁用"
-							active-value={1}
-							inactive-value={0}
-							onClick={() => changeIsEnable(scope.row)}
-							inline-prompt
-              size="small"
-						/>
-					) : (
-						<span>{scope.row.isEnable === 1 ? '启用' : '禁用'}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{ prop: 'creatorName', label: '创建人', minWidth: 120 },
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'lastModificationName', label: '更新人', minWidth: 120 },
-	{
-		prop: 'lastModificationTime',
-		label: '更新时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
-const columnsZg = ref<any>([
-	{ type: 'selection', fixed: 'left', width: 40, align: 'center' },
-	{ prop: 'name', label: '质检项名称', minWidth: 150 },
-	{ prop: 'describe', label: '质检项描述', minWidth: 200 },
-	{ prop: 'groupingName', label: '质检项分组', minWidth: 150 },
-	{ prop: 'grade', label: '分值（分）', minWidth: 100 },
-	{
-		prop: 'isEnable',
-		label: '是否启用',
-		render: (scope) => {
-			return (
-				<>
-					{auth('quality:project:edit') ? (
-						<el-switch
-							model-value={scope.row.isEnable}
-							active-text="启用"
-							inactive-text="禁用"
-							active-value={1}
-							inactive-value={0}
-							onClick={() => changeIsEnable(scope.row)}
-							inline-prompt
-							size="small"
-						/>
-					) : (
-						<span>{scope.row.isEnable === 1 ? '启用' : '禁用'}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{ prop: 'creatorName', label: '创建人', minWidth: 120 },
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'lastModificationName', label: '更新人', minWidth: 120 },
-	{
-		prop: 'lastModificationTime',
-		label: '更新时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastModificationTime, '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 state = reactive({
 	loading: false, // 加载状态
@@ -251,9 +164,13 @@ const queryList = () => {
 			state.loading = false;
 			state.tableData = res.result.items ?? [];
 			state.total = res.result.total ?? 0;
+			tableRef.value.clearCheckboxRow();
+			checkTable.value = [];
 		})
 		.finally(() => {
 			state.loading = false;
+			tableRef.value.clearCheckboxRow();
+			checkTable.value = [];
 		});
 };
 // 重置表单
@@ -274,8 +191,8 @@ const onProjectEdit = (row: any) => {
 };
 // 删除质检项目
 const onProjectDelete = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
-	ElMessageBox.confirm(`您确定要删除选择的【${proTableRef.value.selectedList.length}】个质检项目，是否继续?`, '提示', {
+	const ids = checkTable.value.map((item: any) => item.id);
+	ElMessageBox.confirm(`您确定要删除选中的质检项目，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'warning',
@@ -293,6 +210,7 @@ const onProjectDelete = () => {
 };
 //  修改是否启用
 const changeIsEnable = (row: any) => {
+	row.isEnable = row.isEnable === 1 ? 0 : 1; //保持switch点击前的状态
 	ElMessageBox.confirm(`您确定要${row.isEnable === 1 ? '禁用' : '启用'}：【${row.name}】质检项，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
@@ -309,7 +227,7 @@ const changeIsEnable = (row: any) => {
 			};
 			projectUpdate(request)
 				.then(() => {
-					ElMessage.success('操作成功');
+					ElMessage.success('删除成功');
 					queryList();
 				})
 				.catch(() => {
@@ -320,14 +238,33 @@ const changeIsEnable = (row: any) => {
 			queryList();
 		});
 };
+const tableRef = ref<RefType>();
+const checkTable = ref<EmptyArrayType>([]);
+const selectAllChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
+	}
+};
+
+const selectChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '勾选事件' : '取消事件', records);
+	}
+};
+const isChecked = computed(() => {
+	return !Boolean(checkTable.value.length);
+});
+const toolbarRef = ref<RefType>();
 // 页面加载时
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>
-
-<style lang="scss" scoped>
-.quality-project-container {
-}
-</style>

src/views/quality/template/components/Template-edit.vue

@@ -115,6 +115,8 @@ const state = reactive<any>({
 const projectArray = ref<EmptyArrayType>([]); // 质检项
 // 打开弹窗
 const openDialog = async (row: any) => {
+	state.loading = true;
+	state.dialogVisible = true;
 	try {
 		const res = await templateDetail(row.id);
 		state.ruleForm = res.result ?? {};
@@ -131,9 +133,10 @@ const openDialog = async (row: any) => {
 		const response = await projectList({  IsEnable: 1,PageIndex:1,PageSize:999 });
 		projectArray.value = response.result?.items ?? [];
     getEnableAcceptType();
-		state.dialogVisible = true;
+		state.loading = false;
 	} catch (e) {
 		console.log(e);
+		state.loading = false;
 	}
 };
 // 关闭弹窗

src/views/quality/template/index.vue

@@ -1,46 +1,101 @@
 <template>
 	<div class="quality-template-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" inline @submit.native.prevent>
+				<el-form-item label="模版名称" prop="Name">
+					<el-input v-model="state.queryParams.Name" placeholder="请填写模版名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="质检分类" prop="Grouping">
+					<el-select v-model="state.queryParams.Grouping" placeholder="请选择质检分类" @change="handleQuery">
+						<el-option v-for="item in templateGrouping" :value="item.key" :key="item.key" :label="item.value" />
+					</el-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
+				</el-form-item>
+			</el-form>
+			<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: handleQuery,
+				}"
 			>
-        <template #table-search>
-          <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-            <el-form-item label="模版名称" prop="Name">
-              <el-input v-model="state.queryParams.Name" placeholder="请填写模版名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
-            </el-form-item>
-            <el-form-item label="质检分类" prop="Grouping">
-              <el-select v-model="state.queryParams.Grouping" placeholder="请选择质检分类" @change="handleQuery">
-                <el-option v-for="item in templateGrouping" :value="item.key" :key="item.key" :label="item.value" />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-              <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
-            </el-form-item>
-          </el-form>
-        </template>
-				<template #tableHeader="scope">
-					<el-button type="primary" @click="onTemplateAdd" v-auth="'quality:template:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
-					<el-button type="danger" @click="onTemplateDelete" v-auth="'quality:template:delete'" :disabled="!scope.isSelected">
-						<SvgIcon name="ele-Delete" class="mr5" />删除<span v-if="proTableRef?.selectedList?.length">({{proTableRef?.selectedList?.length}})</span>
+				<template #buttons>
+					<el-button type="primary" @click="onTemplateAdd" v-auth="'quality:template:add'">
+						<SvgIcon name="ele-Plus" class="mr5" />新增质检模板</el-button
+					>
+					<el-button type="danger" @click="onTemplateDelete" v-auth="'quality:template:delete'" :disabled="isChecked">
+						<SvgIcon name="ele-Delete" class="mr5" />删除
 					</el-button>
 				</template>
-				<template #type="{ row }">
-					{{ row.isIntelligent === 1 ? '是' : '否' }}
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onTemplateEdit(row)" v-auth="'quality:template:edit'" title="编辑模板"> 编辑 </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="qualityTemplate"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+				>
+					<vxe-column type="checkbox" width="50" align="center"></vxe-column>
+					<vxe-column field="name" title="质检项名称" min-width="150"></vxe-column>
+					<vxe-column field="groupingText" title="质检分类" width="150"></vxe-column>
+					<vxe-column field="isEnable" title="是否启用" width="100">
+						<template #default="{ row }">
+							<template v-if="auth('quality:template:edit')">
+								<el-switch
+									v-model="row.isEnable"
+									active-text="启用"
+									inactive-text="禁用"
+									:active-value="1"
+									:inactive-value="0"
+									@change="changeIsEnable(row)"
+									inline-prompt
+									size="small"
+								/>
+							</template>
+							<span v-else>{{ row.isEnable ? '已启用' : '已禁用' }}</span>
+						</template>
+					</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="lastModificationName" title="更新人" width="120"></vxe-column>
+					<vxe-column field="lastModificationTime" title="更新时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.lastModificationTime, '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="onTemplateEdit(row)" v-auth="'quality:template:edit'" 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>
 		<!--  模板新增  -->
 		<quality-template-add ref="templateAdd" @updateList="queryList" :templateGrouping="templateGrouping" />
@@ -50,7 +105,7 @@
 </template>
 
 <script lang="tsx" setup name="qualityTemplate">
-import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { auth } from '@/utils/authFunction';
@@ -59,57 +114,8 @@ import { templateBaseData, templateDelete, templateList, templateUpdate } from '
 // 引入组件
 const QualityTemplateAdd = defineAsyncComponent(() => import('@/views/quality/template/components/Template-add.vue')); // 模板新增
 const QualityTemplateEdit = defineAsyncComponent(() => import('@/views/quality/template/components/Template-edit.vue')); // 模板编辑
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', fixed: 'left', width: 40, align: 'center' },
-	{ prop: 'name', label: '模板名称', minWidth: 200 },
-	{ prop: 'groupingText', label: '质检分类', minWidth: 200 },
-	{
-		prop: 'isEnable',
-		label: '是否启用',
-		render: (scope) => {
-			return (
-				<>
-					{auth('quality:template:edit') ? (
-						<el-switch
-							model-value={scope.row.isEnable}
-							active-text="启用"
-							inactive-text="禁用"
-							active-value={1}
-							inactive-value={0}
-							onClick={() => changeIsEnable(scope.row)}
-							inline-prompt
-              size="small"
-						/>
-					) : (
-						<span>{scope.row.isEnable === 1 ? '启用' : '禁用'}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{ prop: 'creatorName', label: '创建人', minWidth: 120 },
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'lastModificationName', label: '更新人', minWidth: 120 },
-	{
-		prop: 'lastModificationTime',
-		label: '更新时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
 // 定义变量内容
 const state = reactive({
 	loading: false, // 加载状态
@@ -146,9 +152,13 @@ const queryList = () => {
 			state.loading = false;
 			state.tableData = res.result.items ?? [];
 			state.total = res.result.total ?? 0;
+			tableRef.value.clearCheckboxRow();
+			checkTable.value = [];
 		})
 		.finally(() => {
 			state.loading = false;
+			tableRef.value.clearCheckboxRow();
+			checkTable.value = [];
 		});
 };
 // 重置表单
@@ -169,6 +179,7 @@ const onTemplateEdit = (row: any) => {
 };
 //  修改是否启用
 const changeIsEnable = (row: any) => {
+	row.isEnable = row.isEnable === 1 ? 0 : 1; //保持switch点击前的状态
 	ElMessageBox.confirm(`您确定要${row.isEnable === 1 ? '禁用' : '启用'}：【${row.name}】模板，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
@@ -198,8 +209,8 @@ const changeIsEnable = (row: any) => {
 };
 // 删除参数
 const onTemplateDelete = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
-	ElMessageBox.confirm(`您确定要删除选择的【${proTableRef.value.selectedList.length}】个模板，是否继续?`, '提示', {
+	const ids = checkTable.value.map((item: any) => item.id);
+	ElMessageBox.confirm(`您确定要删除选中的质检模板，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'warning',
@@ -209,20 +220,39 @@ const onTemplateDelete = () => {
 	})
 		.then(() => {
 			templateDelete({ ids }).then(() => {
-				ElMessage.success('操作成功');
+				ElMessage.success('删除成功');
 				queryList();
 			});
 		})
 		.catch(() => {});
 };
+const tableRef = ref<RefType>();
+const checkTable = ref<EmptyArrayType>([]);
+const selectAllChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
+	}
+};
+
+const selectChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '勾选事件' : '取消事件', records);
+	}
+};
+const isChecked = computed(() => {
+	return !Boolean(checkTable.value.length);
+});
+const toolbarRef = ref<RefType>();
 // 页面加载时
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>
-
-<style lang="scss" scoped>
-.quality-template-container {
-}
-</style>

src/views/todo/center/index.vue

@@ -29,7 +29,6 @@
 						><SvgIcon name="ele-List" class="mr5" />分配工单
 					</el-button>
 				</template>
-				<template #tools> </template>
 			</vxe-toolbar>
 			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
 				<vxe-table

src/views/todo/seats/index.vue

@@ -34,7 +34,6 @@
 						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出
 					</el-button>
 				</template>
-				<template #tools> </template>
 			</vxe-toolbar>
 			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
 				<vxe-table