From 57d7adf91bd54bdb46702c3901c4ecfc70e4552d Mon Sep 17 00:00:00 2001
From: jianglinjun <JLJ05024111@163.com>
Date: Wed, 16 Oct 2024 22:38:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=97=A5=E5=8E=86=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=E5=BC=B9=E7=AA=97=E9=80=89=E6=8B=A9=E5=B9=B4?=
 =?UTF-8?q?=E6=9C=88=E6=97=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                       |  1 +
 src/control/calendar/calendar.scss | 23 +++++++--
 src/control/calendar/calendar.tsx  | 77 ++++++++++++++++++++++++++++++
 src/locale/en/index.ts             |  5 ++
 src/locale/zh-CN/index.ts          |  5 ++
 5 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b264adb8..55da5f4a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 
 ### Change
 
+- 日历支持底部弹窗选择年月日
 - 富文本支持图片预览
 - 工具栏支持项显示模型
 - 返回顶部按钮样式对齐
diff --git a/src/control/calendar/calendar.scss b/src/control/calendar/calendar.scss
index 9094fd36..37a09d7b 100644
--- a/src/control/calendar/calendar.scss
+++ b/src/control/calendar/calendar.scss
@@ -148,11 +148,28 @@ $control-calendar: (text-color: getCssVar(color-text-0),
         border: rem(1px) getCssVar(color, border) solid;
         box-shadow: none;
     }
-
-
-
     span {
         top: 0;
         left: 0;
     }
+}
+
+@include b(control-calendar-header-toolbar){
+    width: 100%;
+    display: flex;
+    @include e('select-day'){
+        padding: getCssVar(spacing,base) getCssVar(spacing,tight);
+        background-color: getCssVar(color,bg,1);;
+        border-radius: 2px;
+        font-weight: getCssVar(font-weight,bold);
+    }
+    @include e('switch-toolbar'){
+        flex: 1;
+        align-items: center;
+        display: flex;
+        justify-content: end;
+        color: getCssVar(color,primary);
+        gap: getCssVar(spacing,base);
+        padding-right: getCssVar(spacing,base);
+    }
 }
\ No newline at end of file
diff --git a/src/control/calendar/calendar.tsx b/src/control/calendar/calendar.tsx
index 553eed03..62413de7 100644
--- a/src/control/calendar/calendar.tsx
+++ b/src/control/calendar/calendar.tsx
@@ -33,6 +33,15 @@ export const CalendarControl = defineComponent({
 
     const loadItems: Ref<ICalendarItemData[]> = ref([]);
 
+    // 显示底部弹窗
+    const visible = ref<boolean>(false);
+
+    // 日历
+    const calendar = ref();
+
+    // 弹窗选择时间
+    const currentDate = ref();
+
     // 存储月加载缓存
     const markDateItems: Ref<IData> = ref({});
     //  加载的标记数据
@@ -160,13 +169,41 @@ export const CalendarControl = defineComponent({
       loadMarkerData(c.state.selectedDate);
     };
 
+    // 自定义选择日期
+    const onCustom = () => {
+      const temptime = dayjs(c.state.selectedDate)
+        .format('YYYY-MM-DD')
+        .split('-');
+      currentDate.value = temptime;
+      visible.value = true;
+    };
+
+    // 跳转今天
+    const toDay = () => {
+      calendar.value.today();
+    };
+
+    // 确认选择日期
+    const onConfirm = () => {
+      const date = currentDate.value.join('-');
+      const time = new Date(date);
+      calendar.value.reset(time);
+      visible.value = false;
+    };
+
     return {
       c,
       ns,
       markerData,
       loadItems,
+      visible,
+      calendar,
+      currentDate,
+      onConfirm,
       calcItemStyle,
       dateChange,
+      onCustom,
+      toDay,
     };
   },
   render() {
@@ -288,11 +325,37 @@ export const CalendarControl = defineComponent({
       return renderCalendarList(list);
     };
 
+    // 绘制顶部工具栏
+    const renderHeaderToolbar = () => {
+      return (
+        <div class={this.ns.b('header-toolbar')}>
+          <div class={this.ns.be('header-toolbar', 'select-day')}>
+            {dayjs(this.c.state.selectedDate).format('YYYY年MM月DD日')}
+          </div>
+          <div class={this.ns.be('header-toolbar', 'switch-toolbar')}>
+            <div
+              class={this.ns.bem('header-toolbar', 'switch-toolbar', 'item')}
+              onClick={this.onCustom}
+            >
+              {ibiz.i18n.t('control.calendar.customPicker')}
+            </div>
+            <div
+              class={this.ns.bem('header-toolbar', 'switch-toolbar', 'item')}
+              onClick={this.toDay}
+            >
+              {ibiz.i18n.t('control.calendar.today')}
+            </div>
+          </div>
+        </div>
+      );
+    };
+
     return (
       this.c.state.isCreated && (
         <iBizControlBase controller={this.c}>
           <div class={this.ns.b('content')}>
             <VueHashCalendar
+              ref='calendar'
               show-week-view={true}
               pickerType='date'
               onChange={date => {
@@ -308,6 +371,9 @@ export const CalendarControl = defineComponent({
                     </div>
                   );
                 },
+                action: () => {
+                  return renderHeaderToolbar();
+                },
               }}
             </VueHashCalendar>
           </div>
@@ -331,6 +397,17 @@ export const CalendarControl = defineComponent({
               })}
             </van-tabs>
           </div>
+          <van-popup
+            v-model:show={this.visible}
+            style={{ height: '70%' }}
+            position='bottom'
+          >
+            <van-date-picker
+              v-model={this.currentDate}
+              onConfirm={this.onConfirm}
+              title={ibiz.i18n.t('control.calendar.pickerDate')}
+            />
+          </van-popup>
         </iBizControlBase>
       )
     );
diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts
index 0d69429f..b056ef56 100644
--- a/src/locale/en/index.ts
+++ b/src/locale/en/index.ts
@@ -86,6 +86,11 @@ export default {
       next: 'Next',
       finish: 'Finish',
     },
+    calendar: {
+      today: 'Today',
+      pickerDate: 'Picker Date',
+      customPicker: 'Custom Picker',
+    },
   },
   // 编辑器
   editor: {
diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts
index 9328c60c..4e007877 100644
--- a/src/locale/zh-CN/index.ts
+++ b/src/locale/zh-CN/index.ts
@@ -84,6 +84,11 @@ export default {
       next: '下一步',
       finish: '完成',
     },
+    calendar: {
+      today: '今天',
+      pickerDate: '选择日期',
+      customPicker: '自定义选择日期',
+    },
   },
   // 编辑器
   editor: {
-- 
Gitee