5 changed files with 406 additions and 22 deletions
@ -0,0 +1,170 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
import { connect } from "react-redux"; |
|||
import { Modal, Form } from "@douyinfe/semi-ui"; |
|||
import { IconAlertCircle } from '@douyinfe/semi-icons'; |
|||
|
|||
|
|||
function adminModal (props) { |
|||
const { |
|||
close, |
|||
visible, |
|||
dispatch, |
|||
pepList, |
|||
actions, |
|||
adminEdit,//是否是编辑 |
|||
editObj, |
|||
} = props; |
|||
const { install } = actions; |
|||
const form = useRef();//表单 |
|||
const [disablePeople, setDisablePeople] = useState(true); //页码信息 |
|||
const [peopleList, setPeopleList] = useState([]); //人员List |
|||
const [departmentId, setDepartmentId] = useState(); //部门id |
|||
const [peopleId, setPeopleId] = useState(); //人员id |
|||
//初始化 |
|||
useEffect(() => { |
|||
if (editObj.id) { |
|||
let departmentList = [] |
|||
for (let i = 0; i < pepList.length; i++) { |
|||
if (pepList[i].id == editObj.departments[0].id) { |
|||
departmentList = pepList[i].users |
|||
} |
|||
} |
|||
setPeopleList(departmentList) |
|||
setDepartmentId(editObj.departments[0].id) |
|||
setPeopleId(editObj.pepUserId) |
|||
setDisablePeople(false) |
|||
} |
|||
}, []); |
|||
|
|||
function handleOk () { |
|||
//点击弹框确定 右边按钮 |
|||
form.current |
|||
.validate() |
|||
.then((values) => { |
|||
if (adminEdit) { |
|||
dispatch(install.deteleOrganizationAdmin({id:editObj.id,msg:''})).then( |
|||
dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '修改管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 |
|||
if (res.success) { |
|||
close(); |
|||
} |
|||
}) |
|||
) |
|||
} |
|||
else { |
|||
dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '新增管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 |
|||
if (res.success) { |
|||
close(); |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
function handleCancel () { |
|||
close(); |
|||
//点击弹框取消 左边按钮 |
|||
} |
|||
return ( |
|||
<> |
|||
<Modal |
|||
title="管理员设置" |
|||
okText="确定" |
|||
cancelText="取消" |
|||
visible={visible} |
|||
onOk={handleOk} |
|||
width={607} |
|||
onCancel={handleCancel} |
|||
> |
|||
<div style={{ margin: "0px 25px" }}> |
|||
<div style={{ width: '100%', height: 32, background: '#F4F8FF', borderRadius: 2, border: '1px solid #C7E1FF', display: 'flex', alignItems: 'center' }}> |
|||
<div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}><IconAlertCircle style={{ color: '#0F7EFB' }} /></div> |
|||
<div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8 }}>成员成为管理员后，拥有平台所有权限和项目，成员的普通角色会被禁用。</div> |
|||
</div> |
|||
<Form |
|||
allowEmpty |
|||
labelPosition="left" |
|||
labelAlign="right" |
|||
labelWidth="90px" |
|||
onValueChange={(values, field) => { |
|||
for (var key in field) { |
|||
if (key == 'department') { |
|||
if (values.department >= 0) { |
|||
let departmentList = [] |
|||
for (let i = 0; i < pepList.length; i++) { |
|||
if (pepList[i].id == values.department) { |
|||
departmentList = pepList[i].users |
|||
} |
|||
} |
|||
setPeopleList(departmentList) |
|||
setDisablePeople(false) |
|||
form.current.setValue('pepUserId', undefined); |
|||
} |
|||
else { |
|||
setPeopleList([]) |
|||
setDisablePeople(true) |
|||
form.current.setValue('pepUserId', undefined); |
|||
} |
|||
} |
|||
} |
|||
}} |
|||
getFormApi={(formApi) => (form.current = formApi)} |
|||
> |
|||
<div> |
|||
<Form.Select |
|||
label="选择部门:" |
|||
field="department" |
|||
placeholder="请选择部门" |
|||
style={{ width: 417 }} |
|||
rules={[{ required: true, message: "请选择部门" }]} |
|||
initValue={departmentId || ""} |
|||
showClear |
|||
> |
|||
{ |
|||
pepList.map((item, index) => { |
|||
return ( |
|||
<Form.Select.Option key={index} value={item.id}> |
|||
{item.name} |
|||
</Form.Select.Option> |
|||
) |
|||
}) |
|||
} |
|||
</Form.Select> |
|||
</div> |
|||
<div> |
|||
<Form.Select |
|||
label="选择人员:" |
|||
field="pepUserId" |
|||
placeholder="请选择人员" |
|||
style={{ width: 417 }} |
|||
rules={[{ required: true, message: "请选择人员" }]} |
|||
initValue={peopleId || ""} |
|||
showClear |
|||
disabled={disablePeople} |
|||
> |
|||
{ |
|||
peopleList.map((item, index) => { |
|||
return ( |
|||
<Form.Select.Option key={item.id} value={item.id}> |
|||
{item.name} |
|||
</Form.Select.Option> |
|||
) |
|||
}) |
|||
} |
|||
</Form.Select> |
|||
</div> |
|||
</Form> |
|||
</div> |
|||
</Modal> |
|||
</> |
|||
); |
|||
} |
|||
function mapStateToProps (state) { |
|||
const { auth, global, members } = state; |
|||
return { |
|||
// loading: members.isRequesting, |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
// members: members.data, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(adminModal); |
|||
Loading…
Reference in new issue