调节样式

src/views/modules/cdc/collectRecord.vue

@@ -20,7 +20,12 @@ export default {
   data(){
     return{
       // 遮罩层
-      loading: true,
+      loading: false,
+      // 导出
+      exportData: [],
+      exportName: '数据采集历史' + this.dayjs().format('YYYYMMDDHHmmss'),
+      exportHeader: [],
+      exportFooter: [],
       // 设备信息表格数据
       infoList: [],
       // 弹出层标题
@@ -143,6 +148,22 @@ export default {
       ],
     }
   },
+  computed: {
+    tableHeight () {
+      const base = Number(this.height) || 0
+      if (!base) {
+        return 420
+      }
+      const adjusted = base - 180
+      if (adjusted < 320) {
+        return 320
+      }
+      if (adjusted > 420) {
+        return 420
+      }
+      return adjusted
+    }
+  },
   methods:{
     handleQuery(){
       let params = {
@@ -162,6 +183,46 @@ export default {
         this.loading = false
         this.$message.error(error)
       })
+    },
+    async createExportData () {
+      if (!this.infoList.length) {
+        this.$message.warning('请先查询出数据')
+        return []
+      }
+      const params = {
+        ...this.queryParams,
+        site: this.$store.state.user.site,
+        page: 1,
+        limit: -1
+      }
+      this.exportName = '数据采集历史' + this.dayjs().format('YYYYMMDDHHmmss')
+      try {
+        const { data } = await selectCollectRecordList(params)
+        if (data && data.code === 0) {
+          const rows = data.rows || (data.page && data.page.list) || []
+          if (!rows.length) {
+            this.$message.warning('无可导出的数据')
+            return []
+          }
+          this.exportData = rows
+          return this.exportData
+        }
+        this.$message.error(data ? data.msg : '导出失败')
+      } catch (error) {
+        this.$message.error(error)
+      }
+      return []
+    },
+    startDownload () {},
+    finishDownload () {},
+    fields () {
+      const mapping = {}
+      this.collectRecordColumns.forEach(item => {
+        if (!item.columnHidden) {
+          mapping[item.columnLabel] = item.columnProp
+        }
+      })
+      return mapping
     }
   },
   watch:{
@@ -170,8 +231,13 @@ export default {
     }
   },
   created() {
-    this.handleQuery();
-  }
+    //this.handleQuery();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.height = window.innerHeight - 225;
+    })
+  },
 }
 </script>
 
@@ -226,12 +292,26 @@ export default {
     </el-form-item>
     <el-form-item label=" ">
       <el-button type="primary" @click="handleQuery" plain>查询</el-button>
+      <download-excel
+        class="el-button el-button--primary el-button--medium"
+        :fields="fields()"
+        :data="exportData"
+        type="xls"
+        :name="exportName"
+        :header="exportHeader"
+        :footer="exportFooter"
+        :fetch="createExportData"
+        :before-generate="startDownload"
+        :before-finish="finishDownload">
+        导出
+      </download-excel>
     </el-form-item>
   </el-form>
-  <el-table v-loading="loading" border :data="infoList" :height="height">
+  <el-table v-loading="loading" border :data="infoList">
     <el-table-column
       v-for="(item,index) in collectRecordColumns" :key="index"
       :sortable="item.columnSortable"
+      :height="height"
       :prop="item.columnProp"
       :header-align="item.headerAlign"
       :show-overflow-tooltip="item.showOverflowTooltip"