diff --git a/web/client/assets/images/install/appDelete.png b/web/client/assets/images/install/appDelete.png new file mode 100644 index 0000000..6df9059 Binary files /dev/null and b/web/client/assets/images/install/appDelete.png differ diff --git a/web/client/index.ejs b/web/client/index.ejs index 2fd8513..97ad9af 100644 --- a/web/client/index.ejs +++ b/web/client/index.ejs @@ -13,7 +13,7 @@ + src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_19077_5.1f8a6b254697a8ad1c955f3a19fc4dd6.es5.js"> diff --git a/web/client/src/sections/install/components/systemModal.jsx b/web/client/src/sections/install/components/systemModal.jsx index 6a03bf5..c5fdbe2 100644 --- a/web/client/src/sections/install/components/systemModal.jsx +++ b/web/client/src/sections/install/components/systemModal.jsx @@ -1,6 +1,6 @@ import React, { useState, useRef, useEffect } from "react"; import { connect } from "react-redux"; -import { Modal, Form } from "@douyinfe/semi-ui"; +import { Modal, Form, Input, Button } from "@douyinfe/semi-ui"; import { IconAlertCircle } from '@douyinfe/semi-icons'; @@ -9,31 +9,35 @@ function adminModal (props) { close, visible, dispatch, - pepList, actions, - adminEdit,//是否是编辑 - editObj, + systemEdit,//是否是编辑 + peplist,//项企项目列表 + anxincloudList,//安心云项目列表 + pepProjectId } = props; const { install } = actions; const form = useRef();//表单 - const [disablePeople, setDisablePeople] = useState(true); //页码信息 - const [peopleList, setPeopleList] = useState([]); //人员List - const [departmentId, setDepartmentId] = useState(); //部门id - const [peopleId, setPeopleId] = useState(); //人员id + const [custom, setCustom] = useState(false); //是否是自定义项目 + const [appList, setAppList] = useState([ + { + name: '', + url: '' + } + ]); //添加应用列表 //初始化 useEffect(() => { - if (editObj.id) { - let departmentList = [] - for (let i = 0; i < pepList.length; i++) { - if (pepList[i].id == editObj.departments[0].id) { - departmentList = pepList[i].users - } - } - setPeopleList(departmentList) - setDepartmentId(editObj.departments[0].id) - setPeopleId(editObj.pepUserId) - setDisablePeople(false) - } + // if (editObj.id) { + // let departmentList = [] + // for (let i = 0; i < pepList.length; i++) { + // if (pepList[i].id == editObj.departments[0].id) { + // departmentList = pepList[i].users + // } + // } + // setPeopleList(departmentList) + // setDepartmentId(editObj.departments[0].id) + // setPeopleId(editObj.pepUserId) + // setDisablePeople(false) + // } }, []); function handleOk () { @@ -42,20 +46,20 @@ function adminModal (props) { .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(); - } - }) - ) + // dispatch(install.deteleOrganizationAdmin({id:editObj.id,msg:''})).then( + // dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, 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(); - } - }) + // dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '新增管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 + // if (res.success) { + // close(); + // } + // }) } }) } @@ -63,45 +67,41 @@ function adminModal (props) { close(); //点击弹框取消 左边按钮 } + function onChange (value, index) { + console.log('value', value); + console.log('index', index); + } return ( <>
-
+
-
成员成为管理员后，拥有平台所有权限和项目，成员的普通角色会被禁用。
+
映射关系由项企立项项目与安心云项目关联产生，若项目未在项企中有记载，可选自定义项目，待项企立项项后再进行修改！
{ + console.log('values', values); + console.log('field', field); for (var key in field) { - if (key == 'department') { - if (values.department >= 0) { - let departmentList = [] - for (let i = 0; i < pepList.length; i++) { - if (pepList[i].id == values.department) { - departmentList = pepList[i].users - } - } - setPeopleList(departmentList) - setDisablePeople(false) - form.current.setValue('pepUserId', undefined); + if (key == 'projectType') { + if (field.projectType == 'pep') { + setCustom(false) } else { - setPeopleList([]) - setDisablePeople(true) - form.current.setValue('pepUserId', undefined); + setCustom(true) } } } @@ -109,41 +109,61 @@ function adminModal (props) { getFormApi={(formApi) => (form.current = formApi)} >
- - { - pepList.map((item, index) => { - return ( - - {item.name} - - ) - }) - } - + + 项企项目 + 自定义项目（未在项企中立项的项目可选） +
+ {custom ? ( +
+ +
+ ) : ( +
+ + { + peplist.map((item, index) => { + return ( + + {item.project_name} + + ) + }) + } + +
+ )}
{ - peopleList.map((item, index) => { + anxincloudList.map((item, index) => { return ( - + {item.name} ) @@ -152,6 +172,47 @@ function adminModal (props) {
+
+ { + appList.map((item, index) => { + return ( +
+
+ 增加应用: +
+
+ onChange(value, index)} + maxLength={18} + showClear> +
+
+ onChange(value, index)} + maxLength={50} + showClear> +
+
+ +
+
+ ) + }) + } +
+ +
+ * + 最多可添加30条 +
+
+
diff --git a/web/client/src/sections/install/containers/system.jsx b/web/client/src/sections/install/containers/system.jsx index 72b0436..5641c5c 100644 --- a/web/client/src/sections/install/containers/system.jsx +++ b/web/client/src/sections/install/containers/system.jsx @@ -1,7 +1,9 @@ import React, { useEffect, useRef, useState } from 'react'; import { connect } from 'react-redux'; -import { Skeleton, Button, Pagination, Table, Popconfirm } from '@douyinfe/semi-ui'; +import { Skeleton, Button, Pagination, Table, Popconfirm, Tooltip } from '@douyinfe/semi-ui'; import { SkeletonScreen, } from "$components"; +import moment from "moment"; +import SystemModal from '../components/systemModal' import '../style.less' const Example = (props) => { @@ -11,15 +13,20 @@ const Example = (props) => { 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 [pepProjectId,setPepProjectId]= useState() //修改时项企id + + const tableData = useRef([]); //表格数据 useEffect(() => { - // getProjectAnxincloud//获取安心云项目 - // getProjectPmanage//获取PEP项目管理项目 dispatch(install.getProjectAnxincloud(query)).then((res) => {//获取安心云项目 - console.log('getProjectAnxincloud',res.payload.data); + setAnxincloudList(res.payload.data) }) dispatch(install.getProjectPmanage(query)).then((res) => {//获取PEP项目管理项目 - console.log('getProjectPmanage',res.payload.data); + setPeplist(res.payload.data) }) }, []) useEffect(() => { @@ -42,62 +49,92 @@ const Example = (props) => { { title: "序号", dataIndex: "index", + key: 'index', render: (text, r, index) => { return index + 1; }, }, - // { - // title: '成员', - // render: (_, row) => { - // let departmentsArr = [] - // for (let i = 0; i < row.departments.length; i++) { - // departmentsArr.push(row.departments[i].name) - // } - // return ( - //
- //
- // {row.name} - //
- //
- // {row.departments[0].name} - //
- // { - // row.departments.length > 1 ? ( - // - //
- // +{row.departments.length - 1} - //
- // - // ) : ('') - // } - //
- // ) - // } - // }, { - title: '关联时间', - dataIndex: "createTime", + title: '安心云项目名称', + dataIndex: "anxinProject", + key: 'anxinProject', + width: 500, render: (_, row) => { return ( -
- {row.createTime} +
+ { + row.anxinProject.map((item, index) => { + return ( +
+ { + row.anxinProject.length >= 3 ? ( + +
7 ? '112px' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> + {item.name} +
+ + ) : row.anxinProject.length == 2 ? ( + +
12 ? '173.5' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> + {item.name} +
+ + ) : ( + +
25 ? '358' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> + {item.name} +
+ + ) + } +
+
+ ) + }) + }
) } }, + { + title: 'PEP项企项目名称', + dataIndex: "pepProjectName", + key: 'pepProjectName', + render: (_, row) => { + return ( +
+ +
7 ? '112' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> + {row.pepProjectName} +
+ +
+ ) + } + }, + { + title: '关联时间', + dataIndex: "createTime", + key: 'time', + render: (_, row) => { + return moment(row.createTime).format("YYYY-MM-DD HH:MM:SS"); + } + }, { title: "管理", width: "20%", dataIndex: "text", + key: 'text', render: (_, row) => { return (
- +
@@ -218,6 +258,20 @@ const Example = (props) => {
+ {//映射关系弹框 + systemModal ? + { + setSystemModal(false); + // getUserList() + }} > + : '' + } ) } diff --git a/web/client/src/sections/install/style.less b/web/client/src/sections/install/style.less index af16fde..81ee0b7 100644 --- a/web/client/src/sections/install/style.less +++ b/web/client/src/sections/install/style.less @@ -20,4 +20,9 @@ } .adminTop:hover{ box-shadow: 0px 0px 12px 2px rgba(130, 131, 133,0.5); +} +.myseparator:last-child{ + .separator{ + display: none; + } } \ No newline at end of file