free-sun
/
OperationalService
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

成员设置可以取消选择

dev
巴林闲侠 2 years ago
parent
602f5145ec
commit
09d3121f02
1 changed files with 254 additions and 250 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 504
      web/client/src/sections/install/components/memberModal.jsx

504
web/client/src/sections/install/components/memberModal.jsx
View File

@ -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);

Write Preview
Loading…
Cancel
Save