diff --git a/src/enums/eventEnum.ts b/src/enums/eventEnum.ts index 6abfbf67..ca2a835d 100644 --- a/src/enums/eventEnum.ts +++ b/src/enums/eventEnum.ts @@ -17,17 +17,20 @@ export enum InteractEvents { INTERACT_FN = 'interactFn' } -// 组件交互回调事件触发的类型 +// 全局组件交互回调事件触发的类型(当然可以自定义名称) export enum InteractEventOn { CLICK = 'click', CHANGE = 'change' } +// 确定交互组件触发类型 key名称 +export const COMPONENT_INTERACT_EVENT_KET = 'componentInteractEventKey' + // 交互式组件的触发配置 -export type InteractActionType = { +export type InteractActionsType = { interactType: InteractEventOn interactName: string - componentEmitEvents: { [T: string]: any[] } + componentEmitEvents: { [T: string]: { value: any; label: string }[] } } // vue3 生命周期事件 diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts index 758e190f..cba17e0d 100644 --- a/src/hooks/useChartDataFetch.hook.ts +++ b/src/hooks/useChartDataFetch.hook.ts @@ -87,16 +87,14 @@ export const useChartDataFetch = ( } } - // 立即调用 - fetchFn() - - // 组件交互处理监听 + // 普通初始化与组件交互处理监听 watch( () => targetComponent.request, () => { fetchFn() }, { + immediate: true, deep: true } ) diff --git a/src/hooks/useChartInteract.hook.ts b/src/hooks/useChartInteract.hook.ts index 5e997ef7..efa2ae73 100644 --- a/src/hooks/useChartInteract.hook.ts +++ b/src/hooks/useChartInteract.hook.ts @@ -9,14 +9,13 @@ type ChartEditStoreType = typeof useChartEditStore export const useChartInteract = ( chartConfig: CreateComponentType, useChartEditStore: ChartEditStoreType, - param: { [name: string]: string }, - onEvent: string + param: { [T: string]: any }, + interactEventOn: string ) => { const chartEditStore = useChartEditStore() const { interactEvents } = chartConfig.events - const fnOnEvent = interactEvents.filter(item => { - return item.interactOn === onEvent + return item.interactOn === interactEventOn }) if (fnOnEvent.length === 0) return @@ -34,3 +33,8 @@ export const useChartInteract = ( }) }) } + +// 联动事件触发的 type 变更时,清除当前绑定内容 +export const clearInteractEvent = (chartConfig: CreateComponentType) => { + +} diff --git a/src/packages/components/Informations/Inputs/InputsDate/config.ts b/src/packages/components/Informations/Inputs/InputsDate/config.ts index c0949b4a..df864afc 100644 --- a/src/packages/components/Informations/Inputs/InputsDate/config.ts +++ b/src/packages/components/Informations/Inputs/InputsDate/config.ts @@ -1,52 +1,18 @@ -import { NDatePicker } from 'naive-ui' +import dayjs from 'dayjs' +import cloneDeep from 'lodash/cloneDeep' import { PublicConfigClass } from '@/packages/public' import { CreateComponentType } from '@/packages/index.d' -import { InputsDateConfig } from './index' -import cloneDeep from 'lodash/cloneDeep' import { chartInitConfig } from '@/settings/designSetting' -import { InteractEventOn, InteractActionType } from '@/enums/eventEnum' - -// 时间组件类型 -enum ComponentInteractEvent { - DATE = 'date', - DATERANGE = 'daterange' -} +import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum' +import { interactActions, ComponentInteractEventEnum } from './interact' +import { InputsDateConfig } from './index' export const option = { - dataset: { - count: 0, - // 时间组件展示类型 daterange & date - type: ComponentInteractEvent.DATE, - range: undefined - } + // 时间组件展示类型,必须和 interactActions 中定义的数据一致 + [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE, + dataset: dayjs().valueOf() } -// 定义组件触发回调事件 -const interactActions: InteractActionType[] = [ - { - interactType: InteractEventOn.CHANGE, - interactName: '完成后的回调', - componentEmitEvents: { - [ComponentInteractEvent.DATE]: [ - { - value: 'date', - label: '日期' - } - ], - [ComponentInteractEvent.DATERANGE]: [ - { - value: 'dateStart', - label: '开始时间' - }, - { - value: 'dateEnd', - label: '结束时间' - } - ] - } - } -] - export default class Config extends PublicConfigClass implements CreateComponentType { public key = InputsDateConfig.key public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 } diff --git a/src/packages/components/Informations/Inputs/InputsDate/config.vue b/src/packages/components/Informations/Inputs/InputsDate/config.vue index 304e7305..cfc528fe 100644 --- a/src/packages/components/Informations/Inputs/InputsDate/config.vue +++ b/src/packages/components/Informations/Inputs/InputsDate/config.vue @@ -1,42 +1,23 @@