|
@@ -25,36 +25,54 @@
|
|
class="date-time-container"
|
|
class="date-time-container"
|
|
:class="{ active: showActive}"
|
|
:class="{ active: showActive}"
|
|
>
|
|
>
|
|
- <el-date-picker
|
|
|
|
- v-model="dateTimePickerState.start"
|
|
|
|
- class="date-time-item left"
|
|
|
|
- :type="dateTimePickerConf.type"
|
|
|
|
- :editable="dateTimePickerConf.editable"
|
|
|
|
- :align="dateTimePickerConf.align"
|
|
|
|
- :prefix-icon="dateTimePickerConf.prefixIcon"
|
|
|
|
- :format="dateTimePickerConf.format"
|
|
|
|
- :placeholder="dateTimePickerState.startPlaceHolder"
|
|
|
|
- :picker-options="startPickerOptions"
|
|
|
|
- :append-to-body="false"
|
|
|
|
- @change="startDatePickerChange"
|
|
|
|
- @focus="showConfirmHandle"
|
|
|
|
- >
|
|
|
|
- </el-date-picker>
|
|
|
|
- <el-date-picker
|
|
|
|
- v-model="dateTimePickerState.end"
|
|
|
|
- class="date-time-item right"
|
|
|
|
- :type="dateTimePickerConf.type"
|
|
|
|
- :editable="dateTimePickerConf.editable"
|
|
|
|
- :align="dateTimePickerConf.align"
|
|
|
|
- :prefix-icon="dateTimePickerConf.prefixIcon"
|
|
|
|
- :format="dateTimePickerConf.format"
|
|
|
|
- :placeholder="dateTimePickerState.endPlaceHolder"
|
|
|
|
- :picker-options="endPickerOptions"
|
|
|
|
- :append-to-body="false"
|
|
|
|
- @change="endDatePickerChange"
|
|
|
|
- @focus="showConfirmHandle"
|
|
|
|
- >
|
|
|
|
- </el-date-picker>
|
|
|
|
|
|
+ <div v-if="isDateRange">
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="dateTimeRangeState"
|
|
|
|
+ class="date-picker-range"
|
|
|
|
+ type="daterange"
|
|
|
|
+ prefix-icon="none"
|
|
|
|
+ :editable="false"
|
|
|
|
+ align="left"
|
|
|
|
+ range-separator="—"
|
|
|
|
+ :start-placeholder="dateTimePickerState.startPlaceHolder"
|
|
|
|
+ :end-placeholder="dateTimePickerState.endPlaceHolder"
|
|
|
|
+ :append-to-body="false"
|
|
|
|
+ @change="onDateRangeChange"
|
|
|
|
+ >
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else>
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="dateTimePickerState.start"
|
|
|
|
+ class="date-time-item left"
|
|
|
|
+ :type="dateTimePickerConf.type"
|
|
|
|
+ :editable="dateTimePickerConf.editable"
|
|
|
|
+ :align="dateTimePickerConf.align"
|
|
|
|
+ :prefix-icon="dateTimePickerConf.prefixIcon"
|
|
|
|
+ :format="dateTimePickerConf.format"
|
|
|
|
+ :placeholder="dateTimePickerState.startPlaceHolder"
|
|
|
|
+ :picker-options="startPickerOptions"
|
|
|
|
+ :append-to-body="false"
|
|
|
|
+ @change="startDatePickerChange"
|
|
|
|
+ @focus="showConfirmHandle"
|
|
|
|
+ >
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="dateTimePickerState.end"
|
|
|
|
+ class="date-time-item right"
|
|
|
|
+ :type="dateTimePickerConf.type"
|
|
|
|
+ :editable="dateTimePickerConf.editable"
|
|
|
|
+ :align="dateTimePickerConf.align"
|
|
|
|
+ :prefix-icon="dateTimePickerConf.prefixIcon"
|
|
|
|
+ :format="dateTimePickerConf.format"
|
|
|
|
+ :placeholder="dateTimePickerState.endPlaceHolder"
|
|
|
|
+ :picker-options="endPickerOptions"
|
|
|
|
+ :append-to-body="false"
|
|
|
|
+ @change="endDatePickerChange"
|
|
|
|
+ @focus="showConfirmHandle"
|
|
|
|
+ >
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ </div>
|
|
<el-button class="confirm-btn" v-if="showConfirmButton && showConBtn" @click="confirmHandle" >确定</el-button>
|
|
<el-button class="confirm-btn" v-if="showConfirmButton && showConBtn" @click="confirmHandle" >确定</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -371,6 +389,11 @@ export default {
|
|
endPlaceholder: {
|
|
endPlaceholder: {
|
|
type: String,
|
|
type: String,
|
|
default: ''
|
|
default: ''
|
|
|
|
+ },
|
|
|
|
+ // 显示类型是否为日期范围(一个弹框内选择开始日期结束日期)
|
|
|
|
+ isDateRange: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default: false
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
@@ -406,7 +429,8 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- showConBtn: false
|
|
|
|
|
|
+ showConBtn: false,
|
|
|
|
+ dateTimeRangeState: [],
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -437,6 +461,16 @@ export default {
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
dateFormatter,
|
|
dateFormatter,
|
|
|
|
+ onDateRangeChange(value) {
|
|
|
|
+ this.dateTimeRangeState = value
|
|
|
|
+ this.dateTimePickerState.start = value[0]
|
|
|
|
+ this.dateTimePickerState.end = value[1]
|
|
|
|
+ this.setTimeSelectListState()
|
|
|
|
+ this.onChange()
|
|
|
|
+ // if(this.showConfirmButton) {
|
|
|
|
+ // this.showConBtn = true
|
|
|
|
+ // }
|
|
|
|
+ },
|
|
calcTimeSelectList() {
|
|
calcTimeSelectList() {
|
|
let timeSelectList = []
|
|
let timeSelectList = []
|
|
const propTimeSelectList = timeSelectMap[this.selectorTime]
|
|
const propTimeSelectList = timeSelectMap[this.selectorTime]
|
|
@@ -509,6 +543,8 @@ export default {
|
|
this.timeSelectList.forEach((v) => (v.selected = false))
|
|
this.timeSelectList.forEach((v) => (v.selected = false))
|
|
this.dateTimePickerState.start = data.start ? new Date(data.start) : null
|
|
this.dateTimePickerState.start = data.start ? new Date(data.start) : null
|
|
this.dateTimePickerState.end =data.end ? new Date(data.end) : null
|
|
this.dateTimePickerState.end =data.end ? new Date(data.end) : null
|
|
|
|
+ //
|
|
|
|
+ this.dateTimeRangeState = [data.start, data.end]
|
|
break
|
|
break
|
|
}
|
|
}
|
|
default: {
|
|
default: {
|
|
@@ -682,7 +718,9 @@ export default {
|
|
if (item.selected) return
|
|
if (item.selected) return
|
|
this.timeSelectList.forEach((v) => (v.selected = false))
|
|
this.timeSelectList.forEach((v) => (v.selected = false))
|
|
item.selected = true
|
|
item.selected = true
|
|
-
|
|
|
|
|
|
+ this.dateTimeRangeState = []
|
|
|
|
+ this.dateTimePickerState.start = ''
|
|
|
|
+ this.dateTimePickerState.end = ''
|
|
this.onChange()
|
|
this.onChange()
|
|
},
|
|
},
|
|
startDatePickerChange(start) {
|
|
startDatePickerChange(start) {
|
|
@@ -808,4 +846,31 @@ export default {
|
|
margin-left: 8px;
|
|
margin-left: 8px;
|
|
border: none;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
+::v-deep{
|
|
|
|
+ .date-picker-range{
|
|
|
|
+ width: 268px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ padding: 0;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ border: 0;
|
|
|
|
+ .el-input__icon{
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+ .el-range-separator{
|
|
|
|
+ width: 8px;
|
|
|
|
+ height: 1px;
|
|
|
|
+ margin: 0 5px;
|
|
|
|
+ font-size: 0;
|
|
|
|
+ line-height: 24px;
|
|
|
|
+ background: #E0E0E0;
|
|
|
|
+ }
|
|
|
|
+ .el-range-input{
|
|
|
|
+ width: 126px!important;
|
|
|
|
+ padding: 0 12px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ border: 1px solid #E0E0E0;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|