index.js 3.75 KB
import React,{Component} from 'react';
import WhiteBar from '@src/components/Common/WhiteBar';
import {Table,Input,Form,Button,Row,Col,Select,DatePicker,Message,Modal} from 'antd';
import {Link} from 'react-router-dom';
import { API_MENU_MANAGE, API_FILEUPLOAD_MANAGE,API_SYS_CMS } from '@src/Api';
import axios from '@src/axios/index';
import Utils from '@src/utils/utils';
import Storage from '@src/utils/localStorage';


export default class BannerManage extends Component {
	state = {
		bannersData: [],
		pagination: {},
		isLoading: true
	}
	params = {
		pageSize: 10,
		pageNum: 1
	} 
	componentWillMount () {
		let btnAuth = Storage.get('btnAuth')
    	this.setState({btnAuth})
	}
	componentDidMount () {
		this.getBanners();
	}
	getBanners = () => {
		let _this = this;
		this.setState({isLoading: true});
		axios.ajax({
			url: API_SYS_CMS.getAppBanner,
			data: {
				...this.params
			}
		}).then((res) => {
			this.setState({isLoading: false});
			let dataList = [];
			if (res.records.length > 0) {
				dataList = res.records.map((item) => {
					return {...item,key: item.id}
				})
			}
			this.setState({
    			bannersData: dataList,
    			pagination: Utils.pagination(res, (current) => {
		            _this.params.pageNum = current;
		            _this.setState({isLoading: true});
		            this.getBanners();
		        })
    		})
		});
	}
	deleteConfirm = (id,title) => {
		let _this = this;
		Modal.confirm({
			title: `是否删除${title}的广告图`,
			okText: '确定',
			cancelText: '取消',
			onOk () {
				_this.delete(id);
			},
			onCancel () {
				console.log('取消');
			}
		});
	}
	delete = (id) => {
		axios.ajax({
			url: API_SYS_CMS.deleteBannerById,
			data: {
				id: id
			}
		}).then((res) => {
			Message.success('删除成功');
			this.getBanners();
		});
	}
	seeDetail = (id) => {
		this.props.history.push({pathname: `/home/permission/bannerManage/bannerDetail/${id}`});
	}
	update = (id) => {
		this.props.history.push({pathname: `/home/permission/bannerManage/bannerAdd/${id}`});
	}
	render () {
		const columns = [
			{title: '标题',dataIndex: 'title'},
			{title: '创建时间',dataIndex: 'createTime',render: (createTime) => {
				return Utils.formateDateToYMDSFM(createTime);
			}},
			{title: '更新时间',dataIndex: 'updateTime',render: (updateTime) => {
				return Utils.formateDateToYMDSFM(updateTime);
			}},
			{title: '地址',dataIndex: 'cover',width: 300, render: (cover) => {
				return Utils.formatTableColumn(cover);
			}},
			{title: '状态',dataIndex: 'state',render: (state) => {
				return {'1': '有效','2': '无效'}[state]
			}},
			{title: '操作', render: (key,record) => {
				const id = record.id;
				const title = record.title;
				return (
					<div>
						{
				            this.state.btnAuth.indexOf('banner-update') !== -1 ? 
				            <Button  onClick={this.update.bind(this,id)} style={{margin: '0 10px'}}>
				             	修改
				            </Button> : ''
			            }
				        {    
				            this.state.btnAuth.indexOf('banner-delete') !== -1 ?
				            <Button onClick={this.deleteConfirm.bind(this,id,title)}>删除</Button>
				            : ''
				        }
					</div>
				)
			}}
		]
		return (
			<div className="com-BannerManage">
				<WhiteBar title="图片管理" />
				<div style={{paddingLeft: 20}}>
					{
						this.state.btnAuth.indexOf('banner-add') !== -1 ?
						<Button>
							<Link to="/home/permission/bannerManage/bannerAdd">新增</Link>
						</Button>
						: ''
					}
				</div>
				<WhiteBar title="详细数据" />
				<div style={{background: '#fff',padding: 20}}>
					<Table
						dataSource={this.state.bannersData} 
						pagination={this.state.pagination}
						loading={this.state.isLoading}
						columns={columns}>
					</Table>
				</div>
			</div>
		)
	}
}