forked from huge/frontEnd/hugeOA

1
liuwh
2020-04-06 12d561aea1143eae863d80edebf8b4cbe3cc85df
1
6 files modified
400 ■■■■■ changed files
src/components/common/HeadView/index.jsx 27 ●●●●● patch | view | raw | blame | history
src/components/common/NotifyList/index.jsx 32 ●●●● patch | view | raw | blame | history
src/components/common/TopListTableView/index.jsx 17 ●●●●● patch | view | raw | blame | history
src/components/common/TopListTableView/tagList.js 125 ●●●●● patch | view | raw | blame | history
src/components/page/index/rulesList/index.jsx 1 ●●●● patch | view | raw | blame | history
src/pages/login/login.jsx 198 ●●●● patch | view | raw | blame | history
src/components/common/HeadView/index.jsx
@@ -6,7 +6,7 @@
/** 头部组件 */
import React from 'react';
import React, { useEffect } from 'react';
import { Layout, Menu, Dropdown, Icon, Row, Col, message } from 'antd';
const { Header } = Layout;
import './index.scss';
@@ -30,17 +30,24 @@
export default function MenuView({ }) {
  var loginUser = window.localStorage.getItem('loginUser') || '{}';
  loginUser = JSON.parse(loginUser);
  console.log(loginUser)
  return (
    <Header style={{ background: '#fff', padding: 0, boxShadow: 'inset 0 -1px 0 0 #E5E5E5' }}>
      <Row type="flex" align="middle" justify="end" >
        <Col style={{ marginRight: 40 }}>
          <Dropdown overlay={menu}>
            <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
              登陆人<Icon type="down" />
            </a>
          </Dropdown>
        </Col>
      </Row>
      {
        (loginUser && Object.keys(loginUser).length) &&
        <Row type="flex" align="middle" justify="end" >
          <Col style={{ marginRight: 40 }}>
            {loginUser.trueName}&nbsp;&nbsp;&nbsp;
            <Dropdown overlay={menu}>
              <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                [{loginUser.dept} | {loginUser.post}]<Icon type="caret-down" />
              </a>
            </Dropdown>
          </Col>
        </Row>
      }
    </Header>
  );
}
src/components/common/NotifyList/index.jsx
@@ -7,6 +7,7 @@
/** 通知列表 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Alert } from 'antd';
import fetch from '../../../api/request';
import './index.scss';
@@ -16,10 +17,20 @@
    this.config = {
    };
    this.state = {
      content: ''
    };
  }
  componentWillMount() { }
  componentWillMount() {
    fetch({
      url: `api/document/getNewNotice`
    }).then(res => {
      console.log('res', res);
      this.setState({
        content: res.documentContent || ''
      })
    })
  }
  componentDidMount() { }
@@ -28,6 +39,7 @@
  }
  renderDom = () => {
    let { content } = this.state;
    return <div className="notify-list-main-dom">
      <span className="notify-list-main-dom-msg">最新通知:公司本部从XX时间开始,调整省略很长很长的内容调整省略很长很长的内容公司本部从XX时间开始,调整省略很长很长的内容调整省略很长很长的内容公司本部从XX时间开始,调整省略很长很长的内容调整省略很长很长的内容</span>
      <span className="notify-list-main-dom-fuc" onClick={this.onClick}>[查看全部]</span>
@@ -35,15 +47,19 @@
  }
  render() {
    let { content } = this.state;
    return (
      <div className="notify-list-main">
        <Alert
          // message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
          message={this.renderDom()}
          type="warning"
          closable={false}
        // onClose={onClose}
        />
        {
          content &&
          <Alert
            // message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
            message={this.renderDom()}
            type="warning"
            closable={false}
          />
        }
      </div>
    )
  }
src/components/common/TopListTableView/index.jsx
@@ -7,7 +7,7 @@
/** 榜单table列表 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Table, Row, Col } from 'antd';
import { tagList } from './tagList';
import { tagList, tag } from './tagList';
import fetch from '../../../api/request';
import './index.scss';
@@ -28,21 +28,25 @@
      url: `api/merits/queryMerits`
    }).then(res => {
      console.log('res', res);
    })
    this.setState({
      topList: tagList
      this.setState({
        topList: [
          { ...tag['latenessRanking'], dataSource: res['latenessRanking'] },
          { ...tag['meritsRanking'], dataSource: res['meritsRanking'] },
          { ...tag['defectRanking'], dataSource: res['defectRanking'] },
        ]
      })
    })
  }
  componentDidMount() { }
  renderDom = ({ name, columns }) => {
  renderDom = ({ name, columns, dataSource }) => {
    return <div className="top-list-table-view-main-table">
      <div className="top-list-table-view-main-table-title">{name}
        <span className="top-list-table-view-main-table-title-fuc">查看</span>
      </div>
      <Table
        dataSource={[{ age: 1 }]}
        dataSource={dataSource || []}
        columns={columns}
        size="small"
        bordered={false}
@@ -53,6 +57,7 @@
  render() {
    let { topList } = this.state;
    console.log(topList)
    return (
      <div className="top-list-table-view-main">
        <Row type="flex" gutter={12}>
src/components/common/TopListTableView/tagList.js
@@ -1,83 +1,108 @@
/* eslint-disable */
export const tagList = [
  {
    name: '考勤榜单',
    columns: [
      {
        title: '名词',
        dataIndex: 'index',
        key: 'index'
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '部门',
        dataIndex: 'part',
        key: 'part'
      },
      {
        title: '次数',
        dataIndex: 'count',
        key: 'count'
      },
      {
        title: '时长(分)',
        dataIndex: 'time',
        key: 'timer'
      }
    ]
  },
  {
export const tag = {
  // 绩效排行
  meritsRanking: {
    name: '绩效榜单',
    columns: [
      {
        title: '名词',
        title: '名次',
        dataIndex: 'index',
        key: 'index'
        key: 'index',
        render: (item, cur, idx) => {
          return idx + 1;
        }
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
        dataIndex: 'userName',
        key: 'userName'
      },
      {
        title: '部门',
        dataIndex: 'part',
        key: 'part'
        dataIndex: 'userDeptName',
        key: 'userDeptName'
      },
      {
        title: '绩效得分',
        dataIndex: 'score',
        key: 'score'
        dataIndex: 'meritsGrade',
        key: 'meritsGrade',
        render: (cur, item) => {
          return cur + '分';
        }
      }
    ]
  },
  {
  // 缺陷排行
  defectRanking: {
    name: '缺陷榜单',
    columns: [
      {
        title: '名词',
        title: '名次',
        dataIndex: 'index',
        key: 'index'
        key: 'index',
        render: (item, cur, idx) => {
          return idx + 1;
        }
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
        dataIndex: 'userName',
        key: 'userName'
      },
      {
        title: '部门',
        dataIndex: 'part',
        key: 'part'
        dataIndex: 'userDeptName',
        key: 'userDeptName'
      },
      {
        title: '缺陷数',
        dataIndex: 'quexianshu',
        key: 'quexianshu'
        dataIndex: 'defectNumber',
        key: 'defectNumber',
        render: (cur, item) => {
          return cur + '个';
        }
      }
    ]
  },
  latenessRanking: {
    name: '考勤(迟到)榜单',
    columns: [
      {
        title: '名次',
        dataIndex: 'index',
        key: 'index',
        render: (item, cur, idx) => {
          return idx + 1;
        }
      },
      {
        title: '姓名',
        dataIndex: 'userName',
        key: 'userName'
      },
      {
        title: '部门',
        dataIndex: 'userDeptName',
        key: 'userDeptName'
      },
      {
        title: '次数',
        dataIndex: 'lateness',
        key: 'lateness',
        render: (item, cur) => {
          return item + '次';
        }
      },
      {
        title: '时长(分)',
        dataIndex: 'latenessTime',
        key: 'latenessTime',
        render: (item, cur) => {
          return item + '分钟';
        }
      }
    ]
  }
];
};
src/components/page/index/rulesList/index.jsx
@@ -6,6 +6,7 @@
/** 工作制度 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Button } from 'antd';
import TableView from '../../../common/TableView';
import SearchFormView from '../../../common/SearchFormView';
import moment from 'moment';
src/pages/login/login.jsx
@@ -14,121 +14,121 @@
import fetch from '../../api/request';
class NormalLoginForm extends React.Component {
    constructor(props) {
        super(props);
        this.config = {
            navigationBarTitleText: '',
        };
        this.state = {
            btnLoading: false
        };
    }
    componentWillMount() {
        document.title = '用户登录'
    }
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                this.setState({
                    btnLoading: true
                });
                fetch({
                    url: `api/account/login`,
                    method: 'POST',
                    data: {
                        ...values
                    }
                }).then(res => {
                    this.setState({
                        btnLoading: false
                    })
                    if (res) {
                        this.handleRes(res);
                    }
                })
            }
        });
  constructor(props) {
    super(props);
    this.config = {
      navigationBarTitleText: '',
    };
    this.state = {
      btnLoading: false
    };
  }
  componentWillMount() {
    document.title = '用户登录'
  }
    handleRes = (res) => {
        // 将token放入缓存
        window.localStorage.setItem('token', res.token);
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        this.setState({
          btnLoading: true
        });
        fetch({
            url: `api/resource/getResource`,
          url: `api/account/login`,
          method: 'POST',
          data: {
            ...values
          }
        }).then(res => {
            console.log('res', res);
            if (res) {
                window.localStorage.setItem('menu', JSON.stringify(res));
                message.success('登录成功');
                this.props.history.push({ pathname: "/index" });
            }
          this.setState({
            btnLoading: false
          })
          if (res) {
            this.handleRes(res);
          }
        })
      }
    });
  };
  handleRes = (res) => {
    }
    // 将token放入缓存
    window.localStorage.setItem('token', res.token);
    window.localStorage.setItem('loginUser', JSON.stringify(res));  //登录的用户信息
    render() {
        const { getFieldDecorator } = this.props.form;
        const { btnLoading } = this.state;
        return (
            <div className="login-main">
                <div className="login-div">
                    <div className="login-div-top">
                        <img className="login-div-top-img" src={logo} />
                    </div>
                    <div className="login-div-content">
                        <div className="login-div-content-div">
                            <div className="login-div-content-div-title">登录OA云平台</div>
                            <Form onSubmit={this.handleSubmit} className="login-form">
                                <Form.Item className="login-div-content-form-flex" >
                                    {getFieldDecorator('account', {
                                        rules: [{ required: true, message: '请输入账号!' }],
                                    })(
                                        <Input
                                            style={{ width: '32vh', height: '5vh', margin: '12px' }}
                                            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            placeholder="请输入账号"
                                        />,
                                    )}
                                </Form.Item>
                                <Form.Item className="login-div-content-form-flex">
                                    {getFieldDecorator('credential', {
                                        rules: [{ required: true, message: '请输入密码!' }],
                                        initialValue: 'admin'
                                    })(
                                        <Input
                                            style={{ width: '32vh', height: '5vh', margin: '12px' }}
                                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            type="password"
                                            placeholder="请输入密码"
                                        />,
                                    )}
                                </Form.Item>
                                <Form.Item className="login-div-content-form-flex">
                                    {/* {getFieldDecorator('remember', {
    // 获取登录用户的菜单权限
    fetch({
      url: `api/resource/getResource`,
    }).then(res => {
      console.log('res', res);
      if (res) {
        window.localStorage.setItem('menu', JSON.stringify(res));
        message.success('登录成功');
        this.props.history.push({ pathname: "/index" });
      }
    })
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { btnLoading } = this.state;
    return (
      <div className="login-main">
        <div className="login-div">
          <div className="login-div-top">
            <img className="login-div-top-img" src={logo} />
          </div>
          <div className="login-div-content">
            <div className="login-div-content-div">
              <div className="login-div-content-div-title">登录OA云平台</div>
              <Form onSubmit={this.handleSubmit} className="login-form">
                <Form.Item className="login-div-content-form-flex" >
                  {getFieldDecorator('account', {
                    rules: [{ required: true, message: '请输入账号!' }],
                  })(
                    <Input
                      style={{ width: '32vh', height: '5vh', margin: '12px' }}
                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      placeholder="请输入账号"
                    />,
                  )}
                </Form.Item>
                <Form.Item className="login-div-content-form-flex">
                  {getFieldDecorator('credential', {
                    rules: [{ required: true, message: '请输入密码!' }],
                    initialValue: 'admin'
                  })(
                    <Input
                      style={{ width: '32vh', height: '5vh', margin: '12px' }}
                      prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      type="password"
                      placeholder="请输入密码"
                    />,
                  )}
                </Form.Item>
                <Form.Item className="login-div-content-form-flex">
                  {/* {getFieldDecorator('remember', {
                            valuePropName: 'checked',
                            initialValue: true,
                        })(<Checkbox>记住</Checkbox>)}
                        <a className="login-form-forgot" href="">
                            忘记密码
                        </a> */}
                                    <Button type="primary" htmlType="submit" className="login-form-button" loading={btnLoading}>登录</Button>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                    <div className="login-div-bottom">2011 10215489广州恒巨信息科技有限公司 版权所有 - 粤ICP备10215489号</div>
                </div>
                  <Button type="primary" htmlType="submit" className="login-form-button" loading={btnLoading}>登录</Button>
                </Form.Item>
              </Form>
            </div>
        );
    }
          </div>
          <div className="login-div-bottom">2011 10215489广州恒巨信息科技有限公司 版权所有 - 粤ICP备10215489号</div>
        </div>
      </div>
    );
  }
}
const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);