季度到季度的组件选择

组件：

<template>
  <div class="quarter">
    <div class="input-wrap" id="closeId" @mouseover="handler" @click.stop="btn" :style="{color:colorItem}"><i class="el-icon-date"></i>{{seasonValue}}<i class="el-icon-circle-close" :style="{display:displayShow}" @click.stop="close"></i></div>
    <div v-show="showSeason" ref="shows" class="selectPop">
      <div v-for="(item, index) in timeList" :key="index" style="width: 47%; height: 140px;">
        <template>
          <div class="card-header">
            <el-row style="width: 100%; height: 100%;">
              <el-col :span="6" style="height: 100%; text-align:left">
                <div class="el-icon-d-arrow-left" v-show="prevShow(index)" @click="prev(item)" style="width: 16px;cursor: pointer; "></div>
              </el-col>
              <el-col :span="12">
                <div class="text-year" style="text-align:center">{{ item.year }}</div>
              </el-col>
              <el-col :span="6" style="height: 100%; text-align:right">
                <div class="el-icon-d-arrow-right" v-show="nextShow(index)" @click="next(item)" style="width: 16px;cursor: pointer; "></div>
              </el-col>
            </el-row>
          </div>
        </template>
        <div class="text-item" style="text-align:center;">
          <el-button type="text" size="medium" class="no-choose" :class="{choose: item.QOneSelect}" style="cursor: pointer;width:46%; float:left;" @click="selectSeason(index, 1, '第一季度')">第一季度</el-button>
          <el-button type="text" size="medium" class="no-choose" :class="{choose: item.QTwoSelect}" style="cursor: pointer;float:right;width:46%;" @click="selectSeason(index, 2, '第二季度')">第二季度</el-button>
        </div>
        <div class="text-item" style="text-align:center;">
          <el-button type="text" size="medium" class="no-choose" :class="{choose: item.QThreeSelect}" style="cursor: pointer;width:46%;float:left;" @click="selectSeason(index, 3, '第三季度')">第三季度</el-button>
          <el-button type="text" size="medium" class="no-choose" :class="{choose: item.QFourSelect}" style="cursor: pointer;float:right;width:46%;" @click="selectSeason(index, 4, '第四季度')">第四季度</el-button>
          <!--  -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    prevShow() {
      return (data) => {
        //右边部分年份左箭头显示判断
        if (data === 1 && this.timeList[1].year - this.timeList[0].year === 1) {
          return false;
        } else {
          return true;
        }
      };
    },
    nextShow() {
      return (data) => {
        //左边部分年份右箭头显示判断
        if (data === 0 && this.timeList[1].year - this.timeList[0].year === 1) {
          return false;
        } else {
          return true;
        }
      };
    },
  },
  data() {
    return {
      showSeason: false, //是否显示选择季度面板
      year: new Date().getFullYear(), //默认当前年
      seasonValue: "请选择季", //input中显示的内容
      time: {
        stTime: "",
        edTime: "",
      },
      colorItem: "#c0c4cc",
      displayShow: "none",
      timeList: [
        {
          year: new Date().getFullYear() - 1,
          QOneSelect: false,
          QTwoSelect: false,
          QThreeSelect: false,
          QFourSelect: false,
        },
        {
          year: new Date().getFullYear(),
          QOneSelect: false,
          QTwoSelect: false,
          QThreeSelect: false,
          QFourSelect: false,
        },
      ],
      selectNum: 0, //计数器
      firstSelect: "", //第一次选中的值拼接
      firstSelectQuarter: "", //第一次选中的季度
      firstIndex: "", //第一次选中的是数组中的哪一个
      secondSelect: "", //第二次选中的值拼接
      secondSelectQuarter: "", //第二次选中的季度
      secondIndex: "", //第二次选中的是数组中的哪一个
    };
  },
  created() {
    // 点击页面的任何一个地方，都隐藏提示
    this.text();
  },
  watch: {
    //方法1
    seasonValue(newVal, oldVal) {
      //  color: #606266;
      if (newVal == "请选择季") {
        this.colorItem = "#c0c4cc";
      } else {
        this.colorItem = "#606266";
      }
    },
  },
  methods: {
    handler() {
      if (this.seasonValue == "请选择季") {
        this.displayShow = "none";
      } else {
        this.displayShow = "block";
      }
    },
    text() {
      document.addEventListener("click", (e) => {
        if (this.$refs.shows) {
          let self = this.$refs.shows.contains(e.target);
          if (!self) {
            this.showSeason = false;
          }
        }
      });
    },
    btn() {
      this.showSeason = !this.showSeason;
      //再次打开的时候回显上次选中的 必须是之前选过而非首次打开
      if (this.showSeason && this.firstSelectQuarter && this.secondSelectQuarter) {
        const nameOne = this.transQuarter(this.firstSelectQuarter);
        this.timeList[this.firstIndex][nameOne] = true;
        const nameTwo = this.transQuarter(this.secondSelectQuarter);
        this.timeList[this.secondIndex][nameTwo] = true;
      }
    },
    close() {
      this.seasonValue = "请选择";
      this.showSeason = false;
    },
    //年向前
    prev(obj) {
      obj.year -= 1;
      // this.year = +this.year - 1;
    },
    //年向后
    next(obj) {
      obj.year += 1;
      // this.year = +this.year + 1;
    },
    //选择季度处罚
    selectSeason(index, quarterNum, quarterString) {
      //每选中一次计数器加一 计数器是2的时候重置计数器
      this.selectNum += 1; 
      //非首次打开 会回显上次选中的结果再次选中会清空上次选中
      this.timeList.forEach(item => {
        item.QOneSelect = false
        item.QTwoSelect = false
        item.QThreeSelect = false
        item.QFourSelect = false
      })
      //将选中的季度项改变颜色
      const attName = this.transQuarter(quarterNum);
      this.timeList[index][attName] = true;
      //选中赋值
      const selectValue = this.timeList[index].year.toString() + quarterString;
      const selectQuarter = quarterNum;
      const selectIndex = index;
      if (this.selectNum === 1) {
        //打开选择框选中第一个季度项赋值
        this.firstSelect = selectValue;
        this.firstSelectQuarter = selectQuarter;
        this.firstIndex = selectIndex;
      } else {
        //打开选择框选中第二个季度项赋值
        this.secondSelect = selectValue;
        this.secondSelectQuarter = selectQuarter;
        this.secondIndex = selectIndex;
      }
      //当计数器为2时,说明已经选中了两个季度,比较两次选中的值 进行赋值
      if (this.selectNum === 2) {
        //索引小的为选择框左边  索引大的为选择框右边
        if (this.firstIndex < this.secondIndex) {
          //从左往右选直接拼接
          this.seasonValue = this.firstSelect + " - " + this.secondSelect;
        } else if (this.firstIndex > this.secondIndex) {
          //从右往左选反过来拼接
          this.seasonValue = this.secondSelect + " - " + this.firstSelect;
        } else {
          //索引一样说明两次选的是同一边 须比较两次选的季度值的大小
          if (this.firstSelectQuarter < this.secondSelectQuarter) {
            this.seasonValue = this.firstSelect + " - " + this.secondSelect;
          } else {
            this.seasonValue = this.secondSelect + " - " + this.firstSelect;
          }
        }
        //选择结束,关闭弹窗以及计数器重置处理
        this.selectEnd();
      }

      // this.seasonValue = this.year.toString() + "-" + quarter.toString();
      // this.showSeason = false;
      // switch (quarter) {
      //   case "第一季度":
      //     this.time.stTime = this.year.toString() + "-01-01" + " " + "00:00:00";
      //     this.time.edTime = this.year.toString() + "-03-31" + " " + "23:59:59";
      //     break;
      //   case "第二季度":
      //     this.time.stTime = this.year.toString() + "-04-01" + " " + "00:00:00";
      //     this.time.edTime = this.year.toString() + "-06-30" + " " + "23:59:59";
      //     break;
      //   case "第三季度":
      //     this.time.stTime = this.year.toString() + "-07-01" + " " + "00:00:00";
      //     this.time.edTime = this.year.toString() + "-09-30" + " " + "23:59:59";
      //     break;
      //   case "第四季度":
      //     this.time.stTime = this.year.toString() + "-10-01" + " " + "00:00:00";
      //     this.time.edTime = this.year.toString() + "-12-31" + " " + "23:59:59";
      //     break;
      // }
      // this.$emit("getQuarter", this.time); //传值给父组件
    },
    selectEnd() {
      this.showSeason = false;
      this.selectNum = 0;
      // this.timeList.forEach(item => {
      //   item.QOneSelect = false
      //   item.QTwoSelect = false
      //   item.QThreeSelect = false
      //   item.QFourSelect = false
      // })
    },
    transQuarter(quarterNum) {
      let name = "";
      switch (quarterNum) {
        case 1:
          name = "QOneSelect";
          break;
        case 2:
          name = "QTwoSelect";
          break;
        case 3:
          name = "QThreeSelect";
          break;
        case 4:
          name = "QFourSelect";
          break;
      }
      return name;
    },
  },
};
</script>
<style lang="scss" scoped>
.quarter {
  position: relative;
  .input-wrap {
    width: 260px;
    height: 36px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    color: #606266;
    position: relative;
    .el-icon-date {
      color: #c0c4cc;
      margin-left: 10px;
      margin-right: 8px;
    }
    .el-icon-circle-close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10px;
      color: #c0c4cc;
      display: none;
      cursor: pointer;
    }
  }
  .no-choose {
    color: #606266;
  }
  .choose {
    color: #409eff;
  }
  .selectPop {
    display: flex;
    justify-content: space-between;
    width: 400px;
    position: absolute;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #dfe4ed;
    border-radius: 4px;
    color: #606266;
    padding: 8px 15px 15px 15px;
    top: 52px;
    z-index: 10;
    .card-header {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #e6ebf5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      .text-year {
        font-size: 16px;
      }
    }

    &::before {
      content: "";
      border-bottom: 10px solid #dfe4ed;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      left: 13%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      top: -8px;
      border-radius: 5px;
    }
    &::after {
      content: "";
      border-bottom: 8px solid #fff;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: absolute;
      left: 13%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      top: -6px;
      border-radius: 5px;
    }
  }
}
</style>

使用：

 <QuarterRange @getQuarter="getQuarter"></QuarterRange>
 
//获取季度子组件传回的数据
getQuarter(val) {
  console.log("季节：", val);
},