9 changed files with 413 additions and 296 deletions
@ -1,268 +1,272 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
import { connect } from "react-redux"; |
|||
import { Modal, Form, CheckboxGroup, Checkbox,Button } from "@douyinfe/semi-ui"; |
|||
import { Modal, Form, CheckboxGroup, Checkbox, Button } from "@douyinfe/semi-ui"; |
|||
import { IconAlertCircle } from '@douyinfe/semi-icons'; |
|||
|
|||
|
|||
function memberModal (props) { |
|||
const { |
|||
close, |
|||
cancel, |
|||
visible, |
|||
dispatch, |
|||
pepList, |
|||
actions, |
|||
editObj, |
|||
memberEdit, |
|||
pomsList, |
|||
anxinDelete, |
|||
anxincloudArr |
|||
} = props; |
|||
const { install } = actions; |
|||
const form = useRef();//表单 |
|||
const [disablePeople, setDisablePeople] = useState(true); //页码信息 |
|||
const [peopleList, setPeopleList] = useState([]); //人员List |
|||
const [departmentId, setDepartmentId] = useState(); //部门id |
|||
const [jurisdiction, setJurisdiction] = useState([ |
|||
{ |
|||
label: '数据分析师', |
|||
value: 'data_analyst', |
|||
text: '拥有数据、分析、工单、资料相关的权限' |
|||
}, { |
|||
label: '售后运维', |
|||
value: 'after_sale', |
|||
text: '拥有设备、问题、工单、资料相关的权限' |
|||
}, { |
|||
label: '资源管理者', |
|||
value: 'resource_manage', |
|||
text: '拥有资料、设备、工单相关的权限' |
|||
}, { |
|||
label: '客户服务', |
|||
value: 'customer_service', |
|||
text: '拥有服务、工单、资料相关的权限' |
|||
}, |
|||
]); //权限配置 |
|||
const [pomsList_, setPomsList_] = useState([]) |
|||
//初始化 |
|||
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 |
|||
} |
|||
const { |
|||
close, |
|||
cancel, |
|||
visible, |
|||
dispatch, |
|||
pepList, |
|||
actions, |
|||
editObj, |
|||
memberEdit, |
|||
pomsList, |
|||
anxinDelete, |
|||
anxincloudArr |
|||
} = props; |
|||
const { install } = actions; |
|||
const form = useRef();//表单 |
|||
const [disablePeople, setDisablePeople] = useState(true); //页码信息 |
|||
const [peopleList, setPeopleList] = useState([]); //人员List |
|||
const [departmentId, setDepartmentId] = useState(); //部门id |
|||
const [jurisdiction, setJurisdiction] = useState([ |
|||
{ |
|||
label: '数据分析师', |
|||
value: 'data_analyst', |
|||
text: '拥有数据、分析、工单、资料相关的权限' |
|||
}, { |
|||
label: '售后运维', |
|||
value: 'after_sale', |
|||
text: '拥有设备、问题、工单、资料相关的权限' |
|||
}, { |
|||
label: '资源管理者', |
|||
value: 'resource_manage', |
|||
text: '拥有资料、设备、工单相关的权限' |
|||
}, { |
|||
label: '客户服务', |
|||
value: 'customer_service', |
|||
text: '拥有服务、工单、资料相关的权限' |
|||
}, |
|||
]); //权限配置 |
|||
const [pomsList_, setPomsList_] = useState([]) |
|||
//初始化 |
|||
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 |
|||
} |
|||
setDepartmentId(editObj.departments[0].id) |
|||
setPeopleList(departmentList) |
|||
} |
|||
setPomsList_(pomsList.filter(p=>p.pepProjectIsDelete != -1)) |
|||
}, []); |
|||
} |
|||
setDepartmentId(editObj.departments[0].id) |
|||
setPeopleList(departmentList) |
|||
} |
|||
setPomsList_(pomsList.filter(p => p.pepProjectIsDelete != -1)) |
|||
}, []); |
|||
|
|||
function handleOk () { |
|||
//点击弹框确定 右边按钮 |
|||
form.current |
|||
.validate() |
|||
.then((values) => { |
|||
let roleArr = JSON.parse(JSON.stringify(values.role)) |
|||
if (roleArr.indexOf('admin') != -1) { |
|||
roleArr.splice(roleArr.indexOf('admin'), 1) |
|||
} |
|||
if (memberEdit) { |
|||
dispatch(install.postOrganizationUser({ role: roleArr, correlationProject: values.correlationProject, pomsUserId: editObj.id, pepUserId: values.pepUserId, msg: '修改成员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 |
|||
if (res.success) { |
|||
close(); |
|||
} |
|||
}) |
|||
} |
|||
else { |
|||
dispatch(install.postOrganizationUser({ role: roleArr, correlationProject: values.correlationProject, pepUserId: values.pepUserId, msg: '新增成员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 |
|||
if (res.success) { |
|||
close(); |
|||
function handleOk () { |
|||
//点击弹框确定 右边按钮 |
|||
form.current |
|||
.validate() |
|||
.then((values) => { |
|||
let roleArr = JSON.parse(JSON.stringify(values.role)) |
|||
if (roleArr.indexOf('admin') != -1) { |
|||
roleArr.splice(roleArr.indexOf('admin'), 1) |
|||
} |
|||
if (memberEdit) { |
|||
dispatch(install.postOrganizationUser({ role: roleArr, correlationProject: values.correlationProject, pomsUserId: editObj.id, pepUserId: values.pepUserId, msg: '修改成员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 |
|||
if (res.success) { |
|||
close(); |
|||
} |
|||
}) |
|||
} |
|||
else { |
|||
dispatch(install.postOrganizationUser({ role: roleArr, correlationProject: values.correlationProject, pepUserId: values.pepUserId, msg: '新增成员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 |
|||
if (res.success) { |
|||
close(); |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
function handleCancel () { |
|||
cancel(); |
|||
//点击弹框取消 左边按钮 |
|||
} |
|||
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); |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
function handleCancel () { |
|||
cancel(); |
|||
//点击弹框取消 左边按钮 |
|||
} |
|||
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: "请选择部门" }]} |
|||
showClear |
|||
filter |
|||
initValue={departmentId || ""} |
|||
disabled={memberEdit} |
|||
> |
|||
{ |
|||
pepList.map((item, index) => { |
|||
return ( |
|||
<Form.Select.Option key={item.id} value={item.id}> |
|||
{item.name} |
|||
</Form.Select.Option> |
|||
) |
|||
}) |
|||
} |
|||
</Form.Select> |
|||
</div> |
|||
<div> |
|||
<Form.Select |
|||
label="选择人员:" |
|||
field="pepUserId" |
|||
filter |
|||
placeholder="请选择人员" |
|||
style={{ width: 417 }} |
|||
rules={[{ required: true, message: "请选择人员" }]} |
|||
showClear |
|||
initValue={editObj.pepUserId || ""} |
|||
disabled={disablePeople} |
|||
> |
|||
{ |
|||
peopleList.map((item, index) => { |
|||
return ( |
|||
<Form.Select.Option key={item.id} value={item.id}> |
|||
{item.name} |
|||
</Form.Select.Option> |
|||
) |
|||
}) |
|||
} |
|||
</Form.Select> |
|||
</div> |
|||
<div> |
|||
<Form.CheckboxGroup |
|||
field="role" |
|||
label='权限配置:' |
|||
showClear |
|||
initValue={editObj.role || []} |
|||
> |
|||
{ |
|||
jurisdiction.map((item, index) => { |
|||
return ( |
|||
<Checkbox value={item.value} key={index} > |
|||
<div style={{ display: 'flex' }}> |
|||
<div style={{ fontSize: 13, color: '#4A4A4A' }}> |
|||
{item.label} |
|||
</div> |
|||
<div style={{ fontSize: 12, color: '#969799', marginLeft: 12 }}> |
|||
{item.text} |
|||
</div> |
|||
</div> |
|||
</Checkbox> |
|||
) |
|||
}) |
|||
} |
|||
</Form.CheckboxGroup> |
|||
</div> |
|||
<div> |
|||
<Form.Select |
|||
label="关联项目:" |
|||
field="correlationProject" |
|||
multiple |
|||
placeholder="请选择关联项目" |
|||
initValue={anxincloudArr} |
|||
style={{ width: 417 }} |
|||
filter |
|||
showClear |
|||
outerBottomSlot={ |
|||
<p style={{ margin:"6px 26px",}}> |
|||
<Button theme='borderless' onClick={()=>{ |
|||
form.current.setValue('correlationProject',pomsList_.map(p=> p.id)) |
|||
}}>全选</Button> |
|||
</p> |
|||
} |
|||
> |
|||
{ |
|||
pomsList_.map((item, index) => { |
|||
return ( |
|||
<Form.Select.Option key={index} value={item.id}> |
|||
{item.pepProjectName || item.name} |
|||
</Form.Select.Option> |
|||
) |
|||
}) |
|||
} |
|||
</Form.Select> |
|||
</div> |
|||
}} |
|||
getFormApi={(formApi) => (form.current = formApi)} |
|||
> |
|||
<div> |
|||
<Form.Select |
|||
label="选择部门:" |
|||
field="department" |
|||
placeholder="请选择部门" |
|||
style={{ width: 417 }} |
|||
rules={[{ required: true, message: "请选择部门" }]} |
|||
showClear |
|||
filter |
|||
initValue={departmentId || ""} |
|||
disabled={memberEdit} |
|||
> |
|||
{ |
|||
anxinDelete?.length > 0 ? ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div style={{ marginTop: 3 }}> |
|||
<img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} /> |
|||
</div> |
|||
<div style={{ |
|||
background: 'rgba(255, 51, 0, 0.28)', color: '#FF3300', |
|||
fontSize: 12, marginLeft: 8, lineHeight: 2, padding: '0px 5px', |
|||
border: '1px solid rgba(255,51,0,0.3)', width: 515 |
|||
}}> |
|||
确定后“{anxinDelete.join('、')}”将被系统移除，原因是项目已在【项企】或【映射关系】中被删除！ |
|||
pepList.map((item, index) => { |
|||
return ( |
|||
<Form.Select.Option key={item.id} value={item.id}> |
|||
{item.name} |
|||
</Form.Select.Option> |
|||
) |
|||
}) |
|||
} |
|||
</Form.Select> |
|||
</div> |
|||
<div> |
|||
<Form.Select |
|||
label="选择人员:" |
|||
field="pepUserId" |
|||
filter |
|||
placeholder="请选择人员" |
|||
style={{ width: 417 }} |
|||
rules={[{ required: true, message: "请选择人员" }]} |
|||
showClear |
|||
initValue={editObj.pepUserId || ""} |
|||
disabled={disablePeople} |
|||
> |
|||
{ |
|||
peopleList.map((item, index) => { |
|||
return ( |
|||
<Form.Select.Option key={item.id} value={item.id}> |
|||
{item.name} |
|||
</Form.Select.Option> |
|||
) |
|||
}) |
|||
} |
|||
</Form.Select> |
|||
</div> |
|||
<div> |
|||
<Form.CheckboxGroup |
|||
field="role" |
|||
label='权限配置:' |
|||
showClear |
|||
initValue={editObj.role || []} |
|||
> |
|||
{ |
|||
jurisdiction.map((item, index) => { |
|||
return ( |
|||
<Checkbox value={item.value} key={index} > |
|||
<div style={{ display: 'flex' }}> |
|||
<div style={{ fontSize: 13, color: '#4A4A4A' }}> |
|||
{item.label} |
|||
</div> |
|||
<div style={{ fontSize: 12, color: '#969799', marginLeft: 12 }}> |
|||
{item.text} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) : ('') |
|||
</Checkbox> |
|||
) |
|||
}) |
|||
} |
|||
</Form> |
|||
</div> |
|||
</Modal> |
|||
</> |
|||
); |
|||
</Form.CheckboxGroup> |
|||
</div> |
|||
<div> |
|||
<Form.Select |
|||
label="关联项目:" |
|||
field="correlationProject" |
|||
multiple |
|||
placeholder="请选择关联项目" |
|||
initValue={anxincloudArr} |
|||
style={{ width: 417 }} |
|||
filter |
|||
showClear |
|||
// autoAdjustOverflow={false} |
|||
outerBottomSlot={ |
|||
<p style={{ margin: "6px 26px", }}> |
|||
<Button theme='borderless' onClick={() => { |
|||
form.current.setValue('correlationProject', pomsList_.map(p => p.id)) |
|||
}}>全选</Button> |
|||
<Button theme='borderless' onClick={() => { |
|||
form.current.setValue('correlationProject', []) |
|||
}}>取消选择</Button> |
|||
</p> |
|||
} |
|||
> |
|||
{ |
|||
pomsList_.map((item, index) => { |
|||
return ( |
|||
<Form.Select.Option key={index} value={item.id}> |
|||
{item.pepProjectName || item.name} |
|||
</Form.Select.Option> |
|||
) |
|||
}) |
|||
} |
|||
</Form.Select> |
|||
</div> |
|||
{ |
|||
anxinDelete?.length > 0 ? ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div style={{ marginTop: 3 }}> |
|||
<img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} /> |
|||
</div> |
|||
<div style={{ |
|||
background: 'rgba(255, 51, 0, 0.28)', color: '#FF3300', |
|||
fontSize: 12, marginLeft: 8, lineHeight: 2, padding: '0px 5px', |
|||
border: '1px solid rgba(255,51,0,0.3)', width: 515 |
|||
}}> |
|||
确定后“{anxinDelete.join('、')}”将被系统移除，原因是项目已在【项企】或【映射关系】中被删除！ |
|||
</div> |
|||
</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, |
|||
}; |
|||
const { auth, global, members } = state; |
|||
return { |
|||
// loading: members.isRequesting, |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
// members: members.data, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(memberModal); |
|||
|
|||
Loading…
Reference in new issue