yiliangyiyun-pc-jj/src/layout/index/top/top-setting.vue

<template>
  <BaseDrawer title="设置"
              :visible.sync="drawer"
              :direction="direction"
              :before-close="handleClose">

    <BaseCol :span="24"
             style="padding:24px">
      <BaseRow>
        <BaseCol :span="20"> <span>是否显示主题</span></BaseCol>
        <BaseCol :span="4">
          <BaseSwitch v-model="showThemView"
                      class="drawer-switch" />
        </BaseCol>
      </BaseRow>
      <!-- <BaseRow>
        <BaseCol :span="20"> <span>是否显示头部搜索框</span></BaseCol>
        <BaseCol :span="4">
          <BaseSwitch v-model="showSearchView"
                      class="drawer-switch" />
        </BaseCol>
      </BaseRow> -->
      <BaseRow>
        <BaseCol :span="20"> <span>是否显示Logo</span></BaseCol>
        <BaseCol :span="4">
          <BaseSwitch v-model="showLogoView"
                      class="drawer-switch" />
        </BaseCol>
      </BaseRow>
      <BaseRow v-if="vesselBankFlag !== 'V' && permissionIf('map.mapManagement.view')">
        <BaseCol :span="20"> <span>是否显示船舶动态</span></BaseCol>
        <BaseCol :span="4">
          <BaseSwitch v-model="showVesslBankFlag"
                      class="drawer-switch"
                      @change="changeVesslBankMethod" />
        </BaseCol>
      </BaseRow>
      <BaseRow >
       <button @click="clear()">清理后台缓存</button>
      </BaseRow>
      <span class="version">{{$t('systemVersion')+ ' ' + systemVersion}}</span>
    </BaseCol>
  </BaseDrawer>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex';
import { clearCache }
  from '@/model/home/index'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
  },

  computed: {
    ...mapGetters(['showTag', 'showMenu', 'showTheme', 'showSearch', 'userSetting', 'systemVersion']),
    ...mapState({
      showLogo: state => state.commonStore.showLogo
    }),
  },
  data () {
    return {
      vesselBankFlag: localStorage.getItem('ws-pf_vesselBankFlag'),
      drawer: false,
      direction: 'rtl',
      setting: 'false',
      showTagView: false,
      showTopMenuView: false,
      showThemView: false,
      showSearchView: false,
      showLogoView: false,
      showVesslBankFlag: false
    };
  },
  mounted () {
    this.showTagView = this.showTag
    this.showTopMenuView = this.showMenu
    this.showThemView = this.showTheme
    this.showSearchView = this.showSearch
    this.showLogoView = this.showLogo
    this.showVesslBankFlag = this.userSetting['shipMap'][0].showFlag
  },

  watch: {
    value (val) {
      this.drawer = val
    },
    showVesslBankFlag (value) {
      this.$store.commit('SET_SHOWVESSLBANKFLAG', value)
    },
    showTagView (value) {
      this.$store.commit('SET_SHOWTAG', value)
    },
    showTopMenuView (value) {
      this.$store.commit('SET_SHOWMENU', value)
    },
    showThemView (value) {
      this.$store.commit('SET_SHOWTHEME', value)
    },
    showSearchView (value) {
      this.$store.commit('SET_SHOWSEARCH', value)
    },
    showLogoView (value) {
      this.$store.commit('SET_LOGO', value)
    }
  },
  methods: {
    ...mapActions('user', ['toSetShow', 'changeVesslBank']),
    handleClose (done) {
      this.$emit('close', true)
      done();
    },
    async changeVesslBankMethod (val) {
      this.changeVesslBank([{
        id: this.userSetting['shipMap'][0].id,
        staffId: localStorage.getItem('ws-pf_userId'),
        typeId: 'shipMap',
        showFlag: val
      }])
    },
    clear(){
       clearCache({
        }).toPromise().then(res => {
          this.$message.success('缓存清理成功')
        })
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-drawer {
  max-width: 300px;
  &__header {
    margin-bottom: 0px;
  }
}
.el-row {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  padding: 12px 0;
}
.version {
  font-size: 12px;
  text-align: center;
  width: 100%;
  display: inherit;
}
</style>