From 8f0f9ea3340d5cfffe5c5161a3de94dcd521bdad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Wed, 15 Mar 2023 20:21:10 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Informations/Inputs/InputsDate/config.ts  |  2 +
 .../Informations/Inputs/InputsDate/config.vue | 56 ++++++++++++++++-
 .../Informations/Inputs/InputsDate/index.vue  |  1 +
 .../Inputs/InputsDate/interact.ts             | 61 ++++++++++++-------
 .../ChartEventInteraction/index.vue           |  1 +
 5 files changed, 97 insertions(+), 24 deletions(-)

diff --git a/src/packages/components/Informations/Inputs/InputsDate/config.ts b/src/packages/components/Informations/Inputs/InputsDate/config.ts
index df864afc..72e9cfc0 100644
--- a/src/packages/components/Informations/Inputs/InputsDate/config.ts
+++ b/src/packages/components/Informations/Inputs/InputsDate/config.ts
@@ -10,6 +10,8 @@ import { InputsDateConfig } from './index'
 export const option = {
   // 时间组件展示类型，必须和 interactActions 中定义的数据一致
   [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATE,
+  // 下拉展示
+  isPanel: 0,
   dataset: dayjs().valueOf()
 }
 
diff --git a/src/packages/components/Informations/Inputs/InputsDate/config.vue b/src/packages/components/Informations/Inputs/InputsDate/config.vue
index cfc528fe..38766425 100644
--- a/src/packages/components/Informations/Inputs/InputsDate/config.vue
+++ b/src/packages/components/Informations/Inputs/InputsDate/config.vue
@@ -1,4 +1,14 @@
 <template>
+  <collapse-item name="展示方式" :expanded="true">
+    <setting-item-box name="选择方式">
+      <n-select
+        v-model:value="props.optionData.isPanel"
+        size="small"
+        :options="panelOptions"
+      />
+    </setting-item-box>
+  </collapse-item>
+
   <collapse-item name="时间配置" :expanded="true">
     <setting-item-box name="基础">
       <setting-item name="类型">
@@ -25,6 +35,7 @@ import { PropType } from 'vue'
 import { icon } from '@/plugins'
 import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
+import { ComponentInteractEventEnum } from './interact'
 
 const { HelpOutlineIcon } = icon.ionicons5
 
@@ -35,14 +46,53 @@ const props = defineProps({
   }
 })
 
+const panelOptions = [
+  {
+    label: '下拉展示',
+    value: 0
+  },
+  {
+    label: '面板展示',
+    value: 1
+  }
+]
+
 const datePickerTypeOptions = [
   {
-    label: '具体日期',
-    value: 'date'
+    label: '日期',
+    value: ComponentInteractEventEnum.DATE
+  },
+  {
+    label: '日期时间',
+    value: ComponentInteractEventEnum.DATE_TIME
   },
   {
     label: '日期范围',
-    value: 'daterange'
+    value: ComponentInteractEventEnum.DATE_RANGE
+  },
+  {
+    label: '月份',
+    value: ComponentInteractEventEnum.MONTH
+  },
+  {
+    label: '月份范围',
+    value: ComponentInteractEventEnum.MONTH_RANGE
+  },
+  {
+    label: '年份',
+    value: ComponentInteractEventEnum.YEAR
+  },
+  {
+    label: '年份范围',
+    value: ComponentInteractEventEnum.YEAR_RANGE
+  },
+  {
+    label: '季度',
+    value: ComponentInteractEventEnum.QUARTER
+  },
+  {
+    label: '季度范围',
+    value: ComponentInteractEventEnum.QUARTER_RANGE
   }
 ]
 </script>
diff --git a/src/packages/components/Informations/Inputs/InputsDate/index.vue b/src/packages/components/Informations/Inputs/InputsDate/index.vue
index b8928640..7892a11e 100644
--- a/src/packages/components/Informations/Inputs/InputsDate/index.vue
+++ b/src/packages/components/Informations/Inputs/InputsDate/index.vue
@@ -3,6 +3,7 @@
     <div :style="`width:${w}px; height:${h}px;`">
       <n-date-picker
         v-model:value="option.dataset"
+        :panel="!!chartConfig.option.isPanel"
         :type="chartConfig.option.componentInteractEventKey"
         @update:value="onChange"
       />
diff --git a/src/packages/components/Informations/Inputs/InputsDate/interact.ts b/src/packages/components/Informations/Inputs/InputsDate/interact.ts
index bf1c737d..a9323163 100644
--- a/src/packages/components/Informations/Inputs/InputsDate/interact.ts
+++ b/src/packages/components/Informations/Inputs/InputsDate/interact.ts
@@ -3,7 +3,15 @@ import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
 // 时间组件类型
 export enum ComponentInteractEventEnum {
   DATE = 'date',
-  DATE_RANGE = 'daterange'
+  DATE_TIME = 'datetime',
+  DATE_RANGE = 'daterange',
+  DATE_TIME_RANGE = 'datetimerange',
+  MONTH = 'month',
+  MONTH_RANGE = 'monthrange',
+  YEAR = 'year',
+  YEAR_RANGE = 'yearrange',
+  QUARTER = 'quarter',
+  QUARTER_RANGE = 'quarterrange'
 }
 
 // 联动参数
@@ -14,32 +22,43 @@ export enum ComponentInteractParamsEnum {
   DATE_RANGE = 'daterange'
 }
 
+const time = [
+  {
+    value: ComponentInteractParamsEnum.DATE,
+    label: '日期'
+  }
+]
+
+const timeRange = [
+  {
+    value: ComponentInteractParamsEnum.DATE_START,
+    label: '开始时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_END,
+    label: '结束时间'
+  },
+  {
+    value: ComponentInteractParamsEnum.DATE_RANGE,
+    label: '日期范围'
+  }
+]
+
 // 定义组件触发回调事件
 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: '日期范围'
-        }
-      ]
+      [ComponentInteractEventEnum.DATE]: time,
+      [ComponentInteractEventEnum.DATE_TIME]: time,
+      [ComponentInteractEventEnum.DATE_RANGE]: timeRange,
+      [ComponentInteractEventEnum.MONTH]: time,
+      [ComponentInteractEventEnum.MONTH_RANGE]: timeRange,
+      [ComponentInteractEventEnum.QUARTER]: time,
+      [ComponentInteractEventEnum.QUARTER_RANGE]: timeRange,
+      [ComponentInteractEventEnum.YEAR]: time,
+      [ComponentInteractEventEnum.YEAR_RANGE]: timeRange,
     }
   }
 ]
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue
index 5b2f4b92..636414ed 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue
@@ -105,6 +105,7 @@
             size="tiny"
             v-model:value="item.interactFn[ovlKey]"
             :options="fnDimensionsAndSource(item.interactOn)"
+            clearable
           ></n-select>
         </setting-item>
         <n-text