cusTrackMoreOption.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="item.className"
            v-for="(item, index) in tabItem"
            :key="item.value"
            @click="tabClickHandle(index)"
          >
            <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-if="panelObj.mallPanel">
          <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>
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.manType')}}</span>
            <div class="condition-item-option">
              <!-- <el-select v-model="typeVal" :placeholder="$t('pholder.enterPersonType')" class="mall-sel-box type-sel-box">
                                <el-option :label="$t('asisTab.all')" value=""></el-option>
                                <el-option :label="$t('dictionary.staff')" :value="1"></el-option>
                                <el-option :label="$t('dictionary.custom')" :value="0"></el-option>
              </el-select>-->
              <el-select
                class="mall-sel-box"
                v-model="typeVal"
                :placeholder="$t('asisTab.manType')"
              >
                <el-option
                  v-for="item in allTypeList"
                  :key="item.id"
                  :label="item.name === 'all' ? $t('asisTab.all') + $t('asisTab.manType') : item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </li>
          <!-- 23333333333 -->
          <li class="condition-item">
            <span class="condition-item-text">{{$t('asisTab.filterRule')}}</span>
            <div class="condition-item-option">
              <el-select v-model="filterVal" placeholder="选择过滤规则" class="mall-sel-box type-sel-box">
                <el-option :label="$t('asisTab.unlimited')" :value="0"></el-option>
                <el-option :label="$t('asisTab.loose')" :value="1"></el-option>
                <el-option :label="$t('asisTab.standard')" :value="2"></el-option>
                <el-option :label="$t('asisTab.strict')" :value="3"></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">{{$t('asisTab.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')">
              </el-date-picker>-->
              <el-date-picker
                class="date-input analysis-date-input date-day-box"
                v-model="dayTime"
                value-format="yyyy-MM-dd"
                align="right"
                type="date"
                size="mini"
                :placeholder="$t('pholder.date')"
                :picker-options="pickerOptions1"
              ></el-date-picker>
            </div>
          </li>
          <li class="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>
import noDataImg from "@/assets/img/manage/defaultFloor.svg";
export default {
  props: {
    mallData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      weekPickerOpt: {
        firstDayOfWeek: window._vionConfig.firstDayOfWeek || 1
      },
      tabItem: [],
      panelObj: {
        mallPanel: false
      },
      // customTime: '',
      dayTime: "",
      mallVal: "",
      paramId: "", // 需要传的orgId
      typeVal: null,
      filterVal: 0,
      floorImg: [],
      personTypeList: []
    };
  },
  computed: {
    allTypeList() {
      let list = this.personTypeList.map(item => {
        return item;
      });
      list.unshift({
        name: "all",
        id: null
      });
      return list;
    }
  },
  created() {
    this.tabItem = [];
    if (this.$Project === "mall") {
      this.tabItem.push({
        label: "mall",
        value: "mall",
        className: "analysis-item"
      });
    } else {
      this.tabItem.push({
        label: "mall",
        value: "mall",
        className: "analysis-item"
      });
    }
  },
  watch: {
    dayTime(val) {
      this.sessionDate("dayDate", val);
    }
  },
  methods: {
    i18nFormatter(label) {
      let langeLabel = "asisTab." + label;
      return this.$t(langeLabel);
    },
    initAsis(id) {
      this.paramId = id;
      this.mallVal = id;
      this.fetchPersonType()
      this.tabClickHandle(0);
      // 获取楼层图片
      this.getFloorImg(id, true);
    },
    fetchPersonType() {
      if (!this.mallVal) return false
      this.typeVal = null
      this.personTypeList = []
      return new Promise(resolve => {
        this.$api.management.personTypeList({
          accountId: this.$cookie.get('accountId'),
          mallId: this.mallVal,
          // 是否加载顾客店员基础类型
          hasBaseType: 1
        }).then(res => {
          const { code, data } = res.data
          if (code === 200) {
            this.personTypeList = data.reduce((arr, curr) => {
              arr.push(curr)
              return arr
            }, [])
            resolve()
          }
        })
      })
    },
    emitInitData() {
      let data = {
        asis_time: this.dayTime, // customTime
        asis_bg: this.floorImg || noDataImg,
        asis_org: this.paramId,
        asis_type: this.typeVal,
        asis_filter: this.filterVal,
        asis_tit: this.getItemName(this.mallData, this.mallVal)
      };
      // this.$emit('receivePersonType', this.personTypeList)
      this.$emit("initData", data, this.personTypeList);
    },
    mallChange(val) {
      window.sessionStorage.setItem("mallId", this.mallVal);
      this.fetchPersonType()
      this.getFloorImg(val);
    },
    getFloorImg(mallId, isInit) {
      this.floorImg = [];
      this.$api.base
        .floor({
          mallId: mallId,
          status: 1
        })
        .then(res => {
          const { data } = res.data;
          this.floorImg = data.reduce((prev, cur) => {
            cur.floorPlan &&
              prev.push({
                onlyId: cur.floorPlan,
                id: cur.id,
                height: 0,
                src: this.completePath(cur.floorPlan)
              });
            return prev;
          }, []);
          //   if (data.length > 0) {
          //     let floor_image = `${window._vionConfig.imagesUrl}/images/${data[0].floorPlan}`
          //     this.floorImg = floor_image
          //   }
          if (isInit) {
            this.emitInitData();
          }
        });
    },
    completePath(originPath) {
      return originPath
        ? `${window._vionConfig.imagesUrl}/images/${originPath}`
        : "";
    },
    // 切换条件
    tabClickHandle(index) {
      if (this.tabItem[index].className === "analysis-item") {
        this.tabItem.forEach(element => {
          element.className = "analysis-item";
        });
        this.tabItem[index].className = "analysis-item tabs-active";
        for (let i in this.panelObj) {
          this.panelObj[i] = false;
        }
        this.asisLevel = "";
        switch (this.tabItem[index].value) {
          case "mall":
            this.panelObj.mallPanel = true;
            this.asisLevel = "mall";
            break;
          default:
            break;
        }
      }
    },
    confirmCondition() {
      let emitObj = {};
      if (!this.mallVal) return;
      emitObj.asis_type = this.typeVal;
      emitObj.asis_time = this.dayTime; // customTime
      emitObj.asis_bg = this.floorImg;
      emitObj.asis_org = this.mallVal;
      emitObj.asis_filter = this.filterVal;
      emitObj.asis_tit = this.getItemName(this.mallData, this.mallVal);
      // this.$emit('receivePersonType', this.personTypeList)
      this.$emit("reportTime", emitObj, this.personTypeList);
    },
    getItemName(array, val) {
      let filterName = "";
      let firstItem = val && val.toString().split(",")[0];
      array.forEach(item => {
        if (item.id == firstItem) {
          filterName = item.name;
        }
      });
      return filterName;
    },
    resetRefresh() {
      this.tabClickHandle(0);
      this.mallVal = this.mallData[0].id;
      // this.customTime = [this.dayReduce(new Date(), 30), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')];
      this.dayTime = dateUnit.dateFormat(new Date(), "yyyy-MM-dd");
    }
  },
  mounted() {
    // this.customTime = [this.dayReduce(new Date(), 30), dateUnit.dateFormat(new Date(), 'yyyy-MM-dd')]
    let { dayDate } = this.createDate();
    this.dayTime = dayDate;
  }
};
</script>

<style scoped>
.type-sel-box {
  width: 100px !important;
}
</style>