perf: 优化交互结构，优化时间选择器组件

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 }

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

@@ -1,42 +1,23 @@
 <template>
-  <CollapseItem name="通用的Props" :expanded="true">
-    <SettingItemBox name="基础">
+  <collapse-item name="时间配置" :expanded="true">
+    <setting-item-box name="基础">
       <setting-item name="类型">
-        <n-select v-model:value="props.optionData.dataset.type" size="small" :options="datePickerTypeOptions" />
+        <n-select
+          v-model:value="props.optionData.componentInteractEventKey"
+          size="small"
+          :options="datePickerTypeOptions"
+        />
       </setting-item>
-    </SettingItemBox>
+    </setting-item-box>
 
-    <SettingItemBox name="默认值">
+    <setting-item-box name="默认值" :alone="true">
       <n-date-picker
         size="small"
-        :style="{ width: ['date'].includes(props.optionData.dataset.type) ? 'auto' : '250px' }"
-        v-model:value="props.optionData.dataset.range"
-        :type="props.optionData.dataset.type"
-        clearable
+        v-model:value="props.optionData.dataset"
+        :type="props.optionData.componentInteractEventKey"
       />
-    </SettingItemBox>
-    <SettingItemBox>
-      <template #name>
-        <n-text>动态</n-text>
-        <n-tooltip trigger="hover">
-          <template #trigger>
-            <n-icon size="21" :depth="3">
-              <help-outline-icon></help-outline-icon>
-            </n-icon>
-          </template>
-          <n-text>动态日期以默认值进行计算</n-text>
-        </n-tooltip>
-      </template>
-
-      <setting-item name="计算值">
-        <n-input-number v-model:value="props.optionData.dataset.count" size="small" placeholder="0">
-          <template #prefix>
-            <n-text depth="3">天</n-text>
-          </template>
-        </n-input-number>
-      </setting-item>
-    </SettingItemBox>
-  </CollapseItem>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script lang="ts" setup>
@@ -56,7 +37,7 @@ const props = defineProps({
 
 const datePickerTypeOptions = [
   {
-    label: '日期',
+    label: '具体日期',
     value: 'date'
   },
   {

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

@@ -1,71 +1,81 @@
 <template>
   <div class="mill-date-box">
     <div :style="`width:${w}px; height:${h}px;`">
-      <n-date-picker v-model:value="rangeDate" :type="option.dataset.type" @update:value="onChange" />
+      <n-date-picker
+        v-model:value="option.dataset"
+        :type="chartConfig.option.componentInteractEventKey"
+        @update:value="onChange"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
+import dayjs from 'dayjs'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { option as configOption } from './config'
 import { useChartInteract } from '@/hooks'
-import dayjs from 'dayjs'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
 
 const props = defineProps({
   chartConfig: {
-    type: Object as PropType<CreateComponentType & typeof option>,
+    type: Object as PropType<CreateComponentType>,
     required: true
   }
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const rangeDate = ref()
+const rangeDate = ref<number | number[]>()
 
 const option = shallowReactive({
-  dataset: configOption.dataset
+  dataset: props.chartConfig.option.dataset
 })
 
+// 监听事件改变
 const onChange = (v: number | number[]) => {
   if (v instanceof Array) {
-    const dateStart = dayjs(v[0]).format('YYYY-MM-DD')
-    const dateEnd = dayjs(v[1]).format('YYYY-MM-DD')
-    useChartInteract(props.chartConfig, useChartEditStore, { dateStart, dateEnd }, 'change')
+    // 存储到联动数据
+    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 {
-    const date = dayjs(v).format('YYYY-MM-DD')
-    useChartInteract(props.chartConfig, useChartEditStore, { date }, 'change')
+    // 存储到联动数据
+    useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATE]: v },
+      InteractEventOn.CHANGE
+    )
   }
 }
 
 // 手动更新
 watch(
   () => props.chartConfig.option.dataset,
-  (newData: any) => {
+  (newData: number | number[]) => {
     option.dataset = newData
-    const { range, count } = newData
-    if (!range) return
-    if (newData.range instanceof Array) {
-      const countDate: number[] = [
-        dayjs(range[0]).add(count, 'day').valueOf(),
-        dayjs(range[1]).add(count, 'day').valueOf()
-      ]
-      rangeDate.value = countDate
-    } else {
-      const countDate: number = dayjs(range).add(count, 'day').valueOf()
-      rangeDate.value = countDate
-    }
+    // 关联目标组件首次请求带上默认内容
+    onChange(newData)
   },
   {
-    immediate: true,
-    deep: true
+    immediate: true
   }
 )
 
 // 预览更新
-useChartDataFetch(props.chartConfig, useChartEditStore)
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number | number[]) => {
+  option.dataset = newData
+})
 </script>
 
 <style lang="scss" scoped>

src/packages/components/Informations/Inputs/InputsDate/interact.ts

@@ -0,0 +1,45 @@
+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+  DATE = 'date',
+  DATE_RANGE = 'daterange'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+  DATE = 'date',
+  DATE_START = 'dateStart',
+  DATE_END = 'dateEnd',
+  DATE_RANGE = 'daterange'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+  {
+    interactType: InteractEventOn.CHANGE,
+    interactName: '完成后的回调',
+    componentEmitEvents: {
+      [ComponentInteractEventEnum.DATE]: [
+        {
+          value: ComponentInteractParamsEnum.DATE,
+          label: '日期'
+        }
+      ],
+      [ComponentInteractEventEnum.DATE_RANGE]: [
+        {
+          value: ComponentInteractParamsEnum.DATE_START,
+          label: '开始时间'
+        },
+        {
+          value: ComponentInteractParamsEnum.DATE_END,
+          label: '结束时间'
+        },
+        {
+          value: ComponentInteractParamsEnum.DATE_RANGE,
+          label: '日期范围'
+        }
+      ]
+    }
+  }
+]