form-driver 0.4.19 → 0.4.20

package/src/ui/editor/basic/ARangePicker.tsx

@@ -2,7 +2,8 @@ import React, { Component, RefObject } from "react";
 import { DatePicker } from "antd";
 import zhCN from 'antd/lib/date-picker/locale/zh_CN';
 import moment from "moment";
-import { Button, Calendar } from "antd-mobile";
+import { DatePicker as DatePickerM } from "antd-mobile";
+import { Button as AntButton } from "antd";
 import ReactDOM from "react-dom";
 import { RangePickerProps } from "antd/lib/date-picker";
 import _ from "lodash";
@@ -25,15 +26,18 @@ type AntData = [moment.Moment | null, moment.Moment | null];
 
 interface State extends ViewerState {
   mobileDlg: boolean;
+  mobileStep: 'start' | 'end';
+  mobileStartDate?: Date;
 }
 
 export class ARangePicker extends Viewer<State> {
-  _pickerRef: RefObject<Component<RangePickerProps, any, any>> = React.createRef();
+  _pickerRef: RefObject<any> = React.createRef();
   _onCalendarChangeValue?: AntData | null;
+  _startConfirmed = false; // 标记开始日期是否已确认，用于区分 onClose 是取消还是确认后的自动触发
 
   constructor(p: MProp) {
     super(p);
-    this.state = { ctrlVersion: 1, noValidate: false, mobileDlg: false };
+    this.state = { ctrlVersion: 1, noValidate: false, mobileDlg: false, mobileStep: 'start' };
   }
 
   componentDidUpdate() {
@@ -83,39 +87,97 @@ export class ARangePicker extends Viewer<State> {
     if (MUtil.phoneLike()) {
       let show = MDateRangeType.toReadableN(assembly, this.props.schema, super.getValue());
 
+      // 根据 precision 配置确定移动端 DatePicker 精度（使用扁平化属性 dateRangePrecision）
+      const mobilePrecision = (this.props.schema.dateRangePrecision || 'day') as 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
+
       return <>
-        <div className="backfill" onClick={() => this.setState({ mobileDlg: true })}> {show ?? '请点击选择'} </div>
-        <Calendar
-          visible={this.state.mobileDlg}
-          pickTime={this.props.schema.dateRange?.showTime}
-          minDate={this.props.schema.min ? new Date(this.props.schema.min) : undefined}
-          maxDate={this.props.schema.min ? new Date(this.props.schema.max) : undefined}
-          onCancel={() => this.setState({ mobileDlg: false })}
-          onConfirm={(start, end) => {
-            super.changeValueEx(this._rangePicker2Data([moment(start), moment(end)], false), true, true)
-            this.setState({ mobileDlg: false })
+        <div className="backfill" onClick={() => this.setState({ mobileDlg: true, mobileStep: 'start' })}> {show ?? '请点击选择'} </div>
+        {/* 移动端：使用两步 DatePickerM 选择开始和结束日期 */}
+        <DatePickerM
+          key={`start_${mobilePrecision}`}
+          visible={this.state.mobileDlg && this.state.mobileStep === 'start'}
+          precision={mobilePrecision}
+          title="选择开始日期"
+          min={this.props.schema.min ? new Date(this.props.schema.min) : undefined}
+          max={this.props.schema.max ? new Date(this.props.schema.max) : undefined}
+          onConfirm={(val) => {
+            this._startConfirmed = true;
+            this.setState({ mobileStartDate: val, mobileStep: 'end' });
+          }}
+          onClose={() => {
+            // antd-mobile v5 确认时会同时触发 onConfirm 和 onClose
+            // 用实例变量同步判断：确认后的 onClose 应忽略，仅用户主动取消时才关闭
+            if (this._startConfirmed) {
+              this._startConfirmed = false;
+              return;
+            }
+            this.setState({ mobileDlg: false });
+          }}
+        />
+        <DatePickerM
+          key={`end_${mobilePrecision}`}
+          visible={this.state.mobileDlg && this.state.mobileStep === 'end'}
+          precision={mobilePrecision}
+          title="选择结束日期"
+          tillNow={!this.props.schema.dateRange?.hideTillNow && !this.props.schema.dateRange?.showTime}
+          min={this.state.mobileStartDate || (this.props.schema.min ? new Date(this.props.schema.min) : undefined)}
+          max={this.props.schema.max ? new Date(this.props.schema.max) : undefined}
+          onConfirm={(val: any) => {
+            const startDate = this.state.mobileStartDate;
+            if (startDate) {
+              const isTillNow = !!(val as any).tillNow;
+              if (isTillNow) {
+                // 用户选择了"至今"
+                super.changeValueEx(
+                  this._rangePicker2Data([moment(startDate), moment()], true),
+                  true, true
+                );
+              } else {
+                // 防御：结束日期不能早于开始日期
+                const finalEnd = val < startDate ? startDate : val;
+                super.changeValueEx(this._rangePicker2Data([moment(startDate), moment(finalEnd)], false), true, true);
+              }
+            }
+            this.setState({ mobileDlg: false });
+          }}
+          onClose={() => {
+            // 回退到第一步，让用户可以重新选择开始日期
+            this.setState({ mobileStep: 'start' });
           }}
-          {...p}
         />
       </>
     } else {
+      // 根据 precision 配置确定 PC 端 picker 模式和 showTime（使用扁平化属性 dateRangePrecision）
+      const precision = this.props.schema.dateRangePrecision;
+      const pcShowTime = precision === 'minute' || this.props.schema.dateRange?.showTime;
+      const hideFooter = this.props.schema.dateRange?.hideTillNow || pcShowTime;
+
+      // 动态构建额外属性，避免 showTime 和 picker 同时传入导致类型冲突
+      const extraProps: any = {};
+      if (precision === 'year') {
+        extraProps.picker = 'year';
+      } else if (precision === 'month') {
+        extraProps.picker = 'month';
+      } else if (pcShowTime) {
+        extraProps.showTime = true;
+      }
+
       // 构造元素
       return <DatePicker.RangePicker
         ref={this._pickerRef}
-        showTime={this.props.schema.dateRange?.showTime}
-        key={this.state.ctrlVersion}
-        renderExtraFooter={this.props.schema.dateRange?.hideTillNow || this.props.schema.dateRange?.showTime // TODO 显示时间时，“至今”无法支持
+        key={`${this.state.ctrlVersion}_${this.props.schema.dateRangePrecision ?? 'day'}`}
+        renderExtraFooter={hideFooter
           ? undefined
-          : (mode) => <div style={{ textAlign: "right" }} {...p}>
-            <Button
+          : (mode) => <div style={{ textAlign: "right" }}>
+            <AntButton
               size="small" style={{ width: "100px", display: "inline-block", marginTop: "5px" }}
               onClick={() => {
                 super.changeValueEx(this._rangePicker2Data(this._onCalendarChangeValue, true), true, true);
-              }}>至今</Button>
+              }}>至今</AntButton>
           </div>
         }
         bordered={this.props.hideBorder ? false : true}
-        style={{ minWidth: "240px" }}
+        style={{ width: "300px" }}
         locale={zhCN}
         defaultValue={rangePickerData}
         onCalendarChange={(d) => {
@@ -123,7 +185,9 @@ export class ARangePicker extends Viewer<State> {
         }}
         onChange={(vv) => {
           super.changeValueEx(this._rangePicker2Data(vv, false), true, true)
-        }} />;
+        }}
+        {...extraProps}
+      />;
     }
   }
 }

package/src/ui/widget/SelectBox.tsx

@@ -2,15 +2,18 @@
 
 import { Select } from "antd";
 import { Picker } from "antd-mobile";
-import { PickerData } from "antd-mobile/lib/picker/PropsType";
 import _ from "lodash";
 import React from "react";
-//import { InputHTMLAttributes } from "react";
 import { MUtil } from '../../framework/MUtil';
 
-interface Prop { // extends InputHTMLAttributes<HTMLInputElement> {
+interface PickerOption {
+  label: string | React.ReactNode;
+  value: string;
+}
+
+interface Prop {
   data: string;
-  options: PickerData[],
+  options: PickerOption[],
   onChange: (newValue?:string)=>void;
   onBlur?:()=>void;
   
@@ -18,22 +21,39 @@ interface Prop { // extends InputHTMLAttributes<HTMLInputElement> {
   openLabel?: string;
 }
 
-export class SelectBox extends React.Component<Prop, any> {
+interface SelectBoxState {
+  pickerVisible: boolean;
+}
+
+export class SelectBox extends React.Component<Prop, SelectBoxState> {
+  constructor(props: Prop) {
+    super(props);
+    this.state = { pickerVisible: false };
+  }
+
   render(){
     if(MUtil.phoneLike()) {
       const looked = this.props.options.find(o=>o.value === this.props.data);
       const backfillClass = looked ? "backfill" : "backfill_empty";
 
-      return <Picker extra="请选择(可选)"
-        cols={1}
-        data={this.props.options}
-        value={[this.props.data]}
-        onOk={e => this.props.onChange(_.last(e))}
-        onDismiss={() => {
-          if(this.props.onBlur) { this.props.onBlur() }
-        }}>
-        <div className={backfillClass}>{looked?.label ?? "点击选择"}</div>
-      </Picker>
+      return <>
+        <div className={backfillClass} onClick={() => this.setState({ pickerVisible: true })}>
+          {looked?.label ?? "点击选择"}
+        </div>
+        <Picker
+          columns={[this.props.options]}
+          value={[this.props.data]}
+          visible={this.state.pickerVisible}
+          onConfirm={e => {
+            this.props.onChange(_.last(e) as string);
+            this.setState({ pickerVisible: false });
+          }}
+          onClose={() => {
+            this.setState({ pickerVisible: false });
+            if(this.props.onBlur) { this.props.onBlur() }
+          }}
+        />
+      </>
     } else {
       return <Select defaultValue={this.props.data}> 
         {this.props.options.map(o=><Select.Option value={o.value}>{o.label ?? o.value}</Select.Option>)} 

package/types/framework/Init.d.ts

@@ -1,3 +1,4 @@
+import "moment/locale/zh-cn";
 /**
  * 确保m3已经初始化ensureM3
  */

package/types/framework/Schema.d.ts

@@ -132,13 +132,24 @@ export interface MFieldSchema {
         /** 允许时间段重叠，默认是不能重叠 */
         overlap?: boolean;
     };
+    /** date 类型配置 */
+    date?: {
+        /** 日期精度：month=年月, day=年月日(默认), minute=年月日时分 */
+        precision?: "month" | "day" | "minute";
+    };
+    /** 日期精度（扁平化属性）：year=年, month=年月, day=年月日(默认), minute=年月日时分 */
+    datePrecision?: string;
     /** dateRange 类型配置 */
     dateRange?: {
         /** 是否隐藏至今按钮 */
         hideTillNow?: boolean;
         /** 是否能选择时间 */
         showTime?: boolean;
+        /** 日期精度：month=年月, day=年月日(默认), minute=年月日时分 */
+        precision?: "month" | "day" | "minute";
     };
+    /** 日期范围精度（扁平化属性） */
+    dateRangePrecision?: string;
     /** 数据格式 */
     dataFormat?: "x" | "YYYYMMDD" /** 用于时间日期类型字段的数据格式，参考moment，例如x表示数据是时间戳，YYYYMMDD表示数据是形如19990130的字符串 */ | string;
     /**

package/types/index.d.ts

@@ -1,5 +1,4 @@
 import 'antd/dist/antd.css';
-import 'antd-mobile/dist/antd-mobile.css';
 import { Ajax } from './framework/Ajax';
 import { M3UISpecSegmentItem, MFieldSchema, M3UISpec, MFieldSchemaAnonymity } from './framework/Schema';
 import { MViewerDebug } from './framework/MViewerDebug';

package/types/types/MDateTimeType.d.ts

@@ -1,9 +1,9 @@
-import { MFieldSchemaAnonymity } from '../framework/Schema';
+import { MFieldSchemaAnonymity } from "../framework/Schema";
 import { MType } from "./MType";
 export interface MDateTimeAntConf {
     dataFormat: string;
     readableFormat: string;
-    mode: undefined | 'date' | 'year' | 'month' | 'time';
+    mode: undefined | "date" | "year" | "month" | "time";
     showTime: boolean;
 }
 export declare const MDateTimeType: MType & {

package/types/ui/editor/basic/ADatetimePicker.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseViewer } from '../../BaseViewer';
+import { BaseViewer } from "../../BaseViewer";
 /**
  * 日期选择框
  * 配置示例：
@@ -11,5 +11,6 @@ import { BaseViewer } from '../../BaseViewer';
  * 类型是dateTime时，dataFormat默认是x，例如1608897466955
  */
 export declare class ADatetimePicker extends BaseViewer {
+    constructor(props: any);
     element(): JSX.Element;
 }

package/types/ui/editor/basic/AGB2260.d.ts

@@ -6,5 +6,6 @@ import { BaseViewer } from '../../BaseViewer';
  * 数据是gb2260的地区代码
  */
 export declare class AGB2260 extends BaseViewer {
+    constructor(props: any);
     element(): JSX.Element;
 }

package/types/ui/editor/basic/ARangePicker.d.ts

@@ -1,6 +1,5 @@
-import { Component, RefObject } from "react";
+import { RefObject } from "react";
 import moment from "moment";
-import { RangePickerProps } from "antd/lib/date-picker";
 import { Viewer, ViewerState } from '../../BaseViewer';
 import { MProp } from "../../../framework/Schema";
 export type ARangePickerData = [
@@ -11,10 +10,13 @@ export type ARangePickerData = [
 type AntData = [moment.Moment | null, moment.Moment | null];
 interface State extends ViewerState {
     mobileDlg: boolean;
+    mobileStep: 'start' | 'end';
+    mobileStartDate?: Date;
 }
 export declare class ARangePicker extends Viewer<State> {
-    _pickerRef: RefObject<Component<RangePickerProps, any, any>>;
+    _pickerRef: RefObject<any>;
     _onCalendarChangeValue?: AntData | null;
+    _startConfirmed: boolean;
     constructor(p: MProp);
     componentDidUpdate(): void;
     componentDidMount(): void;

package/types/ui/widget/SelectBox.d.ts

@@ -1,13 +1,20 @@
-import { PickerData } from "antd-mobile/lib/picker/PropsType";
 import React from "react";
+interface PickerOption {
+    label: string | React.ReactNode;
+    value: string;
+}
 interface Prop {
     data: string;
-    options: PickerData[];
+    options: PickerOption[];
     onChange: (newValue?: string) => void;
     onBlur?: () => void;
     openLabel?: string;
 }
-export declare class SelectBox extends React.Component<Prop, any> {
+interface SelectBoxState {
+    pickerVisible: boolean;
+}
+export declare class SelectBox extends React.Component<Prop, SelectBoxState> {
+    constructor(props: Prop);
     render(): JSX.Element;
 }
 export {};