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
                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
                @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>
      </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">
            <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"
              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,
      ReportVal: "day",
      dayTime: "",
      monthTime: "",
      yearTime: "",
      customTime: "",
      mallData: [],
      mutiMallVal: [], // 多选商场下拉值
      mallVal: "", // 单选商场
      floorData: [],
      mutiFloorVal: [], // 多选楼层下拉值
      mallId: "", // 组件全局商场ID
      floorId: "",
      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 = [
      {
        label: "mall",
        value: "mall"
      }
    ];
    this.asisLevel = "mall";
  },
  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) {
      this.mallData = mallData;
      this.mallVal = id;
      this.mutiMallVal = [id];
      this.isMallSelAll = this.mallData.length
        ? this.mutiMallVal.length < this.mallData.length
          ? false
          : true
        : false;
      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);
    },
    // 切换条件
    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;
      }
    },
    // 获取楼层下拉
    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);
    },
    floorChangeHandle() {
      this.isFloorSelAll =
        this.mutiFloorVal.length < this.floorData.length ? false : true;
    },
    // 多选楼层 商场 change 事件
    mutiMallChange() {
      this.getFloorOpt(this.mallVal);
    },
    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 {
        emitObj.asis_org = this.mutiFloorVal.toString();
        emitObj.asis_tit =
          this.getItemName(this.mallData, this.mallVal) +
          "-" +
          this.getItemName(this.floorData, this.mutiFloorVal);
      }

      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>