Merge pull request #1774 from dataease/pr@dev@feat_s2

frontend/src/lang/en.js

@@ -1023,7 +1023,8 @@ export default {
     table_column_custom: 'Custom',
     chart_table_pivot: 'Pivot Table',
     table_pivot_row: 'Data Row',
-    field_error_tips: 'This field is changed(Include dimension、quota，field type，deleted),please edit again.'
+    field_error_tips: 'This field is changed(Include dimension、quota，field type，deleted),please edit again.',
+    table_border_color: 'Border Color'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -1023,7 +1023,8 @@ export default {
     table_column_custom: '自定義',
     chart_table_pivot: '透視表',
     table_pivot_row: '數據行',
-    field_error_tips: '該字段所對應的數據集原始字段發生變更（包括維度、指標，字段類型，字段被刪除等），建議重新編輯'
+    field_error_tips: '該字段所對應的數據集原始字段發生變更（包括維度、指標，字段類型，字段被刪除等），建議重新編輯',
+    table_border_color: '邊框顏色'
   },
   dataset: {
     sheet_warn: '有多個 Sheet 頁，默認抽取第一個',

frontend/src/lang/zh.js

@@ -1025,7 +1025,8 @@ export default {
     table_column_custom: '自定义',
     chart_table_pivot: '透视表',
     table_pivot_row: '数据行',
-    field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑'
+    field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑',
+    table_border_color: '边框颜色'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

frontend/src/views/chart/chart/chart.js

@@ -2,12 +2,13 @@ export const DEFAULT_COLOR_CASE = {
   value: 'default',
   colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
   alpha: 100,
-  tableHeaderBgColor: '#c1d1f6',
-  tableItemBgColor: '#e2eafe',
+  tableHeaderBgColor: '#e1eaff',
+  tableItemBgColor: '#ffffff',
   tableFontColor: '#000000',
   tableStripe: true,
   dimensionColor: '#000000',
-  quotaColor: '#000000'
+  quotaColor: '#000000',
+  tableBorderColor: '#cfdaf4'
 }
 export const DEFAULT_SIZE = {
   barDefault: true,

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

@@ -2,13 +2,22 @@ import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { DEFAULT_COLOR_CASE, DEFAULT_SIZE } from '@/views/chart/chart/chart'
 
 export function getCustomTheme(chart) {
+  const headerColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
+  const itemColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
+  const borderColor = hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, DEFAULT_COLOR_CASE.alpha)
   const theme = {
     background: {
       color: '#00000000'
     },
+    splitLine: {
+      horizontalBorderColor: borderColor,
+      verticalBorderColor: borderColor
+    },
     cornerCell: {
       cell: {
-        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
+        backgroundColor: headerColor,
+        horizontalBorderColor: borderColor,
+        verticalBorderColor: borderColor
       },
       text: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
@@ -21,7 +30,9 @@ export function getCustomTheme(chart) {
     },
     rowCell: {
       cell: {
-        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
+        backgroundColor: headerColor,
+        horizontalBorderColor: borderColor,
+        verticalBorderColor: borderColor
       },
       text: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
@@ -34,7 +45,9 @@ export function getCustomTheme(chart) {
     },
     colCell: {
       cell: {
-        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableHeaderBgColor, DEFAULT_COLOR_CASE.alpha)
+        backgroundColor: headerColor,
+        horizontalBorderColor: borderColor,
+        verticalBorderColor: borderColor
       },
       text: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
@@ -47,7 +60,9 @@ export function getCustomTheme(chart) {
     },
     dataCell: {
       cell: {
-        backgroundColor: hexColorToRGBA(DEFAULT_COLOR_CASE.tableItemBgColor, DEFAULT_COLOR_CASE.alpha)
+        backgroundColor: itemColor,
+        horizontalBorderColor: borderColor,
+        verticalBorderColor: borderColor
       },
       text: {
         fill: DEFAULT_COLOR_CASE.tableFontColor,
@@ -62,17 +77,33 @@ export function getCustomTheme(chart) {
     // color
     if (customAttr.color) {
       const c = JSON.parse(JSON.stringify(customAttr.color))
-      theme.cornerCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
+      const h_c = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
+      const i_c = hexColorToRGBA(c.tableItemBgColor, c.alpha)
+      const b_c = c.tableBorderColor ? hexColorToRGBA(c.tableBorderColor, c.alpha) : hexColorToRGBA(DEFAULT_COLOR_CASE.tableBorderColor, c.alpha)
+      theme.splitLine.horizontalBorderColor = b_c
+      theme.splitLine.verticalBorderColor = b_c
+
+      theme.cornerCell.cell.backgroundColor = h_c
+      theme.cornerCell.cell.horizontalBorderColor = b_c
+      theme.cornerCell.cell.verticalBorderColor = b_c
       theme.cornerCell.bolderText.fill = c.tableFontColor
       theme.cornerCell.text.fill = c.tableFontColor
-      theme.rowCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
+
+      theme.rowCell.cell.backgroundColor = h_c
+      theme.rowCell.cell.horizontalBorderColor = b_c
+      theme.rowCell.cell.verticalBorderColor = b_c
       theme.rowCell.bolderText.fill = c.tableFontColor
       theme.rowCell.text.fill = c.tableFontColor
-      theme.colCell.cell.backgroundColor = hexColorToRGBA(c.tableHeaderBgColor, c.alpha)
+
+      theme.colCell.cell.backgroundColor = h_c
+      theme.colCell.cell.horizontalBorderColor = b_c
+      theme.colCell.cell.verticalBorderColor = b_c
       theme.colCell.bolderText.fill = c.tableFontColor
       theme.colCell.text.fill = c.tableFontColor
 
-      theme.dataCell.cell.backgroundColor = hexColorToRGBA(c.tableItemBgColor, c.alpha)
+      theme.dataCell.cell.backgroundColor = i_c
+      theme.dataCell.cell.horizontalBorderColor = b_c
+      theme.dataCell.cell.verticalBorderColor = b_c
       theme.dataCell.text.fill = c.tableFontColor
     }
     // size

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

@@ -135,7 +135,7 @@ export default {
   methods: {
     initData() {
       let datas = []
-      if (this.chart.data) {
+      if (this.chart.data && this.chart.data.fields) {
         this.fields = JSON.parse(JSON.stringify(this.chart.data.fields))
         const attr = JSON.parse(this.chart.customAttr)
         this.currentPage.pageSize = parseInt(attr.size.tablePageSize ? attr.size.tablePageSize : 20)

frontend/src/views/chart/components/shape-attr/ColorSelector.vue

@@ -63,6 +63,9 @@
           <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_item_font_color')" class="form-item">
             <el-color-picker v-model="colorForm.tableFontColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
           </el-form-item>
+          <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.table_border_color')" class="form-item">
+            <el-color-picker v-model="colorForm.tableBorderColor" class="color-picker-style" :predefine="predefineColors" @change="changeColorCase" />
+          </el-form-item>
           <!--              暂时不支持该功能-->
           <!--              <el-form-item v-show="(chart.type && chart.type.includes('table')) || sourceType==='panelTable'" :label="$t('chart.stripe')" class="form-item">-->
           <!--                <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>-->
@@ -240,6 +243,8 @@ export default {
             this.customColor = this.colorForm.colors[0]
             this.colorIndex = 0
           }
+
+          this.colorForm.tableBorderColor = this.colorForm.tableBorderColor ? this.colorForm.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
         }
       }
     },