From 4ee9ccc9334c0685a24beff896a73525773a40e9 Mon Sep 17 00:00:00 2001
From: "jlj05024111@163.com" <jlj05024111@163.com>
Date: Tue, 24 Dec 2024 17:02:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E6=97=A5=E5=8E=86?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=E7=BB=84=E4=BB=B6=E6=8E=A5=E6=94=B6=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?enablededit,=E7=94=A8=E4=BA=8E=E5=88=A4=E6=96=AD=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E6=94=AF=E6=8C=81=E6=98=BE=E7=A4=BA=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  4 +
 .../date-range-picker/date-range-picker.scss  | 25 ++++-
 .../date-range-picker/date-range-picker.tsx   | 95 ++++++++++++-------
 src/locale/en/index.ts                        |  2 +-
 src/locale/zh-CN/index.ts                     |  2 +-
 5 files changed, 92 insertions(+), 36 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22a85692ab..e2bbd126e6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
 
 ## [Unreleased]
 
+### Change
+
+- 更新日历模式日期选择公共组件接收参数enablededit,用于判断是否支持显示编辑模式
+
 ## [0.0.43] - 2024-12-22
 
 ### Added
diff --git a/src/common/date-range-picker/date-range-picker.scss b/src/common/date-range-picker/date-range-picker.scss
index 7ea0ac8446..9b43458955 100644
--- a/src/common/date-range-picker/date-range-picker.scss
+++ b/src/common/date-range-picker/date-range-picker.scss
@@ -4,6 +4,7 @@
   width: 100%;
   height: 100%;
   @include e('header') {
+    flex-shrink: 0;
     padding: 0 16px;
     color: getCssVar(color, default);
     background-color: getCssVar(color, primary);
@@ -85,6 +86,21 @@
       gap: getCssVar(spacing, base);
     }
   }
+  @include e('custom-header') {
+    display: flex;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    @include m('close') {
+      position: absolute;
+      right: getCssVar(spacing, base);
+    }
+  }
+  @include e('calendar-container') {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+  }
 }
 @include b('calendar-date-range-picker-calendar') {
   @include e('today') {
@@ -106,7 +122,8 @@
       line-height: var(--van-calendar-info-line-height);
     }
   }
-  .van-calendar__day--start,.van-calendar__day--end {
+  .van-calendar__day--start,
+  .van-calendar__day--end {
     @include e('today') {
       color: getCssVar(color, default);
       .ibiz-calendar-date-range-picker-calendar__today--bottom-info {
@@ -115,11 +132,15 @@
     }
   }
   .van-calendar__day--selected {
-    .van-calendar__selected-day{
+    .van-calendar__selected-day {
       height: 100%;
     }
     @include e('today') {
       color: getCssVar(color, default);
     }
   }
+  .van-calendar__day--disabled {
+    color: getCssVar(color, disabled, text);
+    opacity: 0.7;
+  }
 }
diff --git a/src/common/date-range-picker/date-range-picker.tsx b/src/common/date-range-picker/date-range-picker.tsx
index 57c84ab407..0c7e4de111 100644
--- a/src/common/date-range-picker/date-range-picker.tsx
+++ b/src/common/date-range-picker/date-range-picker.tsx
@@ -43,6 +43,11 @@ export const IBizDateRangeCalendar = defineComponent({
       type: Number,
       default: 10,
     },
+    // 允许编辑模式
+    enableEdit: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['cancel', 'save'],
   setup(props, { emit }) {
@@ -85,6 +90,9 @@ export const IBizDateRangeCalendar = defineComponent({
           return dayjs(_item).format(props.format);
         });
       }
+      if (!props.enableEdit) {
+        onSave();
+      }
     };
 
     /**
@@ -376,41 +384,64 @@ export const IBizDateRangeCalendar = defineComponent({
   render() {
     return (
       <div class={this.ns.b()}>
-        <div class={this.ns.e('header')}>
-          <div class={this.ns.e('actions')}>
-            <div class={this.ns.em('actions', 'close')}>
-              <van-icon name='cross' onClick={this.onCancel} />
-            </div>
-            <div
-              class={[
-                this.ns.em('actions', 'save'),
-                this.ns.is('select', this.allowSave),
-              ]}
-            >
-              <span onClick={this.onSave}>
-                {ibiz.i18n.t('component.dateRangePicker.save')}
-              </span>
+        {this.enableEdit && (
+          <div class={this.ns.e('header')}>
+            <div class={this.ns.e('actions')}>
+              <div class={this.ns.em('actions', 'close')}>
+                <van-icon name='cross' onClick={this.onCancel} />
+              </div>
+              <div
+                class={[
+                  this.ns.em('actions', 'save'),
+                  this.ns.is('select', this.allowSave),
+                ]}
+              >
+                <span onClick={this.onSave}>
+                  {ibiz.i18n.t('component.dateRangePicker.confirm')}
+                </span>
+              </div>
             </div>
+            {this.renderSelectRange()}
           </div>
-          {this.renderSelectRange()}
-        </div>
+        )}
         {!this.isEditable ? (
-          <van-calendar
-            ref='calendarRef'
-            class={this.ns.b('calendar')}
-            poppable={false}
-            formatter={this.formatter}
-            type={this.type}
-            show-title={false}
-            show-subtitle={false}
-            first-day-of-week={1}
-            show-confirm={false}
-            default-date={this.calcDefaultSelect}
-            min-date={this.minDate}
-            max-date={this.maxDate}
-            onSelect={this.onSelect}
-            onConfirm={this.onConfirm}
-          ></van-calendar>
+          <div class={this.ns.e('calendar-container')}>
+            <van-calendar
+              ref='calendarRef'
+              class={this.ns.b('calendar')}
+              poppable={false}
+              formatter={this.formatter}
+              type={this.type}
+              show-title={!this.enableEdit}
+              show-confirm={!this.enableEdit}
+              show-subtitle={false}
+              first-day-of-week={1}
+              default-date={this.calcDefaultSelect}
+              min-date={this.minDate}
+              max-date={this.maxDate}
+              onSelect={this.onSelect}
+              onConfirm={this.onConfirm}
+              {...this.$attrs}
+            >
+              {{
+                title: () => {
+                  return (
+                    <div class={this.ns.e('custom-header')}>
+                      <div class={this.ns.em('custom-header', 'title')}>
+                        {ibiz.i18n.t('component.dateRangePicker.selectDate')}
+                      </div>
+                      <div
+                        class={this.ns.em('custom-header', 'close')}
+                        onClick={this.onCancel}
+                      >
+                        <van-icon name='cross' onClick={this.onCancel} />
+                      </div>
+                    </div>
+                  );
+                },
+              }}
+            </van-calendar>
+          </div>
         ) : (
           this.renderCalendarInput()
         )}
diff --git a/src/locale/en/index.ts b/src/locale/en/index.ts
index 87207213ed..3b157f3e03 100644
--- a/src/locale/en/index.ts
+++ b/src/locale/en/index.ts
@@ -45,7 +45,7 @@ export default {
     },
     dateRangePicker: {
       headerPlaceholder: 'Please select a date range',
-      save: 'Save',
+      confirm: 'Confirm',
       today: 'Today',
       startDate: 'Start date',
       endDate: 'End date',
diff --git a/src/locale/zh-CN/index.ts b/src/locale/zh-CN/index.ts
index 196c10d3a7..52ab3dc55f 100644
--- a/src/locale/zh-CN/index.ts
+++ b/src/locale/zh-CN/index.ts
@@ -40,7 +40,7 @@ export default {
     },
     dateRangePicker: {
       headerPlaceholder: '请选择日期范围',
-      save: '保存',
+      confirm: '确认',
       today: '今天',
       startDate: '开始时间',
       endDate: '结束时间',
-- 
Gitee