feat: 导出excel

src/api/iot/device.ts

@@ -369,10 +369,13 @@ export const deviceSimulator = (data: {deviceId: string, payload: string}) => {
 }
 
 export const exportDeviceExcel = (params: IOT.API.DEVICE.QueryPamars) => {
-  return request<string>({
+  return request<Blob>({
     url: '/deviceExcel/export',
     method: 'GET',
     responseType: 'blob',
+    Headers: {
+      responseType: 'blob'
+    },
     params
   })
 }

src/controller/iot/data.ts

@@ -7,7 +7,7 @@ export class DataController {
   }
 
   static async exportHistoryExecel (params: IOT.API.DATA.QueryParams) {
-    await exportHistoryExecel(params)
+    return await exportHistoryExecel(params)
   }
 
   static async pageOpenAPiList (params: {page: number, pageSize: number, apiLabel: string}) {

src/controller/iot/device.ts

@@ -362,6 +362,6 @@ export class DeviceContriller {
   }
 
   static async exportDeviceExcel (data: IOT.API.DEVICE.QueryPamars) {
-    await exportDeviceExcel(data)
+    return await exportDeviceExcel(data)
   }
 }

src/hooks/dom.ts

@@ -14,7 +14,7 @@ export const useCopy = (content: string) => {
   document.body.removeChild(inputValue)
 }
 
-export const exportExcel = (data, fileName = '蛟龙云') => {
+export const useExportExcel = (data: Blob, fileName = '蛟龙云') => {
   const blob = new Blob([data])
   const downloadElement = document.createElement('a')
   const href = window.URL.createObjectURL(blob) // 创建下载的链接

src/hooks/index.ts

@@ -1,5 +1,7 @@
-export { useEmitter, useScheduler, useSchedulerOnce, usePort, useModule } from './effect'
-
-export { useId, useFlvUrl } from './state'
-
-export { useDeviceType } from './bom'
+export { useEmitter, useScheduler, useSchedulerOnce, usePort, useModule } from './effect'
+
+export { useId, useFlvUrl } from './state'
+
+export { useDeviceType } from './bom'
+
+export { useExportExcel } from './dom'

src/pages/Iot/device/index.vue

@@ -20,7 +20,7 @@
 
   <a-card style="margin-top: 20px;">
     <a-row justify="space-between" >
-      <a-col :span="20"  >
+      <a-col :span="18"  >
         <a-form layout="inline" >
           <a-form-item  >
             <a-select  allowClear style="width: 176px;"  v-model:value="searchState.deviceStatus" placeholder="请输入设备状态">
@@ -43,8 +43,11 @@
           <a-form-item><a-button type="primary" @click="getDevicePage">搜索</a-button> </a-form-item>
         </a-form>
       </a-col>
-      <a-col :span="2" >
-        <a-button type="primary" @click="openModal('add', {})"> + 新增设备</a-button>
+      <a-col :span="4" >
+        <a-space>
+          <a-button type="primary" @click="openModal('add', {})"> + 新增设备</a-button>
+          <a-button  @click="exportExcel"> 导出</a-button>
+        </a-space>
       </a-col>
     </a-row>
 
@@ -140,6 +143,7 @@ import { Form, message } from 'ant-design-vue'
 import { DeviceAuthTypeEnum } from '@/enum/common'
 import { useRoute, useRouter } from 'vue-router'
 import { DownOutlined } from '@ant-design/icons-vue'
+import { useExportExcel } from '@/hooks'
 
 const useForm = Form.useForm
 
@@ -265,6 +269,11 @@ const { resetFields: resetFieldsDevice, validate: validateDevice, validateInfos:
   deviceCode: [{ required: true, message: '请填写设备码' }]
 }))
 
+const exportExcel = async () => {
+  const { data } = await DeviceContriller.exportDeviceExcel(searchState)
+  useExportExcel(data, '测试')
+}
+
 const changePage = ({ current }) => {
   searchState.page = current
   getDevicePage()