规章制度列表和全部通知列表

liuwh

2020-04-06 23ef77aa1fa2d9ce3c10205f9cb77864a18e9ec4

规章制度列表和全部通知列表

 .env

@@ -1,4 +1,4 @@
# copy to `.evn.local` and edit

REACT_APP_CODER=柯礼钦
REACT_APP_CODER=liuwh
REACT_APP_EMAIL=

 src/api/httpurl.js

@@ -1,7 +1,7 @@
//内网测试地址
let StagingUrl = 'http://192.168.0.107:8902';
// let StagingUrl = 'http://192.168.0.107:8902';
// let StagingUrl = "http://g185t82524.51mypc.cn";
// let StagingUrl = "http://30z165r838.qicp.vip";
let StagingUrl = "http://oa.hugeinfo.com.cn";


//mock地址

 src/components/common/BreadcrumbView/index.jsx

@@ -20,7 +20,7 @@
                    data.map(({ name, url }, idx) => (
                        <Breadcrumb.Item key={idx}>
                            {
                                url ? <a href="">{name}</a> : name
                                url ? <a href={url}>{name}</a> : name
                            }
                        </Breadcrumb.Item>
                    ))

 src/components/page/AnnouncementPage/index.jsx

New file
@@ -0,0 +1,201 @@
/* eslint-disable */
/**liuwh
 * 4/6/2020, 12:33:28 PM
 * doc comment for the file goes here
 */

/** Happy Coding */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
// import { Link } from 'react-router-dom';
import moment from 'moment'
import { DatePicker, Table, Card, Row, Col, Icon, Form, Input, Button, Select, message } from 'antd';
import './index.scss';

import fetch from '../../../api/request';
const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item;
export default class AnnouncementPage extends Component {
  constructor(props) {
    super(props);
    this.config = {
    };
    this.state = {
      loading: true,
      totalElements: 1,
      size: 10,
      page: 1,
      resetKey: Date.now(),
      formdata: {
        type: '',
        title: '',
        startTime: '',
        endTime: ''
      }
    };
  }




  componentWillMount() { }

  componentDidMount() {
    this.loadData(this.state.formdata, this.state.page, this.state.size);
  }

  onShowSizeChange = (current, size) => {
    console.log('pageSize', size)
    this.setState({ size, page: 1 });
    this.getData(this.state.formdata, this.state.page, this.state.size);
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.loadData(this.state.formdata, 1, this.state.size);
  }

  loadData = (formdata, page, size) => {
    console.log('111')
    let _this = this;
    _this.setState({
      loading: true
    })
    fetch({
      url: 'api/document/getNotice',
      params: {
        ...formdata,
        page,
        size
      }
    }).then(res => {
      console.log(res)
      _this.setState({
        tableData: res.content,
        loading: false,
        totalElements: res.totalElements,
        page
      });
    });
  }

  //查询
  Seaech = () => {
    const { formdata, page, size } = this.state;
    if (formdata.areaId) {
      formdata.areaId = parseInt(formdata.areaId[1]);
    }
    this.loadData(formdata, 1, size)
  }

  //重置
  Reset = () => {
    this.setState({
      resetKey: Date.now(),
      formdata: {},
      page: 1,
      size: 10
    }, this.loadData({}, 1, this.state.size))
  }

  onInputChange = ({ target: { value, name } }) => {
    this.setState(({ formdata }) => ({
      formdata: {
        ...formdata,
        [name]: this.trim(value)
      }
    }))
  }

  onTimeChange = (value, dateString) => {
    this.onChange('startTime', moment(dateString[0]).format('YYYY-MM-DD HH:mm'));
    this.onChange('endTime', moment(dateString[1]).format('YYYY-MM-DD HH:mm'));
  }

  onChange = (field, value) => {
    this.setState(({ formdata }) => ({
      formdata: {
        ...formdata,
        [field]: value
      }
    }))
  }

  trim = (str) => {
    str = str.replace(/^(\s|\u00A0)+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
      if (/\S/.test(str.charAt(i))) {
        str = str.substring(0, i + 1);
        break;
      }
    }
    return str;
  }

  getColumns = () => {
    let obj = this;
    return [
      { title: '通知标题', className: "txt-c", dataIndex: 'documentItle;' },
      { title: '通知内容', className: "txt-c", dataIndex: 'documentContent' },
      // { title: '文档类型', className: "txt-c", dataIndex: 'documentType', render: (text, record) => text == "DT00001" ? "规章制度" : text == "DT00002" ? "通知公告" : text },
      { title: '接受情况', className: "txt-c", dataIndex: 'groupType', render: (text, record) => <span>{readNumber || 0}/{noticeNumber || 0}</span> },
      { title: '通知时间', className: "txt-c", dataIndex: 'createTime', render: (text, record) => text !== "" && text != null ? moment(text).format("YYYY-MM-DD HH:mm") : "" },
      // {
      //   title: '操作', className: "txt-c", key: 'operation', render: (text, record) => {
      //     return <div>
      //       <Link to={{ pathname: "/baseManage/groupDetail/" + record.id + '/Modify', query: { id: record.id } }}>修改</Link>
      //       <span>&nbsp;|&nbsp;</span>
      //       <a href="javascript:void(0);" onClick={() => this.delete(record.id)}>删除</a>
      //     </div>
      //   }
      // }
    ]
  }

  render() {
    const { resetKey, formdata } = this.state;
    return (
      <div className="announcement-page-main">
        <Card style={{ border: 20, margin: 20, padding: 20 }}>
          <Row style={{ margin: '10px' }} key={resetKey}>
            <Col span={1} style={{ display: 'flex', justifyContent: 'center', lineHeight: '28px' }}>标题:</Col>
            <Col className="gutter-row" span={4}>
              <Input placeholder="标题" name='name' onChange={this.onInputChange} />
            </Col>
            <Col span={2} style={{ display: 'flex', justifyContent: 'center', lineHeight: '28px' }}>工作时间:</Col>
            <Col className="gutter-row" span={6}>
              <RangePicker placeholder={['开始时间', '结束时间']} showTime format="YYYY-MM-DD HH:mm" onChange={this.onTimeChange} />
            </Col>
            <Col className="gutter-row" span={2}>
              <Button type="primary" onClick={this.Seaech}>查询</Button>
            </Col>
            <Col className="gutter-row" span={2}>
              <Button onClick={this.Reset}>重置</Button>
            </Col>
          </Row>
          <Row>
            <Table key={this.state.tableKey}
              size="middle"
              className="rowColor"
              dataSource={this.state.tableData}
              loading={{ spinning: this.state.loading }}
              columns={this.getColumns()}
              pagination={{
                size: this.state.size,
                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
              }}
            />
          </Row>
        </Card>
      </div>
    )
  }
}


 src/components/page/AnnouncementPage/index.scss

New file
@@ -0,0 +1,12 @@
/* eslint-disable */
/**liuwh
 * 4/6/2020, 12:33:28 PM
 * doc comment for the file goes here
 */

/** Happy Coding */
.announcement-page {
  &-main {

  }
}

 src/components/page/SystemPage/index.jsx

New file
@@ -0,0 +1,202 @@
/* eslint-disable */
/**liuwh
 * 4/6/2020, 12:33:28 PM
 * doc comment for the file goes here
 */

/** Happy Coding */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
// import { Link } from 'react-router-dom';
import moment from 'moment'
import { DatePicker, Table, Card, Row, Col, Icon, Form, Input, Button, Select, message } from 'antd';
import './index.scss';

import fetch from '../../../api/request';
const { MonthPicker, RangePicker } = DatePicker;
const FormItem = Form.Item;
export default class SystemPage extends Component {
  constructor(props) {
    super(props);
    this.config = {
    };
    this.state = {
      loading: true,
      totalElements: 1,
      size: 10,
      page: 1,
      resetKey: Date.now(),
      formdata: {
        type: '',
        title: '',
        startTime: '',
        endTime: ''
      }
    };
  }




  componentWillMount() { }

  componentDidMount() {
    this.loadData(this.state.formdata, this.state.page, this.state.size);
  }

  onShowSizeChange = (current, size) => {
    console.log('pageSize', size)
    this.setState({ size, page: 1 });
    this.getData(this.state.formdata, this.state.page, this.state.size);
  };

  handleSubmit = (e) => {
    e.preventDefault();
    this.loadData(this.state.formdata, 1, this.state.size);
  }

  loadData = (formdata, page, size) => {
    console.log('111')
    let _this = this;
    _this.setState({
      loading: true
    })
    fetch({
      url: 'api/document/getNotice',
      params: {
        ...formdata,
        page,
        size
      }
    }).then(res => {
      console.log(res)
      _this.setState({
        tableData: res.content,
        loading: false,
        totalElements: res.totalElements,
        page
      });
    });
  }

  //查询
  Seaech = () => {
    const { formdata, page, size } = this.state;
    if (formdata.areaId) {
      formdata.areaId = parseInt(formdata.areaId[1]);
    }
    this.loadData(formdata, 1, size)
  }

  //重置
  Reset = () => {
    this.setState({
      resetKey: Date.now(),
      formdata: {},
      page: 1,
      size: 10
    }, this.loadData({}, 1, this.state.size))
  }

  onInputChange = ({ target: { value, name } }) => {
    this.setState(({ formdata }) => ({
      formdata: {
        ...formdata,
        [name]: this.trim(value)
      }
    }))
  }

  onTimeChange = (value, dateString) => {
    this.onChange('startTime', moment(dateString[0]).format('YYYY-MM-DD HH:mm'));
    this.onChange('endTime', moment(dateString[1]).format('YYYY-MM-DD HH:mm'));
  }

  onChange = (field, value) => {
    this.setState(({ formdata }) => ({
      formdata: {
        ...formdata,
        [field]: value
      }
    }))
  }

  trim = (str) => {
    str = str.replace(/^(\s|\u00A0)+/, '');
    for (var i = str.length - 1; i >= 0; i--) {
      if (/\S/.test(str.charAt(i))) {
        str = str.substring(0, i + 1);
        break;
      }
    }
    return str;
  }

  getColumns = () => {
    let obj = this;
    return [
      { title: '通知标题', className: "txt-c", dataIndex: 'documentItle;' },
      { title: '通知内容', className: "txt-c", dataIndex: 'documentContent' },
      // { title: '文档类型', className: "txt-c", dataIndex: 'documentType', render: (text, record) => text == "DT00001" ? "规章制度" : text == "DT00002" ? "通知公告" : text },
      { title: '接受情况', className: "txt-c", dataIndex: 'groupType', render: (text, record) => <span>{readNumber || 0}/{noticeNumber || 0}</span> },
      { title: '通知时间', className: "txt-c", dataIndex: 'createTime', render: (text, record) => text !== "" && text != null ? moment(text).format("YYYY-MM-DD HH:mm") : "" },
      // {
      //   title: '操作', className: "txt-c", key: 'operation', render: (text, record) => {
      //     return <div>
      //       <Link to={{ pathname: "/baseManage/groupDetail/" + record.id + '/Modify', query: { id: record.id } }}>修改</Link>
      //       <span>&nbsp;|&nbsp;</span>
      //       <a href="javascript:void(0);" onClick={() => this.delete(record.id)}>删除</a>
      //     </div>
      //   }
      // }
    ]
  }

  render() {
    const { resetKey, formdata } = this.state;
    return (
      <div className="announcement-page-main">
        <Card style={{ border: 20, margin: 20, padding: 20 }}>
          <Row style={{ margin: '10px' }} key={resetKey}>

            <Col span={1} style={{ display: 'flex', justifyContent: 'center', lineHeight: '28px' }}>标题:</Col>
            <Col className="gutter-row" span={4}>
              <Input placeholder="标题" name='name' onChange={this.onInputChange} />
            </Col>
            <Col span={2} style={{ display: 'flex', justifyContent: 'center', lineHeight: '28px' }}>发布时间:</Col>
            <Col className="gutter-row" span={6}>
              <RangePicker placeholder={['开始时间', '结束时间']} showTime format="YYYY-MM-DD HH:mm" onChange={this.onTimeChange} />
            </Col>
            <Col className="gutter-row" span={2}>
              <Button type="primary" onClick={this.Seaech}>查询</Button>
            </Col>
            <Col className="gutter-row" span={2}>
              <Button onClick={this.Reset}>重置</Button>
            </Col>
          </Row>
          <Row>
            <Table key={this.state.tableKey}
              size="middle"
              className="rowColor"
              dataSource={this.state.tableData}
              loading={{ spinning: this.state.loading }}
              columns={this.getColumns()}
              pagination={{
                size: this.state.size,
                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
              }}
            />
          </Row>
        </Card>
      </div >
    )
  }
}


 src/components/page/SystemPage/index.scss

New file
@@ -0,0 +1,12 @@
/* eslint-disable */
/**liuwh
 * 4/6/2020, 3:25:59 PM
 * doc comment for the file goes here
 */

/** Happy Coding */
.system-page {
  &-main {

  }
}

 src/index.js

@@ -21,6 +21,9 @@
import Login from './pages/login/login';
import JurisdictionPersonMgt from './pages/collect/jurisdictionPersonMgt'; //信息采集--辖区人口管理
import Workbench from './pages/index/workbench'; //首页--工作台
import System from './pages/index/System'; //首页--工作台
import Announcement from './pages/index/Announcement'; //全部通知


const { Content } = Layout;
const history = createHashHistory();
@@ -40,8 +43,14 @@
          </Switch>
          <Content>
            <Switch>
              
              {/* 全部通知 */}
              <Route path="/index/workbench/announcement" component={Announcement} />
              {/* 首页 */}
              <Route path="/index/workbench" component={Workbench} />
              <Route path="/index/system" component={System} />
              


              <Route path="/login" component={Login} />


 src/menu/menu.data.js

@@ -16,6 +16,12 @@
        path: '/index/workbench',
        permKey: '/index/workbench',
        children: []
    }, {
      key: 'index_system',
      name: '规章制度',
      path: '/index/system',
      permKey: '/index/system',
      children: []
    }],
  },
  // {

 src/pages/index/Announcement.jsx

New file
@@ -0,0 +1,42 @@
/* eslint-disable */
/**liuwh
 * 4/6/2020, 12:16:07 PM
 * doc comment for the file goes here
 */

/** Happy Coding */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import BreadcrumbView from '../../components/common/BreadcrumbView';
import AnnouncementPage from '../../components/page/AnnouncementPage'

export default class Announcement extends Component {
  constructor(props) {
    super(props);
    this.config = {
    };
    this.state = {
    };
  }

  componentWillMount() { }

  componentDidMount() { }

  componentDidShow() { }

  render() {
    return (
      <div className="announcement-main">
        <BreadcrumbView data={[{ name: '工作台',url:'#/index/workbench' },{ name: '全部通知' }]} />
        <AnnouncementPage />
      </div>
    )
  }
}
//export default function Announcement({  }) {
//    return (
//     <div className="announcement-main">
//
//      </div>
//    )
//}

 src/pages/index/System.jsx

New file
@@ -0,0 +1,42 @@
/* eslint-disable */
/**liuwh
 * 4/6/2020, 12:16:07 PM
 * doc comment for the file goes here
 */

/** Happy Coding */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import BreadcrumbView from '../../components/common/BreadcrumbView';
import SystemPage from '../../components/page/SystemPage'

export default class System extends Component {
  constructor(props) {
    super(props);
    this.config = {
    };
    this.state = {
    };
  }

  componentWillMount() { }

  componentDidMount() { }

  componentDidShow() { }

  render() {
    return (
      <div className="System-main">
        <BreadcrumbView data={[{ name: '工作制度'}]} />
        <SystemPage />
      </div>
    )
  }
}
//export default function System({  }) {
//    return (
//     <div className="System-main">
//
//      </div>
//    )
//}