diff --git a/web/client/assets/images/install/icon_zhengque.png b/web/client/assets/images/install/icon_zhengque.png new file mode 100644 index 0000000..178d27b Binary files /dev/null and b/web/client/assets/images/install/icon_zhengque.png differ diff --git a/web/client/src/sections/install/actions/index.js b/web/client/src/sections/install/actions/index.js index 932eed2..93e6a8a 100644 --- a/web/client/src/sections/install/actions/index.js +++ b/web/client/src/sections/install/actions/index.js @@ -1,7 +1,8 @@ 'use strict'; import * as roles from './roles' - +import * as system from './system' export default { - ...roles + ...roles, + ...system } \ No newline at end of file diff --git a/web/client/src/sections/install/actions/roles.js b/web/client/src/sections/install/actions/roles.js index ff4b638..8663fca 100644 --- a/web/client/src/sections/install/actions/roles.js +++ b/web/client/src/sections/install/actions/roles.js @@ -76,37 +76,4 @@ export function deteleOrganizationAdmin (data) {//删除管理员 msg: { option: msg }, //删除管理员 reducer: {}, }); -} -export function getProjectPoms (query) {//获取已绑定项目 - return (dispatch) => basicAction({ - type: "get", - dispatch: dispatch, - actionType: "GET_PROJECT_POMS", - query: query, - url: `${ApiTable.getProjectPoms}`, - msg: { option: "获取已绑定项目" }, - reducer: { name: "ProjectPoms", params: { noClear: true } }, - }); -} -export function getProjectAnxincloud (query) {//获取安心云项目 - return (dispatch) => basicAction({ - type: "get", - dispatch: dispatch, - actionType: "GET_PROJECT_ANXINCLOUD", - query: query, - url: `${ApiTable.getProjectAnxincloud}`, - msg: { option: "获取安心云项目" }, - reducer: { name: "ProjectPoms", params: { noClear: true } }, - }); -} -export function getProjectPmanage (query) {//获取PEP项目管理项目 - return (dispatch) => basicAction({ - type: "get", - dispatch: dispatch, - actionType: "GET_PROJECT_PMANAGE", - query: query, - url: `${ApiTable.getProjectPmanage}`, - msg: { option: "获取PEP项目管理项目" }, - reducer: { name: "ProjectPoms", params: { noClear: true } }, - }); -} +} \ No newline at end of file diff --git a/web/client/src/sections/install/actions/system.js b/web/client/src/sections/install/actions/system.js new file mode 100644 index 0000000..a72847b --- /dev/null +++ b/web/client/src/sections/install/actions/system.js @@ -0,0 +1,81 @@ +'use strict'; + +import { ApiTable, basicAction } from '$utils' + +export function getProjectPoms (query) {//获取已绑定项目 + return (dispatch) => basicAction({ + type: "get", + dispatch: dispatch, + actionType: "GET_PROJECT_POMS", + query: query, + url: `${ApiTable.getProjectPoms}`, + msg: { option: "获取已绑定项目" }, + reducer: { name: "ProjectPoms", params: { noClear: true } }, + }); +} +export function getProjectAnxincloud (query) {//获取安心云项目 + return (dispatch) => basicAction({ + type: "get", + dispatch: dispatch, + actionType: "GET_PROJECT_ANXINCLOUD", + query: query, + url: `${ApiTable.getProjectAnxincloud}`, + msg: { option: "获取安心云项目" }, + reducer: { name: "ProjectPoms", params: { noClear: true } }, + }); +} +export function getProjectPmanage (query) {//获取PEP项目管理项目 + return (dispatch) => basicAction({ + type: "get", + dispatch: dispatch, + actionType: "GET_PROJECT_PMANAGE", + query: query, + url: `${ApiTable.getProjectPmanage}`, + msg: { option: "获取PEP项目管理项目" }, + reducer: { name: "ProjectPoms", params: { noClear: true } }, + }); +} +export function getProjectAppList (query) {//获取应用列表 + return (dispatch) => basicAction({ + type: "get", + dispatch: dispatch, + actionType: "GET_PROJECT_APPLIST", + query: query, + url: `${ApiTable.getProjectAppList}`, + msg: { option: "获取应用列表" }, + reducer: { name: "ProjectPoms", params: { noClear: true } }, + }); +} +export function postProjectBind (data) {//绑定安心云、项目管理项目 + let msg = '' + if (data) { + msg = data.msg + } + return (dispatch) => + basicAction({ + type: "post", + dispatch: dispatch, + data, + actionType: "POST_PROJECT_BIND", + url: `${ApiTable.postProjectBind}`, + msg: { option: msg }, + reducer: { name: "" }, + }); +} +export function deleteProjectBind (data) {//删除安心云、项目管理项目绑定关系 + let bindId = '' + let msg = '' + if (data) { + bindId = data.bindId + msg = data.msg + } + return (dispatch) => + basicAction({ + type: "del", + dispatch: dispatch, + actionType: "DEL_PROJECT_BIND", + url: `${ApiTable.deleteProjectBind.replace("{bindId}", bindId)}`, + msg: { option: msg }, //删除安心云、项目管理项目绑定关系 + reducer: {}, + }); +} \ No newline at end of file diff --git a/web/client/src/sections/install/components/systemModal.jsx b/web/client/src/sections/install/components/systemModal.jsx index c5fdbe2..8a38063 100644 --- a/web/client/src/sections/install/components/systemModal.jsx +++ b/web/client/src/sections/install/components/systemModal.jsx @@ -1,7 +1,7 @@ import React, { useState, useRef, useEffect } from "react"; import { connect } from "react-redux"; -import { Modal, Form, Input, Button } from "@douyinfe/semi-ui"; -import { IconAlertCircle } from '@douyinfe/semi-icons'; +import { Modal, Form, ArrayField, Tag } from "@douyinfe/semi-ui"; +import { IconAlertCircle, IconAlertTriangle } from '@douyinfe/semi-icons'; function adminModal (props) { @@ -13,19 +13,25 @@ function adminModal (props) { systemEdit,//是否是编辑 peplist,//项企项目列表 anxincloudList,//安心云项目列表 - pepProjectId + appList,//应用列表 + pepProjectId,//已选择项企id + pepname,//修改时自定义项目名称 + anxincloudArr,//修改时已经选择的安心云列表 + anxinDelete,//修改时安心云项目有删除,显示提示信息 + appArr,//修改时添加应用 + bindId } = props; const { install } = actions; const form = useRef();//表单 const [custom, setCustom] = useState(false); //是否是自定义项目 - const [appList, setAppList] = useState([ - { - name: '', - url: '' - } - ]); //添加应用列表 + const [myprojectType, setMyprojectType] = useState('pep'); //是否是自定义项目 //初始化 useEffect(() => { + if (pepname) { + setCustom(true) + setMyprojectType('axy') + } + console.log('appArr',appArr); // if (editObj.id) { // let departmentList = [] // for (let i = 0; i < pepList.length; i++) { @@ -45,21 +51,31 @@ function adminModal (props) { form.current .validate() .then((values) => { - if (adminEdit) { - // dispatch(install.deteleOrganizationAdmin({id:editObj.id,msg:''})).then( - // dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '修改管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 - // if (res.success) { - // close(); - // } - // }) - // ) + 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 { - // dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '新增管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 - // if (res.success) { - // close(); - // } - // }) + 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(); + } + }) } }) } @@ -67,9 +83,18 @@ function adminModal (props) { close(); //点击弹框取消 左边按钮 } - function onChange (value, index) { - console.log('value', value); - console.log('index', index); + const renderMultipleWithCustomTag = (optionNode, { onClose }) => { + const content = ( + + {JSON.parse(optionNode.value).name} + + ); + return { + isRenderInTag: false, + content + }; } return ( <> @@ -83,8 +108,8 @@ function adminModal (props) { onCancel={handleCancel} >
-
-
+
+
映射关系由项企立项项目与安心云项目关联产生，若项目未在项企中有记载，可选自定义项目，待项企立项项后再进行修改！
{ - console.log('values', values); - console.log('field', field); for (var key in field) { if (key == 'projectType') { if (field.projectType == 'pep') { @@ -109,7 +132,7 @@ function adminModal (props) { getFormApi={(formApi) => (form.current = formApi)} >
- + 项企项目 自定义项目（未在项企中立项的项目可选） @@ -118,8 +141,10 @@ function adminModal (props) {
@@ -128,12 +153,13 @@ function adminModal (props) {
{ @@ -150,14 +176,14 @@ function adminModal (props) { )}
{ @@ -171,48 +197,54 @@ function adminModal (props) { }
- -
{ - appList.map((item, index) => { - return ( -
-
- 增加应用: -
-
- onChange(value, index)} - maxLength={18} - showClear> -
-
- onChange(value, index)} - maxLength={50} - showClear> -
-
- -
+ anxinDelete.length > 0 ? ( +
+
+ +
+
+ 确认关联后“{anxinDelete.join('、')}”将被系统移除映射关系，原因是项目已在【安心云】中被删除！
- ) - }) +
+ ) : ('') } -
- -
- * - 最多可添加30条 -
+
+ + { + appList.map((item, index) => { + return ( + +
+ {item.name} +
+
+ URL:{item.url} +
+
+ }> + + ) + }) + } +
-
+
diff --git a/web/client/src/sections/install/containers/system.jsx b/web/client/src/sections/install/containers/system.jsx index 5641c5c..e6ab499 100644 --- a/web/client/src/sections/install/containers/system.jsx +++ b/web/client/src/sections/install/containers/system.jsx @@ -1,10 +1,12 @@ import React, { useEffect, useRef, useState } from 'react'; import { connect } from 'react-redux'; import { Skeleton, Button, Pagination, Table, Popconfirm, Tooltip } from '@douyinfe/semi-ui'; +import { IconAlertTriangle } from "@douyinfe/semi-icons"; import { SkeletonScreen, } from "$components"; import moment from "moment"; import SystemModal from '../components/systemModal' import '../style.less' +import { set } from 'nprogress'; const Example = (props) => { const { dispatch, actions, user, loading, socket } = props @@ -17,10 +19,34 @@ const Example = (props) => { const [systemEdit, setSystemEdit] = useState(false) //是否是修改 const [anxincloudList, setAnxincloudList] = useState([]) //安心云列表 const [peplist, setPeplist] = useState([]) //PEP项目管理项目列表 - const [pepProjectId,setPepProjectId]= useState() //修改时项企id - - - const tableData = useRef([]); //表格数据 + 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);//哪一页 + + + + + function handleRow (record, index) {//斑马条纹 + // 给偶数行设置斑马纹 + if (index % 2 === 0) { + return { + style: { + background: '#FAFCFF', + } + }; + } else { + return {}; + } + } + + const [tableData, setTableData] = useState([]) //表格数据 + useEffect(() => { dispatch(install.getProjectAnxincloud(query)).then((res) => {//获取安心云项目 setAnxincloudList(res.payload.data) @@ -28,18 +54,26 @@ const Example = (props) => { dispatch(install.getProjectPmanage(query)).then((res) => {//获取PEP项目管理项目 setPeplist(res.payload.data) }) + dispatch(install.getProjectAppList(query)).then((res) => {//获取应用列表 + setAppList(res.payload.data) + }) + }, []) useEffect(() => { getProjectPomsList(); }, [query]); + function getProjectPomsList () { dispatch(install.getProjectPoms(query)).then((res) => {//获取成员列表 if (res.success) { - let mytableData = res.payload.data.rows; + 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) } - tableData.current = mytableData; + setTableKey(mytableKey) + setTableData(mytableData) setLimits(res.payload.data.count) mylimits.current = res.payload.data.rows.length } @@ -60,8 +94,24 @@ const Example = (props) => { 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 (
+ { + anxinerror ? ( + +
+ +
+ ) : ('') + } { row.anxinProject.map((item, index) => { return ( @@ -69,29 +119,50 @@ const Example = (props) => { { row.anxinProject.length >= 3 ? ( -
7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> +
7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: index > 2 ? 'none' : '', color: item.projectState == -1 ? '#F93920' : '' }}> {item.name}
) : row.anxinProject.length == 2 ? ( -
12 ? '173.5' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> +
12 ? '173.5px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: item.projectState == -1 ? '#F93920' : '' }}> {item.name}
) : ( -
25 ? '358' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> +
25 ? '358px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', color: item.projectState == -1 ? '#F93920' : '' }}> {item.name}
) } -
+
1 ? 'none' : '' }}>
) }) } + { + row.anxinProject.length > 3 ? ( + + { + row.anxinProject.map((item, index) => { + return ( +
+ {item.name}, +
+ ) + }) + } +
+ } trigger="click" style={{ lineHeight: 2 }}> +
+ +{row.anxinProject.length - 3} +
+ + ) : ('') + }
) } @@ -103,11 +174,37 @@ const Example = (props) => { render: (_, row) => { return (
- -
7 ? '112' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> - {row.pepProjectName} + { + row.pepProjectIsDelete == 1 ? ( + +
+ +
+ ) : ('') + } + +
7 || row?.name?.length > 7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> + {row.pepProjectName || row.name}
+ { + row.pepProjectName ? ( +
+
+ +
+
+ {row.constructionStatus} +
+
+ ) : ( + '' + ) + }
) } @@ -130,22 +227,48 @@ const Example = (props) => {
{ - dispatch(install.putOrganizationUser({ pomsUserId: row?.id, deleted: true, msg: '删除成员' })).then(() => { + dispatch(install.deleteProjectBind({ bindId: row?.id, msg: '删除安心云、项目管理项目绑定关系' })).then(() => { if (page.current > 0 && mylimits.current < 2) { setQuery({ limit: 10, page: page.current - 1 }) } else { @@ -163,15 +286,14 @@ const Example = (props) => { ]) const rowSelection = { selectedRowKeys: selected, - onSelect: (record, selected) => { - console.log(`select row: ${selected}`, record); - }, - onSelectAll: (selected, selectedRows) => { - console.log(`select all rows: ${selected}`, selectedRows); - }, + // 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)) - console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); }, } return ( @@ -197,9 +319,11 @@ const Example = (props) => { setSystemModal(true); setSystemEdit(false) setPepProjectId() - // setEditObj({}) - // setMemberEdit(false) - // setMemberModal(true); + setPepname() + setAnxinDelete([]) + setAppArr([]) + setAnxincloudArr() + setBindId() }} > 添加映射关系 @@ -214,16 +338,12 @@ const Example = (props) => { > { - if (index % 1 === 0) { - return { style: { background: '#FAFCFF' } } - } - }} + onRow={handleRow} rowSelection={rowSelection} /> @@ -235,13 +355,38 @@ const Example = (props) => { }} >
-
勾选{selected.length}条问题
- - +
勾选{selected.length}条问题
+ + { + 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([]) + }) + }} + > + + +
- - 共{limits}个问题 + + 共{limits}条信息 {
{//映射关系弹框 systemModal ? - { - setSystemModal(false); - // getUserList() - }} > - : '' - } + { + setSystemModal(false); + getProjectPomsList() + }} > + : '' + } ) } diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index 8c5b9d2..9df7406 100644 --- a/web/client/src/utils/webapi.js +++ b/web/client/src/utils/webapi.js @@ -27,7 +27,9 @@ export const ApiTable = { getProjectPoms:'project/poms',//获取已绑定项目列表 getProjectAnxincloud:'project/anxincloud',//获取安心云项目 getProjectPmanage:'project/pmanage',//获取PEP项目管理项目 - + postProjectBind:'project/bind',//绑定安心云、项目管理项目 + getProjectAppList:'project/app_list',//获取应用列表 + deleteProjectBind:'project/bind/{bindId}',//删除安心云、项目管理项目绑定关系 //告警