Skip to content

C
CivManage
Commit 6f3aa35e authored by 陈前坚's avatar 陈前坚
Browse files
Options

perf: style

parent c7af9ddd
Hide whitespace changes
Inline Side-by-side
Showing with 190 additions and 141 deletions
src/pages/appConfig/AppMenu.js
View file @ 6f3aa35e
......@@ -162,6 +162,7 @@ const AppMenu = () => {
// 获取当前菜单详细
const onSelect = (props, e) => {
// e.node.pos节点类型，根据这个渲染不同的编辑表单item,0-x一级菜单，0-0-x二级，0-0-0-x三级
console.log(e);
if (e) {
if (e.node.pos.lastIndexOf('-') === 1) {
setNodeType(1);
......
src/pages/userCenter/UserManage.js
View file @ 6f3aa35e
......@@ -18,7 +18,7 @@ import {
Spin,
} from 'antd';
import {
FileAddTwoTone,
UsergroupAddOutlined,
FolderAddTwoTone,
EditTwoTone,
DeleteTwoTone,
......@@ -29,6 +29,8 @@ import {
StopOutlined,
FolderOpenOutlined,
FileOutlined,
DoubleLeftOutlined,
DoubleRightOutlined,
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
// import classnames from 'classnames';
......@@ -58,42 +60,46 @@ const UserManage = () => {
const [loading, setLoading] = useState(true);
const [treeData, setTreeData] = useState([]); // 用户机构树
const [treeData1, setTreeData1] = useState([]); // 用户机构树-备份，供更改机构使用
const [treeData2, setTreeData2] = useState([]);
const [treeState, setTreeState] = useState(true); // 树第一次加载
const [treeVisible, setTreeVisible] = useState(true); // 树是否可见
const [tableData, setTableData] = useState([]); // 用户表
const [searchData, setSearchData] = useState([]);
const [currentSelectOrg, setCurrentSelectOrg] = useState([]);
const [orgFilters, setOrgFilters] = useState([]); // 用户列筛选
// const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 用户表
const [searchData, setSearchData] = useState([]); // 查找用户的结果表
const [currentSelectOrg, setCurrentSelectOrg] = useState([]); // 左侧机构数-选中组织
const [currentSelectOldOrg, setCurrentSelectOldOrg] = useState([]); // 更改机构时的树-选中组织
const [userVisible, setUserVisible] = useState(false);
const [searchUserVisible, setSearchUserVisible] = useState(false);
const [addOrgVisible, setAddOrgVisible] = useState(false);
const [editOrgVisible, setEditOrgVisible] = useState(false);
const [deleteOrgVisible, setDeleteOrgVisible] = useState(false);
const [roleVisible, setRoleVisible] = useState(false);
const [changeOrgVisible, setChangeOrgVisible] = useState(false);
const [passwordVisible, setPasswordVisible] = useState(false);
const [editUserVisible, setEditUserVisible] = useState(false);
const [treeState, setTreeState] = useState(true);
const [freezeUserVisible, setFreezeUserVisible] = useState(false);
const [deleteUserVisible, setDeleteUserVisible] = useState(false);
/** ***Modal弹框,是否可视**** */
const [userVisible, setUserVisible] = useState(false); // 添加用户
const [searchUserVisible, setSearchUserVisible] = useState(false); // 查找用户
const [addOrgVisible, setAddOrgVisible] = useState(false); // 添加机构
const [editOrgVisible, setEditOrgVisible] = useState(false); // 编辑机构
const [deleteOrgVisible, setDeleteOrgVisible] = useState(false); // 删除机构
const [roleVisible, setRoleVisible] = useState(false); // 用户关联
const [changeOrgVisible, setChangeOrgVisible] = useState(false); // 更改机构
const [passwordVisible, setPasswordVisible] = useState(false); // 修改密码
const [editUserVisible, setEditUserVisible] = useState(false); // 编辑用户
const [freezeUserVisible, setFreezeUserVisible] = useState(false); // 冻结用户
const [deleteUserVisible, setDeleteUserVisible] = useState(false); // 删除用户
const [orgTitle, setOrgTitle] = useState('机构');
const [tableTitle, setTableTitle] = useState('0');
const [orgID, setOrgID] = useState();
const [newOrgID, setNewOrgID] = useState();
const [currentUser, setCurrentUser] = useState({});
const [rolelist, setRolelist] = useState([]);
const [stationlist, setStationlist] = useState([]);
const [orgTitle, setOrgTitle] = useState('机构'); // 弹框标题
const [tableTitle, setTableTitle] = useState(0); // 表格标题
const [orgID, setOrgID] = useState(); // 机构ID
const [newOrgID, setNewOrgID] = useState(); // 更改机构新选择的ID
const [currentUser, setCurrentUser] = useState({}); // 当前用户
const [roleValueList, setRoleValueList] = useState({});
const [stationValueList, setStationValueList] = useState({});
const [rolelist, setRolelist] = useState([]); // 角色列表
const [stationlist, setStationlist] = useState([]); // 站点列表
const [roleValueList, setRoleValueList] = useState({}); // 勾选的角色列表
const [stationValueList, setStationValueList] = useState({}); // 勾选的站点列表
const [searchUserForm] = Form.useForm();
const [addUserForm] = Form.useForm();
const [addOrgForm] = Form.useForm();
const [editOrgForm] = Form.useForm();
const [editUserForm] = Form.useForm();
const [passwordForm] = Form.useForm();
/** ***表单相关**** */
const [searchUserForm] = Form.useForm(); // 查找用户
const [addUserForm] = Form.useForm(); // 添加用户
const [addOrgForm] = Form.useForm(); // 添加机构
const [editOrgForm] = Form.useForm(); // 编辑机构
const [editUserForm] = Form.useForm(); // 编辑用户
const [passwordForm] = Form.useForm(); // 修改密码
const { TabPane } = Tabs;
const getRoleValueCallback = useCallback((value, index) => {
......@@ -126,6 +132,8 @@ const UserManage = () => {
dataIndex: 'OUName',
key: 'OUName',
width: 150,
filters: orgFilters,
onFilter: (value, record) => record.OUName === value,
},
{
title: '手机号码',
......@@ -209,6 +217,22 @@ const UserManage = () => {
),
},
];
const [selectionType, setSelectionType] = useState('checkbox');
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(
`selectedRowKeys: ${selectedRowKeys}`,
'selectedRows: ',
selectedRows,
);
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User', // Column configuration not to be checked
name: record.name,
}),
};
// 查找用户的结果表-列
const searchColumns = [
{
title: '所在机构',
......@@ -254,53 +278,25 @@ const UserManage = () => {
const mapTree = org => {
const haveChildren = Array.isArray(org.children) && org.children.length > 0;
return {
title: (
<>
<span>{org.text}</span>
<div className={styles.iconWraper1}>
<Tooltip title="添加用户">
<FileAddTwoTone onClick={e => addUser(e, org.text, org.id)} />
</Tooltip>
<Tooltip title="添加下级机构">
<FolderAddTwoTone onClick={e => addSubOrg(e, org.text, org.id)} />
</Tooltip>
<Tooltip title="编辑当前机构">
<EditTwoTone onClick={e => editOrg(e, org.text, org.id)} />
</Tooltip>
<Tooltip title="删除当前机构">
<DeleteTwoTone onClick={e => deleteOrg(e, org.text, org.id)} />
</Tooltip>
</div>
</>
),
title: org.text,
key: org.id,
// icon: org.leaf ? <FileOutlined /> : <FolderOpenOutlined />,
// 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
children: haveChildren ? org.children.map(i => mapTree(i)) : [],
};
};
const mapTree1 = org => {
const haveChildren = Array.isArray(org.children) && org.children.length > 0;
return {
title: `${org.text}`,
key: org.id,
// icon: org.leaf ? <FileOutlined /> : <FolderOpenOutlined />,
// 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
children: haveChildren ? org.children.map(i => mapTree1(i)) : [],
};
};
// 重新渲染树
const updateTrees = () => {
setTreeLoading(true);
getUserTree(-1, -1)
.then(res => {
if (res.length > 0) {
setTreeLoading(false);
setTreeData1(res);
// setTreeData1(res);
setTreeData(res);
// 第一次加载，默认选择第一个组织
if (treeState) {
onSelect([res[0].id]);
onSelect([res[0].id], false);
setTreeState(false);
}
} else {
......@@ -323,8 +319,12 @@ const UserManage = () => {
}, []);
// 获取当前机构下所有用户
const onSelect = props => {
const onSelect = (props, e) => {
console.log(e);
setTableLoading(true);
if (e) {
setOrgTitle(e.node.title);
}
if (!props[0]) {
setCurrentSelectOrg(currentSelectOrg);
} else {
......@@ -335,7 +335,13 @@ const UserManage = () => {
.then(res => {
if (res.code === 0) {
setTableLoading(false);
setOrgTitle(res.data.GroupName);
// 返回用户表数据结构处理，扁平化
const temp = flatten(getUsers(res.data));
// 设置过滤字段
let arr = temp.map(item => item.OUName);
arr = arr.filter((value, index) => arr.indexOf(value) === index);
setOrgFilters(arr.map(item => ({ text: item, value: item })));
console.log(temp);
setTableTitle(temp.length);
const table = temp.map((item, index) => {
......@@ -347,7 +353,7 @@ const UserManage = () => {
});
setTableData(table);
} else {
setTreeLoading(false);
setTableLoading(false);
notification.error({
message: '获取失败',
description: res.message,
......@@ -359,7 +365,7 @@ const UserManage = () => {
message.error(err);
});
};
// 返回数据结构处理，扁平化
// 返回用户表数据结构处理，扁平化
const getUsers = orgObj => {
let result = orgObj.Users;
result.map(item => {
......@@ -377,59 +383,60 @@ const UserManage = () => {
}
return arr;
};
const getTableTitle = () => `当前机构用户总数（ ${tableTitle} ）`;
// 左侧目录树相关操作
// 查找用户
const searchUser = () => {
setSearchUserVisible(true);
};
const addUser = (e, title, id) => {
// e.stopPropagation();
// 添加用户
const addUser = () => {
setUserVisible(true);
setOrgTitle(`在${title}下添加用户`);
setOrgID(id);
};
const addSubOrg = (e, title, id) => {
// e.stopPropagation();
// 在根目录下添加机构
const addOrg = (title, id) => {
setAddOrgVisible(true);
setOrgTitle(`在${title}下添加机构`);
setOrgTitle(title);
setOrgID(id);
};
const editOrg = (e, title, id) => {
// e.stopPropagation();
// 添加下级机构
const addSubOrg = () => {
setAddOrgVisible(true);
};
// 编辑机构
const editOrg = () => {
setEditOrgVisible(true);
editOrgForm.setFieldsValue({
OUName: title,
OUName: orgTitle,
});
setOrgID(id);
};
const deleteOrg = (e, title, id) => {
// e.stopPropagation();
// 删除机构
const deleteOrg = () => {
setDeleteOrgVisible(true);
setOrgTitle(`删除组织${title}`);
setOrgID(id);
// 删除后默认选择第一个组织
setTreeState(true);
};
// 在currentUser变化后获取
// 在currentUser变化后获取角色列表
useEffect(() => {
if (currentUser && currentUser.userID) {
getRoleList();
}
}, [currentUser]);
// 右侧表格相关操作
/** ***右侧表格相关操作****** */
// 用户关联
const relateRole = record => {
setRoleVisible(true);
setCurrentUser(record);
};
// 更改机构
const changeOrg = record => {
setChangeOrgVisible(true);
setTreeData2(treeData1);
// setTreeData2(treeData1);
setCurrentUser(record);
setCurrentSelectOldOrg(record.OUID);
};
// 修改密码
const changePassword = record => {
setPasswordVisible(true);
passwordForm.setFieldsValue({
......@@ -437,7 +444,7 @@ const UserManage = () => {
});
setCurrentUser(record);
};
// 编辑用户
const editUser = record => {
// console.log(record);
setEditUserVisible(true);
......@@ -449,12 +456,12 @@ const UserManage = () => {
});
setCurrentUser(record);
};
// 冻结用户
const freezeUser = record => {
setFreezeUserVisible(true);
setCurrentUser(record);
};
// 删除用户
const deleteUser = record => {
setDeleteUserVisible(true);
setCurrentUser(record);
......@@ -479,6 +486,7 @@ const UserManage = () => {
});
};
/** ***表单提交相关操作****** */
// 提交-添加用户
const submitAddUser = () => {
postAddUser({
......@@ -568,7 +576,7 @@ const UserManage = () => {
message.error(err);
});
// 提交删除机构
// 提交-删除机构
const submitDeleteOrg = () =>
postDeleteOrg(orgID)
.then(res => {
......@@ -590,7 +598,7 @@ const UserManage = () => {
setTableLoading(false);
message.error(err);
});
// 根据当前 userID 获取用户关联角色
const getRoleList = () => {
setLoading(true);
getUserRelationList(currentUser.userID)
......@@ -613,6 +621,7 @@ const UserManage = () => {
message.error(err);
});
};
// 提交-关联角色
const submitRole = () => {
setUserRelation(
currentUser.userID,
......@@ -642,6 +651,7 @@ const UserManage = () => {
message.error(err);
});
};
// 提交-更改机构
const submitChangeOrg = () =>
addToOrg(currentUser.userID, currentUser.OUID, newOrgID)
.then(res => {
......@@ -662,6 +672,7 @@ const UserManage = () => {
.catch(err => {
message.error(err);
});
// 提交-修改密码
const submitChangePassword = () =>
updateUserPassword(
currentUser.userID,
......@@ -769,32 +780,14 @@ const UserManage = () => {
<PageContainer className={styles.userManageContainer}>
<div className={styles.contentContainer}>
<Spin spinning={treeLoading} tip="loading...">
<div className={styles.orgContainer}>
<span style={{ padding: '8px', fontSize: '16px' }}>
机构列表
<Tooltip title="查找用户">
<SearchOutlined
style={{
fontSize: '18px',
float: 'right',
margin: '4px 4px 0px 12px',
color: '#1890FF',
}}
onClick={searchUser}
/>
</Tooltip>
<Tooltip title="添加下级机构">
<FolderAddTwoTone
style={{
fontSize: '18px',
float: 'right',
marginTop: '4px',
}}
onClick={e => addSubOrg(e, '根目录', '-1')}
/>
</Tooltip>
</span>
<div className={treeVisible ? styles.orgContainer : styles.hide}>
<span style={{ margin: '10px' }}>机构列表</span>
<Tooltip title="添加机构">
<UsergroupAddOutlined
onClick={() => addOrg('根目录', '-1')}
style={{ float: 'right', color: '#1890FF', fontSize: '18px' }}
/>
</Tooltip>
{treeData.length > 0 && (
<Tree
// showLine="true"
......@@ -808,14 +801,56 @@ const UserManage = () => {
)}
</div>
</Spin>
<div style={{ color: '#1890FF', marginTop: '35vh', fontSize: '18px' }}>
{treeVisible && (
<Tooltip title="隐藏目录">
<DoubleLeftOutlined
onClick={() => setTreeVisible(false)}
// style={{ background: 'white' }}
/>
</Tooltip>
)}
{!treeVisible && (
<Tooltip title="显示目录">
<DoubleRightOutlined onClick={() => setTreeVisible(true)} />
</Tooltip>
)}
</div>
<div className={styles.userContainer}>
<div style={{ height: '50px' }}>
<p style={{ margin: '16px 0 10px 16px', display: 'inline-block' }}>
当前机构用户总数（
<span className={styles.redText}>{tableTitle}</span>）
</p>
<span style={{ float: 'right', margin: '10px' }}>
<Button type="primary" onClick={searchUser}>
查找用户
</Button>
<Button type="primary" onClick={addUser}>
添加用户
</Button>
<Button type="primary" onClick={addSubOrg}>
添加机构
</Button>
<Button type="primary" onClick={editOrg}>
编辑机构
</Button>
<Button type="primary" onClick={deleteOrg}>
删除机构
</Button>
</span>
</div>
<Table
title={getTableTitle}
rowSelection={{
type: selectionType,
...rowSelection,
}}
locale={{ filterConfirm: '确定', filterReset: '重置' }}
bordered
columns={columns}
dataSource={tableData}
loading={tableLoading}
scroll={{ scrollToFirstRowOnChange: 'true', x: 'max-content' }}
scroll={{ x: 'max-content' }}
/>
</div>
{/* 查找用户 */}
......@@ -859,7 +894,7 @@ const UserManage = () => {
</Modal>
{/* 添加用户 */}
<Modal
title={orgTitle}
title={`在${orgTitle}下添加用户`}
visible={userVisible}
onOk={submitAddUser}
onCancel={() => setUserVisible(false)}
......@@ -898,7 +933,7 @@ const UserManage = () => {
</Modal>
{/* 添加下级机构 */}
<Modal
title={orgTitle}
title={`在${orgTitle}下添加机构`}
visible={addOrgVisible}
onOk={submitAddOrg}
onCancel={() => setAddOrgVisible(false)}
......@@ -920,7 +955,7 @@ const UserManage = () => {
</Modal>
{/* 编辑机构 */}
<Modal
title={orgTitle}
title={`编辑${orgTitle}`}
visible={editOrgVisible}
onOk={submitEditOrg}
onCancel={() => setEditOrgVisible(false)}
......@@ -950,6 +985,7 @@ const UserManage = () => {
>
<p>即将删除该机构，是否确认删除？</p>
</Modal>
{/* 用户关联 */}
<Modal
title="用户关联"
visible={roleVisible}
......@@ -988,6 +1024,7 @@ const UserManage = () => {
</Tabs>
</Spin>
</Modal>
{/* 更改机构 */}
<Modal
title="更改机构"
visible={changeOrgVisible}
......@@ -998,16 +1035,16 @@ const UserManage = () => {
width="330px"
>
<span>请选择要更改的目标机构：</span>
{changeOrgVisible && treeData2.length > 0 && (
{changeOrgVisible && treeData.length > 0 && (
<Tree
showIcon="true"
showLine={{ showLeafIcon: false }}
defaultExpandAll="true"
defaultSelectedKeys={[currentSelectOrg]}
defaultSelectedKeys={[currentSelectOldOrg]}
onSelect={props => {
setNewOrgID(props[0]);
}}
treeData={treeData2.map(t => mapTree1(t))}
treeData={treeData.map(t => mapTree(t))}
/>
)}
</Modal>
......@@ -1072,6 +1109,7 @@ const UserManage = () => {
</Form.Item>
</Form>
</Modal>
{/* 冻结用户 */}
<Modal
title="请确认"
visible={freezeUserVisible}
......@@ -1087,6 +1125,7 @@ const UserManage = () => {
{+currentUser.state ? '激活' : '冻结'}？
</p>
</Modal>
{/* 删除用户 */}
<Modal
title="确认删除用户"
visible={deleteUserVisible}
......
src/pages/userCenter/UserManage.less
View file @ 6f3aa35e
......@@ -18,14 +18,6 @@
}
}
}
.freeze{
color:gray;
}
.freezeGray{
color:#1890FF;
}
.ant-tree-treenode:hover{
.iconWraper1>span{
margin-left: 12px;
......@@ -37,11 +29,10 @@
min-height: calc(100vh - 194px);
display: flex;
.orgContainer{
width: 20%;
height: calc(100vh - 194px);
min-height: calc(100vh - 194px);
float: left;
padding: 10px;
min-width: 300px;
min-width: 240px;
background: white;
.ant-tree{
padding-top: 6px;
......@@ -51,15 +42,33 @@
}
}
}
.hide{
display: none;
// width:0;
transition: 1s;
}
.userContainer{
padding: 12px;
margin-left: 12px;
margin-left: 10px;
flex: 1;
height: calc(100vh - 194px);
background: white;
.ant-table-pagination-right{
padding-right: 12px;
}
.ant-btn-primary{
margin-left: 30px;
background: #50aefc;
}
.ant-table-thead tr th{
font-weight: 600;
color:rgba(0,0,0,0.85);
}
.ant-table-cell{
text-align:center;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment