From b449aca90c49fe8ee96f1c040c5953fcdd2ca15d Mon Sep 17 00:00:00 2001 From: liuwh <hugeinfo123> Date: Mon, 06 Apr 2020 17:49:41 +0800 Subject: [PATCH] 新建文档 --- src/components/common/SearchFormView/index.jsx | 236 +++++++++++++++++++++++++++++ src/index.js | 12 - src/pages/index/System.jsx | 14 - src/pages/index/workbench.jsx | 2 src/components/page/index/rulesList/index.scss | 14 + src/components/page/index/workbench/index.jsx | 6 src/components/common/TopListTableView/index.jsx | 7 src/components/common/SearchFormView/index.scss | 22 ++ src/components/page/index/workbench/index.scss | 0 src/components/page/index/rulesList/index.jsx | 85 ++++++++++ src/components/common/HotListTableView/index.jsx | 44 ++-- src/components/page/SystemPage/index.jsx | 7 12 files changed, 401 insertions(+), 48 deletions(-) diff --git a/src/components/common/HotListTableView/index.jsx b/src/components/common/HotListTableView/index.jsx index 8469970..e0157dc 100644 --- a/src/components/common/HotListTableView/index.jsx +++ b/src/components/common/HotListTableView/index.jsx @@ -30,7 +30,7 @@ page: 1, size: 10, }, - loading: false + loading: true }; } @@ -116,6 +116,7 @@ render() { let { keywordlist, formData, loading } = this.state; + let tableParams = { url: `api/news/newslist`, formData, @@ -124,30 +125,29 @@ extraFromData: { }, setFormData: this.setFormData - } + }; return ( <div className="hot-list-table-view-main"> - { - loading ? <div style={{ padding: 10 }}> - <Skeleton /> + <Skeleton loading={loading}> + <BreadcrumbView data={[{ name: '行业热点知识库' }]} /> + <div className="hot-list-table-view-main-content"> + <Tabs defaultActiveKey={'全部'} onChange={this.tabChange}> + { + keywordlist.length && + keywordlist.map((key) => ( + <TabPane tab={key} key={key}> + </TabPane> + )) + } + </Tabs> + {/* 避免请求两遍 */} + { + !loading && + <TableView {...tableParams} /> + + } </div> - : - <React.Fragment> - <BreadcrumbView data={[{ name: '行业热点知识库' }]} /> - <div className="hot-list-table-view-main-content"> - <Tabs defaultActiveKey={'全部'} onChange={this.tabChange}> - { - keywordlist.length && - keywordlist.map((key) => ( - <TabPane tab={key} key={key}> - </TabPane> - )) - } - </Tabs> - <TableView {...tableParams} /> - </div> - </React.Fragment> - } + </Skeleton> </div> ) } diff --git a/src/components/common/SearchFormView/index.jsx b/src/components/common/SearchFormView/index.jsx new file mode 100644 index 0000000..dbe59c9 --- /dev/null +++ b/src/components/common/SearchFormView/index.jsx @@ -0,0 +1,236 @@ +/* eslint-disable */ +/**柯礼钦 + * 4/3/2020, 3:00:49 PM + * doc comment for the file goes here + */ + +/** 表单搜索组件 */ +import React, { ReactNode, ReactEventHandler, Component } from 'react'; +import { Row, Col, Form, Input, Button, Select, DatePicker, Divider } from 'antd'; +import moment from 'moment'; + +const { RangePicker } = DatePicker; +import './index.scss'; + + +export default class SearchFormView extends Component { + constructor(props) { + super(props); + this.config = { + }; + this.state = { + }; + } + + componentWillMount() { } + + componentDidMount() { } + + onClick = type => { + const { pathName } = this.props; + let data; + switch (type) { + case 'search': + data = { ...this.props.formData, __key: Date.now() }; + this.props.setFormData(data); + return; + case 'reset': + data = { __key: Date.now(), page: 1, size: 10 }; + this.props.setFormData(data); + return; + case 'build': + return; + } + }; + + //各类型表单元素触发事件 + // input输入类型 + handleInput = ({ target: { name, value } }) => { + this.props.setFormData({ ...this.props.formData, [name]: value }); + }; + + // select下拉选择 + handleSelectChange = name => { + return value => { + this.handleInput({ target: { name, value } }); + }; + }; + + // 时间段区域选择 + rangePickerChange = (name, key, m, d) => { + if (m.length > 0) { + this.props.setFormData({ + ...this.props.formData, + [name]: d.join(','), + [JSON.parse(key)[0]]: d[0], + [JSON.parse(key)[1]]: d[1], + }); + } else { + this.props.setFormData({ + ...this.props.formData, + [name]: undefined, + [JSON.parse(key)[0]]: '', + [JSON.parse(key)[1]]: '', + }); + } + }; + + // 时间选择器 + datePickerChange = (name, v) => { + this.props.setFormData({ + ...this.props.formData, + [name]: v, + }); + }; + + + render() { + const { formData = {}, data = [], children } = this.props; + + return ( + <div className="search-form-view-main"> + <div className="search-form-view-main-margin-bottom"> + <Row type="flex" align="middle" gutter={20}> + + {data.length > 0 && + data.map((item, idx) => ( + <React.Fragment key={idx}> + {(() => { + switch (item.type) { + case 'select': + return ( + <Col span={4}> + <Form.Item label={item.label}> + <Select + size="small" + style={{ width: '100%' }} + placeholder={item.name} + value={formData[item.key]} + allowClear + onChange={this.handleSelectChange(item.key)}> + {item.list && + item.list.map(item => ( + <Select.Option + value={item.id} + key={item.id}> + {item.name} + </Select.Option> + ))} + </Select> + </Form.Item> + </Col> + ); + case 'input': + return ( + <Col span={4}> + <Form.Item label={item.label}> + <Input + size="small" + placeholder={item.name} + name={item.key} + value={formData[item.key]} + onChange={this.handleInput} + /> + </Form.Item> + </Col> + ); + case 'datePicker': + return ( + <Col span={4}> + <Form.Item label={item.label}> + <DatePicker + size="small" + style={{ width: '100%' }} + placeholder={item.name} + onChange={(date, dateString) => { + this.datePickerChange(item.key, dateString); + }} + value={formData[item.key] ? moment(formData[item.key], 'YYYY-MM-DD') : undefined} + /> + </Form.Item> + </Col> + ); + case 'rangePicker': + return ( + <Col span={6}> + <Form.Item label={item.label}> + <RangePicker + size="small" + ranges={{ + Today: [moment(), moment()], + 'This Month': [ + moment().startOf('month'), + moment().endOf('month'), + ], + }} + value={ + item.keylistName && + formData[item.keylistName] && + typeof formData[item.keylistName] == 'string' + ? formData[item.keylistName] + .split(',') + .map(item => moment(item, 'YYYY-MM-DD')) + : [] + } + onChange={(date, dateString) => { + this.rangePickerChange( + item.keylistName, + item.key, + date, + dateString + ); + }} + placeholder={JSON.parse(item.name)} + /> + </Form.Item> + </Col> + ); + case 'br': + return ( + <Col span={24} style={{ marginBottom: '10px' }} /> + ); + default: + return null; + } + })()} + </React.Fragment> + ))} + + <Col> + <Row type="flex" gutter={20} align="middle" align="middle"> + <Col> + <Button + size="small" + type="primary" + onClick={() => { + this.onClick('search'); + }}> + 查询 + </Button> + </Col> + <Col> + <Button + size="small" + onClick={() => { + this.onClick('reset'); + }}> + 重置 + </Button> + </Col> + { + children && + <Col> + {children} + </Col> + } + </Row> + </Col> + </Row> + + </div> + + <Divider /> + </div> + ) + } +} diff --git a/src/components/common/SearchFormView/index.scss b/src/components/common/SearchFormView/index.scss new file mode 100644 index 0000000..5f0238f --- /dev/null +++ b/src/components/common/SearchFormView/index.scss @@ -0,0 +1,22 @@ +/* eslint-disable */ +/**柯礼钦 + * 4/3/2020, 3:00:49 PM + * doc comment for the file goes here + */ + +/** Happy Coding */ +.search-form-view { + &-main { + &-margin-bottom{ + margin-bottom: 18px; + + } + .ant-form-item { + margin-bottom: 0 !important; + display: flex; + } + .ant-form-item-control-wrapper { + flex: 1; + } + } +} diff --git a/src/components/common/TopListTableView/index.jsx b/src/components/common/TopListTableView/index.jsx index 0b8423b..859bf83 100644 --- a/src/components/common/TopListTableView/index.jsx +++ b/src/components/common/TopListTableView/index.jsx @@ -8,6 +8,8 @@ import React, { ReactNode, ReactEventHandler, Component } from 'react'; import { Table, Row, Col } from 'antd'; import { tagList } from './tagList'; +import fetch from '../../../api/request'; + import './index.scss'; @@ -22,6 +24,11 @@ } componentWillMount() { + fetch({ + url: `api/merits/queryMerits` + }).then(res => { + console.log('res', res); + }) this.setState({ topList: tagList }) diff --git a/src/components/page/SystemPage/index.jsx b/src/components/page/SystemPage/index.jsx index cf211d0..12f5090 100644 --- a/src/components/page/SystemPage/index.jsx +++ b/src/components/page/SystemPage/index.jsx @@ -6,9 +6,9 @@ /** 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'; @@ -33,9 +33,6 @@ } }; } - - - componentWillMount() { } @@ -137,7 +134,7 @@ { 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: 'groupType', render: (text, record) => <span>{record.readNumber || 0}/{record.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) => { diff --git a/src/components/page/index/rulesList/index.jsx b/src/components/page/index/rulesList/index.jsx new file mode 100644 index 0000000..219f7bf --- /dev/null +++ b/src/components/page/index/rulesList/index.jsx @@ -0,0 +1,85 @@ +/* eslint-disable */ +/**柯礼钦 + * 4/6/2020, 5:17:40 PM + * doc comment for the file goes here + */ + +/** 工作制度 */ +import React, { ReactNode, ReactEventHandler, Component } from 'react'; +import TableView from '../../../common/TableView'; +import SearchFormView from '../../../common/SearchFormView'; +import moment from 'moment'; + +import './index.scss'; + + +export default class RulesList extends Component { + constructor(props) { + super(props); + this.config = { + }; + this.state = { + formData: { + __key: Date.now(), + type: '', + title: '', + page: 1, + size: 10, + }, + }; + } + + componentWillMount() { } + + componentDidMount() { } + + renderColumns = () => { + return [ + { title: '通知标题', dataIndex: 'documentItle;' }, + { title: '通知内容', dataIndex: 'documentContent' }, + { title: '接受情况', dataIndex: 'groupType', render: (cur, item) => <span>{item.readNumber || 0}/{item.noticeNumber || 0}</span> }, + { title: '通知时间', dataIndex: 'createTime', render: (cur, item) => cur !== "" && cur != null ? moment(cur).format("YYYY-MM-DD HH:mm") : "" }, + ]; + } + + setFormData = data => { + console.log('form', data); + this.setState({ + formData: data, + }); + } + + render() { + const { formData } = this.state; + + let tableParams = { + url: `api/document/getNotice`, + formData, + key: formData.__key, + columns: this.renderColumns(), + extraFromData: { + type: '', + }, + setFormData: this.setFormData + } + return ( + <div className="rules-list-main"> + <SearchFormView + formData={formData} + setFormData={this.setFormData} + data={[ + { type: 'input', name: '标题', label: '标题', key: 'title' }, + { + type: 'rangePicker', + label: '发布时间', + name: JSON.stringify(['开始时间', '结束时间']), + key: JSON.stringify(['startTime', 'endTime']), + keylistName: 'rangeTimelist', + }, + ]} /> + <TableView {...tableParams} /> + </div> + ) + } +} + diff --git a/src/components/page/index/rulesList/index.scss b/src/components/page/index/rulesList/index.scss new file mode 100644 index 0000000..e1f7b64 --- /dev/null +++ b/src/components/page/index/rulesList/index.scss @@ -0,0 +1,14 @@ +/* eslint-disable */ +/**liuwh + * 4/6/2020, 5:17:40 PM + * doc comment for the file goes here + */ + +/** Happy Coding */ +.rules-list { + &-main { + background: #fff; + margin: 20px; + padding: 20px; + } +} diff --git a/src/components/page/workbench/index.jsx b/src/components/page/index/workbench/index.jsx similarity index 71% rename from src/components/page/workbench/index.jsx rename to src/components/page/index/workbench/index.jsx index 733a1f1..4ffbf82 100644 --- a/src/components/page/workbench/index.jsx +++ b/src/components/page/index/workbench/index.jsx @@ -6,9 +6,9 @@ /** 首页--工作台 */ import React, { ReactNode, ReactEventHandler, Component } from 'react'; -import NotifyList from '../../common/NotifyList'; //通知列表 -import TopListTableView from '../../common/TopListTableView'; //榜单列表 -import HotListTableView from '../../common/HotListTableView'; //行业热点知识库 +import NotifyList from '../../../common/NotifyList'; //通知列表 +import TopListTableView from '../../../common/TopListTableView'; //榜单列表 +import HotListTableView from '../../../common/HotListTableView'; //行业热点知识库 import './index.scss'; diff --git a/src/components/page/workbench/index.scss b/src/components/page/index/workbench/index.scss similarity index 100% rename from src/components/page/workbench/index.scss rename to src/components/page/index/workbench/index.scss diff --git a/src/index.js b/src/index.js index 57b89f4..4fd9219 100644 --- a/src/index.js +++ b/src/index.js @@ -51,23 +51,19 @@ {/* 新建文档 */} <Route path="/document/create" component={DocumentEdit} /> - {/* 全部通知 */} <Route path="/index/workbench/announcement" component={Announcement} /> - {/* 首页 */} - <Route path="/index/workbench" component={Workbench} /> {/* 规章制度 */} <Route path="/index/rules" component={System} /> - - + {/* 首页 */} + <Route path="/index" component={Workbench} /> <Route path="/login" component={Login} /> - - <Route path="/" component={Index} /> + <Route path="/" component={Workbench} /> {/* 路由的页面重定向 */} - <Redirect to="/" component={Index} /> + <Redirect to="/" component={Workbench} /> </Switch> </Content> </Layout> diff --git a/src/pages/index/System.jsx b/src/pages/index/System.jsx index 8b12334..44d395b 100644 --- a/src/pages/index/System.jsx +++ b/src/pages/index/System.jsx @@ -8,6 +8,7 @@ import React, { ReactNode, ReactEventHandler, Component } from 'react'; import BreadcrumbView from '../../components/common/BreadcrumbView'; import SystemPage from '../../components/page/SystemPage' +import RulesList from '../../components/page/index/rulesList' export default class System extends Component { constructor(props) { @@ -27,16 +28,11 @@ render() { return ( <div className="System-main"> - <BreadcrumbView data={[{ name: '工作制度'}]} /> - <SystemPage /> + <BreadcrumbView data={[{ name: '工作制度' }]} /> + {/* <SystemPage /> */} + <RulesList {...this.prosp} /> </div> ) } } -//export default function System({ }) { -// return ( -// <div className="System-main"> -// -// </div> -// ) -//} + diff --git a/src/pages/index/workbench.jsx b/src/pages/index/workbench.jsx index 52203d1..a7661a3 100644 --- a/src/pages/index/workbench.jsx +++ b/src/pages/index/workbench.jsx @@ -7,7 +7,7 @@ /** 首页 -- 工作台 */ import React, { ReactNode, ReactEventHandler, Component } from 'react'; import BreadcrumbView from '../../components/common/BreadcrumbView'; -import WorkbenchPage from '../../components/page/workbench' +import WorkbenchPage from '../../components/page/index/workbench' export default class Workbench extends Component { constructor(props) { -- Gitblit v1.8.0