| | |
| | | |
| | | /** 头部组件 */ |
| | | |
| | | 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'; |
| | |
| | | |
| | | 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} |
| | | <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> |
| | | ); |
| | | } |
| | |
| | | /** 通知列表 */ |
| | | import React, { ReactNode, ReactEventHandler, Component } from 'react'; |
| | | import { Alert } from 'antd'; |
| | | import fetch from '../../../api/request'; |
| | | |
| | | import './index.scss'; |
| | | |
| | |
| | | this.config = { |
| | | }; |
| | | this.state = { |
| | | content: '' |
| | | }; |
| | | } |
| | | |
| | | componentWillMount() { } |
| | | componentWillMount() { |
| | | fetch({ |
| | | url: `api/document/getNewNotice` |
| | | }).then(res => { |
| | | console.log('res', res); |
| | | this.setState({ |
| | | content: res.documentContent || '' |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | componentDidMount() { } |
| | | |
| | |
| | | } |
| | | |
| | | 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> |
| | |
| | | } |
| | | |
| | | 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> |
| | | ) |
| | | } |
| | |
| | | /** 榜单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'; |
| | |
| | | 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} |
| | |
| | | |
| | | render() { |
| | | let { topList } = this.state; |
| | | console.log(topList) |
| | | return ( |
| | | <div className="top-list-table-view-main"> |
| | | <Row type="flex" gutter={12}> |
| | |
| | | /* 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 + '分钟'; |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | ]; |
| | | }; |
| | |
| | | |
| | | /** 工作制度 */ |
| | | 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'; |
| | |
| | | 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); |