import React from 'react'; import {Icon} from 'antd'; // 定义某个表的dataSchema, 结构跟querySchema很相似, 见下面的例子 // 注意: 所有的key不能重复 // 这个配置不只决定了table的schema, 也包括用于新增/删除的表单的schema module.exports = [ { key: 'id', // 传递给后端的key title: 'ID', // 前端显示的名字 // 其实dataType对前端的意义不大, 更重要的是生成后端接口时要用到, 所以要和DB中的类型一致 // 对java而言, int/float/varchar/datetime会映射为Long/Double/String/Date dataType: 'int', // 数据类型, 目前可用的: int/float/varchar/datetime // 这一列是否是主键? // 如果不指定主键, 不能update/delete, 但可以insert // 如果指定了主键, insert/update时不能填写主键的值; // 只有int/varchar可以作为主键, 但是实际上主键一般都是自增id primary: true, // 可用的showType: normal/radio/select/checkbox/multiSelect/textarea/image/file/cascader showType: 'normal', // 默认是normal, 就是最普通的输入框 showInTable: true, // 这一列是否要在table中展示, 默认true disabled: false, // 表单中这一列是否禁止编辑, 默认false // 扩展接口, 决定了这一列渲染成什么样子 render: (text, record) => text, }, { key: 'name', title: '用户名', dataType: 'varchar', // 对于普通的input框, 可以设置addonBefore/addonAfter placeholder: '请输入用户名', addonBefore: (), addonAfter: '切克闹', defaultValue: 'foolbear', // 默认值, 只在insert时生效, update时不生效 }, { key: 'weight', title: '体重(千克)', dataType: 'int', min: 10, defaultValue: 70, // 默认值 disabled: true, showInForm: false, // 这一列是否要在表单中展示, 默认true. 这种列一般都是不需要用户输入的, DB就会给一个默认值那种 }, { key: 'gender', title: '性别', dataType: 'int', showType: 'radio', options: [{key: '1', value: '男'}, {key: '2', value: '女'}], defaultValue: '1', disabled: true, }, { key: 'marriage', title: '婚否', dataType: 'varchar', showType: 'select', options: [{key: 'yes', value: '已婚'}, {key: 'no', value: '未婚'}], // 对于dataSchema可以设置校验规则, querySchema不能设置 // 设置校验规则, 参考https://github.com/yiminghe/async-validator#rules validator: [{type: 'string', required: true, message: '必须选择婚否!'}], }, { key: 'interest', title: '兴趣爱好', dataType: 'int', showType: 'checkbox', options: [{key: '1', value: '吃饭'}, {key: '2', value: '睡觉'}, {key: '3', value: '打豆豆'}], defaultValue: ['1', '2'], validator: [{type: 'array', required: true, message: '请至少选择一项兴趣'}], width: 120, // 指定这一列的宽度 }, { key: 'good', title: '优点', dataType: 'varchar', showType: 'multiSelect', options: [{key: 'lan', value: '懒'}, {key: 'zhai', value: '宅'}], validator: [{type: 'array', required: true, message: '请选择优点'}], }, { key: 'pic1', title: '头像', dataType: 'varchar', showType: 'image', // 后端必须提供图片上传接口 showInTable: false, }, { key: 'desc', title: '个人简介', dataType: 'varchar', showType: 'textarea', // 用于编辑大段的文本 showInTable: false, defaultValue: '个人简介个人简介个人简介', validator: [{type: 'string', max: 20, message: '最长20个字符'}], }, { key: 'score', title: '分数', dataType: 'int', max: 99, min: 9, }, { key: 'gpa', title: 'GPA', dataType: 'float', max: 9.9, placeholder: '哈哈', width: 50, }, { key: 'birthday', title: '生日', // 对于日期类型要注意下, 在js端日期被表示为yyyy-MM-dd HH:mm:ss的字符串, 在java端日期被表示为java.util.Date对象 // fastjson反序列化时可以自动识别 // 序列化倒是不用特别配置, 看自己需求, fastjson会序列化为一个字符串, 前端原样展示 dataType: 'datetime', // 对于datetime而言, 配置showType是无意义的 placeholder: 'happy!', }, { key: 'xxday', title: 'xx日期', dataType: 'datetime', defaultValue: '2017-01-01 11:22:33', showInTable: false, showInForm: false, // 这个只是测试下...如果一列在table和form中都不出现, 那就不如直接去掉. // 另外showInForm=false时, 很多针对form的字段都没意义了, 比如defaultValue/placeholder/validator等等 }, ];