|
@@ -23,7 +23,7 @@
|
|
<div
|
|
<div
|
|
v-if="showExactConf"
|
|
v-if="showExactConf"
|
|
class="date-time-container"
|
|
class="date-time-container"
|
|
- :class="{ active: showActive}"
|
|
|
|
|
|
+ :class="{ active: showActive }"
|
|
>
|
|
>
|
|
<div v-if="isDateRange">
|
|
<div v-if="isDateRange">
|
|
<el-date-picker
|
|
<el-date-picker
|
|
@@ -77,7 +77,12 @@
|
|
>
|
|
>
|
|
</el-date-picker>
|
|
</el-date-picker>
|
|
</div>
|
|
</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>
|
|
</template>
|
|
</template>
|
|
@@ -208,7 +213,7 @@ const timeSelectMap = {
|
|
],
|
|
],
|
|
// 最近3天最近7天最近30天近3个月
|
|
// 最近3天最近7天最近30天近3个月
|
|
supplySearch: [
|
|
supplySearch: [
|
|
- {
|
|
|
|
|
|
+ {
|
|
name: '全部',
|
|
name: '全部',
|
|
value: 'all',
|
|
value: 'all',
|
|
selected: true
|
|
selected: true
|
|
@@ -443,7 +448,7 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
showConBtn: false,
|
|
showConBtn: false,
|
|
- dateTimeRangeState: [],
|
|
|
|
|
|
+ dateTimeRangeState: []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
@@ -458,10 +463,13 @@ export default {
|
|
state() {
|
|
state() {
|
|
return this.getState()
|
|
return this.getState()
|
|
},
|
|
},
|
|
- showActive () {
|
|
|
|
|
|
+ showActive() {
|
|
let result = false
|
|
let result = false
|
|
- if(this.showConfirmButton) {
|
|
|
|
- result = this.state.exact === 'exact' && (this.dateTimePickerState.start || this.dateTimePickerState.end) && !this.showConBtn
|
|
|
|
|
|
+ if (this.showConfirmButton) {
|
|
|
|
+ result =
|
|
|
|
+ this.state.exact === 'exact' &&
|
|
|
|
+ (this.dateTimePickerState.start || this.dateTimePickerState.end) &&
|
|
|
|
+ !this.showConBtn
|
|
} else {
|
|
} else {
|
|
result = this.state.exact === 'exact'
|
|
result = this.state.exact === 'exact'
|
|
}
|
|
}
|
|
@@ -532,6 +540,7 @@ export default {
|
|
case 'all':
|
|
case 'all':
|
|
case 'today':
|
|
case 'today':
|
|
case 'yesterday':
|
|
case 'yesterday':
|
|
|
|
+ case 'lately3':
|
|
case 'lately7':
|
|
case 'lately7':
|
|
case 'lately30':
|
|
case 'lately30':
|
|
case 'lately90':
|
|
case 'lately90':
|
|
@@ -547,12 +556,14 @@ export default {
|
|
break
|
|
break
|
|
}
|
|
}
|
|
case 'exact': {
|
|
case 'exact': {
|
|
- if(!this.exactCanHalf && !this.showConfirmButton) {
|
|
|
|
|
|
+ if (!this.exactCanHalf && !this.showConfirmButton) {
|
|
if (!data.start || !data.end) break
|
|
if (!data.start || !data.end) break
|
|
}
|
|
}
|
|
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.end =data.end ? new Date(data.end) : null
|
|
|
|
|
|
+ this.dateTimePickerState.start = data.start
|
|
|
|
+ ? new Date(data.start)
|
|
|
|
+ : null
|
|
|
|
+ this.dateTimePickerState.end = data.end ? new Date(data.end) : null
|
|
this.dateTimeRangeState = [data.start, data.end]
|
|
this.dateTimeRangeState = [data.start, data.end]
|
|
break
|
|
break
|
|
}
|
|
}
|
|
@@ -573,6 +584,7 @@ export default {
|
|
const durations = {
|
|
const durations = {
|
|
hour1: 60 * 60 * 1000,
|
|
hour1: 60 * 60 * 1000,
|
|
day1: 60 * 60 * 1000 * 24 * 1,
|
|
day1: 60 * 60 * 1000 * 24 * 1,
|
|
|
|
+ day3: 60 * 60 * 1000 * 24 * 3,
|
|
day7: 60 * 60 * 1000 * 24 * 7,
|
|
day7: 60 * 60 * 1000 * 24 * 7,
|
|
day30: 60 * 60 * 1000 * 24 * 30
|
|
day30: 60 * 60 * 1000 * 24 * 30
|
|
}
|
|
}
|
|
@@ -631,6 +643,7 @@ export default {
|
|
const durations = {
|
|
const durations = {
|
|
hour1: 60 * 60 * 1000,
|
|
hour1: 60 * 60 * 1000,
|
|
day1: 60 * 60 * 1000 * 24 * 1,
|
|
day1: 60 * 60 * 1000 * 24 * 1,
|
|
|
|
+ day3: 60 * 60 * 1000 * 24 * 3,
|
|
day7: 60 * 60 * 1000 * 24 * 7,
|
|
day7: 60 * 60 * 1000 * 24 * 7,
|
|
day30: 60 * 60 * 1000 * 24 * 30
|
|
day30: 60 * 60 * 1000 * 24 * 30
|
|
}
|
|
}
|
|
@@ -645,6 +658,10 @@ export default {
|
|
t.end = moment().endOf('day').format('x') - durations.day1
|
|
t.end = moment().endOf('day').format('x') - durations.day1
|
|
break
|
|
break
|
|
}
|
|
}
|
|
|
|
+ case 'lately3': {
|
|
|
|
+ t.start = t.end - durations.day3
|
|
|
|
+ break
|
|
|
|
+ }
|
|
case 'lately7': {
|
|
case 'lately7': {
|
|
t.start = t.end - durations.day7
|
|
t.start = t.end - durations.day7
|
|
break
|
|
break
|
|
@@ -735,7 +752,7 @@ export default {
|
|
},
|
|
},
|
|
startDatePickerChange(start) {
|
|
startDatePickerChange(start) {
|
|
const { end } = this.dateTimePickerState
|
|
const { end } = this.dateTimePickerState
|
|
- if(!this.exactCanHalf && !this.showConfirmButton) {
|
|
|
|
|
|
+ if (!this.exactCanHalf && !this.showConfirmButton) {
|
|
if (start && end) {
|
|
if (start && end) {
|
|
// start和end都有值
|
|
// start和end都有值
|
|
this.setTimeSelectListState()
|
|
this.setTimeSelectListState()
|
|
@@ -746,13 +763,13 @@ export default {
|
|
this.onChange()
|
|
this.onChange()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- if(this.showConfirmButton) {
|
|
|
|
|
|
+ if (this.showConfirmButton) {
|
|
this.showConBtn = true
|
|
this.showConBtn = true
|
|
}
|
|
}
|
|
},
|
|
},
|
|
endDatePickerChange(end) {
|
|
endDatePickerChange(end) {
|
|
const { start } = this.dateTimePickerState
|
|
const { start } = this.dateTimePickerState
|
|
- if(!this.exactCanHalf && !this.showConfirmButton) {
|
|
|
|
|
|
+ if (!this.exactCanHalf && !this.showConfirmButton) {
|
|
if (start && end) {
|
|
if (start && end) {
|
|
// start和end都有值
|
|
// start和end都有值
|
|
this.setTimeSelectListState()
|
|
this.setTimeSelectListState()
|
|
@@ -763,17 +780,17 @@ export default {
|
|
this.onChange()
|
|
this.onChange()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- if(this.showConfirmButton) {
|
|
|
|
|
|
+ if (this.showConfirmButton) {
|
|
this.showConBtn = true
|
|
this.showConBtn = true
|
|
}
|
|
}
|
|
},
|
|
},
|
|
// 展示确定按钮
|
|
// 展示确定按钮
|
|
- showConfirmHandle () {
|
|
|
|
|
|
+ showConfirmHandle() {
|
|
this.showConBtn = true
|
|
this.showConBtn = true
|
|
},
|
|
},
|
|
|
|
|
|
// 确定操作
|
|
// 确定操作
|
|
- confirmHandle () {
|
|
|
|
|
|
+ confirmHandle() {
|
|
this.setTimeSelectListState()
|
|
this.setTimeSelectListState()
|
|
this.onChange()
|
|
this.onChange()
|
|
this.showConBtn = false
|
|
this.showConBtn = false
|
|
@@ -843,43 +860,43 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-.confirm-btn{
|
|
|
|
- width:48px;
|
|
|
|
- height:24px;
|
|
|
|
|
|
+.confirm-btn {
|
|
|
|
+ width: 48px;
|
|
|
|
+ height: 24px;
|
|
border-radius: 2px;
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
text-align: center;
|
|
color: #fff;
|
|
color: #fff;
|
|
- background: #2ABED1;
|
|
|
|
|
|
+ background: #2abed1;
|
|
padding: 0;
|
|
padding: 0;
|
|
line-height: 22px;
|
|
line-height: 22px;
|
|
margin-left: 8px;
|
|
margin-left: 8px;
|
|
border: none;
|
|
border: none;
|
|
}
|
|
}
|
|
-::v-deep{
|
|
|
|
- .date-picker-range{
|
|
|
|
|
|
+::v-deep {
|
|
|
|
+ .date-picker-range {
|
|
width: 268px;
|
|
width: 268px;
|
|
height: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
padding: 0;
|
|
line-height: 24px;
|
|
line-height: 24px;
|
|
border: 0;
|
|
border: 0;
|
|
- .el-input__icon{
|
|
|
|
|
|
+ .el-input__icon {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
- .el-range-separator{
|
|
|
|
|
|
+ .el-range-separator {
|
|
width: 8px;
|
|
width: 8px;
|
|
height: 1px;
|
|
height: 1px;
|
|
margin: 0 5px;
|
|
margin: 0 5px;
|
|
font-size: 0;
|
|
font-size: 0;
|
|
line-height: 24px;
|
|
line-height: 24px;
|
|
- background: #E0E0E0;
|
|
|
|
|
|
+ background: #e0e0e0;
|
|
}
|
|
}
|
|
- .el-range-input{
|
|
|
|
- width: 104px!important;
|
|
|
|
|
|
+ .el-range-input {
|
|
|
|
+ width: 104px !important;
|
|
height: 24px;
|
|
height: 24px;
|
|
padding: 0 12px;
|
|
padding: 0 12px;
|
|
text-align: left;
|
|
text-align: left;
|
|
- border: 1px solid #E0E0E0;
|
|
|
|
|
|
+ border: 1px solid #e0e0e0;
|
|
border-radius: 4px;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|