Browse Source

权限管理样式

master
liujiangyong 1 year ago
parent
commit
98d3e33e60
  1. 127
      web/client/src/sections/organization/containers/authority.js
  2. 49
      web/client/src/sections/organization/containers/authority.less
  3. 4
      web/client/src/sections/organization/containers/user.less

127
web/client/src/sections/organization/containers/authority.js

@ -1,9 +1,10 @@
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Row, Col, Card, Button, Tree, Empty } from 'antd';
import { Spin, Row, Col, Card, Button, Tree, Empty, Divider } from 'antd';
import { getDepMessage, getDepUser } from '../actions/user';
import { getResource, getUserResource, postUserRes } from '../actions/authority';
import Resource from '../components/resource';
import './authority.less';
const Authority = (props) => {
const { dispatch, loading, depMessage, depUser, resource, userResource, clientHeight } = props
@ -46,10 +47,15 @@ const Authority = (props) => {
})
}
return (
<Spin spinning={loading}>
<Row gutter={16}>
<Col span={4} style={{ height: '100%' }}>
<Card title="部门" bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
<div className='main'>
<Spin spinning={loading}>
<div>
<div className='title'>
<span className='line'></span>
<span className='cn'>权限功能</span>
<span className='en'>&nbsp;PERMISSION FUNCTION</span>
</div>
<div className='tree-box'>
{
depMessage.length ?
<Tree
@ -73,66 +79,69 @@ const Authority = (props) => {
}}
/> : ''
}
</Card>
</Col>
<Col span={4} style={{ height: '100%', }}>
<Card title={(depSelected ? `[${depSelected}]` : "") + '用户列表'} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
{
depUser.length ?
<Tree
height={clientHeight - 100}
defaultSelectedKeys={[depUser[0].id]}
selectedKeys={userSelectedKeys}
onSelect={(selectedKeys, { selected, selectedNodes, node, event }) => {
const name = node.name
setUseName(name)
<div className='user-list'>
<div className='list-title'>
{(depSelected ? `${depSelected}` : "") + '用户列表'}
</div>
{
depUser.length ?
<Tree
height={clientHeight - 100}
defaultSelectedKeys={[depUser[0].id]}
selectedKeys={userSelectedKeys}
onSelect={(selectedKeys, { selected, selectedNodes, node, event }) => {
const name = node.name
setUseName(name)
if (selected) {
setUserSelectedKeys(selectedKeys)
setUserSelected(selectedNodes[0].username || '')
dispatch(getUserResource(selectedKeys[0]))
}
if (selected) {
setUserSelectedKeys(selectedKeys)
setUserSelected(selectedNodes[0].username || '')
dispatch(getUserResource(selectedKeys[0]))
}
}}
treeData={depUser}
fieldNames={{
title: 'name',
key: 'id'
}}
/> : <Empty />
}
}}
treeData={depUser}
fieldNames={{
title: 'name',
key: 'id'
}}
/> : <Empty />
}
</div>
</div>
</div>
<Divider />
<div className='list-title'>
{`${useName ? useName : '管理员'}】 功能范围`}
</div>
{depUser.length ?
<Card bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
<Resource
userSelected={userSelected}
roleData={resource}
userRole={userResource}
setResCode={setResCode}
userType={userType}
/>
<Row type="flex" justify="center" style={{ marginBottom: 16, marginTop: 16, textAlign: 'center' }}>
<Col span="24">
<Button
disabled={userSelected === "SuperAdmin" || userType === 4}
onClick={handleSave}
style={{ width: '60%' }}
type='primary'>保存修改</Button>
</Col></Row>
</Card>
: <Card title={`[]功能范围`} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
<Empty />
</Card>
</Col>
<Col span={16} style={{ height: '100%', }}>
{depUser.length ?
<Card title={`[${useName ? useName : '管理员'}] 功能范围`} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
<Resource
userSelected={userSelected}
roleData={resource}
userRole={userResource}
setResCode={setResCode}
userType={userType}
/>
<Row type="flex" justify="center" style={{ marginBottom: 16, marginTop: 16, textAlign: 'center' }}>
<Col span="24">
<Button
disabled={userSelected === "SuperAdmin" || userType === 4}
onClick={handleSave}
style={{ width: '60%' }}
type='primary'>保存修改</Button>
</Col></Row>
</Card>
: <Card title={`[]功能范围`} bordered={false} bodyStyle={{ padding: 8, paddingTop: 24 }}>
<Empty />
</Card>
}
</Col>
</Row>
</Spin >
}
</Spin>
</div>
)
}
function mapStateToProps (state) {
function mapStateToProps(state) {
const { userResource, resource, depMessage, depUser, global } = state;
return {
clientHeight: global.clientHeight,

49
web/client/src/sections/organization/containers/authority.less

@ -0,0 +1,49 @@
.main {
width: 100%;
background: #fff;
padding: 10px 16px;
.title {
display: inline-block;
.line {
display: inline-block;
width: 3px;
height: 20px;
background: #006BE3;
}
.cn {
font-family: YouSheBiaoTiHei;
font-size: 24px;
color: #101531;
margin-left: 11px;
}
.en {
font-family: D-DINExp-Italic;
font-weight: Italic;
font-size: 12px;
color: #969799;
}
}
.tree-box {
display: flex;
width: 100%;
.user-list {
display: flex;
flex-direction: column;
margin-left: 100px;
}
}
.list-title {
font-family: PingFangSC-Medium;
font-weight: 600;
font-size: 16px;
color: #000000d9;
margin-left: 15px;
}
}

4
web/client/src/sections/organization/containers/user.less

@ -1,13 +1,13 @@
.dep-box {
height: 213px;
background: #fff;
padding: 16px;
padding: 10px 16px;
margin-bottom: 20px;
}
.user-box {
background: #fff;
padding: 16px;
padding: 10px 16px;
}
.top {

Loading…
Cancel
Save