opt:页面新增导出功能案例

nladmin-ui/src/views/wms/basedata/group/group.js

@@ -31,4 +31,13 @@ export function getdtl(id) {
   })
 }
 
+export function exportFile(query) {
+  return request({
+    url: 'api/group/exportFile',
+    method: 'post',
+    data: query,
+    responseType: 'blob'
+  })
+}
+
 export default { add, edit, del, getdtl }

nladmin-ui/src/views/wms/basedata/group/index.vue

@@ -59,7 +59,17 @@
         </el-col>
       </el-row>
       <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
-      <crudOperation :permission="permission" />
+      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
+      <crudOperation :permission="permission">
+        <el-button
+          slot="right"
+          class="filter-item"
+          type="primary"
+          size="mini"
+          @click="exportExcel"
+        >导出excel
+        </el-button>
+      </crudOperation>
       <!--新增表格-->
       <el-dialog
         :close-on-click-modal="false"
@@ -237,7 +247,7 @@
 </template>
 
 <script>
-import crudGroup from '@/views/wms/basedata/group/group'
+import crudGroup,  { exportFile }  from '@/views/wms/basedata/group/group'
 import CRUD, { crud, form, header, presenter } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
 import udOperation from '@crud/UD.operation'
@@ -298,6 +308,34 @@ export default {
     }
   },
   methods: {
+    // 导出Excel功能
+    exportExcel() {
+      // 构建文件名称：仓位管理导出yyyymmdd.xlsx
+      const now = new Date()
+      const year = now.getFullYear()
+      const month = String(now.getMonth() + 1).padStart(2, '0')
+      const day = String(now.getDate()).padStart(2, '0')
+      const fileName = `组盘管理导出${year}${month}${day}.xlsx`
+
+      // 使用导入的exportFile方法调用后端接口
+      exportFile(this.query).then(res => {
+        // 创建Blob对象
+        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
+        // 创建下载链接
+        const link = document.createElement('a')
+        link.href = URL.createObjectURL(blob)
+        link.download = fileName
+        // 触发下载
+        document.body.appendChild(link)
+        link.click()
+        // 清理
+        document.body.removeChild(link)
+        URL.revokeObjectURL(link.href)
+        this.crud.notify('导出成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
+      }).catch(() => {
+        this.crud.notify('导出失败', CRUD.NOTIFICATION_TYPE.ERROR)
+      })
+    },
     // 钩子：在获取表格数据之前执行，false 则代表不获取数据
     [CRUD.HOOK.beforeRefresh]() {
       return true