From 9d70ed845a45c0cafb8ff39cb8a821613faeade4 Mon Sep 17 00:00:00 2001
From: Mr Ke <kelq@hugeinfo.com.cn>
Date: Mon, 06 Apr 2020 17:05:18 +0800
Subject: [PATCH] 表单搜索公用组件
---
src/components/common/SearchFormView/index.jsx | 236 +++++++++++++++++++++++++++++++++++++++
src/index.js | 7
src/components/common/SearchFormView/index.scss | 22 +++
src/components/common/HotListTableView/index.jsx | 44 +++---
src/components/page/SystemPage/index.jsx | 2
5 files changed, 284 insertions(+), 27 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/page/SystemPage/index.jsx b/src/components/page/SystemPage/index.jsx
index cf211d0..84a2988 100644
--- a/src/components/page/SystemPage/index.jsx
+++ b/src/components/page/SystemPage/index.jsx
@@ -137,7 +137,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/index.js b/src/index.js
index b701614..0a36312 100644
--- a/src/index.js
+++ b/src/index.js
@@ -46,15 +46,14 @@
{/* 全部通知 */}
<Route path="/index/workbench/announcement" component={Announcement} />
+ <Route path="/index/rules" component={System} />
+
{/* 首页 */}
<Route path="/index" component={Workbench} />
- <Route path="/index/system" component={System} />
<Route path="/login" component={Login} />
-
- <Route path="/" component={Index} />
{/* 路由的页面重定向 */}
- <Redirect to="/" component={Index} />
+ <Redirect to="/" component={Workbench} />
</Switch>
</Content>
</Layout>
--
Gitblit v1.8.0