feat(approval): 单据查询导出按钮 (#26)

src/api/approval/instance/index.ts

@@ -1,6 +1,7 @@
 import request from '@/utils/request';
 import type { ApiResult, PageResult } from '@/api';
 import type {
+  ApprovalExportFile,
   ApprovalInstance,
   ApprovalItem,
   ApprovalQueryParam
@@ -33,3 +34,17 @@ export async function getInstance(id: number) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+/**
+ * 导出单据（返回完整结果，含文件下载地址）
+ */
+export async function exportInstances(data: ApprovalQueryParam) {
+  const res = await request.post<ApiResult<ApprovalExportFile>>(
+    THINK_API_URL + '/approval/export',
+    data
+  );
+  if (res.data.code === 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/api/approval/instance/model/index.ts

@@ -170,3 +170,15 @@ export interface ApprovalUser {
   organizationId?: number;
   organizationName?: string;
 }
+
+/**
+ * 导出文件
+ */
+export interface ApprovalExportFile {
+  id?: number;
+  name?: string;
+  path?: string;
+  length?: number;
+  contentType?: string;
+  url?: string;
+}

src/views/approval/instance/index.vue

@@ -13,6 +13,22 @@
         :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'">
@@ -43,6 +59,8 @@
 
 <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 {
@@ -51,7 +69,7 @@
   } 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 { exportInstances, pageInstances } from '@/api/approval/instance';
   import type {
     ApprovalItem,
     ApprovalQueryParam
@@ -65,6 +83,11 @@
   // 当前查看的单据id
   const currentId = ref<number | undefined>(undefined);
 
+  // 当前筛选条件（导出复用同一套条件）
+  const queryWhere = ref<ApprovalQueryParam>({});
+  // 导出请求状态
+  const exporting = ref(false);
+
   // 表格数据源
   const datasource: DatasourceFunction = ({ page, limit, where }) => {
     return pageInstances({
@@ -171,7 +194,27 @@
 
   /* 刷新表格 */
   const reload = (where?: ApprovalQueryParam) => {
-    tableRef?.value?.reload({ page: 1, where: where ?? {} });
+    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;
+      });
   };
 
   /* 打开详情 */