wuqun 2 years ago
parent
commit
2d3dc70993
  1. 15
      api/app/lib/controllers/project/index.js
  2. 469
      web/client/src/sections/install/components/systemModal.jsx

15
api/app/lib/controllers/project/index.js

@ -129,11 +129,24 @@ async function projectAnxincloud (ctx) {
async function projectPManage (ctx) {
try {
const models = ctx.fs.dc.models;
const { clickHouse } = ctx.app.fs
const { includeDelete } = ctx.query
const projectRes = await clickHouse.projectManage.query(`SELECT id, project_name, isdelete FROM t_pim_project WHERE isdelete=0 ${includeDelete == 1 ? 'OR isdelete=1' : ''} ORDER BY id DESC`).toPromise()
const bindedPRes = await models.ProjectCorrelation.findAll({
where: {
pepProjectId: { $ne: null }
}
})
for (let p of projectRes) {
if (bindedPRes.some(bp => bp.pepProjectId == p.id)) {
p.binded = true
}
}
ctx.status = 200;
ctx.body = projectRes
} catch (error) {
@ -210,7 +223,7 @@ async function strucWithPomsProject (ctx) {
WHERE
project_state != -1
AND
t_project.id IN (${ bindRes.anxinProjectId.join(',')})
t_project.id IN (${bindRes.anxinProjectId.join(',')})
ORDER BY strucId
`
).toPromise() :

469
web/client/src/sections/install/components/systemModal.jsx

@ -5,248 +5,251 @@ 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')
}
}, []);
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();
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)
}
}
})
}
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();
}
}}
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>
)
})
}
})
}
})
}
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.map((item, index) => {
return (
<Form.Select.Option key={item.id} value={item.id}>
{item.project_name}
</Form.Select.Option>
)
})
}
</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>
</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}
>
{
anxinDelete.length > 0 ? (
<div style={{ display: 'flex' }}>
<div style={{ marginTop: 3 }}>
<img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} />
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>
<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.Select.Option>
)
})
}
<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>
</>
);
</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,
};
const { auth, global, members } = state;
return {
// loading: members.isRequesting,
user: auth.user,
actions: global.actions,
// members: members.data,
};
}
export default connect(mapStateToProps)(adminModal);

Loading…
Cancel
Save