feat： 加入时间筛选控件

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

@@ -0,0 +1,42 @@
+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/config.vue

@@ -0,0 +1,67 @@
+<template>
+  <CollapseItem name="通用的Props" :expanded="true">
+    <SettingItemBox name="基础">
+      <setting-item name="类型">
+        <n-select v-model:value="props.optionData.dataset.type" size="small" :options="datePickerTypeOptions" />
+      </setting-item>
+    </SettingItemBox>
+
+    <SettingItemBox name="默认值">
+      <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
+      />
+    </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>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue'
+import { option } from './config'
+import { icon } from '@/plugins'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+
+const { HelpOutlineIcon } = icon.ionicons5
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const datePickerTypeOptions = [
+  {
+    label: '日期',
+    value: 'date'
+  },
+  {
+    label: '日期范围',
+    value: 'daterange'
+  }
+]
+</script>

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

@@ -0,0 +1,14 @@
+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/Date/index.vue

@@ -0,0 +1,79 @@
+<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" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, ref, shallowReactive, watch, computed } 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 dayjs from 'dayjs'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+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')
+  } else {
+    const data1 = dayjs(v).format('YYYY-MM-DD')
+    eventsCreate(props.chartConfig, useChartEditStore, { data1 }, 'change')
+  }
+}
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    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
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// // 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>
+
+<style lang="scss" scoped>
+.mill-text-box {
+  display: flex;
+}
+:deep(.n-input) {
+  height: v-bind('h + "px"');
+  display: flex;
+  align-items: center;
+}
+</style>

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

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

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

@@ -2,6 +2,7 @@ export enum ChatCategoryEnum {
   BORDER = 'Borders',
   DECORATE = 'Decorates',
   THREE = 'Three',
+  PICKERS = 'Pickers',
   MORE = 'Mores'
 }
 
@@ -9,5 +10,6 @@ export enum ChatCategoryEnumName {
   BORDER = '边框',
   DECORATE = '装饰',
   THREE = '三维',
+  PICKERS = '控件',
   MORE = '更多'
 }

src/packages/components/Decorates/index.ts

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