customerClerkStatistics.vue

<template>
  <div class="analysis-option-wrapper">
    <div class="panels-content">
      <div class="panels-main-bottom multi-line-bottom">
        <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="mallVal" :placeholder="$t('pholder.shopSelect')" class="mall-sel-box">
                <el-option v-for="item in mallData" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
          </li>
          <li class="condition-item">
            <span class="condition-item-text">{{ $t('table.age') }}:</span>
            <div class="condition-item-option">
              <el-select class="age-sel-box" v-model="ageList" :placeholder="$t('pholder.areaSelect')" multiple collapse-tags @change="ageChangeHandle">
                <div :class="['sel-all-box', { 'selected': isAgeSelAll }]" @click="ageAllChangeHandle()">
                  <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 ageArr" :key="item.value" :label="item.name" :value="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>
          </li>
          <li class="condition-item">
            <span class="condition-item-text spe-item-text">{{ $t('table.gender') }}:</span>
            <div class="condition-item-option">
              <el-checkbox-group v-model="genderList" class="sex-container">
                <el-checkbox :label="0" class="sex-item-checkbox">{{ $t('dictionary.Male') }}</el-checkbox>
                <el-checkbox :label="1" class="sex-item-checkbox">{{ $t('dictionary.Female') }}</el-checkbox>
                <el-checkbox :label="2" class="sex-item-checkbox">{{ $t('dictionary.unknow') }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </li>
          <li class="condition-item analysis-date-condition">
            <span class="condition-item-text spe-item-text">{{ $t('table.date') }}:</span>
            <div class="condition-item-option">
              <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="-" :start-placeholder="$t('table.startTime')" :end-placeholder="$t('table.endTime')" />
            </div>
          </li>
          <li class="condition-item" v-if="false">
            <span class="condition-item-text">{{$t('asisTab.index')}}</span>
            <div class="condition-item-option">
              <el-select v-model="kpiVal" :placeholder="$t('pholder.kpi')" class="indicator-sel-box">
                <el-option v-for="kpiItem in kpiOpt" :key="kpiItem.value" :label="kpiItem.label" :value="kpiItem.value" />
              </el-select>
            </div>
          </li>
          <li class="condition-item">
            <el-button type="primary" class="primary-btn analysis-collapse-btn" size="samll" :disabled="(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>

export default {
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      genderList: [0, 1, 2],
      ageArr: [
        {
          name: this.$t('table.under'),
          value: '0-18'
        },
        {
          name: '18-24' + this.$t("table.ages"),
          value: '18-24'
        },
        {
          name: '25-34' + this.$t("table.ages"),
          value: '25-34'
        },
        {
          name: '35-44' + this.$t("table.ages"),
          value: '35-44'
        },
        {
          name: '45-54' + this.$t("table.ages"),
          value: '45-54'
        },
        {
          name: '55-64' + this.$t("table.ages"),
          value: '55-64'
        },
        {
          name: this.$t('table.over'),
          value: '65-100'
        }
      ],
      ageList: ['0-18', '18-24', '25-34', '35-44', '45-54', '55-64', '65-100'],
      isAgeSelAll: true,
      ReportVal: 'custom',
      customTime: '',
      mallData: [],
      mallVal: ''
    }
  },
  watch: {
    customTime(val) {
      this.sessionDate('customDate', val)
    }
  },
  methods: {
    initAsis({ mallId, multiMallId }, mall_data) {
      this.mallData = mall_data
      this.mallVal = mallId;
      this.ReportVal = 'custom'
      const {
        genderList,
        ageList
      } = this
      this.$emit('initData', {
        asis_org: mallId,
        asis_date: this.ReportVal,
        asis_time: this.customTime,
        asis_gender: genderList.join(','),
        asis_age: ageList.join(','),
        asis_tit: this.getItemName(this.mallData, this.mallVal)
      })
    },
    ageChangeHandle() {
      this.isAgeSelAll = this.isAgeSelAll
        ? (this.ageList.length < this.ageArr.length ? false : true)
        : this.ageList.length < this.ageArr.length ? false : true
    },
    ageAllChangeHandle() {
      if (this.isAgeSelAll) {
        this.isAgeSelAll = false
        if (this.ageList.length === this.ageArr.length) {
          this.ageList = []
        }
      } else {
        this.isAgeSelAll = true
        if (this.ageList.length === this.ageArr.length) {
          this.ageList = []
        } else {
          this.ageList = []
          this.ageArr.forEach(item => {
            this.ageList.push(item.value)
          })
        }
      }
    },
    confirmCondition() {
      const {
        mallData,
        mallVal,
        mutiZoneVal,
        asisLevel,
        ReportVal,
        genderList,
        ageList
      } = this
      const emitObj = {}
      emitObj.asis_org = mallVal;
      emitObj['asis_tit'] = this.getItemName(mallData, mallVal)
      emitObj.asis_level = 'mall'
      emitObj.asis_date = ReportVal
      emitObj.asis_time = this[ReportVal + 'Time']
      emitObj.asis_gender = genderList.join(',')
      emitObj.asis_age = ageList.join(',')
      this.$emit('reportTime', emitObj)
    },
    resetRefresh() {
      this.ReportVal = 'custom'
      this.customTime = [this.dayReduce(new Date(), 15), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')]
    }
  },
  mounted() {
    let {
      customDate
    } = this.createDate()
    this.customTime = customDate
  }
}
</script>

<style scoped>
.sex-container {
  display: inline-block;
  height: 22px;
  line-height: 22px;
  font-size: 13px;
}
.sex-item-checkbox + .sex-item-checkbox {
  margin-left: 18px;
}
.panels-main-top {
  float: none;
  margin-bottom: 10px;
}
.panels-main-bottom {
  float: none;
}
.age-sel-box {
  width: 164px;
}
@media only screen and (max-width: 1366px) {
  .analysis-date-input {
    width: 160px !important;
  }
  .times-box {
    width: 220px !important;
  }
  .active-time {
    padding: 3px 12px;
  }
}
@media only screen and (max-width: 1280px) {
  .analysis-date-input {
    width: 160px !important;
  }
  .times-box {
    width: 220px !important;
  }
  .active-time {
    padding: 3px 12px;
  }
}
</style>