jitao-client/js/component/administration/banner/banner.jsx

import { Component } from 'react';
import { Input, Select, Spin, Table, message, Button,Icon } from 'antd';
import BannerFrom from '@/administration/banner/bannerDes.jsx';
import {  splitUrl} from '@/tools.js';
import Crop from  '@/crop/cropBlock';

class Banner extends Component {
	constructor(props) {
		super(props);
		this.state = {
			loading: false,
            dataSource: [],
            showDesc:false,
            selectedRowKey:[],
            selectedRowKeys:[],
			pagination: {
				defaultCurrent: 1,
				defaultPageSize: 10,
				showQuickJumper: true,
				pageSize: 10,
				onChange: function(page) {
					this.loadData(page);
					this.setState({
						selectedRowKeys: []
					});
				}.bind(this),
				showTotal: function(total) {
					return '共' + total + '条数据';
				}
			},
			columns: [
				{
					title: '轮播图描述',
					dataIndex: 'text',
					key: 'text'
				},
				{
					title: '跳转地址',
					dataIndex: 'forwardUrl',
					key: 'forwardUrl'
                },
                {
					title: '位置',
					dataIndex: 'client',
                    key: 'client',
                    render:(text=>{
                        return text==1?'APP':'网站'
                    })
				},
				{
					title: '轮播图API',
					dataIndex: 'apiUrl',
					key: 'apiUrl'
				},
			]
		};
	}
	loadData(pageNo) {
		this.setState({
            page:pageNo,
            loading: true,
            selectedRowKeys:[],
		});
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/banners/list",
            data: {
                pageNo: pageNo || 1,
				pageSize: this.state.pagination.pageSize,
                apiUrl:this.state.apiSearch,
                client:this.state.positionSearch,
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push({
                            key:i,
                            id: thisdata.id, //品类ID
                            text: thisdata.text, //品类序号
                            apiUrl:thisdata.apiUrl,
                            forwardUrl:thisdata.forwardUrl,
                            client:thisdata.client,
                            imgUrl: thisdata.imgUrl ? splitUrl(thisdata.imgUrl, ',', globalConfig.avatarHost + '/upload') : [],
                        });
                    };
                }
                this.state.pagination.current = data.data.pageNo;
                this.state.pagination.total = data.data.totalCount;
                if(data.data&&data.data.list&&!data.data.list.length){
					this.state.pagination.current=0
					this.state.pagination.total=0
				}
                this.setState({
                    dataSource: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
	}
	search() {
		this.loadData();
	}
	reset() {
		this.state.apiSearch = '';
		this.state.positionSearch = undefined;
		this.loadData();
    }
    closeDesc(e, s) {
        this.state.showDesc = e;
        if (s) {
            this.loadData(this.state.page);
        };
    }
    addClick() {
        this.state.RowData = {};
        this.setState({
            showDesc: true
        });
    }
    tableRowClick(record, index) {
        this.state.RowData = record;
        this.setState({
            showDesc: true,
        });
    }
    delectRow() {
        this.setState({
            loading:true
        })
        let deletedIds =[];
        let rowItem = this.state.selectedRowKeys[0];
        let data = this.state.dataSource ||[];
        if (data.length) {
            deletedIds.push(data[rowItem].id);
        }
        $.ajax({
            method: "POST",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/banners/delete",
            data: {
                id: deletedIds[0]
            }
        }).done(function (data) {
            if (!data.error.length) {
                message.success('删除成功！');
                this.setState({
                    loading: false
                });
                this.loadData(this.state.page);
            } else {
                message.warning(data.error[0].message);
            };
        }.bind(this));
    }
	componentWillMount() {
		this.loadData();
	}
	render() {
		const rowSelection = {
			selectedRowKeys: this.state.selectedRowKeys,
			onChange: (selectedRowKeys, selectedRows) => {
				this.setState({
					selectedRows: selectedRows.slice(-1),
					selectedRowKeys: selectedRowKeys.slice(-1)
				});
			}
        };
        const hasSelect = this.state.selectedRowKeys.length;
		return (
			<div className="user-content">
				<div className="content-title">
					<div className="content-title">
						<span>轮播图库</span>
                        <div className="patent-addNew">
                            <Button type="primary" onClick={this.addClick.bind(this)}>新建轮播图<Icon type="plus" /></Button>
                        </div>
					</div>
					<div className="user-search">
						<Input
							style={{ marginRight: 10,width:200 }}
							value={this.state.apiSearch}
							placeholder="API"
							onChange={(e) => {
								this.setState({ apiSearch: e.target.value });
							}}
						/>
                        <Select  style={{width:150}}
                            placeholder="轮播图位置"
                            value={this.state.positionSearch} 
                            onChange={(e)=>{this.setState({positionSearch:e})}}>
                            <Select.Option value="0">网站</Select.Option>
                            <Select.Option value="1">App</Select.Option>
                        </Select>
						<Button type="primary" onClick={this.search.bind(this)} style={{ marginRight: 10 }}>
							搜索
						</Button>
						<Button onClick={this.reset.bind(this)} style={{ marginRight: 10 }}>重置</Button>
                        <Button type="danger" disabled={!hasSelect}  onClick={(e)=>{this.delectRow()}}>删除</Button>
					</div>
					<div className="patent-table">
						<Spin spinning={this.state.loading}>
							<Table
                                columns={this.state.columns}
                                dataSource={this.state.dataSource}
                                rowSelection={rowSelection}
                                pagination={this.state.pagination}
                                onRowClick={this.tableRowClick.bind(this)}
							/>
						</Spin>
					</div>
				</div>
                <BannerFrom
                    data={this.state.RowData}
                    showDesc={this.state.showDesc}
                    closeDesc={this.closeDesc.bind(this)}
                />
			</div>
		);
	}
}

export default Banner;