|
|
|
@ -8,472 +8,477 @@ import '../style.less' |
|
|
|
import { set } from 'nprogress'; |
|
|
|
|
|
|
|
const Example = (props) => { |
|
|
|
const { dispatch, actions, user, loading, socket } = props |
|
|
|
const { install } = actions; |
|
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 |
|
|
|
const [limits, setLimits] = useState()//每页实际条数 |
|
|
|
const mylimits = useRef(); //每页实际条数 |
|
|
|
const [selected, setSelected] = useState([]) //表格被勾选项 |
|
|
|
const [systemModal, setSystemModal] = useState(false) //映射关系弹框 |
|
|
|
const [systemEdit, setSystemEdit] = useState(false) //是否是修改 |
|
|
|
const [anxincloudList, setAnxincloudList] = useState([]) //安心云列表 |
|
|
|
const [peplist, setPeplist] = useState([]) //PEP项目管理项目列表 |
|
|
|
const [appList, setAppList] = useState([]) //应用列表 |
|
|
|
const [pepProjectId, setPepProjectId] = useState() //修改时项企id |
|
|
|
const [anxincloudArr, setAnxincloudArr] = useState([]) //修改时已经选择的安心云列表 |
|
|
|
const [pepname, setPepname] = useState() //修改时自定义项目名称 |
|
|
|
const [anxinDelete, setAnxinDelete] = useState([]) //修改时安心云项目有删除,显示提示信息 |
|
|
|
const [appArr, setAppArr] = useState([]) //修改时添加应用 |
|
|
|
const [bindId, setBindId] = useState() //修改时绑定的id |
|
|
|
const [tableKey, setTableKey] = useState([]) //修改时绑定的id |
|
|
|
const page = useRef(query.page);//哪一页 |
|
|
|
const { dispatch, actions, user, loading, socket } = props |
|
|
|
const { install } = actions; |
|
|
|
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 |
|
|
|
const [limits, setLimits] = useState()//每页实际条数 |
|
|
|
const mylimits = useRef(); //每页实际条数 |
|
|
|
const [selected, setSelected] = useState([]) //表格被勾选项 |
|
|
|
const [systemModal, setSystemModal] = useState(false) //映射关系弹框 |
|
|
|
const [systemEdit, setSystemEdit] = useState(false) //是否是修改 |
|
|
|
const [anxincloudList, setAnxincloudList] = useState([]) //安心云列表 |
|
|
|
const [peplist, setPeplist] = useState([]) //PEP项目管理项目列表 |
|
|
|
const [appList, setAppList] = useState([]) //应用列表 |
|
|
|
const [pepProjectId, setPepProjectId] = useState() //修改时项企id |
|
|
|
const [anxincloudArr, setAnxincloudArr] = useState([]) //修改时已经选择的安心云列表 |
|
|
|
const [pepname, setPepname] = useState() //修改时自定义项目名称 |
|
|
|
const [anxinDelete, setAnxinDelete] = useState([]) //修改时安心云项目有删除,显示提示信息 |
|
|
|
const [appArr, setAppArr] = useState([]) //修改时添加应用 |
|
|
|
const [bindId, setBindId] = useState() //修改时绑定的id |
|
|
|
const [tableKey, setTableKey] = useState([]) //修改时绑定的id |
|
|
|
const page = useRef(query.page);//哪一页 |
|
|
|
const [mapping, setMapping] = useState() //修改时的映射类型 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleRow (record, index) {//斑马条纹 |
|
|
|
// 给偶数行设置斑马纹 |
|
|
|
if (index % 2 === 0) { |
|
|
|
return { |
|
|
|
style: { |
|
|
|
background: '#FAFCFF', |
|
|
|
} |
|
|
|
}; |
|
|
|
} else { |
|
|
|
return {}; |
|
|
|
} |
|
|
|
} |
|
|
|
function handleRow (record, index) {//斑马条纹 |
|
|
|
// 给偶数行设置斑马纹 |
|
|
|
if (index % 2 === 0) { |
|
|
|
return { |
|
|
|
style: { |
|
|
|
background: '#FAFCFF', |
|
|
|
} |
|
|
|
}; |
|
|
|
} else { |
|
|
|
return {}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const [tableData, setTableData] = useState([]) //表格数据 |
|
|
|
const [tableData, setTableData] = useState([]) //表格数据 |
|
|
|
|
|
|
|
const getPepProject = ()=>{ |
|
|
|
const getPepProject = () => { |
|
|
|
dispatch(install.getProjectPmanage(query)).then((res) => {//获取PEP项目管理项目 |
|
|
|
setPeplist(res.payload.data) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
dispatch(install.getProjectAnxincloud(query)).then((res) => {//获取安心云项目 |
|
|
|
setAnxincloudList(res.payload.data) |
|
|
|
}) |
|
|
|
getPepProject() |
|
|
|
dispatch(install.getProjectAppList(query)).then((res) => {//获取应用列表 |
|
|
|
setAppList(res.payload.data) |
|
|
|
}) |
|
|
|
console.log('user',user); |
|
|
|
}, []) |
|
|
|
useEffect(() => { |
|
|
|
getProjectPomsList(); |
|
|
|
}, [query]); |
|
|
|
useEffect(() => { |
|
|
|
dispatch(install.getProjectAnxincloud(query)).then((res) => {//获取安心云项目 |
|
|
|
setAnxincloudList(res.payload.data) |
|
|
|
}) |
|
|
|
getPepProject() |
|
|
|
dispatch(install.getProjectAppList(query)).then((res) => {//获取应用列表 |
|
|
|
setAppList(res.payload.data) |
|
|
|
}) |
|
|
|
console.log('user', user); |
|
|
|
}, []) |
|
|
|
useEffect(() => { |
|
|
|
getProjectPomsList(); |
|
|
|
}, [query]); |
|
|
|
|
|
|
|
function getProjectPomsList () { |
|
|
|
dispatch(install.getProjectPoms(query)).then((res) => {//获取已绑定项目 |
|
|
|
if (res.success) { |
|
|
|
let mytableData = JSON.parse(JSON.stringify(res.payload.data.rows)); |
|
|
|
let mytableKey = [] |
|
|
|
for (let index = 0; index < mytableData.length; index++) { |
|
|
|
mytableData[index].key = mytableData[index].id |
|
|
|
mytableKey.push(mytableData[index].id) |
|
|
|
} |
|
|
|
setTableKey(mytableKey) |
|
|
|
setTableData(mytableData) |
|
|
|
setLimits(res.payload.data.count) |
|
|
|
mylimits.current = res.payload.data.rows.length |
|
|
|
function getProjectPomsList () { |
|
|
|
dispatch(install.getProjectPoms(query)).then((res) => {//获取已绑定项目 |
|
|
|
if (res.success) { |
|
|
|
let mytableData = JSON.parse(JSON.stringify(res.payload.data.rows)); |
|
|
|
let mytableKey = [] |
|
|
|
for (let index = 0; index < mytableData.length; index++) { |
|
|
|
mytableData[index].key = mytableData[index].id |
|
|
|
mytableKey.push(mytableData[index].id) |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
const [columns, setColumns] = useState([//表格属性 |
|
|
|
{ |
|
|
|
title: "序号", |
|
|
|
dataIndex: "index", |
|
|
|
key: 'index', |
|
|
|
render: (text, r, index) => { |
|
|
|
return index + 1; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'PEP项企项目名称', |
|
|
|
dataIndex: "pepProjectName", |
|
|
|
key: 'pepProjectName', |
|
|
|
render: (_, row) => { |
|
|
|
return ( |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
{ |
|
|
|
row.pepProjectIsDelete == 1 ? ( |
|
|
|
<Tooltip content={'失效,项目已在【项企PEP】中被删除!'}> |
|
|
|
<div style={{ marginRight: 5 }}> |
|
|
|
<img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} /> |
|
|
|
</div> |
|
|
|
</Tooltip>) : ('') |
|
|
|
} |
|
|
|
<Tooltip content={row.pepProjectName || row.name}> |
|
|
|
<div style={{ color: row.pepProjectIsDelete == 1 ? 'rgb(249, 57, 32)' : '', width: row?.pepProjectName?.length > 7 || row?.name?.length > 7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> |
|
|
|
{row.pepProjectName || row.name} |
|
|
|
</div> |
|
|
|
setTableKey(mytableKey) |
|
|
|
setTableData(mytableData) |
|
|
|
setLimits(res.payload.data.count) |
|
|
|
mylimits.current = res.payload.data.rows.length |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
const [columns, setColumns] = useState([//表格属性 |
|
|
|
{ |
|
|
|
title: "序号", |
|
|
|
dataIndex: "index", |
|
|
|
key: 'index', |
|
|
|
render: (text, r, index) => { |
|
|
|
return index + 1; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: 'PEP项企项目名称', |
|
|
|
dataIndex: "pepProjectName", |
|
|
|
key: 'pepProjectName', |
|
|
|
render: (_, row) => { |
|
|
|
return ( |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
{ |
|
|
|
row.pepProjectIsDelete == 1 ? ( |
|
|
|
<Tooltip content={'失效,项目已在【项企PEP】中被删除!'}> |
|
|
|
<div style={{ marginRight: 5 }}> |
|
|
|
<img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} /> |
|
|
|
</div> |
|
|
|
</Tooltip>) : ('') |
|
|
|
} |
|
|
|
<Tooltip content={row.pepProjectName || row.name}> |
|
|
|
<div style={{ color: row.pepProjectIsDelete == 1 ? 'rgb(249, 57, 32)' : '', width: row?.pepProjectName?.length > 7 || row?.name?.length > 7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> |
|
|
|
{row.pepProjectName || row.name} |
|
|
|
</div> |
|
|
|
</Tooltip> |
|
|
|
{ |
|
|
|
row.pepProjectName ? ( |
|
|
|
<div style={{ |
|
|
|
height: 18, marginLeft: 4, |
|
|
|
background: 'linear-gradient(180deg, #EBF5FF 0%, #EBF5FF 0%, #D3E8FF 100%)', |
|
|
|
borderRadius: 2, display: 'flex', alignItems: 'center' |
|
|
|
}}> |
|
|
|
<div> |
|
|
|
<img src="/assets/images/install/icon_zhengque.png" alt="" style={{ height: 10, width: 10, marginLeft: 4, marginRight: 9 }} /> |
|
|
|
</div> |
|
|
|
<div style={{ color: '#0F7EFB', fontSize: 11, marginRight: 12 }}> |
|
|
|
{row.constructionStatus} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
<div style={{ |
|
|
|
height: 18, marginLeft: 4, |
|
|
|
background: 'linear-gradient(180deg, #99C7DD 0%, #3048FC 100%)', |
|
|
|
borderRadius: 2, display: 'flex', alignItems: 'center' |
|
|
|
}}> |
|
|
|
<div> |
|
|
|
<img src="/assets/images/install/icon_POMS.png" alt="" style={{ height: 10, width: 10, marginLeft: 4, marginRight: 9 }} /> |
|
|
|
</div> |
|
|
|
<div style={{ color: '#FFFFFF', fontSize: 11, marginRight: 12 }}> |
|
|
|
POMS |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '安心云项目名称', |
|
|
|
dataIndex: "anxinProject", |
|
|
|
key: 'anxinProject', |
|
|
|
width: 500, |
|
|
|
render: (_, row) => { |
|
|
|
let anxinerror = false |
|
|
|
let anxinerrorArr = [] |
|
|
|
for (let i = 0; i < row.anxinProject.length; i++) { |
|
|
|
if (row.anxinProject[i].projectState == -1) { |
|
|
|
anxinerror = true |
|
|
|
anxinerrorArr.push(row.anxinProject[i].name) |
|
|
|
} |
|
|
|
} |
|
|
|
return ( |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
{ |
|
|
|
anxinerror ? ( |
|
|
|
<Tooltip content={anxinerrorArr.join(',') + ',项目已在【安心云】中被删除'}> |
|
|
|
<div style={{ marginRight: 5 }}> |
|
|
|
<img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} /> |
|
|
|
</div> |
|
|
|
</Tooltip>) : ('') |
|
|
|
} |
|
|
|
{ |
|
|
|
row.anxinProject.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div className='myseparator' key={index} style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
{ |
|
|
|
row.anxinProject.length >= 3 ? ( |
|
|
|
<Tooltip content={item.name}> |
|
|
|
<div style={{ width: item.name.length > 7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: index > 2 ? 'none' : '', color: item.projectState == -1 ? '#F93920' : '' }}> |
|
|
|
{item.name} |
|
|
|
</div> |
|
|
|
</Tooltip> |
|
|
|
) : row.anxinProject.length == 2 ? ( |
|
|
|
<Tooltip content={item.name}> |
|
|
|
<div style={{ width: item.name.length > 12 ? '173.5px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: item.projectState == -1 ? '#F93920' : '' }}> |
|
|
|
{item.name} |
|
|
|
</div> |
|
|
|
</Tooltip> |
|
|
|
) : ( |
|
|
|
<Tooltip content={item.name}> |
|
|
|
<div style={{ width: item.name.length > 25 ? '358px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: item.projectState == -1 ? '#F93920' : '' }}> |
|
|
|
{item.name} |
|
|
|
</div> |
|
|
|
</Tooltip> |
|
|
|
) |
|
|
|
} |
|
|
|
<div className='separator' style={{ width: 1, height: 12, border: '1px solid #DCDEE0', margin: '0px 10px', display: index > 1 ? 'none' : '' }}></div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
{ |
|
|
|
row.anxinProject.length > 3 ? ( |
|
|
|
<Tooltip content={ |
|
|
|
<div style={{ display: 'flex', flexWrap: 'wrap' }}> |
|
|
|
{ |
|
|
|
row.anxinProject.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div key={index} style={{ color: item.projectState == -1 ? '#F93920' : '' }}> |
|
|
|
{item.name}<span style={{ color: '#FFFFFF' }}>,</span> |
|
|
|
</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
</div> |
|
|
|
} trigger="click" style={{ lineHeight: 2 }}> |
|
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 8, cursor: "pointer", }}> |
|
|
|
+{row.anxinProject.length - 3} |
|
|
|
</div> |
|
|
|
</Tooltip> |
|
|
|
{ |
|
|
|
row.pepProjectName ? ( |
|
|
|
<div style={{ |
|
|
|
height: 18, marginLeft: 4, |
|
|
|
background: 'linear-gradient(180deg, #EBF5FF 0%, #EBF5FF 0%, #D3E8FF 100%)', |
|
|
|
borderRadius: 2, display: 'flex', alignItems: 'center' |
|
|
|
}}> |
|
|
|
<div> |
|
|
|
<img src="/assets/images/install/icon_zhengque.png" alt="" style={{ height: 10, width: 10, marginLeft: 4, marginRight: 9 }} /> |
|
|
|
</div> |
|
|
|
<div style={{ color: '#0F7EFB', fontSize: 11, marginRight: 12 }}> |
|
|
|
{row.constructionStatus} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
<div style={{ |
|
|
|
height: 18, marginLeft: 4, |
|
|
|
background: 'linear-gradient(180deg, #99C7DD 0%, #3048FC 100%)', |
|
|
|
borderRadius: 2, display: 'flex', alignItems: 'center' |
|
|
|
}}> |
|
|
|
<div> |
|
|
|
<img src="/assets/images/install/icon_POMS.png" alt="" style={{ height: 10, width: 10, marginLeft: 4, marginRight: 9 }} /> |
|
|
|
</div> |
|
|
|
<div style={{ color: '#FFFFFF', fontSize: 11, marginRight: 12 }}> |
|
|
|
POMS |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
) : ('') |
|
|
|
} |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '关联时间', |
|
|
|
dataIndex: "createTime", |
|
|
|
key: 'time', |
|
|
|
render: (_, row) => { |
|
|
|
return moment(row.createTime).format("YYYY-MM-DD HH:mm:ss") |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '修改时间', |
|
|
|
dataIndex: "updateTime", |
|
|
|
key: 'updateTime', |
|
|
|
render: (_, row) => { |
|
|
|
return moment(row.updateTime).format("YYYY-MM-DD HH:mm:ss") |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '添加人员', |
|
|
|
dataIndex: "pepUserName", |
|
|
|
key: 'pepUserName', |
|
|
|
render: (_, row) => { |
|
|
|
return row.pepUserName |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "管理", |
|
|
|
width: "20%", |
|
|
|
dataIndex: "text", |
|
|
|
key: 'text', |
|
|
|
render: (_, row) => { |
|
|
|
return ( |
|
|
|
<div style={{ display: "flex" }}> |
|
|
|
<Button |
|
|
|
theme="borderless" |
|
|
|
disabled={row.pepProjectIsDelete == 1} |
|
|
|
onClick={() => { |
|
|
|
setSystemModal(true); |
|
|
|
setPepname(row.name) |
|
|
|
if (!row.name) { |
|
|
|
setPepProjectId(row.pepProjectId) |
|
|
|
} |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '安心云项目名称', |
|
|
|
dataIndex: "anxinProject", |
|
|
|
key: 'anxinProject', |
|
|
|
width: 500, |
|
|
|
render: (_, row) => { |
|
|
|
let anxinerror = false |
|
|
|
let anxinerrorArr = [] |
|
|
|
for (let i = 0; i < row.anxinProject.length; i++) { |
|
|
|
if (row.anxinProject[i].projectState == -1) { |
|
|
|
anxinerror = true |
|
|
|
anxinerrorArr.push(row.anxinProject[i].name) |
|
|
|
} |
|
|
|
} |
|
|
|
return ( |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
{ |
|
|
|
anxinerror ? ( |
|
|
|
<Tooltip content={anxinerrorArr.join(',') + ',项目已在【安心云】中被删除'}> |
|
|
|
<div style={{ marginRight: 5 }}> |
|
|
|
<img src="/assets/images/install/risk.png" alt="" style={{ height: 24, width: 24, }} /> |
|
|
|
</div> |
|
|
|
</Tooltip>) : ('') |
|
|
|
else { |
|
|
|
setPepProjectId() |
|
|
|
} |
|
|
|
{ |
|
|
|
row.anxinProject.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div className='myseparator' key={index} style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
{ |
|
|
|
row.anxinProject.length >= 3 ? ( |
|
|
|
<Tooltip content={item.name}> |
|
|
|
<div style={{ width: item.name.length > 7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: index > 2 ? 'none' : '', color: item.projectState == -1 ? '#F93920' : '' }}> |
|
|
|
{item.name} |
|
|
|
</div> |
|
|
|
</Tooltip> |
|
|
|
) : row.anxinProject.length == 2 ? ( |
|
|
|
<Tooltip content={item.name}> |
|
|
|
<div style={{ width: item.name.length > 12 ? '173.5px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: item.projectState == -1 ? '#F93920' : '' }}> |
|
|
|
{item.name} |
|
|
|
</div> |
|
|
|
</Tooltip> |
|
|
|
) : ( |
|
|
|
<Tooltip content={item.name}> |
|
|
|
<div style={{ width: item.name.length > 25 ? '358px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: item.projectState == -1 ? '#F93920' : '' }}> |
|
|
|
{item.name} |
|
|
|
</div> |
|
|
|
</Tooltip> |
|
|
|
) |
|
|
|
} |
|
|
|
<div className='separator' style={{ width: 1, height: 12, border: '1px solid #DCDEE0', margin: '0px 10px', display: index > 1 ? 'none' : '' }}></div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
let myanxinArr = [] |
|
|
|
let anxinErrorList = [] |
|
|
|
for (let i = 0; i < row.anxinProject.length; i++) { |
|
|
|
if (row.anxinProject[i].projectState !== -1) { |
|
|
|
myanxinArr.push(row.anxinProject[i].id) |
|
|
|
} |
|
|
|
else { |
|
|
|
anxinErrorList.push(row.anxinProject[i].name) |
|
|
|
} |
|
|
|
} |
|
|
|
{ |
|
|
|
row.anxinProject.length > 3 ? ( |
|
|
|
<Tooltip content={ |
|
|
|
<div style={{ display: 'flex', flexWrap: 'wrap' }}> |
|
|
|
{ |
|
|
|
row.anxinProject.map((item, index) => { |
|
|
|
return ( |
|
|
|
<div key={index} style={{ color: item.projectState == -1 ? '#F93920' : '' }}> |
|
|
|
{item.name}<span style={{ color: '#FFFFFF' }}>,</span> |
|
|
|
</div> |
|
|
|
) |
|
|
|
}) |
|
|
|
} |
|
|
|
</div> |
|
|
|
} trigger="click" style={{ lineHeight: 2 }}> |
|
|
|
<div style={{ fontSize: 14, color: '#005ABD', marginLeft: 8, cursor: "pointer", }}> |
|
|
|
+{row.anxinProject.length - 3} |
|
|
|
</div> |
|
|
|
</Tooltip> |
|
|
|
) : ('') |
|
|
|
setAnxinDelete(anxinErrorList) |
|
|
|
let myapparr = [] |
|
|
|
let myarrarrList = JSON.parse(JSON.stringify(row.apps)) |
|
|
|
for (let j = 0; j < row.apps.length; j++) { |
|
|
|
delete myarrarrList[j].projectApp |
|
|
|
myapparr.push(JSON.stringify(myarrarrList[j])) |
|
|
|
} |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '关联时间', |
|
|
|
dataIndex: "createTime", |
|
|
|
key: 'time', |
|
|
|
render: (_, row) => { |
|
|
|
return moment(row.createTime).format("YYYY-MM-DD HH:mm:ss"); |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '修改时间', |
|
|
|
dataIndex: "updateTime", |
|
|
|
key: 'updateTime', |
|
|
|
render: (_, row) => { |
|
|
|
return moment(row.updateTime).format("YYYY-MM-DD HH:mm:ss"); |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '添加人员', |
|
|
|
dataIndex: "pepUserName", |
|
|
|
key: 'pepUserName', |
|
|
|
render: (_, row) => { |
|
|
|
return row.pepUserName |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: "管理", |
|
|
|
width: "20%", |
|
|
|
dataIndex: "text", |
|
|
|
key: 'text', |
|
|
|
render: (_, row) => { |
|
|
|
return ( |
|
|
|
<div style={{ display: "flex" }}> |
|
|
|
<Button |
|
|
|
theme="borderless" |
|
|
|
disabled={row.pepProjectIsDelete == 1} |
|
|
|
onClick={() => { |
|
|
|
setSystemModal(true); |
|
|
|
setPepname(row.name) |
|
|
|
if (!row.name) { |
|
|
|
setPepProjectId(row.pepProjectId) |
|
|
|
} |
|
|
|
else { |
|
|
|
setPepProjectId() |
|
|
|
} |
|
|
|
let myanxinArr = [] |
|
|
|
let anxinErrorList = [] |
|
|
|
for (let i = 0; i < row.anxinProject.length; i++) { |
|
|
|
if (row.anxinProject[i].projectState !== -1) { |
|
|
|
myanxinArr.push(row.anxinProject[i].id) |
|
|
|
} |
|
|
|
else { |
|
|
|
anxinErrorList.push(row.anxinProject[i].name) |
|
|
|
} |
|
|
|
} |
|
|
|
setAnxinDelete(anxinErrorList) |
|
|
|
let myapparr = [] |
|
|
|
let myarrarrList = JSON.parse(JSON.stringify(row.apps)) |
|
|
|
for (let j = 0; j < row.apps.length; j++) { |
|
|
|
delete myarrarrList[j].projectApp |
|
|
|
myapparr.push(JSON.stringify(myarrarrList[j])) |
|
|
|
} |
|
|
|
setAppArr(myapparr) |
|
|
|
setAnxincloudArr(myanxinArr) |
|
|
|
setBindId(row.id) |
|
|
|
setSystemEdit(true) |
|
|
|
}} |
|
|
|
> |
|
|
|
修改 |
|
|
|
</Button> |
|
|
|
<Popconfirm |
|
|
|
title="删除后对应的项目全局将无法进入和显示，对应的信鸽服务也会被删除" |
|
|
|
arrowPointAtCenter={false} |
|
|
|
showArrow={true} |
|
|
|
position="topRight" |
|
|
|
onConfirm={() => { |
|
|
|
dispatch(install.deleteProjectBind({ bindId: row?.id, msg: '删除安心云、项目管理项目绑定关系' })).then(() => { |
|
|
|
getPepProject() |
|
|
|
if (page.current > 0 && mylimits.current < 2) { |
|
|
|
setQuery({ limit: 10, page: page.current - 1 }) |
|
|
|
} else { |
|
|
|
setQuery({ limit: 10, page: page.current }) |
|
|
|
} |
|
|
|
}) |
|
|
|
}} |
|
|
|
> |
|
|
|
<Button theme="borderless">删除</Button> |
|
|
|
</Popconfirm> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
]) |
|
|
|
const rowSelection = { |
|
|
|
selectedRowKeys: selected, |
|
|
|
// onSelect: (record, selected) => { |
|
|
|
// // console.log(`select row: ${selected}`, record); |
|
|
|
// }, |
|
|
|
// onSelectAll: (selected, selectedRows) => { |
|
|
|
// // console.log(`select all rows: ${selected}`, selectedRows); |
|
|
|
// }, |
|
|
|
onChange: (selectedRowKeys, selectedRows) => { |
|
|
|
setSelected(selectedRows.map(v => v.key)) |
|
|
|
}, |
|
|
|
} |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div> |
|
|
|
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>系统映射</div> |
|
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>ASSOCIATION & MAPPING</div> |
|
|
|
</div> |
|
|
|
<div style={{ marginRight: 20 }}> |
|
|
|
<Button |
|
|
|
theme="solid" |
|
|
|
type="primary" |
|
|
|
style={{ |
|
|
|
width: 108, |
|
|
|
height: 32, |
|
|
|
borderRadius: 2, |
|
|
|
marginLeft: 40 |
|
|
|
}} |
|
|
|
onClick={() => { |
|
|
|
setSystemModal(true); |
|
|
|
setSystemEdit(false) |
|
|
|
setPepProjectId() |
|
|
|
setPepname() |
|
|
|
setAnxinDelete([]) |
|
|
|
setAppArr([]) |
|
|
|
setAnxincloudArr() |
|
|
|
setBindId() |
|
|
|
}} |
|
|
|
> |
|
|
|
添加映射关系 |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, marginTop: 5 }}> |
|
|
|
<div style={{ fontSize: 12, color: '#8B8B8B' }}>平台通过映射能力将多个系统的结构化、非结构化、半结构化数据按照平台算法进行分类关联，形成整体项目信息结构，以项企PEP的项目名称进行规范。</div> |
|
|
|
</div> |
|
|
|
<div style={{ marginTop: 20 }}> |
|
|
|
<Skeleton |
|
|
|
loading={loading} |
|
|
|
active={true} |
|
|
|
placeholder={SkeletonScreen()} |
|
|
|
> |
|
|
|
<Table |
|
|
|
columns={columns} |
|
|
|
dataSource={tableData} |
|
|
|
bordered={false} |
|
|
|
empty="暂无数据" |
|
|
|
pagination={false} |
|
|
|
onRow={handleRow} |
|
|
|
rowSelection={rowSelection} |
|
|
|
/> |
|
|
|
</Skeleton> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
justifyContent: "space-between", |
|
|
|
padding: "20px 20px", |
|
|
|
}} |
|
|
|
> |
|
|
|
<div> |
|
|
|
<div style={{ display: 'inline-block', lineHeight: '30px', fontSize: 13, color: 'gray' }}>勾选<span style={{ fontWeight: 400, color: '#0F7EFB', }}> {selected.length}条 </span>信息</div> |
|
|
|
<Button onClick={() => { |
|
|
|
if (selected.length == tableKey.length) { |
|
|
|
setSelected([]) |
|
|
|
} |
|
|
|
else { |
|
|
|
setSelected(tableKey) |
|
|
|
} |
|
|
|
}} style={{ fontSize: 13, width: 93, height: 24, borderRadius: '1px', background: '#FFFFFF', border: '1px solid #0F7EFB', color: '#0F7EFB', fontWeight: 400, margin: '0 10px' }}> |
|
|
|
{mylimits.current == selected.length ? '取消全选' : '全选'} |
|
|
|
</Button> |
|
|
|
<Popconfirm |
|
|
|
title="删除后对应的项目全局将无法进入和显示，对应的信鸽服务也会被禁用" |
|
|
|
arrowPointAtCenter={false} |
|
|
|
showArrow={true} |
|
|
|
position="topRight" |
|
|
|
onConfirm={() => { |
|
|
|
dispatch(install.deleteProjectBind({ bindId: selected.join(','), msg: '删除安心云、项目管理项目绑定关系' })).then(() => { |
|
|
|
if (page.current > 0 && mylimits.current == selected.length) { |
|
|
|
setQuery({ limit: 10, page: page.current - 1 }) |
|
|
|
} else { |
|
|
|
setQuery({ limit: 10, page: page.current }) |
|
|
|
} |
|
|
|
setSelected([]) |
|
|
|
}) |
|
|
|
}} |
|
|
|
> |
|
|
|
<Button type='primary' theme='solid' style={{ fontSize: 13, width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#FFFFFF', fontWeight: 400, }}>批量删除</Button> |
|
|
|
</Popconfirm> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> |
|
|
|
共{limits}条信息 |
|
|
|
</span> |
|
|
|
<Pagination |
|
|
|
className="22" |
|
|
|
total={limits} |
|
|
|
showSizeChanger |
|
|
|
currentPage={query.page + 1} |
|
|
|
pageSizeOpts={[10, 20, 30, 40]} |
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
setQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
page.current = currentPage - 1 |
|
|
|
setSelected([]) |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
setAppArr(myapparr) |
|
|
|
setAnxincloudArr(myanxinArr) |
|
|
|
setBindId(row.id) |
|
|
|
setMapping(row?.mappingClass) |
|
|
|
setSystemEdit(true) |
|
|
|
}} |
|
|
|
> |
|
|
|
修改 |
|
|
|
</Button> |
|
|
|
<Popconfirm |
|
|
|
title="删除后对应的项目全局将无法进入和显示，对应的信鸽服务也会被删除" |
|
|
|
arrowPointAtCenter={false} |
|
|
|
showArrow={true} |
|
|
|
position="topRight" |
|
|
|
onConfirm={() => { |
|
|
|
dispatch(install.deleteProjectBind({ bindId: row?.id, msg: '删除安心云、项目管理项目绑定关系' })).then(() => { |
|
|
|
getPepProject() |
|
|
|
if (page.current > 0 && mylimits.current < 2) { |
|
|
|
setQuery({ limit: 10, page: page.current - 1 }) |
|
|
|
} else { |
|
|
|
setQuery({ limit: 10, page: page.current }) |
|
|
|
} |
|
|
|
}) |
|
|
|
}} |
|
|
|
> |
|
|
|
<Button theme="borderless">删除</Button> |
|
|
|
</Popconfirm> |
|
|
|
</div > |
|
|
|
); |
|
|
|
}, |
|
|
|
}, |
|
|
|
]) |
|
|
|
const rowSelection = { |
|
|
|
selectedRowKeys: selected, |
|
|
|
// onSelect: (record, selected) => { |
|
|
|
// // console.log(`select row: ${selected}`, record); |
|
|
|
// }, |
|
|
|
// onSelectAll: (selected, selectedRows) => { |
|
|
|
// // console.log(`select all rows: ${selected}`, selectedRows); |
|
|
|
// }, |
|
|
|
onChange: (selectedRowKeys, selectedRows) => { |
|
|
|
setSelected(selectedRows.map(v => v.key)) |
|
|
|
}, |
|
|
|
} |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
|
|
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
|
|
|
<div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div> |
|
|
|
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>系统映射</div> |
|
|
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>ASSOCIATION & MAPPING</div> |
|
|
|
</div> |
|
|
|
<div style={{ marginRight: 20 }}> |
|
|
|
<Button |
|
|
|
theme="solid" |
|
|
|
type="primary" |
|
|
|
style={{ |
|
|
|
width: 108, |
|
|
|
height: 32, |
|
|
|
borderRadius: 2, |
|
|
|
marginLeft: 40 |
|
|
|
}} |
|
|
|
onClick={() => { |
|
|
|
setSystemModal(true); |
|
|
|
setSystemEdit(false) |
|
|
|
setPepProjectId() |
|
|
|
setPepname() |
|
|
|
setAnxinDelete([]) |
|
|
|
setAppArr([]) |
|
|
|
setAnxincloudArr() |
|
|
|
setBindId() |
|
|
|
setMapping('') |
|
|
|
}} |
|
|
|
> |
|
|
|
添加映射关系 |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20, marginTop: 5 }}> |
|
|
|
<div style={{ fontSize: 12, color: '#8B8B8B' }}>平台通过映射能力将多个系统的结构化、非结构化、半结构化数据按照平台算法进行分类关联，形成整体项目信息结构，以项企PEP的项目名称进行规范。</div> |
|
|
|
</div> |
|
|
|
{//映射关系弹框 |
|
|
|
systemModal ? |
|
|
|
<SystemModal |
|
|
|
visible={true} |
|
|
|
anxincloudList={anxincloudList} |
|
|
|
systemEdit={systemEdit} |
|
|
|
peplist={peplist} |
|
|
|
appList={appList} |
|
|
|
pepname={pepname} |
|
|
|
anxincloudArr={anxincloudArr} |
|
|
|
pepProjectId={pepProjectId} |
|
|
|
anxinDelete={anxinDelete} |
|
|
|
appArr={appArr} |
|
|
|
bindId={bindId} |
|
|
|
cancel={() => { |
|
|
|
setSystemModal(false); |
|
|
|
<div style={{ marginTop: 20 }}> |
|
|
|
<Skeleton |
|
|
|
loading={loading} |
|
|
|
active={true} |
|
|
|
placeholder={SkeletonScreen()} |
|
|
|
> |
|
|
|
<Table |
|
|
|
columns={columns} |
|
|
|
dataSource={tableData} |
|
|
|
bordered={false} |
|
|
|
empty="暂无数据" |
|
|
|
pagination={false} |
|
|
|
onRow={handleRow} |
|
|
|
rowSelection={rowSelection} |
|
|
|
/> |
|
|
|
</Skeleton> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
justifyContent: "space-between", |
|
|
|
padding: "20px 20px", |
|
|
|
}} |
|
|
|
> |
|
|
|
<div> |
|
|
|
<div style={{ display: 'inline-block', lineHeight: '30px', fontSize: 13, color: 'gray' }}>勾选<span style={{ fontWeight: 400, color: '#0F7EFB', }}> {selected.length}条 </span>信息</div> |
|
|
|
<Button onClick={() => { |
|
|
|
if (selected.length == tableKey.length) { |
|
|
|
setSelected([]) |
|
|
|
} |
|
|
|
else { |
|
|
|
setSelected(tableKey) |
|
|
|
} |
|
|
|
}} style={{ fontSize: 13, width: 93, height: 24, borderRadius: '1px', background: '#FFFFFF', border: '1px solid #0F7EFB', color: '#0F7EFB', fontWeight: 400, margin: '0 10px' }}> |
|
|
|
{mylimits.current == selected.length ? '取消全选' : '全选'} |
|
|
|
</Button> |
|
|
|
<Popconfirm |
|
|
|
title="删除后对应的项目全局将无法进入和显示，对应的信鸽服务也会被禁用" |
|
|
|
arrowPointAtCenter={false} |
|
|
|
showArrow={true} |
|
|
|
position="topRight" |
|
|
|
onConfirm={() => { |
|
|
|
dispatch(install.deleteProjectBind({ bindId: selected.join(','), msg: '删除安心云、项目管理项目绑定关系' })).then(() => { |
|
|
|
if (page.current > 0 && mylimits.current == selected.length) { |
|
|
|
setQuery({ limit: 10, page: page.current - 1 }) |
|
|
|
} else { |
|
|
|
setQuery({ limit: 10, page: page.current }) |
|
|
|
} |
|
|
|
setSelected([]) |
|
|
|
}) |
|
|
|
}} |
|
|
|
close={() => { |
|
|
|
setSystemModal(false); |
|
|
|
getProjectPomsList() |
|
|
|
getPepProject() |
|
|
|
}} > |
|
|
|
</SystemModal> : '' |
|
|
|
} |
|
|
|
</> |
|
|
|
) |
|
|
|
> |
|
|
|
<Button type='primary' theme='solid' style={{ fontSize: 13, width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#FFFFFF', fontWeight: 400, }}>批量删除</Button> |
|
|
|
</Popconfirm> |
|
|
|
</div> |
|
|
|
<div style={{ display: 'flex', }}> |
|
|
|
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> |
|
|
|
共{limits}条信息 |
|
|
|
</span> |
|
|
|
<Pagination |
|
|
|
className="22" |
|
|
|
total={limits} |
|
|
|
showSizeChanger |
|
|
|
currentPage={query.page + 1} |
|
|
|
pageSizeOpts={[10, 20, 30, 40]} |
|
|
|
onChange={(currentPage, pageSize) => { |
|
|
|
setQuery({ limit: pageSize, page: currentPage - 1 }); |
|
|
|
page.current = currentPage - 1 |
|
|
|
setSelected([]) |
|
|
|
}} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
{//映射关系弹框 |
|
|
|
systemModal ? |
|
|
|
<SystemModal |
|
|
|
visible={true} |
|
|
|
anxincloudList={anxincloudList} |
|
|
|
systemEdit={systemEdit} |
|
|
|
peplist={peplist} |
|
|
|
appList={appList} |
|
|
|
pepname={pepname} |
|
|
|
anxincloudArr={anxincloudArr} |
|
|
|
pepProjectId={pepProjectId} |
|
|
|
anxinDelete={anxinDelete} |
|
|
|
mapping={mapping} |
|
|
|
appArr={appArr} |
|
|
|
bindId={bindId} |
|
|
|
cancel={() => { |
|
|
|
setSystemModal(false); |
|
|
|
}} |
|
|
|
close={() => { |
|
|
|
setSystemModal(false); |
|
|
|
getProjectPomsList() |
|
|
|
getPepProject() |
|
|
|
}} > |
|
|
|
</SystemModal> : '' |
|
|
|
} |
|
|
|
</> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
function mapStateToProps (state) { |
|
|
|
const { auth, global, ProjectPoms } = state; |
|
|
|
return { |
|
|
|
loading: ProjectPoms.isRequesting, |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
// members: members.data, |
|
|
|
}; |
|
|
|
const { auth, global, ProjectPoms } = state; |
|
|
|
return { |
|
|
|
loading: ProjectPoms.isRequesting, |
|
|
|
user: auth.user, |
|
|
|
actions: global.actions, |
|
|
|
// members: members.data, |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
export default connect(mapStateToProps)(Example); |
|
|
|
|
