权限管理样式

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,

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;
+    }
+}

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 {