reactor:部分表格重构;

src/views/auxiliary/businessTag/index.vue

@@ -22,48 +22,34 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<div class="mb20">
-				<el-button type="primary" @click="addParameter" v-auth="'auxiliary:businessTag:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
-				<el-button type="primary" @click="businessTagRemove" v-auth="'auxiliary:businessTag:delete'" :disabled="!multipleSelection.length">
-					<SvgIcon name="ele-Delete" class="mr5" />删除
-				</el-button>
-				<el-button type="primary" @click="businessTagBinding" v-auth="'auxiliary:businessTag:binding'" :disabled="!multipleSelection.length">
-					<SvgIcon name="ele-Link" class="mr5" />批量绑定
-				</el-button>
-			</div>
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading" row-key="id" ref="multipleTableRef" @selection-change="handleSelectionChange">
-				<el-table-column type="selection" width="55" />
-				<el-table-column prop="name" label="标签名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="typeText" label="标签类型" show-overflow-tooltip width="130"></el-table-column>
-				<el-table-column prop="businessTypeText" label="业务类型" show-overflow-tooltip width="300"></el-table-column>
-				<el-table-column prop="classify" label="分类名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="creationTime" label="创建时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ dayjs(row.creationTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="creatorName" label="创建人" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="creatorOrgName" label="创建人部门" show-overflow-tooltip></el-table-column>
-				<el-table-column label="操作" width="120" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="updateBusinessTag(row)" v-auth="'auxiliary:businessTag:edit'" title="修改业务标签">
-							编辑
-						</el-button>
-						<el-button link type="info" @click="viewBusinessTag(row)" title="查看详情"> 查看 </el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
 				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+			>
+				<!-- 表格 header 按钮 -->
+				<template #tableHeader="scope">
+					<el-button type="primary" @click="addParameter" v-auth="'auxiliary:businessTag:add'">
+						<SvgIcon name="ele-Plus" class="mr5" />新增
+					</el-button>
+					<el-button type="primary" @click="businessTagRemove" v-auth="'auxiliary:businessTag:delete'" :disabled="!scope.isSelected">
+						<SvgIcon name="ele-Delete" class="mr5" />删除
+					</el-button>
+					<el-button type="primary" @click="businessTagBinding" v-auth="'auxiliary:businessTag:binding'" :disabled="!scope.isSelected">
+						<SvgIcon name="ele-Link" class="mr5" />批量绑定
+					</el-button>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="updateBusinessTag(row)" v-auth="'auxiliary:businessTag:edit'" title="修改业务标签"> 编辑 </el-button>
+					<el-button link type="info" @click="viewBusinessTag(row)" title="查看详情"> 查看 </el-button>
+				</template>
+			</ProTable>
 		</el-card>
 		<!--  新增标签  -->
 		<business-tag-add ref="businessTagAddRef" @updateList="queryList" :businessTagType="businessTagType" :tagType="tagType" />
@@ -74,16 +60,37 @@
 	</div>
 </template>
 
-<script lang="ts" setup name="auxiliaryBusinessTag">
+<script lang="tsx" setup name="auxiliaryBusinessTag">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
+import { ElButton, ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { businessTagBaseData, businessTagDelete, businessTagList } from '@/api/auxiliary/businessTag';
 import dayjs from 'dayjs';
+import { formatDate } from '@/utils/formatTime';
 // 引入组件
 const BusinessTagBindingCom = defineAsyncComponent(() => import('@/views/auxiliary/businessTag/components/Business-tag-binding.vue')); // 绑定标签
 const BusinessTagAdd = defineAsyncComponent(() => import('@/views/auxiliary/businessTag/components/Business-tag-add.vue')); // 新增标签
 const BusinessTagEdit = defineAsyncComponent(() => import('@/views/auxiliary/businessTag/components/Business-tag-edit.vue')); // 编辑标签
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'selection', fixed: 'left', width: 55 },
+	{ prop: 'name', label: '标签名称' },
+	{ prop: 'typeText', label: '标签类型', width: 130 },
+	{ prop: 'businessTypeText', label: '业务类型', width: 300 },
+	{ prop: 'classify', label: '分类名称' },
+	{
+		prop: 'creationTime',
+		label: '创建时间',
+		width: 170,
+		render: (scope: any) => {
+			return dayjs(scope.row.creationTime).format('YYYY-MM-DD HH:mm:ss');
+		},
+	},
+	{ prop: 'creatorName', label: '创建人' },
+	{ prop: 'creatorOrgName', label: '创建人部门' },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 120, align: 'center' },
+]);
 // 定义变量内容
 const state = reactive<any>({
 	loading: false, // 加载状态
@@ -144,16 +151,10 @@ const updateBusinessTag = (row: any) => {
 const viewBusinessTag = (row: any) => {
 	businessTagEditRef.value.openDialog(row.id, true);
 };
-// 表格多选
-const multipleTableRef = ref<RefType>();
-const multipleSelection = ref<any>([]);
-const handleSelectionChange = (val: any[]) => {
-	multipleSelection.value = val;
-};
 // 删除标签
-const businessTagRemove = (row: any) => {
-	const ids = multipleSelection.value.map((item: any) => item.id);
-	const names = multipleSelection.value.map((item: any) => item.name);
+const businessTagRemove = () => {
+	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
+	const names = proTableRef.value.selectedList.map((item: any) => item.name);
 	ElMessageBox.confirm(`您确定要删除：【${names}】，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
@@ -173,7 +174,7 @@ const businessTagRemove = (row: any) => {
 // 批量绑定
 const businessTagBindingRef = ref<RefType>(); // 绑定ref
 const businessTagBinding = () => {
-	const ids = multipleSelection.value.map((item: any) => item.id);
+	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
 	businessTagBindingRef.value.openDialog(ids);
 };
 // 页面加载时

src/views/auxiliary/message/index.vue

@@ -32,55 +32,59 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading">
-				<el-table-column prop="pushBusinessText" label="短信类型" show-overflow-tooltip width="130"></el-table-column>
-				<el-table-column prop="sendStateText" label="发送状态" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="name" label="接收人" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="telNumber" label="接受号码" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="content" label="短信内容" width="300"></el-table-column>
-				<el-table-column label="添加时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="sendOrganize" label="发送部门" show-overflow-tooltip width="150"></el-table-column>
-				<el-table-column prop="sendUser" label="发送人" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="resendCount" label="重发次数" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="orderNo" label="关联工单编号" show-overflow-tooltip width="150"></el-table-column>
-				<el-table-column prop="remark" label="备注说明" show-overflow-tooltip width="200"></el-table-column>
-				<el-table-column prop="reason" label="失败原因" show-overflow-tooltip width="200"></el-table-column>
-				<el-table-column label="操作" width="120" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onPush(row)" v-auth="'auxiliary:message:push'" v-if="[3].includes(row.sendStateText)">
-							重新发送
-						</el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
 				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+			>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onPush(row)" v-auth="'auxiliary:message:push'" v-if="[3].includes(row.sendStateText)">
+						重新发送
+					</el-button>
+				</template>
+			</ProTable>
 		</el-card>
 	</div>
 </template>
 
-<script lang="ts" setup name="auxiliaryMessage">
+<script lang="tsx" setup name="auxiliaryMessage">
 import { onMounted, reactive, ref } from 'vue';
-import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
-import { formatDate } from '@/utils/formatTime';
-import { auth } from '@/utils/authFunction';
+import { ElButton, ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { messageBase, messageList, pushMessage } from '@/api/auxiliary/message';
 import { shortcuts } from '@/utils/constants';
 import other from '@/utils/other';
+import dayjs from 'dayjs';
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'pushBusinessText', label: '短信类型', width: 130 },
+	{ prop: 'sendStateText', label: '发送状态', width: 120 },
+	{ prop: 'name', label: '接收人', width: 120 },
+	{ prop: 'telNumber', label: '接收号码', width: 120 },
+	{ prop: 'content', label: '短信内容', width: 300, showOverflowTooltip: false },
+	{
+		prop: 'creationTime',
+		label: '添加时间',
+		width: 170,
+		render: (scope: any) => {
+			return dayjs(scope.row.creationTime).format('YYYY-MM-DD HH:mm:ss');
+		},
+	},
+	{ prop: 'sendOrganize', label: '发送部门', width: 150 },
+	{ prop: 'sendUser', label: '发送人', width: 120 },
+	{ prop: 'resendCount', label: '重发次数' },
+	{ prop: 'orderNo', label: '关联工单编号', width: 150 },
+	{ prop: 'remark', label: '备注说明', width: 200 },
+	{ prop: 'reason', label: '失败原因', width: 200 },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 120, align: 'center' },
+]);
 // 定义变量内容
 const state = reactive<any>({
 	loading: false, // 加载状态

src/views/auxiliary/msgTemplate/index.vue

@@ -18,30 +18,24 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<div class="mb20">
-				<el-button type="primary" @click="addTem" v-auth="'auxiliary:msgTemplate:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
-			</div>
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading" row-key="id">
-				<el-table-column prop="name" label="模板名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="content" label="模板内容" show-overflow-tooltip min-width="400"></el-table-column>
-				<el-table-column prop="code" label="模板编码" show-overflow-tooltip></el-table-column>
-				<el-table-column label="操作" width="120" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="updateTem(row)" v-auth="'auxiliary:msgTemplate:edit'" title="修改模板"> 编辑 </el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
 				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+			>
+				<template #tableHeader="scope">
+					<el-button type="primary" @click="addTem" v-auth="'auxiliary:msgTemplate:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="updateTem(row)" v-auth="'auxiliary:msgTemplate:edit'" title="修改模板"> 编辑 </el-button>
+				</template>
+			</ProTable>
 		</el-card>
 		<!--  新增模板  -->
 		<msg-template-add ref="msgTemplateAddRef" @updateList="queryList" />
@@ -50,14 +44,23 @@
 	</div>
 </template>
 
-<script lang="ts" setup name="auxiliaryMsgTemplate">
+<script lang="tsx" setup name="auxiliaryMsgTemplate">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import { FormInstance } from 'element-plus';
+import { ElButton, FormInstance } from 'element-plus';
 import { msgTemplateList } from '@/api/auxiliary/msgTemplate';
+import dayjs from 'dayjs';
 // 引入组件
 const MsgTemplateAdd = defineAsyncComponent(() => import('@/views/auxiliary/msgTemplate/components/M-template-add.vue')); // 新增模板
 const MsgTemplateEdit = defineAsyncComponent(() => import('@/views/auxiliary/msgTemplate/components/M-template-edit.vue')); // 编辑模板
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'name', label: '模板名称' },
+	{ prop: 'content', label: '模板内容', minWidth: 400 },
+	{ prop: 'code', label: '模板编码' },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 120, align: 'center' },
+]);
 // 定义变量内容
 const state = reactive<any>({
 	loading: false, // 加载状态

src/views/business/citizen/index.vue

@@ -55,7 +55,6 @@
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElButton, ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
-import { auth } from '@/utils/authFunction';
 import { citizenDelete, citizenList } from '@/api/business/citizen';
 
 // 引入组件

src/views/business/delay/index.vue

@@ -20,107 +20,119 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading" row-key="id" ref="multipleTableRef" @selection-change="handleSelectionChange">
-				<el-table-column type="selection" width="55" />
-        <el-table-column label="超期状态" width="80" align="center">
-          <template #default="{ row }">
-            <span :class="'overdue-status-'+row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-          </template>
-        </el-table-column>
-				<el-table-column prop="no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
-				<el-table-column width="100" label="省/市工单" prop="isProvince">
-					<template #default="{ row }">
-						<span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="工单标题" show-overflow-tooltip width="300">
-					<template #default="{ row }">
-            <order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-					</template>
-				</el-table-column>
-				<el-table-column prop="actualHandleStepName" label="办理节点" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="delayStateText" label="延期申请状态" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column label="受理时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="acceptorName" label="受理人" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span
-							>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
-						</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="order.orgLevelOneName" label="一级部门" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="order.actualHandleOrgName" label="接办对象" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column label="接办时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="延期申请时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="creatorName" label="延期申请人" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="creatorOrgName" label="延期申请部门" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="delayNum" label="延期申请时限" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="delayUnitText" label="延期申请单位" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="delayReason" label="申请理由" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column label="申请前期满时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.applyDelayTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="通过后期满时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.afterDelay, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="操作" width="170" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onDetail(row)" title="查看延期详情"> 延期详情 </el-button>
-						<order-detail :order="row.order" @updateList="queryList" />
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
 				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+			>
+				<template #expiredStatus="{ row }">
+					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+				</template>
+				<template #isProvince="{ row }">
+					<span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
+				</template>
+				<template #title="{ row }">
+					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+				</template>
+				<template #employeeName="{ row }">
+					<span
+						>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
+					</span>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onDetail(row)" title="查看延期详情"> 延期详情 </el-button>
+					<order-detail :order="row.order" @updateList="queryList" />
+				</template>
+			</ProTable>
 		</el-card>
 		<!--  延期详情  -->
 		<delay-detail-com ref="delayDetailRef" @updateList="queryList" />
-    <!--  延期修改  -->
-    <delay-edit ref="delayEditRef" @updateList="queryList" />
+		<!--  延期修改  -->
+		<delay-edit ref="delayEditRef" @updateList="queryList" />
 	</div>
 </template>
-<script setup lang="ts" name="orderDelay">
+<script setup lang="tsx" name="orderDelay">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import { ElButton, ElMessageBox, FormInstance } from 'element-plus';
+import { ElButton, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
 import { formatDate } from '@/utils/formatTime';
 import { useRouter } from 'vue-router';
-import { delayBaseData, delayDetail, delayList } from "@/api/business/delay";
-import { screenDetail } from "@/api/business/discern";
+import { delayBaseData, delayDetail, delayList } from '@/api/business/delay';
 // 引入组件
 const DelayDetailCom = defineAsyncComponent(() => import('@/views/business/delay/components/Delay-detail.vue')); // 延期详情
 const DelayEdit = defineAsyncComponent(() => import('@/views/business/delay/components/Delay-edit.vue')); // 延期修改
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'selection', fixed: 'left', width: 55 },
+	{ prop: 'expiredStatus', label: '超期状态', align: 'center' },
+	{ prop: 'no', label: '工单编码', width: 150 },
+	{ prop: 'isProvince', label: '省/市工单', width: 100 },
+	{ prop: 'title', label: '工单标题', width: 300 },
+	{ prop: 'actualHandleStepName', label: '办理节点', width: 120 },
+	{ prop: 'delayStateText', label: '延期申请状态', width: 120 },
+	{
+		prop: 'order.startTime',
+		label: '受理时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'employeeName', label: '受理人', width: 120 },
+  { prop: 'order.hotspotName', label: '热点分类', width: 120 },
+  { prop: 'order.acceptType', label: '受理类型', width: 120 },
+  {prop: 'order.orgLevelOneName', label: '一级部门', width: 120 },
+  { prop: 'order.actualHandleOrgName', label: '接办对象', width: 120 },
+  {
+    prop: 'order.actualHandleTime',
+    label: '接办时间',
+    width: 170,
+    render: (scope) => {
+      return <span>{formatDate(scope.row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+    },
+  },
+  {
+    prop: 'creationTime',
+    label: '延期申请时间',
+    width: 170,
+    render: (scope) => {
+      return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+    },
+  },
+  { prop: 'creatorName', label: '延期申请人', width: 120 },
+  { prop: 'creatorOrgName', label: '延期申请部门', width: 120 },
+  { prop: 'delayNum', label: '延期申请时限', width: 120 },
+  { prop: 'delayUnitText', label: '延期申请单位', width: 120 },
+  { prop: 'delayReason', label: '申请理由', width: 120 },
+  {
+    prop: 'applyDelayTime',
+    label: '申请前期满时间',
+    width: 170,
+    render: (scope) => {
+      return <span>{formatDate(scope.row.applyDelayTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+    },
+  },
+  {
+    prop: 'afterDelay',
+    label: '通过后期满时间',
+    width: 170,
+    render: (scope) => {
+      return <span>{formatDate(scope.row.afterDelay, 'YYYY-mm-dd HH:MM:SS')}</span>;
+    },
+  },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 170, align: 'center' },
+]);
 // 定义变量内容
-const state = reactive(<any>{
+const state = reactive({
 	queryParams: {
 		// 查询条件
 		PageIndex: 1,
@@ -169,16 +181,17 @@ const delayDetailRef = ref<RefType>();
 const delayEditRef = ref<RefType>();
 // 延期详情
 const onDetail = async (row: any) => {
-  try {
-    const {result} = await delayDetail(row.id);
-    if(result.handle) { // 退回到了开始 需要重新打开编辑页面在发起流程
-      delayEditRef.value.openDialog(row);
-    } else {
-      delayDetailRef.value.openDialog(row);
-    }
-  } catch (e) {
-    console.log(e);
-  }
+	try {
+		const { result } = await delayDetail(row.id);
+		if (result.handle) {
+			// 退回到了开始 需要重新打开编辑页面在发起流程
+			delayEditRef.value.openDialog(row);
+		} else {
+			delayDetailRef.value.openDialog(row);
+		}
+	} catch (e) {
+		console.log(e);
+	}
 };
 // 表格多选
 const multipleTableRef = ref<RefType>();

src/views/business/discern/index.vue

@@ -38,100 +38,47 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading" row-key="id" ref="multipleTableRef" @selection-change="handleSelectionChange">
-				<el-table-column type="selection" width="55" />
-				<el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
-				<el-table-column prop="statusText" label="甄别状态" show-overflow-tooltip width="100"></el-table-column>
-				<el-table-column width="100" label="省/市工单" prop="isProvince">
-					<template #default="{ row }">
-						<span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="工单标题" show-overflow-tooltip width="300">
-					<template #default="{ row }">
-            <order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-					</template>
-				</el-table-column>
-				<el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip width="120"></el-table-column>
-				<el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip width="200"></el-table-column>
-				<el-table-column prop="expiredTime" label="受理人" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span
-							>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
-						</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="order.orgLevelOneName" label="一级部门" show-overflow-tooltip width="150"></el-table-column>
-				<el-table-column prop="order.actualHandleOrgName" label="接办对象" show-overflow-tooltip width="150"></el-table-column>
-				<el-table-column label="受理时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="办结时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="visit.publishTime" label="发布时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.visit?.publishTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="visit.visitTime" label="回访时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="order.counterSignTypeText" label="是否会签" show-overflow-tooltip width="100"></el-table-column>
-				<el-table-column prop="visit.employee" label="回访人" show-overflow-tooltip></el-table-column>
-				<el-table-column label="被回访部门" show-overflow-tooltip width="150">
-					<template #default="{ row }">
-						<span>{{ row.visitDetail?.visitOrgName }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="creationTime" label="甄别申请时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="creatorName" label="甄别申请人" show-overflow-tooltip width="170"></el-table-column>
-				<el-table-column prop="creatorOrgName" label="甄别申请部门" show-overflow-tooltip width="200"></el-table-column>
-				<el-table-column prop="typeDicName" label="甄别申请类型" show-overflow-tooltip width="170"></el-table-column>
-				<el-table-column prop="content" label="甄别申请原因" show-overflow-tooltip width="200"></el-table-column>
-				<el-table-column label="操作" width="170" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onDetail(row)" title="查看甄别详情"> 甄别详情 </el-button>
-						<order-detail :order="row.order" @updateList="queryList" />
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
 				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+			>
+				<template #isProvince="{ row }">
+					<span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
+				</template>
+				<template #title="{ row }">
+					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+				</template>
+				<template #acceptorName="{ row }">
+					<span
+						>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
+					</span>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onDetail(row)" title="查看甄别详情"> 甄别详情 </el-button>
+					<order-detail :order="row.order" @updateList="queryList" />
+				</template>
+			</ProTable>
 		</el-card>
 		<!-- 甄别详情 -->
 		<discern-detail ref="discernDetailRef" @updateList="queryList" />
-    <!-- 甄别修改 -->
-    <discern-edit ref="discernEditRef" @updateList="queryList" />
+		<!-- 甄别修改 -->
+		<discern-edit ref="discernEditRef" @updateList="queryList" />
 	</div>
 </template>
-<script setup lang="ts" name="orderDiscern">
+<script setup lang="tsx" name="orderDiscern">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElButton, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
 import { formatDate } from '@/utils/formatTime';
 import { shortcuts } from '@/utils/constants';
-import { screenBaseData, screenDetail, screenList } from "@/api/business/discern";
+import { screenBaseData, screenDetail, screenList } from '@/api/business/discern';
 import other from '@/utils/other';
 
 // 引入组件
@@ -140,9 +87,72 @@ const DiscernEdit = defineAsyncComponent(() => import('@/views/business/discern/
 const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'selection', width: 55,fixed: 'left' },
+	{ prop: 'order.no', label: '工单编码', width: 150 },
+	{ prop: 'statusText', label: '甄别状态', width: 100 },
+	{ prop: 'isProvince', label: '省/市工单', width: 100 },
+	{ prop: 'order.title', label: '工单标题', width: 300 },
+	{ prop: 'order.sourceChannel', label: '来源方式', width: 120 },
+	{ prop: 'order.acceptType', label: '受理类型', width: 120 },
+	{ prop: 'order.hotspotName', label: '热点分类', width: 200 },
+	{ prop: 'acceptorName', label: '受理人', width: 170 },
+	{ prop: 'order.orgLevelOneName', label: '一级部门', width: 150 },
+	{ prop: 'order.actualHandleOrgName', label: '接办对象', width: 150 },
+	{
+		prop: 'order.startTime',
+		label: '受理时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'order.filedTime',
+		label: '办结时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'visit.publishTime',
+		label: '发布时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.visit?.publishTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'visit.visitTime',
+		label: '回访时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.visit?.visitTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'order.counterSignTypeText', label: '是否会签', width: 100 },
+	{ prop: 'visit.employee', label: '回访人' },
+	{ prop: 'visitDetail.visitOrgName', label: '被回访部门', width: 150 },
+	{
+		prop: 'creationTime',
+		label: '甄别申请时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'creatorName', label: '甄别申请人', width: 170 },
+	{ prop: 'creatorOrgName', label: '甄别申请部门', width: 200 },
+	{ prop: 'typeDicName', label: '甄别申请类型', width: 170 },
+	{ prop: 'content', label: '甄别申请原因', width: 200 },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 170, align: 'center' },
+]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const state = reactive(<any>{
+const state = reactive({
 	queryParams: {
 		// 查询条件
 		PageIndex: 1,
@@ -151,7 +161,7 @@ const state = reactive(<any>{
 		CreationTimeStart: null, // 创建时间 开始
 		CreationTimeEnd: null, // 创建时间 结束
 		exTime: [], // 办理期限
-    source:'2', // 甄别列表 2
+		source: '2', // 甄别列表 2
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -216,16 +226,17 @@ const onExport = () => {
 const discernDetailRef = ref<RefType>(); // 甄别详情ref
 const discernEditRef = ref<RefType>(); // 甄别修改ref
 const onDetail = async (row: any) => {
-  try {
-    const {result} = await screenDetail(row.id);
-    if(result.handle) { // 退回到了开始 需要重新打开编辑页面在发起流程
-      discernEditRef.value.openDialog(row);
-    } else {
-      discernDetailRef.value.openDialog(row);
-    }
-  } catch (e) {
-    console.log(e);
-  }
+	try {
+		const { result } = await screenDetail(row.id);
+		if (result.handle) {
+			// 退回到了开始 需要重新打开编辑页面在发起流程
+			discernEditRef.value.openDialog(row);
+		} else {
+			discernDetailRef.value.openDialog(row);
+		}
+	} catch (e) {
+		console.log(e);
+	}
 };
 onMounted(async () => {
 	await getBaseData();

src/views/business/supervise/index.vue

@@ -7,7 +7,7 @@
 					<el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="queryList" class="keyword-input" />
 				</el-form-item>
 				<el-form-item label="督办状态" prop="SuperviseState">
-					<el-select v-model="state.queryParams.SuperviseState" placeholder="请选择督办状态" clearable>
+					<el-select v-model="state.queryParams.SuperviseState" placeholder="请选择督办状态" @change="queryList">
 						<el-option v-for="item in superviseStateOptions" :value="item.key" :key="item.key" :label="item.value" />
 					</el-select>
 				</el-form-item>
@@ -31,7 +31,7 @@
 				</el-table-column>
 				<el-table-column label="标题" show-overflow-tooltip width="300">
 					<template #default="{ row }">
-            <order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+						<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
 					</template>
 				</el-table-column>
 				<el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
@@ -106,6 +106,40 @@
 				v-model:limit="state.queryParams.PageSize"
 				@pagination="queryList"
 			/>
+
+			<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 #state="{ row }">
+					<span>{{ row.state === 0 ? '督办未回复' : '督办已回复' }}</span>
+				</template>
+				<template #isProvince="{ row }">
+					<span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
+				</template>
+				<template #title="{ row }">
+					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+				</template>
+				<template #acceptorName="{ row }">
+					<span
+						>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
+					</span>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onReplay(row)" title="督办回复" v-if="row.state === 0" v-auth="'business:supervise:reply'">
+						回复
+					</el-button>
+					<el-button link type="primary" @click="onDetail(row)" title="查看督办详情"> 督办详情 </el-button>
+					<order-detail :order="row.order" @updateList="queryList" />
+				</template>
+			</ProTable>
 		</el-card>
 		<!-- 督办详情 -->
 		<order-supervise-detail ref="orderSuperviseDetailRef" @updateList="queryList" />
@@ -113,7 +147,7 @@
 		<order-supervise-reply ref="orderSuperviseReplyRef" @updateList="queryList" />
 	</div>
 </template>
-<script setup lang="ts" name="orderSupervise">
+<script setup lang="tsx" name="orderSupervise">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElButton, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
@@ -123,9 +157,78 @@ import { superviseList } from '@/api/business/supervise';
 const OrderSuperviseDetail = defineAsyncComponent(() => import('@/views/business/supervise/components/Order-supervise-detail.vue')); // 督办详情
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const OrderSuperviseReply = defineAsyncComponent(() => import('@/views/business/supervise/components/Order-supervise-reply.vue')); // 回复督办
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ type: 'selection', width: 55, fixed: 'left' },
+	{ prop: 'order.no', label: '工单编码', width: 150 },
+	{ prop: 'isProvince', label: '省/市工单', width: 100 },
+	{ prop: 'title', label: '标题', width: 300 },
+	{ prop: 'order.sourceChannel', label: '来源方式' },
+	{ prop: 'order.statusText', label: '工单状态' },
+	{ prop: 'order.acceptType', label: '受理类型' },
+	{ prop: 'order.hotspotName', label: '热点分类', width: 120 },
+	{ prop: 'acceptorName', label: '受理人', width: 170 },
+	{ prop: 'state', label: '督办状态', width: 100 },
+	{ prop: 'order.actualHandleOrgName', label: '接办对象' },
+	{
+		prop: 'order.startTime',
+		label: '受理时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'order.expiredTime',
+		label: '工单期满时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'creatorOrgName', label: '督办部门' },
+	{ prop: 'crUser', label: '督办人' },
+	{
+		prop: 'creationTime',
+		label: '督办时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'replyLimitTime',
+		label: '督办回复时限',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.replyLimitTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'orgName', label: '被督办部门', width: 150 },
+	{ prop: 'applyContent', label: '督办意见', width: 150 },
+	{
+		prop: 'replyTime',
+		label: '督办回复时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.replyTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'replyContent', label: '督办回复内容', width: 170 },
+	{
+		prop: 'signTime',
+		label: '督办签收时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.signTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 210, align: 'center' },
+]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const state = reactive(<any>{
+const state = reactive({
 	queryParams: {
 		// 查询条件
 		PageIndex: 1,

src/views/knowledge/collect/index.vue

@@ -12,54 +12,55 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading">
-				<el-table-column label="知识标题" show-overflow-tooltip>
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onPreview(row)">{{ row.knowledge?.title }}</el-button>
-					</template>
-				</el-table-column>
-				<el-table-column label="知识分类" show-overflow-tooltip min-width="200">
-					<template #default="{ row }">
-						<span>{{ row.knowledge?.knowledgeType?.map((item) => item.value).join(',') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="knowledge.statusText" label="知识状态" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="score" label="知识评分" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="creatorName" label="收藏人" show-overflow-tooltip></el-table-column>
-				<el-table-column label="收藏时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="操作" width="140" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onPreview(row)" title="知识详情"> 知识详情 </el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
 				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+			>
+				<template #title="{ row }">
+					<el-button link type="primary" @click="onPreview(row)">{{ row.knowledge?.title }}</el-button>
+				</template>
+				<template #knowledgeType="{ row }">
+					<span>{{ row.knowledge?.knowledgeType?.map((item) => item.value).join(',') }}</span>
+				</template>
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onPreview(row)" title="知识详情"> 知识详情 </el-button>
+				</template>
+			</ProTable>
 		</el-card>
 	</div>
 </template>
 
-<script lang="ts" setup name="knowledgeCollect">
+<script lang="tsx" setup name="knowledgeCollect">
 import { onMounted, reactive, ref } from 'vue';
-import { ElMessage, FormInstance } from 'element-plus';
+import { ElButton, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
-import { auth } from '@/utils/authFunction';
 import { useRouter } from 'vue-router';
 import { collectList } from '@/api/knowledge/collect';
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'knowledge.title', label: '知识标题', width: 300 },
+	{ prop: 'knowledgeType', label: '知识分类', width: 200 },
+	{ prop: 'knowledge.statusText', label: '知识状态' },
+	{ prop: 'score', label: '知识评分' },
+	{ prop: 'creatorName', label: '收藏人' },
+	{
+		prop: 'creationTime',
+		label: '收藏时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 170, align: 'center' },
+]);
 // 定义变量内容
 const state = reactive<any>({
 	loading: false, // 加载状态

src/views/knowledge/error/index.vue

@@ -24,72 +24,49 @@
 		</el-card>
 		<el-card shadow="never">
 			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading">
-				<el-table-column label="知识标题" show-overflow-tooltip width="130">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onPreview(row)">{{ row.knowledge?.title }}</el-button>
-					</template>
-				</el-table-column>
-				<el-table-column label="知识分类" show-overflow-tooltip min-width="200">
-					<template #default="{ row }">
-						<span>{{ row.knowledge?.knowledgeType?.map((item) => item.value).join(',') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="knowledge.statusText" label="知识状态" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="stateText" label="答复状态" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="creatorName" label="纠错人" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="creationTime" label="纠错时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="content" label="纠错内容" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="replyContent" label="答复内容" show-overflow-tooltip></el-table-column>
-				<el-table-column label="答复时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.replyTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="操作" width="200" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onPreview(row)" title="知识详情"> 知识详情 </el-button>
-						<el-button link type="primary" @click="onReply(row)" v-auth="'knowledge:error:reply'" title="答复" v-if="[0].includes(row.state)">
-							答复
-						</el-button>
-						<el-button
-							link
-							type="primary"
-							@click="onEdit(row)"
-							title="编辑"
-							v-if="[0, 4].includes(row.knowledge?.status)"
-							v-auth="'knowledge:error:edit'"
-						>
-							编辑
-						</el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
 				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+			>
+				<template #title="{ row }">
+					<el-button link type="primary" @click="onPreview(row)">{{ row.knowledge?.title }}</el-button>
+				</template>
+				<template #knowledgeType="{ row }">
+					<span>{{ row.knowledge?.knowledgeType?.map((item) => item.value).join(',') }}</span>
+				</template>
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onPreview(row)" title="知识详情"> 知识详情 </el-button>
+					<el-button link type="primary" @click="onReply(row)" v-auth="'knowledge:error:reply'" title="答复" v-if="[0].includes(row.state)">
+						答复
+					</el-button>
+					<el-button
+						link
+						type="primary"
+						@click="onEdit(row)"
+						title="编辑"
+						v-if="[0, 4].includes(row.knowledge?.status)"
+						v-auth="'knowledge:error:edit'"
+					>
+						编辑
+					</el-button>
+				</template>
+			</ProTable>
 		</el-card>
 		<!-- 知识纠错 -->
 		<error-add ref="errorAddRef" @submitSuccess="queryList" />
 	</div>
 </template>
 
-<script lang="ts" setup name="knowledgeError">
+<script lang="tsx" setup name="knowledgeError">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import { ElMessage, FormInstance } from 'element-plus';
+import { ElButton, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
-import { auth } from '@/utils/authFunction';
 import { correctionList } from '@/api/knowledge/error';
 import { useRouter } from 'vue-router';
 import { treeList } from '@/api/knowledge/type';
@@ -97,6 +74,34 @@ import { treeList } from '@/api/knowledge/type';
 // 引入组件
 const ErrorAdd = defineAsyncComponent(() => import('@/views/knowledge/error/components/Error-add.vue')); // 知识纠错
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'knowledge.title', label: '知识标题', width: 300 },
+	{ prop: 'knowledgeType', label: '知识分类', width: 200 },
+	{ prop: 'knowledge.statusText', label: '知识状态' },
+	{ prop: 'stateText', label: '答复状态' },
+	{ prop: 'creatorName', label: '纠错人' },
+	{
+		prop: 'creationTime',
+		label: '纠错时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'content', label: '纠错内容' },
+	{ prop: 'replyContent', label: '答复内容' },
+	{
+		prop: 'replyTime',
+		label: '答复时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.replyTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 170, align: 'center' },
+]);
 // 定义变量内容
 const state = reactive<any>({
 	loading: false, // 加载状态

src/views/knowledge/index/index.vue

@@ -5,8 +5,7 @@
 				<pane min-size="16" max-size="25" size="16">
 					<el-tabs v-model="state.activeName" stretch @tab-change="resetNode">
 						<el-tab-pane label="部门" name="0">
-							<el-input v-model="filterOrg" placeholder="请输入部门名称" class="input-with-select mb10" clearable @input="onQueryChanged">
-							</el-input>
+							<el-input v-model="filterOrg" placeholder="请输入部门名称" class="input-with-select mb10" clearable @input="onQueryChanged"> </el-input>
 						</el-tab-pane>
 						<el-tab-pane label="知识分类" name="1">
 							<el-input v-model="filterType" placeholder="请输入知识分类名称" class="input-with-select mb10" clearable> </el-input>
@@ -92,14 +91,14 @@
 							<el-tab-pane :label="v.value" :name="v.key" v-for="(v, i) in state.statusOptions" :key="i"></el-tab-pane>
 						</el-tabs>
 						<!-- 搜索条件 -->
-						<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent class="pl15 pr15 pt15">
+						<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"
+									class="keyword-input"
 								/>
 							</el-form-item>
 							<el-form-item label="是否公开" prop="IsPublic">
@@ -117,131 +116,84 @@
 								</el-button>
 							</el-form-item>
 						</el-form>
-						<div class="mb20">
-							<el-button type="primary" @click="onOpenAddUser" v-auth="'knowledge:index:add'">
-								<SvgIcon name="ele-Plus" class="mr5" />创建知识
-							</el-button>
-						</div>
-						<!-- 表格 -->
-						<el-table :data="state.tableData" v-loading="state.tableLoading" row-key="id">
-							<el-table-column prop="title" label="标题" show-overflow-tooltip width="300">
-								<template #default="{ row }">
-									<el-button link type="primary" @click="onPreview(row)">{{ row.title }}</el-button>
-								</template>
-							</el-table-column>
-							<el-table-column label="知识分类" show-overflow-tooltip min-width="200">
-                <template #default="{ row }">
-                  <span>{{ row.knowledgeType?.map(item=> item.value).join(',') }}</span>
-                </template>
-              </el-table-column>
-							<el-table-column prop="statusName" label="知识状态" show-overflow-tooltip></el-table-column>
-							<el-table-column
-								prop="workflow.moduleName"
-								label="审批类型"
-								show-overflow-tooltip
-								width="120"
-								v-if="[1].includes(state.queryParams.Status)"
-							></el-table-column>
-							<el-table-column prop="attribution" label="知识归属" show-overflow-tooltip width="120"></el-table-column>
-							<el-table-column prop="sourceOrganize.name" label="来源部门" show-overflow-tooltip width="120"></el-table-column>
-							<el-table-column prop="hotspotName" label="热点" show-overflow-tooltip width="120"></el-table-column>
-							<el-table-column prop="hotspotName" label="是否公开" show-overflow-tooltip>
-								<template #default="{ row }">
-									<span>{{ row.isPublic ? '公开' : '不公开' }}</span>
-								</template>
-							</el-table-column>
-							<el-table-column prop="pageView" label="阅读次数" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="onShelfTime" label="上架时间" show-overflow-tooltip width="170">
-								<template #default="{ row }">
-									<span>{{ formatDate(row.onShelfTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-								</template>
-							</el-table-column>
-							<el-table-column prop="offShelfTime" label="下架时间" show-overflow-tooltip width="170">
-								<template #default="{ row }">
-									<span>{{ formatDate(row.offShelfTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-								</template>
-							</el-table-column>
-							<el-table-column prop="creatorName" label="创建人" show-overflow-tooltip width="120"></el-table-column>
-							<el-table-column prop="creatorOrgName" label="创建部门" show-overflow-tooltip width="150"></el-table-column>
-							<el-table-column prop="creationTime" label="创建时间" show-overflow-tooltip width="170">
-								<template #default="{ row }">
-									<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-								</template>
-							</el-table-column>
-							<el-table-column prop="lastModificationTime" label="更新时间" show-overflow-tooltip width="170">
-								<template #default="{ row }">
-									<span>{{ formatDate(row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-								</template>
-							</el-table-column>
-							<el-table-column label="操作" width="250" fixed="right" align="center">
-								<!-- includes 知识状态判断  row.status === 1 表示审批中-->
-								<template #default="{ row }">
-									<el-button
-										link
-										type="primary"
-										@click="onEdit(row)"
-										title="编辑"
-										v-if="[0, 4, 5, 6].includes(row.newStatus) && row.status != 1"
-										v-auth="'knowledge:index:edit'"
-									>
-										编辑
-									</el-button>
-									<el-button
-										link
-										type="danger"
-										@click="onRowDel(row)"
-										title="删除"
-										v-if="[0, 2, 4, 5, 6].includes(row.newStatus) && row.status != 1"
-										v-auth="'knowledge:index:delete'"
-									>
-										删除
-									</el-button>
-									<el-button
-										link
-										type="primary"
-										@click="offShelfFn(row)"
-										title="下架"
-										v-if="[3].includes(row.newStatus)"
-										v-auth="'knowledge:index:undercarriage'"
-									>
-										下架
-									</el-button>
-									<el-button
-										link
-										type="primary"
-										@click="groundingFn(row)"
-										title="上架"
-										v-if="[4].includes(row.newStatus)"
-										v-auth="'knowledge:index:grounding'"
-									>
-										上架
-									</el-button>
-									<!--									<el-button
-                    link
-                    type="primary"
-                    @click="onAudit(row)"
-                    title="审批"
-                    v-if="[1, 2].includes(row.status) && row.isCanHandle"
-                    v-auth="'business:order:handle'"
-                  >
-                    审批
-                  </el-button>-->
-									<el-button link type="primary" @click="onPreview(row)" title="查看">
-										查看
-									</el-button>
-								</template>
-							</el-table-column>
-							<template #empty>
-								<Empty />
-							</template>
-						</el-table>
-						<!-- 分页 -->
-						<pagination
+						<ProTable
+							ref="proTableRef"
+							:columns="columns"
+							:data="state.tableData"
+							@updateTable="queryList"
+							:loading="state.tableLoading"
 							:total="state.total"
-							v-model:page="state.queryParams.PageIndex"
-							v-model:limit="state.queryParams.PageSize"
-							@pagination="queryList"
-						/>
+							v-model:page-index="state.queryParams.PageIndex"
+							v-model:page-size="state.queryParams.PageSize"
+						>
+							<template #tableHeader="scope">
+								<el-button type="primary" @click="onOpenAddUser" v-auth="'knowledge:index:add'">
+									<SvgIcon name="ele-Plus" class="mr5" />创建知识
+								</el-button>
+							</template>
+							<template #title="{ row }">
+								<el-button link type="primary" @click="onPreview(row)">{{ row.title }}</el-button>
+							</template>
+							<template #knowledgeType="{ row }">
+								<span>{{ row.knowledgeType?.map((item) => item.value).join(',') }}</span>
+							</template>
+							<template #isPublic="{ row }">
+								<span>{{ row.isPublic ? '公开' : '不公开' }}</span>
+							</template>
+							<template #operation="{ row }">
+								<el-button
+									link
+									type="primary"
+									@click="onEdit(row)"
+									title="编辑"
+									v-if="[0, 4, 5, 6].includes(row.newStatus) && row.status != 1"
+									v-auth="'knowledge:index:edit'"
+								>
+									编辑
+								</el-button>
+								<el-button
+									link
+									type="danger"
+									@click="onRowDel(row)"
+									title="删除"
+									v-if="[0, 2, 4, 5, 6].includes(row.newStatus) && row.status != 1"
+									v-auth="'knowledge:index:delete'"
+								>
+									删除
+								</el-button>
+								<el-button
+									link
+									type="primary"
+									@click="offShelfFn(row)"
+									title="下架"
+									v-if="[3].includes(row.newStatus)"
+									v-auth="'knowledge:index:undercarriage'"
+								>
+									下架
+								</el-button>
+								<el-button
+									link
+									type="primary"
+									@click="groundingFn(row)"
+									title="上架"
+									v-if="[4].includes(row.newStatus)"
+									v-auth="'knowledge:index:grounding'"
+								>
+									上架
+								</el-button>
+								<!--									<el-button
+                  link
+                  type="primary"
+                  @click="onAudit(row)"
+                  title="审批"
+                  v-if="[1, 2].includes(row.status) && row.isCanHandle"
+                  v-auth="'business:order:handle'"
+                >
+                  审批
+                </el-button>-->
+								<el-button link type="primary" @click="onPreview(row)" title="查看"> 查看 </el-button>
+							</template>
+						</ProTable>
 						<el-backtop target=".scrollbar__view > div" />
 					</el-scrollbar>
 				</pane>
@@ -252,9 +204,9 @@
 	</div>
 </template>
 
-<script lang="ts" setup name="knowledgeManage">
+<script lang="tsx" setup name="knowledgeManage">
 import { ref, reactive, onMounted, watch, defineAsyncComponent, nextTick, onActivated } from 'vue';
-import { ElMessageBox, ElMessage } from 'element-plus';
+import { ElMessageBox, ElMessage, ElButton } from 'element-plus';
 import { useRouter } from 'vue-router';
 import type { FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
@@ -269,6 +221,53 @@ import 'splitpanes/dist/splitpanes.css';
 // 引入组件
 const ProcessAudit = defineAsyncComponent(() => import('@/components/ProcessAudit/index.vue')); // 流程审批
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'title', label: '标题', width: 300 },
+	{ prop: 'knowledgeType', label: '知识分类', width: 200 },
+	{ prop: 'statusName', label: '知识状态' },
+	{ prop: 'attribution', label: '知识归属', width: 120 },
+	{ prop: 'sourceOrganize.name', label: '来源部门', width: 120 },
+	{ prop: 'hotspotName', label: '热点', minWidth: 200 },
+	{ prop: 'isPublic', label: '是否公开' },
+	{ prop: 'pageView', label: '阅读次数' },
+	{
+		prop: 'onShelfTime',
+		label: '上架时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.onShelfTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'offShelfTime',
+		label: '下架时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.offShelfTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'creatorName', label: '创建人', width: 120 },
+	{ prop: 'creatorOrgName', label: '创建部门', width: 150 },
+	{
+		prop: 'creationTime',
+		label: '创建时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'lastModificationTime',
+		label: '更新时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 250, align: 'center' },
+]);
 // 定义变量内容
 const state = reactive<any>({
 	queryParams: {

src/views/knowledge/question/index.vue

@@ -24,61 +24,39 @@
 		</el-card>
 		<el-card shadow="never">
 			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading">
-				<el-table-column label="知识标题" show-overflow-tooltip width="130">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onPreview(row)">{{ row.knowledge?.title }}</el-button>
-					</template>
-				</el-table-column>
-				<el-table-column label="知识分类" show-overflow-tooltip min-width="200">
-					<template #default="{ row }">
-						<span>{{ row.knowledge?.knowledgeType?.map((item) => item.value).join(',') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="knowledge.statusText" label="知识状态" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="stateText" label="答复状态" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="creatorName" label="提问人" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="creationTime" label="提问时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="content" label="提问内容" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="replyContent" label="答复内容" show-overflow-tooltip></el-table-column>
-				<el-table-column label="答复时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.replyTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="操作" width="180" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onPreview(row)" title="知识详情"> 知识详情 </el-button>
-						<el-button link type="primary" @click="onReply(row)" v-auth="'knowledge:question:reply'" title="答复" v-if="[0].includes(row.state)">
-							答复
-						</el-button>
-						<el-button link type="primary" @click="onEdit(row)" title="编辑" v-if="[0, 4].includes(row.knowledge?.status)"> 编辑 </el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
 				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+			>
+				<template #title="{ row }">
+					<el-button link type="primary" @click="onPreview(row)">{{ row.knowledge?.title }}</el-button>
+				</template>
+				<template #knowledgeType="{ row }">
+					<span>{{ row.knowledge?.knowledgeType?.map((item) => item.value).join(',') }}</span>
+				</template>
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onPreview(row)" title="知识详情"> 知识详情 </el-button>
+					<el-button link type="primary" @click="onReply(row)" v-auth="'knowledge:question:reply'" title="答复" v-if="[0].includes(row.state)">
+						答复
+					</el-button>
+					<el-button link type="primary" @click="onEdit(row)" title="编辑" v-if="[0, 4].includes(row.knowledge?.status)"> 编辑 </el-button>
+				</template>
+			</ProTable>
 		</el-card>
 		<!-- 知识提问 -->
 		<question-add ref="questionRef" @submitSuccess="queryList" />
 	</div>
 </template>
 
-<script lang="ts" setup name="knowledgeQuestion">
+<script lang="tsx" setup name="knowledgeQuestion">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import { ElMessage, FormInstance } from 'element-plus';
+import { ElButton, ElMessage, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { auth } from '@/utils/authFunction';
 import { useRouter } from 'vue-router';
@@ -88,6 +66,34 @@ import { treeList } from '@/api/knowledge/type';
 // 引入组件
 const QuestionAdd = defineAsyncComponent(() => import('@/views/knowledge/question/components/Question-add.vue')); // 知识提问
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'knowledge.title', label: '知识标题', width: 300 },
+	{ prop: 'knowledgeType', label: '知识分类', width: 200 },
+	{ prop: 'knowledge.statusText', label: '知识状态' },
+	{ prop: 'stateText', label: '答复状态' },
+	{ prop: 'creatorName', label: '纠错人' },
+	{
+		prop: 'creationTime',
+		label: '提问时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'content', label: '提问内容' },
+	{ prop: 'replyContent', label: '答复内容' },
+	{
+		prop: 'replyTime',
+		label: '答复时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.replyTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 170, align: 'center' },
+]);
 // 定义变量内容
 const state = reactive<any>({
 	loading: false, // 加载状态

src/views/system/config/workflow/component/Workflow-config.vue

@@ -1,6 +1,6 @@
 <template>
 	<el-dialog :title="'模板配置（' + dialogTitle + '）'" v-model="dialogVisible" draggable width="900px">
-		<el-form :model="state.queryParams" ref="ruleDialogFormRef" inline @submit.native.prevent >
+		<el-form :model="state.queryParams" ref="ruleDialogFormRef" inline @submit.native.prevent>
 			<el-form-item label="关键字查询" prop="Keyword">
 				<el-input v-model="state.queryParams.Keyword" placeholder="模板名称/编码" clearable @keyup.enter="queryList" />
 			</el-form-item>
@@ -43,11 +43,11 @@
 </template>
 
 <script lang="ts" setup name="workflowConfig">
-import {reactive, ref} from 'vue';
-import {ElMessage, FormInstance} from 'element-plus';
-import {wfmodulesMatch, workflowList} from '@/api/system/workflow';
-import {formatDate} from '@/utils/formatTime';
-import {throttle} from '@/utils/tools';
+import { reactive, ref } from 'vue';
+import { ElMessage, FormInstance } from 'element-plus';
+import { wfmodulesMatch, workflowList } from '@/api/system/workflow';
+import { formatDate } from '@/utils/formatTime';
+import { throttle } from '@/utils/tools';
 
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['updateList', 'openDialog', 'closeDialog']);

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

@@ -6,21 +6,15 @@
 				<el-tab-pane label="流程模板" name="1"></el-tab-pane>
 				<!--				<el-tab-pane label="流程实例" name="2"></el-tab-pane>-->
 				<div class="flex-column">
-					<el-form
-						:model="state.queryParams"
-						ref="ruleFormRef"
-						inline
-						@submit.native.prevent
-						v-if="['1', '2'].includes(state.activeName)"
-					>
+					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent v-if="['1', '2'].includes(state.activeName)">
 						<el-form-item label="关键字查询" prop="Keyword">
 							<el-input
 								v-model="state.queryParams.Keyword"
 								:placeholder="state.activeName === '1' ? '模板名称/模板编码' : '流程标题/流程ID'"
 								clearable
 								@keyup.enter="queryList"
-                class="keyword-input"
-              />
+								class="keyword-input"
+							/>
 						</el-form-item>
 						<el-form-item label="模板状态" prop="Status" v-show="state.activeName === '1'">
 							<el-select v-model="state.queryParams.Status" placeholder="请选择模板状态" v-show="state.activeName === '1'">
@@ -41,133 +35,77 @@
 							</el-button>
 						</el-form-item>
 					</el-form>
-					<div class="mb15" v-if="state.activeName === '1'">
-						<el-button type="primary" @click="onAddTemp"  v-auth="'system:workflow:template:add'">
-							<SvgIcon name="ele-Plus" class="mr5" />新增
-						</el-button>
-					</div>
-					<!-- 表格 -->
-					<el-table :data="state.tableList" v-loading="state.loading" row-key="id">
-						<!-- 配置 -->
-						<template v-if="state.activeName === '0'">
-							<el-table-column prop="name" label="业务模块" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="code" label="编码" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="definition.name" label="模板名称" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="definition.code" label="模板编码" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="definition.version" label="模板版本" show-overflow-tooltip></el-table-column>
-							<el-table-column label="操作" width="160" fixed="right" align="center">
-								<template #default="{ row }">
-									<el-button link type="primary" @click="onConfig(row)" title="配置模板" v-auth="'system:workflow:template:config'">
-										配置模板</el-button
-									>
-									<el-button
-										link
-										type="danger"
-										@click="configClear(row)"
-										title="清除配置"
-										v-if="row.definition"
-										v-auth="'system:workflow:template:clear'"
-									>
-										清除配置
-									</el-button>
-								</template>
-							</el-table-column>
-						</template>
-						<!-- 模板 -->
-						<template v-if="state.activeName === '1'">
-							<el-table-column prop="name" label="模板名称" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="code" label="模板编码" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="version" label="版本号" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="creationTime" label="更新时间" show-overflow-tooltip>
-								<template #default="{ row }">
-									<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-								</template>
-							</el-table-column>
-							<el-table-column prop="statusText" label="状态" show-overflow-tooltip></el-table-column>
-							<el-table-column label="操作" width="150" fixed="right" align="center">
-								<!-- 草稿0 启用1 禁用2 -->
-								<template #default="{ row }">
-									<el-button link type="primary" @click="onEditTemp(row)" title="修改" v-auth="'system:workflow:template:edit'"> 修改 </el-button>
-									<el-button
-										link
-										type="success"
-										v-if="row.status === 0"
-										@click="onReleaseTemp(row)"
-										title="发布"
-										v-auth="'system:workflow:template:publish'"
-									>
-										发布
-									</el-button>
-									<!-- 发布之后不能修改 -->
-									<el-button
-										link
-										v-if="row.status === 0"
-										type="danger"
-										@click="onDeleteTemp(row)"
-										title="删除"
-										v-auth="'system:workflow:template:delete'"
-									>
-										删除
-									</el-button>
-								</template>
-							</el-table-column>
+					<!--    流程业务      -->
+					<ProTable
+						ref="proTableProcessRef"
+						:columns="columnsProcess"
+						:data="state.tableData"
+						@updateTable="queryList"
+						:loading="state.loading"
+						v-if="state.activeName === '0'"
+						:pagination="false"
+					>
+						<!-- 表格 header 按钮 -->
+						<!-- 表格操作 -->
+						<template #operation="{ row }">
+							<el-button link type="primary" @click="onConfig(row)" title="配置模板" v-auth="'system:workflow:template:config'"> 配置模板</el-button>
+							<el-button
+								link
+								type="danger"
+								@click="configClear(row)"
+								title="清除配置"
+								v-if="row.definition"
+								v-auth="'system:workflow:template:clear'"
+							>
+								清除配置
+							</el-button>
 						</template>
-						<!-- 实例 -->
-						<template v-else-if="state.activeName === '2'">
-							<el-table-column prop="title" label="流程标题" show-overflow-tooltip width="300"></el-table-column>
-							<el-table-column prop="statusText" label="流程状态" show-overflow-tooltip width="100"></el-table-column>
-							<el-table-column prop="id" label="流程ID" show-overflow-tooltip width="300"></el-table-column>
-							<el-table-column prop="moduleName" label="业务模块" show-overflow-tooltip width="170"></el-table-column>
-							<el-table-column prop="moduleCode" label="流程模板" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="assignTime" label="创建时间" show-overflow-tooltip width="170">
-								<template #default="{ row }">
-									<span>{{ formatDate(row.assignTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-								</template>
-							</el-table-column>
-							<el-table-column prop="completeTime" label="当前环节到达" show-overflow-tooltip width="170">
-								<template #default="{ row }">
-									<span>{{ formatDate(row.completeTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-								</template>
-							</el-table-column>
-							<el-table-column prop="actualHandleStepName" label="当前环节" show-overflow-tooltip width="170"></el-table-column>
-							<el-table-column label="操作" width="140" fixed="right" align="center">
-								<template #default="{ row }">
-									<el-button
-										link
-										type="primary"
-										@click="onLink(row)"
-										title="跳转"
-										v-if="![20, 30].includes(row.status)"
-										v-auth="'system:workflow:jump'"
-									>
-										跳转
-									</el-button>
-									<el-button
-										link
-										type="danger"
-										@click="onStopProcess(row)"
-										title="终止流程"
-										v-if="![20, 30].includes(row.status)"
-										v-auth="'system:workflow:stop'"
-									>
-										终止流程
-									</el-button>
-								</template>
-							</el-table-column>
+					</ProTable>
+					<!--    流程模板      -->
+					<ProTable
+						ref="proTableTemplateRef"
+						:columns="columnsTemplate"
+						: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="state.activeName === '1'"
+					>
+						<!-- 表格 header 按钮 -->
+						<template #tableHeader="scope">
+							<el-button type="primary" @click="onAddTemp" v-auth="'system:workflow:template:add'">
+								<SvgIcon name="ele-Plus" class="mr5" />新增
+							</el-button>
 						</template>
-						<template #empty>
-							<Empty />
+						<!-- 表格操作 -->
+						<template #operation="{ row }">
+							<!-- 草稿0 启用1 禁用2 -->
+							<el-button link type="primary" @click="onEditTemp(row)" title="修改" v-auth="'system:workflow:template:edit'"> 修改 </el-button>
+							<el-button
+								link
+								type="success"
+								v-if="row.status === 0"
+								@click="onReleaseTemp(row)"
+								title="发布"
+								v-auth="'system:workflow:template:publish'"
+							>
+								发布
+							</el-button>
+							<!-- 发布之后不能修改 -->
+							<el-button
+								link
+								v-if="row.status === 0"
+								type="danger"
+								@click="onDeleteTemp(row)"
+								title="删除"
+								v-auth="'system:workflow:template:delete'"
+							>
+								删除
+							</el-button>
 						</template>
-					</el-table>
-					<!-- 分页 -->
-					<pagination
-						:total="state.total"
-						v-model:page="state.queryParams.PageIndex"
-						v-model:limit="state.queryParams.PageSize"
-						@pagination="queryList"
-						v-if="state.activeName !== '0'"
-					/>
+					</ProTable>
 				</div>
 			</el-tabs>
 		</el-card>
@@ -179,11 +117,11 @@
 	</div>
 </template>
 
-<script lang="ts" setup name="systemWorkflow">
+<script lang="tsx" setup name="systemWorkflow">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import type { FormInstance } from 'element-plus';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { throttle } from '@/utils/tools';
 import {
@@ -201,8 +139,28 @@ import {
 const WorkflowJump = defineAsyncComponent(() => import('@/views/system/config/workflow/component/Workflow-jump.vue')); // 流程跳转
 const WorkflowConfig = defineAsyncComponent(() => import('@/views/system/config/workflow/component/Workflow-config.vue')); // 流程配置
 
+const proTableProcessRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columnsProcess = ref<any[]>([
+	{ prop: 'name', label: '业务模块' },
+	{ prop: 'code', label: '编码' },
+	{ prop: 'remark', label: '备注' },
+	{ prop: 'definition.name', label: '模板名称' },
+	{ prop: 'definition.code', label: '模板编码' },
+	{ prop: 'definition.version', label: '模板版本' },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 160, align: 'center' },
+]);
+const proTableTemplateRef = ref<RefType>(); // 表格ref
+const columnsTemplate = ref<any[]>([
+	{ prop: 'name', label: '模板名称' },
+	{ prop: 'code', label: '模板编码' },
+	{ prop: 'version', label: '版本号' },
+	{ prop: 'creationTime', label: '更新时间', render: (scope: any) => formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS') },
+	{ prop: 'statusText', label: '状态' },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 150, align: 'center' },
+]);
 // 定义变量内容
-const state = reactive(<any>{
+const state = reactive({
 	activeName: '0', // 0:模板 1:实例 2:历史
 	queryParams: {
 		// 查询参数
@@ -212,7 +170,7 @@ const state = reactive(<any>{
 		Status: null,
 		ModuleCode: null, // 模块编码
 	},
-	tableList: [], // 表格数据
+	tableData: [], // 表格数据
 	loading: false, // 加载状态
 	total: 0, // 总条数
 	multipleSelection: [], // 多选
@@ -241,7 +199,7 @@ const queryList = () => {
 		case '0':
 			wfmodules()
 				.then((response: any) => {
-					state.tableList = response.result ?? [];
+					state.tableData = response.result ?? [];
 					state.loading = false;
 				})
 				.catch(() => {
@@ -255,7 +213,7 @@ const queryList = () => {
 			};
 			workflowList(req)
 				.then((response: any) => {
-					state.tableList = response.result.items ?? [];
+					state.tableData = response.result.items ?? [];
 					state.total = response.result.total;
 					state.loading = false;
 				})
@@ -270,7 +228,7 @@ const queryList = () => {
 			};
 			workflowPaged(req)
 				.then((response: any) => {
-					state.tableList = response.result?.items ?? [];
+					state.tableData = response.result?.items ?? [];
 					state.total = response.result?.total ?? 0;
 					state.loading = false;
 				})

src/views/system/dataAuth/index.vue

@@ -3,27 +3,16 @@
 		<div class="layout-padding-auto layout-padding-view pd20">
 			<!-- 正常 -->
 			<template v-if="state.roleId">
-				<div class="mb20">
-					<el-button type="primary" @click="onAddAuth">
-						<SvgIcon name="ele-Plus" class="mr5" />新增
-					</el-button>
-				</div>
-				<el-table :data="state.tableData" v-loading="state.loading" row-key="id">
-					<el-table-column prop="tableName" label="表编码" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="tableDisplay" label="表名称" show-overflow-tooltip> </el-table-column>
-					<el-table-column prop="roleDisplay" label="角色名称" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="roleCode" label="角色编码" show-overflow-tooltip></el-table-column>
-					<el-table-column prop="accessLevelText" label="可见等级" show-overflow-tooltip width="100"> </el-table-column>
-					<el-table-column label="操作" width="130" fixed="right" align="center">
-						<template #default="{ row }">
-							<el-button link type="primary" @click="onEditAuth(row)" title="修改"> 修改 </el-button>
-							<el-button link type="danger" @click="onRowDel(row)" title="删除"> 删除 </el-button>
-						</template>
-					</el-table-column>
-					<template #empty>
-						<Empty />
+				<ProTable ref="proTableRef" :columns="columns" :data="state.tableData" @updateTable="queryList" :loading="state.loading" :pagination="false">
+					<template #tableHeader="scope">
+						<el-button type="primary" @click="onAddAuth"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
 					</template>
-				</el-table>
+					<!-- 表格操作 -->
+					<template #operation="{ row }">
+						<el-button link type="primary" @click="onEditAuth(row)" title="修改"> 修改 </el-button>
+						<el-button link type="danger" @click="onRowDel(row)" title="删除"> 删除 </el-button>
+					</template>
+				</ProTable>
 			</template>
 			<template v-else>
 				<Empty description="参数不正确，请关闭重新打开页面" />
@@ -35,9 +24,9 @@
 	</div>
 </template>
 
-<script lang="ts" setup name="systemDataAuth">
+<script lang="tsx" setup name="systemDataAuth">
 import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
-import { ElMessageBox, ElMessage } from 'element-plus';
+import { ElMessageBox, ElMessage, ElButton } from 'element-plus';
 import { useRoute } from 'vue-router';
 import { throttle } from '@/utils/tools';
 import { getDataAuthorityByRole, deleteDataAuth, baseData } from '@/api/system/roles';
@@ -46,20 +35,23 @@ import { getDataAuthorityByRole, deleteDataAuth, baseData } from '@/api/system/r
 const DataAuthAdd = defineAsyncComponent(() => import('@/views/system/dataAuth/component/Data-auth-add.vue')); //新增数据权限
 const DataAuthEdit = defineAsyncComponent(() => import('@/views/system/dataAuth/component/Data-auth-edit.vue')); //修改数据权限
 
-// 定义接口来定义对象的类型
-interface QueryState {
-	roleId: string | any[];
-	tableData: Array<any>;
-	loading: boolean;
-	accessLevelOptions: Array<any>;
-}
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'tableName', label: '表编码', showOverflowTooltip: true },
+	{ prop: 'tableDisplay', label: '表名称', showOverflowTooltip: true },
+	{ prop: 'roleDisplay', label: '角色名称', showOverflowTooltip: true },
+	{ prop: 'roleCode', label: '角色编码', showOverflowTooltip: true },
+	{ prop: 'accessLevelText', label: '可见等级', showOverflowTooltip: true, width: 100 },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 130, align: 'center' },
+]);
 
 // 定义变量内容
-const state = reactive<QueryState>({
+const state = reactive({
 	roleId: '', //角色id
 	tableData: [], //表格数据
 	loading: false, //加载状态
-	accessLevelOptions: <EmptyArrayType>[], //可用组织
+	accessLevelOptions: [], //可用组织
 });
 /** 搜索按钮操作 节流操作 */
 const handleQuery = throttle(() => {

src/views/system/log/index.vue

@@ -14,44 +14,31 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<!-- 表格 -->
-			<el-table :data="state.tableList" v-loading="state.loading">
-				<el-table-column label="操作时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="nameText" label="操作动作" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="creatorName" label="操作人" show-overflow-tooltip width="200"></el-table-column>
-				<el-table-column label="操作结果" show-overflow-tooltip width="100">
-					<template #default="{ row }">
-						<el-tag :type="row.statusText === '成功' ? 'success' : 'danger'"> {{ row.statusText }}</el-tag>
-					</template>
-				</el-table-column>
-				<el-table-column label="操作地址" show-overflow-tooltip prop="executeUrl"> </el-table-column>
-				<el-table-column label="操作" width="100" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onDetail(row)" title="查看日志明细" v-auth="'system:log:detail'"> 日志明细 </el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
 				:total="state.total"
-				v-model:page="state.queryParams.pageIndex"
-				v-model:limit="state.queryParams.pageSize"
-				@pagination="queryList"
-			/>
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+			>
+				<template #statusText="{ row }">
+					<el-tag :type="row.statusText === '成功' ? 'success' : 'danger'"> {{ row.statusText }}</el-tag>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onDetail(row)" title="查看日志明细" v-auth="'system:log:detail'"> 日志明细 </el-button>
+				</template>
+			</ProTable>
 		</el-card>
 		<!-- 日志明细 -->
 		<log-detail ref="logDetailRef" />
 	</div>
 </template>
 
-<script lang="ts" setup name="systemLog">
+<script lang="tsx" setup name="systemLog">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ElButton } from 'element-plus';
@@ -62,19 +49,31 @@ import { formatDate } from '@/utils/formatTime';
 // 引入组件
 const logDetail = defineAsyncComponent(() => import('@/views/system/log/components/Detail.vue')); // 日志明细
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{
+		prop: 'creationTime',
+		label: '操作时间',
+		width: 170,
+		render: (scope: any) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'nameText', label: '操作动作' },
+	{ prop: 'creatorName', label: '操作人', width: 200 },
+	{ prop: 'statusText', label: '操作结果', width: 100 },
+	{ prop: 'executeUrl', label: '操作地址' },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 100, align: 'center' },
+]);
 // 定义变量内容
-const state = reactive(<any>{
+const state = reactive({
 	queryParams: {
 		pageIndex: 1, // 当前页
 		pageSize: 10, // 每页条数
-		StaffNo: null, // 分机号
-		CPN: null, // 中继号码
-		CDPN: null, // 分机号
-		Direction: null, // 呼叫类型
-		OnState: null, // 结果
-		crTime: [],
+		Keyword: null, // 关键字
 	},
-	tableList: [], // 列表数据
+	tableData: [], // 列表数据
 	loading: false, // 加载
 	total: 0, // 总条数
 });
@@ -89,7 +88,7 @@ const queryList = async () => {
 	state.loading = true;
 	try {
 		const response = await logList(state.queryParams);
-		state.tableList = response.result?.items ?? [];
+		state.tableData = response.result?.items ?? [];
 		state.total = response.result?.total ?? 0;
 		state.loading = false;
 	} catch (e) {

src/views/system/parameter/index.vue

@@ -15,46 +15,32 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<div class="mb20">
-				<el-button type="primary" @click="addParameter" v-waves v-auth="'system:parameter:add'">
-					<SvgIcon name="ele-Plus" class="mr5" />创建参数
-				</el-button>
-			</div>
-			<!-- 表格 -->
-			<el-table :data="state.tableData" v-loading="state.loading">
-				<el-table-column prop="settingName" label="参数名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="code" label="参数" show-overflow-tooltip width="130"></el-table-column>
-				<el-table-column prop="settingValue" label="参数值" show-overflow-tooltip>
-					<template #default="{ row }">
-						<span v-if="row.settingValue">{{ row.settingValue.join('|') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="remark" label="参数说明" show-overflow-tooltip width="300"></el-table-column>
-				<el-table-column prop="creator.name" label="创建人" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="afterBegin" label="创建时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column prop="sort" label="排序" show-overflow-tooltip width="60"></el-table-column>
-				<el-table-column label="操作" width="200" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="updateParameter(row)" v-auth="'system:parameter:edit'" title="修改参数"> 修改 </el-button>
-						<el-button link type="info" @click="viewParameter(row)" title="查看详情"> 查看 </el-button>
-						<!--              <el-button link type="danger" @click="parameterDelete(row)" v-auth="'system:timeLimit:detail'" title="删除参数"> 删除 </el-button>-->
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
-				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
+			<ProTable
+				ref="proTableRef"
+				:columns="columns"
+				:data="state.tableData"
+				@updateTable="queryList"
+				:loading="state.loading"
 				:total="state.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+				v-model:page-index="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+			>
+				<!-- 表格 header 按钮 -->
+				<template #tableHeader="scope">
+					<el-button type="primary" @click="addParameter" v-waves v-auth="'system:parameter:add'">
+						<SvgIcon name="ele-Plus" class="mr5" />创建参数
+					</el-button>
+				</template>
+				<template #settingValue="{ row }">
+					<span v-if="row.settingValue">{{ row.settingValue?.join('|') }}</span>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="updateParameter(row)" v-auth="'system:parameter:edit'" title="修改参数"> 修改 </el-button>
+					<el-button link type="info" @click="viewParameter(row)" title="查看详情"> 查看 </el-button>
+					<!--              <el-button link type="danger" @click="parameterDelete(row)" v-auth="'system:timeLimit:detail'" title="删除参数"> 删除 </el-button>-->
+				</template>
+			</ProTable>
 		</el-card>
 		<!--  参数新增  -->
 		<parameter-add ref="ParameterAddRef" @updateList="queryList" />
@@ -63,18 +49,36 @@
 	</div>
 </template>
 
-<script lang="ts" setup name="systemParameter">
+<script lang="tsx" setup name="systemParameter">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { getSystemSettings } from '@/api/system/parameter';
-import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
+import { ElButton, ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { throttle } from '@/utils/tools';
 import { formatDate } from '@/utils/formatTime';
-import { auth } from '@/utils/authFunction';
 
 // 引入组件
 const ParameterAdd = defineAsyncComponent(() => import('@/views/system/parameter/component/Parameter-add.vue')); // 参数新增
 const ParameterEdit = defineAsyncComponent(() => import('@/views/system/parameter/component/Parameter-edit.vue')); // 参数编辑
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'settingName', label: '参数名称' },
+	{ prop: 'code', label: '参数', width: 130 },
+	{ prop: 'settingValue', label: '参数值', width: 200 },
+	{ prop: 'remark', label: '参数说明', width: 300 },
+	{ prop: 'creator.name', label: '创建人' },
+	{
+		prop: 'creationTime',
+		label: '创建时间',
+		width: 170,
+		render: (scope: any) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'sort', label: '排序', width: 60 },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 200, align: 'center' },
+]);
 // 定义变量内容
 const state = reactive<any>({
 	loading: false, // 加载状态

src/views/system/roles/component/Role-user-list.vue

@@ -1,31 +1,21 @@
 <template>
-	<el-dialog v-model="state.dialogVisible" draggable :title="`用户列表(${state.currentRow.displayName})`" width="900px" append-to-body destroy-on-close>
-		<!-- 表格 -->
-		<el-table :data="state.tableData" max-height="500px">
-			<el-table-column prop="name" label="姓名" show-overflow-tooltip width="150" fixed="left"></el-table-column>
-			<el-table-column prop="userName" label="账号" show-overflow-tooltip width="200"></el-table-column>
-			<el-table-column prop="organization.name" label="所属部门" show-overflow-tooltip width="190"></el-table-column>
-			<el-table-column prop="phoneNo" label="电话号码" show-overflow-tooltip width="130"></el-table-column>
-			<el-table-column prop="staffNo" label="工号" show-overflow-tooltip width="100"></el-table-column>
-      <el-table-column prop="userTypeText" label="用户类型" show-overflow-tooltip></el-table-column>
-			<el-table-column prop="genderText" label="性别" show-overflow-tooltip width="80"></el-table-column>
-			<el-table-column label="更新时间" show-overflow-tooltip width="170">
-				<template #default="{ row }">
-					<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-				</template>
-			</el-table-column>
-			<el-table-column prop="state" label="状态" show-overflow-tooltip width="60" fixed="right"></el-table-column>
-			<template #empty>
-				<Empty />
-			</template>
-		</el-table>
+	<el-dialog
+		v-model="state.dialogVisible"
+		draggable
+		:title="`用户列表(${state.currentRow.displayName})`"
+		width="900px"
+		append-to-body
+		destroy-on-close
+	>
+		<ProTable ref="proTableRef" :columns="columns" :data="state.tableData" :pagination="false" :tool-button="['setting']" max-height="500px">
+		</ProTable>
 	</el-dialog>
 </template>
 
-<script lang="ts" setup name="roleUserList">
-import {reactive} from 'vue';
-import {formatDate} from '@/utils/formatTime';
-import {getUserListByIds} from '@/api/system/roles';
+<script lang="tsx" setup name="roleUserList">
+import { reactive, ref } from 'vue';
+import { formatDate } from '@/utils/formatTime';
+import { getUserListByIds } from '@/api/system/roles';
 import qs from 'qs';
 
 // 定义接口来定义对象的类型
@@ -37,7 +27,26 @@ interface StateRoles {
 
 // 定义子组件向父组件传值/事件
 const emit = defineEmits(['openDialog', 'closeDialog']);
-
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'name', label: '姓名', width: 170 },
+	{ prop: 'userName', label: '账号', width: 170 },
+	{ prop: 'organization.name', label: '所属部门', width: 190 },
+	{ prop: 'phoneNo', label: '电话号码', width: 130 },
+	{ prop: 'staffNo', label: '工号', width: 120 },
+	{ prop: 'userTypeText', label: '用户', width: 80 },
+	{ prop: 'genderText', label: '性别', width: 80 },
+	{
+		prop: 'creationTime',
+		label: '创建时间',
+		width: 170,
+		render: (scope: any) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'state', label: '状态', width: 80 },
+]);
 // 定义变量内容
 const state = reactive<StateRoles>({
 	dialogVisible: false, // 弹窗显示隐藏

src/views/system/roles/index.vue

@@ -20,51 +20,37 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-			<div class="mb20">
-				<el-button type="primary" @click="onOpenAddRole" v-auth="'system:role:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增角色 </el-button>
-			</div>
-			<el-table :data="state.tableData.data" v-loading="state.loading" row-key="id">
-				<el-table-column prop="displayName" label="角色名称" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="name" label="角色编码" show-overflow-tooltip></el-table-column>
-				<el-table-column prop="description" label="角色说明" show-overflow-tooltip width="300"></el-table-column>
-				<el-table-column label="人员" show-overflow-tooltip width="80">
-					<template #default="{ row }">
-						<el-button title="查看当前角色下的人员" text type="primary" @click="showUserList(row)">{{ row.accountIds.length }}</el-button>
-					</template>
-				</el-table-column>
-				<el-table-column prop="state" label="状态" show-overflow-tooltip width="80"> </el-table-column>
-				<el-table-column prop="lastModificationTime" label="更新时间" show-overflow-tooltip width="170">
-					<template #default="{ row }">
-						<span>{{ formatDate(row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-					</template>
-				</el-table-column>
-				<el-table-column label="操作" width="260" fixed="right" align="center">
-					<template #default="{ row }">
-						<el-button link type="primary" @click="onOpenEditRole(row)" title="修改角色信息" v-auth="'system:role:edit'" v-if="!row.isDeleted">
-							修改
-						</el-button>
-						<el-button link type="success" @click="onPermissions(row)" title="分配角色权限" v-auth="'system:role:assign'" v-if="!row.isDeleted">
-							分配权限
-						</el-button>
-						<el-button link type="info" @click="onDataAuth(row)" v-auth="'system:role:dataAuth'" title="配置角色数据权限" v-if="!row.isDeleted">
-							数据权限
-						</el-button>
-						<el-button link type="danger" @click="onRowDel(row)" v-auth="'system:role:delete'" title="删除角色" v-if="!row.isDeleted">
-							删除
-						</el-button>
-					</template>
-				</el-table-column>
-				<template #empty>
-					<Empty />
+			<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"
+			>
+				<!-- 表格 header 按钮 -->
+				<template #tableHeader="scope">
+					<el-button type="primary" @click="onOpenAddRole" v-auth="'system:role:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增角色 </el-button>
 				</template>
-			</el-table>
-			<!-- 分页 -->
-			<pagination
-				:total="state.tableData.total"
-				v-model:page="state.queryParams.PageIndex"
-				v-model:limit="state.queryParams.PageSize"
-				@pagination="queryList"
-			/>
+				<template #accountIds="{ row }">
+					<el-button title="查看当前角色下的人员" text type="primary" @click="showUserList(row)">{{ row.accountIds?.length }}</el-button>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onOpenEditRole(row)" title="修改角色信息" v-auth="'system:role:edit'" v-if="!row.isDeleted">
+						修改
+					</el-button>
+					<el-button link type="success" @click="onPermissions(row)" title="分配角色权限" v-auth="'system:role:assign'" v-if="!row.isDeleted">
+						分配权限
+					</el-button>
+					<el-button link type="info" @click="onDataAuth(row)" v-auth="'system:role:dataAuth'" title="配置角色数据权限" v-if="!row.isDeleted">
+						数据权限
+					</el-button>
+					<el-button link type="danger" @click="onRowDel(row)" v-auth="'system:role:delete'" title="删除角色" v-if="!row.isDeleted"> 删除 </el-button>
+				</template>
+			</ProTable>
 		</el-card>
 		<role-add ref="roleAddRef" @updateList="handleQuery" />
 		<role-edit ref="roleEditRef" @updateList="handleQuery" />
@@ -73,14 +59,13 @@
 	</div>
 </template>
 
-<script lang="ts" setup name="systemRole">
+<script lang="tsx" setup name="systemRole">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
 import { useRouter } from 'vue-router';
 import { throttle } from '@/utils/tools';
 import { delRole, getRoleListPaged } from '@/api/system/roles';
-import { auth } from '@/utils/authFunction';
 import { formatDate } from '@/utils/formatTime';
 import mittBus from '@/utils/mitt';
 // 引入组件
@@ -89,13 +74,29 @@ const RoleEdit = defineAsyncComponent(() => import('@/views/system/roles/compone
 const RolePermission = defineAsyncComponent(() => import('@/views/system/roles/component/Role-permission.vue')); // 角色权限组件
 const RoleUserList = defineAsyncComponent(() => import('@/views/system/roles/component/Role-user-list.vue')); // 角色人员组件
 
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'displayName', label: '角色名称' },
+	{ prop: 'name', label: '角色编码' },
+	{ prop: 'description', label: '角色说明', width: 300 },
+	{ prop: 'accountIds', label: '人员', width: 80 },
+	{ prop: 'state', label: '状态', width: 80 },
+	{
+		prop: 'lastModificationTime',
+		label: '更新时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 260, align: 'center' },
+]);
 // 定义变量内容
 const ruleFormRef = ref<FormInstance>();
 const state = reactive<any>({
-	tableData: {
-		data: [], // 表格数据
-		total: 0, // 总条数
-	},
+	tableData: [],
+	total: 0, // 总条数
 	loading: false, // 表格loading
 	isDeletedList: [
 		// 是否删除下拉列表
@@ -136,8 +137,8 @@ const queryList = () => {
 	state.loading = true;
 	getRoleListPaged(state.queryParams)
 		.then((response: any) => {
-			state.tableData.data = response?.result.items ?? [];
-			state.tableData.total = response?.result.total ?? 0;
+			state.tableData = response?.result.items ?? [];
+			state.total = response?.result.total ?? 0;
 			state.loading = false;
 		})
 		.catch(() => {

src/views/system/user/index.vue

@@ -57,50 +57,33 @@
 								</el-button>
 							</el-form-item>
 						</el-form>
-						<div class="mb20">
-							<el-button type="primary" @click="onOpenAddUser" v-auth="'system:user:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
-						</div>
-						<!-- 表格 -->
-						<el-table :data="state.tableData" v-loading="state.tableLoading" row-key="id">
-							<el-table-column prop="name" label="姓名" show-overflow-tooltip width="170"></el-table-column>
-							<el-table-column prop="userName" label="账号" show-overflow-tooltip width="170"></el-table-column>
-							<el-table-column prop="organization.name" label="所属部门" show-overflow-tooltip width="190"></el-table-column>
-							<el-table-column prop="organization.orgTypeText" label="部门类别" show-overflow-tooltip width="190"></el-table-column>
-							<el-table-column prop="roleNames" label="角色" show-overflow-tooltip width="300"></el-table-column>
-							<el-table-column prop="phoneNo" label="电话号码" show-overflow-tooltip width="130"></el-table-column>
-							<el-table-column prop="staffNo" label="工号" show-overflow-tooltip width="120"></el-table-column>
-							<el-table-column prop="userTypeText" label="用户类型" show-overflow-tooltip></el-table-column>
-							<el-table-column prop="genderText" label="性别" show-overflow-tooltip width="80"></el-table-column>
-							<el-table-column prop="creationTime" label="更新时间" show-overflow-tooltip width="170">
-								<template #default="{ row }">
-									<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
-								</template>
-							</el-table-column>
-							<el-table-column prop="state" label="状态" show-overflow-tooltip width="80"></el-table-column>
-							<el-table-column label="操作" width="180" fixed="right" align="center">
-								<template #default="{ row }">
-									<el-button link type="primary" @click="onOpenEditUser(row)" v-auth="'system:user:edit'" title="修改" v-if="!row.isDeleted">
-										修改
-									</el-button>
-									<el-button link type="warning" @click="onRestPwd(row)" title="重置密码" v-auth="'system:user:resetPwd'" v-if="!row.isDeleted">
-										重置密码
-									</el-button>
-									<el-button link type="danger" @click="onRowDel(row)" v-auth="'system:user:delete'" title="删除" v-if="!row.isDeleted">
-										删除
-									</el-button>
-								</template>
-							</el-table-column>
-							<template #empty>
-								<Empty />
-							</template>
-						</el-table>
-						<!-- 分页 -->
-						<pagination
+						<ProTable
+							ref="proTableRef"
+							:columns="columns"
+							:data="state.tableData"
+							@updateTable="queryList"
+							:loading="state.loading"
 							:total="state.total"
-							v-model:page="state.queryParams.PageIndex"
-							v-model:limit="state.queryParams.PageSize"
-							@pagination="getList"
-						/>
+							v-model:page-index="state.queryParams.PageIndex"
+							v-model:page-size="state.queryParams.PageSize"
+						>
+							<!-- 表格 header 按钮 -->
+							<template #tableHeader="scope">
+								<el-button type="primary" @click="onOpenAddUser" v-auth="'system:user:add'"> <SvgIcon name="ele-Plus" class="mr5" />新增 </el-button>
+							</template>
+							<!-- 表格操作 -->
+							<template #operation="{ row }">
+								<el-button link type="primary" @click="onOpenEditUser(row)" v-auth="'system:user:edit'" title="修改" v-if="!row.isDeleted">
+									修改
+								</el-button>
+								<el-button link type="warning" @click="onRestPwd(row)" title="重置密码" v-auth="'system:user:resetPwd'" v-if="!row.isDeleted">
+									重置密码
+								</el-button>
+								<el-button link type="danger" @click="onRowDel(row)" v-auth="'system:user:delete'" title="删除" v-if="!row.isDeleted">
+									删除
+								</el-button>
+							</template>
+						</ProTable>
 						<el-backtop target=".scrollbar__view > div" />
 					</el-scrollbar>
 				</pane>
@@ -108,7 +91,7 @@
 		</div>
 		<user-add
 			ref="userAddRef"
-			@updateList="getList"
+			@updateList="queryList"
 			:roles="state.roleOptions"
 			:baseOrg="state.orgData"
 			:baseData="state.baseData"
@@ -116,7 +99,7 @@
 		/>
 		<user-edit
 			ref="userEditRef"
-			@updateList="getList"
+			@updateList="queryList"
 			:roles="state.roleOptions"
 			:baseOrg="state.orgData"
 			:baseData="state.baseData"
@@ -125,12 +108,11 @@
 	</div>
 </template>
 
-<script lang="ts" setup name="systemUser">
+<script lang="tsx" setup name="systemUser">
 import { defineAsyncComponent, nextTick, onActivated, onMounted, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
-import { ElMessage, ElMessageBox } from 'element-plus';
+import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
-import { auth } from '@/utils/authFunction';
 import { throttle } from '@/utils/tools';
 import { delUser, getBaseData, getCanUseOrg, getRoles, getUserListPaged, restPwd } from '@/api/system/user';
 import { getTelList } from '@/api/public/wex';
@@ -140,6 +122,30 @@ import 'splitpanes/dist/splitpanes.css';
 // 引入组件
 const UserAdd = defineAsyncComponent(() => import('@/views/system/user/component/User-add.vue')); // 新增用户组件
 const UserEdit = defineAsyncComponent(() => import('@/views/system/user/component/User-edit.vue')); // 修改用户组件
+
+const proTableRef = ref<RefType>(); // 表格ref
+// 表格配置项
+const columns = ref<any[]>([
+	{ prop: 'name', label: '姓名', width: 170 },
+	{ prop: 'userName', label: '账号', width: 170 },
+	{ prop: 'organization.name', label: '所属部门', width: 190 },
+	{ prop: 'organization.orgTypeText', label: '部门类别', width: 190 },
+	{ prop: 'roleNames', label: '角色', width: 300 },
+	{ prop: 'phoneNo', label: '电话号码', width: 130 },
+	{ prop: 'staffNo', label: '工号', width: 120 },
+	{ prop: 'userTypeText', label: '用户类型' },
+	{ prop: 'genderText', label: '性别', width: 80 },
+	{
+		prop: 'creationTime',
+		label: '创建时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'state', label: '状态', width: 80 },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 180, align: 'center' },
+]);
 // 定义变量内容
 const state = reactive<any>({
 	queryParams: {
@@ -176,7 +182,7 @@ const filterNodeOrg = (query: string, data: any) => {
 /** 搜索按钮操作 节流操作 */
 const handleQuery = throttle(() => {
 	state.queryParams.PageIndex = 1;
-	getList();
+	queryList();
 }, 300);
 // 获取所有组织结构
 const getOrgListApi = () => {
@@ -192,7 +198,7 @@ const getOrgListApi = () => {
 };
 /** 获取用户列表 */
 const rightScrollRef = ref<RefType>();
-const getList = () => {
+const queryList = () => {
 	state.tableLoading = true;
 	getUserListPaged(state.queryParams)
 		.then((response: any) => {
@@ -225,7 +231,7 @@ const getTelsListFn = async (object?: object) => {
 // 点击节点
 const handleNodeClick = (data: any) => {
 	state.queryParams.OrgCode = data.id;
-	getList();
+	queryList();
 };
 // 打开新增用户弹窗
 const userAddRef = ref<RefType>(); //新增用户
@@ -257,7 +263,7 @@ const onRestPwd = (row: any) => {
 		.then(() => {
 			restPwd(row.id).then(() => {
 				ElMessage.success('操作成功');
-				getList();
+				queryList();
 				state.queryParams.OrgCode = '';
 				getOrgListApi();
 			});
@@ -276,7 +282,7 @@ const onRowDel = (row: any) => {
 		.then(() => {
 			delUser(row.id).then(() => {
 				ElMessage.success('删除成功');
-				getList();
+				queryList();
 				state.queryParams.OrgCode = '';
 				getOrgListApi();
 			});
@@ -288,7 +294,7 @@ onMounted(() => {
 	getBaseDataFn();
 	getTelsListFn();
 	getOrgListApi();
-	getList();
+	queryList();
 });
 const scrollBarRef = ref<RefType>(); // 滚动条ref
 const treeHeight = ref(0);

src/views/todo/supervise/index.vue

@@ -2,9 +2,9 @@
 	<div class="todo-supervise-container layout-pd">
 		<!-- 搜索  -->
 		<el-card shadow="never">
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent  inline>
+			<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="queryList" class="keyword-input"/>
+					<el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="queryList" class="keyword-input" />
 				</el-form-item>
 				<el-form-item>
 					<el-button type="primary" @click="queryList" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
@@ -15,36 +15,36 @@
 			</el-form>
 		</el-card>
 		<el-card shadow="never">
-      <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 #expiredStatus="{ row }">
-          <span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-        </template>
-        <template #isProvince="{ row }">
-          <span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
-        </template>
-        <template #title="{ row }">
-          <order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-        </template>
-        <template #employeeName="{ row }">
+			<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 #expiredStatus="{ row }">
+					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+				</template>
+				<template #isProvince="{ row }">
+					<span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
+				</template>
+				<template #title="{ row }">
+					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+				</template>
+				<template #employeeName="{ row }">
 					<span
-          >{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
+						>{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
 					</span>
-        </template>
-        <!-- 表格操作 -->
-        <template #operation="{ row }">
-          <el-button link type="primary" @click="onReply(row)" title="回复督办" v-auth="'todo:supervise:reply'"> 回复 </el-button>
-          <order-detail :order="row.order" @updateList="queryList" />
-        </template>
-      </ProTable>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onReply(row)" title="回复督办" v-auth="'todo:supervise:reply'"> 回复 </el-button>
+					<order-detail :order="row.order" @updateList="queryList" />
+				</template>
+			</ProTable>
 		</el-card>
 		<!-- 督办回复 -->
 		<order-supervise-reply ref="orderSuperviseReplyRef" @updateList="queryList" />
@@ -64,56 +64,54 @@ const ruleFormRef = ref<RefType>(); // 表单ref
 const proTableRef = ref<RefType>(); // 表格ref
 // 表格配置项
 const columns = ref<any[]>([
-  { type: 'selection', fixed: 'left', width: 55 },
-  { prop: 'expiredStatus', label: '超期状态', align: 'center' },
-  { prop: 'order.no', label: '工单编码', width: 150 },
-  { prop: 'title', label: '工单标题', width: 300 },
-  { prop: 'order.sourceChannel', label: '来源方式', width: 100 },
-  { prop: 'isProvince', label: '省/市工单', width: 100 },
-  { prop: 'order.statusText', label: '工单状态', width: 100 },
-  { prop: 'order.acceptType', label: '受理类型', width: 150 },
-  { prop: 'employeeName', label: '受理人', width: 120 },
-  { prop: 'order.hotspotName', label: '热点分类', width: 200 },
-  { prop: 'order.actualHandleOrgName', label: '接办对象', width: 150 },
-  {
-    prop: 'startTime',
-    label: '受理时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'expiredTime',
-    label: '工单期满时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'creationTime',
-    label: '督办时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'replyLimitTime',
-    label: '督办回复时限',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.replyLimitTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  { prop: 'creatorOrgName', label: '督办部门', width: 150 },
-  { prop: 'crUser', label: '督办人', width: 120 },
-  { prop: 'orgName', label: '被督办部门', width: 150 },
-  { prop: 'applyContent', label: '督办意见', width: 200 },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 140, align: 'center' },
-
-
+	{ type: 'selection', fixed: 'left', width: 55 },
+	{ prop: 'expiredStatus', label: '超期状态', align: 'center' },
+	{ prop: 'order.no', label: '工单编码', width: 150 },
+	{ prop: 'title', label: '工单标题', width: 300 },
+	{ prop: 'order.sourceChannel', label: '来源方式', width: 100 },
+	{ prop: 'isProvince', label: '省/市工单', width: 100 },
+	{ prop: 'order.statusText', label: '工单状态', width: 100 },
+	{ prop: 'order.acceptType', label: '受理类型', width: 150 },
+	{ prop: 'employeeName', label: '受理人', width: 120 },
+	{ prop: 'order.hotspotName', label: '热点分类', width: 200 },
+	{ prop: 'order.actualHandleOrgName', label: '接办对象', width: 150 },
+	{
+		prop: 'startTime',
+		label: '受理时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'expiredTime',
+		label: '工单期满时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'creationTime',
+		label: '督办时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'replyLimitTime',
+		label: '督办回复时限',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.replyLimitTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'creatorOrgName', label: '督办部门', width: 150 },
+	{ prop: 'crUser', label: '督办人', width: 120 },
+	{ prop: 'orgName', label: '被督办部门', width: 150 },
+	{ prop: 'applyContent', label: '督办意见', width: 200 },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 140, align: 'center' },
 ]);
 const state = reactive({
 	queryParams: {
@@ -129,6 +127,7 @@ const state = reactive({
 });
 /** 获取列表 */
 const queryList = throttle(() => {
+	state.loading = true;
 	superviseList(state.queryParams)
 		.then((res: any) => {
 			state.tableData = res.result?.items ?? [];