提升菜单栏体验，升级公共查询表单组件

Mr Ke

2020-04-29 c0c820559b46f3a5ede6fbd7f66e77d09981829f

提升菜单栏体验，升级公共查询表单组件

 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);

 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>
        )

 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;

 src/components/common/TableView/index.jsx

@@ -24,8 +24,6 @@
        };
    }

    componentWillMount() { }

    componentDidMount() {
        let { page, size } = this.props.formData;
        this.loadData(page, size);

 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}

 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() })
  }


 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>

 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',

 src/pages/index/System.jsx

@@ -27,7 +27,6 @@
  render() {
    return (
      <div className="System-main">
        <BreadcrumbView data={[{ name: '规章制度' }]} />
        <RulesList {...this.props} />
      </div>
    )

 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>

 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() { }