acc.vue

<template>
  <div class="index">
    <div class="title-wrap">
      <div class="title-box">
        <span class="title">{{ reportName }}&nbsp;{{ repTime }}&nbsp;{{$t('head.title')}}</span>
      </div>
      <div class="title-collapse-content">
        <span v-for="(item) in reportData" :key="item.label" class="date-box" @click="reportHandle(item.label)">
          <span :class="item.label === handleVal ? 'date-btn active-date' : 'date-btn'">{{ i18nFormatter(item.label) }}</span>
        </span>
        <span class="date-input-box">
          <el-date-picker class="date-input day-piack" v-show="handleVal == 'day'" v-model="dayVal" value-format="yyyy-MM-dd" align="right" type="date" size="mini" :placeholder="$t('pholder.date')" :picker-options="pickerOptions1" />
          <el-date-picker class="date-input week-piack" v-show="handleVal == 'week'" v-model="weekVal" align="right" type="week" :format="datePickerFormatter('week')" size="mini" :placeholder="$t('pholder.week')" :picker-options="weekPickerOpt" />
          <el-date-picker class="date-input month-piack" v-show="handleVal == 'month'" v-model="monthVal" align="right" type="month" :format="datePickerFormatter('month')" size="mini" :placeholder="$t('pholder.month')" :picker-options="monthPickerOpt"/>
          <el-date-picker class="date-input year-piack" v-show="handleVal == 'year'" v-model="yearVal" align="right" type="year" :format="datePickerFormatter('year')" size="mini" :placeholder="$t('pholder.year')" :picker-options="yearPickerOpt"/>
        </span>
        <div class="right-btn">
          <span class="collapse-btn-box">
            <el-button type="primary" class="primary-btn collapse-btn" size="small" @click="confirmCondition" :disabled="(handleVal == 'day' && !dayVal) || (handleVal == 'week' && !weekVal) || (handleVal == 'month' && !monthVal) || (handleVal == 'year' && !yearVal)">
              {{$t('button.confirm')}}
            </el-button>
            <el-button class="reset-btn collapse-btn" size="small" @click="resetRefresh">
              {{$t('button.reset')}}
            </el-button>
          </span>
        </div>
      </div>
    </div>
    <router-view v-if="isShow" @getMallId="mallHandle" :propparam="propParams" :orgId="orgId"></router-view>
  </div>
</template>

<script>
import Bus from "../public/eventBus";
import MyChart from "../public/mapChart";

export default {
  props: {
    orgId: {
      type: [String, Number],
      required: true
    },
    reportName: {
      type: String,
      default: ""
    }
  },
  components: {
    MyChart
  },
  data() {
    return {
      reportData: [{
        label: "day",
        is_active: "date-btn"
      },
      {
        label: "week",
        is_active: "date-btn"
      },
      {
        label: "month",
        is_active: "date-btn"
      },
      {
        label: "year",
        is_active: "date-btn"
      }
      ],
      timeVal: "",
      repTime: "", // 报表时间
      dayVal: "", // 日时间
      weekVal: "", // 周时间
      monthVal: "", // 月时间
      yearVal: "", // 年时间
      floorVal: "",
      activeSimple: "1",
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: this.$t("reportHandle.today"),
          onClick(picker) {
            picker.$emit("pick", new Date());
          }
        },
        {
          text: this.$t("reportHandle.yesterday"),
          onClick(picker) {
            let date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit("pick", date);
          }
        },
        {
          text: this.$t("reportHandle.lastweek"),
          onClick(picker) {
            let date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", date);
          }
        }
        ]
      },
      weekPickerOpt: {
        firstDayOfWeek: window._vionConfig.firstDayOfWeek || 1,
        disabledDate(time){
          return time.getTime() > Date.now();
        }
      },
      monthPickerOpt: {
        disabledDate(time){
          return time.getTime() > Date.now();
        }
      },
      yearPickerOpt: {
        disabledDate(time){
          return time.getTime() > Date.now();
        }
      },
      isRefresh: false,
      propParams: {},
      label: "button",
      handleVal: "day",
      isShow: false
    };
  },
  watch: {
    reportName(val) {
      this.init();
    },
    propParams(val) {
      if (val.dateType == "/account") {
        this.reportHandle("day");
      } else if (val.dateType == "/account/weekly") {
        this.reportHandle("week");
      } else if (val.dateType == "/account/monthly") {
        this.reportHandle("month");
      } else if (val.dateType == "/account/yearly") {
        this.reportHandle("year");
      }
    },
    $route(to, from) { },
    dayVal(val) {
      this.sessionDate("dayDate", val);
    },
    weekVal(val) {
      this.sessionDate("weekDate", val);
    },
    monthVal(val) {
      this.sessionDate("monthDate", val);
    },
    yearVal(val) {
      this.sessionDate("yearDate", val);
    }
  },
  errorCaptured(err, vm, info) {
    return false;
  },
  created() {
    let {
      dayDate,
      weekDate,
      monthDate,
      yearDate
    } = this.createDate();
    this.dayVal = dayDate;
    this.weekVal = weekDate;
    this.monthVal = monthDate;
    this.yearVal = yearDate;
    this.setSessionLocal("path", "/account");
  },
  mounted() {
    let routeHandler = {
      "/account": "day",
      "/account/weekly": "week",
      "/account/monthly": "month",
      "/account/yearly": "year"
    };
    const storageDateType = this.getSessionLocal('homeDateType') || routeHandler[this.$router.history.current.fullPath]
    this.reportHandle(storageDateType);
    this.init();
  },
  methods: {
    i18nFormatter(label) {
      let languageLabel = "reportHandle." + label;
      return this.$t(languageLabel);
    },
    async init() {
      const storageDateType = this.getSessionLocal('homeDateType')
      let type = (storageDateType ? `/account/${storageDateType}ly` : '') || this.$router.history.current
        .fullPath;
      this.repTime = $(`.${this.handleVal}-piack input`)[0].value;
      this.propParams = {
        dateType: type,
        timeVal: this[this.handleVal + "Val"]
      };
      await console.log(1)
      this.isShow = true
    },
    reportHandle(label) {
      this.handleVal = label;
    },
    classHandle(index) {
      let dateBtnList = document.getElementsByClassName("date-btn");
      for (let i = 0, len = dateBtnList.length; i < len; i++) {
        if (i === index) {
          dateBtnList[i].className = "date-btn active-date";
        } else {
          dateBtnList[i].className = "date-btn";
        }
      }
    },
    chooseFloor(val) {
      this.$router.push("/floor");
    },
    resetRefresh() {
      this.reportHandle("day");
      this.setSessionLocal('homeDateType', '')
      this.isRefresh = false;
      this.dayVal = dateUnit.dateFormat(new Date(), "yyyy-MM-dd"); // 日时间
      this.weekVal = new Date(); // 周时间
      this.monthVal = new Date(); // 月时间
      this.yearVal = new Date(); // 年时间
    },
    mallHandle(name, id) {
      window.sessionStorage.setItem("mallId", id);
      this.$cookie.set("orgId", id);
      this.$cookie.set("mallName", name);
      this.$emit("accToMall", name, id);
    },
    confirmCondition() {
      if (this.handleVal === "day") {
        this.setSessionLocal('homeDateType', '')
        this.$router.push("/account");
        this.repTime = this.dayVal;
        this.propParams = {
          dateType: "/account",
          timeVal: this.dayVal
        };
      } else {
        this.setSessionLocal('homeDateType', this.handleVal)
        this.$router.push(`/account/${this.handleVal}ly`);
        this.repTime = $(`.${this.handleVal}-piack input`)[0].value;
        this.propParams = {
          dateType: `/account/${this.handleVal}ly`,
          timeVal: this[this.handleVal + "Val"]
        };
      }
    }
  }
};
</script>

<style scoped>
.index {
  position: absolute;
  left: 0;
  top: 65px;
  width: 100%;
  height: calc(100% - 65px);
  overflow: auto;
}

@media only screen and (max-width: 1366px) {
  .date-input-box {
    position: relative;
    top: -1px;
  }
}
</style>