<script>
|
import dayjs from 'dayjs'
|
import 'dayjs/locale/zh-cn'
|
dayjs.locale('zh-cn')
|
export default {
|
inputFormat(row, item) {
|
if (
|
Array.isArray(item.commonFormatProps) &&
|
item.commonFormatProps.length === 3
|
) {
|
const dateType = item.commonFormatProps[0]
|
const startDate = item.commonFormatProps[1]
|
const endDate = item.commonFormatProps[2]
|
if (dateType in row || startDate in row || endDate in row) {
|
const dateValue =
|
!row[startDate] && !row[endDate] ? [] : [row[startDate], row[endDate]]
|
return !row[dateType] && dateValue.length === 0
|
? []
|
: [row[dateType], dateValue]
|
}
|
}
|
},
|
outputFormat(val, item) {
|
if (
|
Array.isArray(item.commonFormatProps) &&
|
item.commonFormatProps.length === 3
|
) {
|
const dateValue = val?.[1] || []
|
const radioValue = val?.[0] || ''
|
return {
|
[item.commonFormatProps[0]]: radioValue,
|
[item.commonFormatProps[1]]: dateValue?.[0] || '',
|
[item.commonFormatProps[2]]: dateValue?.[1] || '',
|
}
|
}
|
},
|
props: {
|
value: {
|
type: Array,
|
default: () => [],
|
},
|
options: {
|
type: Array,
|
default: () => [],
|
},
|
radioAttrs: {
|
type: Object,
|
default: () => ({}),
|
},
|
dateRangeAttrs: {
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
data() {
|
return {
|
radioValue: '',
|
dateRangeValue: [],
|
}
|
},
|
watch: {
|
value: {
|
immediate: true,
|
handler(value) {
|
this.radioValue = value?.[0] || ''
|
this.dateRangeValue = value?.[1] || []
|
},
|
},
|
},
|
methods: {
|
onRadioChange(e) {
|
if (!e) {
|
this.emitValue([])
|
} else if (e === 'custom') {
|
this.emitValue(['custom'])
|
} else if (typeof e === 'string') {
|
if (!e.includes(',')) {
|
if (e === 'yesterday') {
|
const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
|
this.emitValue([e, [yesterday, yesterday]])
|
} else {
|
const startDate = dayjs().startOf(e).format('YYYY-MM-DD')
|
const endDate = dayjs().format('YYYY-MM-DD')
|
this.emitValue([e, [startDate, endDate]])
|
}
|
} else {
|
const arr = e.split(',')
|
const num = arr[0]
|
let funcName = ''
|
if (e > 0) {
|
funcName = 'add'
|
} else {
|
funcName = 'subtract'
|
}
|
const startDate = dayjs()
|
[funcName](Math.abs(num), arr[1])
|
.format('YYYY-MM-DD')
|
const endDate = dayjs().format('YYYY-MM-DD')
|
this.emitValue([e, [startDate, endDate]])
|
}
|
}
|
},
|
onDateRangeChange(e) {
|
this.emitValue(['custom', e])
|
},
|
emitValue(value) {
|
this.$emit('input', value)
|
this.$emit('change', value)
|
},
|
},
|
}
|
</script>
|
|
<template>
|
<div class="custom-date-range">
|
<el-bus-radio
|
v-bind="{ childType: 'el-radio-button', hasAll: true, ...radioAttrs }"
|
v-model="radioValue"
|
:from-dict="false"
|
:options="options"
|
@change="onRadioChange"
|
/>
|
<el-bus-date-range
|
v-bind="{ canOverToday: false, ...dateRangeAttrs }"
|
v-model="dateRangeValue"
|
@change="onDateRangeChange"
|
/>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.custom-date-range {
|
display: flex;
|
align-items: center;
|
.el-bus-date-range {
|
margin-bottom: 10px;
|
margin-left: 15px;
|
}
|
}
|
</style>
|
