/**
|
* 柯礼钦<kelq@hugeinfo.com.cn>
|
* 2018年9月4日 16:00
|
*
|
*/
|
|
import React from "react";
|
import { Input, Button, message, Breadcrumb } from "antd";
|
import moment from "moment";
|
import BusDetailView from "../view/BusDetailView";
|
import LineView from "../view/LineView";
|
import HeadView from "../view/HeadView";
|
import Fetch from "../fetch";
|
import {domain} from "../fetch/_fetch";
|
const { TextArea } = Input;
|
const replyAdmin = {
|
display: 'block',
|
float: 'left',
|
color: 'green',
|
}
|
|
const replyUser = {
|
display: 'block',
|
float: 'left',
|
color: '#1790ff'
|
}
|
|
const timeUser = {
|
display: 'block',
|
color: '#1790ff'
|
}
|
|
const timeAdmin = {
|
display: 'block',
|
color: 'green'
|
}
|
|
export default class BusDetail extends React.Component {
|
constructor(props) {
|
super(props);
|
this.state = {
|
savedate: {},
|
detail: {},
|
data: {}
|
};
|
}
|
|
componentDidMount() {
|
const { id } = this.props.match.params;
|
Fetch.getTipoffDetail(id).then(data => {
|
console.log('data', data);
|
this.setState({
|
detail: data,
|
savedate: {
|
id: id
|
}
|
})
|
})
|
}
|
|
goBack = () => {
|
this.props.history.goBack();
|
};
|
|
|
onInputChange = ({ target: { value, name } }) => {
|
this.setState(({ savedate }) => ({
|
savedate: {
|
...savedate,
|
[name]: value
|
}
|
}))
|
}
|
|
submitAudit = () => {
|
|
const { savedate } = this.state;
|
console.log(savedate);
|
if (!savedate.result) {
|
message.warning("请填写回复内容");
|
return;
|
}
|
|
Fetch.tipoffReply(savedate).then(res => {
|
if (res.code === 0) {
|
message.success("回复成功", 2, () => {
|
this.props.history.goBack();
|
});
|
} else {
|
message.error("回复失败，请联系管理员", 2);
|
}
|
});
|
};
|
|
render() {
|
|
// 居中样式
|
const center = {
|
display: "flex",
|
alignItems: "center",
|
justifyContent: "center"
|
};
|
const { detail, data } = this.state;
|
const { flag } = this.props.match.params;
|
return (
|
<div className="app-page">
|
<HeadView history={this.props.history} />
|
<Breadcrumb style={{ padding: '20px' }}>
|
<Breadcrumb.Item><a href="">后台中心</a></Breadcrumb.Item>
|
<Breadcrumb.Item>未检举报</Breadcrumb.Item>
|
</Breadcrumb>
|
<BusDetailView>
|
<div>
|
<LineView title="举报信息" style="14vh" lineHeight="34px">
|
<table>
|
<tbody>
|
<tr>
|
<td className="table-vaule1">举报对象</td>
|
<td className="table-vaule2">{detail.tipoffObject}</td>
|
<td className="table-vaule1">发生地</td>
|
<td className="table-vaule2">{detail.tipoffAddress}</td>
|
</tr>
|
<tr>
|
<td className="table-vaule3">举报类型</td>
|
<td className="table-vaule4">{businessType(detail.tipoffType)}</td>
|
</tr>
|
|
<tr>
|
<td className="table-vaule1">具体事项</td>
|
<td className="table-vaule2">{detail.tipoffContent}</td>
|
</tr>
|
</tbody>
|
</table>
|
</LineView>
|
|
<LineView title="举报人信息" style="14vh" lineHeight="34px">
|
<table>
|
<tbody>
|
<tr>
|
<td className="table-vaule1">姓名</td>
|
<td className="table-vaule2">{detail.createrName}</td>
|
<td className="table-vaule3">手机号码</td>
|
<td className="table-vaule4">{detail.createrMobile}</td>
|
</tr>
|
<tr>
|
<td className="table-vaule1">联系地址</td>
|
<td className="table-vaule2">{detail.createrAddress}</td>
|
</tr>
|
</tbody>
|
</table>
|
</LineView>
|
|
</div>
|
<LineView title="相关材料" style="14vh">
|
<div className="apply-img-div">
|
{detail.attachmentList
|
? detail.attachmentList.map((data, key) => (
|
(
|
data.type != 21 ?
|
< div style={{ marginRight: "10px" }} key={key}>
|
<a href={domain + 'api/v1/attachment/image/'+data.id} target='_black'> <img src={domain + 'api/v1/attachment/image/'+data.id} width='70' height='70' /></a>
|
</div>
|
: < div style={{ marginRight: "10px" }} key={key}>
|
<a href={domain + 'api/v1/attachment/image/'+data.id} target='_black'><video src={domain + 'api/v1/attachment/image/'+data.id} width='70' height='70'></video></a>
|
</div>
|
)
|
))
|
: null}
|
</div>
|
</LineView>
|
{
|
data.ReplyLogs ?
|
<LineView title="回复记录" style="15vh">
|
{data.ReplyLogs.map((contacts, key) => (
|
<div style={{ width: '100%', height: '70px' }} key={key}>
|
{contacts.userType === 1 ?
|
<React.Fragment>
|
<div style={timeUser} >{contacts.replyerName}:{moment(contacts.createTime).format('YYYY/MM/DD HH:mm:ss')}</div>
|
<div style={replyUser}>{contacts.content}</div>
|
</React.Fragment>
|
:
|
<React.Fragment>
|
<div style={timeAdmin} > {contacts.replyerName}:{moment(contacts.createTime).format('YYYY/MM/DD HH:mm:ss')}</div>
|
<div style={replyAdmin}>{contacts.content}</div>
|
</React.Fragment>
|
}
|
|
</div>
|
))}
|
</LineView>
|
: null}
|
{
|
flag == "do" ?
|
(detail.status == 1 ? (
|
<LineView title="回复" lineHeight="50px">
|
<table>
|
<tbody>
|
<tr>
|
<td>回复内容</td>
|
<td>
|
<TextArea
|
placeholder="请输入回复内容"
|
autosize={{ minRows: 2, maxRows: 6 }}
|
onChange={({ target: { value } }) => this.onInputChange({ target: { name: 'result', value } })}
|
/>
|
</td>
|
</tr>
|
</tbody>
|
</table>
|
<div>
|
<Button
|
type="primary"
|
className="app-btn"
|
onClick={this.submitAudit}
|
>
|
提交回复
|
</Button>
|
<Button className="app-btn" onClick={this.goBack}>
|
返回
|
</Button>
|
</div>
|
</LineView>
|
) : <div style={{ textAlign: 'center' }}><Button className="app-btn" onClick={this.goBack}>返回</Button></div>
|
) : <div style={{ textAlign: 'center' }}><Button className="app-btn" onClick={this.goBack}>返回</Button></div>}
|
</BusDetailView>
|
</div>
|
);
|
}
|
}
|
|
function renderStatus(status) {
|
switch (status) {
|
case 1:
|
return <Badge count={'待处理'} style={{ background: '#f50' }} />
|
case 2:
|
return <Badge count={'已完成'} style={{ background: '#87d068' }} />
|
default:
|
return '暂无'
|
}
|
}
|
|
function businessType(type) {
|
switch (type) {
|
case 1:
|
return '未检举报';
|
case 2:
|
return '知识产权举报';
|
case 3:
|
return '暂无';
|
}
|
}
|
