form-driver 0.1.0

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

@@ -0,0 +1,119 @@
+import React from "react";
+import _ from "lodash";
+import { BaseViewer } from "../../BaseViewer";
+import { Upload, message, Button } from 'antd';
+import { MUtil } from "../../..";
+
+/**
+ * antd 的上传组件 https://ant.design/components/upload-cn/
+ *  {
+      "type": "array", arrayMember: {
+        type: 'object',
+        readable: 'A',
+        style: {display: 'block'},
+        a: {
+          urlExpr: "value.url",
+          labelExpr: "value.name",
+        },
+      },
+      "editor": "AUpload", "name": "upload_sec", "label": "文件上传_HP_SECOBJ",
+      ossFile: {
+        type: "HP_SECOBJ",
+        arguments: { genName: true, ossKeyPath: "course/" }
+      }, props: {
+        beforeUpload(file) {
+          const isLt200M = file.size / 1024 / 1024 < 200;
+          if (!isLt200M) {
+            message.error('File must smaller than 200MB!');
+          }
+          return isLt200M;
+        },
+      }
+    }
+ */
+export class AUpload extends BaseViewer {
+  loading?: number = undefined;
+
+  element() {
+    const p = this.props.schema.props ?? {};
+    const { type } = this.props.schema.ossFile
+    let a = {
+      name: "file",
+      data: (file: any) => (this.props.schema.ossFile?.arguments),
+    }
+    if (type === 'HP_GO') {
+      Object.assign(a, {
+        action: "/academy/go/upload",
+      })
+    } else if (type === 'HP_SECOBJ') {
+      Object.assign(a, {
+        action: "/academy/oss/secObject",
+      })
+    } else {
+      return MUtil.error(`ossFile.type=${type}无效`, this.props.schema)
+    }
+
+    const prevData = super.getValue();
+    if (prevData) {
+      Object.assign(a, {
+        defaultFileList: prevData.map((item, index) => {
+          item.uid = index
+          return item
+        })
+      })
+    }
+
+    const props = {
+      ...a,
+      onChange: info => {
+        if (p.onChange) p.onChange(info)
+        console.log(info)
+        const { file, fileList = [] } = info
+
+        switch (file.status) {
+          case 'uploading':
+            this.loading = Math.floor(file.percent || 0);
+            this.setState({});
+            break;
+          case "done":
+          case 'success':
+            this.loading = undefined;
+            if (type === 'HP_GO') {
+              fileList[fileList.length - 1] = {
+                name: file.name,
+                url: file.response.content.url
+              }
+              super.changeValue(fileList);
+            } else if (type === 'HP_SECOBJ') {
+              const newValue = `/academy/oss/secObject/${file.response.data?.ossKey}`;
+              if (file.response.errorCode) {
+                message.error(file.response.message);
+              } else {
+                fileList[fileList.length - 1] = {
+                  name: file.name,
+                  url: newValue
+                }
+                super.changeValue(fileList);
+              }
+            }
+            break;
+          case 'error':
+            this.loading = undefined;
+            this.setState({});
+            message.error("上传失败了");
+            break;
+          case 'removed':
+            super.changeValue(fileList);
+            break;
+        }
+      },
+      ...p,
+    }
+    return (
+      <Upload key={this.props.path}
+        disabled={this.loading !== undefined} {...props}>
+        <Button disabled={this.loading !== undefined}>点击上传</Button>
+      </Upload>
+    )
+  }
+}

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

@@ -0,0 +1,21 @@
+.m3-nps-wrapper {
+    .m3-nps-tip {
+        overflow: hidden;
+        span:first-child {
+            float: left;
+        }
+
+        span:last-child {
+            float: right;
+        }
+    }
+
+    .ant-rate {
+        display: flex !important;
+        width  : 100%;
+
+        .ant-rate-star {
+            flex: 1
+        }
+    }
+}

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

@@ -0,0 +1,47 @@
+import React from "react";
+import _ from "lodash";
+import { BaseViewer } from "../../BaseViewer";
+import { Rate } from 'antd';
+import "./NPS.less";
+import { MProp } from "../../../framework/Schema";
+
+/**
+ * NPS 打分组件，基于 antd 的评分组件 https://ant.design/components/rate-cn/
+ * 定义示例：{ editor: 'NPS', name: 'possibility', label: "您向朋友或同事推荐本堂课程的可能性有多大?", required: true },
+ */
+export class NPS extends BaseViewer {
+  value: string;
+
+  constructor(p:MProp){
+    super(p);
+    // rate 组件从 1 开始计算
+    this.value = super.getValue() == -1 ? null : super.getValue() + 1;
+  }
+  element() {
+    const p = this.props.schema.props ?? {};
+    const props = {
+      count: 11,
+      character: ({ index }) => index,
+      defaultValue: this.value,
+      onChange: (value, label, extra)=>{
+        // nps 从 0 开始计算
+        let v = value - 1
+        if (v == -1) v = null
+        if (p.onChange) p.onChange(v, label, extra)
+        super.changeValue(v);
+      },
+      onBlur: () =>{
+        if (p.onBlur) p.onBlur()
+        super.changeValue(super.getValue())
+      },
+      ...p,
+    }
+    return <div className="m3-nps-wrapper">
+      <div className="m3-nps-tip">
+        <span>{p.leftTip ?? '不可能'}</span>
+        <span>{p.rightTip ?? '极有可能'}</span>
+      </div>
+      <Rate className="m3-nps-rate" {...props} />
+    </div>
+  }
+}

package/src/ui/editor/complex/AArray.less

@@ -0,0 +1,10 @@
+.AArray_addBtn{
+  margin-top: 10px;
+  text-align: center;
+}
+
+
+.AArray_item {
+  flex: 1;
+  margin-bottom: 5px;
+}

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

@@ -0,0 +1,104 @@
+
+import React from "react";
+import { Button, List } from "antd";
+import { CloseCircleFilled } from '@ant-design/icons';
+import "./AArray.less";
+import { BaseViewer } from '../../BaseViewer';
+import { MFieldSchemaAnonymity } from "../../../framework/Schema";
+import { MFieldViewer } from "../../../framework/MFieldViewer";
+import { MUtil } from "../../../framework/MUtil";
+import { assembly } from "../../../framework/Assembly";
+
+const NO_REMOVE_BTN: {[type:string]:boolean} = {"string":true};
+
+/** @deprecated Ant的list，也不好看 */
+export class AArray extends BaseViewer {
+  _removeClicked(index: number) {
+    const value:any[] = super.getValue() ?? [];
+    let nv:any[]|undefined = value.filter((v,idx)=>idx !== index);
+    if(nv.length === 0) {
+      nv = undefined;
+    }
+    super.changeValueEx(nv, true, true);
+  }
+
+  /** 不同的数组成员类型，有不同的渲染方式 */
+  _renderItem(memberSchema:MFieldSchemaAnonymity, itemData: any, index: number, removeButton?: boolean){
+    return [
+      removeButton && !NO_REMOVE_BTN[memberSchema.type]
+      ? <CloseCircleFilled key={"closebtn:" + index} style={{marginLeft: 10}} size={32} onClick={()=>{  // FIXME 删除按钮都移到元素上
+        this._removeClicked(index);
+      }}/>
+      :undefined,
+
+      <div key={index + ":" + this.state.ctrlVersion} className="AArray_item">
+        <MFieldViewer morph={this.props.morph}  key={index} schema={memberSchema} database={this.props.database} path={this.props.path + "[" + index + "]"} afterChange={(path:string, newVal:any, blur:boolean) => {
+          if(newVal === undefined) { // 删除
+            this._removeClicked(index);
+          } else { // 修改
+            this.props.afterChange?.(path, newVal, blur);
+            this.setState({}); // 子元素变化，可能影响校验状态，所以刷新下
+          }
+        }} parent={this.props.schema} forceValid={this.props.forceValid} removeButton={removeButton}/>
+      </div>
+    ]
+  }
+
+  element() {
+    const schema = this.props.schema;
+    const memberSchema = schema.arrayMember;
+    if(!memberSchema) {
+      return MUtil.error(`缺少arrayMember属性`, schema);
+    }
+    
+
+    if(memberSchema.type === "object" || memberSchema.type==="string"){
+      const data:any[] = super.getValue() ?? [];
+      const isMax = data.length >= (schema.max ?? Number.MAX_VALUE);
+      const min = schema.min ?? 0;
+      const max = schema.max ?? Number.MAX_VALUE;
+      
+      if(memberSchema.type === "string") {
+        const n = Math.max(min, data.length);
+        const removeButton = max === min ? undefined : n > min;
+        let arr = [];
+        for(let i = 0; i < n; i ++) {
+          arr.push(this._renderItem(memberSchema, data[i], i, removeButton));
+        }
+        if(n < max) {
+          arr.push(<div key=":add" className="AArray_addBtn">
+          <Button key=":加一项按钮" onClick={() => {
+            const d = super.getValue() ?? [];
+            while(d.length < n+1){
+              d.push(undefined);
+            }
+            super.changeValue(d);
+          }}>{schema.arrayAddLabel ?? "+"}</Button>
+          </div>)
+        }
+        return arr;
+      } else {
+        return <List
+          bordered
+          footer={<Button disabled={isMax} key=":加一项按钮" onClick={()=>{
+            data.push(
+              assembly.types[schema.arrayMember.type]?.createDefaultValue(assembly, schema.arrayMember)
+            );
+            super.changeValue(data);
+          }} >增加一项</Button>}
+          dataSource={data}
+          renderItem={  (valueItem,index) => {
+            let noRemoveBtn = NO_REMOVE_BTN[memberSchema.type] // 为了美观，某些数组元素不需要关闭按钮
+            if(schema.min && schema.min === schema.max){ // 最大项数=最小项数时，不要删除按钮
+              noRemoveBtn = true;
+            }
+            return <List.Item key={index}>
+            {this._renderItem(memberSchema, valueItem, index, !noRemoveBtn)}
+            </List.Item>
+          }}/>;
+      }
+    } else {
+      return MUtil.error(`成员类型${memberSchema.type}，无法编辑`, schema);
+    }
+  }
+}

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

@@ -0,0 +1,115 @@
+
+import _ from "lodash";
+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';
+
+/**
+ * 数据表格
+ * 数据是这样的数组：
+ *  [
+ *    {from:"1606997544611",to:"", tillNow:true, company:"阿里巴巴", position:"CEO"},
+ *    {from:"1606997544611",to:"", tillNow:true, company:"阿里巴巴", position:"CEO"},
+ *  ]
+ */
+export class AArrayGrid extends BaseViewer {
+  element() {
+    const schema = this.props.schema;
+
+    if(!schema.arrayMember) {
+      return MUtil.error("arrayMember未定义", schema);
+    }
+
+    const members = schema.arrayMember.objectFields  // 成员是复杂结构
+      || [{name:undefined, ...schema.arrayMember}]; // 成员是简单结构
+    // if(!members) {
+    //   return MUtil.error("AArrayGrid只适用于对象数组", schema);
+    // }
+
+    let data = super.getValue();
+    if(!_.isArray(data)){ // 只接受数组
+      data = [];
+    }
+
+    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>]
+
+    let rows = [];
+    for(let idx = 0; idx < data.length; idx ++){
+      const i = 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>);
+    }
+
+    const isMax = data.length >= (schema.max ?? Number.MAX_VALUE);
+    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.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={()=>{
+              data.push(
+                assembly.types[schema.arrayMember.type]?.createDefaultValue(assembly, schema.arrayMember)
+              );
+              super.changeValue(data);
+            }}>增加一项</Button>
+            {this.props.extra}
+          </th>
+        </tr>
+      </tbody></table>
+    )
+  }
+}

package/src/ui/editor/complex/ACnAddress.less

@@ -0,0 +1,15 @@
+.ACnAddress_p div{
+  width: 50%
+}
+
+.ACnAddress_p .backfill{
+  width: 100%;
+}
+
+.ACnAddress .AInputBox{
+  width: 50% !important; 
+}
+
+.ACnAddress .AGB2260{
+  width: 50% !important;
+}

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

@@ -0,0 +1,61 @@
+
+import React from "react";
+import { Input } from 'antd';
+import { AGB2260 } from "../basic/AGB2260";
+import './ACnAddress.less';
+import { AInputBox } from "../basic/AInputBox";
+import _ from "lodash";
+import { BaseViewer } from '../../BaseViewer';
+import { MUtil } from '../../../framework/MUtil';
+import { MGB2260Type } from '../../../types/MGB2260Type';
+
+/**
+ * 国内地址，用以编辑省市区和详细地址
+ * 数据类似{province:"陕西省",city:"西安市",district:"长安区", address:"紫薇田园都市A区", code:610116}
+ */
+export class ACnAddress extends BaseViewer {
+  element() {
+    const gb2260 = super.getValue() ?? {};
+    // 当传入的 database，没有 code，但有 province 时，反查 code 
+    if (gb2260.province && !gb2260.code) {
+      for (const p of MGB2260Type.gb2260) {
+        if (p.label === gb2260.province) {
+          if (gb2260.city && p.children) {
+            for (const c of p.children) {
+              if (c.label === gb2260.city) {
+                if (gb2260.district && c.children) {
+                  for (const d of c.children) {
+                    if (d.label === gb2260.district) {
+                      gb2260.code = d.value
+                      break
+                    }
+                  }
+                } else {
+                  gb2260.code = c.value
+                  break
+                }
+              }
+            }
+          } else {
+            gb2260.code = p.value
+            break
+          }
+        }
+      }
+    }
+    return <Input.Group compact key={this.props.path} className={MUtil.phoneLike() ? "ACnAddress_p" : "ACnAddress"}>
+      <AGB2260 morph="editor" schema={{ type: "gb2260", placeholder: super.getPlaceholder(0) }} database={gb2260} path={"code"} disable={this.props.disable} afterChange={(path, code, final):void => {
+        const info = MGB2260Type.lookup(code);
+        if (info) {
+          _.set(gb2260, "province", info.label[0]);
+          _.set(gb2260, "city", info.label[1]);
+          _.set(gb2260, "district", info.label[2]);
+        }
+        super.changeValueEx(gb2260, false, final);
+      }} />
+      <AInputBox morph="editor" schema={{ type: "string", placeholder: super.getPlaceholder(1) }} database={this.props.database} path={this.props.path + ".address"} disable={this.props.disable} afterChange={(path, v, final)=>{
+        super.changeValueEx(gb2260, false, final);
+      }} />
+    </Input.Group>
+  }
+}

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

@@ -0,0 +1,45 @@
+
+import React from "react";
+import { BaseViewer } from "../../BaseViewer";
+import { MUtil } from "../../../framework/MUtil";
+import { assembly } from '../../../framework/Assembly';
+import { Button, Modal } from "antd";
+import { AForm } from "./AForm";
+
+/**
+ * 展示为一个按钮，点击后弹出对话框编辑
+ */
+export class ADialogForm extends BaseViewer {
+  pop:boolean;
+
+  constructor(p){
+    super(p);
+    this.close = this.close.bind(this);
+  }
+
+  close(){
+    this.pop = false;
+    this.setState({})
+  }
+
+  element() {
+    const value = super.getValue();
+    const readable = assembly.toReadable(this.props.schema, value, super.getParentValue());
+    return <>
+      <Modal
+        style={this.props.style}
+        closable={false}
+        keyboard={true}
+        width="70%"
+        className={MUtil.phoneLike() ? "MEditor_p" : "MEditor"} maskClosable={false} title="编辑" visible={this.pop} 
+        footer={<Button onClick={this.close}>确定</Button>}>
+        <AForm {...this.props}/>
+      </Modal>
+      {readable}
+      <Button style={{marginLeft: 15}} onClick={()=>{
+        this.pop = true;
+        this.setState({});
+      }}>编辑</Button>
+    </>
+  }
+}

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

@@ -0,0 +1,85 @@
+
+
+
+import _ from "lodash";
+import { AArrayGrid } from './AArrayGrid';
+import React from 'react';
+import Button from 'antd/lib/button';
+import { BaseViewer } from '../../BaseViewer';
+import { MUtil } from "../../../framework/MUtil";
+import { MFieldSchemaAnonymity } from "../../../framework/Schema";
+
+const RANGE_FNAME = "_range";
+
+/**
+ * 经历，可以用于教育经历、工作经历等
+ * 数据类似以下数组：
+ *  [
+ *    {from:"1606997544611",to:"", tillNow:true, company:"阿里巴巴", position:"CEO"},
+ *    {from:"1606997544611",to:"", tillNow:true, company:"阿里巴巴", position:"CEO"},
+ *      ...
+ *  ]
+ * 
+ */
+export class AExperience extends BaseViewer {
+  _submitData(arrayGridData: any, sort:boolean){
+    // 修改后，把数据转换回来再提交
+    let experienceData = arrayGridData.map((e: any) => {
+      let item = {
+        ...e,
+        from: _.get(e, RANGE_FNAME + "[0]"),
+        to: _.get(e, RANGE_FNAME + "[1]"),
+        tillNow: _.get(e, RANGE_FNAME + "[2]"),
+      }
+      delete item[RANGE_FNAME];
+      return item;
+    });
+
+    if(sort){
+      experienceData.sort((a:any,b:any) => a.from - b.from)
+    }
+    super.changeValueEx(experienceData, !!sort, true);
+  }
+
+  element() {
+    if(!this.props.schema.experience) {
+      return MUtil.error("experience未定义", this.props.schema);
+    }
+    
+    // 复用AArrayGrid，下面构造个schema给它
+    const arrayGridSchema:MFieldSchemaAnonymity = {
+      type:"array",
+      dataFormat: this.props.schema.dataFormat,
+      arrayMember:{
+        type:"object",
+        objectFields:[
+          {name: RANGE_FNAME, type: "dateRange", label:"起止时间", dateRange: this.props.schema.dateRange },
+          ...this.props.schema.experience.members
+        ]
+      }
+    };
+    // 转换一套数据给arrayGrid
+    let data = super.getValue();
+    if(!_.isArray(data)){ // 只接受数组
+      data = [];
+    }
+    const arrayGridData = data.map((e: any)=>{
+      let a = _.clone(e);
+      a[RANGE_FNAME] = [e.from, e.to, e.tillNow]
+      delete a.from;
+      delete a.to;
+      delete a.tillNow;
+      return a
+    });
+
+    return <AArrayGrid key={this.state.ctrlVersion} schema={arrayGridSchema} database={arrayGridData} path="" 
+      morph={this.props.morph}
+      extra={<Button onClick={()=>{
+        this._submitData(arrayGridData, true);
+      }} >自动排序</Button>}
+      afterChange={(path,v, blur) => {
+        this._submitData(arrayGridData, false);
+      }
+    }/>;
+  }
+}

package/src/ui/editor/complex/AForm.less

@@ -0,0 +1,35 @@
+
+
+/* 背景 */
+/* .AForm::after{ 
+  content: "";
+  background: url(//hupan-web.oss-cn-hangzhou.aliyuncs.com/static/image/headImg.jpg);
+  opacity: 0.2;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  z-index: -1;
+} */
+
+.AForm .AForm { /** 嵌套的子表单 */
+  /* box-shadow: 0 0 10px #d0cfcf; */
+  border: 1px solid #d9d9d9;
+  padding: 15px;
+}
+
+.AForm .ItemLabel {
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.AForm .Item {
+  margin-bottom:20px;
+}
+
+.MEditor, .MEditor_p {
+  .ant-form-item-explain.ant-form-item-explain-error {
+    color: #ff4d4f
+  }
+}