From 23ef77aa1fa2d9ce3c10205f9cb77864a18e9ec4 Mon Sep 17 00:00:00 2001 From: liuwh <hugeinfo123> Date: Mon, 06 Apr 2020 15:43:09 +0800 Subject: [PATCH] 规章制度列表和全部通知列表 --- src/components/page/AnnouncementPage/index.jsx | 201 ++++++++++++++++++++ src/index.js | 9 src/pages/index/System.jsx | 42 ++++ src/menu/menu.data.js | 14 + src/components/page/SystemPage/index.scss | 12 + .env | 2 src/pages/index/Announcement.jsx | 42 ++++ src/components/common/BreadcrumbView/index.jsx | 2 src/components/page/SystemPage/index.jsx | 202 ++++++++++++++++++++ src/api/httpurl.js | 4 src/components/page/AnnouncementPage/index.scss | 12 + 11 files changed, 534 insertions(+), 8 deletions(-) diff --git a/.env b/.env index f70ee50..7d9aa88 100644 --- a/.env +++ b/.env @@ -1,4 +1,4 @@ # copy to `.evn.local` and edit -REACT_APP_CODER=柯礼钦 +REACT_APP_CODER=liuwh REACT_APP_EMAIL= \ No newline at end of file diff --git a/src/api/httpurl.js b/src/api/httpurl.js index 8cbaac2..1255dfd 100644 --- a/src/api/httpurl.js +++ b/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地址 diff --git a/src/components/common/BreadcrumbView/index.jsx b/src/components/common/BreadcrumbView/index.jsx index 1f637c8..617898e 100644 --- a/src/components/common/BreadcrumbView/index.jsx +++ b/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> )) diff --git a/src/components/page/AnnouncementPage/index.jsx b/src/components/page/AnnouncementPage/index.jsx new file mode 100644 index 0000000..56d9683 --- /dev/null +++ b/src/components/page/AnnouncementPage/index.jsx @@ -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> | </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> + ) + } +} + diff --git a/src/components/page/AnnouncementPage/index.scss b/src/components/page/AnnouncementPage/index.scss new file mode 100644 index 0000000..bf73b45 --- /dev/null +++ b/src/components/page/AnnouncementPage/index.scss @@ -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 { + + } +} diff --git a/src/components/page/SystemPage/index.jsx b/src/components/page/SystemPage/index.jsx new file mode 100644 index 0000000..cf211d0 --- /dev/null +++ b/src/components/page/SystemPage/index.jsx @@ -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> | </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 > + ) + } +} + diff --git a/src/components/page/SystemPage/index.scss b/src/components/page/SystemPage/index.scss new file mode 100644 index 0000000..b8341fa --- /dev/null +++ b/src/components/page/SystemPage/index.scss @@ -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 { + + } +} diff --git a/src/index.js b/src/index.js index fe268fd..9005a38 100644 --- a/src/index.js +++ b/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} /> diff --git a/src/menu/menu.data.js b/src/menu/menu.data.js index f2ca0af..a416354 100644 --- a/src/menu/menu.data.js +++ b/src/menu/menu.data.js @@ -12,10 +12,16 @@ permKey: 'menu.home', children: [{ key: 'index_workbench', - name: '工作台', - path: '/index/workbench', - permKey: '/index/workbench', - children: [] + name: '工作台', + path: '/index/workbench', + permKey: '/index/workbench', + children: [] + }, { + key: 'index_system', + name: '规章制度', + path: '/index/system', + permKey: '/index/system', + children: [] }], }, // { diff --git a/src/pages/index/Announcement.jsx b/src/pages/index/Announcement.jsx new file mode 100644 index 0000000..e2a408f --- /dev/null +++ b/src/pages/index/Announcement.jsx @@ -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> +// ) +//} diff --git a/src/pages/index/System.jsx b/src/pages/index/System.jsx new file mode 100644 index 0000000..8b12334 --- /dev/null +++ b/src/pages/index/System.jsx @@ -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> +// ) +//} -- Gitblit v1.8.0