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.
255 lines
10 KiB
255 lines
10 KiB
import React, { useState, useRef, useEffect } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Modal, Form, ArrayField, Tag } from "@douyinfe/semi-ui";
|
|
import { IconAlertCircle, IconAlertTriangle } from '@douyinfe/semi-icons';
|
|
|
|
|
|
function adminModal (props) {
|
|
const {
|
|
close,
|
|
cancel,
|
|
visible,
|
|
dispatch,
|
|
actions,
|
|
systemEdit,//是否是编辑
|
|
peplist,//项企项目列表
|
|
anxincloudList,//安心云项目列表
|
|
appList,//应用列表
|
|
pepProjectId,//已选择项企id
|
|
pepname,//修改时自定义项目名称
|
|
anxincloudArr,//修改时已经选择的安心云列表
|
|
anxinDelete,//修改时安心云项目有删除,显示提示信息
|
|
appArr,//修改时添加应用
|
|
bindId
|
|
} = props;
|
|
const { install } = actions;
|
|
const form = useRef();//表单
|
|
const [custom, setCustom] = useState(false); //是否是自定义项目
|
|
const [myprojectType, setMyprojectType] = useState('pep'); //是否是自定义项目
|
|
//初始化
|
|
useEffect(() => {
|
|
if (pepname) {
|
|
setCustom(true)
|
|
setMyprojectType('axy')
|
|
}
|
|
}, []);
|
|
|
|
function handleOk () {
|
|
//点击弹框确定 右边按钮
|
|
form.current
|
|
.validate()
|
|
.then((values) => {
|
|
if (systemEdit) {
|
|
let appArr = []
|
|
for (let i = 0; i < values.appId.length; i++) {
|
|
appArr.push(JSON.parse(values.appId[i]).id)
|
|
}
|
|
let bindObj = JSON.parse(JSON.stringify(values))
|
|
bindObj.appId = appArr
|
|
dispatch(install.postProjectBind({ ...bindObj, bindId: bindId, msg: '修改映射关系' })).then((res) => {//获取项企(PEP)全部部门及其下用户
|
|
if (res.success) {
|
|
close();
|
|
}
|
|
})
|
|
}
|
|
else {
|
|
let appArr = []
|
|
for (let i = 0; i < values.appId.length; i++) {
|
|
appArr.push(JSON.parse(values.appId[i]).id)
|
|
}
|
|
let bindObj = JSON.parse(JSON.stringify(values))
|
|
bindObj.appId = appArr
|
|
dispatch(install.postProjectBind({ ...bindObj, msg: '添加映射关系' })).then((res) => {//获取项企(PEP)全部部门及其下用户
|
|
if (res.success) {
|
|
close();
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
function handleCancel () {
|
|
cancel();
|
|
//点击弹框取消 左边按钮
|
|
}
|
|
const renderMultipleWithCustomTag = (optionNode, { onClose }) => {
|
|
const content = (
|
|
<Tag closable={true}
|
|
onClose={onClose}
|
|
size='large'>
|
|
{JSON.parse(optionNode.value).name}
|
|
</Tag>
|
|
);
|
|
return {
|
|
isRenderInTag: false,
|
|
content
|
|
};
|
|
}
|
|
return (
|
|
<>
|
|
<Modal
|
|
title={systemEdit ? '修改映射关系' : '添加映射关系'}
|
|
okText="确定"
|
|
cancelText="取消"
|
|
visible={visible}
|
|
onOk={handleOk}
|
|
width={666}
|
|
onCancel={handleCancel}
|
|
>
|
|
<div style={{ margin: "0px 25px" }}>
|
|
<div style={{ width: '100%', lineHeight: 2, background: '#F4F8FF', borderRadius: 2, border: '1px solid #C7E1FF', display: 'flex' }}>
|
|
<div style={{ display: 'flex', marginLeft: 12, marginTop: 5.5 }}><IconAlertCircle style={{ color: '#0F7EFB' }} /></div>
|
|
<div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8, marginRight: 12 }}>映射关系由项企立项项目与安心云项目关联产生，若项目未在项企中有记载，可选自定义项目，待项企立项项后再进行修改！</div>
|
|
</div>
|
|
<Form
|
|
allowEmpty
|
|
labelPosition="left"
|
|
labelAlign="right"
|
|
labelWidth="110px"
|
|
onValueChange={(values, field) => {
|
|
for (var key in field) {
|
|
if (key == 'projectType') {
|
|
if (field.projectType == 'pep') {
|
|
setCustom(false)
|
|
}
|
|
else {
|
|
setCustom(true)
|
|
}
|
|
}
|
|
}
|
|
}}
|
|
getFormApi={(formApi) => (form.current = formApi)}
|
|
>
|
|
<div>
|
|
<Form.RadioGroup field="projectType" initValue={myprojectType} label='项目类型:'
|
|
disabled={systemEdit && !pepname} >
|
|
<Form.Radio value='pep'>项企项目</Form.Radio>
|
|
<Form.Radio value='axy'>自定义项目（未在项企中立项的项目可选）</Form.Radio>
|
|
</Form.RadioGroup>
|
|
</div>
|
|
{custom ? (
|
|
<div>
|
|
<Form.Input
|
|
field="name"
|
|
label='自定义项目:'
|
|
style={{ width: 425 }}
|
|
maxLength={15}
|
|
initValue={pepname || ""}
|
|
placeholder="请输入项目名称，且名称需与项企区分"
|
|
showClear
|
|
rules={[{ required: true, message: "请输入项目名称，且名称需与项企区分" }]} />
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<Form.Select
|
|
label="PEP项企项目:"
|
|
field="pepProjectId"
|
|
filter
|
|
placeholder="请选择PEP项企项目"
|
|
style={{ width: 425 }}
|
|
rules={[{ required: true, message: "请选择PEP项企项目" }]}
|
|
initValue={pepProjectId || ""}
|
|
disabled={systemEdit && !pepname}
|
|
showClear
|
|
>
|
|
{
|
|
peplist.reduce((arr, item) => {
|
|
if (!item.binded) {
|
|
arr.push(
|
|
<Form.Select.Option key={item.id} value={item.id}>
|
|
{item.project_name}
|
|
</Form.Select.Option>
|
|
)
|
|
}
|
|
return arr
|
|
}, [])
|
|
}
|
|
</Form.Select>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<Form.Select
|
|
label="安心云项目:"
|
|
field="anxinProjectId"
|
|
multiple
|
|
filter
|
|
placeholder="请选择安心云项目"
|
|
style={{ width: 425 }}
|
|
rules={[{ required: true, message: "请选择安心云项目" }]}
|
|
initValue={anxincloudArr || []}
|
|
showClear
|
|
>
|
|
{
|
|
anxincloudList.map((item, index) => {
|
|
return (
|
|
<Form.Select.Option key={index} value={item.id}>
|
|
{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>
|
|
) : ('')
|
|
}
|
|
<div>
|
|
<Form.Select
|
|
label="添加应用:"
|
|
field="appId"
|
|
multiple
|
|
filter
|
|
placeholder="请选择添加应用"
|
|
style={{ width: 425 }}
|
|
initValue={appArr || []}
|
|
showClear
|
|
renderSelectedItem={renderMultipleWithCustomTag}
|
|
>
|
|
{
|
|
appList.map((item, index) => {
|
|
return (
|
|
<Form.Select.Option key={'a' + index} value={JSON.stringify(item)} label={
|
|
<div>
|
|
<div style={{ fontSize: 14, fontWeight: 600 }}>
|
|
{item.name}
|
|
</div>
|
|
<div style={{ fontSize: 12, color: 'rgb(139, 139, 139)' }}>
|
|
URL:{item.url}
|
|
</div>
|
|
</div>
|
|
}>
|
|
</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)(adminModal);
|
|
|