Ver Fonte

fix (1.51.0 -> 1.51.1): 修复 bug 180 - 优化日期选择器交互体验,解决联动日历操作不便问题

- 移除 RangePicker 组件,替换为两个独立的 DatePicker
- 解决日历联动导致跨年份选择时需要重复调整的问题
- 添加 disabledDate 逻辑,防止选择无效日期范围
- 开始时间选择器禁用结束时间之后的日期
- 结束时间选择器禁用开始时间之前的日期

改动文件:
- src/pages/patient/components/SearchPanel.tsx
- CHANGELOG.md
- package.json
dengdx há 1 semana atrás
pai
commit
9c689a7c49
3 ficheiros alterados com 58 adições e 23 exclusões
  1. 17 0
      CHANGELOG.md
  2. 1 1
      package.json
  3. 40 22
      src/pages/patient/components/SearchPanel.tsx

+ 17 - 0
CHANGELOG.md

@@ -1,6 +1,23 @@
 # 变更日志 (Changelog)
 
 本项目的所有重要变更都将记录在此文件中。
+
+## [1.51.1] - 2026-01-06 10:50
+
+### 修复 (Fixed)
+
+- **修复 bug 180 - 优化日期选择器交互体验,解决联动日历操作不便问题** - 将 RangePicker 替换为独立的日期选择器,解决跨年份选择时需要重复调整日历的用户体验问题
+  - 移除 RangePicker 组件,替换为两个独立的 DatePicker
+  - 开始时间和结束时间各自独立选择,互不影响
+  - 添加 disabledDate 逻辑,防止选择无效日期范围
+  - 开始时间选择器禁用结束时间之后的日期
+  - 结束时间选择器禁用开始时间之前的日期
+
+**改动文件:**
+- src/pages/patient/components/SearchPanel.tsx
+- CHANGELOG.md
+- package.json
+
 ## [1.51.0] - 2026-01-05 21:38
 
 ### 新增 (Added)

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "zsis",
-  "version": "1.51.0",
+  "version": "1.51.1",
   "private": true,
   "description": "医学成像系统",
   "main": "main.js",

+ 40 - 22
src/pages/patient/components/SearchPanel.tsx

@@ -22,7 +22,6 @@ import { BinFilter } from '@/states/patient/bin/types/binFilter';
 import TimeRangeSelector from './TimeRangeSelector';
 // import { AnyAction } from '@reduxjs/toolkit';
 
-const { RangePicker } = DatePicker;
 
 const SearchPanel: React.FC = () => {
   const intl = useIntl();
@@ -70,34 +69,53 @@ const SearchPanel: React.FC = () => {
         onChange={(e) => dispatch(setAccNo(e.target.value))}
       />
       <TimeRangeSelector />
-      <RangePicker
+      {/* 开始时间 */}
+      <DatePicker
         className="w-full"
-        placeholder={[
-          intl.formatMessage({
-            id: 'searchPanel.startDate',
-            defaultMessage: 'searchPanel.startDate',
-          }),
-          intl.formatMessage({
-            id: 'searchPanel.endDate',
-            defaultMessage: 'searchPanel.endDate',
-          }),
-        ]}
+        placeholder={intl.formatMessage({
+          id: 'searchPanel.startDate',
+          defaultMessage: 'searchPanel.startDate',
+        })}
         size="small"
-        value={startTime && endTime ? [dayjs(startTime), dayjs(endTime)] : null}
-        onChange={(dates) => {
-          if (dates && dates[0] && dates[1]) {
-            // 使用RFC3339Nano格式
-            dispatch(
-              setStartTime(dates[0].format('YYYY-MM-DDTHH:mm:ss.SSS[+08:00]'))
-            );
-            dispatch(
-              setEndTime(dates[1].format('YYYY-MM-DDTHH:mm:ss.SSS[+08:00]'))
-            );
+        value={startTime ? dayjs(startTime) : null}
+        onChange={(date) => {
+          if (date) {
+            dispatch(setStartTime(date.format('YYYY-MM-DDTHH:mm:ss.SSS[+08:00]')));
           } else {
             dispatch(setStartTime(''));
+          }
+        }}
+        disabledDate={(current) => {
+          // 如果已选择结束时间,禁用结束时间之后的日期
+          if (endTime) {
+            return current && current.isAfter(dayjs(endTime), 'day');
+          }
+          return false;
+        }}
+      />
+      {/* 结束时间 */}
+      <DatePicker
+        className="w-full"
+        placeholder={intl.formatMessage({
+          id: 'searchPanel.endDate',
+          defaultMessage: 'searchPanel.endDate',
+        })}
+        size="small"
+        value={endTime ? dayjs(endTime) : null}
+        onChange={(date) => {
+          if (date) {
+            dispatch(setEndTime(date.format('YYYY-MM-DDTHH:mm:ss.SSS[+08:00]')));
+          } else {
             dispatch(setEndTime(''));
           }
         }}
+        disabledDate={(current) => {
+          // 如果已选择开始时间,禁用开始时间之前的日期
+          if (startTime) {
+            return current && current.isBefore(dayjs(startTime), 'day');
+          }
+          return false;
+        }}
       />
       <Button
         type="primary"