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