feat(approval): 单据查询页面与只读详情 (#25)

2026-10-30 20:50:53 +08:00
parent 0687327bae
commit b7b347554b
6 changed files with 963 additions and 0 deletions
@@ -0,0 +1,188 @@
+<!-- 审批管理 - 单据查询 -->
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 搜索表单 -->
+      <search @search="reload" />
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="id"
+        :columns="columns"
+        :datasource="datasource"
+        :scroll="{ x: 1500 }"
+        cache-key="proApprovalInstanceTable"
+      >
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'docType'">
+            <a-tag :color="record.docType === 'completion' ? 'blue' : 'purple'">
+              {{ record.docTypeName }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'status'">
+            <a-tag :color="statusColor(record.status)">
+              {{ record.statusName }}
+            </a-tag>
+          </template>
+          <template v-else-if="column.key === 'submitTime'">
+            {{ toDateString(record.submitTime) || '-' }}
+          </template>
+          <template v-else-if="column.key === 'archiveTime'">
+            {{ toDateString(record.archiveTime) || '-' }}
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a @click="openDetail(record)">详情</a>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 详情抽屉 -->
+    <detail v-model:visible="showDetail" :instance-id="currentId" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import { toDateString } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import Detail from './components/detail.vue';
+  import { pageInstances } from '@/api/approval/instance';
+  import type {
+    ApprovalItem,
+    ApprovalQueryParam
+  } from '@/api/approval/instance/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 详情抽屉是否显示
+  const showDetail = ref(false);
+  // 当前查看的单据id
+  const currentId = ref<number | undefined>(undefined);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ page, limit, where }) => {
+    return pageInstances({
+      ...(where as ApprovalQueryParam),
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '单号',
+      dataIndex: 'bizNo',
+      width: 180,
+      ellipsis: true,
+      customRender: ({ text }) => text || '-'
+    },
+    {
+      title: '单据类型',
+      key: 'docType',
+      dataIndex: 'docType',
+      width: 140,
+      align: 'center'
+    },
+    {
+      title: '标题或名称',
+      dataIndex: 'title',
+      minWidth: 220,
+      ellipsis: true
+    },
+    {
+      title: '报送部门',
+      dataIndex: 'reportOrgName',
+      width: 180,
+      ellipsis: true
+    },
+    {
+      title: '报送人',
+      dataIndex: 'reporterName',
+      width: 120,
+      ellipsis: true
+    },
+    {
+      title: '受理部门',
+      dataIndex: 'acceptOrgName',
+      width: 180,
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      key: 'status',
+      dataIndex: 'status',
+      width: 110,
+      align: 'center'
+    },
+    {
+      title: '当前节点',
+      dataIndex: 'currentNodeName',
+      width: 140,
+      ellipsis: true
+    },
+    {
+      title: '提交时间',
+      key: 'submitTime',
+      dataIndex: 'submitTime',
+      width: 170,
+      align: 'center'
+    },
+    {
+      title: '归档时间',
+      key: 'archiveTime',
+      dataIndex: 'archiveTime',
+      width: 170,
+      align: 'center'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 90,
+      align: 'center',
+      fixed: 'right',
+      hideInSetting: true
+    }
+  ]);
+
+  // 状态颜色
+  const statusColor = (status?: string) => {
+    switch (status) {
+      case 'PENDING':
+        return 'processing';
+      case 'REJECTED':
+        return 'red';
+      case 'WITHDRAWN':
+        return 'orange';
+      case 'APPROVED':
+        return 'green';
+      case 'ARCHIVED':
+        return 'blue';
+      default:
+        return 'default';
+    }
+  };
+
+  /* 刷新表格 */
+  const reload = (where?: ApprovalQueryParam) => {
+    tableRef?.value?.reload({ page: 1, where: where ?? {} });
+  };
+
+  /* 打开详情 */
+  const openDetail = (row: ApprovalItem) => {
+    currentId.value = row.id;
+    showDetail.value = true;
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ApprovalInstance'
+  };
+</script>