| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236 | 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;
 |