import React from 'react'; import { Icon, Button, Spin, message, Table, Input, Modal, DatePicker, Upload, Select, Pagination } from 'antd'; import { beforeUpload, getBase64 } from '../../../tools'; import moment from 'moment'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; const Avatar = React.createClass({ getInitialState() { return { imageUrl: '' } }, handleChange(info) { if (info.file.status === 'done') { // Get this url from response in real world. getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl })); this.props.urlData(info.file.response.data); } }, componentWillReceiveProps(nextProps) { if (this.props.visible && !nextProps.visible) { this.state.imageUrl = null; }; }, render() { const imageUrl = this.state.imageUrl; return ( <Upload className="avatar-uploader" name={this.props.name} showUploadList={false} action={globalConfig.context + "/api/admin/banners/upload"} data={{ 'sign': this.props.sign }} beforeUpload={beforeUpload} onChange={this.handleChange} > { (imageUrl || this.props.imageUrl) ? <img src={imageUrl || this.props.imageUrl} role="presentation" id={this.props.name} /> : <Icon type="plus" className="avatar-uploader-trigger" /> } </Upload> ); } }); const Lecture = React.createClass({ loadData(pageNo) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/banners/list', data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, key: this.state.searchKey }, 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, //主键 sign: thisdata.sign, // 位置标示 text: thisdata.text, //广告图描述 imgurl: thisdata.imgurl, //广告图url url: thisdata.url, //跳转链接 width: thisdata.width, //宽度 height: thisdata.height, //高度 startDate: thisdata.startDate, //广告图开始时间 endDate: thisdata.endDate //广告图结束时间 }); }; this.state.pagination.pageNo = pageNo || 1; this.state.pagination.total = data.data.total || 0; }; this.setState({ tableData: theArr, pagination: this.state.pagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, loadKeys() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", url: globalConfig.context + '/api/admin/banners/keys', success: function (data) { let theArr = []; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for (let item in data.data) { let thisdata = data.data[item]; theArr.push( <Select.Option value={item} key={item}>{thisdata}</Select.Option> ); }; }; this.setState({ keysOption: theArr, keysObj: data.data }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { loading: false, visible: false, selectedRowKeys: [], selectedRows: [], keysObj: {}, RowData: {}, pagination: { pageNo: 1, pageSize: 10, total: 0 }, columns: [ { title: '位置', dataIndex: 'sign', key: 'sign', render: text => { return this.state.keysObj[text] } }, { title: '广告图描述', dataIndex: 'text', key: 'text', }, { title: '广告图url', dataIndex: 'imgurl', key: 'imgurl', }, { title: '跳转链接', dataIndex: 'url', key: 'url', }, { title: '宽度', dataIndex: 'width', key: 'width', }, { title: '高度', dataIndex: 'height', key: 'height', }, { title: '开始时间', dataIndex: 'startDate', key: 'startDate', }, { title: '结束时间', dataIndex: 'endDate', key: 'endDate', } ], tableData: [] }; }, tableRowClick(record, index) { this.state.RowData = record; this.setState({ visible: true }); }, componentWillMount() { this.loadKeys(); this.loadData(); }, clearCache() { if (!this.state.searchKey) { message.warning('必须选择一个位置!'); return; }; this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/banners/clearCache', data: { key: this.state.searchKey // 位置标示,必填 }, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success('更新缓存成功!'); }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, submit() { if (!this.state.RowData.sign) { message.warning('必须选择一个位置!'); return; }; if (!this.state.RowData.imgurl) { message.warning('必须上传一张广告图!'); return; }; if (!this.state.RowData.url) { message.warning('必须填写跳转链接!'); return; }; this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/banners/save', data: { id: this.state.RowData.id || null, //主键,如果不填主键则为新增记录,填主键则为更新 sign: this.state.RowData.sign, // 位置标示,必填 text: this.state.RowData.text, //广告图描述,长度 255 imgurl: this.state.RowData.imgurl, //广告图url,必填,长度 255 url: this.state.RowData.url, //跳转链接,必填,长度255 width: this.state.RowData.width, //宽度,非必填,最大99999 height: this.state.RowData.height, //高度,非必填,最大99999 startDate: this.state.RowData.startDate, //广告图开始时间,非必填 endDate: this.state.RowData.endDate //广告图结束时间,非必填 }, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success('保存成功!'); this.setState({ visible: false }); this.loadData(); }; }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, delectRow() { if (this.state.selectedRows.length > 1) { return; }; this.setState({ selectedRowKeys: [], loading: this.state.selectedRows.length > 0 }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/banners/delete", data: { id: this.state.selectedRows[0].id } }).done(function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success('删除成功!'); }; this.setState({ loading: false, }); this.loadData(); }.bind(this)); }, reset() { this.state.searchKey = undefined; this.loadData(); }, render() { const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRows: selectedRows.slice(-1), selectedRowKeys: selectedRowKeys.slice(-1) }); } }; const hasSelected = this.state.selectedRowKeys.length > 0; const { pageNo, pageSize, total } = this.state.pagination; return ( <div className="admin-content" > <div className="admin-content-title">广告图管理</div> <div className="admin-content-warp"> <div className="admin-content-header">广告图列表</div> <div className="admin-content-search"> <Select placeholder="选择广告图位置" style={{ width: 200 }} value={this.state.searchKey} onChange={(e) => { this.setState({ searchKey: e }) }}> {this.state.keysOption} </Select> <Button type="primary" onClick={() => { this.loadData() }}>搜索</Button> <Button type="ghost" onClick={this.clearCache}>清除缓存</Button> <Button onClick={this.reset}>重置</Button> <Button type='danger' disabled={!hasSelected} onClick={this.delectRow}> 删除<Icon type="minus" /> </Button> <Button type="primary" style={{ float: 'right' }} onClick={() => { this.setState({ RowData: {}, visible: true }) }}> 添加<Icon type="plus" /> </Button> </div> <Spin spinning={this.state.loading}> <Table className="no-all-select" columns={this.state.columns} dataSource={this.state.tableData} pagination={false} rowSelection={rowSelection} onRowClick={this.tableRowClick} /> <div className="clearfix"> <Pagination style={{ marginTop: '10px', float: 'right' }} onChange={(e) => { this.loadData(e); }} total={total} showTotal={() => { return '共' + total + '条数据' }} current={pageNo} pageSize={pageSize} /> </div> </Spin> </div> <Modal title="广告图详情" width={1000} visible={this.state.visible} maskClosable={false} footer={null} afterClose={() => { this.state.RowData = {}; }} onCancel={() => { this.setState({ visible: false }) }} > <Spin spinning={this.state.loading}> <div className="modal-box"> <span className="modal-box-title">广告图位置</span> {this.state.RowData.id ? <div className="modal-box-detail"> {this.state.keysObj[this.state.RowData.sign]} </div> : <div className="modal-box-detail"> <Select placeholder="选择广告图位置" style={{ width: 200 }} value={this.state.RowData.sign} onChange={(e) => { this.state.RowData.sign = e; this.setState({ RowData: this.state.RowData }) }}> {this.state.keysOption} </Select> </div>} </div> <div className="modal-box"> <span className="modal-box-title">广告图描述</span> <div className="modal-box-detail"> <Input value={this.state.RowData.text} onChange={(e) => { this.state.RowData.text = e.target.value; this.setState({ RowData: this.state.RowData }); }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">跳转链接</span> <div className="modal-box-detail"> <Input value={this.state.RowData.url} onChange={(e) => { this.state.RowData.url = e.target.value; this.setState({ RowData: this.state.RowData }); }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">图片宽度</span> <div className="modal-box-detail"> <Input value={this.state.RowData.width} onChange={(e) => { this.state.RowData.width = e.target.value; this.setState({ RowData: this.state.RowData }); }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">图片高度</span> <div className="modal-box-detail"> <Input value={this.state.RowData.height} onChange={(e) => { this.state.RowData.height = e.target.value; this.setState({ RowData: this.state.RowData }); }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">广告图播放时间</span> <div className="modal-box-detail"> <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" value={this.state.RowData.startDate ? moment(this.state.RowData.startDate, "YYYY-MM-DD HH:mm:ss") : undefined} onChange={(t, str) => { this.state.RowData.startDate = str; this.setState({ RowData: this.state.RowData }); }} /> <span>到</span> <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" value={this.state.RowData.endDate ? moment(this.state.RowData.endDate, "YYYY-MM-DD HH:mm:ss") : undefined} onChange={(t, str) => { this.state.RowData.endDate = str; this.setState({ RowData: this.state.RowData }); }} /> </div> </div> <div className="modal-box"> <span className="modal-box-title">上传图片</span> <div className="modal-box-detail clearfix"> <Avatar sign={this.state.RowData.sign} id={this.state.RowData.id} imageUrl={this.state.RowData.imgurl ? (globalConfig.avatarHost + "/upload" + this.state.RowData.imgurl) : null} visible={this.state.visible} urlData={(url) => { this.state.RowData.imgurl = url }} /> </div> </div> <div className="modal-box"> <Button type="primary" onClick={this.submit}>提交</Button> <Button type="ghost" onClick={() => { this.setState({ visible: false }) }}>取消</Button> </div> </Spin> </Modal> </div> ); } }); export default Lecture;