![]()
//组件：<template><divclass="quarter"><divclass="input-wrap"id="closeId"@mouseover="handler"@click.stop="btn":style="{color:colorItem}"><iclass="el-icon-date"></i>{{seasonValue}}<iclass="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><divclass="card-header"><el-row style="width: 100%; height: 100%;"><el-col:span="6"style="height: 100%; text-align:left"><divclass="el-icon-d-arrow-left"v-show="prevShow(index)"@click="prev(item)"style="width: 16px;cursor: pointer; "></div></el-col><el-col:span="12"><divclass="text-year"style="text-align:center">{{item.year}}</div></el-col><el-col:span="6"style="height: 100%; text-align:right"><divclass="el-icon-d-arrow-right"v-show="nextShow(index)"@click="next(item)"style="width: 16px;cursor: pointer; "></div></el-col></el-row></div></template><divclass="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><divclass="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>exportdefault{computed:{prevShow(){return(data)=>{//右边部分年份左箭头显示判断if(data===1&&this.timeList[1].year-this.timeList[0].year===1){returnfalse;}else{returntrue;}};},nextShow(){return(data)=>{//左边部分年份右箭头显示判断if(data===0&&this.timeList[1].year-this.timeList[0].year===1){returnfalse;}else{returntrue;}};},},data(){return{showSeason:false,//是否显示选择季度面板year:newDate().getFullYear(),//默认当前年seasonValue:"请选择季",//input中显示的内容time:{stTime:"",edTime:"",},colorItem:"#c0c4cc",displayShow:"none",timeList:[{year:newDate().getFullYear()-1,QOneSelect:false,QTwoSelect:false,QThreeSelect:false,QFourSelect:false,},{year:newDate().getFullYear(),QOneSelect:false,QTwoSelect:false,QThreeSelect:false,QFourSelect:false,},],selectNum:0,//计数器firstSelect:"",//第一次选中的值拼接firstSelectQuarter:"",//第一次选中的季度firstIndex:"",//第一次选中的是数组中的哪一个secondSelect:"",//第二次选中的值拼接secondSelectQuarter:"",//第二次选中的季度secondIndex:"",//第二次选中的是数组中的哪一个};},created(){// 点击页面的任何一个地方，都隐藏提示this.text();},watch:{//方法1seasonValue(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){letself=this.$refs.shows.contains(e.target);if(!self){this.showSeason=false;}}});},btn(){this.showSeason=!this.showSeason;//再次打开的时候回显上次选中的 必须是之前选过而非首次打开if(this.showSeason&&this.firstSelectQuarter&&this.secondSelectQuarter){constnameOne=this.transQuarter(this.firstSelectQuarter);this.timeList[this.firstIndex][nameOne]=true;constnameTwo=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=falseitem.QTwoSelect=falseitem.QThreeSelect=falseitem.QFourSelect=false})//将选中的季度项改变颜色constattName=this.transQuarter(quarterNum);this.timeList[index][attName]=true;//选中赋值constselectValue=this.timeList[index].year.toString()+quarterString;constselectQuarter=quarterNum;constselectIndex=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;}elseif(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){letname="";switch(quarterNum){case1:name="QOneSelect";break;case2:name="QTwoSelect";break;case3:name="QThreeSelect";break;case4:name="QFourSelect";break;}returnname;},},};</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:02px 12px0rgba(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);},
