瓦斯日报-导出

src/views/vent/gas/gasReport/gas-report.api.ts

@@ -3,8 +3,7 @@ import { defHttp } from '/@/utils/http/axios';
 enum Api {
     getGasAddressList = '/safety/gasDayReport/getGasAddressList',
     getList='/safety/gasDayReport/list',
-    
-
+    expComReportByParam='/safety/reportInfo/expComReportByParam'
 }
 /**
  * 获取瓦斯日报区队，检测地点下拉选项
@@ -18,4 +17,10 @@ export const getGasAddressList = (params) => defHttp.get({ url: Api.getGasAddres
  * 获取瓦斯日报列表数据
  * @param params
  */
-export const getList = (params) => defHttp.get({ url: Api.getList,params });
+export const getList = (params) => defHttp.get({ url: Api.getList,params });
+
+/**
+ * 导出瓦斯日报
+ * @param params
+ */
+export const expComReportByParam = (params) => defHttp.post({ url: Api.expComReportByParam, params, responseType: 'blob' });

src/views/vent/gas/gasReport/index.vue

@@ -8,7 +8,7 @@
                         <div class="area-item">
                             <div class="item-text">填报日期：</div>
                             <a-date-picker style="width:220px" v-model="searchData.reportTime" placeholder="请选择填报日期"
-                                @change="onChange"  />
+                                @change="onChange" />
                         </div>
                     </a-col>
                     <a-col :span="5">
@@ -23,23 +23,26 @@
                     <a-col :span="5">
                         <div class="area-item">
                             <div class="item-text">上报人：</div>
-                            <a-input style="width: 220px" v-model:value="searchData.sbr" placeholder="请输入上报人"  />
+                            <a-input style="width: 220px" v-model:value="searchData.sbr" placeholder="请输入上报人" />
                         </div>
                     </a-col>
                     <a-col :span="5">
                         <div class="area-item">
                             <div class="item-text">上报地点：</div>
-                            <a-select v-model:value="searchData.strInstallPos" style="width: 220px" placeholder="请选择上报地点">
+                            <a-select v-model:value="searchData.strInstallPos" style="width: 220px"
+                                placeholder="请选择上报地点">
                                 <a-select-option v-for="item in addressList" :key="item" :value="item.value">{{
                                     item.label
-                                    }}</a-select-option>
+                                }}</a-select-option>
                             </a-select>
                         </div>
                     </a-col>
 
-                    <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-right: 15px"
+                    <a-button type="primary" preIcon="ant-design:search-outlined" 
                         @click="getSearch">查询</a-button>
-                    <a-button preIcon="ant-design:sync-outlined" @click="onReset">重置</a-button>
+                    <a-button preIcon="ant-design:sync-outlined" style="margin:0px 15px" @click="onReset">重置</a-button>
+                    <a-button type="primary" preIcon="ant-design:download-outlined" 
+                        @click="getExport">导出</a-button>
                 </a-row>
             </div>
             <a-table :columns="columns" :data-source="tableData" :scroll="{ y: 500 }" class="tableW"
@@ -53,8 +56,9 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, reactive } from 'vue';
 import { columns } from './gas-report.data'
-import { getGasAddressList, getList } from './gas-report.api'
+import { getGasAddressList, getList, expComReportByParam } from './gas-report.api'
 import customHeader from '/@/components/vent/customHeader.vue';
+import { message } from 'ant-design-vue';
 
 let searchData = reactive({
     reportTime: '',
@@ -75,28 +79,28 @@ let pagination = reactive({
 let tableData = ref<any[]>([])
 
 
-function onChange(val,time) { 
-    searchData.reportTime=time
+function onChange(val, time) {
+    searchData.reportTime = time
 }
 //获取日报列表数据
 async function getTableList() {
-    let res = await getList({pageNo:pagination.current,pageSize:pagination.pageSize,...searchData})
+    let res = await getList({ pageNo: pagination.current, pageSize: pagination.pageSize, ...searchData })
     console.log(res, '瓦斯日报列表数据-----------')
-    tableData.value=res.records
-    pagination.total=res.total
+    tableData.value = res.records
+    pagination.total = res.total
 }
 //查询
 function getSearch() {
-    pagination.current=1
+    pagination.current = 1
     getTableList()
 }
 //重置
 function onReset() {
-    pagination.current=1
-    searchData.districtTeam=''
-    searchData.reportTime=''
-    searchData.strInstallPos=''
-    searchData.sbr=''
+    pagination.current = 1
+    searchData.districtTeam = ''
+    searchData.reportTime = ''
+    searchData.strInstallPos = ''
+    searchData.sbr = ''
     getTableList()
 }
 //分页切换
@@ -106,13 +110,13 @@ function pageChange(val) {
     getTableList()
 }
 function uniqueObjectsArray(arr) {
-  const map = new Map();
-  return arr.filter((item) => {
-    const key = JSON.stringify(item);
-    const isNew = !map.has(key);
-    map.set(key, item);
-    return isNew;
-  });
+    const map = new Map();
+    return arr.filter((item) => {
+        const key = JSON.stringify(item);
+        const isNew = !map.has(key);
+        map.set(key, item);
+        return isNew;
+    });
 }
 //获取安装位置下拉选项
 async function getSelectList() {
@@ -125,10 +129,42 @@ async function getSelectList() {
             qdList.push({ label: el.devgroup_dictText, value: el.devgroup })
             addressList.push({ label: el.strinstallpos, value: el.strinstallpos })
         })
-       qdList= uniqueObjectsArray(qdList)
+        qdList = uniqueObjectsArray(qdList)
     }
 
 }
+//导出
+async function getExport() {
+    if (searchData.reportTime) {
+        let res = await expComReportByParam({ tempName: 'wsrb', reportTime: searchData.reportTime })
+        console.log(res, '导出------------')
+        let filename = searchData.reportTime+'.xlsx';
+        downFilePublic(res, filename);
+    } else {
+        message.warning('请选择需要导出数据的填报日期!');
+    }
+}
+
+// 下载公用方法
+function downFilePublic(content, fileName) {
+    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
+    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+    // IE10以上支持blob但是依然不支持download
+    if ('download' in document.createElement('a')) {
+        // 支持a标签download的浏览器
+        const link = document.createElement('a'); // 创建a标签
+        link.download = fileName; // a标签添加属性
+        link.style.display = 'none';
+        link.href = URL.createObjectURL(blob);
+        document.body.appendChild(link);
+        link.click(); // 执行下载
+        URL.revokeObjectURL(link.href); // 释放url
+        document.body.removeChild(link); // 释放标签
+    } else {
+        // 其他浏览器
+        navigator.msSaveBlob(blob, fileName);
+    }
+}
 
 onMounted(() => {
     getSelectList()
@@ -158,6 +194,7 @@ onMounted(() => {
             }
         }
     }
+
     .zxm-picker,
     .zxm-input {
         border: 1px solid #3ad8ff77 !important;