82 lines
2.0 KiB
Vue
82 lines
2.0 KiB
Vue
<template>
|
|
<n-date-picker
|
|
v-model:value="option.dataset"
|
|
:panel="!!chartConfig.option.isPanel"
|
|
:type="chartConfig.option.componentInteractEventKey"
|
|
:style="`width:${w}px;`"
|
|
@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 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]}-${v[1]}`
|
|
},
|
|
InteractEventOn.CHANGE
|
|
)
|
|
} else {
|
|
// 存储到联动数据
|
|
useChartInteract(
|
|
props.chartConfig,
|
|
useChartEditStore,
|
|
{ [ComponentInteractParamsEnum.DATE]: v },
|
|
InteractEventOn.CHANGE
|
|
)
|
|
}
|
|
}
|
|
|
|
// 手动更新
|
|
watch(
|
|
() => props.chartConfig.option.dataset,
|
|
(newData: number | number[]) => {
|
|
option.dataset = newData
|
|
// 关联目标组件首次请求带上默认内容
|
|
onChange(newData)
|
|
},
|
|
{
|
|
immediate: true
|
|
}
|
|
)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@include deep() {
|
|
.n-input {
|
|
height: v-bind('h + "px"');
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|