MallSelect.vue

<template>
  <div class="component-mall-wrapper">
    <span class="condition-label" v-show="showLabel">{{ $t('asisTab.mallT') }}</span>
    <el-select
      v-if="isMulti"
      v-model="multiMallVal"
      :filterable="filterable"
      :collapse-tags="isCollapse"
      multiple
      :placeholder="$t('pholder.shopSelect')"
      @change="multiMallChangeHandle">
      <div
        :class="['sel-all-box', { 'selected': isMallSelAll }]"
        @click="selAllHandle"
        >
        <span class="custom-checkbox__input">
          <span class="custom-checkbox__inner"></span>
        </span>
        <span class="pl-5">{{ $t('allPages.all') }}</span>
      </div>
      <el-option v-for="item in mallList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
        <span class="custom-checkbox__input">
          <span class="custom-checkbox__inner"></span>
        </span>
        <span class="pl-5">{{ item.name }}</span>
      </el-option>
    </el-select>
    <el-select v-else v-model="mallVal" :filterable="filterable" :placeholder="$t('pholder.shopSelect')">
      <el-option v-for="item in mallList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'MallSelect',
  props: {
    isMulti: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: true
    },
    isCollapse: {
      type: Boolean,
      default: true
    },
    isNeedSelectedAll: {
      type: Boolean,
      default: true
    },
    showLabel: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapGetters(['mallList']),
    ...mapState({
      accountVal: state => state.app.accountVal,
      cacheConditions: state => state.app.cacheConditions
    }),
    mallVal: {
      get() {
        return this.$store.state.app.mallVal
      },
      set(val) {
        this.$store.commit('app/SET_MALL_VAL', val)
        // this.$emit('listenerChange', val)
      }
    },
    multiMallVal: {
      get() {
        let storeVal = this.$store.state.app.multiMallVal
        this.isMallSelAll = this.mallList.length && storeVal.length === this.mallList.length
        return storeVal
      },
      set(val) {
        this.$store.commit('app/SET_MULTI_MALL_VAL', val)
      }
    },
  },
  data() {
    return {
      isMallSelAll: false
    }
  },
  watch: {
    // accountVal(nVal, oVal) {
    //   if (nVal) {
    //     this.storeMall()
    //   }
    // },
    multiMallVal(nVal, oVal) {
      // console.log(nVal, oVal)
      this.isMallSelAll = this.mallList.length && nVal.length === this.mallList.length
    }
  },
  mounted() {
    // await this.storeMall()
    // this.$emit('loadHandle', 'floor')
    // console.log('created=======>', this.mallVal, this.multiMallVal)
    if (!this.mallVal || !this.multiMallVal.length) {
      this.storeMall()
    }
  },
  methods: {
    async storeMall() {
      if (!this.mallList.length) {
        await this.$store.dispatch('app/getMalls', {
          accountId: this.accountVal.id,
          status: 1
        })
      }

      if (this.cacheConditions) {
        // 单选
        if(this.cacheConditions['singleMall']) {
          this.$store.commit('app/SET_MALL_VAL', this.cacheConditions['singleMall'])
        }
        // 多选
        if (this.cacheConditions['multiMall']) {
          this.$store.commit('app/SET_MULTI_MALL_VAL', this.cacheConditions['multiMall'])
        }
      } else {
        this.$store.commit('app/SET_CACHE_VAL', { key: 'singleMall', val: this.mallVal })
        this.$store.commit('app/SET_CACHE_VAL', { key: 'multiMall', val: this.multiMallVal })
      }
    },
    multiMallChangeHandle() {
      this.isMallSelAll = this.checkedAllHandle(this.multiMallVal, this.mallList);
    },
    checkedAllHandle(valArr, data) {
      return valArr.length === data.length
    },
    selAllHandle() {
      if(this.isMallSelAll) {
        this.isMallSelAll = false
        if(this.multiMallVal.length == this.mallList.length) {
          this.multiMallVal = []
        }
      } else {
        this.isMallSelAll = true
        if(this.multiMallVal.length == this.mallList.length) {
          this.multiMallVal = []
        } else {
          this.multiMallVal = []
          this.mallList.forEach(item => {
            this.multiMallVal.push(item.id)
          })
        }
      }
    },
    cacheOptions() {
      if (this.isMulti) {
        this.$store.commit('app/SET_CACHE_VAL', { key: 'multiMall', val: multiMall })
      } else {
        this.mallVal && this.$store.commit('app/SET_CACHE_VAL', { key: 'singleMall', val: this.mallVal })
      }
    },
    // mallChangeHandle() {},
  }
}
</script>

<style scoped>
.component-mall-wrapper {
  display: inline-block;
}
.condition-label {
  padding-right: 10px;
  color: #666;
  font-size: 13px;
}
.pl-5 {
  padding-left: 5px;
}
</style>