From c0c820559b46f3a5ede6fbd7f66e77d09981829f Mon Sep 17 00:00:00 2001
From: Mr Ke <kelq@hugeinfo.com.cn>
Date: Wed, 29 Apr 2020 11:56:31 +0800
Subject: [PATCH] 提升菜单栏体验，升级公共查询表单组件
---
src/components/common/MenuView/index.jsx | 31 +++--
src/components/common/SearchFormView/index.jsx | 200 +++++++++++++++++---------------
src/pages/index/System.jsx | 1
src/pages/index/workbench.jsx | 1
src/pages/menu/menu.jsx | 2
src/menu/menu.data.js | 13 +-
src/components/common/TopListTableView/index.jsx | 2
src/components/common/SearchFormView/index.scss | 9 +
src/components/page/DocumentEditPage/index.jsx | 31 ++--
src/components/common/TableView/index.jsx | 2
src/components/page/index/rulesList/index.jsx | 9 -
11 files changed, 158 insertions(+), 143 deletions(-)
diff --git a/src/components/common/MenuView/index.jsx b/src/components/common/MenuView/index.jsx
index 12f1a65..19202f3 100644
--- a/src/components/common/MenuView/index.jsx
+++ b/src/components/common/MenuView/index.jsx
@@ -6,7 +6,7 @@
/** 菜单渲染组件 */
-import React from 'react';
+import React, { useState } from 'react';
import { Layout, Menu, Icon, Badge } from 'antd';
import { RouteComponentProps } from 'react-router-dom';
import './index.scss';
@@ -20,7 +20,7 @@
}) {
if (!menudata.length) return null;
- const { path, name } = find(menudata, pathname);
+ const { path, name, parentKey } = find(menudata, pathname);
if (name) {
const index = name.indexOf(' - ');
@@ -33,22 +33,29 @@
document.title = `恒巨信息`;
}
- const defaultOpenKeys = menudata.map(({ name }) => name);
+ const defaultOpenKeys = parentKey ? [parentKey] : [];//默认展开的菜单key
+ const [openKeys, setOpenKeys] = useState(defaultOpenKeys);//设置打开菜单的key
+
+ function onOpenChange(key) {
+ let allKeys = menudata.map((d) => d.key);
+ const latestOpenKey = key.find(key => openKeys.indexOf(key) === -1);
+ if (allKeys.indexOf(latestOpenKey) === -1) {
+ setOpenKeys(key)
+ } else {
+ setOpenKeys(latestOpenKey ? [latestOpenKey] : [])
+ }
+ };
return (
- // <Layout.Sider
- // // width={200}
- // theme="light"
- // style={{ backgroundColor: 'white' }}>
<Menu
key={defaultOpenKeys.join('-')}
style={{ height: '100%', borderRight: 0 }}
- defaultOpenKeys={defaultOpenKeys}
+ openKeys={openKeys}
selectedKeys={path ? [path] : []}
+ onOpenChange={onOpenChange}
mode="inline">
{render(menudata, history)}
</Menu>
- // </Layout.Sider>
);
}
@@ -56,7 +63,7 @@
return data.map(({ name, icon, path, count, children, type }, index) =>
children && children.length ? (
<SubMenu
- key={name}
+ key={path}
title={
<span>
<Icon type={icon || 'setting'} />
@@ -84,7 +91,7 @@
};
const find = (data, full, pathname = { path: '', name: '' }) =>
- data.reduce((pn, { path, name, children }) => {
+ data.reduce((pn, { path, name, parentKey, children }) => {
if (children && children.length) {
return find(children, full, pn);
}
@@ -92,7 +99,7 @@
path.length > pn.path.length &&
full.replace(/\/\d+/g, '').startsWith(path.replace(/\/\d+/g, ''))
) {
- return { path, name };
+ return { path, name, parentKey };
}
return pn;
}, pathname);
diff --git a/src/components/common/SearchFormView/index.jsx b/src/components/common/SearchFormView/index.jsx
index dbe59c9..f187baa 100644
--- a/src/components/common/SearchFormView/index.jsx
+++ b/src/components/common/SearchFormView/index.jsx
@@ -6,13 +6,37 @@
/** 表单搜索组件 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
-import { Row, Col, Form, Input, Button, Select, DatePicker, Divider } from 'antd';
+import { Row, Col, Form, Input, Button, Select, DatePicker, Divider, Card } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;
import './index.scss';
-
+// data参数：数据模板
+// [
+// { type: 'input', name: '姓名', label: '姓名', key: 'name' }, //inpu类型
+// {
+// type: 'select',
+// name: '所属部门',
+// label: '所属部门',
+// key: 'deptId',
+// desc: 'deptName',
+// list: [{ name: '1', value: '选项1' }, { name: '2', value: '选项2' }],
+// }, //select 类型
+// {
+// type: 'rangePicker',
+// label: '时间范围',
+// name: JSON.stringify(['开始时间', '结束时间']),
+// key: JSON.stringify(['startTime', 'endTime']),
+// keylistName: 'rangeTimelist',
+// }, //时间范围选择器
+// {
+// type: 'datePicker',
+// label: '指定时间',
+// name: '指定日期',
+// key: 'date'
+// } //时间选择器
+// ]
export default class SearchFormView extends Component {
constructor(props) {
super(props);
@@ -27,7 +51,6 @@
componentDidMount() { }
onClick = type => {
- const { pathName } = this.props;
let data;
switch (type) {
case 'search':
@@ -83,121 +106,112 @@
});
};
-
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}>
+ <Card bordered={false}>
{data.length > 0 &&
data.map((item, idx) => (
- <React.Fragment key={idx}>
+ <Card.Grid key={idx} style={{ width: '20%' }} hoverable={false} >
{(() => {
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>
+ <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>
);
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>
+ <Form.Item label={item.label}>
+ <Input
+ size="small"
+ placeholder={item.name}
+ name={item.key}
+ value={formData[item.key]}
+ onChange={this.handleInput}
+ />
+ </Form.Item>
);
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>
+ <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>
);
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>
+ <Form.Item label={item.label}>
+ <RangePicker
+ style={{ width: '100%'}}
+ 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>
);
- case 'br':
- return (
- <Col span={24} style={{ marginBottom: '10px' }} />
- );
+ // case 'br':
+ // return (
+ // <Col span={24} style={{ marginBottom: '10px' }} />
+ // );
default:
return null;
}
})()}
- </React.Fragment>
+ </Card.Grid>
))}
-
- <Col>
- <Row type="flex" gutter={20} align="middle" align="middle">
+ <Card.Grid style={{ width: '20%' }}>
+ <Row type="flex" gutter={20} align="middle" align="middle" style={{ height: 40 }}>
<Col>
<Button
size="small"
@@ -224,11 +238,9 @@
</Col>
}
</Row>
- </Col>
- </Row>
-
+ </Card.Grid>
+ </Card>
</div>
-
<Divider />
</div>
)
diff --git a/src/components/common/SearchFormView/index.scss b/src/components/common/SearchFormView/index.scss
index 5f0238f..eadaa37 100644
--- a/src/components/common/SearchFormView/index.scss
+++ b/src/components/common/SearchFormView/index.scss
@@ -7,9 +7,12 @@
/** Happy Coding */
.search-form-view {
&-main {
- &-margin-bottom{
- margin-bottom: 18px;
-
+ & .ant-card-grid {
+ padding: 10px 20px 0 10px;
+ box-shadow: none;
+ }
+ &-margin-bottom {
+ margin-bottom: 18px;
}
.ant-form-item {
margin-bottom: 0 !important;
diff --git a/src/components/common/TableView/index.jsx b/src/components/common/TableView/index.jsx
index 643dcdd..41d88c8 100644
--- a/src/components/common/TableView/index.jsx
+++ b/src/components/common/TableView/index.jsx
@@ -24,8 +24,6 @@
};
}
- componentWillMount() { }
-
componentDidMount() {
let { page, size } = this.props.formData;
this.loadData(page, size);
diff --git a/src/components/common/TopListTableView/index.jsx b/src/components/common/TopListTableView/index.jsx
index d359b2b..595b4a9 100644
--- a/src/components/common/TopListTableView/index.jsx
+++ b/src/components/common/TopListTableView/index.jsx
@@ -46,7 +46,7 @@
<span className="top-list-table-view-main-table-title-fuc">查看</span>
</div>
<Table
- dataSource={dataSource || []}
+ dataSource={dataSource ? dataSource.map((a, idx) => ({ ...a, key: idx })) : []}
columns={columns}
size="small"
bordered={false}
diff --git a/src/components/page/DocumentEditPage/index.jsx b/src/components/page/DocumentEditPage/index.jsx
index 65f4acf..4ec5c62 100644
--- a/src/components/page/DocumentEditPage/index.jsx
+++ b/src/components/page/DocumentEditPage/index.jsx
@@ -42,8 +42,6 @@
loadData = () => {
const { id } = this.props.match.params;
- console.log(this.props)
- console.log(id)
let _this = this;
_this.setState({
loading: true,
@@ -55,15 +53,16 @@
id: id || 'new'
}
}).then(res => {
- console.log(res)
- _this.setState({
- saveData: {
- ...res,
- documentType: res.documentType || 'DT00002'
- },
- loading: false,
- fileList: res.attachmentList && res.attachmentList.map((a) => ({ ...a, key: a.id, uid: a.id, name: a.fileName + '.' + a.suffix, })) || []
- });
+ if (res) {
+ _this.setState({
+ saveData: {
+ ...res,
+ documentType: res.documentType || 'DT00002'
+ },
+ loading: false,
+ fileList: res.attachmentList && res.attachmentList.map((a) => ({ ...a, key: a.id, uid: a.id, name: a.fileName + '.' + a.suffix, })) || []
+ });
+ }
});
}
@@ -79,7 +78,6 @@
submit = () => {
let { saveData, editorContent } = this.state;
// editorContent = emoveTAG(editorContent);
- console.log(saveData)
if (!saveData.documentTitle) {
return message.warning(this.switchWordByType(saveData.documentType).title + '标题不能为空');
}
@@ -98,12 +96,13 @@
documentContent: editorContent
}
}).then(res => {
- console.log(res)
_this.setState({
iconLoading: false,
});
- message.success("提交成功！");
- this.props.history.push(this.switchWordByType(saveData.documentType).href);
+ if (res) {
+ message.success("提交成功！");
+ this.props.history.push(this.switchWordByType(saveData.documentType).href);
+ }
});
}
@@ -135,7 +134,7 @@
}
handleChange = (editorState) => {
- console.log(editorState, editorState.toHTML())
+ console.log('htnl', editorState.toHTML())
this.setState({ editorState, editorContent: editorState.toHTML() })
}
diff --git a/src/components/page/index/rulesList/index.jsx b/src/components/page/index/rulesList/index.jsx
index 9802320..ee82d16 100644
--- a/src/components/page/index/rulesList/index.jsx
+++ b/src/components/page/index/rulesList/index.jsx
@@ -37,7 +37,6 @@
componentDidMount() { }
link = (id) => {
- console.log(id)
this.props.history.push({ pathname: "/document/detail/" + id });
}
@@ -47,9 +46,9 @@
renderColumns = () => {
return [
- { title: '标题', dataIndex: 'documentTitle' },
+ { title: '标题', dataIndex: 'documentTitle', ellipsis: true },
{
- title: '通知内容', dataIndex: 'documentContent', width: '40%', ellipsis: true, render: (cur, item) => {
+ title: '通知内容', dataIndex: 'documentContent', ellipsis: true, render: (cur, item) => {
return cur ? this.emoveTAG(cur) : '无'
}
},
@@ -60,14 +59,12 @@
}
setFormData = data => {
- console.log('form', data);
this.setState({
formData: data,
});
}
onTabsChange = (key) => {
- console.log(key);
}
@@ -94,7 +91,7 @@
>
{
documentId &&
- <FindAlreadyReadOrNotView key={documentId} documentId={documentId}/>
+ <FindAlreadyReadOrNotView key={documentId} documentId={documentId} />
}
</Modal>
diff --git a/src/menu/menu.data.js b/src/menu/menu.data.js
index ebd45cf..18f6622 100644
--- a/src/menu/menu.data.js
+++ b/src/menu/menu.data.js
@@ -5,17 +5,18 @@
*/
const menus = [
{
- key: 'index',
+ key: '/',
name: '首页',
- path: '/app',
+ path: '/',
icon: 'home',
- permKey: 'index',
+ permKey: '/index',
children: [
{
- key: 'index',
+ key: '/index',
name: '工作台',
path: '/index',
permKey: '/index',
+ parentKey: '/',
children: []
},
{
@@ -53,7 +54,7 @@
]
},
{
- key: 'document',
+ key: '/document',
name: '文档管理',
path: '/document',
icon: 'file',
@@ -69,7 +70,7 @@
]
},
{
- key: 'logManage',
+ key: '/logManage',
name: '系统管理',
path: '/logManage',
icon: 'setting',
diff --git a/src/pages/index/System.jsx b/src/pages/index/System.jsx
index 138f5b0..0dcf598 100644
--- a/src/pages/index/System.jsx
+++ b/src/pages/index/System.jsx
@@ -27,7 +27,6 @@
render() {
return (
<div className="System-main">
- <BreadcrumbView data={[{ name: '规章制度' }]} />
<RulesList {...this.props} />
</div>
)
diff --git a/src/pages/index/workbench.jsx b/src/pages/index/workbench.jsx
index a59e6c4..aa2fa7d 100644
--- a/src/pages/index/workbench.jsx
+++ b/src/pages/index/workbench.jsx
@@ -27,7 +27,6 @@
render() {
return (
<div className="workbench-page-main flex-box-column">
- <BreadcrumbView data={[{ name: '工作台' }]} />
<div className="flex-1">
<WorkbenchPage {...this.props}/>
</div>
diff --git a/src/pages/menu/menu.jsx b/src/pages/menu/menu.jsx
index 83d581b..54f24d3 100644
--- a/src/pages/menu/menu.jsx
+++ b/src/pages/menu/menu.jsx
@@ -49,7 +49,7 @@
return p
}
}, []);
- console.log(getMenuListByPermission(menus, permList) )
+ // console.log(getMenuListByPermission(menus, permList) )
this.setState({ data: getMenuListByPermission(menus, permList) });
}
componentDidMount() { }
--
Gitblit v1.8.0