durationTimeOption.vue

<template>
  <div class="analysis-option-wrapper">
    <div class="analysis-level-wrapper">
      <div class="analysis-level-left">
        <i class="el-icon-search"></i>
        <span class="analysis-level-text">{{$t('asisTab.level')}}</span>
      </div>
      <div class="analysis-level-right">
        <ul class="analysis-type-box">
          <li
            :class="['analysis-item', { 'tabs-active': asisLevel === item.value}]"
            v-for="item in tabItem"
            :key="item.value"
            @click="tabClickHandle(item.value)"
          >
            <span class="analysis-item-title">{{ i18nFormatter(item.label) }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="panels-content">
      <div class="panels-main-top">
        <!-- 商场检索选项 多选-->
        <ul class="condition-box" v-show="asisLevel === 'mall'">
          <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>
        <!-- 楼层检索选项 多选 -->
        <ul class="condition-box" v-show="asisLevel === 'floor'">
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.mallT')}}</span>
            <div class="condition-item-option">
              <el-select
                v-model="mallVal"
                filterable
                :placeholder="$t('pholder.shopSelect')"
                class="mall-sel-box"
                @change="mutiMallChange"
              >
                <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('asisTab.floorT')}}</span>
            <div class="condition-item-option">
              <el-select
                v-model="mutiFloorVal"
                filterable
                :placeholder="$t('pholder.floorSelect')"
                class="floor-sel-box format-sel-box"
                multiple
                collapse-tags
                :reserve-keyword="true"
                @change="floorChangeHandle"
              >
                <div
                  :class="isFloorSelAll ? 'sel-all-box selected' : 'sel-all-box'"
                  @click="selAllHandle('Floor',floorData)"
                >
                  <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 floorData"
                  :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>
         <!-- 店铺检索选项 多选 -->
        <ul class="condition-box" v-show="asisLevel === 'zone'">
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.mallT')}}</span>
            <div class="condition-item-option">
              <el-select v-model="mallVal" filterable :placeholder="$t('pholder.shopSelect')" class="mall-sel-box" @change="mallChange">
                <el-option v-for="item in mallData" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </div>
          </li>
          <store-level-content :shopFloorVal="shopFloorVal" :shopFloorData="floorData" @storelevel="storeLevelReceive"></store-level-content>
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.storeT')}}</span>
            <div class="condition-item-option" v-show="objectVal === 1">
              <el-select v-model="zoneVal" filterable :placeholder="$t('pholder.areaSelect')" class="shop-sel-box">
                <el-option v-for="item in zoneData" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div class="condition-item-option" v-show="objectVal === 2">
              <el-select v-model="mutiZoneVal" filterable :placeholder="$t('pholder.areaSelect')" class="shop-sel-box" multiple 
              :reserve-keyword="true" collapse-tags @change="zoneChangeHandle">
                <div :class="isZoneSelAll ? 'sel-all-box selected' : 'sel-all-box'" @click="selAllHandle('Zone',zoneData)">
                  <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 zoneData" :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-bottom', {
          'multi-line-bottom': asisLevel === 'gate' || asisLevel === 'store' ||  asisLevel === 'format'
        }
      ]"
      >
        <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">
                <el-select v-model="ReportVal" :placeholder="$t('pholder.select')">
                  <el-option
                    v-for="item in analyasisTime"
                    :key="item.value"
                    :label="i18nFormatter(item.label)"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
          </li>
          <li class="condition-item analysis-date-condition">
             <!-- <span class="condition-item-text spe-item-text">{{$t('asisTab.date')}}</span> -->
            <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-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"
              :disabled="(ReportVal == 'day' && !dayTime) || (ReportVal == 'month' && !monthTime) || (ReportVal == 'year' && !yearTime)
                || (ReportVal == 'custom' && !customTime)"
              size="samll"
              @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 analyasisTime = ["day", "month", "year", "custom"].map(item => ({
  label: item,
  value: item
}));
export default {
  // props: {
  //   mallData: {
  //     type: Array,
  //     default: []
  //   }
  // },
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      weekPickerOpt: {
        firstDayOfWeek: window._vionConfig.firstDayOfWeek
          ? window._vionConfig.firstDayOfWeek
          : 1
      },
      tabItem: [],
      asisLevel: "mall",
      analyasisTime,
      mutiZoneVal: [],    // 多选店铺下拉值
      zoneVal:"",
      isZoneSelAll:false,
      ReportVal: "day",
      dayTime: "",
      monthTime: "",
      yearTime: "",
      customTime: "",
      mallData: [],
      zoneData:[],
      mutiMallVal: [], // 多选商场下拉值
      mallVal: "", // 单选商场
      floorData: [],
      mutiFloorVal: [], // 多选楼层下拉值
      mallId: "", // 组件全局商场ID
      floorId: "",
      zoneItem:[],
      objectVal:2,
      shopFloorVal: '',   // 单选楼层下拉值
      shopFloorData: [],  // 级别楼层下拉
      isMallSelAll: false,
      isFloorSelAll: false
    };
  },
  watch: {
    dayTime(val) {
      this.sessionDate('dayDate', val);
    },
    monthTime(val) {
      this.sessionDate("monthDate", val);
    },
    yearTime(val) {
      this.sessionDate("yearDate", val);
    },
    customTime(val) {
      this.sessionDate("customDate", val);
    }
  },
  created() {
    this.tabItem = [];
    let usertype = this.$cookie.get('userrole_type');
    if (this.$Project === "mall") {
    let tabList = ['mall', 'floor', 'zone']
   /*	switch (usertype){
				case "0":
					tabList = ['mall', 'gate', 'floor', 'zone']
					break;
				case "1":
					tabList = ['mall', 'gate', 'floor', 'zone']
					break;
				case "4":
					tabList = ['zone']
					break;
				default:
					break;
			}
			*/
    this.tabItem = (tabList).map(item => ({ label: item, value: item }))
    this.gateLevelList = tabList.map(item => ({ label: item, value: item }))
     
    } else {
      this.tabItem = [
        {
          label: "mall",
          value: "mall"
        }
      ];
    }
    this.asisLevel = this.tabItem[0].value;
  },
  mounted() {
    let { dayDate, monthDate, yearDate, customDate } = this.createDate();
    this.dayTime = dayDate;
    this.monthTime = monthDate;
    this.yearTime = yearDate;
    this.customTime = customDate;
  },
  methods: {
    i18nFormatter(label) {
      let langeLabel = "asisTab." + label;
      return this.$t(langeLabel);
    },
    initAsis(id, mallData) {
      let usertype = this.$cookie.get('userrole_type');
      this.mallData = mallData;
      this.mallVal = id;
      this.mutiMallVal = [id];
      this.isMallSelAll = this.mallData.length
        ? this.mutiMallVal.length < this.mallData.length
          ? false
          : true
        : false;
      this.ReportVal = "day";
      if(usertype == 4) {
       this.asisLevel = "zone";
      } else {
      this.getFloorOpt(id);
      this.asisLevel = "mall";
      this.ReportVal = "day";
      let data = {
        asis_level: this.asisLevel,
        asis_date: this.ReportVal,
        asis_time: this[`${this.ReportVal}Time`],
        asis_org: this.mutiMallVal.join(","),
        asis_tit: this.getItemName(this.mallData, this.mutiMallVal.toString())
      };
      this.$emit("initData", data);}
      this.gateLevelChange();
    },
    // 切换条件
    tabClickHandle(val) {
      this.asisLevel = val;
      if (val === "mall") {
        this.isMallSelAll =
          this.mallData.length &&
          this.mutiMallVal.length === this.mallData.length;
      } else {
        this.isFloorSelAll =
          this.floorData.length &&
          this.mutiFloorVal.length === this.floorData.length;
      }
    },
    zoneChangeHandle() {
      this.isZoneSelAll = this.mutiZoneVal.length < this.zoneData.length ? false : true
      //
    },
    // 获取楼层下拉
    getFloorOpt(mall_id) {
      this.mutiFloorVal = [];
      this.floorData = [];
      this.isFloorSelAll = false;
      this.$api.base
        .floor({
          mallId: mall_id,
          accountId: this.$cookie.get("accountId"),
          status: 1
        })
        .then(res => {
          if (res.data.data.length > 0) {
            let result = JSON.parse(JSON.stringify(res.data.data));
            result.unshift({
              name: this.$t("asisTab.all"),
              id: ""
            });
            this.floorData = res.data.data;
            this.mutiFloorVal = [res.data.data[0].id];
            this.isFloorSelAll =
              this.mutiFloorVal.length == this.floorData.length ? true : false;
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    mallChangeHandle() {
      this.isMallSelAll = this.changeHandle(this.mutiMallVal, this.mallData);
    },
    async getZoneOpt(mall_id, floor_id, format) {
      if(!mall_id) return;
      this.zoneData = [];
      this.mutiZoneVal = [];
      this.zoneId = '';
      this.isZoneSelAll = false;
      let params = {
        mallId: mall_id,
        accountId: this.$cookie.get('accountId'),
        status: 1,
        sortName: 'floor.name, zone.name',
      }
      params.floorId = floor_id ? floor_id : this.storeFloorVal;
      // this.storeLevel === 'format' ? (this.storeformatLevel === 1 ? params.FormatId_arr = this.storemutiFormatVal.toString() :
      //   params.SubFormatId_arr = this.storemutiFormatTwoVal.toString()) :
      //   params.floorId = floor_id ? floor_id : this.storeFloorVal;
      let { data: { data } } = await this.zoneFetch(params)
      if (data.length) {
        this.zoneData = data;
        this.zoneId = data[0].id;
        this.mutiZoneVal = [data[0].id];
        this.zoneVal = data[0].id;
        this.isZoneSelAll = this.mutiZoneVal.length === this.zoneData.length;
      }
    },
    floorChangeHandle() {
      this.isFloorSelAll =
        this.mutiFloorVal.length < this.floorData.length ? false : true;
    },
     zoneFetch(parameter) {
      return new Promise((resolve, reject) => {
        this.$api.base.zone(parameter)
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            this.catchErrorHandle(err)
            reject(err)
          })
      })
    },
    // 多选楼层 商场 change 事件
    mutiMallChange() {
      this.getFloorOpt(this.mallVal);
    },
    //楼层切换
     mallChange() {
      this.mallId = this.mallVal;
      window.sessionStorage.setItem('mallId', this.mallVal)
      if (this.asisLevel === 'gate') {
        this.gateLevel = 'all';
        this.gateLevelChange()
      } else {
        this.getFloorOpt(this.mallVal);
      }
    },
    async getZoneList() {
      this.mutiGateVal = [];
      this.gateData = [];
      this.zoneData = [];
      let { data: { data } } = await this.zoneFetch({
        mallId: this.mallVal,
        status: 1,
        sortName: 'floor.name, zone.name',
        // _t: Date.parse(new Date()) / 1000
      })
      if (data.length) {
        this.mutiZoneVal = [data[0].id];
        this.getZoneGate(this.mutiZoneVal.join(','));
        this.zoneData = data;
        this.objectVal === 1 ? this.zoneVal = data[0].id: this.mutiZoneVal =  [data[0].id];
        setTimeout(() => {
          this.confirmCondition()
        }, 1000);
      }
    },
    getZoneGate(zone_id) {
      this.mutiGateVal = [];
      this.gateData = [];
      this.$api.base.zoneGate({
        ZoneId_arr: zone_id,
      })
        .then(res => {
          if (res.data.data.length > 0) {
            let result = res.data.data;
            result.forEach(item => {
              item['id'] = item.gateId;
              item['name'] = window.sessionStorage.getItem('gate-' + item.gateId);
            })
            this.mutiGateVal = [result[0].id];
            this.gateVal = result[0].id;
            this.gateData = result;
            if (this.mutiGateVal.length == this.gateData.length) {
              this.isGateSelAll = true;
            }
          }
        })
    },
    // 切换楼层的时候更新店铺
    floorChange() {
      this.getZoneOpt(this.mallVal, this.shopFloorVal);
    },
     storeLevelReceive(valObj) {
      for (let key in valObj) {
        if (key != 'formatVal' && key != 'formatTwoVal') {
          this['store' + key] = valObj[key];
          this.getZoneOpt(this.mallVal, valObj[key]);
        }
      }
    },
    gateLevelChange() {
      this.isFloorSelAll = false;
      this.isGateSelAll = false;
      this.isZoneSelAll = false;
      if (this.gateLevel === 'all') {
        this.getAllGates();
      } else if (this.gateLevel === 'mall') {
        this.getMallGates();
      } else if (this.gateLevel === 'floor') {
        this.getFloorList();
      } else {
        this.getZoneList();
      }
    },
    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 emitObj = {};
      if (this.asisLevel === "mall") {
        emitObj.asis_org = this.mutiMallVal.toString();
        emitObj.asis_tit = this.getItemName(this.mallData, emitObj.asis_org);
      } else if(this.asisLevel === "floor"){
        emitObj.asis_org = this.mutiFloorVal.toString();
        // emitObj.asis_tit =
        //   this.getItemName(this.mallData, this.mallVal) +
        //   "-" +
        //   this.getItemName(this.floorData, this.mutiFloorVal);
      } else {
        emitObj.asis_org = this.mutiZoneVal.toString();
      }

      emitObj.asis_date = this.ReportVal;
      emitObj.asis_time = this[this.ReportVal + "Time"];
      emitObj.asis_level = this.asisLevel;
      this.$emit("reportTime", emitObj);
    },
    resetRefresh() {
      this.asisLevel = "mall";
      this.ReportVal = "day";
      this.mutiMallVal = [this.mallData[0].id];
      this.dayTime = dateUnit.dateFormat(new Date(), 'yyyy-MM-dd');
      this.monthTime = new Date(); // 月时间
      this.yearTime = new Date(); // 年时间
      this.customTime = [
        this.dayReduce(new Date(), 15),
        dateUnit.dateFormat(new Date(), "yyyy-MM-dd")
      ];
    }
  }
};
</script>

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