Merge pull request #8474 from dataease/pr@dev-v2@fix_table_http_copy

fix(图表): 修复表格在 http 环境下无法复制

core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts

@@ -1,4 +1,4 @@
-import { hexColorToRGBA, parseJson, resetRgbOpacity } from '../..//util'
+import { copyString, hexColorToRGBA, parseJson, resetRgbOpacity } from '../..//util'
 import {
   DEFAULT_BASIC_STYLE,
   DEFAULT_TABLE_CELL,
@@ -677,7 +677,7 @@ export function configTooltip(option: S2Options) {
   ]
 }
 
-export function copyContent(s2Instance, event, fieldMap) {
+export function copyContent(s2Instance, event, fieldMeta) {
   event.preventDefault()
   const cell = s2Instance.getCell(event.target)
   const valueField = cell.getMeta().valueField
@@ -686,19 +686,23 @@ export function copyContent(s2Instance, event, fieldMap) {
   // 单元格
   if (cellMeta?.data) {
     const value = cellMeta.data[valueField]
-    const metaObj = find(fieldMap, m => m.field === valueField)
+    const metaObj = find(fieldMeta, m => m.field === valueField)
     content = value?.toString()
     if (metaObj) {
       content = metaObj.formatter(value)
     }
   } else {
     // 列头&行头
+    const fieldMap = fieldMeta?.reduce((p, n) => {
+      p[n.field] = n.name
+      return p
+    }, {})
     content = cellMeta.value
     if (fieldMap?.[content]) {
       content = fieldMap[content]
     }
   }
   if (content) {
-    navigator.clipboard.writeText(content)
+    copyString(content, true)
   }
 }

core/core-frontend/src/views/chart/components/js/util.ts

@@ -8,7 +8,9 @@ import { toRaw } from 'vue'
 import { Options } from '@antv/g2plot/esm'
 import { PickOptions } from '@antv/g2plot/esm/core/plot'
 import { innerExportDetails } from '@/api/chart'
-
+import { ElMessage } from 'element-plus-secondary'
+import { useI18n } from '@/hooks/web/useI18n'
+const { t } = useI18n()
 // 同时支持将hex和rgb，转换成rgba
 export function hexColorToRGBA(hex, alpha) {
   let rgb = [] // 定义rgb数组
@@ -39,7 +41,7 @@ export function hexColorToRGBA(hex, alpha) {
 
 export function digToHex(dig) {
   let prefix = ''
-  const num = parseInt(dig * 2.55)
+  const num = parseInt((dig * 2.55).toString())
   if (num < 16) {
     prefix = '0'
   }
@@ -182,7 +184,7 @@ export function getColors(chart, colors, reset) {
     if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
       sc = JSON.parse(JSON.stringify(chart.customAttr)).color.seriesColors
     } else {
-      sc = JSON.parse(chart.customAttr).color.seriesColors
+      sc = JSON.parse(chart.customAttr)['color'].seriesColors
     }
     if (sc && sc.length > 0) {
       seriesColors = customColor(sc, seriesColors)
@@ -215,7 +217,7 @@ export function antVCustomColor(chart) {
 }
 
 export function getRemark(chart) {
-  const remark = {}
+  const remark = {} as any
   if (chart.customStyle) {
     const customStyle = JSON.parse(JSON.stringify(chart.customStyle))
     if (customStyle.text) {
@@ -474,3 +476,26 @@ export const exportExcelDownload = chart => {
       console.error('Excel download error')
     })
 }
+
+export const copyString = (content: string, notify = false) => {
+  const clipboard = navigator.clipboard || {
+    writeText: data => {
+      return new Promise(resolve => {
+        const inputDom = document.createElement('input')
+        inputDom.setAttribute('style', 'z-index: -1;position: fixed;opacity: 0;')
+        inputDom.setAttribute('type', 'text')
+        inputDom.setAttribute('value', data)
+        document.body.appendChild(inputDom)
+        inputDom.select()
+        document.execCommand('copy')
+        inputDom.remove()
+        resolve()
+      })
+    }
+  }
+  clipboard.writeText(content).then(() => {
+    if (notify) {
+      ElMessage.success(t('commons.copy_success'))
+    }
+  })
+}