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