/**
|
* 徐祥健<xuxj@hugeinfo.com.cn>
|
* 2018年8月28日 10:41
|
*
|
*/
|
|
|
import React from 'react';
|
|
import HeadView from '../view/HeadView';
|
import TableBtnView from '../view/TableBtnView';
|
import { Input, Button, DatePicker, Divider, Modal, message, Select, Badge } from 'antd'
|
import moment from 'moment'
|
import Fetch from '../fetch';
|
import TableView from '../view/TableView';
|
const confirm = Modal.confirm;
|
const Option = Select.Option;
|
function subStr(str, len) {
|
str = str.replace(/<\/?.+?>/g, "");
|
str = str.replace(/ /g, "");
|
if (str.length > len) {
|
return str.substr(0, len) + '......';
|
} else {
|
return str;
|
}
|
}
|
function status(status) {
|
switch (status) {
|
case 1:
|
return '待发布';
|
case 2:
|
return '已发布'
|
}
|
}
|
export default class SupPerson extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
data: [],
|
dateSource: [],
|
formdata: {},
|
resetKey: Date.now()
|
};
|
}
|
|
componentDidMount() {
|
document.title = '信息公布';
|
this.getData();
|
}
|
getData = () => {
|
const { formdata } = this.state;
|
Fetch.getArticleList(formdata)
|
.then(res => {
|
for (var i = 0; i < res.rows.length; i++) {
|
res.rows[i]['index'] = i + 1;
|
}
|
this.setState({
|
data: res.rows,
|
dateSource: res.channels
|
});
|
});
|
}
|
onInputChange = ({ target: { value, name } }) => {
|
this.setState(({ formdata }) => ({
|
formdata: {
|
...formdata,
|
[name]: value
|
}
|
}))
|
}
|
Seaech = () => {
|
const { formdata } = this.state;
|
Fetch.getArticleList(formdata)
|
.then(res => {
|
for (var i = 0; i < res.rows.length; i++) {
|
res.rows[i]['index'] = i + 1;
|
}
|
this.setState({
|
data: res.rows,
|
dateSource: res.channels
|
});
|
});
|
}
|
Reset = () => {
|
this.setState({
|
resetKey: Date.now(),
|
formdata: {}
|
}, this.getData);
|
}
|
goEdit = (id) => {
|
this.props.history.push("/articleEidt/" + id);
|
}
|
pulish = (id, status, action) => {
|
confirm({
|
title: '确认要' + action + '这篇信息吗?',
|
onOk: () => {
|
Fetch.publishArticle(id, status)
|
.then(data => {
|
if (data.statuscode == 1) {
|
message.success(action + "成功！")
|
this.setState({
|
resetKey: Date.now(),
|
formdata: {}
|
}, this.getData);
|
} else {
|
message.error(action + '失败，请联系管理员', 2)
|
}
|
})
|
}
|
});
|
}
|
deleteItems = (id) => {
|
confirm({
|
title: '确认要删除这条数据吗?',
|
onOk: () => {
|
Fetch.deleteArticle(id)
|
.then(data => {
|
if (data.statuscode == 1) {
|
message.success("删除成功！")
|
this.setState({
|
resetKey: Date.now(),
|
formdata: {}
|
}, this.getData);
|
} else {
|
message.error('删除失败，请联系管理员', 2)
|
}
|
})
|
}
|
});
|
}
|
render() {
|
const columns = [{
|
title: '序号',
|
dataIndex: 'index',
|
key: 'index'
|
}, {
|
title: '标题',
|
dataIndex: 'title',
|
key: 'title',
|
render: text => <span>{text?subStr(text, 20):'暂无'}</span>
|
}, {
|
title: '信息类型',
|
dataIndex: 'channelName',
|
key: 'channelName',
|
render: text => <span>{text||'暂无'}</span>
|
}, {
|
title: '信息内容',
|
dataIndex: 'content',
|
key: 'content',
|
render: text => <span>{text?subStr(text, 40):'暂无'}</span>
|
}, {
|
title: '操作人',
|
dataIndex: 'author',
|
key: 'author',
|
}, {
|
title: '状态',
|
dataIndex: 'status',
|
key: 'status',
|
render: text => text === 1 ?
|
<Badge count={status(text)} />
|
:
|
<Badge count={status(text)} style={{ backgroundColor: '#52c41a' }} />
|
}, {
|
title: '阅读数',
|
dataIndex: 'readCount',
|
key: 'readCount',
|
}, {
|
title: '发布时间',
|
dataIndex: 'publishTime',
|
key: 'publishTime',
|
render: text => <span>{moment(text).format("YYYY-MM-DD")}</span>
|
}, {
|
title: '创建时间',
|
dataIndex: 'createTime',
|
key: 'createTime',
|
render: text => <span>{moment(text).format("YYYY-MM-DD HH:mm")}</span>
|
}, {
|
title: '操作',
|
key: 'action',
|
render: (text, record) => (
|
<span>
|
<label className='theme-color' onClick={() => this.goEdit(record.id)} style={{ cursor: 'pointer' }}>编辑</label>
|
<Divider type="vertical" />
|
{record.status === 1 ? <label className='theme-color' onClick={() => this.pulish(record.id, 2, '发布')} style={{ cursor: 'pointer' }}>发布</label>
|
: <label className='theme-color' onClick={() => this.pulish(record.id, 1, '撤销')} style={{ cursor: 'pointer' }}>撤销</label>}
|
<Divider type="vertical" />
|
<label className='theme-color' onClick={() => this.deleteItems(record.id)} style={{ cursor: 'pointer' }}>删除</label>
|
</span>
|
),
|
}];
|
const { data, resetKey, dateSource } = this.state;
|
return (
|
|
<div className="app-page">
|
<HeadView history={this.props.history} />
|
<TableBtnView key={resetKey} type="infoManage" name='信息公布' btnName='新建信息' onClick={() => this.goEdit('new')}>
|
<Input placeholder="根据标题模糊查询" style={{ width: "200px" }} name='title' onChange={this.onInputChange} />
|
<Select placeholder="根据类型查询" style={{ width: "200px" }} onChange={(value) => this.onInputChange({ target: { name: 'channelIdd', value } })}>
|
{
|
dateSource.map((data, key) => (
|
<Option key={key} value={data.id}>{data.channelName}</Option>
|
))
|
}
|
</Select>
|
<Input placeholder="根据操作人模糊查询" style={{ width: "200px" }} name='author' onChange={this.onInputChange} />
|
<Select placeholder="根据状态查询" style={{ width: "200px" }} onChange={(value) => this.onInputChange({ target: { name: 'status', value } })}>
|
<Option value='1'>未发布</Option>
|
<Option value='2'>已发布</Option>
|
</Select>
|
<DatePicker onChange={(_, value) => this.onInputChange({ target: { name: 'createTime', value } })} placeholder="根据创建时间查询" />
|
<Button type="primary" onClick={this.Seaech}>查询</Button>
|
<Button onClick={this.Reset}>重置</Button>
|
</TableBtnView>
|
<TableView columns={columns} data={data} pageSize='10' size='default' />
|
</div>
|
);
|
}
|
|
}
|
