<template>
|
<picker mode="multiSelector" :range="range" :value="value" @change="change" @columnchange="columnchange">
|
<slot></slot>
|
</picker>
|
</template>
|
|
<script>
|
import * as utils from "./e-picker.js";
|
let defaultValue;
|
export default {
|
data() {
|
return {
|
range: [],
|
value: []
|
};
|
},
|
props: {
|
mode: {
|
type: String,
|
default: "date"
|
},
|
showValue: String,
|
startYear: {
|
type: [Number, String],
|
default: 1949
|
},
|
endYear: {
|
type: [String, Number],
|
default: new Date().getFullYear()
|
}
|
},
|
watch: {
|
showValue(v) {
|
this.init()
|
}
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
init() {
|
this.range = [];
|
this.value = [];
|
let l;
|
defaultValue = utils.getLocalTime(this.mode)
|
if (this.showValue) {
|
defaultValue = this.showValue
|
}
|
utils.checkShowValue(this.mode, defaultValue);
|
this.mode == "dateTime" ? (l = 6) : (l = 3);
|
for (let i = 0; i < l; i++) {
|
this.range.push([]);
|
this.value.push(0);
|
this.setColumns(i);
|
}
|
},
|
setColumns(index) {
|
const m = this.mode;
|
if (m != "time") {
|
const showYear = defaultValue.substring(0, 4),
|
showMonth = defaultValue.substring(5, 7),
|
showDay = defaultValue.substring(8, 10);
|
switch (index) {
|
case 0:
|
const s = +this.startYear,
|
e = +this.endYear;
|
for (let i = s; i < e + 1; i++) {
|
this.range[index].push(i + "年");
|
}
|
this.value[index] = this.range[index].indexOf(showYear + "年");
|
break;
|
case 1:
|
this.range[index] = utils.getArr(1);
|
this.value[index] = this.range[index].indexOf(showMonth + "月");
|
break;
|
case 2:
|
this.range[index] = utils.getDayArr(+showYear, +showMonth);
|
this.value[index] = this.range[index].indexOf(showDay + "日");
|
break;
|
case 3:
|
const show_h = defaultValue.substring(11, 13);
|
this.range[index] = utils.getArr(3);
|
this.value[index] = this.range[index].indexOf(show_h + "时");
|
break;
|
case 4:
|
const show_m = defaultValue.substring(14, 16);
|
this.range[index] = utils.getArr(4);
|
this.value[index] = this.range[index].indexOf(show_m + "分");
|
break;
|
case 5:
|
const show_s = defaultValue.substring(17, 19);
|
this.range[index] = utils.getArr(5);
|
this.value[index] = this.range[index].indexOf(show_s + "秒");
|
break;
|
}
|
} else {
|
switch (index) {
|
case 0:
|
const show_h = defaultValue.substring(0, 2);
|
this.range[index] = utils.getArr(3);
|
this.value[index] = this.range[index].indexOf(show_h + "时");
|
break;
|
case 1:
|
const show_m = defaultValue.substring(3, 5);
|
this.range[index] = utils.getArr(4);
|
this.value[index] = this.range[index].indexOf(show_m + "分");
|
break;
|
case 2:
|
const show_s = defaultValue.substring(6, 8);
|
this.range[index] = utils.getArr(5);
|
this.value[index] = this.range[index].indexOf(show_s + "秒");
|
break;
|
}
|
}
|
this.$forceUpdate()
|
},
|
columnchange(e) {
|
if (this.mode == "time") return;
|
const column = e.detail.column,
|
value = e.detail.value;
|
if (column == 1 || !column) {
|
this.value[column] = value;
|
}
|
const y = parseInt(this.range[0][this.value[0]]),
|
m = parseInt(this.range[1][this.value[1]]);
|
this.range[2] = utils.getDayArr(y, m);
|
this.$forceUpdate()
|
},
|
change(e) {
|
const value = e.detail.value;
|
const timeArr = value.map((v, i) => {
|
return this.range[i][v];
|
});
|
this.$emit("change", utils.getDateTimeValue(timeArr, this.mode));
|
}
|
}
|
};
|
</script>
|
