登录、菜单权限

Mr Ke

2020-04-06 562ece16c022e154197e01170e9d0363ec0b9859

登录、菜单权限

 package.json

@@ -51,6 +51,7 @@
    "less": "^3.11.1",
    "less-loader": "^5.0.0",
    "mockjs": "^1.0.1-beta3",
    "moment": "^2.24.0",
    "react-app-rewired": "^2.1.5"
  }
}

 src/api/httpurl.js

@@ -1,6 +1,6 @@
//内网测试地址
let StagingUrl = 'http://192.168.0.107:8902';
// let StagingUrl = "http://g185t82524.51mypc.cn";
// let StagingUrl = 'http://192.168.0.103:9072';
let StagingUrl = "http://oa.hugeinfo.com.cn";
// let StagingUrl = "http://30z165r838.qicp.vip";



 src/api/request.js

@@ -5,11 +5,7 @@

const CODE_SUCCESS = '200';

let token = window.localStorage.getItem('token') || undefined;
let loginUser = window.localStorage.getItem('loginUser') || undefined;
let posId = loginUser ? JSON.parse(loginUser).posId : undefined;

let recognitionParams = ['posId'].reduce((p, n) => {
let recognitionParams = [].reduce((p, n) => {
  if (eval(n)) {
    p[n] = eval(n);
    return p;
@@ -38,6 +34,7 @@
    autoLogin = true,
    headers = {}
  } = options;
  let token = window.localStorage.getItem('token') || undefined;

  headers['Content-type'] = 'application/json';
  headers['Accept'] = 'application/json';

 src/components/common/HeadView/index.jsx

@@ -7,14 +7,40 @@
/** 头部组件 */

import React from 'react';
import { Layout } from 'antd';
import { Layout, Menu, Dropdown, Icon, Row, Col, message } from 'antd';
const { Header } = Layout;
import './index.scss';

const menu = (
  <Menu>
    <Menu.Item>
      <a onClick={() => {
        // 清空用户相关信息
        window.localStorage.setItem('menu', '');
        window.localStorage.setItem('token', '');
        message.success('退出成功！');
        window.location.href = window.location.origin + '/#/login';
      }}>
        退出
      </a>
    </Menu.Item>

  </Menu>
);

export default function MenuView({ }) {

    return (
        <Header style={{ background: '#fff', padding: 0, boxShadow: 'inset 0 -1px 0 0 #E5E5E5' }} />
    );
  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>
    </Header>
  );
}

 src/components/common/HotListTableView/index.jsx

@@ -8,8 +8,10 @@
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import BreadcrumbView from '../BreadcrumbView';
import TableView from '../TableView';
import fetch from '../../../api/request';
import moment from 'moment';

import { Tabs } from 'antd';
import { Tabs, Skeleton } from 'antd';

const { TabPane } = Tabs;

@@ -21,30 +23,131 @@
    this.config = {
    };
    this.state = {
      keywordlist: ['全部'],
      formData: {
        __key: Date.now(),
        keyword: '',
        page: 1,
        size: 10,
      },
      loading: false
    };
  }

  componentWillMount() { }

  componentDidMount() { }
  componentDidMount() {
    let { keywordlist } = this.state;
    // 设置骨架屏
    this.setState({
      loading: true
    })
    fetch({
      url: `api/news/keywordlist`
    }).then(res => {
      console.log('res', res);
      this.setState({
        loading: false
      })
      if (res) {
        this.setState({
          keywordlist: keywordlist.concat(res)
        })
      }
    })
  }

  setFormData = data => {
    console.log('form', data);
    this.setState({
      formData: data,
    });
  }

  renderColumns = () => {
    return [
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        render: (cur, item) => {
          return <a dangerouslySetInnerHTML={{ __html: cur }} onClick={() => {
            window.open(item.url)
          }}>
          </a>
        }
      },
      {
        title: '发布时间',
        key: 'create_time',
        dataIndex: 'create_time',

        render: (cur) => {
          return (
            <React.Fragment>
              {cur && moment(cur).format("YYYY-MM-DD HH:mm")}
            </React.Fragment>
          );
        },
      },
      {
        title: '来源',
        dataIndex: 'keyword',
        key: 'keyword',
      },
    ];
  }

  tabChange = (tab) => {
    console.log('tab', tab);
    let { formData } = this.state
    if (tab == '全部') {
      tab = '';
    }
    this.setState({
      formData: {
        __key: Date.now(),
        keyword: tab,
        page: 1,
        size: 10,
      }
    })
  }

  render() {
    let { keywordlist, formData, loading } = this.state;
    let tableParams = {
      url: `api/news/newslist`,
      formData,
      key: formData.__key,
      columns: this.renderColumns(),
      extraFromData: {
      },
      setFormData: this.setFormData
    }
    return (
      <div className="hot-list-table-view-main">
        <BreadcrumbView data={[{ name: '行业热点知识库' }]} />
        <div className="hot-list-table-view-main-content">
          <Tabs defaultActiveKey="1" >
            <TabPane tab="Tab 1" key="1">
              Content of Tab Pane 1
            </TabPane>
            <TabPane tab="Tab 2" key="2">
              Content of Tab Pane 2
            </TabPane>
            <TabPane tab="Tab 3" key="3">
              Content of Tab Pane 3
            </TabPane>
          </Tabs>
        </div>
        {
          loading ? <div style={{ padding: 10 }}>
            <Skeleton />
          </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>
        }
      </div>
    )
  }

 src/components/common/HotListTableView/index.scss

@@ -8,10 +8,18 @@
.hot-list-table-view {
  &-main {
    margin: 24px 0;
    padding-bottom: 24px;
    background: #fff;
    &-content {
      margin: 0 24px 24px 24px;
      margin: 0 24px;
      border: 1px solid #e6e6e6;
    }
    & .ant-tabs-nav .ant-tabs-tab {
      padding: 10px !important;
      font-size: 12px;
    }
    & .ant-tabs-bar {
      margin-bottom: 0 !important;
    }
  }
}

 src/components/common/MenuView/index.jsx

@@ -71,7 +71,7 @@
                    title={name.length > 10 ? name : undefined}
                    onClick={() => {
                        if (type == 'open') {
                            window.open('/#' + path);
                            window.open(path);
                        } else {
                            history.replace(path);
                        }

 src/components/common/TopListTableView/index.jsx

@@ -7,6 +7,7 @@
/** 榜单table列表 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Table, Row, Col } from 'antd';
import { tagList } from './tagList';
import './index.scss';


@@ -16,23 +17,26 @@
    this.config = {
    };
    this.state = {
      topList: []
    };
  }

  componentWillMount() { }
  componentWillMount() {
    this.setState({
      topList: tagList
    })
  }

  componentDidMount() { }

  renderDom = () => {
  renderDom = ({ name, columns }) => {
    return <div className="top-list-table-view-main-table">
      <div className="top-list-table-view-main-table-title">主题</div>
      <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 }]}
        columns={[{
          title: '年龄',
          dataIndex: 'age',
          key: 'age'
        }]}
        columns={columns}
        size="small"
        bordered={false}
        pagination={false}
@@ -41,13 +45,13 @@
  }

  render() {

    let { topList } = this.state;
    return (
      <div className="top-list-table-view-main">
        <Row type="flex" gutter={12}>
          {
            [1, 2, 3].map((item, idx) => {
              return <Col span={24 / 3} key={idx}>{this.renderDom()}</Col>;
            topList.map((item, idx) => {
              return <Col span={24 / 3} key={idx}>{this.renderDom(item)}</Col>;
            })
          }
        </Row>

 src/components/common/TopListTableView/index.scss

@@ -167,8 +167,21 @@
        color: #323232;
        text-align: center;
        line-height: 22px;
        padding-bottom: 15px;
        margin-bottom: 15px;
        font-weight: bold;
        position: relative;
        &-fuc {
          position: absolute;
          right: 0;
          bottom: 0;
          font-family: PingFangSC-Medium;
          font-size: 12px;
          color: #559de6;
          text-align: center;
          line-height: 20px;
          margin-right: 20px;
          cursor: pointer;
        }
      }
    }
  }

 src/components/common/TopListTableView/tagList.js

New file
@@ -0,0 +1,83 @@
/* 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'
      }
    ]
  },
  {
    name: '绩效榜单',
    columns: [
      {
        title: '名词',
        dataIndex: 'index',
        key: 'index'
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '部门',
        dataIndex: 'part',
        key: 'part'
      },
      {
        title: '绩效得分',
        dataIndex: 'score',
        key: 'score'
      }
    ]
  },
  {
    name: '缺陷榜单',
    columns: [
      {
        title: '名词',
        dataIndex: 'index',
        key: 'index'
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '部门',
        dataIndex: 'part',
        key: 'part'
      },
      {
        title: '缺陷数',
        dataIndex: 'quexianshu',
        key: 'quexianshu'
      }
    ]
  }
];

 src/index.css

@@ -22,6 +22,8 @@
  height: 100%;
}

/* .ant-layout-sider-trigger {
  background: #58bc58;
} */
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


 src/index.js

@@ -41,7 +41,7 @@
          <Content>
            <Switch>
              {/* 首页 */}
              <Route path="/index/workbench" component={Workbench} />
              <Route path="/index" component={Workbench} />

              <Route path="/login" component={Login} />


 src/menu/menu.data.js

@@ -9,38 +9,81 @@
    name: '首页',
    path: '/app',
    icon: 'home',
    permKey: 'menu.home',
    children: [{
      key: 'index_workbench',
    permKey: 'index',
    children: [
      {
        key: 'index',
        name: '工作台',
        path: '/index/workbench',
        permKey: '/index/workbench',
        path: '/index',
        permKey: '/index',
        children: []
    }],
      },
      {
        key: '/index/rules',
        name: '规章制度',
        path: '/index/rules',
        permKey: '/index/rules',
        children: []
      }
    ]
  },
  // {
  //   key: 'collect',
  //   name: '信息采集',
  //   path: '/collect',
  //   icon: 'user',
  //   permKey: 'menu.users',
  //   children: [
  //     {
  //       key: 'collect_jurisdictionPersonMgt',
  //       name: '辖区人口管理',
  //       path: '/collect/jurisdictionPersonMgt',
  //       permKey: 'collect_jurisdictionPersonMgt',
  //       children: [],
  //     },
  //     {
  //       key: 'collect_personhouseMgt',
  //       name: '查人查房管理',
  //       path: '/collect/personhouseMgt',
  //       permKey: 'collect_personhouseMgt',
  //       children: [],
  //     }
  //   ],
  // },
  {
    key: 'workOffice',
    name: '办公',
    path: 'http://120.79.193.119:9090/',
    icon: 'desktop',
    permKey: 'workOffice',
    children: [
      {
        key: 'workOffice',
        name: 'GitBilt',
        path: 'http://120.79.193.119:9090/',
        permKey: 'http://120.79.193.119:9090/',
        children: [],
        type: 'open'
      },
      {
        key: 'workOffice',
        name: 'Teambition',
        path: 'https://account.teambition.com/login/password',
        permKey: 'https://account.teambition.com/login/password',
        children: [],
        type: 'open'
      }
    ]
  },
  {
    key: 'document',
    name: '文档管理',
    path: '/document',
    icon: 'file',
    permKey: 'document',
    children: [
      {
        key: '/document/create',
        name: '新建文档',
        path: '/document/create',
        permKey: '/document/create',
        children: []
      }
    ]
  },
  {
    key: 'logManage',
    name: '系统管理',
    path: '/logManage',
    icon: 'setting',
    permKey: 'logManage',
    children: [
      {
        key: '/logManage/browseLog',
        name: '浏览日志',
        path: '/logManage/browseLog',
        permKey: '/logManage/browseLog',
        children: []
      }
    ]
  }
];

export default menus;

 src/pages/Index.jsx

@@ -20,15 +20,6 @@

  componentDidMount() {
    document.title = 'Index';
    fetch({
      url: 'hik-common/api/opus/user/loginTest',
      params: {
        loginName: 'lilinl',
        passWord: 'qweqw',
      }
    }).then(res => {
      console.log('res', res);
    })
  }

  render() {

 src/pages/index/workbench.jsx

@@ -26,9 +26,11 @@

  render() {
    return (
      <div className="workbench-page-main">
      <div className="workbench-page-main flex-box-column">
        <BreadcrumbView data={[{ name: '工作台' }]} />
        <WorkbenchPage />
        <div className="flex-1">
          <WorkbenchPage />
        </div>
      </div>
    )
  }

 src/pages/login/login.jsx

@@ -36,8 +36,9 @@
                    btnLoading: true
                });
                fetch({
                    url: `hik-common/api/opus/user/loginTest`,
                    params: {
                    url: `api/account/login`,
                    method: 'POST',
                    data: {
                        ...values
                    }
                }).then(res => {
@@ -53,18 +54,21 @@
    };

    handleRes = (res) => {
        let loginUser = {};
        let curPosIndex = window.localStorage.getItem('curPosIndex');
        curPosIndex = (curPosIndex || curPosIndex == {}) || 0;
        loginUser = res.user[curPosIndex];

        window.localStorage.setItem('user', res);
        // 将token放入缓存
        window.localStorage.setItem('token', res.token);
        window.localStorage.setItem('curPosIndex', curPosIndex);
        window.localStorage.setItem('loginUser', JSON.stringify(loginUser));
        message.success('登录成功', () => {
            this.props.history.push({ pathname: "/index" });

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


    }

@@ -82,24 +86,24 @@
                            <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('loginName', {
                                    {getFieldDecorator('account', {
                                        rules: [{ required: true, message: '请输入账号!' }],
                                    })(
                                        <Input
                                            style={{ width: '32vh',height: '5vh',margin:'12px' }}
                                            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('passWord', {
                                    {getFieldDecorator('credential', {
                                        rules: [{ required: true, message: '请输入密码!' }],
                                        initialValue: 'psw'
                                        initialValue: 'admin'
                                    })(
                                        <Input
                                            style={{ width: '32vh',height: '5vh',margin:'12px' }}
                                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)'}} />}
                                            style={{ width: '32vh', height: '5vh', margin: '12px' }}
                                            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                            type="password"
                                            placeholder="请输入密码"
                                        />,

 src/pages/menu/menu.jsx

@@ -10,8 +10,8 @@
import { Spin, Layout, Menu, Icon } from 'antd';
import MenView from '../../components/common/MenuView';
import { menus, getMenuListByPermission } from '../../menu';
import fetch from '../../api/request';

// import Fetch from '../fetch';
const { Sider } = Layout;

function find(data, pathname) {
@@ -39,9 +39,20 @@
    };
  }

  componentDidMount() {
    this.setState({ data: menus });
  componentWillMount() {
    // 获取从登录页面记录在缓存里的菜单数据
    let menu = window.localStorage.getItem('menu') ? JSON.parse(window.localStorage.getItem('menu')) : [];
    let permList = menu && menu.map(({ symbol }) => (symbol)).concat(menu.map(({ moduleSymbol }) => (moduleSymbol))).reduce((p, n) => {
      if (p.indexOf(n) == -1) {
        return p.concat(n)
      } else {
        return p
      }
    }, []);
    console.log(getMenuListByPermission(menus, permList) )
    this.setState({ data: getMenuListByPermission(menus, permList) });
  }
  componentDidMount() { }

  onCollapse = collapsed => {
    this.setState({ collapsed });

 src/style/reset.scss

@@ -2,7 +2,51 @@
  margin-bottom: 20px;
}

.ant-layout-sider-trigger{
  background: #CC4E45;
.ant-layout-sider-trigger {
  background: #cc4e45;
}

.ant-layout-sider {
  background-color: #fff !important;
}

*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 2.5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #848484;
}
*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2.5px;
  background: #ededed;
}

.ant-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ant-layout-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-box-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.flex-1 {
  flex: 1;
  overflow-y: auto;
}