feat: 优化交互组件

src/packages/components/Decorates/Inputs/InputsDate/config.ts

@@ -0,0 +1,56 @@
+import { NDatePicker } from 'naive-ui'
+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'
+}
+
+export const option = {
+  dataset: {
+    count: 0,
+    // 时间组件展示类型 daterange & date
+    type: ComponentInteractEvent.DATE,
+    range: undefined
+  }
+}
+
+// 定义组件触发回调事件
+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 }
+  public chartConfig = cloneDeep(InputsDateConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Inputs/InputsDate/config.vue

@@ -41,9 +41,9 @@
 
 <script lang="ts" setup>
 import { PropType } from 'vue'
-import { option } from './config'
 import { icon } from '@/plugins'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
 
 const { HelpOutlineIcon } = icon.ionicons5
 

src/packages/components/Decorates/Inputs/InputsDate/index.ts

@@ -0,0 +1,13 @@
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsDateConfig: ConfigType = {
+  key: 'InputsDate',
+  chartKey: 'VInputsDate',
+  conKey: 'VCInputsDate',
+  title: '时间选择器',
+  category: ChatCategoryEnum.INPUTS,
+  categoryName: ChatCategoryEnumName.INPUTS,
+  package: PackagesCategoryEnum.DECORATES,
+  image: 'inputs_date.png'
+}

src/packages/components/Decorates/Inputs/InputsDate/index.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="mill-date-box">
-    <div :style="`width:${w}px;height:${h}px;`">
+    <div :style="`width:${w}px; height:${h}px;`">
       <n-date-picker v-model:value="rangeDate" :type="option.dataset.type" @update:value="onChange" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, ref, shallowReactive, watch, computed } from 'vue'
+import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { option as configOption } from './config'
-import { eventsCreate } from '@/hooks'
+import { useChartInteract } from '@/hooks'
 import dayjs from 'dayjs'
 
 const props = defineProps({
@@ -28,14 +28,15 @@ const rangeDate = ref()
 const option = shallowReactive({
   dataset: configOption.dataset
 })
+
 const onChange = (v: number | number[]) => {
   if (v instanceof Array) {
     const data1 = dayjs(v[0]).format('YYYY-MM-DD')
     const data2 = dayjs(v[1]).format('YYYY-MM-DD')
-    eventsCreate(props.chartConfig, useChartEditStore, { data1, data2 }, 'change')
+    useChartInteract(props.chartConfig, useChartEditStore, { data1, data2 }, 'change')
   } else {
     const data1 = dayjs(v).format('YYYY-MM-DD')
-    eventsCreate(props.chartConfig, useChartEditStore, { data1 }, 'change')
+    useChartInteract(props.chartConfig, useChartEditStore, { data1 }, 'change')
   }
 }
 
@@ -63,7 +64,7 @@ watch(
   }
 )
 
-// // 预览更新
+// 预览更新
 useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
 

src/packages/components/Decorates/Inputs/index.ts

@@ -0,0 +1,3 @@
+import { InputsDateConfig } from './InputsDate/index'
+
+export default [InputsDateConfig]

src/packages/components/Decorates/Pickers/Date/config.ts

@@ -1,42 +0,0 @@
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { DataConfig } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-import { chartInitConfig } from '@/settings/designSetting'
-
-export const option = {
-  eventsApi: [
-    {
-      value: 'change',
-      label: '完成后的回调',
-      date: [
-        {
-          value: 'data1',
-          label: '日期',
-        },
-      ],
-      daterange: [
-        {
-          value: 'data1',
-          label: '开始时间',
-        },
-        {
-          value: 'data2',
-          label: '结束时间',
-        }
-      ]
-    }
-  ],
-  dataset: {
-    count: 0,
-    type: 'date', //'daterange', // date
-    range: undefined
-  }
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = DataConfig.key
-  public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
-  public chartConfig = cloneDeep(DataConfig)
-  public option = cloneDeep(option)
-}

src/packages/components/Decorates/Pickers/Date/index.ts

@@ -1,14 +0,0 @@
-import image from '@/assets/images/chart/informations/text_static.png'
-import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
-import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-
-export const DataConfig: ConfigType = {
-  key: 'Date',
-  chartKey: 'VDate',
-  conKey: 'VCDate',
-  title: '时间',
-  category: ChatCategoryEnum.PICKERS,
-  categoryName: ChatCategoryEnumName.PICKERS,
-  package: PackagesCategoryEnum.DECORATES,
-  image
-}

src/packages/components/Decorates/Pickers/index.ts

@@ -1,2 +0,0 @@
-import { DataConfig } from './Date/index'
-export default [DataConfig]

src/packages/components/Decorates/index.d.ts

@@ -2,7 +2,7 @@ export enum ChatCategoryEnum {
   BORDER = 'Borders',
   DECORATE = 'Decorates',
   THREE = 'Three',
-  PICKERS = 'Pickers',
+  INPUTS = 'Inputs',
   MORE = 'Mores'
 }
 
@@ -10,6 +10,7 @@ export enum ChatCategoryEnumName {
   BORDER = '边框',
   DECORATE = '装饰',
   THREE = '三维',
-  PICKERS = '控件',
+  // 控件 => 数据录入
+  INPUTS = '控件',
   MORE = '更多'
 }

src/packages/components/Decorates/index.ts

@@ -1,7 +1,7 @@
 import Borders from './Borders'
 import Decorates from './Decorates'
 import Three from './Three'
-import Pickers from './Pickers'
+import Inputs from './Inputs'
 import Mores from './Mores'
 
-export const DecorateList = [...Borders, ...Decorates, ...Three, ...Pickers, ...Mores]
+export const DecorateList = [...Borders, ...Decorates, ...Three, ...Inputs, ...Mores]

src/packages/index.d.ts

@@ -1,4 +1,4 @@
-import { BaseEvent, EventLife } from '@/enums/eventEnum'
+import { BaseEvent, EventLife, InteractEvents, InteractEventOn, InteractActionType } from '@/enums/eventEnum'
 import type { GlobalThemeJsonType } from '@/settings/chartThemes/index'
 import type { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d'
 
@@ -120,25 +120,26 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
+  interactActions?: InteractActionType[],
   events: {
     baseEvent: {
       [K in BaseEvent]?: string
-    },
+    }
     advancedEvents: {
       [K in EventLife]?: string
-    },
-    eventsFn: {
-      on: 'change' | 'click' | undefined
-      components: string | undefined
-      fn: { [name: string]: string }
-    }[],
+    }
+    interactEvents: {
+      [InteractEvents.INTERACT_ON]: InteractEventOn.CHANGE | InteractEventOn.CLICK | undefined
+      [InteractEvents.INTERACT_COMPONENTS]: string | undefined
+      [InteractEvents.INTERACT_FN]: { [name: string]: string }
+    }[]
   }
 }
 
 export interface CreateComponentType extends PublicConfigType, requestConfig {
   key: string
   chartConfig: ConfigType
-  option: GlobalThemeJsonType,
+  option: GlobalThemeJsonType
 }
 
 // 组件成组实例类

src/packages/public/publicConfig.ts

@@ -103,7 +103,7 @@ export class PublicConfigClass implements PublicConfigType {
       [EventLife.VNODE_MOUNTED]: undefined,
       [EventLife.VNODE_BEFORE_MOUNT]: undefined
     },
-    eventsFn: []
+    interactEvents: []
   }
 }