import React from 'react'; import { Icon, Button, Spin, message, Table, Input, Modal, DatePicker, Upload, Select, Radio, Tabs } from 'antd'; import { beforeUpload, getBase64 } from '../../../tools'; import theme from 'react-quill/dist/quill.snow.css' import ReactQuill from 'react-quill' import moment from 'moment'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; var theThis = null; function uploadImg(s) { let myform = new FormData(), _me = s; myform.append('file', document.getElementById("fileToUpload").files[0]); myform.append('sign', 'news_content_picture'); $.ajax({ method: "post", dataType: "json", url: location.origin + "/api/admin/news/upload", data: myform, contentType: false, processData: false, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { let theUrl = data.data; const cursorPosition = theThis.quill.getSelection().index theThis.quill.insertText(cursorPosition, '') theThis.quill.setSelection(cursorPosition + 1) }; } }) } function fileSelect() { document.getElementById("fileToUpload").click(); theThis = this; } 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 ( { (imageUrl || this.props.imageUrl) ? : } ); } }); const News = React.createClass({ loadData(pageNo, theType) { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/news/list', data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, type: theType || this.props.newsType || 0, //新闻类型 title: this.state.searchTitle, author: this.state.searchAuthor, startCreateTime: this.state.startDate, //新闻开始时间 yyyy-MM-dd endCreateTime: this.state.endDate, //新闻结束时间 yyyy-MM-dd source: this.state.searchSource, hot: this.state.searchHot, //是否放在首页 }, 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, createTime: thisdata.createTime, editTime: thisdata.editTime, title: thisdata.title, titleImg: thisdata.titleImg, author: thisdata.author, type: thisdata.type, hot: thisdata.hot, source: thisdata.source, sourceUrl: thisdata.sourceUrl, summary: thisdata.summary, content: thisdata.content, createTimeFormattedDate: thisdata.createTimeFormattedDate, }); }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; }; this.setState({ tableData: theArr, pagination: this.state.pagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, loadDetailData() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/news/detail', data: { id: this.state.RowData.id //新闻主键ID(数字类型,非字符串) }, success: function (data) { let theObj = {}; if (!data.data) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; } else { theObj = data.data; }; this.setState({ RowData: theObj, }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { loading: false, visible: false, selectedRowKeys: [], selectedRows: [], keysObj: {}, RowData: {}, pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page); }.bind(this), showTotal: function (total) { return '共' + total + '条数据'; } }, columns: [ { title: '标题', dataIndex: 'title', key: 'title', width: '20%' }, { title: '发布时间', dataIndex: 'createTimeFormattedDate', key: 'createTimeFormattedDate', }, { title: '作者', dataIndex: 'author', key: 'author', }, { title: '来源', dataIndex: 'source', key: 'source', }, { title: '简介', dataIndex: 'summary', key: 'summary', width: '50%' } ], tableData: [] }; }, tableRowClick(record, index) { this.state.RowData = record; this.loadDetailData(); this.setState({ visible: true }); }, componentWillMount() { this.loadData(); }, componentWillReceiveProps(nextProps) { if (this.props.newsType != nextProps.newsType) { this.loadData(1, nextProps.newsType); }; }, handleRichText(value) { console.log(value); this.state.RowData.content = value; this.setState({ RowData: this.state.RowData }); }, submit() { if (!this.state.RowData.title) { message.warning('必须填写一个标题!'); return; }; if (!this.state.RowData.createTime) { message.warning('必须选择一个发布时间!'); return; }; if (!this.state.RowData.author) { message.warning('必须填写一个作者!'); return; }; this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + (this.state.RowData.id ? '/api/admin/news/update' : '/api/admin/news/add'), data: { id: this.state.RowData.id || null, //主键,如果不填主键则为新增记录,填主键则为更新 title: this.state.RowData.title, titleImg: this.state.RowData.titleImg, author: this.state.RowData.author, type: this.props.newsType, hot: this.state.RowData.hot, source: this.state.RowData.source, sourceUrl: this.state.RowData.sourceUrl, summary: this.state.RowData.summary, content: this.state.RowData.content, createTimeFormattedDate: this.state.RowData.createTimeFormattedDate, }, 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() { let deletedIds = []; for (let idx = 0; idx < this.state.selectedRows.length; idx++) { let rowItem = this.state.selectedRows[idx]; if (rowItem.id) { deletedIds.push(rowItem.id) }; }; this.setState({ selectedRowKeys: [], loading: deletedIds.length > 0 }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/news/delete", data: { ids: deletedIds } }).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 modules = { toolbar: { container: [ [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{ 'header': [1, 2, 3, false] }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], // toggled buttons // [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered' }, { 'list': 'bullet' }], // [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent // [{ 'direction': 'rtl' }], // text direction [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme // [{ 'font': [] }], [{ 'align': [] }], ['link', 'image'], ['clean'] ], handlers: { 'image': fileSelect } } }; const formats = [ 'size', 'header', 'bold', 'italic', 'underline', 'strike', 'blockquote', 'list', 'bullet', 'indent', 'color', 'background', 'align', 'link', 'image' ]; return (
科技快讯管理
科技快讯列表
{ this.setState({ searchTitle: e.target.value }); }} /> { this.setState({ searchAuthor: e.target.value }); }} /> { this.setState({ searchSource: e.target.value }); }} /> 发布时间 { this.setState({ startDate: str }); }} /> { this.setState({ endDate: str }); }} />
{ this.state.RowData = {}; this.state.activeKey = '1'; }} onCancel={() => { this.setState({ visible: false }) }} > { this.setState({ activeKey: e }) }}>
新闻标题
{ this.state.RowData.title = e.target.value; this.setState({ RowData: this.state.RowData }); }} />
标题图片
{ this.state.RowData.titleImg = url }} />
作者
{ this.state.RowData.author = e.target.value; this.setState({ RowData: this.state.RowData }); }} />
来源
{ this.state.RowData.source = e.target.value; this.setState({ RowData: this.state.RowData }); }} />
来源链接
{ this.state.RowData.sourceUrl = e.target.value; this.setState({ RowData: this.state.RowData }); }} />
发布时间
{ this.state.RowData.createTimeFormattedDate = str; this.setState({ RowData: this.state.RowData }); }} />
发布在首页
{ this.state.RowData.hot = e.target.value; this.setState({ RowData: this.state.RowData }); }} >
简介
{ this.state.RowData.summary = e.target.value; this.setState({ RowData: this.state.RowData }); }} />
{ uploadImg(modules.toolbar) }} />
); } }); export default News;