reactor:特提列表调整;

src/views/business/special/index.vue

@@ -1,77 +1,67 @@
 <template>
-  <div class="business-special-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="queryList" class="keyword-input" />
-        </el-form-item>
-<!--        <el-form-item label="审核状态" prop="State">
-          <el-select
-            v-model="state.queryParams.State"
-            placeholder="请选择审核状态"
-          >
-            <el-option v-for="item in StateOptions" :value="item.value" :key="item.value" :label="item.label" />
-          </el-select>
-        </el-form-item>-->
-        <el-form-item label="申请时间" prop="crTime">
-          <el-date-picker
-            v-model="state.queryParams.crTime"
-            type="datetimerange"
-            unlink-panels
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            :shortcuts="shortcuts"
-            @change="timeStartChangeCr"
-            value-format="YYYY-MM-DD[T]HH:mm:ss"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="queryList" :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 #expiredStatus="{ row }">
-          <span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-        </template>
-        <template #isProvince="{ row }">
-          <span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
-        </template>
-        <template #title="{ row }">
-          <order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
-        </template>
-        <template #employeeName="{ row }">
-					<span
-          >{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
-					</span>
-        </template>
-        <!-- 表格操作 -->
-        <template #operation="{ row }">
-          <el-button link type="primary" @click="onprogressDetail(row)" title="查看审批明细">
-            审批明细
-          </el-button>
-          <order-detail :order="row" @updateList="queryList" />
-        </template>
-      </ProTable>
-    </el-card>
-    <!-- 审批详情 -->
-    <special-audit-detail ref="specialAuditDetailRef" />
-  </div>
+	<div class="business-special-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="queryList" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="审核状态" prop="State">
+					<el-select v-model="state.queryParams.State" placeholder="请选择审核状态">
+						<el-option v-for="item in stateOptions" :value="item.value" :key="item.value" :label="item.label" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="申请时间" prop="crTime">
+					<el-date-picker
+						v-model="state.queryParams.crTime"
+						type="datetimerange"
+						unlink-panels
+						range-separator="至"
+						start-placeholder="开始时间"
+						end-placeholder="结束时间"
+						:shortcuts="shortcuts"
+						@change="timeStartChangeCr"
+						value-format="YYYY-MM-DD[T]HH:mm:ss"
+					/>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="queryList" :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 #expiredStatus="{ row }">
+					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
+				</template>
+				<template #title="{ row }">
+					<order-detail :order="row.id ? row : { ...row, id: row.orderId }" @updateList="queryList">{{ row.title }}</order-detail>
+				</template>
+				<template #state="{ row }">
+					<span>{{ stateOptions.find((item) => item.value === row.state).label }}</span>
+				</template>
+				<!-- 表格操作 -->
+				<template #operation="{ row }">
+					<el-button link type="primary" @click="onprogressDetail(row)" title="查看审批明细"> 审批明细 </el-button>
+					<order-detail :order="row.id ? row : { ...row, id: row.orderId }" @updateList="queryList" />
+				</template>
+			</ProTable>
+		</el-card>
+		<!-- 审批详情 -->
+		<special-audit-detail ref="specialAuditDetailRef" />
+	</div>
 </template>
 <script setup lang="tsx" name="orderSpecial">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
@@ -80,7 +70,7 @@ import { throttle } from '@/utils/tools';
 import { formatDate } from '@/utils/formatTime';
 import { useRouter } from 'vue-router';
 import { specialListAll } from '@/api/business/special';
-import { shortcuts } from "@/utils/constants";
+import { shortcuts } from '@/utils/constants';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const SpecialAuditDetail = defineAsyncComponent(() => import('@/views/business/special/components/Special-audit-detail.vue')); // 审批详情
@@ -90,78 +80,79 @@ const router = useRouter(); // 路由
 const proTableRef = ref<RefType>(); // 表格ref
 // 表格配置项
 const columns = ref<any[]>([
-  { prop: 'expiredStatus', label: '超期状态', align: 'center' },
-  { prop: 'no', label: '工单编码', width: 150 },
-  { prop: 'isProvince', label: '省/市工单', width: 100 },
-  { prop: 'statusText', label: '工单状态', width: 100 },
-  { prop: 'stepName', label: '申请节点', width: 150 },
-  { prop: 'nextStepName', label: '特提节点', width: 150 },
-  { prop: 'title', label: '标题', width: 300 },
-  { prop: 'creatorOrgName', label: '申请部门', width: 170 },
-  { prop: 'creatorName', label: '申请人', width: 170 },
-  {
-    prop: 'creationTime',
-    label: '申请时间',
-    width: 170,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  { prop: 'acceptType', label: '受理类型', width: 150 },
-  { prop: 'hotspotName', label: '热点分类', width: 200 },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 170, align: 'center' },
+	{ prop: 'expiredStatus', label: '超期状态', align: 'center' },
+	{ prop: 'no', label: '工单编码', width: 150 },
+	{ prop: 'statusText', label: '工单状态', width: 100 },
+	{ prop: 'state', label: '审批状态', width: 100 },
+	{ prop: 'stepName', label: '申请节点', width: 150 },
+	{ prop: 'nextStepName', label: '特提节点', width: 150 },
+	{ prop: 'title', label: '标题', width: 300 },
+	{ prop: 'creatorOrgName', label: '申请部门', width: 170 },
+	{ prop: 'creatorName', label: '申请人', width: 170 },
+	{
+		prop: 'creationTime',
+		label: '申请时间',
+		width: 170,
+		render: (scope) => {
+			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
+		},
+	},
+	{ prop: 'acceptType', label: '受理类型', width: 150 },
+	{ prop: 'hotspotName', label: '热点分类', width: 200 },
+	{ prop: 'operation', label: '操作', fixed: 'right', width: 170, align: 'center' },
 ]);
 const state = reactive({
-  queryParams: {
-    // 查询条件
-    PageIndex: 1,
-    PageSize: 10,
-    No: null, // 工单编号
-    State: null, // 审核状态
-    crTime: [], // 申请时间
-  },
-  tableData: [], //表单
-  loading: false, // 加载
-  total: 0, // 总数
+	queryParams: {
+		// 查询条件
+		PageIndex: 1,
+		PageSize: 10,
+		No: null, // 工单编号
+		State: null, // 审核状态
+		crTime: [], // 申请时间
+	},
+	tableData: [], //表单
+	loading: false, // 加载
+	total: 0, // 总数
 });
 // 受理时间
 const timeStartChangeCr = (val: string[]) => {
-  state.queryParams['StartTime'] = val[0];
-  state.queryParams['EndTime'] = val[1];
-  queryList();
+	state.queryParams['StartTime'] = val[0];
+	state.queryParams['EndTime'] = val[1];
+	queryList();
 };
-const StateOptions = [ // 审核状态
-  { value: '0', label: '待审核' },
-  { value: '1', label: '审核通过' },
-  { value: '2', label: '审核不通过' },
+const stateOptions = [
+	// 审核状态
+	{ value: 0, label: '待审核' },
+	{ value: 1, label: '审核通过' },
+	{ value: 2, label: '审核不通过' },
 ];
 /** 获取列表 */
 const queryList = throttle(() => {
-  state.loading = true;
-  specialListAll(state.queryParams)
-    .then((res) => {
-      state.tableData = res.result?.items ?? [];
-      state.total = res.result?.total ?? 0;
-      state.loading = false;
-    })
-    .catch((err) => {
-      console.log(err);
-      state.loading = false;
-    });
+	state.loading = true;
+	specialListAll(state.queryParams)
+		.then((res) => {
+			state.tableData = res.result?.items ?? [];
+			state.total = res.result?.total ?? 0;
+			state.loading = false;
+		})
+		.catch((err) => {
+			console.log(err);
+			state.loading = false;
+		});
 }, 300);
 
 /** 重置按钮操作 */
 const resetQuery = throttle((formEl: FormInstance | undefined) => {
-  if (!formEl) return;
-  formEl.resetFields();
-  queryList();
+	if (!formEl) return;
+	formEl.resetFields();
+	queryList();
 }, 300);
 // 特提审批详情
 const specialAuditDetailRef = ref<RefType>();
 const onprogressDetail = (row: any) => {
-  specialAuditDetailRef.value.openDialog(row.specialId ?? '');
+	specialAuditDetailRef.value.openDialog(row.specialId ?? '');
 };
 onMounted(() => {
-  queryList();
+	queryList();
 });
 </script>