From 99c0541e4f221d1dd50ef97e96e42fe3cdeca8f2 Mon Sep 17 00:00:00 2001
From: Huakk <1751826683@qq.com>
Date: Mon, 5 Aug 2024 18:03:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(custom):=20=E6=96=B0=E5=A2=9E=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/order/index/index.vue        | 14 ++++++++++++++
 src/views/order/pending_list/index.vue | 17 +++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/src/views/order/index/index.vue b/src/views/order/index/index.vue
index 0eac14c..3ba0342 100644
--- a/src/views/order/index/index.vue
+++ b/src/views/order/index/index.vue
@@ -92,6 +92,7 @@
       <n-col :span="24">
         <div mt-10>
           <n-button type="primary" @click="getList">搜索</n-button>
+          <n-button type="primary" ml-10 @click="exportTable">导出表格</n-button>
           <n-button ml-10 @click="clear">重置</n-button>
         </div>
       </n-col>
@@ -110,6 +111,7 @@
 </template>
 
 <script setup>
+import * as XLSX from 'xlsx'
 import api from './api'
 
 const loading = ref(false)
@@ -307,6 +309,8 @@ const pagination = ref({
   page: 1,
   pageSize: 10,
   itemCount: 0,
+  showSizePicker: true,
+  pageSizes: [10, 20, 50, 100],
   onChange: (page) => {
     pagination.value.page = page
     getList()
@@ -322,6 +326,16 @@ onMounted(() => {
   getList()
 })
 
+const exportTable = () => {
+  // 将数据转换为工作簿
+  const worksheet = XLSX.utils.json_to_sheet(data.value)
+  const workbook = XLSX.utils.book_new()
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+
+  // 生成Excel文件并触发下载
+  XLSX.writeFile(workbook, 'table.xlsx')
+}
+
 const getList = async () => {
   loading.value = true
   try {
diff --git a/src/views/order/pending_list/index.vue b/src/views/order/pending_list/index.vue
index 62331fa..8674c53 100644
--- a/src/views/order/pending_list/index.vue
+++ b/src/views/order/pending_list/index.vue
@@ -71,11 +71,13 @@
       <n-col :span="24">
         <div mt-10>
           <n-button type="primary" @click="getList">搜索</n-button>
+          <n-button type="primary" ml-10 @click="exportTable">导出表格</n-button>
           <n-button ml-10 @click="clear">重置</n-button>
         </div>
       </n-col>
     </n-row>
     <n-data-table
+      ref="tableRef"
       class="mt-5"
       :loading="loading"
       :columns="columns"
@@ -90,6 +92,7 @@
 
 <script setup>
 import api from './api'
+import * as XLSX from 'xlsx'
 import { NEllipsis, NButton, NPopconfirm } from 'naive-ui'
 
 const loading = ref(false)
@@ -282,6 +285,8 @@ const pagination = ref({
   page: 1,
   pageSize: 10,
   itemCount: 0,
+  showSizePicker: true,
+  pageSizes: [10, 20, 50, 100],
   onChange: (page) => {
     pagination.value.page = page
     getList()
@@ -351,6 +356,17 @@ const clear = () => {
   }
   getList()
 }
+
+const tableRef = ref()
+const exportTable = () => {
+  // 将数据转换为工作簿
+  const worksheet = XLSX.utils.json_to_sheet(data.value)
+  const workbook = XLSX.utils.book_new()
+  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
+
+  // 生成Excel文件并触发下载
+  XLSX.writeFile(workbook, 'table.xlsx')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -358,6 +374,7 @@ const clear = () => {
   color: #fff !important;
   font-size: 16px;
 }
+
 :deep(.n-statistic-value__content) {
   color: #fff !important;
   font-size: 16px;