import React from 'react'; import '../../leftTab.less'; import ReactDom from 'react-dom'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import Editors from '../../../richTextEditors' import '../content.less'; import moment from 'moment'; import { citySelect,provinceList,areaSelect,provinceSelect,addressList} from '../../../NewDicProvinceList'; import { Form,Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload,Popconfirm,AutoComplete,Tabs,Checkbox,Tree,Cascader} from 'antd'; import {patternOrganization,conditionOrganization,intentionalService,messageType,designatedObjects,socialAttributeS,industry,socialAttribute,industryS,designatedObjectse,auditStatusL} from '../../../dataDic.js'; import { beforeUpload, getBase64, getprovince, getauditStatus, ShowModal } from "../../../tools.js"; const TabPane = Tabs.TabPane; const TreeNodet = Tree.TreeNode; const CheckboxGroup = Checkbox.Group; import ShowModalDiv from "@/showModal.jsx"; 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/news/upload"} data={{ 'sign': 'news_title_picture' }} 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 Inquiry=React.createClass({ loadData(pageNo, theType) { this.setState({ loading: true, ispage:pageNo, }); $.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 || 1, //新闻类型 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) { ShowModal(this); 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 ? thisdata.id.toString() : null, 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, auditStatus:thisdata.auditStatus, }); }; 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; if(theObj.provinceId==null||theObj.provinceId==''){ theObj.provinceId=11 } }; this.setState({ RowData: theObj, }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { loading: false, visible: false, callnub:'1', selectedRowKeys: [], selectedRows: [], keysObj: {}, RowData: {}, pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function (page) { this.loadData(page,this.state.callnub); }.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: 'auditStatus', key: 'auditStatus', render: text => { return getauditStatus(text) } }, { title: '来源', dataIndex: 'source', key: 'source', }, { title: '简介', dataIndex: 'summary', key: 'summary', width: '50%' } ], list:provinceList, tableData: [] }; }, tableRowClick(record, index) { this.state.RowData = record; this.loadDetailData(); this.setState({ visible: true }); }, componentWillMount() { this.loadData(1,1); }, componentWillReceiveProps(nextProps) { if (this.props.newsType != nextProps.newsType) { this.state.searchTitle = undefined; this.state.searchAuthor = undefined; this.state.startDate = undefined; this.state.endDate = undefined; this.state.searchSource = undefined; this.state.searchHot = undefined; this.loadData(1, nextProps.newsType); }; }, callback(e) { this.setState({ callnub: e, }) if(e == 1) { this.setState({ }) this.reset(); this.loadData(1,1); } if(e == 2) { this.setState({ }) this.reset(); this.loadData(1,2); } if(e == 3) { this.setState({ }) this.reset(); this.loadData(1,3); } if(e == 4) { this.setState({ }) this.reset(); this.loadData(1,4); } if(e == 5) { this.setState({ }) this.reset(); this.loadData(1,5); } }, submit() { if (!this.state.RowData.title) { message.warning('必须填写一个标题!'); return; }; if (!this.state.RowData.createTimeFormattedDate) { 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.state.callnub, hot: this.state.RowData.hot || 0, 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, provinceId: this.state.RowData.provinceId, }, success: function (data) { if (data.error && data.error.length) { message.warning(data.error[0].message); } else { message.success('保存成功!'); this.setState({ visible: false }); this.loadData(this.state.ispage,this.state.callnub); }; }.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(this.state.ispage,this.state.callnub); }.bind(this)); }, reset() { this.state.searchTitle = undefined; this.state.searchAuthor = undefined; this.state.startDate = undefined; this.state.endDate = undefined; this.state.searchSource = undefined; this.state.searchHot = undefined; }, cleanCache(sign) { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/news/cleanCache', data: { 'cacheKey': sign }, 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)); }, 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)); }, 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; return ( <div className="admin-content"> <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} /> <div className="admin-content-search"> <Input placeholder="标题" style={{ width: 200, marginBottom: "10px", marginRight: "10px" }} value={this.state.searchTitle} onChange={e => { this.setState({ searchTitle: e.target.value }); }} /> <Input placeholder="作者" style={{ width: 100, marginRight: "10px" }} value={this.state.searchAuthor} onChange={e => { this.setState({ searchAuthor: e.target.value }); }} /> <Input placeholder="来源" style={{ width: 100, marginRight: "10px" }} value={this.state.searchSource} onChange={e => { this.setState({ searchSource: e.target.value }); }} /> {this.props.newsType == 2 || this.props.newsType == 3 ? ( <Select placeholder="显示在首页" style={{ width: 100, marginRight: "10px" }} value={this.state.searchHot} onChange={e => { this.setState({ searchHot: e }); }} > <Select.Option value="0">不显示</Select.Option> <Select.Option value="1">显示</Select.Option> </Select> ) : ( <span></span> )} <span style={{ marginRight: "10px" }}>发布时间</span> <DatePicker style={{ width: 110, marginRight: "10px" }} format="YYYY-MM-DD" placeholder="选择开始时间" value={ this.state.startDate ? moment(this.state.startDate, "YYYY-MM-DD") : undefined } onChange={(t, str) => { this.setState({ startDate: str }); }} /> <span style={{ marginRight: "10px" }}>到</span> <DatePicker style={{ width: 110, marginRight: "10px" }} format="YYYY-MM-DD" placeholder="选择结束时间" value={ this.state.endDate ? moment(this.state.endDate, "YYYY-MM-DD") : undefined } onChange={(t, str) => { this.setState({ endDate: str }); }} /> <Button type="primary" onClick={() => { this.loadData(1, this.state.callnub); }} style={{ marginRight: "10px" }} > 搜索 </Button> <Button onClick={this.reset} style={{ marginRight: "10px" }}> 重置 </Button> <Button type="ghost" onClick={this.clearCache}> 清除缓存 </Button> </div> <div className="clearfix" style={{ marginLeft: "20px" }}> <Tabs onChange={this.callback} type="card" activeKey={this.state.callnub} style={{ paddingLeft: "15px", paddingRight: "15px", marginRight: "20px" }} > <TabPane tab="科技快讯" key="1"></TabPane> <TabPane tab="交易问题" key="2"></TabPane> <TabPane tab="技淘动态" key="3"></TabPane> <TabPane tab="国家政策" key="4"></TabPane> <TabPane tab="地方政策" key="5"></TabPane> </Tabs> </div> <Spin spinning={this.state.loading}> <Table size="middle" className="no-all-select" columns={this.state.columns} dataSource={this.state.tableData} pagination={this.state.pagination} rowSelection={rowSelection} style={{ cursor: 'pointer', }} onRowClick={this.tableRowClick} /> </Spin> <Modal title="新闻详情" width={1000} className="news-modal" visible={this.state.visible} maskClosable={false} footer={null} afterClose={() => { this.state.RowData = {}; }} onCancel={() => { this.setState({ visible: false }); }} > <Spin spinning={this.state.loading}> <div className="clearfix"> <div className="modal-box"> <span className="modal-box-title">新闻标题 : </span> <div className="modal-box-detail"> <span>{this.state.RowData.title}</span> </div> </div> <div className="modal-box"> <span className="modal-box-title">简介 : </span> <div className="modal-box-detail"> <span>{this.state.RowData.summary}</span> </div> </div> <div className="modal-box"> <span className="modal-box-title">来源:</span> <div className="modal-box-detail"> <span>{this.state.RowData.source}</span> </div> </div> <div className="modal-box"> <span className="modal-box-title">来源链接 : </span> <div className="modal-box-detail"> <span>{this.state.RowData.sourceUrl}</span> </div> </div> <div className="modal-box" style={{ position: "absolute", right: "0", width: "480px" }} > <span className="modal-box-title">标题图片</span> <div className="modal-box-detail clearfix" style={{ width: "360px" }} > <Avatar sign={"news_title_picture"} visible={this.state.visible} imageUrl={ this.state.RowData.titleImg ? globalConfig.avatarHost + "/upload" + this.state.RowData.titleImg : null } urlData={url => { this.state.RowData.titleImg = url; }} /> </div> </div> </div> <div className="clearfix"> <div className="modal-box news-box"> <span className="modal-box-title">作者 : </span> <div className="modal-box-detail"> <span>{this.state.RowData.author}</span> </div> </div> <div className="modal-box news-box"> <span className="modal-box-title">发布时间 : </span> <div className="modal-box-detail"> <span>{this.state.RowData.createTimeFormattedDate}</span> </div> </div> {this.props.newsType == 2 || this.props.newsType == 3 ? ( <div className="modal-box news-box"> <span className="modal-box-title">发布在首页</span> <div className="modal-box-detail"> <Radio.Group value={this.state.RowData.hot} onChange={e => { this.state.RowData.hot = e.target.value; this.setState({ RowData: this.state.RowData }); }} > <Radio value={0}>否</Radio> <Radio value={1}>是</Radio> </Radio.Group> </div> </div> ) : ( <div></div> )} </div> <div className="modal-box"> <span className="modal-box-title">选择省份 : </span> <span>{getprovince(this.state.RowData.provinceId)}</span> </div> <Editors textContent={this.state.RowData.content} uploadUrl={"/api/admin/news/upload"} uploadSign={"news_content_picture"} handleRichText={value => { this.state.RowData.content = value; }} visible={this.state.visible} readonly /> </Spin> </Modal> </div> ); } }) export default Inquiry;