| | |
| | | end-placeholder="结束日期" |
| | | @change="change" |
| | | disabled |
| | | :clearable="false" |
| | | /> |
| | | <div class="time-card"> |
| | | <div |
| | | class="card-item" |
| | | :class="item === checked ? 'active' : ''" |
| | | v-for="(item, index) in timeList" |
| | | v-for="(item, index) in timeList" :key="index" |
| | | @click="timeClick(item,index)" |
| | | > |
| | | {{ timeListStr[index] }} |
| | |
| | | |
| | | <script setup> |
| | | import dayjs from 'dayjs'; |
| | | import { useStore } from 'vuex' |
| | | import { ref, defineEmits } from 'vue'; |
| | | |
| | | const store = useStore() |
| | | const emit = defineEmits(['change']); |
| | | |
| | | const model = defineModel(); |
| | |
| | | }; |
| | | |
| | | const change = value => { |
| | | // todo 我对接 |
| | | // todo 待对接 |
| | | // emit('change', value); |
| | | }; |
| | | |
| | | let timeClick = (item,index) => { |
| | | checked.value = item; |
| | | model.value = dateRanges[item]; |
| | | emit('change', dateRanges[item],timeListEnum[index]); |
| | | const newDateRange = dateRanges[item]; |
| | | model.value = newDateRange; |
| | | emit('change', newDateRange, timeListEnum[index],checked.value); |
| | | }; |
| | | onMounted(() => { |
| | | // 如果父组件传入了值,就使用父组件的值 by cpz |
| | | if (model.value && model.value.length === 2) { |
| | | // 根据传入的日期判断是哪个时间范围 |
| | | const startDate = model.value[0]; |
| | | const endDate = model.value[1]; |
| | | if (startDate !== endDate) { |
| | | checked.value = 'week'; |
| | | } |
| | | } |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | |
| | | position: relative; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | :deep(.el-date-editor .el-range__close-icon--hidden){ |
| | | width: 0 !important; |
| | | |
| | | } |
| | | :deep(.el-date-editor .el-range-input){ |
| | | width: 48% !important; |
| | | font-size: 13px !important; |
| | | } |
| | | :deep(.el-date-editor) { |
| | | box-shadow: none; |
| | | width: 0; |
| | | flex: 1; |
| | | margin-right: 4px; |
| | | // margin-right: 4px; |
| | | |
| | | background: rgba(0, 15, 34, 0.5); |
| | | border-radius: 0px 0px 0px 0px; |