wuhanchu / fr-schema

类似于后端 orm 框架定义前端的 schema 架构。

fr-schema

前端的一个统一 schema 工具，设计 schema 来生成不同客户端以及不同框架的界面。 作为后端界面和小程序的 API 开发项目，主要提供 schema 类和后台进行对接。

schema 的编写规范

actions

export default {
  add: 'add',
  update: 'update',
  show: 'show',
  search: 'search',
};

schema 的属性

schema 代表是一个数据对象的定义，一般来说会和数据库的设计有 8 成相似。

field 的定义

• type 控件类型 （默认为 Input,具体的范围参考 schemaFieldType）

  • Select: "下拉框",
  • MultiSelect: "多选下拉框",
  • DatePicker: "日期选择",
  • RangePicker: "日期范围选择",
  • TextArea: "多行输入",
  • Password: "密码",
  • TreeSelect: "树选择",
  • Slider: "范围选择",
  • Input: "普通输入框"

• required 是否必填

• tip 字段说明 右方浮框

• extra 字段说明 下方文字

• submitFormat 提交格式（当字段是日期格式时可用）

• groupName 分组名称，如果字段太多，可进行分组，界面上会进行分区显示。

• listHide 列表隐藏

• infoHide 信息框隐藏

• addHide 新增隐藏

• editHide 编辑隐藏

• showHide 弹出信息框 action 为 show 的时候隐藏。

• readOnly 只读，在信息页面会显示但是不可修改。新增的时候可编辑（一般关联显示的信息需要配置）

• dict 配置的字典(json 对象)

• dictFunc 配置的字典方法（在 web 起来的时候可）

• span 在 row 中占的位置（所有空间为 24）

• props 传入到输入框的属性

• itemProps 传入到 FormItem 的属性(如果有配置 表单)

• decoratorProps form.getFieldDecorator 传入的参数数据（主要是校验规则等）

• render 列表的渲染方法（可选）

• renderInput(item, data, action): 输入框的渲染方法（可选）

  • item： schema file 对象

  • data：数据

  • action: 当前操作 action

    this.schema.detp.rednerInput = (item,data,action)=>{
    return <UserTree value={data.dept} >
    }

• onChange: 数据修改时调用。

• infoShowFunc： 显示控制，传入 state.data 信息来控制.

  infoShowFunc: function(data) {
    return data && data.type === meeting.type.dict.offline.value
  }

类型属性

日期类型

• remoteFormat: 传到后台的数据格式（moment 的格式）

字典的编写

• default: 选项中可加 true or false 配置,确定是否是默认数据

dict: {
    wait: {
        value: 0,
        remark: "会议未开始"
    },
    running: {
        value: 1,
        remark: "会议进行中"
    },
    end: {
        value: 2,
        remark: "会议结束"
    },
    archived: {
        value: 3,
        remark: "归档"
    },
    abnormal: {
        value: -1,
        remark: "异常"
    }
}