form-driver 0.4.20 → 0.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-driver",
-  "version": "0.4.20",
+  "version": "0.4.21",
   "description": "An efficient framework for creating forms.",
   "license": "MIT",
   "authors": [

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

@@ -6,16 +6,16 @@ import moment from "moment";
 import _ from "lodash";
 
 /** 根据 precision 获取可读格式 */
-function getReadableFormat(precision?: string, showTime?: boolean): string {
+export function getReadableFormat(precision?: string, showTime?: boolean): string {
   switch (precision) {
     case "year":
-      return "YYYY年";
+      return "YYYY";
     case "month":
-      return "YYYY年MM月";
+      return "YYYY.MM";
     case "minute":
-      return "YYYY年MM月DD日 HH:mm";
+      return "YYYY.MM.DD HH:mm";
     default:
-      return showTime ? "YYYY年MM月DD日 HH:mm:ss" : "YYYY年MM月DD日";
+      return showTime ? "YYYY.MM.DD HH:mm:ss" : "YYYY.MM.DD";
   }
 }
 
@@ -39,11 +39,11 @@ export function timeRangeExpr(
   from: number | string,
   to: number | string,
   tillNow: boolean,
-  readableFormat: string = "YYYY年MM月DD日",
+  readableFormat: string = "YYYY.MM.DD",
 ): string {
   return (
     timeExpr(assembly, from, false, readableFormat) +
-    " ~ " +
+    " - " +
     timeExpr(assembly, to, tillNow, readableFormat)
   );
 }

package/src/types/MDateTimeType.ts

@@ -31,17 +31,17 @@ export const MDateTimeType: MType & {
       case "yearMonth":
         mode = "month";
         dataFormat = dataFormat ?? "YYYYMM";
-        readableFormat = "YYYY-MM";
+        readableFormat = "YYYY.MM";
         break;
       case "yearMonthDay":
         mode = "date";
         dataFormat = dataFormat ?? "YYYYMMDD";
-        readableFormat = "YYYY-MM-DD";
+        readableFormat = "YYYY.MM.DD";
         break;
       case "datetime":
         mode = undefined;
         dataFormat = dataFormat ?? "x";
-        readableFormat = "YYYY-MM-DD HH:mm";
+        readableFormat = "YYYY.MM.DD HH:mm";
         showTime = true;
         break;
       case "date":
@@ -54,19 +54,19 @@ export const MDateTimeType: MType & {
           case "month":
             mode = "month";
             dataFormat = dataFormat ?? "YYYYMM";
-            readableFormat = "YYYY-MM";
+            readableFormat = "YYYY.MM";
             break;
           case "minute":
             mode = undefined;
             dataFormat = dataFormat ?? "x";
-            readableFormat = "YYYY-MM-DD HH:mm";
+            readableFormat = "YYYY.MM.DD HH:mm";
             showTime = true;
             break;
           default:
             // "day" 或未指定
             mode = "date";
             dataFormat = dataFormat ?? "YYYYMMDD";
-            readableFormat = "YYYY-MM-DD";
+            readableFormat = "YYYY.MM.DD";
             break;
         }
         break;

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

@@ -118,25 +118,38 @@ export class ARangePicker extends Viewer<State> {
           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}
+          title={
+            // 如果允许"至今"且开始时间不在未来，在标题区域展示"至今"按钮
+            !this.props.schema.dateRange?.hideTillNow
+            && !this.props.schema.dateRange?.showTime
+            && !(this.state.mobileStartDate && this.state.mobileStartDate > new Date())
+              ? <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
+                  <span>选择结束日期</span>
+                  <AntButton
+                    size="small"
+                    type="primary"
+                    onClick={() => {
+                      const startDate = this.state.mobileStartDate;
+                      if (startDate) {
+                        super.changeValueEx(
+                          this._rangePicker2Data([moment(startDate), moment()], true),
+                          true, true
+                        );
+                      }
+                      this.setState({ mobileDlg: false });
+                    }}
+                  >至今</AntButton>
+                </div>
+              : "选择结束日期"
+          }
           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);
-              }
+              // 防御：结束日期不能早于开始日期
+              const finalEnd = val < startDate ? startDate : val;
+              super.changeValueEx(this._rangePicker2Data([moment(startDate), moment(finalEnd)], false), true, true);
             }
             this.setState({ mobileDlg: false });
           }}
@@ -168,13 +181,20 @@ export class ARangePicker extends Viewer<State> {
         key={`${this.state.ctrlVersion}_${this.props.schema.dateRangePrecision ?? 'day'}`}
         renderExtraFooter={hideFooter
           ? undefined
-          : (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);
-              }}>至今</AntButton>
-          </div>
+          : (mode) => {
+            // 如果开始时间超过当前时间（未来时间），不展示"至今"按钮
+            const startMoment = this._onCalendarChangeValue?.[0];
+            if (startMoment && startMoment.isAfter(moment())) {
+              return null;
+            }
+            return <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);
+                }}>至今</AntButton>
+            </div>;
+          }
         }
         bordered={this.props.hideBorder ? false : true}
         style={{ width: "300px" }}

package/types/framework/MUtil.d.ts

@@ -115,6 +115,20 @@ export declare let MUtil: {
     renameKey: (object: any, renameTo: {
         [oldKey: string]: string;
     }, removeNotExistKey?: boolean) => any;
+    /**
+     * 提交时将时间字段转换为可读格式
+     * @param schema 表单 schema（type 为 object 的根 schema）
+     * @param database 表单数据
+     * @returns 深拷贝后转换过的数据
+     */
+    formatForExport: (schema: MFieldSchemaAnonymity, database: any) => any;
+    /**
+     * 回填时将可读格式的时间字段反解析为内部格式
+     * @param schema 表单 schema（type 为 object 的根 schema）
+     * @param database 可读格式的数据
+     * @returns 深拷贝后反解析过的数据
+     */
+    parseFromExport: (schema: MFieldSchemaAnonymity, database: any) => any;
     /** 啥也不干的空回调 */
     doNothing: () => void;
     /**

package/types/types/MDateRangeType.d.ts

@@ -1,6 +1,8 @@
 import { MFieldSchemaAnonymity } from "../framework/Schema";
 import { MType } from "./MType";
 import { Assembly } from "../framework/Assembly";
+/** 根据 precision 获取可读格式 */
+export declare function getReadableFormat(precision?: string, showTime?: boolean): string;
 export declare function timeRangeExpr(assembly: Assembly, from: number | string, to: number | string, tillNow: boolean, readableFormat?: string): string;
 export declare const MDateRangeType: MType & {
     toReadableN: (assembly: Assembly, s: MFieldSchemaAnonymity, vs: any) => string | undefined;