中转四个流向统计弹框添加下载

src/views/statisticsCharts/components/TableDialog.vue

@@ -1,66 +1,20 @@
 <template>
-  <Dialog
-    :flag="flag"
-    width="90%"
-  >
-    <div
-      ref="dialog"
-      class="dialog-wrapper"
-      :tabindex="0"
-      @keyup.esc="dialogHide"
-    >
+  <Dialog :flag="flag" width="90%">
+    <div ref="dialog" class="dialog-wrapper" :tabindex="0" @keyup.esc="dialogHide">
       <div class="title">
-        <span class="title-text">{{ title }}</span>
-        <i
-          class="icon el-icon-close"
-          @click="dialogHide"
-        />
+        <span class="title-text">{{ title }}-{{ withExport }}</span>
+        <span class="right">
+          <i title="导出" class="icon el-icon-download" @click="exportClickHandler" />
+          <i class="icon el-icon-close" @click="dialogHide" />
+        </span>
       </div>
       <div class="content">
-        <div
-          v-loading="loading"
-          element-loading-text="拼命加载中"
-          element-loading-spinner="el-icon-loading"
-          element-loading-background="rgba(0, 0, 0, 0.8)"
-          class="table-wrapper"
-        >
-          <el-table
-            ref="table"
-            height="calc(100vh - 100px - 60px - 10px)"
-            class="table"
-            :data="dealedTableData"
-            border
-            stripe
-            fit
-            show-summary
-            :summary-method="summaryRow"
-            :header-cell-class-name="headerCellClass"
-            :row-class-name="rowClass"
-            :cell-class-name="cellClass"
-            :span-method="spanMethod"
-            @cell-click="cellClickHandler"
-          >
-            <el-table-column
-              v-for="column in tableColumns"
-              :key="column.prop"
-              :prop="column.prop"
-              :label="column.label"
-              :width="column.width"
-              :fixed="column.fixed"
-              :formatter="formatter"
-            >
+        <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="table-wrapper">
+          <el-table ref="table" height="calc(100vh - 100px - 60px - 10px)" class="table" :data="dealedTableData" border stripe fit show-summary :summary-method="summaryRow" :header-cell-class-name="headerCellClass" :row-class-name="rowClass" :cell-class-name="cellClass" :span-method="spanMethod" @cell-click="cellClickHandler">
+            <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width" :fixed="column.fixed" :formatter="formatter">
               <template #header>
-                <el-tooltip
-                  :content="column.desc || column.label"
-                  placement="top"
-                >
-                  <TableHeaderCell
-                    :label="column.label"
-                    :filter-options="tableDataFilters[column.prop]"
-                    :filter-values.sync="filterValues[column.prop]"
-                    :sortable="column.sortable"
-                    :sort-rule.sync="tableDataSortRules[column.prop]"
-                  />
+                <el-tooltip :content="column.desc || column.label" placement="top">
+                  <TableHeaderCell :label="column.label" :filter-options="tableDataFilters[column.prop]" :filter-values.sync="filterValues[column.prop]" :sortable="column.sortable" :sort-rule.sync="tableDataSortRules[column.prop]" />
                 </el-tooltip>
               </template>
             </el-table-column>
@@ -74,9 +28,8 @@
 <script>
 import Dialog from '@/layout/components/Dialog/index.vue'
 import TableHeaderCell from '@/components/TableHeaderCell/index.vue'
-import { setTableFilters } from '@/utils/table'
+import { setTableFilters, throttledExportToExcel } from '@/utils/table'
 import { TempQuery } from '@/api/temp'
-
 export default {
   name: 'TableDialog',
   components: { Dialog, TableHeaderCell },
@@ -93,8 +46,12 @@ export default {
       type: String,
       default: '标题',
     },
+    withExport: {
+      type: Boolean,
+      default: true
+    },
   },
-  data() {
+  data () {
     return {
       tableColumns: [
         {
@@ -227,7 +184,7 @@ export default {
     }
   },
   computed: {
-    dealedTableData() {
+    dealedTableData () {
       const filtered = this.tableData.filter(item => {
         let flag = true
         Object.entries(this.filterValues).forEach(([key, arr]) => {
@@ -252,7 +209,7 @@ export default {
     },
   },
   watch: {
-    flag(val) {
+    flag (val) {
       if (val) {
         this.tableData = []
         this.getTableData()
@@ -262,7 +219,7 @@ export default {
       }
     },
     dealedTableData: {
-      handler(val) {
+      handler (val) {
         this.spanArr = []
         let contactDot = 0
         val.forEach((item, index, arr) => {
@@ -273,7 +230,7 @@ export default {
               item['flightNO'] === arr[index - 1]['flightNO'] &&
               item['flightDate'] === arr[index - 1]['flightDate'] &&
               item['passengerNameUpcase'] ===
-                arr[index - 1]['passengerNameUpcase'] &&
+              arr[index - 1]['passengerNameUpcase'] &&
               item['checkInNO'] === arr[index - 1]['checkInNO'] &&
               item['bagWeight'] === arr[index - 1]['bagWeight']
             ) {
@@ -289,7 +246,7 @@ export default {
       deep: true,
     },
   },
-  created() {
+  created () {
     Object.values(this.tableColumns).forEach(
       ({ prop, filterable, sortable }) => {
         if (filterable) {
@@ -302,17 +259,17 @@ export default {
       }
     )
   },
-  updated() {
+  updated () {
     // table数据更新
     this.$nextTick(() => {
       this.$refs.table?.doLayout()
     })
   },
   methods: {
-    dialogHide() {
+    dialogHide () {
       this.$emit('update:flag', false)
     },
-    spanMethod({ row, column, rowIndex, columnIndex }) {
+    spanMethod ({ row, column, rowIndex, columnIndex }) {
       if (['passengerNameUpcase', 'bagWeight'].includes(column.property)) {
         const _row = this.spanArr[rowIndex]
         const _col = _row > 0 ? 1 : 0
@@ -323,7 +280,7 @@ export default {
       }
     },
     // 给表头单元格加上 ascending 或 descending 使用 element 自带的排序箭头变色
-    headerCellClass({ row, column, rowIndex, columnIndex }) {
+    headerCellClass ({ row, column, rowIndex, columnIndex }) {
       const classes = []
       const rule = this.tableDataSortRules[column.property]
       if (rule) {
@@ -331,19 +288,19 @@ export default {
       }
       return classes.join(' ')
     },
-    rowClass({ row, rowIndex }) {
+    rowClass ({ row, rowIndex }) {
       const classes = []
       if (row.deleted === 'DEL') {
         classes.push('bgl-deleted')
       }
       return classes.join(' ')
     },
-    cellClass({ row, column, rowIndex, columnIndex }) {
+    cellClass ({ row, column, rowIndex, columnIndex }) {
       const classes = []
       return classes.join(' ')
     },
-    cellClickHandler(row, column, cell, event) {},
-    formatter(row, column, cellValue) {
+    cellClickHandler (row, column, cell, event) { },
+    formatter (row, column, cellValue) {
       switch (column.property) {
         case 'departureTime':
           return (cellValue ?? '').replace('T', ' ')
@@ -356,11 +313,11 @@ export default {
       }
     },
     // 统计行数
-    summaryRow() {
+    summaryRow () {
       const rowNum = this.dealedTableData.length
       return ['合计', `共${rowNum}件`]
     },
-    async getTableData() {
+    async getTableData () {
       this.loading = true
       try {
         const {
@@ -381,6 +338,12 @@ export default {
       }
       this.loading = false
     },
+    //导出
+    exportClickHandler () {
+      const table = this.$refs['table'].$el.cloneNode(true)
+      const fileName = `${this.title}.xlsx`
+      throttledExportToExcel(table, `${this.title}`, fileName)
+    }
   },
 }
 </script>
@@ -407,7 +370,7 @@ export default {
       padding: 0;
       text-align: center;
       font-size: 14px;
-      font-family: Helvetica, 'Microsoft YaHei';
+      font-family: Helvetica, "Microsoft YaHei";
       letter-spacing: 0;
     }
     .cell-click {

src/views/statisticsCharts/views/report/transitTables.vue

@@ -1,15 +1,7 @@
 <template>
   <!-- 中转四个流向统计 -->
   <div class="statstics-wrapper">
-    <StatisticsHeader
-      title="中转四个流向统计"
-      :items="formItems"
-      :data.sync="formData"
-      with-setting
-      :withSetting="false"
-      @export="exportup"
-      @getFormData="getFormData"
-    />
+    <StatisticsHeader title="中转四个流向统计" :items="formItems" :data.sync="formData" with-setting :withSetting="false" @export="exportup" @getFormData="getFormData" />
     <!-- <Tableformcp
       :isloadings="isloadings"
       :rows="12"
@@ -18,24 +10,8 @@
       width="800px"
       tableHeight="750"
     /> -->
-    <Tableformbrs
-      :data-id="dataId"
-      upid="4"
-      :textShow="textShow"
-      :isloadings="isloadings"
-      :data-content="dataContent"
-      :rows="12"
-      label-width="140px"
-      :min-height="70"
-      width="800px"
-      tableHeight="750"
-      @cell-click="cellClickHandler"
-    />
-    <TableDialog
-      :flag.sync="dialogFlag"
-      :query-params="queryParams"
-      :title="dialogTitle"
-    />
+    <Tableformbrs :data-id="dataId" upid="4" :textShow="textShow" :isloadings="isloadings" :data-content="dataContent" :rows="12" label-width="140px" :min-height="70" width="800px" tableHeight="750" @cell-click="cellClickHandler" />
+    <TableDialog :flag.sync="dialogFlag" :query-params="queryParams" with-setting :title="dialogTitle" />
   </div>
 </template>
 <script>
@@ -46,7 +22,7 @@ import TableDialog from '../../components/TableDialog.vue'
 import { Format } from '@/utils/validate'
 export default {
   name: 'ReportStatistics',
-  data() {
+  data () {
     return {
       textShow: null,
       formData: {
@@ -163,7 +139,7 @@ export default {
     Tableformbrs,
     TableDialog,
   },
-  mounted() {
+  mounted () {
     this.dataContent = [
       ...Array(3).fill(this.formData.timedim || '日'),
       this.formData.airport || 'PEK',
@@ -173,7 +149,7 @@ export default {
     ]
   },
   methods: {
-    getFormData(data) {
+    getFormData (data) {
       this.textShow = data.trd
       this.dataContent = [
         data.timedim,
@@ -188,10 +164,10 @@ export default {
         data.company,
       ]
     },
-    exportup() {
+    exportup () {
       this.isloadings = this.isloadings += 1
     },
-    cellClickHandler(row, column, cell, event) {
+    cellClickHandler (row, column, cell, event) {
       if (
         column.property.includes('trans_bag') &&
         row[column.property] &&