|
@@ -29,20 +29,12 @@
|
|
|
v-model:page-size="state.queryParams.PageSize"
|
|
|
:key="Math.random()"
|
|
|
>
|
|
|
- <template #expiredStatus="{ row }">
|
|
|
+ <template #expiredStatusText="{ 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.acceptorStaffNo }}]</span>
|
|
|
- </span>
|
|
|
- </template>
|
|
|
<!-- 表格操作 -->
|
|
|
<template #operation="{ row }">
|
|
|
<el-button link type="primary" @click="onDetail(row)" title="延期详情"> 延期详情 </el-button>
|
|
@@ -85,64 +77,126 @@ const ruleFormRef = ref<RefType>(); // 表单ref
|
|
|
const router = useRouter(); // 路由
|
|
|
const proTableRef = ref<RefType>(); // 表格ref
|
|
|
// 表格配置项
|
|
|
-const columns = ref<any[]>([
|
|
|
- { prop: 'expiredStatus', label: '超期状态', align: 'center',fixed: 'left',width: 80},
|
|
|
- { prop: 'no', label: '工单编码', width: 150 },
|
|
|
- { prop: 'isProvince', label: '省/市工单', width: 100 },
|
|
|
- { prop: 'title', label: '工单标题', width: 300 },
|
|
|
- { 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: 200 },
|
|
|
- { prop: 'order.acceptType', label: '受理类型', width: 150 },
|
|
|
- { prop: 'order.orgLevelOneName', label: '一级部门', width: 150 },
|
|
|
- { prop: 'order.actualHandleOrgName', label: '接办部门', width: 150 },
|
|
|
- {
|
|
|
- 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: 'creatorOrgName', label: '延期申请部门', width: 120 },
|
|
|
- { prop: 'creatorName', label: '延期申请人', width: 150 },
|
|
|
- { prop: 'delayNum', label: '延期申请时限', width: 120 },
|
|
|
- { prop: 'delayUnitText', label: '延期申请单位', width: 120 },
|
|
|
- { prop: 'delayReason', label: '申请理由', width: 120 },
|
|
|
- {
|
|
|
- prop: 'beforeDelay',
|
|
|
- label: '申请前期满时间',
|
|
|
- width: 170,
|
|
|
- render: (scope) => {
|
|
|
- return <span>{formatDate(scope.row.beforeDelay, '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: 160, align: 'center' },
|
|
|
-]);
|
|
|
+const columns = ref<any[]>([]);
|
|
|
+const columnsTodo = [
|
|
|
+ { prop: 'order.expiredStatusText', label: '超期状态', align: 'center',fixed: 'left',width: 80},
|
|
|
+ { prop: 'order.no', label: '工单编码', width: 150 },
|
|
|
+ { prop: 'order.isProvinceText', label: '省/市工单', width: 100 },
|
|
|
+ { prop: 'order.title', label: '工单标题', width: 300 },
|
|
|
+ { 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: 'order.acceptorName', label: '受理人', width: 120 },
|
|
|
+ { prop: 'order.hotspotName', label: '热点分类', width: 200 },
|
|
|
+ { prop: 'order.acceptType', label: '受理类型', width: 150 },
|
|
|
+ { prop: 'order.orgLevelOneName', label: '一级部门', width: 150 },
|
|
|
+ { prop: 'order.actualHandleOrgName', label: '接办部门', width: 150 },
|
|
|
+ {
|
|
|
+ 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: 'creatorOrgName', label: '延期申请部门', width: 120 },
|
|
|
+ { prop: 'creatorName', label: '延期申请人', width: 150 },
|
|
|
+ { prop: 'delayNum', label: '延期申请时限', width: 120 },
|
|
|
+ { prop: 'delayUnitText', label: '延期申请单位', width: 120 },
|
|
|
+ { prop: 'delayReason', label: '申请理由', width: 120 },
|
|
|
+ {
|
|
|
+ prop: 'beforeDelay',
|
|
|
+ label: '申请前期满时间',
|
|
|
+ width: 170,
|
|
|
+ render: (scope) => {
|
|
|
+ return <span>{formatDate(scope.row.beforeDelay, '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: 160, align: 'center' },
|
|
|
+];
|
|
|
+const columnsDone = [
|
|
|
+ // 已办
|
|
|
+ { prop: 'order.expiredStatusText', label: '超期状态', align: 'center',fixed: 'left',width: 80},
|
|
|
+ { prop: 'order.no', label: '工单编码', width: 150 },
|
|
|
+ { prop: 'order.isProvinceText', label: '省/市工单', width: 100 },
|
|
|
+ { prop: 'order.title', label: '工单标题', width: 300 },
|
|
|
+ { prop: 'currentStepName', label: '当前节点', width: 150 },
|
|
|
+ { prop: 'actualHandlerName', label: '当前审批人', width: 150 },
|
|
|
+ { 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: 200 },
|
|
|
+ { prop: 'order.acceptType', label: '受理类型', width: 150 },
|
|
|
+ { prop: 'order.orgLevelOneName', label: '一级部门', width: 150 },
|
|
|
+ { prop: 'order.actualHandleOrgName', label: '接办部门', width: 150 },
|
|
|
+ {
|
|
|
+ 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: 'creatorOrgName', label: '延期申请部门', width: 120 },
|
|
|
+ { prop: 'creatorName', label: '延期申请人', width: 150 },
|
|
|
+ { prop: 'delayNum', label: '延期申请时限', width: 120 },
|
|
|
+ { prop: 'delayUnitText', label: '延期申请单位', width: 120 },
|
|
|
+ { prop: 'delayReason', label: '申请理由', width: 120 },
|
|
|
+ {
|
|
|
+ prop: 'beforeDelay',
|
|
|
+ label: '申请前期满时间',
|
|
|
+ width: 170,
|
|
|
+ render: (scope) => {
|
|
|
+ return <span>{formatDate(scope.row.beforeDelay, '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: 160, align: 'center' },
|
|
|
+];
|
|
|
// 手动查询,将页码设置为1
|
|
|
const handleQuery = () => {
|
|
|
state.queryParams.PageIndex = 1;
|
|
@@ -153,21 +207,11 @@ const queryList = () => {
|
|
|
state.loading = true;
|
|
|
delayList(state.queryParams)
|
|
|
.then((res: any) => {
|
|
|
- const index = columns.value.findIndex((item) => item.prop === 'delayStateText');
|
|
|
- if (state.queryParams.IsApply === 'true') {
|
|
|
- if (!columns.value.find((item) => item.prop === 'actualHandleStepName')) {
|
|
|
- columns.value.splice(
|
|
|
- index,
|
|
|
- 0,
|
|
|
- { prop: 'actualHandleStepName', label: '当前节点', width: 150 },
|
|
|
- { prop: 'actualHandlerName', label: '当前审批人', width: 150 }
|
|
|
- );
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (columns.value.find((item) => item.prop === 'actualHandleStepName')) {
|
|
|
- columns.value = columns.value.filter((item) => item.prop !== 'actualHandleStepName' && item.prop !== 'actualHandlerName');
|
|
|
- }
|
|
|
- }
|
|
|
+ if (state.queryParams.IsApply === 'true') {
|
|
|
+ columns.value = columnsDone;
|
|
|
+ } else {
|
|
|
+ columns.value = columnsTodo;
|
|
|
+ }
|
|
|
state.tableData = res.result?.items ?? [];
|
|
|
state.total = res.result?.total ?? 0;
|
|
|
state.loading = false;
|