feat(视图): 透视表平铺模式支持导出格式化内容

core/frontend/package.json

@@ -45,6 +45,7 @@
     "echarts": "^5.0.1",
     "element-resize-detector": "^1.2.3",
     "element-ui": "2.15.7",
+    "exceljs": "^4.4.0",
     "file-saver": "^2.0.5",
     "fit2cloud-ui": "^1.8.0",
     "flv.js": "^1.6.2",

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

@@ -89,6 +89,16 @@
           @click.stop="exportExcelDownload()"
         />
       </span>
+      <span
+        v-if="exportFormattedExcelShow"
+        :title="$t('chart.export_formatted_excel')"
+        @click.stop="exportFormattedExcel()"
+      >
+        <svg-icon
+          style="font-size: 14px; color: white; margin-right: 3px"
+          icon-class="ds-excel-format"
+        />
+      </span>
       <setting-menu
         v-if="activeModel==='edit'"
         style="float: right;height: 24px!important;"
@@ -207,6 +217,7 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import { hasDataPermission } from '@/utils/permission'
 import { exportExcelDownload } from '@/components/canvas/utils/utils'
 import { Button } from 'element-ui'
+import { exportPivotExcel } from '@/views/chart/chart/common/common_table'
 
 export default {
   components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField, MapLayerController },
@@ -298,6 +309,13 @@ export default {
     exportExcelShow() {
       return this.detailsShow && hasDataPermission('export', this.$store.state.panel.panelInfo.privileges) && this.chart && this.chart.dataFrom !== 'template'
     },
+    exportFormattedExcelShow() {
+      return this.detailsShow &&
+        hasDataPermission('export', this.$store.state.panel.panelInfo.privileges) &&
+        this.chart &&
+        this.chart.dataFrom !== 'template' &&
+        JSON.parse(this.chart.customAttr).size?.tableLayoutMode !== 'tree'
+    },
     enlargeShow() {
       return this.curComponent.type === 'view' && this.curComponent.propValue.innerType && this.curComponent.propValue.innerType !== 'richTextView' && !this.curComponent.propValue.innerType.includes('table')
     },
@@ -490,20 +508,20 @@ export default {
         message: h('p', null, [
           this.$t('data_export.exporting'),
           h(
-              Button,
+            Button,
-              {
+            {
-                props: {
+              props: {
-                  type: 'text',
+                type: 'text'
-                },
-                class: 'btn-text',
-                on: {
-                  click: () => {
-                    cb()
-                  }
-                }
               },
-              this.$t('data_export.export_center')
+              class: 'btn-text',
-            ),
+              on: {
+                click: () => {
+                  cb()
+                }
+              }
+            },
+            this.$t('data_export.export_center')
+          ),
           this.$t('data_export.export_info')
         ]),
         iconClass,
@@ -522,7 +540,7 @@ export default {
             Button,
             {
               props: {
-                type: 'text',
+                type: 'text'
               },
               class: 'btn-text',
               on: {
@@ -542,6 +560,13 @@ export default {
     exportExcelDownload() {
       exportExcelDownload(this.chart, null, null, null, null, null, this.exportDataCb)
     },
+    exportFormattedExcel() {
+      const instance = this.$store.state.chart.tableInstance[this.chart.id]
+      if (!instance) {
+        return
+      }
+      exportPivotExcel(instance, this.chart)
+    },
     auxiliaryMatrixChange() {
       if (this.curComponent.auxiliaryMatrix) {
         this.curComponent.auxiliaryMatrix = false

core/frontend/src/icons/svg/ds-excel-format.svg

@@ -0,0 +1 @@
+<svg t="1726630203120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9498" width="32" height="32"><path d="M901.347556 805.546667c-16.839111 0-30.72 12.970667-32.085334 29.354666v118.328889H106.268444v-119.921778c0.227556-1.592889 0.455111-3.185778 0.455112-5.006222V468.764444c0-1.592889-0.227556-3.413333-0.455112-5.006222V70.314667h552.049778v171.804444s3.185778 30.037333 31.857778 30.037333H869.262222v172.714667c1.820444 16.156444 15.473778 28.899556 32.085334 28.899556 14.791111 0 27.306667-10.012444 31.175111-23.438223V254.862222l-1.137778-1.137778c-1.137778-5.233778-3.640889-14.336-8.192-17.976888l-225.28-227.100445s-4.096-4.551111-16.839111-6.826667c-0.910222-0.682667-2.048-1.365333-2.958222-1.820444H95.573333C66.218667 0 42.552889 23.665778 42.552889 53.020444v463.985778c0.227556 0.455111 0.227556 1.137778 0.455111 1.592889V829.895111c-0.227556 0.682667-0.455111 1.137778-0.455111 1.820445v139.264c0 29.127111 23.665778 53.020444 53.020444 53.020444h783.928889c29.354667 0 53.020444-23.665778 53.020445-53.020444v-141.994667c-3.868444-13.425778-16.384-23.438222-31.175111-23.438222zM836.494222 218.680889l-130.389333 0.910222-0.910222-132.664889 131.299555 131.754667z" p-id="9499"></path><path d="M963.015111 611.214222l-95.573333-114.460444c-20.935111-14.336-34.133333 2.958222-34.133334 2.958222-13.880889 16.611556-0.682667 41.187556-0.682666 41.187556l56.206222 67.356444H604.842667c-16.611556 0-30.037333 16.156444-30.037334 35.953778 0 19.797333 13.425778 35.953778 30.037334 35.953778h282.851555l-58.254222 70.314666c-12.743111 27.989333 5.688889 43.235556 5.688889 43.235556 13.198222 16.611556 33.450667-1.365333 33.450667-1.365334l12.060444-14.563555 8.192-9.102222 83.057778-100.124445c25.713778-31.175111-8.874667-57.344-8.874667-57.344zM178.858667 276.935111c-16.611556 0-29.809778 14.336-29.809778 31.857778s13.425778 31.857778 29.809778 31.857778h370.460444c16.611556 0 29.809778-14.336 29.809778-31.857778s-13.425778-31.857778-29.809778-31.857778H178.858667zM780.743111 435.313778c0-18.887111-19.569778-34.133333-43.463111-34.133334H198.428444c-24.120889 0-43.463111 15.246222-43.463111 34.133334s19.569778 34.133333 43.463111 34.133333h538.624c24.120889 0 43.690667-15.246222 43.690667-34.133333zM544.768 155.420444H174.307556c-16.611556 0-29.809778 14.336-29.809778 31.857778s13.425778 31.857778 29.809778 31.857778h370.460444c16.611556 0 29.809778-14.336 29.809778-31.857778 0.227556-17.521778-13.198222-31.857778-29.809778-31.857778zM427.804444 531.797333l-84.423111 84.423111-84.423111-84.423111H142.222222l142.677334 142.904889-142.677334 142.904889h116.736l84.423111-84.423111 84.423111 84.423111h116.963556l-142.904889-142.904889 142.904889-142.904889z" p-id="9500"></path></svg>

core/frontend/src/lang/en.js

@@ -1859,7 +1859,9 @@ export default {
     polynomial_regression: 'Polynomial regression',
     show_summary: 'Show summary',
     summary_label: 'Summary label',
-    tip: 'Tip'
+    tip: 'Tip',
+    pivot_export_empty_fields: 'Can not export without row dimension or quota',
+    export_formatted_excel: 'Export formatted excel'
   },
   dataset: {
     scope_edit: 'Effective only when editing',

core/frontend/src/lang/tw.js

@@ -1852,7 +1852,9 @@ export default {
     polynomial_regression: '多項式擬合',
     show_summary: '顯示總計',
     summary_label: '總計標籤',
-    tip: '提示'
+    tip: '提示',
+    pivot_export_empty_fields: '行維度或指標維度為空不可導出',
+    export_formatted_excel: '導出 Excel (帶格式)'
   },
   dataset: {
     scope_edit: '僅編輯時生效',

core/frontend/src/lang/zh.js

@@ -1849,7 +1849,9 @@ export default {
     polynomial_regression: '多项式拟合',
     show_summary: '显示总计',
     summary_label: '总计标签',
-    tip: '提示'
+    tip: '提示',
+    pivot_export_empty_fields: '行维度或指标维度为空不可导出',
+    export_formatted_excel: '导出 Excel (带格式)'
   },
   dataset: {
     goto: ', 前往 ',

core/frontend/src/store/modules/chart.js

@@ -5,7 +5,8 @@ const getDefaultState = () => {
     sceneId: {},
     viewId: null,
     tableId: {},
-    chartSceneData: {}
+    chartSceneData: {},
+    tableInstance: {}
   }
 }
 
@@ -29,6 +30,9 @@ const mutations = {
   },
   setChartSceneData: (state, chartSceneData) => {
     state.chartSceneData = chartSceneData
+  },
+  setTableInstance: (state, { viewId, tableInstance }) => {
+    state.tableInstance[viewId] = tableInstance
   }
 }
 
@@ -50,6 +54,9 @@ const actions = {
   },
   setChartSceneData: ({ commit }, chartSceneData) => {
     commit('setChartSceneData', chartSceneData)
+  },
+  setTableInstance: ({ commit }, { viewId, tableInstance }) => {
+    commit('setTableInstance', { viewId, tableInstance })
   }
 }
 

core/frontend/src/views/chart/chart/common/common_table.js

@@ -1,5 +1,9 @@
 import { hexColorToRGBA, resetRgbOpacity } from '@/views/chart/chart/util'
 import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
+import Exceljs from 'exceljs'
+import { saveAs } from 'file-saver'
+import i18n from '@/lang'
+import {Message} from "element-ui";
 
 export function getCustomTheme(chart) {
   const headerColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
@@ -292,3 +296,168 @@ export function getSize(chart) {
 
   return size
 }
+
+export async function exportPivotExcel(instance, chart) {
+  const { meta, fields } = instance.dataCfg
+  const rowLength = fields?.rows?.length || 0
+  const colLength = fields?.columns?.length || 0
+  const valueLength = fields?.values?.length || 0
+  if (!(rowLength && valueLength)) {
+    Message.warning({
+      message: i18n.t('chart.pivot_export_empty_fields'),
+      type: 'warning',
+      showClose: true,
+      duration: 5000
+    })
+    return
+  }
+  const workbook = new Exceljs.Workbook()
+  const worksheet = workbook.addWorksheet(chart.title)
+  const metaMap = meta?.reduce((p, n) => {
+    if (n.field) {
+      p[n.field] = n
+    }
+    return p
+  }, {})
+  // 角头
+  fields.columns?.forEach((column, index) => {
+    const cell = worksheet.getCell(index + 1, 1)
+    cell.value = metaMap[column]?.name ?? column
+    cell.alignment = { vertical: 'middle', horizontal: 'center' }
+    if (rowLength >= 2) {
+      worksheet.mergeCells(index + 1, 1, index + 1, rowLength)
+    }
+  })
+  fields?.rows?.forEach((row, index) => {
+    const cell = worksheet.getCell(colLength + 1, index + 1)
+    cell.value = metaMap[row]?.name ?? row
+    cell.alignment = { vertical: 'middle', horizontal: 'center' }
+  })
+  const { layoutResult } = instance.facet
+  // 行头
+  const { rowLeafNodes, rowsHierarchy, rowNodes } = layoutResult
+  const maxColIndex = rowsHierarchy.maxLevel + 1
+  const notLeafNodeHeightMap = {}
+  rowLeafNodes.forEach(node => {
+    // 行头的高度由子节点相加决定，也就是行头子节点中包含的叶子节点数量
+    let curNode = node.parent
+    while (curNode) {
+      const height = notLeafNodeHeightMap[curNode.id] ?? 0
+      notLeafNodeHeightMap[curNode.id] = height + 1
+      curNode = curNode.parent
+    }
+    const { rowIndex } = node
+    const writeRowIndex = rowIndex + 1 + colLength + 1
+    const writeColIndex = node.level + 1
+    const cell = worksheet.getCell(writeRowIndex, writeColIndex)
+    cell.value = node.label
+    cell.alignment = { vertical: 'middle', horizontal: 'center' }
+    if (writeColIndex < maxColIndex) {
+      worksheet.mergeCells(writeRowIndex, writeColIndex, writeRowIndex, maxColIndex)
+    }
+  })
+
+  const getNodeStartRowIndex = (node) => {
+    if (!node.children?.length) {
+      return node.rowIndex + 1
+    } else {
+      return getNodeStartRowIndex(node.children[0])
+    }
+  }
+  rowNodes?.forEach(node => {
+    if (node.isLeaf) {
+      return
+    }
+    const rowIndex = getNodeStartRowIndex(node)
+    const height = notLeafNodeHeightMap[node.id]
+    const writeRowIndex = rowIndex + colLength + 1
+    const mergeColCount = node.children[0].level - node.level
+    const value = node.label
+    const cell = worksheet.getCell(writeRowIndex, node.level + 1)
+    cell.value = value
+    cell.alignment = { vertical: 'middle', horizontal: 'center' }
+    if (mergeColCount > 1 || height > 1) {
+      worksheet.mergeCells(
+        writeRowIndex,
+        node.level + 1,
+        writeRowIndex + height - 1,
+        node.level + mergeColCount
+      )
+    }
+  })
+
+  // 列头
+  const { colLeafNodes, colNodes, colsHierarchy } = layoutResult
+  const maxColHeight = colsHierarchy.maxLevel + 1
+  const notLeafNodeWidthMap = {}
+  colLeafNodes.forEach(node => {
+    // 列头的宽度由子节点相加决定，也就是列头子节点中包含的叶子节点数量
+    let curNode = node.parent
+    while (curNode) {
+      const width = notLeafNodeWidthMap[curNode.id] ?? 0
+      notLeafNodeWidthMap[curNode.id] = width + 1
+      curNode = curNode.parent
+    }
+    const { colIndex } = node
+    const writeRowIndex = node.level + 1
+    const writeColIndex = colIndex + 1 + rowLength
+    const cell = worksheet.getCell(writeRowIndex, writeColIndex)
+    let value = node.label
+    if (node.field === '$$extra$$' && metaMap[value]?.name) {
+      value = metaMap[value].name
+    }
+    cell.value = value
+    cell.alignment = { vertical: 'middle', horizontal: 'center' }
+    if (writeRowIndex < maxColHeight) {
+      worksheet.mergeCells(writeRowIndex, writeColIndex, maxColHeight, writeColIndex)
+    }
+  })
+  const getNodeStartColIndex = (node) => {
+    if (!node.children?.length) {
+      return node.colIndex + 1
+    } else {
+      return getNodeStartColIndex(node.children[0])
+    }
+  }
+  colNodes.forEach(node => {
+    if (node.isLeaf) {
+      return
+    }
+    const colIndex = getNodeStartColIndex(node)
+    const width = notLeafNodeWidthMap[node.id]
+    const writeRowIndex = node.level + 1
+    const mergeRowCount = node.children[0].level - node.level
+    const value = node.label
+    const writeColIndex = colIndex + rowLength
+    const cell = worksheet.getCell(writeRowIndex, writeColIndex)
+    cell.value = value
+    cell.alignment = { vertical: 'middle', horizontal: 'center' }
+    if (mergeRowCount > 1 || width > 1) {
+      worksheet.mergeCells(
+        writeRowIndex,
+        writeColIndex,
+        writeRowIndex + mergeRowCount - 1,
+        writeColIndex + width - 1
+      )
+    }
+  })
+  //  单元格数据
+  for (let rowIndex = 0; rowIndex < rowLeafNodes.length; rowIndex++) {
+    for (let colIndex = 0; colIndex < colLeafNodes.length; colIndex++) {
+      const dataCellMeta = layoutResult.getCellMeta(rowIndex, colIndex)
+      const { fieldValue } = dataCellMeta
+      if (fieldValue) {
+        const meta = metaMap[dataCellMeta.valueField]
+        const cell = worksheet.getCell(rowIndex + maxColHeight + 1, rowLength + colIndex + 1)
+        const value = meta?.formatter?.(fieldValue) || fieldValue.toString()
+        cell.alignment = { vertical: 'middle', horizontal: 'center' }
+        cell.value = value
+      }
+    }
+  }
+  const buffer = await workbook.xlsx.writeBuffer()
+  const dataBlob = new Blob([buffer], {
+    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
+  })
+  saveAs(dataBlob, `${chart.title ?? '透视表'}.xlsx`)
+}

core/frontend/src/views/chart/components/ChartComponentS2.vue

@@ -308,6 +308,7 @@ export default {
         this.myChart = baseTableNormal(this.chartId, chart, this.antVAction, this.tableData, this, this.columnResize)
       } else if (chart.type === 'table-pivot') {
         this.myChart = baseTablePivot(this.chartId, chart, this.antVAction, this.tableHeaderClick, this.tableData)
+        this.$store.dispatch('chart/setTableInstance', { viewId: this.chart.id, tableInstance: this.myChart })
       }
 
       if (this.myChart && this.searchCount > 0) {