1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
|
<template>
<!-- 季度选择时间控件 -->
<div class="jidudatepicker">
<span>
<mark
style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
v-show="showSeason"
@click.stop="showSeason=false"
></mark>
<el-input
placeholder="选择季度"
v-model="showValue"
style="width:2.7rem;height: 0.36rem;line-height: 0.36rem;"
@focus="showSeason=true"
>
<i slot="prefix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-card
class="box-card"
style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
v-show="showSeason"
>
<div slot="header" class="firstBtn">
<button
type="button"
aria-label="前一年"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
@click="prev"
></button>
<span role="button" class="el-date-picker__header-label">{{year}}年</span>
<button
type="button"
aria-label="后一年"
@click="next"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
></button>
</div>
<div class="text container">
<!-- 如下，绑定class,disabled为禁止选择的时间的设置 -->
<el-button
type="text"
size="medium"
:class="{'colorDis': this.year === this.beforeyear && this.season <= 1 || this.year > this.defaultyear}"
:disabled="this.year === this.beforeyear && this.season <= 1 || this.year > this.defaultyear"
style="width:47%;color: #606266;float:left;"
@click="selectSeason(0)"
>第一季度</el-button>
<el-button
type="text"
size="medium"
:class="{'colorDis': this.year === this.beforeyear && this.season <= 2 || this.year > this.defaultyear}"
:disabled="this.year === this.beforeyear && this.season <= 2 || this.year > this.defaultyear"
style="float:right;width:47%;color: #606266;"
@click="selectSeason(1)"
>第二季度</el-button>
</div>
<div class="item container" style="text-align:center;">
<el-button
type="text"
size="medium"
:class="{'colorDis': this.year === this.beforeyear && this.season <= 3 || this.year > this.defaultyear}"
:disabled="this.year === this.beforeyear && this.season <= 3 || this.year > this.defaultyear"
style="width:47%;color: #606266;float:left;"
@click="selectSeason(2)"
>第三季度</el-button>
<el-button
type="text"
size="medium"
:class="{'colorDis': this.year === this.beforeyear && this.season <= 4 || this.year > this.defaultyear}"
:disabled="this.year === this.beforeyear && this.season <= 4 || this.year > this.defaultyear"
style="float:right;width:47%;color: #606266;"
@click="selectSeason(3)"
>第四季度</el-button>
</div>
</el-card>
</span>
</div>
</template>
<script>
/**
* @file: View 组件 季节选择控件
* @description: UI组件 可选择季节
* @api: valueArr : 季度value defalut['01-03', '04-06', '07-09', '10-12'] 默认值待设置
* 代码中注释部分是组件原默认时间配置，我这里做了更改，但是原设置可以参考
*/
export default {
name: "jududatepicker",
props: {
valueArr: {
default: () => {
return ["01-03", "04-06", "07-09", "10-12"];
},
type: Array
},
getValue: {
default: val => {
return val;
},
type: Function
}
// defaultValue: {
// // 默认值 201904-201906
// default: "",
// type: String
// }
},
data() {
return {
showSeason: false,
season: "",
year: new Date().getFullYear(), // input显示时间，会随着用户操作改变
defaultyear: new Date().getFullYear(), // 当前年份，不变
month: new Date().getMonth() + 1, // 当前月份，不变
showValue: "",
beforeyear: null // 默认显示上一季度所用时间，可能是去年
};
},
created() {
// if (this.defaultValue) {
// let value = this.defaultValue;
// let arr = value.split("-");
// this.year = arr[0].slice(0, 4);
// let str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);
// let arrAll = this.valueArr;
// // valueArr ["01-03", "04-06", "07-09", "10-12"]
// this.showValue = `${this.year} 年 ${arrAll.indexOf(str) + 1} 季度`;
// }
},
mounted() {
// 每次挂在时都对组件进行重置，那么就不需要在上级组件中进行重置
this.getDefaultTime();
},
watch: {
// defaultValue: function(value, oldValue) {
// let arr = value.split("-");
// this.year = arr[0].slice(0, 4);
// let str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);
// let arrAll = this.valueArr;
// // valueArr ["01-03", "04-06", "07-09", "10-12"]
// this.showValue = `${this.year} 年 ${arrAll.indexOf(str) + 1} 季度`;
// }
},
methods: {
one() {
this.showSeason = false;
},
prev() {
this.year = this.year * 1 - 1;
},
next() {
this.year = this.year * 1 + 1;
},
selectSeason(i) {
let that = this;
that.season = i + 1;
let arr = that.valueArr[i].split("-");
let seasonValue = that.getValue(that.year + "-" + arr[0] + "-" + "01");
that.showSeason = false;
this.showValue = `${this.year} 年 ${this.season} 季度`;
that.$emit("chooseSeason", seasonValue); // 每次选择时间都将当前选择时间发送到父组件
},
reset() {
// 季度重置 上一季度
this.getDefaultTime();
},
getDefaultTime() {
// 获取默认的上一个季度
var year = this.defaultyear;
var month = this.month;
var season = null;
if (month <= 3) {
this.season = 1;
year -= 1;
season = 4;
this.beforeyear = year;
} else if (month > 3 && month <= 6) {
this.season = 2;
season = 1;
this.beforeyear = year;
} else if (month > 6 && month <= 9) {
this.season = 3;
season = 2;
this.beforeyear = year;
} else if (month > 9 && month <= 12) {
this.season = 4;
season = 3;
this.beforeyear = year;
}
this.showValue = `${year} 年 ${season} 季度`;
}
}
};
</script>
<style lang="less" scoped>
.jidudatepicker {
display: inline;
.firstBtn {
height: 30px;
line-height: 34px;
width: 100%;
text-align: center;
}
.text {
text-align: center;
margin: 15px 0 10px;
}
.item {
text-align: center;
}
}
.colorDis {
color: #99101f !important;
}
</style>
<style lang="less">
.jidudatepicker {
.el-card__header {
padding: 12px;
}
}
</style>
|
