deartibers
2 years ago
14 changed files with 512 additions and 112 deletions
|
Before Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
Before Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
@ -0,0 +1,213 @@ |
|||
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, |
|||
visible, |
|||
dispatch, |
|||
pepList, |
|||
actions, |
|||
editObj, |
|||
memberEdit, |
|||
} = 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) => { |
|||
dispatch(install.postOrganizationUser({ role: values.role, pepUserId: values.pepUserId })).then((res) => {//获取项企(PEP)全部部门及其下用户 |
|||
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) { |
|||
setDisablePeople(false) |
|||
setPeopleList(pepList[values.department].users) |
|||
} |
|||
else { |
|||
setPeopleList([]) |
|||
setDisablePeople(true) |
|||
} |
|||
} |
|||
} |
|||
|
|||
}} |
|||
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={index}> |
|||
{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.id || ""} |
|||
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="请选择部门" |
|||
style={{ width: 417 }} |
|||
// rules={[{ required: true, message: "请选择部门" }]} |
|||
showClear |
|||
> |
|||
{/* { |
|||
pepList.map((item, index) => { |
|||
return ( |
|||
<Form.Select.Option key={item.id} value={index}> |
|||
{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)(memberModal); |
|||
Loading…
Reference in new issue