|
|
|
@ -7,7 +7,29 @@
|
|
|
|
|
<a-date-picker format="YYYY-MM-DD" @change="changeDate" v-model="value"/>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="labelData.type == 'dateRange'">
|
|
|
|
|
<a-range-picker style="overflow: hidden;margin-top:3px;" format="YYYY-MM-DD" @change="changeRangeDate" @calendarChange="openChangeRangeDate" v-model="dateVal"/>
|
|
|
|
|
<!-- <a-range-picker style="overflow: hidden;margin-top:3px;" format="YYYY-MM-DD" @change="changeRangeDate" @calendarChange="openChangeRangeDate" v-model="dateVal"/> -->
|
|
|
|
|
<div class="picker-box" style="display:flex;">
|
|
|
|
|
<a-date-picker
|
|
|
|
|
style="min-width:30px; flex: 1;"
|
|
|
|
|
v-model="startValue"
|
|
|
|
|
:disabled-date="disabledStartDate"
|
|
|
|
|
format="YYYY-MM-DD"
|
|
|
|
|
suffixIcon=" "
|
|
|
|
|
placeholder="开始时间"
|
|
|
|
|
@openChange="handleStartOpenChange"
|
|
|
|
|
/>
|
|
|
|
|
<span style="margin:0 4px;">-</span>
|
|
|
|
|
<a-date-picker
|
|
|
|
|
style="min-width:30px;flex: 1;"
|
|
|
|
|
v-model="endValue"
|
|
|
|
|
:disabled-date="disabledEndDate"
|
|
|
|
|
format="YYYY-MM-DD"
|
|
|
|
|
placeholder="结束时间"
|
|
|
|
|
suffixIcon=" "
|
|
|
|
|
:open="endOpen"
|
|
|
|
|
@openChange="handleEndOpenChange"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template v-else-if="labelData.type == 'select'">
|
|
|
|
|
<a-select
|
|
|
|
@ -95,14 +117,23 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
resetType (nval, oval) {
|
|
|
|
|
console.log('== 重置 ==', nval)
|
|
|
|
|
if (!nval) {
|
|
|
|
|
this.value = ''
|
|
|
|
|
this.dateVal = []
|
|
|
|
|
// this.$emit('change', {
|
|
|
|
|
// form: this.labelData,
|
|
|
|
|
// value: ''
|
|
|
|
|
// })
|
|
|
|
|
this.startValue = ''
|
|
|
|
|
this.endValue = ''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
startValue(val) {
|
|
|
|
|
if (!this.resetType) { return false }
|
|
|
|
|
console.log('startValue', val);
|
|
|
|
|
this.getDateRangeRes()
|
|
|
|
|
},
|
|
|
|
|
endValue(val) {
|
|
|
|
|
if (!this.resetType) { return false }
|
|
|
|
|
console.log('endValue', val);
|
|
|
|
|
this.getDateRangeRes()
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
@ -111,6 +142,9 @@ export default {
|
|
|
|
|
value: '',
|
|
|
|
|
// 日期区间
|
|
|
|
|
dateVal: [],
|
|
|
|
|
startValue: null,
|
|
|
|
|
endValue: null,
|
|
|
|
|
endOpen: false,
|
|
|
|
|
// select
|
|
|
|
|
dataList: this.labelData.dataList || [],
|
|
|
|
|
dataSourceList: []
|
|
|
|
@ -136,26 +170,53 @@ export default {
|
|
|
|
|
value: mode
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
changeRangeDate(e, mode) {
|
|
|
|
|
// 时间区间 start
|
|
|
|
|
|
|
|
|
|
// changeRangeDate(e, mode) {
|
|
|
|
|
// this.$emit('change', {
|
|
|
|
|
// form: this.labelData,
|
|
|
|
|
// value: mode
|
|
|
|
|
// })
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
disabledStartDate(startValue) {
|
|
|
|
|
const endValue = this.endValue;
|
|
|
|
|
if (!startValue || !endValue) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return startValue.valueOf() > endValue.valueOf();
|
|
|
|
|
},
|
|
|
|
|
disabledEndDate(endValue) {
|
|
|
|
|
const startValue = this.startValue;
|
|
|
|
|
if (!endValue || !startValue) {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
return startValue.valueOf() >= endValue.valueOf();
|
|
|
|
|
},
|
|
|
|
|
handleStartOpenChange(open) {
|
|
|
|
|
if (!open) {
|
|
|
|
|
this.endOpen = true;
|
|
|
|
|
}
|
|
|
|
|
// if (this.startValue) {
|
|
|
|
|
// this.getDateRangeRes()
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
handleEndOpenChange(open) {
|
|
|
|
|
this.endOpen = open;
|
|
|
|
|
// if (this.endValue) {
|
|
|
|
|
// this.getDateRangeRes()
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
getDateRangeRes () {
|
|
|
|
|
const start = this.startValue ? this.formatDate(this.startValue._d).substr(0, 10) : ''
|
|
|
|
|
const end = this.endValue ? this.formatDate(this.endValue._d).substr(0, 10) : ''
|
|
|
|
|
const date = [start, end]
|
|
|
|
|
console.log('== 更新时间 ==', date)
|
|
|
|
|
this.$emit('change', {
|
|
|
|
|
form: this.labelData,
|
|
|
|
|
value: mode
|
|
|
|
|
value: date
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
openChangeRangeDate (e) {
|
|
|
|
|
// let arr = []
|
|
|
|
|
// e.map((item, index) => {
|
|
|
|
|
// if (item._d) {
|
|
|
|
|
// const date = this.formatDate(item._d).substr(0, 10)
|
|
|
|
|
// arr.push(date)
|
|
|
|
|
// console.log(date)
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
// this.$emit('change', {
|
|
|
|
|
// form: this.labelData,
|
|
|
|
|
// value: arr
|
|
|
|
|
// })
|
|
|
|
|
},
|
|
|
|
|
formatDate (now) {
|
|
|
|
|
var date = new Date(now)
|
|
|
|
|
var y = date.getFullYear() // 年份
|
|
|
|
@ -182,6 +243,7 @@ export default {
|
|
|
|
|
// 返回值,根据自己需求调整,现在已经拿到了年月日时分秒了
|
|
|
|
|
return y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s
|
|
|
|
|
},
|
|
|
|
|
// 时间区间 end
|
|
|
|
|
// == 下拉选择 ==
|
|
|
|
|
filterOption(input, option) {
|
|
|
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
|
|