|
@@ -2,64 +2,64 @@
|
|
|
<div style="display: flex;align-items: center;justify-content: space-between;">
|
|
|
<div style="flex:1">
|
|
|
<a-date-picker
|
|
|
- :size="size"
|
|
|
- :locale="locale"
|
|
|
- v-model="startValue"
|
|
|
- :allowClear="allowClear"
|
|
|
- :disabled-date="disabledStartDate"
|
|
|
- :show-time="showTime"
|
|
|
- :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
|
|
|
- placeholder="开始时间"
|
|
|
- :open="startOpen"
|
|
|
- inputReadOnly
|
|
|
- @openChange="handleStartOpenChange"
|
|
|
- @panelChange="handleStartPanelChange"
|
|
|
- :showToday="false"
|
|
|
- style="width:100%"
|
|
|
- >
|
|
|
- <div slot="renderExtraFooter" v-if="showShortcut">
|
|
|
- <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
|
|
|
- <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
|
|
|
- <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
|
|
|
- <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
|
|
|
- <a-button @click="setVal('date5')" v-if="showShortcut" type="link" size="small">近一年</a-button>
|
|
|
- <a-button @click="setVal('date6')" v-else type="link" size="small">近三个月</a-button>
|
|
|
- </div>
|
|
|
- </a-date-picker>
|
|
|
+ :size="size"
|
|
|
+ :locale="locale"
|
|
|
+ v-model="startValue"
|
|
|
+ :allowClear="allowClear"
|
|
|
+ :disabled-date="disabledStartDate"
|
|
|
+ :show-time="showTime"
|
|
|
+ :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
|
|
|
+ placeholder="开始时间"
|
|
|
+ :open="startOpen"
|
|
|
+ inputReadOnly
|
|
|
+ @openChange="handleStartOpenChange"
|
|
|
+ @panelChange="handleStartPanelChange"
|
|
|
+ :showToday="false"
|
|
|
+ style="width:100%"
|
|
|
+ >
|
|
|
+ <div slot="renderExtraFooter">
|
|
|
+ <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
|
|
|
+ <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
|
|
|
+ <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
|
|
|
+ <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
|
|
|
+ <a-button @click="setVal('date5')" v-if="showShortcut" type="link" size="small">近一年</a-button>
|
|
|
+ <a-button @click="setVal('date6')" v-else type="link" size="small">近三个月</a-button>
|
|
|
+ </div>
|
|
|
+ </a-date-picker>
|
|
|
</div>
|
|
|
<span style="width: 20px;text-align: center;">至</span>
|
|
|
<div style="flex:1">
|
|
|
<a-date-picker
|
|
|
- :size="size"
|
|
|
- :locale="locale"
|
|
|
- v-model="endValue"
|
|
|
- :allowClear="allowClear"
|
|
|
- :disabled-date="disabledEndDate"
|
|
|
- :show-time="showTime"
|
|
|
- :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
|
|
|
- placeholder="结束时间"
|
|
|
- inputReadOnly
|
|
|
- :open="endOpen"
|
|
|
- @openChange="handleEndOpenChange"
|
|
|
- @panelChange="handleEndPanelChange"
|
|
|
- :showToday="false"
|
|
|
- style="width:100%"
|
|
|
- >
|
|
|
- <div slot="renderExtraFooter">
|
|
|
- <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
|
|
|
- <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
|
|
|
- <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
|
|
|
- <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
|
|
|
- <a-button @click="setVal('date5')" v-if="showShortcut" type="link" size="small">近一年</a-button>
|
|
|
- <a-button @click="setVal('date6')" v-else type="link" size="small">近三个月</a-button>
|
|
|
- </div>
|
|
|
- </a-date-picker>
|
|
|
+ :size="size"
|
|
|
+ :locale="locale"
|
|
|
+ v-model="endValue"
|
|
|
+ :allowClear="allowClear"
|
|
|
+ :disabled-date="disabledEndDate"
|
|
|
+ :show-time="showTime"
|
|
|
+ :format="showTime?'YYYY-MM-DD hh:mm:ss':'YYYY-MM-DD'"
|
|
|
+ placeholder="结束时间"
|
|
|
+ inputReadOnly
|
|
|
+ :open="endOpen"
|
|
|
+ @openChange="handleEndOpenChange"
|
|
|
+ @panelChange="handleEndPanelChange"
|
|
|
+ :showToday="false"
|
|
|
+ style="width:100%"
|
|
|
+ >
|
|
|
+ <div slot="renderExtraFooter">
|
|
|
+ <a-button @click="setVal('date1')" type="link" size="small">今天</a-button>
|
|
|
+ <a-button @click="setVal('date2')" type="link" size="small">近一个月</a-button>
|
|
|
+ <a-button @click="setVal('date3')" type="link" size="small">本月</a-button>
|
|
|
+ <a-button @click="setVal('date4')" type="link" size="small">上月</a-button>
|
|
|
+ <a-button @click="setVal('date5')" v-if="showShortcut" type="link" size="small">近一年</a-button>
|
|
|
+ <a-button @click="setVal('date6')" v-else type="link" size="small">近三个月</a-button>
|
|
|
+ </div>
|
|
|
+ </a-date-picker>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
|
|
|
-import moment from 'moment';//引入moment
|
|
|
+import locale from 'ant-design-vue/es/date-picker/locale/zh_CN'
|
|
|
+import moment from 'moment'// 引入moment
|
|
|
export default {
|
|
|
props: {
|
|
|
value: {
|
|
@@ -83,7 +83,7 @@ export default {
|
|
|
showShortcut: {
|
|
|
type: Boolean,
|
|
|
default: true
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
data () {
|
|
|
return {
|
|
@@ -100,23 +100,23 @@ export default {
|
|
|
'date5': [moment().subtract(1, 'years'), moment()],
|
|
|
'date6': [moment().month(moment().month() - 2).startOf('month'), moment()]
|
|
|
},
|
|
|
- startMode:'',
|
|
|
+ startMode: '',
|
|
|
endMode: ''
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
- startValue (val,old) {
|
|
|
- if(old&&!val){
|
|
|
+ startValue (val, old) {
|
|
|
+ if (old && !val) {
|
|
|
this.endValue = null
|
|
|
}
|
|
|
- if(val && !this.endValue){
|
|
|
+ if (val && !this.endValue) {
|
|
|
this.endOpen = true
|
|
|
}
|
|
|
this.startValue = val || null
|
|
|
this.changeInput()
|
|
|
},
|
|
|
- endValue (val,old) {
|
|
|
- if(old&&!val){
|
|
|
+ endValue (val, old) {
|
|
|
+ if (old && !val) {
|
|
|
this.startValue = null
|
|
|
}
|
|
|
this.endValue = val || null
|
|
@@ -137,10 +137,10 @@ export default {
|
|
|
if (!this.startValue) {
|
|
|
return startValue.valueOf() > moment(endValue, 'YYYY-MM-DD').add(1, 'days').valueOf() || startValue.valueOf() > maxYearVs.valueOf()
|
|
|
}
|
|
|
- if(this.startMode == 'year'){
|
|
|
+ if (this.startMode == 'year') {
|
|
|
return startValue.valueOf() > moment().endOf('year').valueOf()
|
|
|
}
|
|
|
- if(this.startMode == 'month'){
|
|
|
+ if (this.startMode == 'month') {
|
|
|
return startValue.valueOf() > moment().endOf('month').valueOf()
|
|
|
}
|
|
|
return startValue.valueOf() > moment(endValue).valueOf() || startValue.valueOf() > maxYearVs.valueOf()
|
|
@@ -151,11 +151,11 @@ export default {
|
|
|
const startValue = this.startValue
|
|
|
const maxYearVs = moment().endOf('day') // 今天,包含今天
|
|
|
if (startValue) {
|
|
|
- if(this.endMode == 'year'){
|
|
|
+ if (this.endMode == 'year') {
|
|
|
const sv = moment(startValue).startOf('year')
|
|
|
return endValue.valueOf() < sv.valueOf() || endValue.valueOf() > moment().endOf('year').valueOf()
|
|
|
}
|
|
|
- if(this.endMode == 'month'){
|
|
|
+ if (this.endMode == 'month') {
|
|
|
const sv = moment(startValue).startOf('month')
|
|
|
return endValue.valueOf() < sv.valueOf() || endValue.valueOf() > moment().endOf('month').valueOf()
|
|
|
}
|
|
@@ -164,16 +164,16 @@ export default {
|
|
|
return endValue.valueOf() > maxYearVs.valueOf()
|
|
|
},
|
|
|
handleStartOpenChange (open) {
|
|
|
- if(!open && !this.endValue){
|
|
|
+ if (!open && !this.endValue) {
|
|
|
this.endOpen = !!this.startValue
|
|
|
}
|
|
|
- if(!open){
|
|
|
+ if (!open) {
|
|
|
this.startMode = ''
|
|
|
}
|
|
|
this.startOpen = open
|
|
|
},
|
|
|
handleEndOpenChange (open) {
|
|
|
- if(!open){
|
|
|
+ if (!open) {
|
|
|
this.endMode = ''
|
|
|
}
|
|
|
this.endOpen = open
|