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 = () => { ...@@ -44,21 +44,23 @@ const UserManage = () => {
const haveChildren = Array.isArray(org.children) && org.children.length > 0; const haveChildren = Array.isArray(org.children) && org.children.length > 0;
return { return {
title: ( title: (
<div className={styles.iconWraper1}> <>
{org.text} <span>{org.text}</span>
<Tooltip title="添加用户"> <div className={styles.iconWraper1}>
<FileAddTwoTone onClick={e => addUser(e, org.text, org.id)} /> <Tooltip title="添加用户">
</Tooltip> <FileAddTwoTone onClick={e => addUser(e, org.text, org.id)} />
<Tooltip title="添加下级机构"> </Tooltip>
<FolderAddTwoTone onClick={e => addSubOrg(e, org.text, org.id)} /> <Tooltip title="添加下级机构">
</Tooltip> <FolderAddTwoTone onClick={e => addSubOrg(e, org.text, org.id)} />
<Tooltip title="编辑当前机构"> </Tooltip>
<EditTwoTone onClick={e => editOrg(e, org.text, org.id)} /> <Tooltip title="编辑当前机构">
</Tooltip> <EditTwoTone onClick={e => editOrg(e, org.text, org.id)} />
<Tooltip title="删除当前机构"> </Tooltip>
<DeleteTwoTone onClick={e => deleteOrg(e, org.text, org.id)} /> <Tooltip title="删除当前机构">
</Tooltip> <DeleteTwoTone onClick={e => deleteOrg(e, org.text, org.id)} />
</div> </Tooltip>
</div>
</>
), ),
key: org.id, key: org.id,
// icon: <CaretDownOutlined />, // icon: <CaretDownOutlined />,
...@@ -96,6 +98,7 @@ const UserManage = () => { ...@@ -96,6 +98,7 @@ const UserManage = () => {
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
align: 'center',
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
<a>关联角色 {record.name}</a> <a>关联角色 {record.name}</a>
...@@ -340,173 +343,158 @@ const UserManage = () => { ...@@ -340,173 +343,158 @@ const UserManage = () => {
}; };
return ( return (
<PageContainer> <PageContainer className={styles.userManageContainer}>
<div <div className={styles.contentContainer}>
style={{ <div className={styles.orgContainer}>
width: '20%', <span style={{ padding: '8px', fontSize: '16px' }}>
height: 'calc(100vh - 194px)', 机构列表
background: 'white', <Tooltip title="添加下级机构">
float: 'left', <FolderAddTwoTone
padding: '10px', style={{ fontSize: '16px', float: 'right' }}
minWidth: '330px', onClick={e => addSubOrg(e, '根目录', '-1')}
}} />
> </Tooltip>
<span style={{ padding: '8px' }}> </span>
机构列表 <Tree
<Tooltip title="添加下级机构"> showLine="true"
<FolderAddTwoTone showIcon="true"
style={{ fontSize: '16px', float: 'right' }} selectedKeys={[currentSelect]}
onClick={e => addSubOrg(e, '根目录', '-1')} loading={treeLoading}
/> onSelect={onSelect}
</Tooltip> treeData={treeData}
</span> />
<Tree </div>
showLine="true" <div className={styles.userContainer}>
showIcon="true" <Table
selectedKeys={[currentSelect]} columns={columns}
loading={treeLoading} dataSource={tableData}
onSelect={onSelect} loading={tableLoading}
treeData={treeData} />
/> </div>
</div> {/* 添加用户 */}
<div <Modal
style={{ title={orgTitle}
width: '79%', visible={userVisible}
height: 'calc(100vh - 194px)', onOk={submitAddUser}
background: 'white', onCancel={() => setUserVisible(false)}
float: 'right', okText="确认"
padding: '20px', cancelText="取消"
}} >
> <Form form={addUserForm}>
<Table <Form.Item
columns={columns} name="loginName"
dataSource={tableData} label="登录名称"
loading={tableLoading} 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> </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> </PageContainer>
); );
}; };
......
src/pages/userCenter/UserManage.less
View file @ 7b1ae5fd
.iconWraper1{ .userManageContainer{
span{ .ant-tree-treenode{
display: none; 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{ .ant-tree-treenode:hover{
span{ .iconWraper1>span{
margin-left: 12px; margin-left: 12px;
font-size: 16px; font-size: 16px;
display: inline-block; 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