form-driver 0.4.20 → 0.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "form-driver",
-  "version": "0.4.20",
+  "version": "0.4.22",
   "description": "An efficient framework for creating forms.",
   "license": "MIT",
   "authors": [
@@ -58,6 +58,9 @@
     "@ant-design/icons": "^4.3.0",
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@babel/runtime": "^7.9.2",
     "ali-oss": "^6.17.1",
     "antd": "4.18.7",

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

@@ -78,7 +78,9 @@ export class ARangePicker extends Viewer<State> {
    */
   _data2rangePicker(d: ARangePickerData): AntData {
     const dataFormat = this.props.schema.dataFormat ?? "x";
-    return [d[0] ? moment(d[0], dataFormat) : null, d[1] ? moment(d[1], dataFormat) : null];
+    // 若 tillNow=true，结束时间传 null，避免 RangePicker 缓存旧结束时间
+    const endTime = d[2] === true ? null : (d[1] ? moment(d[1], dataFormat) : null);
+    return [d[0] ? moment(d[0], dataFormat) : null, endTime];
   }
 
   element() {
@@ -118,25 +120,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 });
           }}
@@ -159,7 +174,8 @@ export class ARangePicker extends Viewer<State> {
       } else if (precision === 'month') {
         extraProps.picker = 'month';
       } else if (pcShowTime) {
-        extraProps.showTime = true;
+        // precision 为 minute 时只展示时分，不展示秒
+        extraProps.showTime = precision === 'minute' ? { format: 'HH:mm' } : true;
       }
 
       // 构造元素
@@ -168,13 +184,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" }}
@@ -184,7 +207,16 @@ export class ARangePicker extends Viewer<State> {
           this._onCalendarChangeValue = d;
         }}
         onChange={(vv) => {
-          super.changeValueEx(this._rangePicker2Data(vv, false), true, true)
+          // 用户清空日期范围时，直接置空
+          if (!vv) {
+            super.changeValueEx(undefined, true, true);
+            return;
+          }
+          const currentData = super.getValue();
+          const isTillNow = _.get(currentData, '[2]') === true;
+          // 若当前是"至今"且用户只改了开始时间（结束时间仍为 null），保留 tillNow
+          const newTillNow = isTillNow && vv[1] == null;
+          super.changeValueEx(this._rangePicker2Data(vv, newTillNow), true, true);
         }}
         {...extraProps}
       />;

package/src/ui/widget/EnhancedSortDrag.less

@@ -21,6 +21,8 @@
   border-radius: 6px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
   transition: all 0.3s ease;
+  user-select: none;
+  -webkit-user-select: none;
 
   // 水平方向布局
   &.direction-horizontal {
@@ -99,6 +101,31 @@
       }
     }
   }
+
+  // 移动端拖拽句柄触控区域增大
+  .enhanced-dragHandleWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    cursor: grab;
+    margin-left: 4px;
+    touch-action: none;
+    -webkit-touch-callout: none;
+
+    &:active {
+      .enhanced-dragHandleIcon {
+        color: #1890ff;
+      }
+    }
+  }
+
+  .enhanced-dragHandleIcon {
+    font-size: 20px;
+    color: #999;
+    transition: color 0.2s;
+  }
 }
 
 // 拖拽动画
@@ -140,3 +167,37 @@
     }
   }
 }
+
+// ========== DragOverlay 预览 — 简洁浮动卡片 ==========
+.enhanced-sortDrag-overlay {
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.08),
+    0 8px 24px rgba(0, 0, 0, 0.12);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+
+  // 普通模式预览
+  .enhanced-sortDrag-overlay-content {
+    padding: 10px 16px;
+
+    .enhanced-sortDrag-overlay-body {
+      font-size: 14px;
+      color: #262626;
+    }
+  }
+
+  // 表格行模式预览
+  .enhanced-sortDrag-overlay-row {
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+    gap: 8px;
+
+    .enhanced-sortDrag-overlay-label {
+      font-size: 14px;
+      color: #262626;
+      font-weight: 500;
+    }
+  }
+}