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 @@
-
-
+
+
-
+
-
+
-
+
-
-
-
- 动态
-
-
-
-
-
-
- 动态日期以默认值进行计算
-
-
-
-
-
-
- 天
-
-
-
-
-
+
+