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;