feat(视图):视图表格组件样式，支持'颜色'与'字体'属性修改

2021-04-26 15:20:55 +08:00 · 2021-04-26 15:20:55 +08:00 · a27e61aec2
commit a27e61aec2
parent 0c477f5bcf
5 changed files with 111 additions and 19 deletions
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -700,7 +700,13 @@ export default {
    rose_radius: '圆角',
    view_name: '视图名称',
    name_can_not_empty: '名称不能为空',
-    custom_count: '记录数'
+    custom_count: '记录数',
+    table_title_fontsize: '表头字体大小',
+    table_item_fontsize: '表格字体大小',
+    table_header_bg: '表头背景',
+    table_item_bg: '表格背景',
+    table_item_font_color: '字体颜色',
+    stripe: '斑马纹'
  },
  dataset: {
    datalist: '数据集',
--- a/frontend/src/views/chart/chart/chart.js
+++ b/frontend/src/views/chart/chart/chart.js
@ -1,7 +1,11 @@
 export const DEFAULT_COLOR_CASE = {
  value: 'default',
  colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
-  alpha: 100
+  alpha: 100,
+  tableHeaderBgColor: '#e8eaec',
+  tableItemBgColor: '#ffffff',
+  tableFontColor: '#606266',
+  tableStripe: true
 }
 export const DEFAULT_SIZE = {
  barDefault: true,
@ -18,7 +22,9 @@ export const DEFAULT_SIZE = {
  pieRoseType: 'radius',
  pieRoseRadius: 5,
  funnelWidth: 80,
-  radarShape: 'polygon'
+  radarShape: 'polygon',
+  tableTitleFontSize: 12,
+  tableItemFontSize: 12
 }
 export const DEFAULT_LABEL = {
  show: false,
--- a/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/ColorSelector.vue
@ -8,8 +8,8 @@
      >
        <el-col>
          <el-form ref="colorForm" :model="colorForm" label-width="80px" size="mini">
-            <el-form-item :label="$t('chart.color_case')" class="form-item">
-              <el-select v-model="colorForm.colorCase" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
+            <el-form-item v-if="chart.type && !chart.type.includes('table')" :label="$t('chart.color_case')" class="form-item">
+              <el-select v-model="colorForm.value" :placeholder="$t('chart.pls_slc_color_case')" size="mini" @change="changeColorCase">
                <el-option v-for="option in colorCases" :key="option.value" :label="option.name" :value="option.value" style="display: flex;align-items: center;">
                  <div style="float: left">
                    <span v-for="(c,index) in option.colors" :key="index" :style="{width: '20px',height: '20px',float: 'left',backgroundColor: c}" />
@ -18,6 +18,20 @@
                </el-option>
              </el-select>
            </el-form-item>
+
+            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_header_bg')" class="form-item">
+              <colorPicker v-model="colorForm.tableHeaderBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" @change="changeColorCase" />
+            </el-form-item>
+            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_bg')" class="form-item">
+              <colorPicker v-model="colorForm.tableItemBgColor" style="margin-top: 6px;cursor: pointer;z-index: 1003;border: solid 1px black" @change="changeColorCase" />
+            </el-form-item>
+            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.table_item_font_color')" class="form-item">
+              <colorPicker v-model="colorForm.tableFontColor" style="margin-top: 6px;cursor: pointer;z-index: 1002;border: solid 1px black" @change="changeColorCase" />
+            </el-form-item>
+            <el-form-item v-if="chart.type && chart.type.includes('table')" :label="$t('chart.stripe')" class="form-item">
+              <el-checkbox v-model="colorForm.tableStripe" @change="changeColorCase">{{ $t('chart.stripe') }}</el-checkbox>
+            </el-form-item>
+
            <el-form-item :label="$t('chart.not_alpha')" class="form-item form-item-slider">
              <el-slider v-model="colorForm.alpha" show-input :show-input-controls="false" input-size="mini" @change="changeColorCase" />
            </el-form-item>
@ -31,6 +45,8 @@
 </template>

 <script>
+import { DEFAULT_COLOR_CASE } from '../../chart/chart'
+
 export default {
  name: 'ColorSelector',
  props: {
@ -88,10 +104,7 @@ export default {
          colors: ['#05f8d6', '#0082fc', '#fdd845', '#22ed7c', '#09b0d3', '#1d27c9', '#f9e264', '#f47a75', '#009db2']
        }
      ],
-      colorForm: {
-        colorCase: 'default',
-        alpha: 100
-      }
+      colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE))
    }
  },
  watch: {
@ -101,8 +114,7 @@ export default {
        if (chart.customAttr) {
          const customAttr = JSON.parse(chart.customAttr)
          if (customAttr.color) {
-            this.colorForm.colorCase = customAttr.color.value
-            this.colorForm.alpha = customAttr.color.alpha
+            this.colorForm = customAttr.color
          }
        }
      }
@ -114,13 +126,12 @@ export default {
    changeColorCase() {
      const that = this
      const items = this.colorCases.filter(ele => {
-        return ele.value === that.colorForm.colorCase
-      })
-      this.$emit('onColorChange', {
-        value: items[0].value,
-        colors: items[0].colors,
-        alpha: this.colorForm.alpha
+        return ele.value === that.colorForm.value
      })
+      const val = JSON.parse(JSON.stringify(this.colorForm))
+      val.value = items[0].value
+      val.colors = items[0].colors
+      this.$emit('onColorChange', val)
    }
  }
 }
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@ -85,6 +85,19 @@
              </el-radio-group>
            </el-form-item>
          </el-form>
+
+          <el-form v-if="chart.type && chart.type.includes('table')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+            <el-form-item :label="$t('chart.table_title_fontsize')" class="form-item">
+              <el-select v-model="sizeForm.tableTitleFontSize" :placeholder="$t('chart.table_title_fontsize')" @change="changeBarSizeCase">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('chart.table_item_fontsize')" class="form-item">
+              <el-select v-model="sizeForm.tableItemFontSize" :placeholder="$t('chart.table_item_fontsize')" @change="changeBarSizeCase">
+                <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+              </el-select>
+            </el-form-item>
+          </el-form>
        </el-col>

        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.size') }}<i class="el-icon-setting el-icon--right" /></el-button>
@ -116,7 +129,8 @@ export default {
        { name: this.$t('chart.line_symbol_diamond'), value: 'diamond' },
        { name: this.$t('chart.line_symbol_pin'), value: 'pin' },
        { name: this.$t('chart.line_symbol_arrow'), value: 'arrow' }
-      ]
+      ],
+      fontSize: []
    }
  },
  watch: {
@ -133,8 +147,19 @@ export default {
    }
  },
  mounted() {
+    this.init()
  },
  methods: {
+    init() {
+      const arr = []
+      for (let i = 10; i <= 30; i = i + 2) {
+        arr.push({
+          name: i + '',
+          value: i + ''
+        })
+      }
+      this.fontSize = arr
+    },
    changeBarSizeCase() {
      this.$emit('onSizeChange', this.sizeForm)
    }
--- a/frontend/src/views/chart/components/table/TableNormal.vue
+++ b/frontend/src/views/chart/components/table/TableNormal.vue
@ -8,6 +8,9 @@
      :height="height"
      :checkbox-config="{highlight: true}"
      :width-resize="true"
+      :header-row-style="table_header_class"
+      :row-style="getRowStyle"
+      class="table-class"
    >
      <ux-table-column
        v-for="field in fields"
@ -59,6 +62,21 @@ export default {
      bg_class: {
        background: hexColorToRGBA('#ffffff', 0)
      },
+      table_header_class: {
+        fontSize: '12px',
+        color: '#606266',
+        background: '#e8eaec'
+      },
+      table_item_class: {
+        fontSize: '12px',
+        color: '#606266',
+        background: '#ffffff'
+      },
+      table_item_class_stripe: {
+        fontSize: '12px',
+        color: '#606266',
+        background: '#ffffff'
+      },
      title_show: true
    }
  },
@ -91,6 +109,23 @@ export default {
      }, 100)
    },
    initStyle() {
+      if (this.chart.customAttr) {
+        const customAttr = JSON.parse(this.chart.customAttr)
+        if (customAttr.color) {
+          this.table_header_class.color = customAttr.color.tableFontColor
+          this.table_header_class.background = hexColorToRGBA(customAttr.color.tableHeaderBgColor, customAttr.color.alpha)
+          this.table_item_class.color = customAttr.color.tableFontColor
+          this.table_item_class.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha)
+        }
+        if (customAttr.size) {
+          this.table_header_class.fontSize = customAttr.size.tableTitleFontSize + 'px'
+          this.table_item_class.fontSize = customAttr.size.tableItemFontSize + 'px'
+        }
+        this.table_item_class_stripe = JSON.parse(JSON.stringify(this.table_item_class))
+        if (customAttr.color.tableStripe) {
+          this.table_item_class_stripe.background = hexColorToRGBA(customAttr.color.tableItemBgColor, customAttr.color.alpha - 40)
+        }
+      }
      if (this.chart.customStyle) {
        const customStyle = JSON.parse(this.chart.customStyle)
        if (customStyle.text) {
@ -104,11 +139,20 @@ export default {
          this.bg_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
        }
      }
+    },
+    getRowStyle({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        return this.table_item_class_stripe
+      } else {
+        return this.table_item_class
+      }
    }
  }
 }
 </script>

 <style scoped>
-
+  .table-class>>>.body--wrapper{
+    background: rgba(1,1,1,0);
+  }
 </style>