|
|
|
|
@ -1,11 +1,24 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="date-choose-div">
|
|
|
|
|
<a-icon type="left" class="dateIcon"></a-icon>
|
|
|
|
|
<a-date-picker v-model="beginDate"
|
|
|
|
|
:getCalendarContainer="getCalendarContainer()"
|
|
|
|
|
@change="getBeginDateRange"></a-date-picker>
|
|
|
|
|
<span>至</span>
|
|
|
|
|
<a-date-picker v-model="endDate" :getCalendarContainer="getCalendarContainer()" @change="getEndDateRange"></a-date-picker>
|
|
|
|
|
<span class="date-choose-icon" v-on:click="flushDate">刷新</span>
|
|
|
|
|
<span class="middleText">至</span>
|
|
|
|
|
<a-date-picker v-model="endDate" :getCalendarContainer="getCalendarContainer()"
|
|
|
|
|
@change="getEndDateRange"></a-date-picker>
|
|
|
|
|
<a-icon type="right" class="dateIcon"></a-icon>
|
|
|
|
|
<a-select
|
|
|
|
|
ref="select"
|
|
|
|
|
v-model:value="value1"
|
|
|
|
|
@change="handleChange"
|
|
|
|
|
v-if="deptSelect"
|
|
|
|
|
>
|
|
|
|
|
<a-select-option value="jack">部门1</a-select-option>
|
|
|
|
|
<a-select-option value="lucy">部门2</a-select-option>
|
|
|
|
|
<a-select-option value="disabled">部门3</a-select-option>
|
|
|
|
|
<a-select-option value="Yiminghe">部门4</a-select-option>
|
|
|
|
|
</a-select>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
@ -17,10 +30,9 @@
|
|
|
|
|
* end_date:"" 默认当天
|
|
|
|
|
* hideDefaultDate:"" 是否隐藏默认日期
|
|
|
|
|
* callInter:是否立刻回调
|
|
|
|
|
* @flushDate 接收回传起止日期
|
|
|
|
|
* */
|
|
|
|
|
|
|
|
|
|
import {DatePicker} from 'ant-design-vue';
|
|
|
|
|
import {DatePicker, Icon, Select} from 'ant-design-vue';
|
|
|
|
|
import moment from 'moment';
|
|
|
|
|
import interConfig from './interConfig';
|
|
|
|
|
export default{
|
|
|
|
|
@ -28,6 +40,7 @@
|
|
|
|
|
return {
|
|
|
|
|
beginDate: "",
|
|
|
|
|
endDate: "",
|
|
|
|
|
value1: 'jack',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created(){
|
|
|
|
|
@ -35,7 +48,7 @@
|
|
|
|
|
this.getNowTime();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
props:['begin_date','end_date','hideDefaultDate','callInter'],
|
|
|
|
|
props: ['begin_date', 'end_date', 'hideDefaultDate', 'callInter', 'deptSelect'],
|
|
|
|
|
// props:{
|
|
|
|
|
// begin_date:{
|
|
|
|
|
// type:moment,
|
|
|
|
|
@ -86,9 +99,6 @@
|
|
|
|
|
let day = resData.data.day;
|
|
|
|
|
this.beginDate = moment(year + "-" + month + "-01");
|
|
|
|
|
this.endDate = moment(year + "-" + month + "-" + day);
|
|
|
|
|
if(this.callInter === true){
|
|
|
|
|
this.flushDate();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
@ -102,39 +112,57 @@
|
|
|
|
|
getEndDateRange: function (date) {
|
|
|
|
|
this.endDate = date;
|
|
|
|
|
},
|
|
|
|
|
flushDate:function () {
|
|
|
|
|
this.$emit("flushDate",{beginDate:this.beginDate,endDate:this.endDate});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
ADatePicker: DatePicker,
|
|
|
|
|
AIcon: Icon,
|
|
|
|
|
ASelect: Select,
|
|
|
|
|
ASelectOption: Select.Option,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
.date-choose-div {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 3rem;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
.ant-calendar-picker{
|
|
|
|
|
width: 8rem;
|
|
|
|
|
}
|
|
|
|
|
.ant-calendar-picker-container{
|
|
|
|
|
height: 2rem;
|
|
|
|
|
/*display: flex;*/
|
|
|
|
|
/*align-items: center;*/
|
|
|
|
|
/deep/ .ant-select {
|
|
|
|
|
width: 85px !important;
|
|
|
|
|
float: right !important;
|
|
|
|
|
z-index: 8888;
|
|
|
|
|
.ant-select-selection {
|
|
|
|
|
background: none !important;
|
|
|
|
|
border: 1px solid #08E2ED !important;
|
|
|
|
|
color: #08E2ED !important;
|
|
|
|
|
height: 26px !important;
|
|
|
|
|
.ant-select-arrow {
|
|
|
|
|
color: #08E2ED !important;
|
|
|
|
|
margin-top: -4px !important;
|
|
|
|
|
}
|
|
|
|
|
.ant-select-selection__rendered {
|
|
|
|
|
line-height: 26px !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.dateIcon {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
/deep/ .ant-calendar-picker {
|
|
|
|
|
width: 5.5rem;
|
|
|
|
|
.ant-input {
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
background: rgba(0, 0, 0, 0) !important;
|
|
|
|
|
color: #fff !important;
|
|
|
|
|
border: none !important;
|
|
|
|
|
text-align: center !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/ .ant-calendar-picker-container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0 !important;
|
|
|
|
|
top: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
span:nth-child(2){
|
|
|
|
|
padding: 0 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
.date-choose-icon{
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #31a8fa;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
margin-left: 0.5rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
