form-driver 0.1.0

package/src/ui/BaseViewer.tsx

@@ -0,0 +1,110 @@
+import React, { ReactNode } from "react";
+import { MProp } from "../framework/Schema";
+import _ from "lodash";
+import { assembly } from '../framework/Assembly';
+import { MContext } from '../framework/MContext';
+import { MUtil } from "../framework/MUtil";
+
+export interface ViewerState {
+  // 纯粹是用来刷新控件内容的
+  ctrlVersion?: number;
+  // true表示不校验，比如子form就不需要校验
+  noValidate?: boolean;
+}
+
+/**
+ * 每一个Viewer，都用来表达（展示readable/编辑editor）json上的一个值 / 或者不会改变数据的装饰物
+ * 这个类负责展示校验错误，提供数据存取api
+ */
+export abstract class Viewer<S extends ViewerState> extends React.Component<MProp, S> {
+  /**
+   * 获取此字段在database中的值
+   */
+  getValue(){
+    return MUtil.get(this.props.database, this.props.path);
+  }
+
+  getParentValue(){
+    return MUtil.get(this.props.database, MUtil.parentPath(this.props.path));
+  }
+
+  /**
+   * 当字段值变化时，调用此方法把值写回database，并且回调afterChange
+   * 调用changeValue后Editor会刷新，不需要额外再setState了
+   * @param v - 编辑器在数组中时，子编辑器changeValue(undefined)表示它要删除此元素
+   * @param updateCtrlVersion - 子类可以用state.ctrlVersion作为key的一部分，在数据变化时用changeValue(value, true)改变输入框的内容
+   * @param final - 参考AFTER_CHANGE_CALLBACK
+   */
+  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)}
+    });
+  }
+
+  /**
+   * changeValueEx(v, false, true)的快捷方式
+   * @param v 
+   */
+  changeValue(v:any) {
+    this.changeValueEx(v, false, true);
+  }
+
+  /**
+   * 子类实现编辑器元素的渲染，render根据这个元素再加上校验
+   */
+  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 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
+          ];
+        }
+      }
+    }</MContext.Consumer>
+  }
+
+  getPlaceholder(index:number = 0): string|undefined {
+    let p = this.props.schema.placeholder;
+    if(_.isString(p)){
+      return p;
+    } else if(p) {
+      return p[index];
+    } else {
+      return undefined;
+    }
+  }
+
+  antProp(useVersionCtrl:boolean = false){
+    return {
+      key: useVersionCtrl ? this.props.path + "/" + this.state.ctrlVersion : this.props.path,
+      placeholder: this.getPlaceholder(),
+      bordered: !this.props.hideBorder,
+      disabled: this.props.disable
+    }
+  }
+}
+
+export abstract class BaseViewer extends Viewer<ViewerState> {
+  constructor(p:MProp){
+    super(p);
+    this.state = {ctrlVersion: 1, noValidate: false};
+  }
+};

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

@@ -0,0 +1,114 @@
+
+import React from "react";
+import { Ajax } from '../../../framework/Ajax';
+import _ from "lodash";
+import { MUtil } from '../../../framework/MUtil';
+import { Cascader } from 'antd';
+import { MFieldSchema } from '../../../framework/Schema';
+import { Picker } from 'antd-mobile';
+import { BaseViewer } from "../../..";
+
+
+export function labelExpr(d: any, remote: MFieldSchema["remote"]) {
+  let script = "const {" + _.keys(d).join(',') + "} = d; return " + remote.labelExpr;
+  return new Function("d", "_", script)(d, _);
+}
+
+export function convert(node = {}, dataPath, valuePath, childPath) {
+  var newNode = {};
+  newNode['value'] = node[valuePath];
+  newNode['label'] = node[dataPath];
+
+  if (node[childPath] && node[childPath].length > 0) {
+    let child = [];
+    node[childPath].map((item) => {
+      child.push(convert(item, dataPath, valuePath, childPath))
+    })
+    newNode['children'] = child
+  }
+  return newNode
+}
+
+/* 树的查找 如该数据格式下查找id为3的元素
+  {id: 2, name: 'test', data: [{id: 3, name: 'yy'}]} => {id: 3, name: 'yy', type: 'ORG'}
+*/
+export function findById(node, id, labelPath, valuePath, childPath) {
+  if (node[valuePath] == id) {
+    let res = {
+      label: node[labelPath],
+      value: id
+    }
+    return res;
+  }
+  if (node[childPath] && node[childPath].length > 0) {
+    for (var i = 0; i < node[childPath].length; i++) {
+      let findItem = findById(node[childPath][i], id, labelPath, valuePath, childPath);
+      if (findItem !== -1) {
+        return findItem
+      }
+    }
+  }
+  return -1
+}
+
+export class ACascadePicker extends BaseViewer {
+  fetchCandidate: (key: string) => void;
+
+  constructor(props) {
+    super(props);
+  }
+
+  element() {
+    let show = super.getValue() || [];
+    if (!_.isArray(show)) {
+      show = [];
+    }
+    const candidate = MUtil.option(this.props.schema);
+
+    const p = this.props.schema.props ?? {};
+
+    if (MUtil.phoneLike()) {
+      return <>
+        {/* <Picker
+            data={this.props.schema.option}
+            extra="请选择(可选)"
+            cols={2}
+            value={show}
+            onChange={v => {
+              console.log(v);
+              super.changeValue(v);
+            }}
+            onOk={v => {
+              console.log(v);
+              super.changeValue(v);
+            }}
+            {...p}
+            >
+                <div className="backfill"> {show.length > 0 ? show.join('-') : '请点击选择' } </div>
+        </Picker> */}
+      </>
+    } else {
+      return <Cascader
+        key="v"
+        options={candidate}
+        defaultValue={show.map((item) => item.value)}
+        changeOnSelect
+        placeholder={super.getPlaceholder()}
+        onChange={v => {
+          const vLabel = [];
+          v.map((item) => {
+            let findItem;
+            candidate.map((dataItem) => {
+              findItem = findById(dataItem, item, 'label', 'value', 'children');
+              if (findItem != -1) {
+                vLabel.push(findItem)
+              }
+            })
+          })
+          super.changeValue(vLabel);
+        }}
+        {...p}
+      />
+    }
+  }
+}

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

@@ -0,0 +1,104 @@
+import React from "react";
+import { Checkbox } from "antd";
+import _ from "lodash";
+import { MUtil } from "../../../framework/MUtil";
+import { BaseViewer } from '../../BaseViewer';
+import { MEnumField, MProp, ValueConst } from '../../../framework/Schema';
+import { MSetType } from '../../../types/MSetType';
+import { MFieldViewer } from "../../../framework/MFieldViewer";
+import { assembly } from "../../../framework/Assembly";
+
+function ACheckBoxLabel(field: MEnumField) {
+  if (field.html) {
+    return <div dangerouslySetInnerHTML={{ __html: field.html }} />
+  } else {
+    return field.label ?? field.value
+  }
+}
+
+/**
+ * 多选
+ * 示例：{label:"1.13 除爱人/对象之外，目前和您一起生活的家庭成员包括(多选):",name:"familyAccompany",type:"set", option: "父亲 母亲 孩子 爱人/对象的父亲 爱人/对象的母亲 兄弟姐妹"},
+ * 值：["孩子", "父亲"]
+ */
+export class ACheckBox extends BaseViewer {
+  _enumFields: MEnumField[];
+  _enumValues: ValueConst[];
+
+  /** 这个是开放输入框的值 */
+  _inputBoxValue: ValueConst;
+
+  constructor(p: MProp) {
+    super(p);
+    this._enumFields = MUtil.option(this.props.schema);
+    this._enumValues = this._enumFields.map(e => e.value);
+
+    const openOpt = p.schema.openOption ?? p.schema.setOpen;
+    if(openOpt) {
+      this._inputBoxValue = 
+        _.first(_.difference(super.getValue(), this._enumValues)) ?? 
+        assembly.types[openOpt.type].createDefaultValue(assembly, openOpt);
+    }
+  }
+
+  _createBr() {
+    return this.props.schema.layoutHint == "h" ? undefined : <div key={MUtil.unique()} />;
+  }
+
+  element(ctx) {
+    let data: any[] = super.getValue()
+
+    const openIndex = MSetType.openValueIndex(this.props.schema, data);
+    let checkboxs: any[] = this._enumFields.map((m: any, index) => {
+      const isShow = MUtil.isShow(this.props.database, ctx.rootProps.schema?.objectFields, m.showIf)
+      if (!isShow) return null;
+      return [
+        <Checkbox key={index} disabled={this.props.disable} checked={_.includes(data, m.value)} onChange={(e) =>
+          super.changeValue(MSetType.change(e.target.checked, m.value, data, this.props.schema))}>
+          {ACheckBoxLabel(m)}
+        </Checkbox>,
+        this._createBr()
+      ]
+    });
+
+    // 开放选项
+    if (this.props.schema.openOption) {
+      checkboxs.push(
+        <Checkbox
+          disabled={this.props.disable}
+          key="opened:"
+          checked={openIndex >= 0}
+          onChange={(e) => {
+            if(e.target.checked) {
+              super.changeValue(MSetType.change(true, this._inputBoxValue, data, this.props.schema))
+            } else {
+              super.changeValue(MSetType.clearOpenValue(this.props.schema, data, false)) // 不能用MSetType.change，因为可能有多个开放值
+            }
+          }}>
+          <span style={{ marginRight: "10px" }}>{this.props.schema.openOption.label ?? "其他"}</span>
+          <MFieldViewer morph={this.props.morph} schema={this.props.schema.openOption} database={this} path="_inputBoxValue" afterChange={(path: string, str: any, final: boolean) => {
+            const matchEnum = this._enumFields.find(e => e.value === str);
+            if (matchEnum) { // 不能让用户输入某个枚举值
+              this._inputBoxValue = "";
+              _.remove(data, (e) => !this._enumValues.includes(e))
+              if (!data.includes(str)) {
+                data.push(str);
+              }
+              super.changeValueEx(data, true, final);
+            } else {
+              const idx = data.findIndex(v => !this._enumValues.includes(v));
+              if (!_.isNil(idx)) {
+                this._inputBoxValue = str;
+                data[idx] = str;
+                super.changeValueEx(data, false, final);
+              }
+            }
+          }} parent={this.props.schema} forceValid={false} disable={openIndex < 0} style={{ width: "inherit" }} />
+        </Checkbox>,
+        this._createBr()
+      );
+    }
+
+    return checkboxs;
+  }
+}

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

@@ -0,0 +1,76 @@
+import React from "react";
+import { DatePicker } from "antd";
+import { DatePicker as DatePickerM } from 'antd-mobile';
+import moment from "moment";
+import zhCN from 'antd/lib/date-picker/locale/zh_CN';
+import _ from "lodash";
+import { MDateTimeType } from "../../../types/MDateTimeType";
+import { MUtil } from "../../../framework/MUtil";
+import { BaseViewer } from '../../BaseViewer';
+/**
+ * 日期选择框
+ * 配置示例：
+ *  {label:"1.2 您的出生年份是",name:"birthday",        type:"AYearPicker"},
+ *  {label:"1.14 您是什么时间来到现在这个城市的?",name:"enterCity", type:"yearAndMonth"},
+ * 类型是year时，dataFormat默认是YYYY，例如: 2020，表示2020年
+ * 类型是yearAndMonth时，dataFormat默认是YYYYMM，例如：202001，表示2020年1月
+ * 类型是yearMonthDay时，dataFormat默认是YYYYMMDD，例如：20200101，表示2020年1月1号
+ * 类型是dateTime时，dataFormat默认是x，例如1608897466955
+ */
+export class ADatetimePicker extends BaseViewer {
+  element() {
+    const antConf = MDateTimeType.antConf(this.props.schema);
+    if (!antConf) {
+      return MUtil.error(`无效的类型${this.props.schema.type}`, this.props.schema);
+    }
+
+    let data = this.getValue();
+
+    const dataAsMoment = data ? moment(data, antConf.dataFormat) : undefined;
+    const dataAsDate = dataAsMoment?.toDate();
+    const onChange = (vv: Date | moment.Moment | null) => {
+      if (vv) {
+        const vvAsM = _.isDate(vv) ? moment(vv) : vv;
+        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}
+      />;
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { Cascader } from 'antd';
+import _ from 'lodash';
+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 {
+  element() {
+    const v = super.getValue();
+    const empty = { label: ["请选择"], code: undefined };
+    const looked = _.isNil(v) ? empty : (MGB2260Type.lookup(v) ?? empty);
+    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>
+    } else { // PC
+      return <Cascader
+        options={MGB2260Type.gb2260}
+        disabled={this.props.disable}
+        key={this.props.path}
+        placeholder={super.getPlaceholder()}
+        bordered={this.props.hideBorder ? false : true}
+        className="AGB2260"
+        style={this.props.style}
+        defaultValue={looked.code}
+        onChange={(vv) => {
+          super.changeValue(_.last(vv));
+        }}
+        {...p}
+        />;
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import React from "react";
+import { CloseOutlined } from "@ant-design/icons";
+import { Input } from "antd";
+import TextArea from "antd/lib/input/TextArea";
+import _ from "lodash";
+import { BaseViewer } from '../../BaseViewer';
+import { MProp } from "../../../framework/Schema";
+
+
+export class AInputBox extends BaseViewer {
+  value: string;
+
+  constructor(p:MProp){
+    super(p);
+    this.value = super.getValue();
+  }
+
+  element() {
+    const lines = this.props.schema.stringLines ?? 1;
+    const p = this.props.schema.props ?? {};
+    const commonProps = {
+      defaultValue:this.getValue(), 
+      key:this.props.path, 
+      onChange: (v:any)=> { this.value = v.target.value; this.changeValueEx(this.value, false, false) },
+      onBlur: () => this.changeValue(this.value),
+      placeholder: super.getPlaceholder(),
+      bordered: this.props.hideBorder ? false : true,
+      disabled: this.props.disable,
+      maxLength: this.props.schema.max,
+      ...p,
+    };
+
+    if(lines === 1) { // 单行
+      let addon = undefined;
+      if(!_.isNil(this.props.removeButton)){
+        addon = <CloseOutlined
+          className={this.props.removeButton ? "AForm_removeBtn" : "AForm_removeBtn_disabled"} 
+          onClick={() => super.changeValue(undefined)}
+          disabled={this.props.removeButton}/>
+      }
+      const inputProps = {
+        className: "AInputBox",
+        style: this.props.style,
+        ...commonProps
+      }
+      //if(addon) {
+        return <Input {...inputProps} addonAfter={addon}/>
+      // } else {
+      //   return <UnderlineInputBox {...inputProps}/>; // 等 UnderlineInputBox 支持addonAfter，上面的就能干掉了
+      // }
+    } else{ // 多行
+      let styles:any = {minHeight: lines + "em"};
+      if(this.props.hideBorder){
+        styles.border = "none";
+      }
+      return <TextArea style={styles} {...commonProps}/>
+    }
+  }
+}

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

@@ -0,0 +1,39 @@
+import React from "react";
+import _ from "lodash";
+import { BaseViewer } from "../../BaseViewer";
+import { InputNumber } from "antd";
+
+/**
+ * 输入整数的输入框
+ * 定义示例：{label:"2.3 请问今年以来您平均每月工作多少天?",name:"workdayPerMonth", type:"int"},
+ */
+export class AIntBox extends BaseViewer {
+  element() {
+    const p = this.props.schema.props ?? {};
+    const props = {
+      ...super.antProp(),
+      bordered: undefined,
+      style: {border: this.props.hideBorder ? "none" : undefined, ...this.props.style},
+      min: this.props.schema.min,
+      max: this.props.schema.max,
+      // type: "number",
+      pattern: "\\d*",
+      defaultValue: super.getValue(),
+      onChange: (v)=>{
+        let n: number | undefined = Number(v)
+        if(_.isNaN(n)){
+          n = undefined;
+        }
+        if (p.onChange) p.onChange(n)
+        console.log(n)
+        this.changeValueEx(n, false, false);
+      },
+      onBlur: () =>{
+        if (p.onBlur) p.onBlur()
+        this.changeValueEx(super.getValue(), false, true);
+      },
+      ...p,
+    }
+    return <InputNumber {...props}></InputNumber>
+  }
+}

package/src/ui/editor/basic/AKvSet.less

@@ -0,0 +1,9 @@
+.MEditor {
+	.kvSet_v {
+		display: inline
+	}
+	.kvSet_h {
+		display: inline-block;
+		white-space: nowrap;
+	}
+}

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { Checkbox } from "antd";
+import _ from "lodash";
+import { MUtil } from "../../../framework/MUtil";
+import { BaseViewer } from '../../BaseViewer';
+import { MEnumField, MProp, ValueConst, MFieldSchemaAnonymity } from '../../../framework/Schema';
+import { MFieldViewer } from "../../../framework/MFieldViewer";
+import "./AKvSet.less";
+
+const defaultBoxSchema = {type:"string", name:""} as MFieldSchemaAnonymity;
+
+/**
+ * 可以填值的多选，max=1时可以当单选用
+ * B8: 您现在在做的事业务部门的岗位吗？
+ * 1. 是，具体职位是 _______
+ * 2. 否，我的部门是 _______
+ */
+export class AKvSet extends BaseViewer {
+  _enumFields: MEnumField[];
+  _enumValues: ValueConst[];
+
+  /** 这个是开放输入框的值 */ 
+  _inputBoxValue: ValueConst[];
+
+  constructor(p:MProp){
+    super(p);
+
+    const data = super.getValue();
+    this._enumFields = MUtil.option(this.props.schema);
+    this._enumValues = this._enumFields.map(e=>e.value);
+    this._inputBoxValue = this._enumFields.map(f=> data?.[f.value.toString()]);
+  }
+
+  _createBr(){
+    return this.props.schema.layoutHint == "h" ? undefined: <div key={MUtil.unique()}/>;
+  }
+
+  element() {
+    let data = super.getValue();
+    if(!_.isPlainObject(data)) {
+      data = {};
+    }
+
+    let checkboxs = this._enumFields.map((m, index)=>{
+      const select = _.has(data, m.value.toString());
+      const itemKey = m.value?.toString();
+      return <div key={itemKey} className={`kvSet_${this.props.schema.layoutHint}`}>
+       <Checkbox disabled={this.props.disable} checked={select} onChange={(e)=>{
+        let c = e.target.checked;
+        let update = false;
+        if(c) {
+          data[itemKey] = this._inputBoxValue?.[index];
+          const keys = Object.keys(data);
+          for(let k of keys) {
+            if(Object.keys(data).length > this.props.schema.max) {
+              if( k != itemKey ) {
+                delete data[k];
+                update = true;
+              }
+            } else {
+              break;
+            }
+          }
+        } else {
+          delete data[m.value?.toString()]
+        }
+        super.changeValueEx(data, update, true);
+      }}/>
+      
+      <div style={{display: "inline-block", marginLeft:5, marginRight:10, marginBottom:3}}>
+        {m.label ?? m.value}
+        <div style={{display:"inline-block", paddingLeft: 10}}>
+          <MFieldViewer
+            morph={this.props.morph}
+            schema={this.props.schema.openOption ?? defaultBoxSchema}
+            database={this}
+            parent={this.props.schema} forceValid={false} 
+            disable={this.props.disable || !select}
+            path={"_inputBoxValue[" + index + "]"} afterChange={(path:string, str:any, final:boolean) => {
+              data[m.value?.toString()] = this._inputBoxValue[index];
+              super.changeValueEx(data, false, final);
+            }} />
+        </div>
+      </div>
+      {this._createBr()}
+      </div>
+    });
+    return checkboxs;
+  }
+}