AntAdmin使用指南

2020-06-24 fishedee 前端

0 概述

ant-admin使用指南，将常用的模式写下来，避免不断去查API

1 基础框体

1.1 location与history

import ContactForm from './ContactForm';
import React,{Fragment} from 'react';

export default class CustomList extends React.Component{
    render = ()=>{
        return (<ContactForm
            nameCache={"/contact/customDetail"}
            apiGetContactUrl={"/contact/getCustom"}
            apiModContactUrl={"/contact/modCustom"}
            apiAddContactUrl={"/contact/addCustom"}
            history={this.props.history}
            location={this.props.location}
            />);
    }
}

外层框体，会被默认传递一个history与location参数，记得透传到下一级下面。

//FIXME，push，pop，与传递state

1.2 dispatch与state

import React,{Fragment} from 'react';
import { connect } from 'redva';
import cache from '@/utils/cache';

@connect((state)=>{
    return {loading:state.loading.global};
})
export default class ContactList extends React.Component{
    constructor(props){
        super(props);
        this.state = cache.get(this.props.nameCache) || {
            contactCategoryInfo:{},
            list:[],
            where:{},
            limit:{
                pageIndex:0,
                pageSize:10,
                count:0,
            }
        }
    }
    fetch = async ()=>{
        let contactCategoryInfo = await this.props.dispatch({
            type:'/contactCategory/getAll',
        });
        ....
    }
    render = ()=>{
        const role = this.props.login.role;
        const loading = this.props.loading;
    }
}

connect是redva提供的组件，可以提供this.props.dispatch组件，以及读取全局的state对象到props中

1.3 qs

import qs from 'qs';

@connect()
export default class Form extends React.Component{
    constructor(props){
        super(props);
        let query = qs.parse(this.props.location.search.substr(1));
        ....
    }
}

qs库是读取参数的

2 路由与菜单

3 基础组件

3.1 对话框

import MyModal from '@/components/MyModal';

render = ()=>{
    openModal = async(data,contactCategoryId)=>{
        this.myModal.open({
            title:"编辑联系人分类",
            render:()=>{
                var onSubmit = ()=>{
                    this.myModal.close();
                    this.fetch();
                }
                return (<ContactCategoryForm 
                    contactCategoryId={contactCategoryId}
                    data={data}
                    onSubmit={onSubmit}/>);
            }
        });
    }
    return (
            <MyModal ref={(node)=>(this.myModal=node)}/>
    )
}

正常的Modal，没有底部按钮

import MyModal from '@/components/MyModal';

render = ()=>{
    openModal = async(data,contactCategoryId)=>{
        var form = null;
        var handleOk = ()=>{
            var data = form.getSelect();
            console.log(data);
        }
        this.myModal.open({
            title:"编辑联系人分类",
            footer=[
                <Button type="primary"onClick={handleOk}>
                确定
                </Button>,
            ],
            render:()=>{
                var onSubmit = ()=>{
                    this.myModal.close();
                    this.fetch();
                }
                return (<ContactCategoryForm
                    ref={(node)=>(form=node)}
                    contactCategoryId={contactCategoryId}
                    data={data}
                    onSubmit={onSubmit}/>);
            }
        });
    }
    return (
            <MyModal ref={(node)=>(this.myModal=node)}/>
    )
}

！！footer暂时不要用

3.2 输入框样式的按钮

render = ()=>{
    return (
    <div>
        <MyInputButton onIconClick={this.onClearClick} onClick={this.openModal}>{this.props.valueName} </MyInputButton>
    </div>);
}

用的就是value与onClick

4 容器组件

4.1 可编辑表格

import StandardSequenceTable from '@/components/StandardSequenceTable';
import MyInput from '@/components/MyInput';
import {Button} from 'antd';

render:(value)=>{
    var del = (data)=>{
        this.state.data.phones.splice(data._index,1);
        this.setState({});
    }
    var add = ()=>{
        this.state.data.phones = this.state.data.phones || [];
        this.state.data.phones.push({
            name:"",
            phone:"",
        });
        this.setState({});
    }
    var onChange = (newValue)=>{
        this.state.data.phones = newValue;
        this.setState({});
    }
    const columns = [
        {
            title:'联系人',
            dataIndex:'name',
            render:()=>{
                return (<MyInput placeholder="请选择" />);
            }
        },
        {
            title: '电话',
            dataIndex: 'phone',
            render:()=>{
                return (<MyInput placeholder="电话"/>);
            }
        },
        {
            title: '操作',
            render:(val,data)=>{
                return (<a onClick={del.bind(this,val)}>删除</a>);
            }
        }
    ];
    return (
        <div>
            <div>
                <Button type="primary" onClick={add.bind(this)}>添加</Button>
            </div>
            <div>
                <StandardSequenceTable
                    style={{marginTop:'16px'}}
                    onChange={onChange}
                    value={value}
                    columns={columns}
                />
            </div>
        </div>
    )
}

使用可编辑表格，以及StandardSequenceTable

4.2 展示表格

constructor(props){
    super(props);
    this.state = {
        list:[],
        where:{},
        limit:{
            pageIndex:0,
            pageSize:10,
            count:0,
        }
    }
}
onPaginactionChange = (limit)=>{
    this.state.limit = limit;
    this.fetch();
}
fetch = async ()=>{
    let where = { 
        ...this.state.where,
    };
    let limit = { 
        ...this.state.limit , 
        count:undefined
    };
    let data = await this.props.dispatch({
        type:'/contact/getAll',
        payload:{
            ...where,
            ...limit,
        }
    });
    this.state.limit.count = data.count;
    this.state.list = data.data;
    this.setState({});
}
render = ()=>{
    const columns = [
        {
            title: this.props.labelName,
            dataIndex: 'name',
        },
        {
            title: '供应商分类',
            dataIndex: 'suppilerCategoryId',
            render:(value)=>{
                return this.state.contactCategoryInfo[value] ? this.state.contactCategoryInfo[value].name:"";
            }
        },
        {
            title: '客户分类',
            dataIndex: 'customCategoryId',
            render:(value)=>{
                return this.state.contactCategoryInfo[value] ? this.state.contactCategoryInfo[value].name:"";
            }
        },
        {
            title: '备注',
            dataIndex: 'remark',
            },
        {
            title: '操作',
            render: (val,data) => (
                <Fragment>
                    <a onClick={this.mod.bind(this,data.contactId)}>修改</a>
                    <Divider type="vertical" />
                    <a onClick={this.del.bind(this,data.contactId)}>删除</a>
                </Fragment>
            ),
        },
    ];
    return (
        <StandardTable 
            style={{marginTop:'16px'}}
            rowKey={'contactId'}
            loading={this.props.loading}
            columns={columns}
            value={this.state.list}
            paginaction={this.state.limit}
            onPaginactionChange={this.onPaginactionChange}/>
    );
}

4.3 可单选表格

constructor(props){
    super(props);
    this.state = {
        selectedRow:undefined,
    }
}
onSelectedRowChange = (selectedRow)=>{
    this.state.selectedRow = selectedRow;
    this.setState({});
}
render = ()=>{
    const columns = [
        {
            title: this.props.labelName,
            dataIndex: 'name',
        },
        {
            title: '供应商分类',
            dataIndex: 'suppilerCategoryId',
            render:(value)=>{
                return this.state.contactCategoryInfo[value] ? this.state.contactCategoryInfo[value].name:"";
            }
        },
        {
            title: '客户分类',
            dataIndex: 'customCategoryId',
            render:(value)=>{
                return this.state.contactCategoryInfo[value] ? this.state.contactCategoryInfo[value].name:"";
            }
        },
        {
            title: '备注',
            dataIndex: 'remark',
            },
        {
            title: '操作',
            render: (val,data) => (
                <Fragment>
                    <a onClick={this.mod.bind(this,data.contactId)}>修改</a>
                    <Divider type="vertical" />
                    <a onClick={this.del.bind(this,data.contactId)}>删除</a>
                </Fragment>
            ),
        },
    ];
    return (
        <StandardTable 
            selectedRow={this.state.selectedRow}
            onSelectedRowChange={this.state.onSelectedRowChange}
            style={{marginTop:'16px'}}
            rowKey={'contactId'}
            loading={this.props.loading}
            columns={columns}
            value={this.state.list}
            paginaction={this.state.limit}
            onPaginactionChange={this.onPaginactionChange}/>
    );
}

这个暂时不要用！！

4.4 可双击表格

constructor(props){
    super(props);
    this.state = {
        selectedRow:null,
    }
}
onSelectedRowChange = (selectedRow)=>{
    this.state.selectedRow = selectedRow;
    this.setState({});
}
onRowDoubleClick = ()=>{
    let selectedRowIndex = this.state.list.findIndex((single)=>{
        return single.itemSalesOrderId == this.state.selectedRow;
    })
    if( selectedRowIndex != -1 ){
        this.props.onSelect(this.state.list[selectedRowIndex]);
    }
}
render = ()=>{
    const columns = [
        {
            title: this.props.labelName,
            dataIndex: 'name',
        },
        {
            title: '供应商分类',
            dataIndex: 'suppilerCategoryId',
            render:(value)=>{
                return this.state.contactCategoryInfo[value] ? this.state.contactCategoryInfo[value].name:"";
            }
        },
        {
            title: '客户分类',
            dataIndex: 'customCategoryId',
            render:(value)=>{
                return this.state.contactCategoryInfo[value] ? this.state.contactCategoryInfo[value].name:"";
            }
        },
        {
            title: '备注',
            dataIndex: 'remark',
            },
        {
            title: '操作',
            render: (val,data) => (
                <Fragment>
                    <a onClick={this.mod.bind(this,data.contactId)}>修改</a>
                    <Divider type="vertical" />
                    <a onClick={this.del.bind(this,data.contactId)}>删除</a>
                </Fragment>
            ),
        },
    ];
    return (
        <StandardTable 
            style={{marginTop:'16px'}}
            rowKey={'itemSalesOrderId'}
            loading={this.props.loading}
            columns={columns}
            value={this.state.list}
            selectedRow={this.state.selectedRow}
            onSelectedRowChange={this.onSelectedRowChange}
            onRowDoubleClick={this.onRowDoubleClick}
            paginaction={this.state.limit}
            onPaginactionChange={this.onPaginactionChange}/>
    );
}

4.5 展示树形控件

constructor(props){
    super(props);
    this.state = {
        contactCategoryId:0,
    }
}
onTreeSelectChange = (contactCategoryId)=>{
    this.state.contactCategoryId = contactCategoryId;
    this.state.limit.pageIndex = 0;
    this.setState({});
    this.fetch();
}
getTreeCategory = ()=>{
    let result = {};
    let all = this.state.contactCategoryInfo || {};
    for( var i in all ){
        var single = all[i];
        if( single.fullId.startsWith(this.props.dataCategoryFullIdStart)){
            result[i] = single;
        }
    }
    return result;
}
filterNode = (input,data)=>{
    if( data.name.indexOf(input) != -1 ){
        return true;
    }
    return false;
}
render = ()=>{
    return (<MyTreeList 
        value={this.state.contactCategoryId}
        onChange={this.onTreeSelectChange}
        nodes={this.getTreeCategory()}
        filterNode={this.filterNode}
        renderNode={(data)=>(data.name)}/>);
}

展示树形控件

5 数据流动控件

5.1 redva

import { connect } from 'redva';

@connect()
class List extends React.Component{

}

注意connect的引入

相关文章