fix:数据查看添加导出数据功能

data-room-ui/packages/BigScreenDesign/DataViewDialog/index.vue

@@ -33,22 +33,32 @@
         slot="footer"
         class="dialog-footer"
       >
-        <el-button
-          type="primary"
-          :loading="sureLoading"
-          @click="exportHandler"
+        <DownloadExcel
+          :data="dataList"
+          :fields="fields"
+          :name="chartTitle+'数据导出'"
+          class="output-excel"
+          :before-finish="exportHandler"
         >
-          导出数据
-        </el-button>
+          <el-button
+            type="primary"
+            :loading="exportLoading"
+          >
+            导出数据
+          </el-button>
+        </DownloadExcel>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { getChatInfo, getUpdateChartInfo } from 'data-room-ui/js/api/bigScreenApi'
+import { getUpdateChartInfo } from 'data-room-ui/js/api/bigScreenApi'
 import { mapState } from 'vuex'
+import Vue from 'vue'
+import JsonExcel from 'vue-json-excel'
 
+Vue.component('DownloadExcel', JsonExcel)
 export default {
   name: 'DataViewDialog',
   components: {},
@@ -56,11 +66,13 @@ export default {
   },
   data () {
     return {
+      chartTitle: '',
+      fields: {},
       formVisible: false,
-      sureLoading: false,
+      exportLoading: false,
       loading: false,
       dataList: [],
-      columnData: []
+      columnData: {}
     }
   },
   computed: {
@@ -76,14 +88,17 @@ export default {
   methods: {
     init (config) {
       this.resetData()
+      this.chartTitle = config.title
       this.formVisible = true
       this.getDataList(config)
     },
     // 获取数据列表
     getDataList (config) {
       this.loading = true
+      // 如果是G2组件则需要从option里面取数据
       if (config.type === 'customComponent' && (!config.dataSource.businessKey)) {
         this.getDataByOption(config)
+        this.fieldsFormat()
         this.loading = false
       } else {
         const params = {
@@ -95,23 +110,27 @@ export default {
           pageCode: this.pageCode,
           type: config.type
         }
+        // 调接口获取数据
         getUpdateChartInfo(params).then(res => {
           this.loading = false
           if (Array.isArray(res.data)) {
             this.dataList = res.data || []
           } else {
+            // 如果返回的data不是数组，则是js数据集或者是http前端数据集,则直接从option中获取
             this.getDataByOption(config)
           }
-          this.columnData = res.columnData || []
+          this.columnData = res.columnData || {}
+          this.fieldsFormat()
         }).catch(err => { console.log(err) }).finally(() => {
           this.loading = false
         })
       }
     },
+    // 通过option获取数据
     getDataByOption (config) {
       const list = config.option.data || []
-      this.columnData = list && list.length ? (Object.keys(list[0])).map((key) => {
-        return {
+      for (const key of Object.keys(list[0])) {
+        this.columnData[key] = {
           aggregate: '',
           alias: key,
           originalColumn: key,
@@ -119,19 +138,30 @@ export default {
           tableName: '',
           type: 'varchar'
         }
-      }) : []
+      }
+      console.log(this.columnData)
       this.dataList = list
     },
+    // 获取表格的表头
     getLabel (col) {
       return col.remark || col.originalColumn
     },
     // 数据重置
     resetData () {
-      this.columnData = []
+      this.columnData = {}
       this.dataList = []
+      this.fields = {}
+      this.chartTitle = ''
+    },
+    // 格式化fields
+    fieldsFormat () {
+      for (const item in this.columnData) {
+        this.fields[this.columnData[item].remark] = this.columnData[item].originalColumn
+      }
     },
     // 导出数据
     exportHandler () {
+      this.$message.success('导出数据')
     }
   }
 }