fix: 主题设置表格样式跟随问题

2021-06-17 18:21:13 +08:00 · 2021-06-17 18:21:13 +08:00 · f2f698b2d1
commit f2f698b2d1
parent 73d311e99f
6 changed files with 54 additions and 22 deletions
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@ -68,6 +68,7 @@ export default {
        title: '',
        customAttr: JSON.stringify({
          color: DEFAULT_COLOR_CASE,
+          tableColor: DEFAULT_COLOR_CASE,
          size: DEFAULT_SIZE,
          label: DEFAULT_LABEL,
          tooltip: DEFAULT_TOOLTIP
@ -148,7 +149,11 @@ export default {
        // 组件样式-背景设置
        customStyleChart.background = customStylePanel.background
        // 图形属性-颜色设置
-        customAttrChart.color = customAttrPanel.color
+        if (this.chart.type.includes('table')) {
+          customAttrChart.color = customAttrPanel.tableColor
+        } else {
+          customAttrChart.color = customAttrPanel.color
+        }

        this.chart = {
          ...this.chart,
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@ -578,6 +578,7 @@ export default {
      view.type = 'bar'
      view.customAttr = JSON.stringify({
        color: DEFAULT_COLOR_CASE,
+        tableColor: DEFAULT_COLOR_CASE,
        size: DEFAULT_SIZE,
        label: DEFAULT_LABEL,
        tooltip: DEFAULT_TOOLTIP
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
@ -57,6 +57,7 @@
 <script>
 import { chartTransStr2Object } from '@/views/panel/panel'
 import { mapState } from 'vuex'
+import bus from '@/utils/bus'

 export default {
  name: 'StyleTemplateItem',
@ -131,8 +132,8 @@ export default {
      let style = {}
      if (this.subjectItemDetails) {
        style = {
-          opacity: this.subjectItemDetails.chart.customAttr.color.alpha / 100,
-          background: this.subjectItemDetails.chart.customAttr.color.tableHeaderBgColor
+          opacity: this.subjectItemDetails.chart.customAttr.tableColor.alpha / 100,
+          background: this.subjectItemDetails.chart.customAttr.tableColor.tableHeaderBgColor
        }
      }
      return style
@ -141,7 +142,7 @@ export default {
      let style = {}
      if (this.subjectItemDetails) {
        style = {
-          background: this.subjectItemDetails.chart.customAttr.color.tableFontColor
+          background: this.subjectItemDetails.chart.customAttr.tableColor.tableFontColor
        }
      }
      return style
@ -189,6 +190,7 @@ export default {
    subjectChange() {
      this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
      this.$store.commit('recordSnapshot')
+      bus.$emit('onSubjectChange')
    },
    templateEdit() {
      this.$emit('templateEdit', this.template)
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@ -6,7 +6,7 @@
      <slider />
    </div>
    <!--折叠面板-->
-    <div style="margin: 10px;overflow-y: auto">
+    <div v-if="collapseShow" style="margin: 10px;overflow-y: auto">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item :title="$t('panel.panel')" name="panel">
          <el-row style="background-color: #f7f8fa; margin: 5px">
@ -16,7 +16,7 @@
        </el-collapse-item>
        <el-collapse-item :title="$t('chart.module_style')" name="component">
          <el-row style="background-color: #f7f8fa; margin: 5px">
-<!--            <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
+            <!--            <title-selector class="attr-selector" :chart="chart" @onTextChange="onTextChange" />-->
            <background-color-selector class="attr-selector" :chart="chart" @onChangeBackgroundForm="onChangeBackgroundForm" />
          </el-row>
        </el-collapse-item>
@ -27,7 +27,7 @@
        </el-collapse-item>
        <el-collapse-item :title="$t('panel.table')" name="table">
          <el-row style="background-color: #f7f8fa; margin: 5px">
-            <color-selector :source-type="'panelTable'" class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
+            <color-selector v-if="tableChart" :source-type="'panelTable'" class="attr-selector" :chart="tableChart" @onColorChange="onTableColorChange" />
          </el-row>
        </el-collapse-item>
      </el-collapse>
@ -41,10 +41,10 @@ import BackgroundSelector from './PanelStyle/BackgroundSelector'
 import ComponentGap from './PanelStyle/ComponentGap'

 import ColorSelector from '@/views/chart/components/shape-attr/ColorSelector'
-import TitleSelector from '@/views/chart/components/component-style/TitleSelector'
 import BackgroundColorSelector from '@/views/chart/components/component-style/BackgroundColorSelector'
 import { mapState } from 'vuex'
 import { deepCopy } from '@/components/canvas/utils/utils'
+import bus from '@/utils/bus'

 export default {
  components: {
@ -52,14 +52,15 @@ export default {
    BackgroundSelector,
    ComponentGap,
    ColorSelector,
-    TitleSelector,
    BackgroundColorSelector
  },
  data() {
    return {
      panelInfo: this.$store.state.panel.panelInfo,
      activeNames: ['panel'],
-      chart: null
+      chart: null,
+      tableChart: null,
+      collapseShow: true
    }
  },
  computed: mapState([
@ -68,22 +69,38 @@ export default {

  watch: {
  },
+
+  mounted() {
+    bus.$on('onSubjectChange', () => {
+      this.collapseShow = false
+      this.$nextTick(() => (this.collapseShow = true))
+    })
+  },
  created() {
-    // 初始化赋值
-    const chart = deepCopy(this.canvasStyleData.chart)
-    if (chart.xaxis) {
-      chart.xaxis = JSON.parse(chart.xaxis)
-    }
-    if (chart.yaxis) {
-      chart.yaxis = JSON.parse(chart.yaxis)
-    }
-    chart.customAttr = JSON.parse(chart.customAttr)
-    chart.customStyle = JSON.parse(chart.customStyle)
-    chart.customFilter = JSON.parse(chart.customFilter)
-    this.chart = chart
+    debugger
+    this.init()
  },

  methods: {
+
+    init() {
+      // 初始化赋值
+      const chart = deepCopy(this.canvasStyleData.chart)
+      if (chart.xaxis) {
+        chart.xaxis = JSON.parse(chart.xaxis)
+      }
+      if (chart.yaxis) {
+        chart.yaxis = JSON.parse(chart.yaxis)
+      }
+      chart.customAttr = JSON.parse(chart.customAttr)
+      chart.customStyle = JSON.parse(chart.customStyle)
+      chart.customFilter = JSON.parse(chart.customFilter)
+      this.chart = chart
+
+      // 因为 table 的color 设置和view的共用 所以单独设置一个对象
+      this.tableChart = deepCopy(this.chart)
+      this.tableChart.customAttr.color = this.tableChart.customAttr.tableColor
+    },
    handleChange(val) {
      // console.log(val)
    },
@ -94,6 +111,10 @@ export default {
      this.chart.customAttr.color = val
      this.save()
    },
+    onTableColorChange(val) {
+      this.chart.customAttr.tableColor = val
+      this.save()
+    },
    onTextChange(val) {
      this.chart.customStyle.text = val
      this.save()
--- a/frontend/src/views/panel/list/PanelList.vue
+++ b/frontend/src/views/panel/list/PanelList.vue
@ -234,6 +234,7 @@ export default {
              title: '',
              customAttr: JSON.stringify({
                color: DEFAULT_COLOR_CASE,
+                tableColor: DEFAULT_COLOR_CASE,
                size: DEFAULT_SIZE,
                label: DEFAULT_LABEL,
                tooltip: DEFAULT_TOOLTIP
@ -279,6 +280,7 @@ export default {
              title: '',
              customAttr: JSON.stringify({
                color: DEFAULT_COLOR_CASE,
+                tableColor: DEFAULT_COLOR_CASE,
                size: DEFAULT_SIZE,
                label: DEFAULT_LABEL,
                tooltip: DEFAULT_TOOLTIP
--- a/frontend/src/views/panel/panel.js
+++ b/frontend/src/views/panel/panel.js
@ -36,6 +36,7 @@ export const DEFAULT_COMMON_CANVAS_STYLE = {
    title: '',
    customAttr: {
      color: DEFAULT_COLOR_CASE,
+      tableColor: DEFAULT_COLOR_CASE,
      size: DEFAULT_SIZE,
      label: DEFAULT_LABEL,
      tooltip: DEFAULT_TOOLTIP