reactor:对接超期部门统计明细和部门延期统计明细;

src/views/statistics/department/detailOverdue.vue

@@ -1,61 +1,61 @@
 <template>
-  <div class="statistics-department-detail-overdue-container layout-pd">
-    <!-- 搜索  -->
-    <el-card shadow="never">
-      <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-        <el-form-item label="工单编码" prop="No">
-          <el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-        </el-form-item>
-        <el-form-item label="超期类型" prop="ExpiredType">
+	<div class="statistics-department-detail-overdue-container layout-pd">
+		<!-- 搜索  -->
+		<el-card shadow="never">
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<!--        <el-form-item label="超期类型" prop="ExpiredType">
           <el-select v-model="state.queryParams.ExpiredType" placeholder="请选择超期类型" clearable @change="handleQuery">
             <el-option  value="1" label="系统中超期"></el-option>
             <el-option  value="2" label="申请延期超期"></el-option>
           </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-          <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
-            <SvgIcon name="ele-Refresh" class="mr5" />重置
-          </el-button>
-        </el-form-item>
-      </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 #isProvince="{ row }">
-          <span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
-        </template>
-        <template #employeeName="{ row }">
+        </el-form-item>-->
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
+				</el-form-item>
+			</el-form>
+		</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 #isProvince="{ row }">
+					<span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
+				</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 #title="{ row }">
-          <order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
-        </template>
-        <!-- 表格操作 -->
-        <template #operation="{ row }">
-          <order-detail :order="row" @updateList="queryList" />
-        </template>
-      </ProTable>
-    </el-card>
-  </div>
+				</template>
+				<template #title="{ row }">
+					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<order-detail :order="row" @updateList="queryList" />
+				</template>
+			</ProTable>
+		</el-card>
+	</div>
 </template>
 <script setup lang="tsx" name="statisticsDepartmentDetailOverdue">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElButton, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { useRouter } from 'vue-router';
-import { departmentOverdueDetail } from "@/api/statistics/department";
+import { departmentOverdueDetail } from '@/api/statistics/department';
 
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
@@ -63,103 +63,103 @@ const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/
 const proTableRef = ref<RefType>(); // 表格ref
 // 表格配置项
 const columns = ref<any[]>([
-  { prop: 'no', label: '工单编码', width: 150 },
-  { prop: 'isProvince', label: '省/市工单', width: 100 },
-  { prop: 'actualHandleStepName', label: '办理节点', width: 150 },
-  { prop: 'statusText', label: '工单状态', width: 100 },
-  { prop: 'title', label: '标题', width: 300 },
-  {
-    prop: 'startTime',
-    label: '受理时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'expiredTime',
-    label: '工单期满时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  {
-    prop: 'filedTime',
-    label: '办结时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  { prop: 'orgLevelOneName', label: '一级部门', width: 170 },
-  { prop: 'actualHandleOrgName', label: '接办部门', width: 170 },
-  { prop: 'acceptType', label: '受理类型', width: 150 },
-  { prop: 'counterSignTypeText', label: '是否会签' },
-  { prop: 'sourceChannel', label: '来源方式' },
-  { prop: 'hotspotName', label: '热点分类', width: 100 },
-  { prop: 'acceptorName', label: '受理人', width: 170 },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 100, align: 'center' },
+	{ prop: 'no', label: '工单编码', width: 150 },
+	{ prop: 'isProvince', label: '省/市工单', width: 100 },
+	{ prop: 'actualHandleStepName', label: '办理节点', width: 150 },
+	{ prop: 'statusText', label: '工单状态', width: 100 },
+	{ prop: 'title', label: '标题', width: 300 },
+	{
+		prop: 'startTime',
+		label: '受理时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'expiredTime',
+		label: '工单期满时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{
+		prop: 'filedTime',
+		label: '办结时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'orgLevelOneName', label: '一级部门', width: 170 },
+	{ prop: 'actualHandleOrgName', label: '接办部门', width: 170 },
+	{ prop: 'acceptType', label: '受理类型', width: 150 },
+	{ prop: 'counterSignTypeText', label: '是否会签' },
+	{ prop: 'sourceChannel', label: '来源方式' },
+	{ prop: 'hotspotName', label: '热点分类', width: 100 },
+	{ prop: 'acceptorName', label: '受理人', width: 170 },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 100, align: 'center' },
 ]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const router = useRouter(); // 路由
 const state = reactive({
-  queryParams: {
-    // 查询条件
-    PageIndex: 1,
-    PageSize: 10,
-    No: null, //
-    ExpiredType:null
-  },
-  tableData: [], //表单
-  loading: false, // 加载
-  total: 0, // 总数
+	queryParams: {
+		// 查询条件
+		PageIndex: 1,
+		PageSize: 10,
+		No: null, //
+		ExpiredType: null,
+	},
+	tableData: [], //表单
+	loading: false, // 加载
+	total: 0, // 总数
 });
 // 手动查询，将页码设置为1
 const handleQuery = () => {
-  state.queryParams.PageIndex = 1;
-  queryList();
+	state.queryParams.PageIndex = 1;
+	queryList();
 };
 /** 获取列表 */
 const historyParams = history.state;
 const queryList = () => {
-  state.loading = true;
-  const request = {
-    PageIndex: state.queryParams.PageIndex,
-    PageSize: state.queryParams.PageSize,
-    No: state.queryParams?.No,
-    ExpiredType: state.queryParams?.ExpiredType,
-    StartTime: historyParams?.StartTime,
-    EndTime: historyParams?.EndTime,
-    OrgCode: historyParams?.OrgCode,
-    QueryType: historyParams?.QueryType,
-  };
-  departmentOverdueDetail(request)
-    .then((res) => {
-      state.tableData = res.result?.items ?? [];
-      state.total = res.result?.total ?? 0;
-      state.loading = false;
-    })
-    .catch((err) => {
-      console.log(err);
-    })
-    .finally(() => {
-      state.loading = false;
-    });
-}
+	state.loading = true;
+	const request = {
+		PageIndex: state.queryParams.PageIndex,
+		PageSize: state.queryParams.PageSize,
+		No: state.queryParams?.No,
+		ExpiredType: state.queryParams?.ExpiredType,
+		StartTime: historyParams?.StartTime,
+		EndTime: historyParams?.EndTime,
+		OrgCode: historyParams?.OrgCode,
+		QueryType: historyParams?.QueryType,
+	};
+	departmentOverdueDetail(request)
+		.then((res) => {
+			state.tableData = res.result?.items ?? [];
+			state.total = res.result?.total ?? 0;
+			state.loading = false;
+		})
+		.catch((err) => {
+			console.log(err);
+		})
+		.finally(() => {
+			state.loading = false;
+		});
+};
 
 /** 重置按钮操作 */
 const resetQuery = (formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-  queryList();
-}
+	if (!formEl) return;
+	formEl.resetFields();
+	queryList();
+};
 // 导出
 const onExport = () => {
-  console.log('导出');
+	console.log('导出');
 };
 onMounted(async () => {
-  queryList();
+	queryList();
 });
 </script>