comprehensiveIndicatorsOption.vue

<template>
  <div class="analysis-option-wrapper">
    <div class="panels-content">
        <div class="panels-main-top panels-main-center">
        <!-- 商场检索选项 多选-->
        <ul class="condition-box">
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.mallT')}}</span>
            <div class="condition-item-option">
              <el-select v-model="mutiMallVal" filterable :placeholder="$t('pholder.shopSelect')" class="mall-sel-box" multiple
              :reserve-keyword="true" collapse-tags @change="mallChangeHandle">
                <!-- <div :class="isMallSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('Mall', mallData)">
                  <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 in mallData" :key="item.id" :label="item.name" :value="item.id">
                  <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>
          </li>
        </ul>
      </div>
      <div class="panels-main-top panels-main-center" v-if="indicator">
        <!-- 指标 多选-->
        <ul class="condition-box">
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.index')}}</span>
            <div class="condition-item-option">
              <el-select v-model="indicatorVal" filterable :placeholder="$t('pholder.select')" class="mall-sel-box" multiple
              :reserve-keyword="true" collapse-tags >
                <el-option v-for="(item,index) in indicatorData" :key="index" :label="item.value" :value="item.value">
                  <span class="custom-checkbox__input">
                    <span class="custom-checkbox__inner"></span>
                  </span>
                  <span style="padding-left: 5px;">{{ item.value }}</span>
                </el-option>
              </el-select>
            </div>
          </li>
        </ul>
      </div>
      <div class='panels-main-bottom'>
        <ul class="condition-box">
          <li class="condition-item">
            <span class="condition-item-text spe-item-text">{{$t('asisTab.date')}}</span>
            <div class="condition-item-option">
                <div class="time-wrapper newTime">
                    <el-radio-group v-model="ReportVal" size="small">
                        <el-radio-button v-for="item in analyasisTime" :key="item.value" :label="item.value" >{{i18nFormatter(item.label)}}</el-radio-button>
                    </el-radio-group>
                </div>
            </div>
          </li>
          <li class="condition-item analysis-date-condition">
            <div class="condition-item-option">
              <el-date-picker class="date-input analysis-date-input" v-show="ReportVal === 'day'" v-model="dayTime" value-format="yyyy-MM-dd" align="right" type="date" size="mini" :placeholder="$t('pholder.date')" :picker-options="pickerOptions1">
              </el-date-picker>
              <el-date-picker class="date-input analysis-date-input date-week-box" v-show="ReportVal === 'week'" v-model="weekTime" align="right" type="week" :format="datePickerFormatter('week')" size="mini" :placeholder="$t('pholder.week')" :picker-options="weekPickerOpt">
              </el-date-picker>
              <el-date-picker class="date-input analysis-date-input date-month-box" v-show="ReportVal === '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="date-input analysis-date-input" v-show="ReportVal === 'year'" v-model="yearTime" align="right" type="year" :format="datePickerFormatter('year')" size="mini" :placeholder="$t('pholder.year')" :picker-options="pickerOptions1">
              </el-date-picker>
              <el-date-picker class="date-input analysis-date-input times-box" v-model="customTime" value-format="yyyy-MM-dd" align="right" type="daterange" size="mini" :picker-options="pickerOptions1" range-separator="-" v-show="ReportVal === 'custom'" :start-placeholder="$t('table.startTime')" :end-placeholder="$t('table.endTime')">
              </el-date-picker>
            </div>
          </li>
          <li class="condition-item btn-condition-item">
            <el-button type="primary" class="primary-btn analysis-collapse-btn" size="samll" 
              :disabled="(ReportVal === 'day' && !dayTime) || (ReportVal === 'week' && !weekTime) || (ReportVal === 'month' && !monthTime)
              || (ReportVal === 'year' && !yearTime) || (ReportVal === 'custom' && !customTime)"
              @click="confirmCondition">{{$t('button.confirm')}}</el-button>
            <!-- <el-button class="reset-btn analysis-collapse-btn" size="samll" @click="resetRefresh">{{$t('button.reset')}}</el-button> -->
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
const simulateAsyncOperation = fn => {
  setTimeout(fn, 2000);
}
const analyasisTime = ['day', 'week', 'month', 'year', 'custom'].map(item => ({ label: item, value: item }))
export default {
    props:['indicator'],
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      weekPickerOpt: {
        firstDayOfWeek: window._vionConfig.firstDayOfWeek ? window._vionConfig.firstDayOfWeek : 1
      },
      analyasisTime,
      ReportVal: 'month',
      dayTime: '',
      weekTime: '',
      monthTime: '',
      yearTime: '',
      customTime: '',
      isMallSelAll: false,
      // isFocus: true,
      mallData: [],
      mutiMallVal:[],
      indicatorVal:[],
      indicatorData:[]
    }
  },
  watch: {
    dayTime(val) {
      this.sessionDate('dayDate', val);
    },
    weekTime(val) {
      this.sessionDate('weekDate', val);
    },
    monthTime(val) {
      this.sessionDate('monthDate', val);
    },
    yearTime(val) {
      this.sessionDate('yearDate', val);
    },
    customTime(val) {
      this.sessionDate('customDate', val);
    },
    'indicator':{
        handler(val){
            console.log(val)
        },
        immediate:true,
        deep:true
    }
  },
  created() {
      this.getMallIndex()
  },
  methods: {
    i18nFormatter(label) {
      let langeLabel = 'asisTab.' + label;
      return this.$t(langeLabel)
    },
    getMallIndex(){
      this.$api.base.dataDic({
        type: 'MallIndex'
      }).then(res => {
        this.indicatorData = this.languageSetting(res.data.data,'value');
      })  
    },
    initAsis(id, mall_data) {
      this.mallData = mall_data;
      this.mutiMallVal = id.multiMallId;
      this.isMallSelAll = this.mutiMallVal.length < this.mallData.length ? false : true;
      this.ReportVal = 'month'
      let mallNameArr = []
      if(this.mutiMallVal && this.mutiMallVal.length>0){
          mall_data.forEach(item=>{
              this.mutiMallVal.forEach(ids=>{
                  if(item.id==ids){
                      mallNameArr.push(item.name)
                  }
              })
          })
      }
      let data = {
        asis_date: 'day',
        asis_time: this.dayTime,
        asis_org: this.mutiMallVal.join(','),
        asis_nameList:mallNameArr
      }
      let timeObj = this.newDateFormat(
          data.asis_date,
          new Date(data.asis_time)
      );
      data.startDate = timeObj.startTime;
      data.endDate = timeObj.endTime;
      this.$emit('initData', data);
    },
    mallChangeHandle() {
      this.isMallSelAll = this.changeHandle(this.mutiMallVal, this.mallData)
    },
    selAllHandle(selType, option) {
      let selectAll = 'is' + selType + 'SelAll';
      let selectVal = 'muti' + selType + 'Val';
      if (this[selectAll]) {
        this[selectAll] = false;
        this[selectVal] = [];
      } else {
        this[selectAll] = true;
        this[selectVal] = [];
        option.forEach(item => {
          this[selectVal].push(item.id);
        })
      }
    },
    confirmCondition() {
      let
        {
          mutiMallVal,
          ReportVal,
        } = this,
        emitObj = {},
        orgId = null;
        if(mutiMallVal.length>10){
          this.$message({
            message: this.$t('message.selectTenStores'),
            type: 'warning'
          });
          return
        }
      emitObj.asis_date = ReportVal;
      emitObj.asis_time = this[ReportVal + 'Time'];
      emitObj.asis_org = mutiMallVal.toString();
      let timeObj = this.newDateFormat(
          emitObj.asis_date,
          new Date(emitObj.asis_time)
      );
      emitObj.startDate = timeObj.startTime;
      emitObj.endDate = timeObj.endTime;
      if(emitObj.asis_date=='custom'){
          emitObj.startDate = emitObj.asis_time[0];
          emitObj.endDate = emitObj.asis_time[1];
      }
      let mallNameArr = []
      if(this.mutiMallVal && this.mutiMallVal.length>0){
          this.mallData.forEach(item=>{
              this.mutiMallVal.forEach(ids=>{
                  if(item.id==ids){
                      mallNameArr.push(item.name)
                  }
              })
          })
      }
      emitObj.indicatorVal = this.indicatorVal
      emitObj.asis_nameList = mallNameArr
      this.$emit('reportTime', emitObj);
    },
    resetRefresh() {
        this.mutiMallVal = []
        this.mallData.forEach((item,index)=>{
            if(index<3){
                this.mutiMallVal.push(item.id)
            }
        })
        this.isMallSelAll = this.mutiMallVal.length == this.mallData.length ? true : false;
        this.ReportVal = 'day'
        this.dayTime = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')
        this.weekTime = new Date();  // 周时间
        this.monthTime = new Date();  // 月时间
        this.yearTime = new Date();  // 年时间
        this.customTime = [this.dayReduce(new Date(), 15), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
    }
  },
  mounted() {
    let { dayDate, weekDate, monthDate, yearDate, customDate } = this.createDate();
    this.dayTime = dayDate;
    this.weekTime = weekDate;
    this.monthTime = monthDate;
    this.yearTime = yearDate;
    this.customTime = customDate;
  }
}
</script>

<style scoped>
.newTime{
  width: auto;
}


@media only screen and (max-width: 1366px) {
  .time-box:last-child .time-btn {
    padding: 2px 10px;
  }
}

@media only screen and (max-width: 1280px) {
  .time-box:last-child .time-btn {
    padding: 2px 10px;
  }
  .panels-content {
    padding: 15px 0 13px 10px;
  }
}
</style>