Merge branch 'dev' into pr@dev_st_fix

frontend/src/components/canvas/components/editor/EditBar.vue

@@ -81,6 +81,14 @@
           @click.stop="showViewDetails('details')"
         />
       </span>
+      <span :title="$t('route.exportExcel')">
+        <svg-icon
+          v-if="exportExcelShow"
+          style="color: white"
+          icon-class="file-excel"
+          @click.stop="exportExcelDownload()"
+        />
+      </span>
       <setting-menu
         v-if="activeModel==='edit'"
         style="float: right;height: 24px!important;"
@@ -195,6 +203,8 @@ import Background from '@/views/background/index'
 import MapLayerController from '@/views/chart/components/map/MapLayerController'
 import { uploadFileResult } from '@/api/staticResource/staticResource'
 import eventBus from '@/components/canvas/utils/eventBus'
+import { hasDataPermission } from '@/utils/permission'
+import { exportExcelDownload } from '@/components/canvas/utils/utils'
 
 export default {
   components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField, MapLayerController },
@@ -283,6 +293,9 @@ export default {
     detailsShow() {
       return this.curComponent.type === 'view' && this.terminal === 'pc' && this.curComponent.propValue.innerType && this.curComponent.propValue.innerType !== 'richTextView'
     },
+    exportExcelShow() {
+      return this.detailsShow && hasDataPermission('export', this.$store.state.panel.panelInfo.privileges)
+    },
     enlargeShow() {
       return this.curComponent.type === 'view' && this.curComponent.propValue.innerType && this.curComponent.propValue.innerType !== 'richTextView' && !this.curComponent.propValue.innerType.includes('table')
     },
@@ -455,6 +468,9 @@ export default {
     showViewDetails(openType = 'details') {
       this.$emit('showViewDetails', { openType: openType })
     },
+    exportExcelDownload() {
+      exportExcelDownload(this.chart, null, null, null, null, null)
+    },
     auxiliaryMatrixChange() {
       if (this.curComponent.auxiliaryMatrix) {
         this.curComponent.auxiliaryMatrix = false

frontend/src/components/canvas/customComponent/UserViewDialog.vue

@@ -82,11 +82,9 @@ import ChartComponentG2 from '@/views/chart/components/ChartComponentG2'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import ChartComponentS2 from '@/views/chart/components/ChartComponentS2'
 import LabelNormalText from '@/views/chart/components/normal/LabelNormalText'
-import { exportDetails, innerExportDetails } from '@/api/panel/panel'
 import html2canvas from 'html2canvasde'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { deepCopy, exportImg, imgUrlTrans } from '@/components/canvas/utils/utils'
+import { deepCopy, exportExcelDownload, exportImg, imgUrlTrans } from '@/components/canvas/utils/utils'
-import { getLinkToken, getToken } from '@/utils/auth'
 
 export default {
   name: 'UserViewDialog',
@@ -262,75 +260,8 @@ export default {
       this.lastMapChart = JSON.parse(JSON.stringify(data))
     },
     exportExcelDownload(snapshot, width, height, callBack) {
-      const excelHeader = JSON.parse(JSON.stringify(this.chart.data.fields)).map(item => item.name)
+      const loadingWrapper = { val: this.linkLoading }
-      const excelTypes = JSON.parse(JSON.stringify(this.chart.data.fields)).map(item => item.deType)
+      exportExcelDownload(this.chart, snapshot, width, height, loadingWrapper, callBack)
-      const excelHeaderKeys = JSON.parse(JSON.stringify(this.chart.data.fields)).map(item => item.dataeaseName)
-      let excelData = JSON.parse(JSON.stringify(this.chart.data.tableRow)).map(item => excelHeaderKeys.map(i => item[i]))
-      const excelName = this.chart.name
-      let detailFields = []
-      if (this.chart.data.detailFields?.length) {
-        detailFields = this.chart.data.detailFields.map(item => {
-          const temp = {
-            name: item.name,
-            deType: item.deType,
-            dataeaseName: item.dataeaseName
-          }
-          return temp
-        })
-        excelData = JSON.parse(JSON.stringify(this.chart.data.tableRow)).map(item => {
-          const temp = excelHeaderKeys.map(i => {
-            if (i === 'detail' && !item[i] && Array.isArray(item['details'])) {
-              const arr = item['details']
-              if (arr?.length) {
-                return arr.map(ele => detailFields.map(field => ele[field.dataeaseName]))
-              }
-              return null
-            }
-            return item[i]
-          })
-          return temp
-        })
-      }
-      const request = {
-        proxy: null,
-        viewId: this.chart.id,
-        viewName: excelName,
-        header: excelHeader,
-        details: excelData,
-        excelTypes: excelTypes,
-        snapshot: snapshot,
-        snapshotWidth: width,
-        snapshotHeight: height,
-        componentFilterInfo: this.lastViewRequestInfo[this.chart.id],
-        excelHeaderKeys: excelHeaderKeys,
-        detailFields
-      }
-      let method = innerExportDetails
-      const token = this.$store.getters.token || getToken()
-      const linkToken = this.$store.getters.linkToken || getLinkToken()
-      if (!token && linkToken) {
-        method = exportDetails
-        this.linkLoading = true
-      }
-
-      if (this.panelInfo.proxy) {
-        request.proxy = { userId: this.panelInfo.proxy }
-      }
-      method(request).then((res) => {
-        const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
-        const link = document.createElement('a')
-        link.style.display = 'none'
-        link.href = URL.createObjectURL(blob)
-        link.download = excelName + '.xlsx' // 下载的文件名
-        document.body.appendChild(link)
-        link.click()
-        document.body.removeChild(link)
-        this.linkLoading = false
-        callBack && callBack()
-      }).catch(() => {
-        this.linkLoading = false
-        callBack && callBack()
-      })
     },
 
     renderComponent() {

frontend/src/components/canvas/utils/utils.js

@@ -12,6 +12,8 @@ import { AIDED_DESIGN, MOBILE_SETTING, PAGE_LINE_DESIGN, PANEL_CHART_INFO, TAB_C
 import html2canvas from 'html2canvasde'
 import xssCheck from 'xss'
 import Vue from 'vue'
+import { exportDetails, innerExportDetails } from '@/api/panel/panel'
+import { getLinkToken, getToken } from '@/utils/auth'
 
 export function deepCopy(target) {
   if (typeof target === 'object' && target !== null) {
@@ -425,3 +427,75 @@ export function formatDatasetTreeFolder(tree) {
 export function getCacheTree(treeName) {
   return JSON.parse(localStorage.getItem(treeName))
 }
+
+export function exportExcelDownload(chart, snapshot, width, height, loadingWrapper, callBack) {
+  const fields = JSON.parse(JSON.stringify(chart.data.fields))
+  const tableRow = JSON.parse(JSON.stringify(chart.data.tableRow))
+  const excelHeader = fields.map(item => item.name)
+  const excelTypes = fields.map(item => item.deType)
+  const excelHeaderKeys = fields.map(item => item.dataeaseName)
+  let excelData = tableRow.map(item => excelHeaderKeys.map(i => item[i]))
+  const excelName = chart.name
+  let detailFields = []
+  if (chart.data.detailFields?.length) {
+    detailFields = chart.data.detailFields.map(item => {
+      return {
+        name: item.name,
+        deType: item.deType,
+        dataeaseName: item.dataeaseName
+      }
+    })
+    excelData = tableRow.map(item => {
+      return excelHeaderKeys.map(i => {
+        if (i === 'detail' && !item[i] && Array.isArray(item['details'])) {
+          const arr = item['details']
+          if (arr?.length) {
+            return arr.map(ele => detailFields.map(field => ele[field.dataeaseName]))
+          }
+          return null
+        }
+        return item[i]
+      })
+    })
+  }
+  const request = {
+    proxy: null,
+    viewId: chart.id,
+    viewName: excelName,
+    header: excelHeader,
+    details: excelData,
+    excelTypes: excelTypes,
+    snapshot: snapshot,
+    snapshotWidth: width,
+    snapshotHeight: height,
+    componentFilterInfo: store.state.lastViewRequestInfo[chart.id],
+    excelHeaderKeys: excelHeaderKeys,
+    detailFields
+  }
+  let method = innerExportDetails
+  const token = store.getters.token || getToken()
+  const linkToken = store.getters.linkToken || getLinkToken()
+  if (!token && linkToken) {
+    method = exportDetails
+    loadingWrapper && (loadingWrapper.val = true)
+  }
+  const panelInfo = store.state.panel.panelInfo
+  if (panelInfo.proxy) {
+    request.proxy = { userId: panelInfo.proxy }
+  }
+  method(request).then((res) => {
+    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
+    const link = document.createElement('a')
+    link.style.display = 'none'
+    link.href = URL.createObjectURL(blob)
+    link.download = excelName + '.xlsx' // 下载的文件名
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    loadingWrapper && (loadingWrapper.val = false)
+    callBack && callBack()
+  }).catch(() => {
+    loadingWrapper && (loadingWrapper.val = false)
+    callBack && callBack()
+  })
+}