diff --git a/src/packages/components/Informations/Texts/TextCommon/enum.ts b/src/packages/components/Informations/Texts/TextCommon/enum.ts index f0a8c4d0..316a8be5 100644 --- a/src/packages/components/Informations/Texts/TextCommon/enum.ts +++ b/src/packages/components/Informations/Texts/TextCommon/enum.ts @@ -1,17 +1,25 @@ import { OptionsType } from '@/packages/index.d'; import { mapToOptions } from '@/utils'; +// 内置方法 export enum TextCommonEventEnum { - TEST = 'test' + FOO = 'foo', + BAR = 'bar' } +//内置事件 + +export const methodList = mapToOptions(new Map([ + [TextCommonEventEnum.FOO, '内置方法'], +])) as Array + export const eventList = mapToOptions(new Map([ - [TextCommonEventEnum.TEST, '测试内置方法'], + [TextCommonEventEnum.BAR, 'setup'], ])) as Array export const TextConfig = { key: 'TextCommon', title: '文字', - eventList + methodList } diff --git a/src/packages/components/Informations/Texts/TextCommon/index.ts b/src/packages/components/Informations/Texts/TextCommon/index.ts index d3a14395..2c0af388 100644 --- a/src/packages/components/Informations/Texts/TextCommon/index.ts +++ b/src/packages/components/Informations/Texts/TextCommon/index.ts @@ -2,7 +2,7 @@ import { getComponentConfig } from '@/utils'; import image from '@/assets/images/chart/informations/text_static.png' import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d' import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d' -import { TextConfig, eventList } from './enum' +import { TextConfig, methodList, eventList } from './enum' export const TextCommonConfig: ConfigType = getComponentConfig({ key: TextConfig.key, @@ -10,6 +10,7 @@ export const TextCommonConfig: ConfigType = getComponentConfig({ category: ChatCategoryEnum.TEXT, categoryName: ChatCategoryEnumName.TEXT, package: PackagesCategoryEnum.INFORMATIONS, + methodList, eventList, image }) \ No newline at end of file diff --git a/src/packages/components/Informations/Texts/TextCommon/index.vue b/src/packages/components/Informations/Texts/TextCommon/index.vue index 5f4af23c..5b6a8298 100644 --- a/src/packages/components/Informations/Texts/TextCommon/index.vue +++ b/src/packages/components/Informations/Texts/TextCommon/index.vue @@ -34,10 +34,14 @@ const props = defineProps({ } }) +const emits = defineEmits([TextCommonEventEnum.BAR]) + +emits(TextCommonEventEnum.BAR, 'setup event') + const listeners = convertEventBusListeners({ on: { - [TextCommonEventEnum.TEST]: () => { - alert('这是我的内置方法') + [TextCommonEventEnum.FOO]: () => { + alert('触发方法') } } }, props.chartConfig.id) diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 8c02b364..6a3b4eb1 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -31,12 +31,13 @@ export type ConfigType = { categoryName: string package: string chartFrame?: ChartFrameEnum + methodList?: Array eventList?: Array image: string | (() => Promise) } -export type EventList = Array<{ +export type MethodList = Array<{ name: string, event: string, type: string, @@ -48,7 +49,7 @@ export type EventList = Array<{ export type EventConfigValue = Record export type EventConfig = { @@ -119,6 +120,7 @@ export interface CreateComponentType extends PublicConfigType { chartConfig: ConfigType option: GlobalThemeJsonType eventList: Array + methodList: Array eventConfig: EventConfig } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue index e883b9f4..1009c647 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue @@ -12,14 +12,14 @@ @@ -68,7 +68,7 @@ - function  ()  { + function  (data)  { } @@ -112,11 +112,21 @@ watch(targetData, (newVal) => { if(!eventConfig.value){ newVal.eventConfig = reactive({}) } + //原生事件 Object.keys(EventTypeTitle).forEach((key: string) => { if(!(key in eventConfig.value)){ (newVal.eventConfig as any)[key] = { title: EventTypeTitle[key as EventType], - eventList: [] + methodList: [] + } + } + }) + // 组件内置事件 + newVal.chartConfig.eventList?.map((item: OptionsType) => { + if(!(item.value in eventConfig.value)){ + (newVal.eventConfig as any)[item.value] = { + title: item.label, + methodList: [] } } }) @@ -164,12 +174,12 @@ const selectedComponent = computed((): CreateComponentType | void => { return chartEditStore.componentList.find(item => Object.is(item.id, model.value.componentId)) }) -const commEventList = mapToOptions(CommonEventMap) +const commMethodList = mapToOptions(CommonEventMap) const componentMethodOptions = computed(() => { return [ - ...commEventList, - ...(selectedComponent.value ? (selectedComponent.value.chartConfig.eventList as Array) : []) + ...commMethodList, + ...(selectedComponent.value ? (selectedComponent.value.chartConfig.methodList as Array) : []) ] }) @@ -223,7 +233,7 @@ const columns = [ ...columnIconAttr, title: '删除', onClick(){ - ((eventConfig.value[rowData.eventType as keyof EventConfig]) as EventConfigValue[string]).eventList.splice(rowIndex, 1) + ((eventConfig.value[rowData.eventType as keyof EventConfig]) as EventConfigValue[string]).methodList.splice(rowIndex, 1) } }, () => h(icon.ionicons5.RemoveIcon)) ] @@ -237,13 +247,13 @@ const onSubmit = () => { formRef.value?.validate((errors) => { if (!errors && operateCollapse) { if(model.value.uid){ - const index = operateCollapse.eventList + const index = operateCollapse.methodList .findIndex((item:any) => item.uid === model.value.uid) if(index > -1){ - operateCollapse.eventList[index] = {...model.value} + operateCollapse.methodList[index] = {...model.value} } }else{ - operateCollapse.eventList.push({ + operateCollapse.methodList.push({ ...model.value, eventType, uid: getUUID(), diff --git a/src/views/preview/components/PreviewRenderList/PreViewRenderItem.vue b/src/views/preview/components/PreviewRenderList/PreViewRenderItem.vue index fa361e4c..60c46cb9 100644 --- a/src/views/preview/components/PreviewRenderList/PreViewRenderItem.vue +++ b/src/views/preview/components/PreviewRenderList/PreViewRenderItem.vue @@ -50,10 +50,10 @@ const bus = useEventBus() * } */ const getEventList = (eventConfig: EventConfig) => { - const res = Object.keys(omit(eventConfig, EventType.OTHER)) // 剔除other字段 + const res = Object.keys(eventConfig) // 剔除other字段 .reduce((previousValue: EventConfig, currentValue: string) => { // @ts-ignore - previousValue[currentValue] = eventConfig[currentValue].eventList.map((item: any) => { + previousValue[currentValue] = eventConfig[currentValue].methodList.map((item: any) => { if(item.type === EventTriggerType.JAVASCRIPT){ return (config: CreateComponentType) => { try {