app-base-web
Version:
web development common base package.
533 lines (528 loc) • 23.1 kB
JavaScript
import React from 'react';
import { Table, Form, Row, Col, DatePicker, Button, Input, message } from 'antd';
import UtilDate from '../../../library/util-date';
import UtilDic from '../../../library/util-dic';
import File from '../../../library/file';
import Dic from '../../../library/dic';
import RadioGroup from '../../../library/radio-group';
import UtilModal from '../../../library/util-modal';
import Moment from '../../../library/moment';
import api from '../../../library/util-axios';
import ReactUeditor from 'react-ueditor'
// 信息管理-资讯发布
const title = "资讯发布";
const url = "IssueNews/";
export default class IssueNewsList extends React.Component {
constructor(props) {
super(props);
this.state = {
params: {},
data: [],
pagination: {},
loading: false,
selected: [],//Table checked
//显藏控制
showView: false,
showEdit: false,
//values
values: {},
};
this.columns = [{
title: "发布状态",
dataIndex: "state",
width: 100,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{UtilDic.json("app", "发布状态")[text]}</a>)
}, {
title: "类型",
dataIndex: "type",
width: 80,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{UtilDic.json("system", "newsType")[text]}</a>)
},
{
title: "子类型",
dataIndex: "subType",
width: 80,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
},
{
title: "标题",
dataIndex: "title",
width: 300,
render: (text, record) => (<a className="btn-detail" onClick={() => this.onView(record)}>{text}</a>)
},
{
title: "新闻时间",
dataIndex: "newsTime",
width: 100,
render: (text, record) => {
return UtilDate.getDateTime(text)
}
},
{
title: "责任编辑",
dataIndex: "editor",
width: 120
}];
}
componentDidMount() {
this.onLoad(this.state.params);
}
/*** Table ***/
async onLoad(params) {
this.setState({ loading: true });
let rs = await api.get(url + "getList", params);
let pagination = {
pageSizeOptions: ["20", "100", "200", "500", "1000"],
pageSize: params.pageSize || 20,
defaultPageSize: params.pageSize || 20,
showSizeChanger: true,
showQuickJumper: true,
total: rs.total,
showTotal: (total) => { return `总记录 ${total} ` }
};
this.setState({
loading: false,
showEdit: false,
params,
data: rs.data,
pagination
});
}
onChange = (pagination, filters, sorter) => {
let params = this.state.params;
params.pageSize = pagination.pageSize;
params.pageIndex = pagination.current;
this.onLoad(params);
}
onSearch = (value) => {
let params = this.state.params;
params.title = value;
this.onLoad(params);
}
onAdd = () => {
let values = {};
Object.keys(this.state.values).forEach(key => values[key] = undefined);
this.setState({
showView: false,
showEdit: true,
values
});
}
onView = (values) => {
this.setState({
showView: true,
loading: false,
values
});
}
onEdit = (values) => {
let me = this;
api.get(url + "getModel?id=" + values.id, {}, function (rs) {
me.setState({
showEdit: true,
showView: false,
values: rs.data
});
});
}
onSave = (values) => {
this.onLoad(this.state.params);
}
onDel = () => {
let me = this;
if (me.state.selected.length == 0) {
message.error('请选择记录！');
return;
}
UtilModal.confirm({
content: '确定删除？',
onOk: function () {
api.delete(url + "delete?id=" + me.state.selected).then(function (rs) {
if (rs.success) {
message.info(rs.msg);
me.onLoad(me.state.params || {});
} else { message.error(rs.msg); }
});
}
})
}
onAudit = (state) => {
let me = this;
if (me.state.selected.length == 0) {
message.error('请选择记录！');
return;
}
UtilModal.confirm({
title: '警告',
content: state == '2' ? '确定撤回发布？' : '确定发布？',
okText: '确认',
cancelText: '取消',
onOk: function () {
api.post(url + "setState?state=" + state + "&id=" + me.state.selected, {
}).then(function (rs) {
if (rs.success) {
message.info(rs.msg);
me.onLoad(me.state.params || {});
} else { message.error(rs.msg); }
});
}
});
}
render() {
var tableCfg = {
scroll: { y: this.props.height - 210 },
size: "middle",
rowKey: "id",
columns: this.columns,
rowSelection: {
selectedRowKeys: this.state.selected,
onChange: (selectedRowKeys, selectedRows) => {
this.setState({
selected: selectedRowKeys
});
}
},
rowClassName: (record) => { return record.id === this.state.selectedRowId ? 'row-selected' : ''; },
onRow: (record) => {
return {
onClick: event => {
this.setState({ selectedRowId: record.id });
}
}
},
dataSource: this.state.data,
pagination: this.state.pagination,
loading: this.state.loading,
onChange: this.onChange
}
return <div className="app-admin">
<div className={this.state.showView || this.state.showEdit ? "hide" : ""}>
<Row>
<Col className="main-title" ><i className="iconfont icon-title"></i>{title}</Col>
</Row>
<Row className="main-toolbar">
<Col className="text-left" xs={8}>
<Button type="primary" onClick={this.onAdd}><span className="iconfont icon-jiahao"></span><i>录入</i></Button>
<Button className="btn-del" onClick={this.onDel}><span className="iconfont icon-remove"></span><i>删除</i></Button>
<Button className="btn-pass" onClick={() => { this.onAudit(1); }}><span className="iconfont icon-insurencebg"></span><i>发布</i></Button>
<Button className="btn-revoke" onClick={() => { this.onAudit(2); }}><span className="iconfont icon-ViewOff"></span><i>撤回</i></Button>
</Col>
<Col className="text-right" style={{ paddingRight: "8px" }} xs={3} style={{ paddingRight: "8px" }}>
<Dic placeholder="请选择状态" style={{ width: "100%" }} params={{ app: "app", type: "发布状态" }} onChange={value => { let params = this.state.params; params.state = value; this.setState({ params }); this.onLoad(this.state.params); }} />
</Col>
<Col className="text-right" style={{ paddingRight: "8px" }} xs={3} style={{ paddingRight: "8px" }}>
<Dic placeholder="请选择类型" style={{ width: "100%" }} params={{ app: "system", type: "newsType" }} onChange={value => { let params = this.state.params; params.type = value; this.setState({ params }); this.onLoad(this.state.params); }} />
</Col>
<Col className="text-right" xs={3} style={{ paddingRight: "8px" }}>
<Input placeholder="请输入子类型" value={this.state.params.subType} onChange={event => { let params = this.state.params; params.subType = event.target.value; this.setState({ params }); }} />
</Col>
<Col className="text-right" xs={7}>
<Input.Search placeholder="请输入标题" onSearch={value => this.onSearch(value)} enterButton />
</Col>
</Row>
<Table {...tableCfg} />
</div>
{this.state.showView ? <FormView
height={this.props.height - 140}
values={this.state.values}
onEdit={this.onEdit}
onReturn={() => { this.setState({ showView: false }) }}
/> : ""}
{this.state.showEdit ? <FormEdit
height={this.props.height - 140}
values={this.state.values}
onSave={this.onSave}
onCancel={() => { this.setState({ showEdit: false }) }}
onEditReturn={() => { this.setState({ showEdit: false, showView: true }) }}
/> : ""}
</div>;
}
}
class FormView extends React.Component {
constructor(props) {
super(props);
this.state = {
...props.values
};
}
componentDidMount() {
let me = this;
api.get(url + "getModel?id=" + this.state.id, {}, function (rs) {
me.setState({
...rs.data
})
});
}
render() {
return (
<Form className="form-view">
<div className="form-title">
<i>{title} - 详情</i>
<span><Button className="btn-edit" onClick={(e) => { this.props.onEdit(this.state) }}><i className="iconfont icon-edit"></i>编辑</Button></span>
</div>
<div className="form-content" style={{ height: this.props.height }}>
<Row>
<Col xs={{ span: 10, offset: 2 }}><label>发布状态</label><span>{UtilDic.json("app", "发布状态")[this.state.state]}</span></Col>
</Row>
<Row>
<Col xs={{ span: 10, offset: 2 }}><label>类型</label><span>{UtilDic.json("system", "newsType")[this.state.type]}</span></Col>
<Col xs={{ span: 10, offset: 2 }}><label>子类型</label><span>{this.state.subType}</span></Col>
</Row>
<Row>
<Col xs={{ span: 22, offset: 2 }}><label>标题</label><span dangerouslySetInnerHTML={{ __html: this.state.title }}></span></Col>
</Row>
<Row>
<Col xs={{ span: 22, offset: 2 }}><label>封面Url</label><span><File fileList={this.state.coverUrl} hide="true" /></span></Col>
</Row>
<Row>
<Col xs={{ span: 22, offset: 2 }}><label>摘要</label><span>{this.state.summary}</span></Col>
</Row>
<Row>
<Col xs={{ span: 22, offset: 2 }}><label>内容</label>
<div dangerouslySetInnerHTML={{ __html: this.state.content }} ></div>
</Col>
</Row>
<Row>
<Col xs={{ span: 10, offset: 2 }}><label>新闻时间</label><span>{UtilDate.getDate(this.state.newsTime)}</span></Col>
<Col xs={{ span: 10, offset: 2 }}><label>责任编辑</label><span>{this.state.editor}</span></Col>
</Row>
<Row>
<Col xs={{ span: 10, offset: 2 }}><label>来源</label><span>{this.state.source}</span></Col>
<Col xs={{ span: 10, offset: 2 }}><label>标志</label><span>{this.state.mark}</span></Col>
</Row>
<Row>
<Col xs={{ span: 22, offset: 2 }}><label>附件列表</label><span><File fileList={this.state.files} hide="true" /></span></Col>
</Row>
<Row>
<Col xs={{ span: 22, offset: 2 }}><label>网址</label><span>{this.state.url}</span></Col>
</Row>
<Row>
<Col xs={{ span: 10, offset: 2 }}><label>收藏数</label><span>{this.state.cntFavorite}</span></Col>
<Col xs={{ span: 10, offset: 2 }}><label>分享数</label><span>{this.state.cntShare}</span></Col>
</Row>
<Row>
<Col xs={{ span: 10, offset: 2 }}><label>点击数</label><span>{this.state.cntClick}</span></Col>
<Col xs={{ span: 10, offset: 2 }}><label>评论数</label><span>{this.state.cntComment}</span></Col>
</Row>
</div>
<div className="form-toolbar">
<Button className="btn-return" onClick={this.props.onReturn}><i className="iconfont icon-return"></i>返回</Button>
</div>
</Form>
);
}
}
class FormEdit extends React.Component {
constructor(props) {
super(props);
this.state = {
...props.values
};
this.formRef = React.createRef();
}
onSave = (values) => {
let me = this;
values.id = this.state.id;
api.post(url + "save", values).then(function (rs) {
if (rs.success) {
message.info(rs.msg);
me.props.onSave(values);
} else { message.error(rs.msg); }
});
}
onChangeUeContent = (value) => {
this.state.content = value;
}
onChangeUeImage = (e) => {
return new Promise(function (resolve, reject) {
let file = e.target.files[0]
// 在这里将你的图片上传到服务器，在上传成功的回调中执行
const formData = new FormData()
formData.append('file', file)
fetch("https://fastdfs.7ipr.com/ipr/fastdfs/upload", {
method: "POST",
body: formData,
}).then(res => res.json()).then(function (response) {
let url = response.data;
resolve(url)
});
})
}
render() {
return (
<Form ref={this.formRef} className="form-edit" layout="vertical" onFinish={this.onSave}>
<div className="form-title">
<i> {title} - {this.state.id ? "编辑" : "录入"}</i>
{this.state.id ? <span><Button className="btn-return" onClick={this.props.onEditReturn}><i className="iconfont icon-return"></i>返回</Button></span> : ""}
</div>
<div className="form-content" style={{ height: this.props.height }}>
<Row>
<Col xs={24}>
<Form.Item
labelCol={{ span: 3 }}
wrapperCol={{ span: 21 }}
name="state"
label="发布状态"
initialValue={this.state.state}
>
<RadioGroup type="button" dic={{ app: "app", type: "发布状态" }} />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={12}>
<Form.Item
name="type"
label="类型"
initialValue={this.state.type}
rules={[{
required: true,
message: '请输入类型'
}]} >
<Dic params={{ app: "system", type: "newsType" }} />
</Form.Item>
</Col>
<Col xs={12}>
<Form.Item
name="subType"
label="子类型"
initialValue={this.state.subType}>
<Input />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={24}>
<Form.Item
labelCol={{ span: 3 }}
wrapperCol={{ span: 21 }}
name="title"
label="标题"
initialValue={this.state.title}
rules={[{
required: true,
message: '请输入标题'
}]}
>
<Input />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={24}>
<Form.Item
labelCol={{ span: 3 }}
wrapperCol={{ span: 21 }}
name="coverUrl"
label="封面Url"
valuePropName="fileList"
initialValue={this.state.coverUrl}
>
<File onChange={(fileList) => { this.setState({ coverUrl: fileList }); }} serverPath={api.serverPath} />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={24}>
<Form.Item
labelCol={{ span: 3 }}
wrapperCol={{ span: 21 }}
name="summary"
label="摘要"
initialValue={this.state.summary}
>
<Input.TextArea />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={24}>
<Form.Item
label="内容"
labelCol={{ span: 3 }}
wrapperCol={{ span: 21 }}
>
<ReactUeditor
//https://www.npmjs.com/package/react-ueditor
ueditorPath="/static/ueditor"
config={{ zIndex: 900 }}
onChange={this.onChangeUeContent}
plugins={['uploadImage', 'insertCode']}
uploadImage={this.onChangeUeImage}
value={this.state.content}
/>
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={12}>
<Form.Item
name="newsTime"
label="新闻时间"
initialValue={Moment(this.state.newsTime)}>
<DatePicker format="YYYY-MM-DD" />
</Form.Item>
</Col>
<Col xs={12}>
<Form.Item
name="editor"
label="责任编辑"
initialValue={this.state.editor}>
<Input />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={12}>
<Form.Item
name="source"
label="来源"
initialValue={this.state.source} >
<Input />
</Form.Item>
</Col>
<Col xs={12}>
<Form.Item
name="mark"
label="标志"
initialValue={this.state.mark}>
<Input />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={24}>
<Form.Item
labelCol={{ span: 3 }}
wrapperCol={{ span: 21 }}
name="files"
label="附件列表"
initialValue={this.state.files}
valuePropName="fileList"
>
<File />
</Form.Item>
</Col>
</Row>
<Row>
<Col xs={24}>
<Form.Item
labelCol={{ span: 3 }}
wrapperCol={{ span: 21 }}
name="url"
label="网址"
initialValue={this.state.url}
>
<Input />
</Form.Item>
</Col>
</Row>
</div>
<div className="form-toolbar">
<Button className="btn-cancel" onClick={this.props.onCancel}><i className="iconfont icon-cancel"></i>取消</Button>
<Button className="btn-submit" htmlType="submit"><i className="iconfont icon-submit"></i>提交</Button>
</div>
</Form >
);
}
}