Skip to content

C
CivManage
Commit 7b1ae5fd authored by 张烨's avatar 张烨
Browse files
Options

style: 优化用户管理样式

parent ca29b390
Hide whitespace changes
Inline Side-by-side
Showing with 214 additions and 193 deletions
src/pages/userCenter/UserManage.js
View file @ 7b1ae5fd
......@@ -44,21 +44,23 @@ const UserManage = () => {
const haveChildren = Array.isArray(org.children) && org.children.length > 0;
return {
title: (
<div className={styles.iconWraper1}>
{org.text}
<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>
<>
<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>
</>
),
key: org.id,
// icon: <CaretDownOutlined />,
......@@ -96,6 +98,7 @@ const UserManage = () => {
{
title: '操作',
key: 'action',
align: 'center',
render: (text, record) => (
<Space size="middle">
<a>关联角色 {record.name}</a>
......@@ -340,173 +343,158 @@ const UserManage = () => {
};
return (
<PageContainer>
<div
style={{
width: '20%',
height: 'calc(100vh - 194px)',
background: 'white',
float: 'left',
padding: '10px',
minWidth: '330px',
}}
>
<span style={{ padding: '8px' }}>
机构列表
<Tooltip title="添加下级机构">
<FolderAddTwoTone
style={{ fontSize: '16px', float: 'right' }}
onClick={e => addSubOrg(e, '根目录', '-1')}
/>
</Tooltip>
</span>
<Tree
showLine="true"
showIcon="true"
selectedKeys={[currentSelect]}
loading={treeLoading}
onSelect={onSelect}
treeData={treeData}
/>
</div>
<div
style={{
width: '79%',
height: 'calc(100vh - 194px)',
background: 'white',
float: 'right',
padding: '20px',
}}
>
<Table
columns={columns}
dataSource={tableData}
loading={tableLoading}
/>
<PageContainer className={styles.userManageContainer}>
<div className={styles.contentContainer}>
<div className={styles.orgContainer}>
<span style={{ padding: '8px', fontSize: '16px' }}>
机构列表
<Tooltip title="添加下级机构">
<FolderAddTwoTone
style={{ fontSize: '16px', float: 'right' }}
onClick={e => addSubOrg(e, '根目录', '-1')}
/>
</Tooltip>
</span>
<Tree
showLine="true"
showIcon="true"
selectedKeys={[currentSelect]}
loading={treeLoading}
onSelect={onSelect}
treeData={treeData}
/>
</div>
<div className={styles.userContainer}>
<Table
columns={columns}
dataSource={tableData}
loading={tableLoading}
/>
</div>
{/* 添加用户 */}
<Modal
title={orgTitle}
visible={userVisible}
onOk={submitAddUser}
onCancel={() => setUserVisible(false)}
okText="确认"
cancelText="取消"
>
<Form form={addUserForm}>
<Form.Item
name="loginName"
label="登录名称"
rules={[
{
required: true,
},
]}
>
<Input placeholder="情输入登录名称" />
</Form.Item>
<Form.Item
name="password"
label="账户密码"
rules={[
{
required: true,
},
]}
>
<Input placeholder="情输入账户密码" />
</Form.Item>
<Form.Item
name="userName"
label="用户名称"
rules={[
{
required: true,
},
]}
>
<Input placeholder="情输入用户姓名" />
</Form.Item>
<Form.Item name="phone" label="手 机 号 码">
<Input placeholder="情输入手机号码" />
</Form.Item>
<Form.Item name="email" label="电 子 邮 箱">
<Input placeholder="情输入电子邮箱" />
</Form.Item>
</Form>
</Modal>
{/* 添加下级机构 */}
<Modal
title={orgTitle}
visible={addOrgVisible}
onOk={submitAddOrg}
onCancel={() => setAddOrgVisible(false)}
okText="确认"
cancelText="取消"
>
<Form form={addOrgForm}>
<Form.Item
name="OUName"
label="机构名称"
rules={[
{
required: true,
},
]}
>
<Input placeholder="情输入机构名称" />
</Form.Item>
<Form.Item name="description" label="--描---述--">
<Input placeholder="情输入相关描述" />
</Form.Item>
</Form>
</Modal>
{/* 编辑机构 */}
<Modal
title={orgTitle}
visible={editOrgVisible}
onOk={submitEditOrg}
onCancel={() => setEditOrgVisible(false)}
okText="确认"
cancelText="取消"
>
<Form form={editOrgForm}>
<Form.Item
name="OUName"
label="机构名称"
rules={[
{
required: true,
},
]}
>
<Input placeholder="情输入机构名称" />
</Form.Item>
<Form.Item name="description" label="--描---述--">
<Input placeholder="情输入相关描述" />
</Form.Item>
</Form>
</Modal>
<Modal
title="确认删除机构"
visible={deleteOrgVisible}
onOk={submitDeleteOrg}
onCancel={() => setDeleteOrgVisible(false)}
okText="确认"
cancelText="取消"
>
<p>即将删除该机构，是否确认删除？</p>
</Modal>
<Modal
title="确认删除用户"
visible={deleteUserVisible}
onOk={submitDeleteUser}
onCancel={() => setDeleteUserVisible(false)}
okText="确认"
cancelText="取消"
>
<p>即将关联删除 主站点 用户关系，是否确认删除？</p>
</Modal>
</div>
{/* 添加用户 */}
<Modal
title={orgTitle}
visible={userVisible}
onOk={submitAddUser}
onCancel={() => setUserVisible(false)}
okText="确认"
cancelText="取消"
>
<Form form={addUserForm}>
<Form.Item
name="loginName"
label="登录名称"
rules={[
{
required: true,
},
]}
>
<Input placeholder="情输入登录名称" />
</Form.Item>
<Form.Item
name="password"
label="账户密码"
rules={[
{
required: true,
},
]}
>
<Input placeholder="情输入账户密码" />
</Form.Item>
<Form.Item
name="userName"
label="用户名称"
rules={[
{
required: true,
},
]}
>
<Input placeholder="情输入用户姓名" />
</Form.Item>
<Form.Item name="phone" label="手 机 号 码">
<Input placeholder="情输入手机号码" />
</Form.Item>
<Form.Item name="email" label="电 子 邮 箱">
<Input placeholder="情输入电子邮箱" />
</Form.Item>
</Form>
</Modal>
{/* 添加下级机构 */}
<Modal
title={orgTitle}
visible={addOrgVisible}
onOk={submitAddOrg}
onCancel={() => setAddOrgVisible(false)}
okText="确认"
cancelText="取消"
>
<Form form={addOrgForm}>
<Form.Item
name="OUName"
label="机构名称"
rules={[
{
required: true,
},
]}
>
<Input placeholder="情输入机构名称" />
</Form.Item>
<Form.Item name="description" label="--描---述--">
<Input placeholder="情输入相关描述" />
</Form.Item>
</Form>
</Modal>
{/* 编辑机构 */}
<Modal
title={orgTitle}
visible={editOrgVisible}
onOk={submitEditOrg}
onCancel={() => setEditOrgVisible(false)}
okText="确认"
cancelText="取消"
>
<Form form={editOrgForm}>
<Form.Item
name="OUName"
label="机构名称"
rules={[
{
required: true,
},
]}
>
<Input placeholder="情输入机构名称" />
</Form.Item>
<Form.Item name="description" label="--描---述--">
<Input placeholder="情输入相关描述" />
</Form.Item>
</Form>
</Modal>
<Modal
title="确认删除机构"
visible={deleteOrgVisible}
onOk={submitDeleteOrg}
onCancel={() => setDeleteOrgVisible(false)}
okText="确认"
cancelText="取消"
>
<p>即将删除该机构，是否确认删除？</p>
</Modal>
<Modal
title="确认删除用户"
visible={deleteUserVisible}
onOk={submitDeleteUser}
onCancel={() => setDeleteUserVisible(false)}
okText="确认"
cancelText="取消"
>
<p>即将关联删除 主站点 用户关系，是否确认删除？</p>
</Modal>
</PageContainer>
);
};
......
src/pages/userCenter/UserManage.less
View file @ 7b1ae5fd
.iconWraper1{
span{
display: none;
.userManageContainer{
.ant-tree-treenode{
width: 100%;
.ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal{
display: inline-block;
width: 100%;
}
.iconWraper1{
float: right;
span{
display: none;
}
}
}
}
.iconWraper1:hover{
span{
margin-left: 12px;
font-size: 16px;
display: inline-block;
.ant-tree-treenode:hover{
.iconWraper1>span{
margin-left: 12px;
font-size: 16px;
display: inline-block;
}
}
.contentContainer{
min-height: calc(100vh - 194px);
display: flex;
.orgContainer{
width: 20%;
height: calc(100vh - 194px);
float: left;
padding: 10px;
min-width: 330px;
background: white;
.ant-tree{
padding-top: 6px;
}
}
.userContainer{
margin-left: 12px;
flex: 1;
height: calc(100vh - 194px);
background: white;
.ant-table-pagination-right{
padding-right: 12px;
}
}
}
// display: block;
}
\ No newline at end of file
}
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