form-driver 0.4.19 → 0.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-driver",
-  "version": "0.4.19",
+  "version": "0.4.21",
   "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/MUtil.tsx

@@ -10,6 +10,8 @@ import {
 import { JSONSchema6 } from "json-schema";
 import React from "react";
 import { SchemaFunc } from "./SchemaFunc";
+import { MDateTimeType } from "../types/MDateTimeType";
+import { getReadableFormat } from "../types/MDateRangeType";
 
 export type HideMap = { [fieldName: string]: boolean };
 
@@ -553,6 +555,149 @@ export let MUtil = {
     return result;
   },
 
+  /**
+   * 提交时将时间字段转换为可读格式
+   * @param schema 表单 schema（type 为 object 的根 schema）
+   * @param database 表单数据
+   * @returns 深拷贝后转换过的数据
+   */
+  formatForExport: function (schema: MFieldSchemaAnonymity, database: any): any {
+    if (_.isNil(database)) {
+      return database;
+    }
+    const result = _.cloneDeep(database);
+    const fields = schema.objectFields;
+    if (!fields) {
+      return result;
+    }
+    for (const field of fields) {
+      const value = result[field.name];
+      if (_.isNil(value)) {
+        continue;
+      }
+      const type = field.type;
+      // 时间选择器
+      if (type === "year" || type === "yearMonth" || type === "yearMonthDay" || type === "datetime" || type === "date") {
+        const antConf = MDateTimeType.antConf(field);
+        if (antConf) {
+          const m = moment(value, antConf.dataFormat);
+          if (m.isValid()) {
+            result[field.name] = m.format(antConf.readableFormat);
+          }
+        }
+      }
+      // 时间范围选择器
+      else if (type === "dateRange") {
+        if (_.isArray(value)) {
+          const [start, end, tillNow] = value;
+          const fmt = getReadableFormat(field.dateRangePrecision, field.dateRange?.showTime);
+          const dataFormat = field.dataFormat ?? "x";
+          let startStr = "";
+          let endStr = "";
+          if (!_.isNil(start)) {
+            const m = moment(start, dataFormat);
+            startStr = m.isValid() ? m.format(fmt) : "";
+          }
+          if (tillNow) {
+            endStr = "至今";
+          } else if (!_.isNil(end)) {
+            const m = moment(end, dataFormat);
+            endStr = m.isValid() ? m.format(fmt) : "";
+          }
+          result[field.name] = startStr + " - " + endStr;
+        }
+      }
+      // 嵌套 object
+      else if (type === "object" && field.objectFields) {
+        result[field.name] = MUtil.formatForExport(field, value);
+      }
+      // 嵌套 array
+      else if (type === "array" && field.arrayMember && _.isArray(value)) {
+        if (field.arrayMember.objectFields) {
+          result[field.name] = value.map((item: any) =>
+            MUtil.formatForExport(field.arrayMember!, item)
+          );
+        }
+      }
+    }
+    return result;
+  },
+
+  /**
+   * 回填时将可读格式的时间字段反解析为内部格式
+   * @param schema 表单 schema（type 为 object 的根 schema）
+   * @param database 可读格式的数据
+   * @returns 深拷贝后反解析过的数据
+   */
+  parseFromExport: function (schema: MFieldSchemaAnonymity, database: any): any {
+    if (_.isNil(database)) {
+      return database;
+    }
+    const result = _.cloneDeep(database);
+    const fields = schema.objectFields;
+    if (!fields) {
+      return result;
+    }
+    for (const field of fields) {
+      const value = result[field.name];
+      if (_.isNil(value)) {
+        continue;
+      }
+      const type = field.type;
+      // 时间选择器
+      if (type === "year" || type === "yearMonth" || type === "yearMonthDay" || type === "datetime" || type === "date") {
+        const antConf = MDateTimeType.antConf(field);
+        if (antConf && _.isString(value)) {
+          const m = moment(value, antConf.readableFormat);
+          if (m.isValid()) {
+            result[field.name] = m.format(antConf.dataFormat);
+          }
+        }
+      }
+      // 时间范围选择器
+      else if (type === "dateRange") {
+        if (_.isString(value)) {
+          const fmt = getReadableFormat(field.dateRangePrecision, field.dateRange?.showTime);
+          const dataFormat = field.dataFormat ?? "x";
+          const parts = value.split(" - ");
+          const startStr = parts[0]?.trim();
+          const endStr = parts[1]?.trim();
+          let start: string | null = null;
+          let end: string | null = null;
+          let tillNow = false;
+          if (startStr) {
+            const m = moment(startStr, fmt);
+            if (m.isValid()) {
+              start = m.format(dataFormat);
+            }
+          }
+          if (endStr === "至今") {
+            tillNow = true;
+          } else if (endStr) {
+            const m = moment(endStr, fmt);
+            if (m.isValid()) {
+              end = m.format(dataFormat);
+            }
+          }
+          result[field.name] = [start, end, tillNow];
+        }
+      }
+      // 嵌套 object
+      else if (type === "object" && field.objectFields) {
+        result[field.name] = MUtil.parseFromExport(field, value);
+      }
+      // 嵌套 array
+      else if (type === "array" && field.arrayMember && _.isArray(value)) {
+        if (field.arrayMember.objectFields) {
+          result[field.name] = value.map((item: any) =>
+            MUtil.parseFromExport(field.arrayMember!, item)
+          );
+        }
+      }
+    }
+    return result;
+  },
+
   /** 啥也不干的空回调 */
   doNothing: function () {},
 

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 获取可读格式 */
+export 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 {