form-driver 0.4.1 → 0.4.3

package/src/types/MWeightType.ts

@@ -0,0 +1,113 @@
+import { MUtil } from "../framework/MUtil";
+import { MFieldSchemaAnonymity, MValidationResult } from "../framework/Schema";
+import { MType } from "./MType";
+
+import { validateRequired } from "../framework/Validator";
+import { assembly, Assembly } from "../framework/Assembly";
+import _ from "lodash";
+
+// 验证比重值的合法性
+function validateWeightValue(
+  a: Assembly,
+  schema: any,
+  value: any,
+  path: string
+): MValidationResult {
+  if (_.isNil(value)) {
+    return undefined;
+  }
+
+  if (!_.isObject(value)) {
+    return { message: "比重值格式错误", path };
+  }
+
+  const fs = MUtil.option(schema) as any;
+  const totalWeight = schema.weight ?? 100; // 默认总比重为100
+  let currentTotal = 0;
+
+  // 计算当前已分配比重
+  if (Array.isArray(value)) {
+    currentTotal = value?.reduce?.((acc, val) => acc + val.value, 0);
+  }
+
+  // 比重题的校验文案都是固定显示在表单上，所以返回的 message 都是空的
+  // 验证总比重是否小于目标值
+  if (schema.weight && currentTotal < schema.weight && currentTotal !== 0) {
+    return {
+      message: `已分配比重不得小于总比重`,
+      path,
+    };
+  }
+
+  // 验证总比重是否超过最大值
+  if (schema.weight !== undefined && currentTotal > schema.weight) {
+    return {
+      message: ``,
+      path,
+    };
+  }
+  console.log("验证参数", value, currentTotal, schema.weight);
+
+  return undefined;
+}
+
+export const MWeightType: MType = {
+  validators: [validateRequired, validateWeightValue],
+
+  toReadable: (
+    assembly: Assembly,
+    s: MFieldSchemaAnonymity,
+    vs: any
+  ): string => {
+    const fs = MUtil.option(s) as any;
+    if (_.isNil(vs)) {
+      return assembly.theme.READABLE_BLANK;
+    } else if (!_.isObject(vs)) {
+      return assembly.theme.READABLE_ERROR;
+    }
+
+    const parts: string[] = [];
+    for (let f of fs) {
+      const weight = vs[f.value];
+      if (!_.isNil(weight) && weight !== 0) {
+        parts.push(`${f.label}: ${weight}`);
+      }
+    }
+
+    return parts.length > 0 ? parts.join(", ") : assembly.theme.READABLE_BLANK;
+  },
+
+  standardValue: (a: Assembly, s: any, vs: any, strict: boolean): any => {
+    if (!_.isObject(vs)) {
+      return s.defaultValue;
+    }
+    if (!strict) {
+      return vs;
+    }
+
+    const fs = MUtil.option(s) as any;
+    const result: any = {};
+
+    for (let f of fs) {
+      const weight = vs[f.value];
+      if (!_.isNil(weight) && _.isNumber(weight) && weight >= 0) {
+        // 如果要求整数，则转换为整数
+        if (s.requireInteger) {
+          result[f.value] = Math.round(weight);
+        } else {
+          result[f.value] = weight;
+        }
+      }
+    }
+
+    return result;
+  },
+
+  createDefaultValue: (assembly: Assembly, s: MFieldSchemaAnonymity): any => {
+    if (s.defaultValue) {
+      return _.clone(s.defaultValue);
+    } else {
+      return {}; // 默认为空对象
+    }
+  },
+};

package/src/ui/BaseViewer.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react";
 import { MProp } from "../framework/Schema";
 import _ from "lodash";
-import { assembly } from '../framework/Assembly';
-import { MContext } from '../framework/MContext';
+import { assembly } from "../framework/Assembly";
+import { MContext } from "../framework/MContext";
 import { MUtil } from "../framework/MUtil";
 
 export interface ViewerState {
@@ -16,24 +16,27 @@ export interface ViewerState {
  * 每一个Viewer，都用来表达（展示readable/编辑editor）json上的一个值 / 或者不会改变数据的装饰物
  * 这个类负责展示校验错误，提供数据存取api
  */
-export abstract class Viewer<S extends ViewerState> extends React.Component<MProp, S> {
+export abstract class Viewer<S extends ViewerState> extends React.Component<
+  MProp,
+  S
+> {
   /**
    * 获取此字段在database中的值
    */
-  getValue(){
+  getValue() {
     return MUtil.get(this.props.database, this.props.path);
   }
 
   /**
    * 修复全局 Scheme
    */
-  changeSchema(v){
+  changeSchema(v) {
     if (this.props.changeSchema) {
-     this.props.changeSchema(v) 
+      this.props.changeSchema(v);
     }
   }
 
-  getParentValue(){
+  getParentValue() {
     return MUtil.get(this.props.database, MUtil.parentPath(this.props.path));
   }
 
@@ -44,76 +47,95 @@ export abstract class Viewer<S extends ViewerState> extends React.Component<MPro
    * @param updateCtrlVersion - 子类可以用state.ctrlVersion作为key的一部分，在数据变化时用changeValue(value, true)改变输入框的内容
    * @param final - 参考AFTER_CHANGE_CALLBACK
    */
-  changeValueEx(v:any, updateCtrlVersion:boolean, final:boolean) {
+  changeValueEx(v: any, updateCtrlVersion: boolean, final: boolean) {
     // 字段校验状态是否变化
     MUtil.set(this.props.database, this.props.path, v);
     this.props.afterChange?.(this.props.path, v, final);
-    this.setState((p) =>{
-      return {ctrlVersion: updateCtrlVersion? (p.ctrlVersion ?? 0 )+1 : (p.ctrlVersion ?? 0)}
+    this.setState((p) => {
+      return {
+        ctrlVersion: updateCtrlVersion
+          ? (p.ctrlVersion ?? 0) + 1
+          : p.ctrlVersion ?? 0,
+      };
     });
   }
 
   /**
    * changeValueEx(v, false, true)的快捷方式
-   * @param v 
+   * @param v
    */
-  changeValue(v:any) {
+  changeValue(v: any) {
     this.changeValueEx(v, false, true);
   }
 
   /**
    * 子类实现编辑器元素的渲染，render根据这个元素再加上校验
    */
-  protected abstract element(ctx?: any):ReactNode;
+  protected abstract element(ctx?: any): ReactNode;
 
   render() {
-    return <MContext.Consumer>{
-      ctx =>{
-        // const isShow = MUtil.isShow(this.props.database, ctx.rootProps.schema?.objectFields, this.props.schema.showIf)
-        // // 隐藏的字段不展示
-        // if (!isShow) return null
-        const childElement = this.element(ctx);
-        if(this.props.morph === "readable" || this.state?.noValidate){
-          return childElement;
-        } else {
-          // 加上校验错误提示
-          if(!ctx?.forceValid) {
+    return (
+      <MContext.Consumer>
+        {(ctx) => {
+          // const isShow = MUtil.isShow(this.props.database, ctx.rootProps.schema?.objectFields, this.props.schema.showIf)
+          // // 隐藏的字段不展示
+          // if (!isShow) return null
+          const childElement = this.element(ctx);
+          if (this.props.morph === "readable" || this.state?.noValidate) {
             return childElement;
+          } else {
+            // 加上校验错误提示
+            if (!ctx?.forceValid) {
+              return childElement;
+            }
+            const v = assembly.validate(
+              this.props.schema,
+              this.getValue(),
+              this.props.path
+            );
+            return [
+              childElement,
+              v?.message ? (
+                <div
+                  key="错误提示"
+                  className="ant-form-item-explain ant-form-item-explain-error"
+                >
+                  {v.message}
+                </div>
+              ) : undefined,
+            ];
           }
-          const v = assembly.validate(this.props.schema, this.getValue(), this.props.path);
-          return [
-            childElement,
-            v?.message ? <div key="错误提示" className="ant-form-item-explain ant-form-item-explain-error">{v.message}</div> : undefined
-          ];
-        }
-      }
-    }</MContext.Consumer>
+        }}
+      </MContext.Consumer>
+    );
   }
 
-  getPlaceholder(index:number = 0): string|undefined {
+  getPlaceholder(index: number = 0): string | undefined {
     let p = this.props.schema.placeholder;
-    if(_.isString(p)){
+    if (_.isString(p)) {
       return p;
-    } else if(p) {
+    } else if (p) {
       return p[index];
     } else {
       return undefined;
     }
   }
 
-  antProp(useVersionCtrl:boolean = false){
+  antProp(useVersionCtrl: boolean = false) {
     return {
-      key: useVersionCtrl ? this.props.path + "/" + this.state.ctrlVersion : this.props.path,
+      key: useVersionCtrl
+        ? this.props.path + "/" + this.state.ctrlVersion
+        : this.props.path,
       placeholder: this.getPlaceholder(),
       bordered: !this.props.hideBorder,
-      disabled: this.props.disable
-    }
+      disabled: this.props.disable,
+    };
   }
 }
 
 export abstract class BaseViewer extends Viewer<ViewerState> {
-  constructor(p:MProp){
+  constructor(p: MProp) {
     super(p);
-    this.state = {ctrlVersion: 1, noValidate: false};
+    this.state = { ctrlVersion: 1, noValidate: false };
   }
-};
+}

package/src/ui/editor/complex/AArrayGrid.tsx

@@ -1,38 +1,42 @@
-
 import _ from "lodash";
-import { Button, message, Popconfirm } from 'antd';
-import { CaretDownOutlined, CaretUpOutlined, CloseOutlined } from '@ant-design/icons';
-import { BaseViewer } from '../../BaseViewer';
+import { Button, message, Popconfirm } from "antd";
+import {
+  CaretDownOutlined,
+  CaretUpOutlined,
+  CloseOutlined,
+} from "@ant-design/icons";
+import { BaseViewer } from "../../BaseViewer";
 import { MUtil } from "../../../framework/MUtil";
 import { MFieldViewer } from "../../../framework/MFieldViewer";
 import React from "react";
-import { assembly } from '../../../framework/Assembly';
+import { assembly } from "../../../framework/Assembly";
+import EnhancedSortDrag, { DragItem } from "../../widget/EnhancedSortDrag";
 
 function uuid(len = 8, radix = 16) {
-  let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
+  let chars =
+    "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
   let uuid = [];
   let i = 0;
   radix = radix || chars.length;
 
   if (len) {
-      for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
+    for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
   } else {
-      let r;
-      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
-      uuid[14] = '4';
-
-      for (i = 0; i < 36; i++) {
-          if (!uuid[i]) {
-              r = 0 | Math.random() * 16;
-              uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
-          }
+    let r;
+    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
+    uuid[14] = "4";
+
+    for (i = 0; i < 36; i++) {
+      if (!uuid[i]) {
+        r = 0 | (Math.random() * 16);
+        uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
       }
+    }
   }
 
-  return uuid.join('');
+  return uuid.join("");
 }
 
-
 /**
  * 数据表格
  * 数据是这样的数组：
@@ -50,17 +54,27 @@ export class AArrayGrid extends BaseViewer {
       return MUtil.error("arrayMember未定义", schema);
     }
 
-    const members = schema.arrayMember.objectFields  // 成员是复杂结构
-      || [{ name: undefined, ...schema.arrayMember }]; // 成员是简单结构
+    const members = schema.arrayMember.objectFields || [
+      // 成员是复杂结构
+      { name: undefined, ...schema.arrayMember },
+    ]; // 成员是简单结构
     // if(!members) {
     //   return MUtil.error("AArrayGrid只适用于对象数组", schema);
     // }
 
     let data = super.getValue();
-    if (!_.isArray(data)) { // 只接受数组
+    if (!_.isArray(data)) {
+      // 只接受数组
       data = [];
     }
 
+    data = data.map((d) => {
+      if (!d.uniqueId) {
+        d.uniqueId = uuid();
+      }
+      return d;
+    });
+
     const cols = 1 + members.length;
 
     //let headTh = [<td key=":操作栏" width="40px" align="center" style={{backgroundImage: "linear-gradient(to bottom left, transparent calc(50% - 1px), #d3d3d3, transparent calc(50% + 1px))"}}></td>]
@@ -68,90 +82,204 @@ export class AArrayGrid extends BaseViewer {
     let rows = [];
     for (let idx = 0; idx < data.length; idx++) {
       const i = idx;
-      rows.push(<tr key={i}>
-        {/* 各个字段 */}
-        {
-          members.map((f, idx) =>
+      rows.push(
+        <tr key={i}>
+          {/* 各个字段 */}
+          {members.map((f, idx) => (
             <td key={f.name + idx}>
-              <MFieldViewer key={this.state.ctrlVersion + "." + f.name} parent={schema} morph={this.props.morph} schema={f} database={data} path={MUtil.jsonPath("[" + i + "]", f.name)} hideBorder={true} afterChange={(path, v, final): void => {
-                super.changeValueEx(data, false, final);
-              }} />
-            </td>)
-        }
-
-        {/* 操作栏 */}
-        <td key=":option" align="center">
-          <CaretUpOutlined style={{ display: "block" }} hidden={data.length <= 1} onClick={() => {
-            if (i === 0) {
-              message.warn("已经到顶了");
-            } else {
-              const prev = data[i - 1];
-              data[i - 1] = data[i];
-              data[i] = prev;
-              super.changeValueEx(data, true, true);
-            }
-          }} />
-          <Popconfirm
-            title="确定要删除吗这一项吗？"
-            onConfirm={() => {
-              data.splice(i, 1);
-              super.changeValueEx(data, true, true);
-            }}
-            okText="删除"
-            cancelText="不删">
-            <CloseOutlined style={{ display: "block" }} hidden={data.length == (schema.min ?? 0)} />
-          </Popconfirm>
-          <CaretDownOutlined style={{ display: "block" }} hidden={data.length <= 1} onClick={() => {
-            if (i === data.length - 1) {
-              message.warn("已经到底了");
-            } else {
-              const prev = data[i + 1];
-              data[i + 1] = data[i];
-              data[i] = prev;
-              super.changeValueEx(data, true, true);
-            }
-          }} />
-        </td>
-      </tr>);
+              <MFieldViewer
+                key={this.state.ctrlVersion + "." + f.name}
+                parent={schema}
+                morph={this.props.morph}
+                schema={f}
+                database={data}
+                path={MUtil.jsonPath("[" + i + "]", f.name)}
+                hideBorder={true}
+                afterChange={(path, v, final): void => {
+                  super.changeValueEx(data, false, final);
+                }}
+              />
+            </td>
+          ))}
+
+          {/* 操作栏 */}
+          <td key=":option" align="center">
+            <CaretUpOutlined
+              style={{ display: "block" }}
+              hidden={data.length <= 1}
+              onClick={() => {
+                if (i === 0) {
+                  message.warn("已经到顶了");
+                } else {
+                  const prev = data[i - 1];
+                  data[i - 1] = data[i];
+                  data[i] = prev;
+                  super.changeValueEx(data, true, true);
+                }
+              }}
+            />
+            <Popconfirm
+              title="确定要删除吗这一项吗？"
+              onConfirm={() => {
+                data.splice(i, 1);
+                super.changeValueEx(data, true, true);
+              }}
+              okText="删除"
+              cancelText="不删"
+            >
+              <CloseOutlined
+                style={{ display: "block" }}
+                hidden={data.length == (schema.min ?? 0)}
+              />
+            </Popconfirm>
+            <CaretDownOutlined
+              style={{ display: "block" }}
+              hidden={data.length <= 1}
+              onClick={() => {
+                console.log("当前选择数据", data);
+                if (i === data.length - 1) {
+                  message.warn("已经到底了");
+                } else {
+                  const prev = data[i + 1];
+                  data[i + 1] = data[i];
+                  data[i] = prev;
+                  super.changeValueEx(data, true, true);
+                }
+              }}
+            />
+          </td>
+        </tr>
+      );
     }
 
     const isMax = data.length >= (schema.max ?? Number.MAX_VALUE);
+
+    // 处理拖拽后的数据变化
+    const handleDragChange = (newItems: DragItem[]) => {
+      // 根据拖拽后的新顺序，重新排列原始表格数据
+      const newData = newItems.map((item) => {
+        // 从原始数据中找到对应的行数据
+        const originalRow = data.find(
+          (row) => String(row.uniqueId) === item.id
+        );
+        // 正常情况下一定能找到对应的行数据，因为我们是基于原始数据创建的拖拽项
+        return { ...originalRow! }; // 使用 ! 断言，因为我们确信能找到匹配项
+      });
+
+      super.changeValueEx(newData, true, true);
+    };
+
+    const handleDragFail = () => {};
+
     return (
-      <table key={this.props.path} className="AExperience M3_table" style={{ width: "100%" }}><tbody>
-        <tr key=":header">
-          {members.map((f, i) => <th key={f.name + i + ":first"}>{f.required ? <span style={{ color: "red" }}>*</span> : null}{f.label ?? f.name}</th>)}
-          <td key=":操作栏" width="40px" align="center"></td>
-        </tr>
-        {rows}
-        <tr key=":footer">
-          {/* 增加按钮 */}
-          <th key=":add" colSpan={cols}>
-            <Button disabled={isMax} key=":add" onClick={() => {
-              let newItem = assembly.types[schema.arrayMember.type]?.createDefaultValue(assembly, schema.arrayMember)
-              {/* 新增时支持要带入上一项的数据 */}
-              if (schema.arrayMember.copyFields && data.length > 0) {
-                const last = data[data.length - 1]
-                if (last) {
-                  newItem = {}
-                  schema.arrayMember.copyFields.forEach(item => {
-                    newItem[item] = last[item]
-                  })
-                }
-              }
-              data.push(newItem);
-              if (schema.autoValue) {
-                // 自动增加 value 属性
-                data.forEach(element => {
-                  if (!element.value) element.value = uuid()
-                });
-              }
-              console.log('data', data)
-              super.changeValue(data);
-            }}>增加一项</Button>
-            {this.props.extra}
-          </th>
-        </tr>
-      </tbody></table>
-    )
+      <table
+        key={this.props.path}
+        className="AExperience M3_table"
+        style={{ width: "100%" }}
+      >
+        <tbody>
+          <tr key=":header">
+            <th key={"拖拽"}></th>
+            {members.map((f, i) => (
+              <th key={f.name + i + ":first"}>
+                {f.required ? <span style={{ color: "red" }}>*</span> : null}
+                {f.label ?? f.name}
+              </th>
+            ))}
+            <td key=":操作栏" width="40px" align="center"></td>
+          </tr>
+          <EnhancedSortDrag
+            items={data.map((row, index) => {
+              return {
+                id: String(row.uniqueId),
+                cpn: (
+                  <>
+                    {members.map((f, idx) => (
+                      <td key={f.name + idx}>
+                        <MFieldViewer
+                          key={this.state.ctrlVersion + "." + f.name}
+                          parent={schema}
+                          morph={this.props.morph}
+                          schema={f}
+                          database={data}
+                          path={MUtil.jsonPath("[" + index + "]", f.name)}
+                          hideBorder={true}
+                          afterChange={(path, v, final): void => {
+                            super.changeValueEx(data, false, final);
+                          }}
+                        />
+                      </td>
+                    ))}
+
+                    <Popconfirm
+                      title="确定要删除吗这一项吗？"
+                      onConfirm={() => {
+                        data.splice(index, 1);
+                        super.changeValueEx(data, true, true);
+                      }}
+                      okText="删除"
+                      cancelText="不删"
+                    >
+                      <td>
+                        <CloseOutlined
+                          style={{ display: "block" }}
+                          hidden={data.length == (schema.min ?? 0)}
+                        />
+                      </td>
+                    </Popconfirm>
+                  </>
+                ),
+                isChecked: true,
+                label: `${row.name}`,
+                checkedIndex: index,
+              };
+            })}
+            onChange={handleDragChange}
+            enableAnimation={true}
+            isTableRow={true}
+            onDragFail={handleDragFail}
+          />
+          {/* {rows} */}
+          <tr key=":footer">
+            {/* 增加按钮 */}
+            <th key=":add" colSpan={cols}>
+              <Button
+                disabled={isMax}
+                key=":add"
+                onClick={() => {
+                  let newItem = assembly.types[
+                    schema.arrayMember.type
+                  ]?.createDefaultValue(assembly, schema.arrayMember);
+                  {
+                    /* 新增时支持要带入上一项的数据 */
+                  }
+                  if (schema.arrayMember.copyFields && data.length > 0) {
+                    const last = data[data.length - 1];
+                    if (last) {
+                      newItem = {};
+                      schema.arrayMember.copyFields.forEach((item) => {
+                        newItem[item] = last[item];
+                      });
+                    }
+                  }
+                  data.push(newItem);
+                  if (schema.autoValue) {
+                    // 自动增加 value 属性
+                    data.forEach((element) => {
+                      if (!element.value) element.value = uuid();
+                    });
+                  }
+                  console.log("data", data);
+                  super.changeValue(data);
+                }}
+              >
+                增加一项
+              </Button>
+              {this.props.extra}
+            </th>
+          </tr>
+        </tbody>
+      </table>
+    );
   }
 }