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.
414 lines
17 KiB
414 lines
17 KiB
import React, { useState, useRef, useEffect } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Modal, Form, Tag, } from "@douyinfe/semi-ui";
|
|
import { IconAlertCircle } from '@douyinfe/semi-icons';
|
|
|
|
|
|
function adminModal (props) {
|
|
const {
|
|
close,
|
|
cancel,
|
|
visible,
|
|
dispatch,
|
|
actions,
|
|
systemEdit,//是否是编辑
|
|
peplist,//项企项目列表
|
|
anxincloudList,//安心云项目列表
|
|
appList,//应用列表
|
|
pepProjectId,//已选择项企id
|
|
pepname,//修改时自定义项目名称
|
|
anxincloudArr,//修改时已经选择的安心云列表
|
|
anxinDelete,//修改时安心云项目有删除,显示提示信息
|
|
appArr,//修改时添加应用
|
|
bindId,
|
|
mapping, //修改时的映射类型
|
|
maintenancePeriod, //维保时间段
|
|
editData,
|
|
traitLabel
|
|
} = props;
|
|
const { install } = actions;
|
|
const form = useRef();//表单
|
|
const [custom, setCustom] = useState(false); //是否是自定义项目
|
|
const [myprojectType, setMyprojectType] = useState('pep'); //是否是自定义项目
|
|
const [structureSensor, setStructureSensor] = useState([])
|
|
const [sendorders, setSendorders] = useState([])
|
|
const [strucId, setStrucId] = useState([])
|
|
|
|
//初始化
|
|
useEffect(async () => {
|
|
if (pepname) {
|
|
setCustom(true)
|
|
setMyprojectType('axy')
|
|
}
|
|
if (editData?.id) {
|
|
await getData({ projectId: anxincloudArr?.join(',') + ',-1' })
|
|
setSendorders(editData?.sendorders)
|
|
if (editData?.sendorders?.includes('emphasis')) {
|
|
form.current.setValue('strucId', editData?.strucId)
|
|
editData?.strucId?.forEach(d => {
|
|
form.current.setValue('strucSensor' + d, editData?.strucSensor[d])
|
|
|
|
})
|
|
setStrucId(editData?.strucId || [])
|
|
}
|
|
if (editData?.sendorders?.includes('percentage')) {
|
|
form.current.setValue('percentage', editData?.percentage)
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const getData = async (data = {}) => {
|
|
await dispatch(install.getStructureStation({ ...data, traitLabel })).then((res) => {
|
|
if (res.success) {
|
|
setStructureSensor(res.payload.data || [])
|
|
}
|
|
})
|
|
}
|
|
|
|
function handleOk () {
|
|
//点击弹框确定 右边按钮
|
|
form.current
|
|
.validate()
|
|
.then((values) => {
|
|
|
|
let appArr = []
|
|
for (let i = 0; i < values.appId.length; i++) {
|
|
appArr.push(JSON.parse(values.appId[i]).id)
|
|
}
|
|
console.log(22, values);
|
|
|
|
let strucSensor = {}
|
|
if (values.sendorders?.includes("emphasis")) {
|
|
values.strucId?.forEach(d => {
|
|
strucSensor[d] = values['strucSensor' + d] || []
|
|
});
|
|
}
|
|
let data = {
|
|
name: values.name,
|
|
pepProjectId: values.pepProjectId,
|
|
anxinProjectId: values.anxinProjectId,
|
|
appId: appArr,
|
|
mappingClass: values.mappingClass,
|
|
maintenancePeriod: values.maintenancePeriod,
|
|
isanchor: values.isanchor,
|
|
sendorders: values.sendorders,
|
|
percentage: values.percentage,
|
|
strucId: values.strucId,
|
|
strucSensor: strucSensor
|
|
}
|
|
|
|
if (systemEdit) {
|
|
dispatch(install.postProjectBind({ ...data, bindId: bindId, msg: '修改映射关系', })).then((res) => {//获取项企(PEP)全部部门及其下用户
|
|
if (res.success) {
|
|
close();
|
|
}
|
|
})
|
|
}
|
|
else {
|
|
dispatch(install.postProjectBind({ ...data, 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="132px"
|
|
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
|
|
onChange={v => {
|
|
if (v.length) {
|
|
getData({ projectId: v.join(',') + ',-1' })
|
|
} else {
|
|
setStructureSensor([])
|
|
}
|
|
form.current.setValue('strucId', [])
|
|
setStrucId([])
|
|
}}
|
|
>
|
|
{
|
|
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>
|
|
<Form.Select
|
|
label="映射分类:"
|
|
field="mappingClass"
|
|
filter
|
|
placeholder="请选择映射类型"
|
|
style={{ width: 425 }}
|
|
initValue={mapping}
|
|
showClear
|
|
>
|
|
{
|
|
[
|
|
{ name: '智慧类', value: 'wisdom' },
|
|
{ name: '监测类', value: 'monitor' },
|
|
{ name: '其他', value: 'other' }
|
|
].map(item => {
|
|
return <Form.Select.Option key={item.value} value={item.value}>
|
|
{item.name}
|
|
</Form.Select.Option>
|
|
})
|
|
}
|
|
</Form.Select>
|
|
<Form.DatePicker
|
|
style={{ width: 425 }}
|
|
label='维保期限时间:'
|
|
type='dateRange'
|
|
field='maintenancePeriod'
|
|
initValue={maintenancePeriod}
|
|
>
|
|
</Form.DatePicker>
|
|
</div>
|
|
<Form.RadioGroup field="isanchor" label='是否续签:' initValue={editData?.isanchor} >
|
|
<Form.Radio value={true}>续签</Form.Radio>
|
|
<Form.Radio value={false}>不续签</Form.Radio>
|
|
</Form.RadioGroup>
|
|
<Form.CheckboxGroup
|
|
field="sendorders"
|
|
label='自动派单:'
|
|
direction='horizontal'
|
|
initValue={editData?.sendorders || []}
|
|
onChange={v => {
|
|
setSendorders(v)
|
|
if (!v.includes('emphasis')) {
|
|
setStrucId([])
|
|
}
|
|
}}
|
|
>
|
|
<Form.Checkbox value="percentage">项目在线百分比</Form.Checkbox>
|
|
<Form.Checkbox value="emphasis">运维关键点位</Form.Checkbox>
|
|
</Form.CheckboxGroup>
|
|
{
|
|
sendorders?.includes('percentage') &&
|
|
<Form.InputNumber field='percentage' label='项目中断百分比:' min={0} max={100} />
|
|
}
|
|
{
|
|
sendorders?.includes('emphasis') &&
|
|
<>
|
|
<Form.Select
|
|
label="选择结构物:"
|
|
field="strucId"
|
|
filter
|
|
multiple
|
|
placeholder="请选择结构物"
|
|
style={{ width: 425 }}
|
|
// initValue={[]}
|
|
showClear
|
|
onChange={v => {
|
|
setStrucId(v)
|
|
}}
|
|
>
|
|
{
|
|
structureSensor.map(item => {
|
|
return <Form.Select.Option key={item.strucId} value={item.strucId}>
|
|
{item.strucName}
|
|
</Form.Select.Option>
|
|
})
|
|
}
|
|
</Form.Select>
|
|
|
|
{strucId?.length ? structureSensor?.filter(v => strucId?.includes(v.strucId))?.map((u, index) => {
|
|
return <Form.CheckboxGroup
|
|
label={u.strucName + ':'}
|
|
key={u.strucName + index}
|
|
field={'strucSensor' + u.strucId}
|
|
style={{ width: 420 }}
|
|
// initValue={editObj?.pomsStrucFactorId ? editObj?.pomsStrucFactorId[u.id] : (factorItem || [])}
|
|
direction='horizontal'
|
|
showClear
|
|
>
|
|
{
|
|
u.sensor?.map((v, index) =>
|
|
<Form.Checkbox value={v.senterId} key={v.senterId} style={{ width: 200 }}>{v.senterName}({v.factorName})</Form.Checkbox>)
|
|
}
|
|
</Form.CheckboxGroup>
|
|
}) : ""
|
|
}
|
|
</>
|
|
}
|
|
</Form>
|
|
</div >
|
|
</Modal >
|
|
</>
|
|
);
|
|
}
|
|
function mapStateToProps (state) {
|
|
const { auth, global, members } = state;
|
|
return {
|
|
// loading: members.isRequesting,
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
traitLabel: global.traitLabel,
|
|
};
|
|
}
|
|
|
|
export default connect(mapStateToProps)(adminModal);
|
|
|