You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
258 lines
12 KiB
258 lines
12 KiB
import React, { useState, useRef, useEffect } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Modal, Form, CheckboxGroup, Checkbox } 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: '拥有服务、工单、资料相关的权限'
|
|
},
|
|
]); //权限配置
|
|
//初始化
|
|
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)
|
|
}
|
|
}, []);
|
|
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
}}
|
|
getFormApi={(formApi) => (form.current = formApi)}
|
|
>
|
|
<div>
|
|
<Form.Select
|
|
label="选择部门:"
|
|
field="department"
|
|
placeholder="请选择部门"
|
|
style={{ width: 417 }}
|
|
rules={[{ required: true, message: "请选择部门" }]}
|
|
showClear
|
|
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"
|
|
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 }}
|
|
showClear
|
|
>
|
|
{
|
|
pomsList.map((item, index) => {
|
|
return (
|
|
item.pepProjectIsDelete !== 1 ? (
|
|
<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,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(memberModal);
|
|
|