index.vue
3.02 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<template>
<n-date-picker
v-model:value="option.dataset"
:panel="!!chartConfig.option.isPanel"
:type="chartConfig.option.componentInteractEventKey"
:style="`width:${w}px;`"
:to="false"
@update:value="onChange"
/>
</template>
<script setup lang="ts">
import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
import dayjs from 'dayjs'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartInteract } from '@/hooks'
import { InteractEventOn } from '@/enums/eventEnum'
import { ComponentInteractParamsEnum } from './interact'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { w, h } = toRefs(props.chartConfig.attr)
const {
textColor,
textBackgroundColor,
iconColor,
textBackgroundColorAlpha,
textSelectModalBackgroundColor,
textSelectModalTextColor
} = toRefs(props.chartConfig.option.selectStyleOptions) as any
const rangeDate = ref<number | number[]>()
const option = shallowReactive({
dataset: props.chartConfig.option.dataset
})
// 监听事件改变
const onChange = (v: number | number[]) => {
if (v instanceof Array) {
// 存储到联动数据
useChartInteract(
props.chartConfig,
useChartEditStore,
{
[ComponentInteractParamsEnum.DATE_START]: v[0] || dayjs().valueOf(),
[ComponentInteractParamsEnum.DATE_END]: v[1] || dayjs().valueOf(),
[ComponentInteractParamsEnum.DATE_RANGE]: `${v[0] || dayjs().valueOf()}-${v[1] || dayjs().valueOf()}`
},
InteractEventOn.CHANGE
)
} else {
// 存储到联动数据
useChartInteract(
props.chartConfig,
useChartEditStore,
{ [ComponentInteractParamsEnum.DATE]: v || dayjs().valueOf() },
InteractEventOn.CHANGE
)
}
}
// 手动更新
watch(
() => props.chartConfig.option.dataset,
(newData: number | number[]) => {
option.dataset = newData
// 关联目标组件首次请求带上默认内容
onChange(newData)
},
{
immediate: true
}
)
watch(
() => props.chartConfig.option.openLastWeek,
newData => {
if (!newData) return
const lastWeekEnd = new Date(new Date().toLocaleDateString()).getTime() - 7 * 24 * 3600 * 1000
const lastWeekStart = new Date().getTime()
props.chartConfig.option.componentInteractEventKey = 'daterange'
option.dataset = [lastWeekEnd, lastWeekStart]
onChange(option.dataset)
},
{
immediate: true
}
)
</script>
<style lang="scss" scoped>
@include deep() {
.n-input {
height: v-bind('h + "px"');
display: flex;
align-items: center;
background: v-bind('textBackgroundColor') !important;
}
.n-input__input-el {
color: v-bind('textColor') !important;
}
.n-input__placeholder {
color: v-bind('textColor') !important;
}
.n-base-icon {
color: v-bind('iconColor') !important;
}
.n-date-panel {
background: v-bind('textSelectModalBackgroundColor') !important;
}
}
</style>