frequencyOps.vue

<template>
  <div class="behavior-more-option behavior-test-option">
    <div class="opt-left">
      <!-- 广场 -->
      <div class="test-opt-mall">
        <!-- <el-select v-model="mallVal" class="mall-opt" filterable :placeholder="$t('pholder.shopSelect')"> 
          <el-option v-for="(item, index) in mallOpt" :label="item.name" :value="item.id" :key="item.value">
          </el-option> -->
         <el-select v-model="multiMallVal" class="mall-opt" filterable multiple collapse-tags :placeholder="$t('pholder.shopSelect')" @change="chooseMall"> 
           <div :class="['sel-all-box', { 'selected' : isMallSelAll }]" @click="selAllHandle('mall')">
            <span class="custom-checkbox__input">
              <span class="custom-checkbox__inner"></span>
            </span>
            <span style="padding-left: 5px;">{{$t('allPages.all')}}</span>
          </div>
          <el-option v-for="(item, index) in mallOpt" :label="item.name" :value="item.id" :key="item.value">
            <span class="custom-checkbox__input">
              <span class="custom-checkbox__inner"></span>
            </span>
            <span style="padding-left: 5px;">{{ item.name }}</span>
          </el-option> 
        </el-select>
      </div>
      <!-- 日期 -->
      <div class="test-opt-date">
        <span v-for="(item, index) in analyasisTime" :key="item.label" class="time-box" @click="timeHandle(item.value)">
          <span :class="['time-btn', { 'active-time': activeTimes === item.value }]">{{ i18n(item.label) }}</span>
        </span>
      </div>
      <!-- 时间 -->
      <div class="test-opt-time">
        <el-date-picker class="date-input analysis-date-input" v-show="activeTimes === 'month'" v-model="monthTime" align="right" type="month" :format="datePickerFormatter('month')" size="mini" :placeholder="$t('pholder.month')" :picker-options="pickerOptions1">
        </el-date-picker>
        <el-date-picker class="time-opt time-opt-custom" v-show="activeTimes === 'custom'" v-model="customTime" value-format="yyyy-MM-dd" align="right" type="daterange" size="mini" :picker-options="pickerOptions1" range-separator="-" :start-placeholder="$t('table.startTime')" :end-placeholder="$t('table.endTime')">
        </el-date-picker>
      </div>
    </div>
    <div class="opt-right">
      <el-button type="primary" class="primary-btn behavior-collapse-btn" size="samll"
        :disabled="(activeTimes === 'month' && !monthTime) || (activeTimes === 'custom' && !customTime)" 
        @click="clickHandle">{{$t('button.confirm')}}</el-button>
    </div>
  </div>
</template>

<script>
let analyasisTime = ['month', 'year', 'custom'].map(item => ({ label: item, value: item }))
export default {
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      mallName: '',
      // mallVal: null,
      multiMallVal: [],
      isMallSelAll: false,
      mallOpt: [],
      activeTimes: 'month',
      analyasisTime,
      monthTime: '',
      yearTime: '',
      customTime: ''
    }
  },
  created() {
    let { monthDate, yearDate, customDate } = this.createDate()
    this.monthTime = monthDate
    this.yearTime = yearDate
    this.customTime = customDate
  },
  watch: {
    monthTime(val) {
      this.sessionDate('monthDate', val);
    },
    yearTime(val) {
      this.sessionDate('yearDate', val);
    },
    customTime(val) {
      this.sessionDate('customDate', val);
    }
  },
  mounted() {
    // 获取商场
    this.getMallList()
  },
  methods: {
    i18n(label) {
      let langaugeLabel = 'asisTab.' + label
      return this.$t(langaugeLabel)
    },
    timeHandle(val) {
      this.activeTimes = val
    },
    getMallList() {
      this.mallOpt = []
      // this.mallVal = null
      this.multiMallVal = []
      this.mallName = ''
      this.getCommonMalls().then(resolveData => {
        let
          {
            mallData,
            localMallId,
            multiMallId,
            titleName
          } = resolveData

        this.mallOpt = mallData
        // this.mallVal = localMallId
        this.multiMallVal = [localMallId]
        this.mallName = titleName + ' '
        this.clickHandle();
      })
    },
    chooseMall() {
      this.isMallSelAll = this.behaviorMallChange(this.multiMallVal,this.mallOpt);
    },
    selAllHandle(selType) {
      if(selType === 'mall') {
        if(this.isMallSelAll) {
          this.isMallSelAll = false;
          if(this.multiMallVal.length == this.mallOpt.length) {
            this.multiMallVal = [];
          }
        } else {
          this.isMallSelAll = true;
          if(this.multiMallVal.length == this.mallOpt.length) {
            this.multiMallVal = [];
          } else {
            this.multiMallVal = [];
            this.mallOpt.forEach(item => {
              this.multiMallVal.push(item.id);
            })
          }
        }
      }
    },
    dealDate() {
      let { activeTimes } = this

      if (activeTimes === 'custom') {
        return this.customTime;
      }
      else {
        const { startTime, endTime } = this.newDateFormat(activeTimes, this[`${activeTimes}Time`])
        return [startTime, endTime];
      }
    },
    clickHandle() {
      this.$emit('startLoading', 'frequency');
      const _time = this.dealDate()
      const checkedMallList = this.mallOpt.filter(item => {
        return this.multiMallVal.includes(item.id)
      })
      const params = {
        mallId: this.multiMallVal.join(','), //this.mallVal,
        checkedMallList: checkedMallList,
        startDate: _time[0],
        endDate: _time[1],
        title: this.mallName + ' ' + _time[0] + ' ' + this.$t('dialog.to') + ' ' + _time[1] + ' '
      }
      this.$emit('emitParams', params);
    }
  }
}
</script>

<style scoped>
.test-opt-date {
  float: left;
  font-size: 12px;
  margin-right: 20px;
}

@media only screen and (max-width: 1680px) {
  .test-opt-time .time-opt-custom {
    width: 264px;
  }
  .test-opt-time .time-opt {
    top: 0;
  }
}

@media only screen and (max-width: 1440px) {
  .test-opt-time .time-opt-custom {
    width: 264px;
  }
  .test-opt-time .time-opt {
    top: 0;
  }
}

@media only screen and (max-width: 1366px) {
  .test-opt-time .time-opt-custom {
    width: 264px;
  }
  .test-opt-time .time-opt {
    top: 0;
  }
}

@media only screen and (max-width: 1280px) {
  .test-opt-time .time-opt-custom {
    width: 264px;
  }
  .test-opt-time .time-opt {
    top: 0;
  }
}
</style>