FloorSelect.vue

<template>
  <div class="component-floor-wrapper">
    <span class="condition-label" v-show="showLabel">{{ $t('asisTab.floorT') }}</span>
    <el-select
      v-if="isMulti"
      v-model="multiFloorVal"
      :filterable="filterable"
      :collapse-tags="isCollapse"
      multiple
      :placeholder="$t('pholder.shopSelect')"
      @change="multiFloorChangeHandle">
      <div
        :class="['sel-all-box', { 'selected': isFloorSelAll }]"
        @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 floorList"
        :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="floorVal" :filterable="filterable" :placeholder="$t('pholder.shopSelect')">
      <el-option v-for="item in floorList"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'FloorSelect',
  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(['floorList']),
    ...mapState({
      accountVal: state => state.app.accountVal,
      cacheConditions: state => state.app.cacheConditions,
      mallVal: state => state.app.mallVal,
      multiMallVal: state => state.app.multiMallVal
    }),
    floorVal: {
      get() {
        return this.$store.state.app.floorVal
      },
      set(val) {
        this.$store.commit('app/SET_FLOOR_VAL', val)
      }
    },
    multiFloorVal: {
      get() {
        let storeVal = this.$store.state.app.multiFloorVal
        this.isFloorSelAll = this.floorList.length && storeVal.length === this.floorList.length
        return storeVal
      },
      set(val) {
        this.$store.commit('app/SET_MULTI_FLOOR_VAL', val)
      }
    },
  },
  data() {
    return {
      isFloorSelAll: false
    }
  },
  watch: {
    mallVal(nVal, oVal) {
      if (nVal) {
        this.storeFloor('update')
      }
    },
    multiFloorVal(nVal, oVal) {
      this.isFloorSelAll = this.floorList.length && nVal.length === this.floorList.length
    }
  },
  async mounted() {
    // if (!this.floorVal || !this.multiFloorVal.length) {
    this.storeFloor('update')
    // }
  },
  methods: {
    async storeFloor(status) {
      if (!this.floorList.length || status === 'update') {
        await this.$store.dispatch('app/getFloors', {
          accountId: this.accountVal.id,
          mallId: this.cacheConditions && this.cacheConditions['singleMall'] || this.mallVal,
          status: 1
        })
      }

      if (this.cacheConditions) {
        // 单选
        if(this.cacheConditions['singleFloor']) {
          this.$store.commit('app/SET_FLOOR_VAL', this.cacheConditions['singleFloor'])
        }
        // 多选
        if (this.cacheConditions['multiFloor']) {
          this.$store.commit('app/SET_MULTI_FLOOR_VAL', this.cacheConditions['multiFloor'])
        }
      } else {
        this.$store.commit('app/SET_CACHE_VAL', { key: 'singleFloor', val: this.floorVal })
        this.$store.commit('app/SET_CACHE_VAL', { key: 'multiFloor', val: this.multiFloorVal })
      }
    },
    multiFloorChangeHandle() {
      this.isFloorSelAll = this.checkedAllHandle(this.multiFloorVal, this.floorList);
    },
    checkedAllHandle(valArr, data) {
      return valArr.length === data.length
    },
    selAllHandle() {
      if(this.isFloorSelAll) {
        this.isFloorSelAll = false
        if(this.multiFloorVal.length == this.floorList.length) {
          this.multiFloorVal = []
        }
      } else {
        this.isFloorSelAll = true
        if(this.multiFloorVal.length == this.floorList.length) {
          this.multiFloorVal = []
        } else {
          this.multiFloorVal = []
          this.floorList.forEach(item => {
            this.multiFloorVal.push(item.id)
          })
        }
      }
    },
    cacheOptions() {
      // if (this.isMulti) {
      //   this.$store.commit('app/SET_CACHE_VAL', { key: 'multiFloor', val: this.multiFloorVal })
      // } else {
      //   this.floorVal && this.$store.commit('app/SET_CACHE_VAL', { key: 'singleFloor', val: this.floorVal })
      // }
    },
    // floorChangeHandle() {},
  }
}
</script>

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