Commit ca29b390 authored by 张烨's avatar 张烨
parents e8313d37 16c4625c
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Tree, Table, Space, message, Modal, Form, Input } from 'antd';
import { import {
UsergroupAddOutlined, Tree,
Table,
Space,
message,
Modal,
Form,
Input,
notification,
Tooltip,
} from 'antd';
import {
FileAddTwoTone, FileAddTwoTone,
FolderAddTwoTone, FolderAddTwoTone,
EditTwoTone, EditTwoTone,
...@@ -14,15 +23,22 @@ import styles from './UserManage.less'; ...@@ -14,15 +23,22 @@ import styles from './UserManage.less';
const UserManage = () => { const UserManage = () => {
const time = new Date(); const time = new Date();
const [treeLoading, setTreeLoading] = useState(false);
const [tableLoading, setTableLoading] = useState(false); const [tableLoading, setTableLoading] = useState(false);
const [treeData, setTreeData] = useState([]); // 用户机构树 const [treeData, setTreeData] = useState([]); // 用户机构树
const [tableData, setTableData] = useState([]); // 用户表 const [tableData, setTableData] = useState([]); // 用户表
const [currentSelect, setCurrentSelect] = useState([]);
const [userVisible, setUserVisible] = useState(false); const [userVisible, setUserVisible] = useState(false);
const [addOrgVisible, setAddOrgVisible] = useState(false);
const [editOrgVisible, setEditOrgVisible] = useState(false);
const [deleteOrgVisible, setDeleteOrgVisible] = useState(false);
const [deleteUserVisible, setDeleteUserVisible] = useState(false); const [deleteUserVisible, setDeleteUserVisible] = useState(false);
const [orgTitle, setOrgTitle] = useState('机构'); const [orgTitle, setOrgTitle] = useState('机构');
const [orgID, setOrgID] = useState(); const [orgID, setOrgID] = useState();
const [userID, setUserID] = useState('机构'); const [userID, setUserID] = useState();
const [addUserForm] = Form.useForm(); const [addUserForm] = Form.useForm();
const [addOrgForm] = Form.useForm();
const [editOrgForm] = Form.useForm();
// 渲染机构目录树 // 渲染机构目录树
const mapTree = org => { const mapTree = org => {
const haveChildren = Array.isArray(org.children) && org.children.length > 0; const haveChildren = Array.isArray(org.children) && org.children.length > 0;
...@@ -30,13 +46,18 @@ const UserManage = () => { ...@@ -30,13 +46,18 @@ const UserManage = () => {
title: ( title: (
<div className={styles.iconWraper1}> <div className={styles.iconWraper1}>
{org.text} {org.text}
<FileAddTwoTone <Tooltip title="添加用户">
onClick={e => addUser(e, org.text, org.id)} <FileAddTwoTone onClick={e => addUser(e, org.text, org.id)} />
title="添加用户" </Tooltip>
/> <Tooltip title="添加下级机构">
<FolderAddTwoTone onClick={addSubOrg} title="添加下级机构" /> <FolderAddTwoTone onClick={e => addSubOrg(e, org.text, org.id)} />
<EditTwoTone onClick={editOrg} title="编辑" /> </Tooltip>
<DeleteTwoTone onClick={deleteOrg} title="删除" /> <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> </div>
), ),
key: org.id, key: org.id,
...@@ -89,42 +110,51 @@ const UserManage = () => { ...@@ -89,42 +110,51 @@ const UserManage = () => {
// 获取用户机构列表 // 获取用户机构列表
useEffect(() => { useEffect(() => {
setTableLoading(true); getUserTree(-1, -1);
}, []);
const getUserTree = (selectOU, node) => {
setTreeLoading(true);
get(`/Cityinterface/rest/services/OMS.svc/U_GetOUTree`, { get(`/Cityinterface/rest/services/OMS.svc/U_GetOUTree`, {
_version: 9999, _version: 9999,
_dc: time.getTime(), _dc: time.getTime(),
node: -1, selectOU,
node,
}) })
.then(res => { .then(res => {
setTableLoading(false); setTreeLoading(false);
if (res.length > 0) { if (res.length > 0) {
const orgTree = res.map(org => mapTree(org)); const orgTree = res.map(org => mapTree(org));
setTreeData(orgTree); setTreeData(orgTree);
onSelect([res[0].id]);
} }
}) })
.catch(err => { .catch(err => {
setTableLoading(false); setTreeLoading(false);
message.error(err); message.error(err);
}); });
}, []); };
// 获取当前机构下所有用户 // 获取当前机构下所有用户
const onSelect = props => { const onSelect = props => {
setTableLoading(true); setTableLoading(true);
if (!props[0]) {
setCurrentSelect(currentSelect);
} else {
setCurrentSelect(props[0]);
}
get(`/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew`, { get(`/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew`, {
_version: 9999, _version: 9999,
_dc: time.getTime(), _dc: time.getTime(),
OUID: props[0], OUID: props[0] || currentSelect,
}) })
.then(res => { .then(res => {
setTableLoading(false); setTableLoading(false);
if (res.root.length > 0) {
const table = res.root.map((item, index) => { const table = res.root.map((item, index) => {
item.key = index; item.key = index;
return item; return item;
}); });
setTableData(table); setTableData(table);
}
}) })
.catch(err => { .catch(err => {
setTableLoading(false); setTableLoading(false);
...@@ -133,27 +163,29 @@ const UserManage = () => { ...@@ -133,27 +163,29 @@ const UserManage = () => {
}; };
const addUser = (e, title, id) => { const addUser = (e, title, id) => {
e.stopPropagation(); // e.stopPropagation();
setUserVisible(true); setUserVisible(true);
setOrgTitle(`在${title}下添加用户`); setOrgTitle(`在${title}下添加用户`);
setOrgID(id); setOrgID(id);
}; };
const addSubOrg = (e, title, id) => { const addSubOrg = (e, title, id) => {
e.stopPropagation(); // e.stopPropagation();
// setUserVisible(true); setAddOrgVisible(true);
// setOrgTitle(`在${title}下添加机构`); setOrgTitle(`在${title}下添加机构`);
setOrgID(id); setOrgID(id);
}; };
const editOrg = (e, title, id) => { const editOrg = (e, title, id) => {
e.stopPropagation(); // e.stopPropagation();
// setUserVisible(true); setEditOrgVisible(true);
// setOrgTitle(`在${title}下添加用户`); editOrgForm.setFieldsValue({
OUName: title,
});
setOrgID(id); setOrgID(id);
}; };
const deleteOrg = (e, title, id) => { const deleteOrg = (e, title, id) => {
e.stopPropagation(); // e.stopPropagation();
// setUserVisible(true); setDeleteOrgVisible(true);
// setOrgTitle(`在${title}下添加用户`); setOrgTitle(`在${title}下添加用户`);
setOrgID(id); setOrgID(id);
}; };
// 提交-添加用户 // 提交-添加用户
...@@ -167,25 +199,114 @@ const UserManage = () => { ...@@ -167,25 +199,114 @@ const UserManage = () => {
userName: addUserForm.getFieldValue('userName'), userName: addUserForm.getFieldValue('userName'),
phone: addUserForm.getFieldValue('phone') || '', phone: addUserForm.getFieldValue('phone') || '',
email: addUserForm.getFieldValue('email') || '', email: addUserForm.getFieldValue('email') || '',
ddid: addUserForm.getFieldValue('ddid') || '',
wxid: addUserForm.getFieldValue('wxid') || '',
}) })
.then(res => { .then(res => {
if (res.message === '') { if (res.message === '') {
Modal.success({
content: '添加成功',
});
setUserVisible(false); setUserVisible(false);
notification.success({
message: '提交成功',
});
// 重新获取用户表 // 重新获取用户表
onSelect([orgID]); onSelect([orgID]);
} else { } else {
Modal.error({ notification.error({
title: '添加失败', message: '提交失败',
content: res.message, description: res.message,
});
}
})
.catch(err => {
message.error(err);
});
};
// 提交-添加下级机构
const submitAddOrg = () => {
get(`/Cityinterface/rest/services/OMS.svc/U_AddOU`, {
_version: 9999,
_dc: time.getTime(),
pid: orgID,
OUName: addOrgForm.getFieldValue('OUName'),
description: addOrgForm.getFieldValue('desrciption') || '',
comment: '',
})
.then(res => {
if (res.message === '') {
setAddOrgVisible(false);
notification.success({
message: '提交成功',
});
// 重新获取机构树与用户表
getUserTree(-1, -1);
// onSelect([res.OUID]);
} else {
notification.error({
message: '提交失败',
description: res.message,
});
// Modal.error({
// title: '添加失败',
// content: res.message,
// });
}
})
.catch(err => {
message.error(err);
});
};
// 提交-编辑当前机构
const submitEditOrg = () => {
get(`/Cityinterface/rest/services/OMS.svc/U_EditOneOUInfo`, {
_version: 9999,
_dc: time.getTime(),
OUID: orgID,
OUName: editOrgForm.getFieldValue('OUName'),
description: editOrgForm.getFieldValue('desrciption') || '',
comment: '',
})
.then(res => {
if (res.message === '') {
setEditOrgVisible(false);
notification.success({
message: '提交成功',
});
getUserTree(-1, -1);
// 重新获取用户表
// onSelect([orgID]);
} else {
notification.error({
message: '提交失败',
description: res.message,
});
}
})
.catch(err => {
message.error(err);
});
};
const submitDeleteOrg = () => {
get(`/Cityinterface/rest/services/OMS.svc/U_DeleteOU`, {
_version: 9999,
_dc: time.getTime(),
OUID: orgID,
})
.then(res => {
if (res.message === '') {
setDeleteOrgVisible(false);
notification.success({
message: '提交成功',
});
// 重新获取用户表
getUserTree(-1, -1);
// onSelect([orgID]);
} else {
notification.error({
message: '提交失败',
description: res.message,
}); });
} }
}) })
.catch(err => { .catch(err => {
setTableLoading(false);
message.error(err); message.error(err);
}); });
}; };
...@@ -202,9 +323,6 @@ const UserManage = () => { ...@@ -202,9 +323,6 @@ const UserManage = () => {
}) })
.then(res => { .then(res => {
if (res.message === '') { if (res.message === '') {
Modal.success({
content: '删除成功',
});
setDeleteUserVisible(false); setDeleteUserVisible(false);
// 重新获取用户表 // 重新获取用户表
onSelect([orgID]); onSelect([orgID]);
...@@ -230,16 +348,23 @@ const UserManage = () => { ...@@ -230,16 +348,23 @@ const UserManage = () => {
background: 'white', background: 'white',
float: 'left', float: 'left',
padding: '10px', padding: '10px',
minWidth: '330px',
}} }}
> >
<div style={{ padding: '8px' }}> <span style={{ padding: '8px' }}>
机构列表 机构列表
<UsergroupAddOutlined style={{ color: '#1890ff', float: 'right' }} /> <Tooltip title="添加下级机构">
</div> <FolderAddTwoTone
style={{ fontSize: '16px', float: 'right' }}
onClick={e => addSubOrg(e, '根目录', '-1')}
/>
</Tooltip>
</span>
<Tree <Tree
showLine="true" showLine="true"
showIcon="true" showIcon="true"
loading={tableLoading} selectedKeys={[currentSelect]}
loading={treeLoading}
onSelect={onSelect} onSelect={onSelect}
treeData={treeData} treeData={treeData}
/> />
...@@ -259,6 +384,7 @@ const UserManage = () => { ...@@ -259,6 +384,7 @@ const UserManage = () => {
loading={tableLoading} loading={tableLoading}
/> />
</div> </div>
{/* 添加用户 */}
<Modal <Modal
title={orgTitle} title={orgTitle}
visible={userVisible} visible={userVisible}
...@@ -267,10 +393,6 @@ const UserManage = () => { ...@@ -267,10 +393,6 @@ const UserManage = () => {
okText="确认" okText="确认"
cancelText="取消" cancelText="取消"
> >
{/* <div style={{ width: '20%', float: 'left' }}>
<UserAddOutlined style={{ color: 'blue', width: '40px' }} />
</div> */}
{/* <div style={{ width: '80%', float: 'right' }}> */}
<Form form={addUserForm}> <Form form={addUserForm}>
<Form.Item <Form.Item
name="loginName" name="loginName"
...@@ -281,7 +403,7 @@ const UserManage = () => { ...@@ -281,7 +403,7 @@ const UserManage = () => {
}, },
]} ]}
> >
<Input /> <Input placeholder="情输入登录名称" />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="password" name="password"
...@@ -292,7 +414,7 @@ const UserManage = () => { ...@@ -292,7 +414,7 @@ const UserManage = () => {
}, },
]} ]}
> >
<Input /> <Input placeholder="情输入账户密码" />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="userName" name="userName"
...@@ -303,25 +425,80 @@ const UserManage = () => { ...@@ -303,25 +425,80 @@ const UserManage = () => {
}, },
]} ]}
> >
<Input /> <Input placeholder="情输入用户姓名" />
</Form.Item> </Form.Item>
<Form.Item name="phone" label="手 机 号 码"> <Form.Item name="phone" label="手 机 号 码">
<Input /> <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>
<Form.Item name="email" label="电 子 邮 件"> <Form.Item name="description" label="--描---述--">
<Input /> <Input placeholder="情输入相关描述" />
</Form.Item> </Form.Item>
<Form.Item name="ddid" label="钉 钉 账 户"> </Form>
<Input /> </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>
<Form.Item name="wxid" label="微 信 账 户"> <Form.Item name="description" label="--描---述--">
<Input /> <Input placeholder="情输入相关描述" />
</Form.Item> </Form.Item>
</Form> </Form>
{/* </div> */}
</Modal> </Modal>
<Modal <Modal
title="删除用户" title="确认删除机构"
visible={deleteOrgVisible}
onOk={submitDeleteOrg}
onCancel={() => setDeleteOrgVisible(false)}
okText="确认"
cancelText="取消"
>
<p>即将删除该机构,是否确认删除?</p>
</Modal>
<Modal
title="确认删除用户"
visible={deleteUserVisible} visible={deleteUserVisible}
onOk={submitDeleteUser} onOk={submitDeleteUser}
onCancel={() => setDeleteUserVisible(false)} onCancel={() => setDeleteUserVisible(false)}
......
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
.iconWraper1:hover{ .iconWraper1:hover{
span{ span{
margin-left: 12px; margin-left: 12px;
font-size: 16px;
display: inline-block; display: inline-block;
} }
// display: block; // display: block;
......
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