未检举报列表、详情、以及回复

LAPTOP-RI7D261L\Mr Ke

2020-03-09 9ed9a0363f9f1ef22d143ab9f529ae161cc1afc4

未检举报列表、详情、以及回复

 SunshineIns/src/data/menu.js

@@ -105,6 +105,13 @@
  path: '/underAgeList'
},
{
  id: 'noInspectionReportList',
  name: '未检举报',
  icon: active,
  iconCheck: activeCheck,
  path: '/noInspectionReportList'
},
{
  id: 'questionnaire',
  name: '问卷管理部分',
  icon: msgManage,

 SunshineIns/src/fetch/getTipoffDetail.js

New file
@@ -0,0 +1,9 @@
import fetch from './_fetch';
import { message } from 'antd';
export default (id) => fetch(`api/tipoff/find?id=${id}`)
    .then(
        json => json
    )
    .catch(
        error => message.error('信息加载失败，请联系管理员', 2)
    );

 SunshineIns/src/fetch/index.js

@@ -90,6 +90,9 @@
import socialCompanySave from './socialCompanySave';
import socialCompanyDetail from './socialCompanyDetail';
import socialCompanydelete from './socialCompanydelete';
import tipoffQuery from './tipoffQuery';
import getTipoffDetail from './getTipoffDetail';
import tipoffReply from './tipoffReply';

export default {
  domain,
@@ -183,5 +186,8 @@
  socialCompany,
  socialCompanySave,
  socialCompanyDetail,
  socialCompanydelete
  socialCompanydelete,
  tipoffQuery,
  getTipoffDetail,
  tipoffReply
};

 SunshineIns/src/fetch/tipoffQuery.js

New file
@@ -0,0 +1,6 @@
import fetch from './_fetch';
import { message } from 'antd';
export default ({ page, size }) =>
  fetch(`api/tipoff/query?rows=${size}&page=${page}`)
    .then(json => json)
    .catch(error => message.error('详情加载失败，请联系管理员', 2));

 SunshineIns/src/fetch/tipoffReply.js

New file
@@ -0,0 +1,11 @@
import fetch from './_fetch';
export default data =>
  fetch(
    `api/tipoff/reply` +
      '?' +
      Object.entries(data)
        .map(([k, v]) => `${k}=${v}`)
        .join('&')
  )
    .then(json => json)
    .catch(error => message.error('信息加载失败，请联系管理员', 2));

 SunshineIns/src/index.jsx

@@ -44,6 +44,9 @@
import SignIn from './page/SignIn';
import QuestionDetail from './page/QuestionDetail';

import NoInspectionReportList from './page/NoInspectionReportList';
import NoInspectionReportDetail from './page/NoInspectionReportDetail';

import PoliceSecurity from './page/PoliceSecurity';
import policeSecurityEdit from './page/policeSecurityEdit';

@@ -111,6 +114,12 @@

          {/* 签到墙 */}
          <Route path='/signIn/:id' component={SignIn} />

          {/* 未检举报(列表、详情) */}
          <Route path='/noInspectionReportList' component={NoInspectionReportList} />
          <Route path='/noInspectionReportDetail/:id/:flag' component={NoInspectionReportDetail} />


          
          <Route path='/' component={Index} />
        </Switch>

 SunshineIns/src/page/NoInspectionReportDetail.jsx

New file
@@ -0,0 +1,252 @@
/**
 * 柯礼钦<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";
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-vaule3">举报行为</td>
                    <td className="table-vaule4">{detail.tipoffAction}</td>
                  </tr>
                  <tr>
                    <td className="table-vaule1">发生地</td>
                    <td className="table-vaule2">{detail.tipoffAddress}</td>
                    <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={data.path} target='_black'> <img src={data.path} width='70' height='70' /></a>
                      </div>
                      : < div style={{ marginRight: "10px" }} key={key}>
                        <a href={data.path} target='_black'><video src={data.path} 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 '暂无';
  }
}

 SunshineIns/src/page/NoInspectionReportList.jsx

New file
@@ -0,0 +1,41 @@
import React from 'react';
import { Input, Button, DatePicker, Divider, message, Popconfirm, Select, Badge } from 'antd';
import HeadView from '../view/HeadView';
import LinkView from '../view/LinkView';
import NoInspectionReportTableList from './NoInspectionReportTableList';



export default class NewlyList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],

    };
  }

  componentDidMount() {

    document.title = '未检举报';
    // this.getData();
  }

  getData = () => {

  }

  render() {

    const { data, loading, resetKey } = this.state;
    return (
      <div className="app-page">
        <HeadView history={this.props.history} />
        <LinkView sed="未检举报" local="未检举报" />
        <NoInspectionReportTableList history={this.props.history} />

      </div>
    );
  }

}

 SunshineIns/src/page/NoInspectionReportTableList.jsx

New file
@@ -0,0 +1,267 @@
/**
 * 徐祥健<xuxj@hugeinfo.com.cn>
 * 2018年8月28日 10:41
 *
 */


import React from 'react';

import HeadView from '../view/HeadView';
import TableBtnView from '../view/TableBtnView';
import LinkView from '../view/LinkView';
import { Input, Button, DatePicker, Divider, Row, Col, message, Modal, Popconfirm, Badge, Tabs, Form, Table } from 'antd';
import moment from 'moment';
import Fetch from '../fetch';
import TableView from '../view/TableView';

const { TabPane } = Tabs;
class NoInspectionReportTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      formdata: {},
      userId: "",
      tableData: [],
      totalElements: 1,
      pageSize: 10,
      page: 1,
      currItem: {},
      auditVisible: false //审核弹窗
    };
  }

  componentDidMount() {
    document.title = '问卷管理';
    this.loadData(1, this.state.pageSize);
  }

  loadData = (page, pageSize) => {
    let _this = this;
    _this.setState({
      loading: true
    })
    _this.props.form.validateFields((err, values) => {
      _this.setState({ formdata: values });
      Fetch.tipoffQuery({
        ...values,
        page: page,
        size: pageSize,
      })
        .then(res => {
          console.log('res', res);
          this.setState({
            loading: false
          })
          if (res.code == 0) {
            for (var i = 0; i < res.data.rows.length; i++) {
              res.data.rows[i]['index'] = i + 1;
              res.data.rows[i]['key'] = i;
            }
            this.setState({
              tableData: res.data.rows,
              loading: false,
              totalElements: res.data.total,
              page
            });

          }
        });
    })
  }

  onShowSizeChange = (current, pageSize) => {
    this.setState({ pageSize, page: 1 })
    this.loadData(1, pageSize);
  }
  pageChange = (page, pageSize) => {
    this.loadData(page, pageSize);
  }

  audit = (data) => {
    Fetch.questionAudit({
      id: this.state.currItem.id,
      ...data,
    }).then(res => {
      console.log('res', res);
      if (res) {
        message.success('操作完成');
      } else {
        message.warn('操作失败,请稍后重试！')
      }
      this.setState({
        auditVisible: false,
      }, () => {
        this.loadData(this.state.page, this.state.pageSize)
      })
    })
  }

  callback(key) {
    console.log(key);
  }

  render() {
    const columns = [{
      title: '举报对象',
      dataIndex: 'tipoffObject',
      key: 'tipoffObject',
      render: (cur, item) => {
        return cur || '暂无'
      }
    }, {
      title: '举报内容',
      dataIndex: 'tipoffContent',
      key: 'tipoffContent',
      ellipsis: true,
      render: (cur, item) => {
        return cur || '暂无'
      }
    }, {
      title: '举报类型',
      dataIndex: 'businessType',
      key: 'businessType',
      ellipsis: true,
      render: (cur, item) => {
        return businessType(cur)
      }
    }, {
      title: '举报状态',
      dataIndex: 'status',
      key: 'status',
      ellipsis: true,
      render: (cur, item) => {
        return renderStatus(cur)
      }
    }, {
      title: '举报时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (cur, item) => {
        return cur ? moment(cur).format("YYYY-MM-DD HH:mm") : '暂无'
      }
    }, {
      title: '操作',
      key: 'action',
      render: (cur, item) => {
        return <React.Fragment>
          {
            item.status == 1 &&
            <React.Fragment>
              <a onClick={() => {
                this.props.history.push(`/noInspectionReportDetail/${item.id}/do`)
              }}>回复</a>
              <Divider type="vertical" />
            </React.Fragment>
          }
          <a onClick={() => {
            console.log(item.id);
            this.props.history.push(`/noInspectionReportDetail/${item.id}/detail`)
          }}>查看</a>
        </React.Fragment>

      },
    }];
    const { data, loading, auditVisible } = this.state;
    const { title, local, type, total, notRead, contact, sed } = this.props;
    return (
      <div className="app-page">
        {/* <div style={{ background: '#fff', margin: '0 20px' }} >
          <Tabs type="card" style={{ margin: 0 }} onChange={this.callback}>
            <TabPane tab="全部" key="1">
            </TabPane>
            <TabPane tab="派送中" key="2">
            </TabPane>
            <TabPane tab="已回收" key="3">
            </TabPane>
          </Tabs>
        </div> */}
        {/* <TableView columns={columns} data={data} pageSize='10' size='default' loading={loading} /> */}
        <div style={{
          padding: '8px',
          margin: '0px 20px',
          backgroundColor: '#fff'
        }}>
          <Table
            size="middle"
            dataSource={this.state.tableData}
            loading={{ spinning: this.state.loading }}
            columns={columns}
            pagination={{
              pageSize: this.state.pageSize,
              onChange: this.pageChange,
              total: this.state.totalElements,
              showSizeChanger: true,
              onShowSizeChange: this.onShowSizeChange,
              showTotal: (total, range) => `共${total}条记录 `,
              // itemRender: this.itemRender,
              showQuickJumper: true,
              defaultCurrent: 1,
              current: this.state.page
            }}
          />
        </div>

        <Modal
          title="调查问卷审核"
          visible={this.state.auditVisible}
          footer={null}
          onCancel={() => {
            this.setState({
              auditVisible: false
            })
          }}
        >
          <Row type="flex" justify="end" gutter={20}>
            <Col>
              <Button onClick={() => {
                this.setState({
                  auditVisible: false
                })
              }}>取消</Button>
            </Col>
            <Col>
              <Button onClick={() => {
                this.audit({
                  status: 99
                });
              }}>不通过</Button>
            </Col>
            <Col>
              <Button type="primary" onClick={() => {
                this.audit({
                  status: 2
                });
              }}>通过</Button>
            </Col>
          </Row>
        </Modal>
      </div>
    );
  }
}
const NoInspectionReportTableList = Form.create()(NoInspectionReportTable);
export default NoInspectionReportTableList;

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 '暂无';
  }
}