Merge pull request #4731 from dataease/pr@dev@feat_table

feat(视图): echarts表格支持设置边框颜色、自动换行

frontend/src/lang/en.js

@@ -1516,7 +1516,10 @@ export default {
     p_right: 'Right',
     p_top: 'Top',
     p_bottom: 'Bottom',
-    p_center: 'Center'
+    p_center: 'Center',
+    table_auto_break_line: 'Auto Line Feed',
+    table_break_line_tip: 'If open this option,the table item height will disabled.',
+    step: 'Step(px)'
   },
   dataset: {
     scope_edit: 'Effective only when editing',

frontend/src/lang/tw.js

@@ -1510,7 +1510,10 @@ export default {
     p_right: '右對齊',
     p_top: '上對齊',
     p_bottom: '下對齊',
-    p_center: '居中'
+    p_center: '居中',
+    table_auto_break_line: '自動換行',
+    table_break_line_tip: '開啟自動換行，表格行高設置將失效',
+    step: '步長(px)'
   },
   dataset: {
     scope_edit: '僅編輯時生效',

frontend/src/lang/zh.js

@@ -1509,7 +1509,10 @@ export default {
     p_right: '右对齐',
     p_top: '上对齐',
     p_bottom: '下对齐',
-    p_center: '居中'
+    p_center: '居中',
+    table_auto_break_line: '自动换行',
+    table_break_line_tip: '开启自动换行，表格行高设置将失效',
+    step: '步长(px)'
   },
   dataset: {
     scope_edit: '仅编辑时生效',

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

@@ -77,6 +77,7 @@ export const DEFAULT_SIZE = {
   tableColumnWidth: 100,
   tableHeaderAlign: 'left',
   tableItemAlign: 'right',
+  tableAutoBreakLine: false,
   gaugeMinType: 'fix', // fix or dynamic
   gaugeMinField: {
     id: '',
@@ -462,7 +463,8 @@ export const DEFAULT_THRESHOLD = {
 export const DEFAULT_SCROLL = {
   open: false,
   row: 1,
-  interval: 2000
+  interval: 2000,
+  step: 50
 }
 // chart config
 export const BASE_BAR = {

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

@@ -1847,6 +1847,7 @@ export const TYPE_CONFIGS = [
         'tableItemBgColor',
         'tableHeaderFontColor',
         'tableFontColor',
+        'tableBorderColor',
         'tableScrollBarColor',
         'alpha'
       ],
@@ -1857,7 +1858,8 @@ export const TYPE_CONFIGS = [
         'tableItemHeight',
         'tableColumnWidth',
         'showIndex',
-        'indexLabel'
+        'indexLabel',
+        'tableAutoBreakLine'
       ],
       'title-selector': [
         'show',
@@ -1887,6 +1889,7 @@ export const TYPE_CONFIGS = [
         'tableItemBgColor',
         'tableHeaderFontColor',
         'tableFontColor',
+        'tableBorderColor',
         'tableScrollBarColor',
         'alpha'
       ],
@@ -1899,7 +1902,8 @@ export const TYPE_CONFIGS = [
         'tableItemHeight',
         'tableColumnWidth',
         'showIndex',
-        'indexLabel'
+        'indexLabel',
+        'tableAutoBreakLine'
       ],
       'title-selector': [
         'show',

frontend/src/views/chart/components/senior/ScrollCfg.vue

@@ -31,6 +31,7 @@
         </el-form-item>
         <span v-show="scrollForm.open">
           <el-form-item
+            v-show="!isAutoBreakLine"
             :label="$t('chart.row')"
             class="form-item"
           >
@@ -43,6 +44,20 @@
               @change="changeScrollCfg"
             />
           </el-form-item>
+          <el-form-item
+            v-show="isAutoBreakLine"
+            :label="$t('chart.step')"
+            class="form-item"
+          >
+            <el-input-number
+              v-model="scrollForm.step"
+              :min="1"
+              :max="10000"
+              :precision="0"
+              size="mini"
+              @change="changeScrollCfg"
+            />
+          </el-form-item>
           <el-form-item
             :label="$t('chart.interval') + '(ms)'"
             class="form-item"
@@ -63,7 +78,7 @@
 </template>
 
 <script>
-import { DEFAULT_SCROLL } from '@/views/chart/chart/chart'
+import { DEFAULT_SCROLL, DEFAULT_SIZE } from '@/views/chart/chart/chart'
 
 export default {
   name: 'ScrollCfg',
@@ -75,7 +90,8 @@ export default {
   },
   data() {
     return {
-      scrollForm: JSON.parse(JSON.stringify(DEFAULT_SCROLL))
+      scrollForm: JSON.parse(JSON.stringify(DEFAULT_SCROLL)),
+      isAutoBreakLine: false
     }
   },
   watch: {
@@ -100,10 +116,26 @@ export default {
         }
         if (senior.scrollCfg) {
           this.scrollForm = senior.scrollCfg
+          this.scrollForm.step = senior.scrollCfg.step ? senior.scrollCfg.step : DEFAULT_SCROLL.step
         } else {
           this.scrollForm = JSON.parse(JSON.stringify(DEFAULT_SCROLL))
         }
       }
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.size) {
+          if (this.chart.render === 'antv') {
+            this.isAutoBreakLine = false
+          } else {
+            this.isAutoBreakLine = customAttr.size.tableAutoBreakLine ? customAttr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
+          }
+        }
+      }
     },
     changeScrollCfg() {
       this.$emit('onScrollCfgChange', this.scrollForm)

frontend/src/views/chart/components/shapeAttr/SizeSelector.vue

@@ -283,6 +283,30 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item
+          v-show="showProperty('tableAutoBreakLine')"
+          label-width="100px"
+          :label="$t('chart.table_auto_break_line')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.tableAutoBreakLine"
+            @change="changeBarSizeCase('tableAutoBreakLine')"
+          >{{ $t('chart.open') }}</el-checkbox>
+          <el-tooltip
+            class="item"
+            effect="dark"
+            placement="bottom"
+          >
+            <div slot="content">
+              {{ $t('chart.table_break_line_tip') }}
+            </div>
+            <i
+              class="el-icon-info"
+              style="cursor: pointer;color: gray;font-size: 12px;"
+            />
+          </el-tooltip>
+        </el-form-item>
         <el-form-item
           v-show="showProperty('tableTitleFontSize')"
           label-width="100px"
@@ -345,6 +369,7 @@
         >
           <el-slider
             v-model="sizeForm.tableItemHeight"
+            :disabled="sizeForm.tableAutoBreakLine"
             :min="36"
             :max="100"
             show-input
@@ -1127,6 +1152,8 @@ export default {
 
           this.sizeForm.hPosition = this.sizeForm.hPosition ? this.sizeForm.hPosition : DEFAULT_SIZE.hPosition
           this.sizeForm.vPosition = this.sizeForm.vPosition ? this.sizeForm.vPosition : DEFAULT_SIZE.vPosition
+
+          this.sizeForm.tableAutoBreakLine = this.sizeForm.tableAutoBreakLine ? this.sizeForm.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
         }
       }
     },

frontend/src/views/chart/components/table/TableNormal.vue

@@ -4,7 +4,10 @@
     :style="bg_class"
     style="padding: 8px;width: 100%;height: 100%;overflow: hidden;"
   >
-    <el-row style="height: 100%;">
+    <el-row
+      style="height: 100%;"
+      :style="cssVars"
+    >
       <p
         v-show="title_show"
         ref="title"
@@ -93,7 +96,7 @@
 <script>
 import { hexColorToRGBA } from '../../chart/util'
 import eventBus from '@/components/canvas/utils/eventBus'
-import { DEFAULT_COLOR_CASE, DEFAULT_SIZE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
+import { DEFAULT_COLOR_CASE, DEFAULT_SCROLL, DEFAULT_SIZE, NOT_SUPPORT_PAGE_DATASET } from '@/views/chart/chart/chart'
 import { mapState } from 'vuex'
 import DePagination from '@/components/deCustomCm/pagination.js'
 
@@ -178,7 +181,13 @@ export default {
         color: '#606266'
       },
       not_support_page_dataset: NOT_SUPPORT_PAGE_DATASET,
-      mergeCells: []
+      mergeCells: [],
+      cssStyleParams: {
+        borderColor: DEFAULT_COLOR_CASE.tableBorderColor,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      }
     }
   },
   computed: {
@@ -208,7 +217,16 @@ export default {
     },
     ...mapState([
       'previewCanvasScale'
-    ])
+    ]),
+    cssVars() {
+      return {
+        '--color': this.cssStyleParams.borderColor,
+        '--overflow': this.cssStyleParams.overflow,
+        '--text-overflow': this.cssStyleParams.textOverflow,
+        '--white-space': this.cssStyleParams.whiteSpace
+      }
+    }
+
   },
   watch: {
     chart: function() {
@@ -329,6 +347,7 @@ export default {
     calcHeightRightNow() {
       this.$nextTick(() => {
         if (this.$refs.tableContainer) {
+          const attr = JSON.parse(this.chart.customAttr)
           let pageHeight = 0
           if (this.showPage) {
             pageHeight = 36
@@ -338,23 +357,32 @@ export default {
           let tableHeight
           if (this.chart.data) {
             if (this.chart.type === 'table-info') {
-              tableHeight = (this.currentPage.pageSize + 2) * 36 - pageHeight
+              if (this.showPage) {
+                tableHeight = this.currentPage.pageSize * attr.size.tableItemHeight + attr.size.tableTitleHeight
+              } else {
+                tableHeight = this.chart.data.tableRow.length * attr.size.tableItemHeight + attr.size.tableTitleHeight
+              }
             } else if (this.chart.data.detailFields?.length) {
               let rowLength = 0
               this.chart.data.tableRow.forEach(row => {
                 rowLength += (row?.details?.length || 1)
               })
-              tableHeight = (rowLength + 2) * 36 - pageHeight
+              tableHeight = rowLength * attr.size.tableItemHeight + 2 * attr.size.tableTitleHeight
             } else {
-              tableHeight = (this.chart.data.tableRow.length + 2) * 36 - pageHeight
+              tableHeight = this.chart.data.tableRow.length * attr.size.tableItemHeight + 2 * attr.size.tableTitleHeight
             }
           } else {
             tableHeight = 0
           }
-          if (tableHeight > tableMaxHeight) {
+          const breakLine = attr.size.tableAutoBreakLine ? attr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
+          if (breakLine) {
             this.height = tableMaxHeight + 'px'
           } else {
-            this.height = 'auto'
+            if (tableHeight > tableMaxHeight) {
+              this.height = tableMaxHeight + 'px'
+            } else {
+              this.height = 'auto'
+            }
           }
 
           if (this.enableScroll) {
@@ -379,6 +407,7 @@ export default {
           this.table_item_class.color = customAttr.color.tableFontColor
           this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha)
           this.scrollBarColor = customAttr.color.tableScrollBarColor ? customAttr.color.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
+          this.cssStyleParams.borderColor = customAttr.color.tableBorderColor ? customAttr.color.tableBorderColor : DEFAULT_COLOR_CASE.tableBorderColor
         }
         if (customAttr.size) {
           this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px'
@@ -400,6 +429,17 @@ export default {
           } else {
             this.indexLabel = customAttr.size.indexLabel
           }
+
+          const autoBreakLine = customAttr.size.tableAutoBreakLine ? customAttr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
+          if (autoBreakLine) {
+            this.cssStyleParams.overflow = 'hidden'
+            this.cssStyleParams.textOverflow = 'auto'
+            this.cssStyleParams.whiteSpace = 'normal'
+          } else {
+            this.cssStyleParams.overflow = 'hidden'
+            this.cssStyleParams.textOverflow = 'ellipsis'
+            this.cssStyleParams.whiteSpace = 'nowrap'
+          }
         }
         this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
         // 暂不支持斑马纹
@@ -552,8 +592,18 @@ export default {
         if (rowHeight < 36) {
           rowHeight = 36
         }
+
+        const attr = JSON.parse(this.chart.customAttr)
+        const breakLine = attr.size.tableAutoBreakLine ? attr.size.tableAutoBreakLine : DEFAULT_SIZE.tableAutoBreakLine
+
         this.scrollTimer = setInterval(() => {
-          const top = rowHeight * senior.scrollCfg.row
+          let top = 0
+          if (breakLine) {
+            top = senior.scrollCfg.step ? senior.scrollCfg.step : DEFAULT_SCROLL.step
+          } else {
+            top = rowHeight * senior.scrollCfg.row
+          }
+
           if (scrollContainer.clientHeight + scrollContainer.scrollTop < scrollContainer.scrollHeight) {
             this.scrollTop += top
           } else {
@@ -628,4 +678,32 @@ export default {
 .table-class{
   scrollbar-color: var(--scroll-bar-color) transparent;
 }
+
+.table-class {
+  ::v-deep .elx-table.border--full .elx-body--column,
+  ::v-deep .elx-table.border--full .elx-footer--column,
+  ::v-deep .elx-table.border--full .elx-header--column {
+    background-image: linear-gradient(var(--color, #e8eaec), var(--color, #e8eaec)), linear-gradient(var(--color, #e8eaec), var(--color, #e8eaec)) !important;
+  }
+  ::v-deep .elx-table--border-line {
+    border: 1px solid var(--color, #e8eaec) !important;
+  }
+  ::v-deep .elx-table .elx-table--header-wrapper .elx-table--header-border-line {
+    border-bottom: 1px solid var(--color, #e8eaec) !important;
+  }
+  ::v-deep .elx-table .elx-table--footer-wrapper {
+    border-top: 1px solid var(--color, #e8eaec) !important;
+  }
+  ::v-deep .elx-checkbox .elx-checkbox--label,
+  ::v-deep .elx-radio .elx-radio--label,
+  ::v-deep .elx-radio-button .elx-radio--label,
+  ::v-deep .elx-table .elx-body--column.col--ellipsis:not(.col--actived) > .elx-cell,
+  ::v-deep .elx-table .elx-footer--column.col--ellipsis:not(.col--actived) > .elx-cell,
+  ::v-deep .elx-table .elx-header--column.col--ellipsis:not(.col--actived) > .elx-cell{
+    overflow: var(--overflow, 'hidden');
+    text-overflow: var(--text-overflow, 'ellipsis');
+    white-space: var(--white-space, 'nowrap');
+  }
+}
+
 </style>