tiny-admin

tiny-admin

a tiny Admin UI library written in React.JS

tiny-admin 的基本结构

/**
 * 工厂函数，用于创建装饰过的 AddOrEditForm 表单
 */
export function decorateAddOrEditForm(PlainAddOrEditForm);

/**
 * 工厂函数，用于创建装饰过的 AddOrEditFormModal 表单
 */
export function decorateAddOrEditModal(PlainAddOrEditForm);


/**
 * 工厂函数，生成一个 AddForm  组件
 * @param {*} model 
 * @param {*} AddOrEditForm 
 */
export function addform(model,AddOrEditForm);


/**
 * 工厂函数，生成一个 Datagrid 组件
 * @param {*} model 
 * @param {*} AddOrEditFormModal 
 */
export function datagrid(model,AddOrEditFormModal){

示例

针对具体的模型编写model和PlainAddOrEditForm就可以自动生成后台了。

比如对于一个角色模型，有角色名、和描述两个字段。

相应的model定义为：

export const model={
    name:"post",
    fields:{
        title:{
            title:'资源名',
        },
        excerpt:{
            title:"摘要",
        },
        category:{
            title:"分类",
        },
        featureImageUrl:{
            title:"配图",    // 默认情况下，title是显示到`Datagrid`中的内容
            render:(text, record, index)=>text  // 如果定义了render函数，则用此函数渲染
            display:false,  // 但是一旦定义了display:false，则不会再在`Datagrid`中显示
        },
        content:{
            title:"内容",
            display:false, 
        },
    },
    actions:{
        remove:{            
            display:true,    // 是否要显示删除按钮
        },
        edit:{           
            display:true,    // 是否要显示编辑按钮
        },
    },
    methods:{
        create:postapi.create,
        remove:postapi.remove,
        update:postapi.update,
        list:postapi.list,
        detail:postapi.detail,
        publish:postapi.publish,
        approval:postapi.approval,
        sendback:postapi.sendback,
        reject:postapi.reject,
    }
};

普通视图组件PlainAddOrEditForm定义为：

class PlainAddOrEditForm extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        const {getFieldDecorator,getFieldsError, getFieldError, isFieldTouched,validateFields}=this.props.form;
        const hasFieldError=(fieldname)=>isFieldTouched(fieldname) && getFieldError(fieldname);
        const hasErrors=(fieldsError)=>Object.keys(fieldsError).some(field => fieldsError[field]);
        const FormItem=Form.Item;
        return (
        <Form >
            <FormItem label='角色名' validateStatus={hasFieldError('name')} help={hasFieldError('name')||''} >
            {
                getFieldDecorator('name',{
                    rules:[{required:true,message:'角色名必填'}],
                    initialValue:this.props.initialValues.name,
                })(
                    <Input placeholder='角色名' />
                )
            }
            </FormItem>
        
            <FormItem label='描述' validateStatus={hasFieldError('description')} help={hasFieldError('description')||''} >
            {
                getFieldDecorator('description',{
                    rules:[{required:true,message:'角色描述必填'}],
                    initialValue:this.props.initialValues.description,
                })(
                    <Input placeholder='description' />
                )
            }
            </FormItem>
        
        </Form>);
        
    }
}

这个普通的视图组件PlainAddOrEditForm，并没有定义提交、重置按钮，也没有定义任何行为逻辑，更没有定义是普通的表单组件还是嵌套在对话框中实现。它只是定义了一系列用于接收输入的视图控件，仅此而已。这么做的理由是可以在上述的这些情况中复用代码。

嫌代码太长？试试antd-snippets antd-snippets (github)。 我在bang88的仓库代码里添加了一个antformwrapped。可以快速生成上述代码。

要生成一个用于创建记录的表单组件，只要编写代码：

// ... 首先定义一个普通的视图组件 PlainAddOrEditForm

// 然后再创建一个经过 AntDesign 的 Form.create()() 装饰的表单
const AddOrEditForm=decorateAddOrEditForm(PlainAddOrEditForm);
// 生成用于增加记录的表单组件，并绑定模型的
//  `#create(value,context)`
// 方法
const AddForm=addform(model,AddOrEditForm);


// 创建一个经过AntDesign的Form.create()()装饰的表单对话框
const AddOrEditFormModal=decorateAddOrEditFormModal(PlainAddOrEditForm);
// 生成用于管理记录的Datagrid组件，并绑定模型的
//  `#list(current,pageSize,condition,context)`
//  `#update(id,values,context)`
//  `#remove(id,context)`
// 方法，每次点击相应记录的action，都会执行相应操作：
//  delete: 弹出删除的确认对话框，确认是否要删除
//  edit:   弹出编辑的模态对话框，并绑定相应回调函数
const Datagrid=datagrid(model,AddOrEditFormModal);

对于生成的Datagrid，其实例有以下几个核心属性和方法：

• 具有#onRowClick(record)方法，可以与其他组件联动，典型的是和另外一个Datagrid联动。
• 具有headItem属性，每当该属性的id变化时，会触发调用onTableChange(this.state.pagination,{},{},{headItem});。可以用于行项目的自动刷新。
• 具有#refresh()方法，可以通过ref()钩子设置到父组件中，然后在恰当时候强制刷新数据