gxtyzx-admin/src/views/approval/instance/index.vue

<!-- 审批管理 - 单据查询 -->
<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 #toolbar>
          <a-space>
            <a-button
              v-permission="'approval:instance:export'"
              type="primary"
              class="ele-btn-icon"
              :loading="exporting"
              @click="handleExport"
            >
              <template #icon>
                <download-outlined />
              </template>
              <span>导出</span>
            </a-button>
          </a-space>
        </template>
        <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 { DownloadOutlined } from '@ant-design/icons-vue';
  import { message } from 'ant-design-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 { exportInstances, 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 queryWhere = ref<ApprovalQueryParam>({});
  // 导出请求状态
  const exporting = ref(false);

  // 表格数据源
  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) => {
    queryWhere.value = where ?? {};
    tableRef?.value?.reload({ page: 1, where: queryWhere.value });
  };

  /* 导出当前筛选结果 */
  const handleExport = () => {
    exporting.value = true;
    exportInstances(queryWhere.value)
      .then((res) => {
        if (res.data?.url) {
          window.open(res.data.url);
        } else {
          message.error('导出失败：未返回文件地址');
        }
      })
      .catch((e: Error) => {
        message.error(e.message || '导出失败');
      })
      .finally(() => {
        exporting.value = false;
      });
  };

  /* 打开详情 */
  const openDetail = (row: ApprovalItem) => {
    currentId.value = row.id;
    showDetail.value = true;
  };
</script>

<script lang="ts">
  export default {
    name: 'ApprovalInstance'
  };
</script>