form-driver 0.4.19 → 0.4.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-driver",
-  "version": "0.4.19",
+  "version": "0.4.20",
   "description": "An efficient framework for creating forms.",
   "license": "MIT",
   "authors": [
@@ -61,7 +61,7 @@
     "@babel/runtime": "^7.9.2",
     "ali-oss": "^6.17.1",
     "antd": "4.18.7",
-    "antd-mobile": "^2.3.4",
+    "antd-mobile": "^5.37.1",
     "clsx": "^2.1.1",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",

package/src/framework/Init.tsx

@@ -45,6 +45,8 @@ import { ATable } from "../ui/editor/complex/ATable";
 import { ARemoteSelector } from "../ui/editor/basic/ARemoteSelector";
 import { JsonEditor } from "../ui/editor/complex/JsonEditor";
 import _ from "lodash";
+import moment from "moment";
+import "moment/locale/zh-cn";
 import { A } from "../ui/readable/A";
 import { ADialogForm } from "../ui/editor/complex/ADialogForm";
 import { MVLPairType } from "../types/MVLPairType";
@@ -68,9 +70,11 @@ export function ensureM3() {
     return;
   }
   init = true;
+  moment.locale('zh-cn');
   assembly.types = _.merge(assembly.types, {
     enum: MEnumType,
     gb2260: MGB2260Type,
+    date: MDateTimeType,
     datetime: MDateTimeType,
     year: MDateTimeType,
     yearMonth: MDateTimeType,
@@ -138,6 +142,7 @@ export function ensureM3() {
     editor: {
       enum: "ASelector",
       gb2260: "AGB2260",
+      date: "ADatetimePicker",
       datetime: "ADatetimePicker",
       year: "ADatetimePicker",
       yearMonth: "ADatetimePicker",
@@ -171,6 +176,7 @@ export function ensureM3() {
     readable: {
       enum: "DivViewer",
       gb2260: "DivViewer",
+      date: "DivViewer",
       datetime: "DivViewer",
       year: "DivViewer",
       yearMonth: "DivViewer",

package/src/framework/Schema.ts

@@ -183,14 +183,28 @@ 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"
@@ -320,7 +334,7 @@ export interface MFieldSchema {
 export type AFTER_CHANGE_CALLBACK = (
   path: string,
   v: any,
-  final: boolean
+  final: boolean,
 ) => void;
 
 export type CHANGE_SCHEMA_CALLBACK = (v: any) => void;
@@ -384,7 +398,7 @@ export interface M3UISpecSegmentItem {
   onSubmit?: (
     segment: M3UISpecSegmentItem,
     segmentData: any,
-    done: () => void
+    done: () => void,
   ) => void;
 
   /** 设置分段根元素的style */

package/src/index.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/src/types/MDateRangeType.ts

@@ -1,52 +1,93 @@
-
-
-
 import { MFieldSchemaAnonymity } from "../framework/Schema";
-import { EmtpyType, MType} from "./MType";
+import { EmtpyType, MType } from "./MType";
 import { validateRequired } from "../framework/Validator";
 import { Assembly } from "../framework/Assembly";
 import moment from "moment";
 import _ from "lodash";
 
-function timeExpr(assembly:Assembly, v:any, tillNow:boolean, readableFormat):string {
-  if(tillNow){
+/** 根据 precision 获取可读格式 */
+function getReadableFormat(precision?: string, showTime?: boolean): string {
+  switch (precision) {
+    case "year":
+      return "YYYY年";
+    case "month":
+      return "YYYY年MM月";
+    case "minute":
+      return "YYYY年MM月DD日 HH:mm";
+    default:
+      return showTime ? "YYYY年MM月DD日 HH:mm:ss" : "YYYY年MM月DD日";
+  }
+}
+
+function timeExpr(
+  assembly: Assembly,
+  v: any,
+  tillNow: boolean,
+  readableFormat,
+): string {
+  if (tillNow) {
     return "至今";
   }
-  if(!v){
+  if (!v) {
     return assembly.theme.READABLE_UNKNOWN;
   }
   return moment(v, "x").format(readableFormat);
 }
 
-export function timeRangeExpr(assembly:Assembly, from:number|string, to:number|string, tillNow:boolean, readableFormat:string = "YYYY年MM月DD日"):string {
-  return timeExpr(assembly, from, false, readableFormat) + " ~ " + timeExpr(assembly, to, tillNow, readableFormat)
+export function timeRangeExpr(
+  assembly: Assembly,
+  from: number | string,
+  to: number | string,
+  tillNow: boolean,
+  readableFormat: string = "YYYY年MM月DD日",
+): string {
+  return (
+    timeExpr(assembly, from, false, readableFormat) +
+    " ~ " +
+    timeExpr(assembly, to, tillNow, readableFormat)
+  );
 }
 
-export const MDateRangeType: MType & {toReadableN: (assembly:Assembly, s:MFieldSchemaAnonymity, vs:any)=>string|undefined} = _.assign({}, EmtpyType, {
+export const MDateRangeType: MType & {
+  toReadableN: (
+    assembly: Assembly,
+    s: MFieldSchemaAnonymity,
+    vs: any,
+  ) => string | undefined;
+} = _.assign({}, EmtpyType, {
   validators: [validateRequired],
-  
-  toReadable: (assembly:Assembly, s:MFieldSchemaAnonymity, vs:any):string => {
-    if(_.isNil(vs)){
-      return assembly.theme.READABLE_BLANK
+
+  toReadable: (
+    assembly: Assembly,
+    s: MFieldSchemaAnonymity,
+    vs: any,
+  ): string => {
+    if (_.isNil(vs)) {
+      return assembly.theme.READABLE_BLANK;
     }
-    if(!_.isArray(vs)){
+    if (!_.isArray(vs)) {
       return assembly.theme.READABLE_INVALID;
     }
 
-    return timeRangeExpr(assembly, vs[0], vs[1], vs[2], s.dateRange?.showTime ? "YYYY年MM月DD日 HH:mm:ss" : "YYYY年MM月DD日");
+    const fmt = getReadableFormat(s.dateRangePrecision, s.dateRange?.showTime);
+    return timeRangeExpr(assembly, vs[0], vs[1], vs[2], fmt);
   },
 
   /**
    * 同toReadable，但数据无效时返回nil
-   * @param assembly 
-   * @param s 
-   * @param vs 
-   * @returns 
    */
-  toReadableN: (assembly:Assembly, s:MFieldSchemaAnonymity, vs:any):string|undefined => {
-    if(!_.isNil(vs) && _.isArray(vs)) {
-      return timeRangeExpr(assembly, vs[0], vs[1], vs[2], s.dateRange?.showTime ? "YYYY年MM月DD日 HH:mm:ss" : "YYYY年MM月DD日");
+  toReadableN: (
+    assembly: Assembly,
+    s: MFieldSchemaAnonymity,
+    vs: any,
+  ): string | undefined => {
+    if (!_.isNil(vs) && _.isArray(vs)) {
+      const fmt = getReadableFormat(
+        s.dateRangePrecision,
+        s.dateRange?.showTime,
+      );
+      return timeRangeExpr(assembly, vs[0], vs[1], vs[2], fmt);
     }
     return undefined;
-  }
+  },
 });

package/src/types/MDateTimeType.ts

@@ -1,53 +1,97 @@
-
-import {validateDateMinMax, validateRequired} from '../framework/Validator';
-import { MFieldSchemaAnonymity } from '../framework/Schema';
-import { EmtpyType, MType} from "./MType";
-import moment from 'moment';
-import { Assembly } from '../framework/Assembly';
-import _ from 'lodash';
+import { validateDateMinMax, validateRequired } from "../framework/Validator";
+import { MFieldSchemaAnonymity } from "../framework/Schema";
+import { EmtpyType, MType } from "./MType";
+import moment from "moment";
+import { Assembly } from "../framework/Assembly";
+import _ from "lodash";
 
 export interface MDateTimeAntConf {
-  dataFormat: string,
-  readableFormat: string,
-  mode: undefined | 'date' | 'year' | 'month' | 'time';
+  dataFormat: string;
+  readableFormat: string;
+  mode: undefined | "date" | "year" | "month" | "time";
   showTime: boolean;
 }
 
-export const MDateTimeType:MType & {antConf:(schema:MFieldSchemaAnonymity)=>MDateTimeAntConf|undefined} = _.assign({}, EmtpyType, {
+export const MDateTimeType: MType & {
+  antConf: (schema: MFieldSchemaAnonymity) => MDateTimeAntConf | undefined;
+} = _.assign({}, EmtpyType, {
   validators: [validateRequired, validateDateMinMax],
 
-  antConf: (schema:MFieldSchemaAnonymity):MDateTimeAntConf|undefined => {
-    let dataFormat:string|undefined = schema.dataFormat;
+  antConf: (schema: MFieldSchemaAnonymity): MDateTimeAntConf | undefined => {
+    let dataFormat: string | undefined = schema.dataFormat;
     let readableFormat: string;
-    let mode: undefined | 'date' | 'year' | 'month' | 'time';
+    let mode: undefined | "date" | "year" | "month" | "time";
     let showTime = false;
-    switch(schema.type) {
-      case "year": 
-        mode = "year"; dataFormat = dataFormat ?? 'YYYY'; readableFormat = 'YYYY'; break;
-      case "yearMonth": 
-        mode = "month"; dataFormat = dataFormat ?? 'YYYYMM'; readableFormat = 'YYYY-MM'; break;
-      case "yearMonthDay":  
-        mode = "date"; dataFormat = dataFormat ?? 'YYYYMMDD'; readableFormat = 'YYYY-MM-DD'; break;
-      case "datetime":  
-        mode = undefined; dataFormat = dataFormat ?? 'x'; readableFormat = 'YYYY-MM-DD HH:mm'; showTime = true; break;
+    switch (schema.type) {
+      case "year":
+        mode = "year";
+        dataFormat = dataFormat ?? "YYYY";
+        readableFormat = "YYYY";
+        break;
+      case "yearMonth":
+        mode = "month";
+        dataFormat = dataFormat ?? "YYYYMM";
+        readableFormat = "YYYY-MM";
+        break;
+      case "yearMonthDay":
+        mode = "date";
+        dataFormat = dataFormat ?? "YYYYMMDD";
+        readableFormat = "YYYY-MM-DD";
+        break;
+      case "datetime":
+        mode = undefined;
+        dataFormat = dataFormat ?? "x";
+        readableFormat = "YYYY-MM-DD HH:mm";
+        showTime = true;
+        break;
+      case "date":
+        switch (schema.datePrecision) {
+          case "year":
+            mode = "year";
+            dataFormat = dataFormat ?? "YYYY";
+            readableFormat = "YYYY";
+            break;
+          case "month":
+            mode = "month";
+            dataFormat = dataFormat ?? "YYYYMM";
+            readableFormat = "YYYY-MM";
+            break;
+          case "minute":
+            mode = undefined;
+            dataFormat = dataFormat ?? "x";
+            readableFormat = "YYYY-MM-DD HH:mm";
+            showTime = true;
+            break;
+          default:
+            // "day" 或未指定
+            mode = "date";
+            dataFormat = dataFormat ?? "YYYYMMDD";
+            readableFormat = "YYYY-MM-DD";
+            break;
+        }
+        break;
       // case "yearAndQuarter":
       // case "yearAndWeek":
       //   return MUtil.error(`移动端不支持${this.props.schema.type}`, this.props.schema);
       default:
         return undefined;
     }
-    return {dataFormat, readableFormat, mode, showTime};
+    return { dataFormat, readableFormat, mode, showTime };
   },
 
-  toReadable: (assembly:Assembly, schema:MFieldSchemaAnonymity, v:any):string => {
-    if(_.isNil(v)){
+  toReadable: (
+    assembly: Assembly,
+    schema: MFieldSchemaAnonymity,
+    v: any,
+  ): string => {
+    if (_.isNil(v)) {
       return assembly.theme.READABLE_BLANK;
     }
     let c = MDateTimeType.antConf(schema);
-    if(!c) {
+    if (!c) {
       return assembly.theme.READABLE_INVALID;
     }
-    let asMoment = moment(v, c.dataFormat)
+    let asMoment = moment(v, c.dataFormat);
     return asMoment.format(c.readableFormat);
-  }
+  },
 });

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

@@ -4,7 +4,7 @@ import _ from "lodash";
 import { MUtil } from "../../../framework/MUtil";
 import { Cascader } from "antd";
 import { MFieldSchema } from "../../../framework/Schema";
-import { Picker } from "antd-mobile";
+import { CascadePicker } from "antd-mobile";
 import { BaseViewer } from "../../..";
 
 export function labelExpr(d: any, remote: MFieldSchema["remote"]) {
@@ -75,23 +75,31 @@ export class ACascadePicker extends BaseViewer {
     if (MUtil.phoneLike()) {
       return (
         <>
-          {/* <Picker
-            data={this.props.schema.option}
-            extra="请选择(可选)"
-            cols={2}
-            value={show}
-            onChange={v => {
-              console.log(v);
-              super.changeValue(v);
+          <div className="backfill" onClick={() => this.setState({ cascadeVisible: true } as any)}>
+            {show.length > 0 ? show.map(item => item.label || item.value || item).join('-') : '请点击选择'}
+          </div>
+          <CascadePicker
+            options={candidate}
+            value={show.map((item: any) => item.value || item)}
+            visible={(this.state as any)?.cascadeVisible}
+            onConfirm={(v) => {
+              const vLabel: any[] = [];
+              (v as any[]).forEach((item) => {
+                candidate.forEach((dataItem: any) => {
+                  const findItem = findById(dataItem, item, "label", "value", "children");
+                  if (findItem !== -1) {
+                    vLabel.push(findItem);
+                  }
+                });
+              });
+              super.changeValue(vLabel);
+              this.setState({ cascadeVisible: false } as any);
             }}
-            onOk={v => {
-              console.log(v);
-              super.changeValue(v);
+            onClose={() => {
+              this.setState({ cascadeVisible: false } as any);
             }}
             {...p}
-            >
-                <div className="backfill"> {show.length > 0 ? show.join('-') : '请点击选择' } </div>
-        </Picker> */}
+          />
         </>
       );
     } else {

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

@@ -1,12 +1,29 @@
 import React from "react";
-import { DatePicker } from "antd";
-import { DatePicker as DatePickerM } from 'antd-mobile';
+import { DatePicker, ConfigProvider } from "antd";
+import { DatePicker as DatePickerM } from "antd-mobile";
 import moment from "moment";
-import zhCN from 'antd/lib/date-picker/locale/zh_CN';
+import zhCN from "antd/es/locale/zh_CN";
 import _ from "lodash";
 import { MDateTimeType } from "../../../types/MDateTimeType";
 import { MUtil } from "../../../framework/MUtil";
-import { BaseViewer } from '../../BaseViewer';
+import { BaseViewer } from "../../BaseViewer";
+
+// antd-mobile v5 DatePicker precision 映射
+function toPrecision(
+  mode: string | undefined,
+): "year" | "month" | "day" | "hour" | "minute" | "second" {
+  switch (mode) {
+    case "year":
+      return "year";
+    case "month":
+      return "month";
+    case "date":
+      return "day";
+    default:
+      return "minute"; // datetime 场景
+  }
+}
+
 /**
  * 日期选择框
  * 配置示例：
@@ -18,10 +35,18 @@ import { BaseViewer } from '../../BaseViewer';
  * 类型是dateTime时，dataFormat默认是x，例如1608897466955
  */
 export class ADatetimePicker extends BaseViewer {
+  constructor(props: any) {
+    super(props);
+    (this.state as any).pickerVisible = false;
+  }
+
   element() {
     const antConf = MDateTimeType.antConf(this.props.schema);
     if (!antConf) {
-      return MUtil.error(`无效的类型${this.props.schema.type}`, this.props.schema);
+      return MUtil.error(
+        `无效的类型${this.props.schema.type}`,
+        this.props.schema,
+      );
     }
 
     let data = this.getValue();
@@ -31,46 +56,85 @@ export class ADatetimePicker extends BaseViewer {
     const onChange = (vv: Date | moment.Moment | null) => {
       if (vv) {
         const vvAsM = _.isDate(vv) ? moment(vv) : vv;
-        super.changeValue(vvAsM.format(antConf.dataFormat))
+        super.changeValue(vvAsM.format(antConf.dataFormat));
       } else {
         super.changeValue(undefined);
       }
     };
     const p = this.props.schema.props ?? {};
     // 构造元素
-    if (MUtil.phoneLike()) { // 手机
-      return <DatePickerM
-        disabled={this.props.disable}
-        value={dataAsDate}
-        key={this.props.path}
-        minDate={this.props.schema.min ? moment(this.props.schema.min, antConf.dataFormat).toDate() : undefined}
-        maxDate={this.props.schema.max ? moment(this.props.schema.max, antConf.dataFormat).toDate() : undefined}
-        mode={antConf.mode}
-        onChange={onChange}
-        {...p}
-        >
-        <div className="backfill">{dataAsDate ? moment(dataAsDate).format(antConf.readableFormat) : "请点击选择"}</div>
-      </DatePickerM>;
-    } else { // 大屏
-      return <DatePicker
-        key={this.props.path}
-        disabled={this.props.disable}
-        bordered={this.props.hideBorder ? false : true}
-        disabledDate={(m) => {
-          const d =
-            (this.props.schema.min && moment(this.props.schema.min, antConf.dataFormat).isAfter(m)) ||
-            (this.props.schema.max && moment(this.props.schema.max, antConf.dataFormat).isBefore(m));
-          return !!d;
-        }}
-        format={antConf.readableFormat}
-        style={this.props.style}
-        locale={zhCN}
-        defaultValue={dataAsMoment}
-        showTime={antConf.showTime}
-        picker={antConf.mode}
-        onChange={onChange}
-        {...p}
-      />;
+    if (MUtil.phoneLike()) {
+      // 手机
+      return (
+        <>
+          <div
+            className="backfill"
+            onClick={() => {
+              if (!this.props.disable)
+                this.setState({ pickerVisible: true } as any);
+            }}
+          >
+            {dataAsDate
+              ? moment(dataAsDate).format(antConf.readableFormat)
+              : "请点击选择"}
+          </div>
+          <DatePickerM
+            visible={(this.state as any).pickerVisible}
+            value={dataAsDate}
+            min={
+              this.props.schema.min
+                ? moment(this.props.schema.min, antConf.dataFormat).toDate()
+                : undefined
+            }
+            max={
+              this.props.schema.max
+                ? moment(this.props.schema.max, antConf.dataFormat).toDate()
+                : undefined
+            }
+            precision={toPrecision(antConf.mode)}
+            onConfirm={(val) => {
+              onChange(val);
+              this.setState({ pickerVisible: false } as any);
+            }}
+            onClose={() => {
+              this.setState({ pickerVisible: false } as any);
+            }}
+            {...p}
+          />
+        </>
+      );
+    } else {
+      // 大屏
+      // key 中加入 mode 信息，确保精度切换时组件重新挂载
+      const pickerKey = `${this.props.path}_${antConf.mode ?? "datetime"}`;
+      return (
+        <ConfigProvider locale={zhCN}>
+          <DatePicker
+            key={pickerKey}
+            disabled={this.props.disable}
+            bordered={this.props.hideBorder ? false : true}
+            disabledDate={(m) => {
+              const d =
+                (this.props.schema.min &&
+                  moment(this.props.schema.min, antConf.dataFormat).isAfter(
+                    m,
+                  )) ||
+                (this.props.schema.max &&
+                  moment(this.props.schema.max, antConf.dataFormat).isBefore(
+                    m,
+                  ));
+              return !!d;
+            }}
+            format={antConf.readableFormat}
+            style={{ width: "300px" }}
+            defaultValue={dataAsMoment}
+            showTime={antConf.showTime}
+            picker={antConf.mode}
+            onChange={onChange}
+            {...p}
+          />
+        </ConfigProvider>
+      );
     }
   }
 }

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

@@ -5,12 +5,18 @@ import { Picker } from 'antd-mobile';
 import { MUtil } from "../../../framework/MUtil";
 import { BaseViewer } from '../../BaseViewer';
 import { MGB2260Type } from '../../../types/MGB2260Type';
+
 /**
  * 选择中国的省市县
  * 示例：{label:"1.5 您目前的居住地",name:"reside", type:"gb2260"},
  * 数据是gb2260的地区代码
  */
 export class AGB2260 extends BaseViewer {
+  constructor(props: any) {
+    super(props);
+    (this.state as any).pickerVisible = false;
+  }
+
   element() {
     const v = super.getValue();
     const empty = { label: ["请选择"], code: undefined };
@@ -18,20 +24,25 @@ export class AGB2260 extends BaseViewer {
     const p = this.props.schema.props ?? {};
 
     if (MUtil.phoneLike()) { // 手机  
-      return <Picker
-        extra={super.getPlaceholder()}
-        disabled={this.props.disable}
-        key={this.props.path}
-        className="AGB2260"
-        data={MGB2260Type.gb2260}
-        value={looked.code}
-        title={this.props.schema.label}
-        onDismiss={() => console.log('dismiss')}
-        onOk={e => super.changeValue(_.last(e))}
-        {...p}
-      >
-        <div className="backfill" style={this.props.style}>{looked?.label?.join("/")}</div>
-      </Picker>
+      return <>
+        <div className="backfill" style={this.props.style}
+          onClick={() => { if (!this.props.disable) this.setState({ pickerVisible: true } as any) }}>
+          {looked?.label?.join("/")}
+        </div>
+        <Picker
+          columns={MGB2260Type.gb2260}
+          value={looked.code}
+          visible={(this.state as any).pickerVisible}
+          onConfirm={e => {
+            super.changeValue(_.last(e));
+            this.setState({ pickerVisible: false } as any);
+          }}
+          onClose={() => {
+            this.setState({ pickerVisible: false } as any);
+          }}
+          {...p}
+        />
+      </>
     } else { // PC
       return <Cascader
         options={MGB2260Type.gb2260}