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