setting.vue

<template>
 <el-dialog
 @opened="dialogOpen"
 title="系统布局配置"
 :visible.sync="dialogVisible"
 @closed="dialogClose" width="95%"
 :append-to-body='true'
 :close-on-click-modal='false'>
  <div class="drawer-container">
    <div>
      <div class="drawer-item">
        <span class="itemColor">系统主题颜色:</span>
        <theme-picker @changeColor="themeChange" />
      </div>
    </div>
  </div>
 </el-dialog>
</template>

<script>
import ThemePicker from '../themePicker'
export default {
  components: { ThemePicker },
  props: {
    value: Boolean
  },
  watch: {
    value(val) {
      this.dialogVisible = val
    },
    dialogVisible(val) {
      this.$emit('input', val)
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    themeChange(val) {
      // this.$store.dispatch('setting/changeSetting', {
      //   key: 'theme',
      //   value: val
      // })
      const data = {
        background: val
      }
      this.savePageConfig(data).then(() => {
        sessionStorage['queryBiTheme'] = JSON.stringify(data)
      })
    },
    // 保存queryBIView页面的配置信息
    savePageConfig(data) {
      const parms = {
        sControl: 'systemSetting',
        sConfig: {},
        sData: data
      }
      return this.$API.runSave(parms)
    },
    dialogOpen() {
      this.$store.commit('change_viewStatus', true)
    },
    dialogClose() {
      this.$store.commit('change_viewStatus', false)
      this.dialogVisible = false
    }
  }
}
</script>

<style  scoped>
.drawer-container {
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;

}
.drawer-title {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    line-height: 22px;
  }
.drawer-item {
    display: flex;
    justify-content: start;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    padding: 12px 0;
  }
  .itemColor{
    margin-right: 10px;
  }
</style>