|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="year-month-select">
|
|
|
- <div class="year-warp" style="width: 95px">
|
|
|
+ <div class="year-warp" :style="`width: ${this.showMonth ? 95 : 220}px`">
|
|
|
<el-date-picker
|
|
|
v-model="year"
|
|
|
type="year"
|
|
|
@@ -8,6 +8,7 @@
|
|
|
placeholder="选择年"
|
|
|
size="small"
|
|
|
value-format="yyyy"
|
|
|
+ :picker-options="datePickerOptions"
|
|
|
style="width: 100% !important;"
|
|
|
>
|
|
|
</el-date-picker>
|
|
|
@@ -28,6 +29,8 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getVipYears } from "@/api/system/tenant";
|
|
|
+
|
|
|
export default {
|
|
|
name: "YearMonthSelect",
|
|
|
props: {
|
|
|
@@ -51,7 +54,7 @@ export default {
|
|
|
monthList: [],
|
|
|
year: "",
|
|
|
month: "",
|
|
|
- vipYearList: [2025, 2026, 2027]
|
|
|
+ vipYearList: []
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -83,9 +86,24 @@ export default {
|
|
|
this.initMonth();
|
|
|
},
|
|
|
mounted() {
|
|
|
- // this.year = "2025";
|
|
|
- // this.month = "08";
|
|
|
- // this.$emit("input", this.formatYearMonth(this.year, this.month));
|
|
|
+ getVipYears().then(({ data }) => {
|
|
|
+ this.vipYearList = data.data.map(year => Number(year));
|
|
|
+ let date = new Date();
|
|
|
+ let currYear = date.getFullYear();
|
|
|
+ let currMonth = date.getMonth() + 1;
|
|
|
+ let currMonthStr = currMonth > 9 ? currMonth.toString : `0${currMonth}`;
|
|
|
+ const target = this.findNumberInArray(this.vipYearList, currYear);
|
|
|
+ let targetYear;
|
|
|
+ if (target.targetExists) {
|
|
|
+ targetYear = target.targetValue;
|
|
|
+ } else {
|
|
|
+ targetYear = target.minGreaterThanTarget || target.maxLessThanTarget;
|
|
|
+ }
|
|
|
+ this.year = targetYear.toString();
|
|
|
+ this.month = currMonthStr;
|
|
|
+
|
|
|
+ this.$emit("input", this.formatYearMonth(this.year, this.month));
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
initMonth() {
|
|
|
@@ -103,7 +121,7 @@ export default {
|
|
|
this.monthList = list;
|
|
|
},
|
|
|
formatYearMonth(year, month) {
|
|
|
- if (month == "00") {
|
|
|
+ if (month == "00" || !this.showMonth) {
|
|
|
return year;
|
|
|
}
|
|
|
return year + "" + month;
|
|
|
@@ -112,6 +130,41 @@ export default {
|
|
|
this.month = data.value;
|
|
|
this.$emit("input", this.formatYearMonth(this.year, this.month));
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 在数组中查找目标数字,如果不存在则找最接近的值
|
|
|
+ *
|
|
|
+ * @param {Array} arr - 输入数组
|
|
|
+ * @param {number} target - 目标数字
|
|
|
+ * @returns {Object} 结果对象
|
|
|
+ */
|
|
|
+ findNumberInArray(arr, target) {
|
|
|
+ // 检查目标是否在数组中
|
|
|
+ if (arr.includes(target)) {
|
|
|
+ return {
|
|
|
+ targetExists: true,
|
|
|
+ targetValue: target,
|
|
|
+ message: `${target} 存在于数组中`
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ // 过滤出小于和大于目标值的数字
|
|
|
+ const lessThan = arr.filter(x => x < target);
|
|
|
+ const greaterThan = arr.filter(x => x > target);
|
|
|
+
|
|
|
+ // 找出小于目标的最大值
|
|
|
+ const maxLess = lessThan.length > 0 ? Math.max(...lessThan) : null;
|
|
|
+
|
|
|
+ // 找出大于目标的最小值
|
|
|
+ const minGreater = greaterThan.length > 0 ? Math.min(...greaterThan) : null;
|
|
|
+
|
|
|
+ return {
|
|
|
+ targetExists: false,
|
|
|
+ targetValue: target,
|
|
|
+ maxLessThanTarget: maxLess,
|
|
|
+ minGreaterThanTarget: minGreater,
|
|
|
+ message: `${target} 不存在于数组中`
|
|
|
+ };
|
|
|
+ }
|
|
|
},
|
|
|
};
|
|
|
</script>
|