From cafc7ba065fa2312ad3675658153a7734d0e8c07 Mon Sep 17 00:00:00 2001 From: deartibers <947466799@qq.com> Date: Sat, 17 Sep 2022 16:59:59 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E7=B3=BB=E6=98=A0=E5=B0=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/sections/install/actions/roles.js | 57 ++++-- .../install/components/systemModal.jsx | 170 ++++++++++++++++ .../src/sections/install/containers/roles.jsx | 2 +- .../sections/install/containers/system.jsx | 192 +++++++++++++++++- web/client/src/utils/webapi.js | 7 + 5 files changed, 406 insertions(+), 22 deletions(-) create mode 100644 web/client/src/sections/install/components/systemModal.jsx diff --git a/web/client/src/sections/install/actions/roles.js b/web/client/src/sections/install/actions/roles.js index 6081910..ff4b638 100644 --- a/web/client/src/sections/install/actions/roles.js +++ b/web/client/src/sections/install/actions/roles.js @@ -30,7 +30,7 @@ export function putOrganizationUser (data) {//更新成员状态 let msg = '' if (data) { pomsUserId = data.pomsUserId - msg=data.msg + msg = data.msg } return (dispatch) => basicAction({ @@ -47,7 +47,7 @@ export function putOrganizationUser (data) {//更新成员状态 export function postOrganizationUser (data) {//添加/编辑成员 let msg = '' if (data) { - msg=data.msg + msg = data.msg } return (dispatch) => basicAction({ @@ -60,20 +60,53 @@ export function postOrganizationUser (data) {//添加/编辑成员 reducer: { name: "" }, }); } -export function deteleOrganizationAdmin(data) { +export function deteleOrganizationAdmin (data) {//删除管理员 let pomsUserId = '' let msg = '' if (data) { pomsUserId = data.id - msg=data.msg + msg = data.msg } return (dispatch) => - basicAction({ - type: "del", + basicAction({ + type: "del", + dispatch: dispatch, + actionType: "DEL_ORGANIZATION_ADMIN", + url: `${ApiTable.deteleOrganizationAdmin.replace("{pomsUserId}", pomsUserId)}`, + 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: "DEL_ORGANIZATION_ADMIN", - url: `${ApiTable.deteleOrganizationAdmin.replace("{pomsUserId}", pomsUserId)}`, - msg: { option: msg }, //删除管理员 - reducer: {}, - }); - } \ No newline at end of file + 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 } }, + }); +} diff --git a/web/client/src/sections/install/components/systemModal.jsx b/web/client/src/sections/install/components/systemModal.jsx new file mode 100644 index 0000000..6a03bf5 --- /dev/null +++ b/web/client/src/sections/install/components/systemModal.jsx @@ -0,0 +1,170 @@ +import React, { useState, useRef, useEffect } from "react"; +import { connect } from "react-redux"; +import { Modal, Form } from "@douyinfe/semi-ui"; +import { IconAlertCircle } from '@douyinfe/semi-icons'; + + +function adminModal (props) { + const { + close, + visible, + dispatch, + pepList, + actions, + adminEdit,//是否是编辑 + editObj, + } = 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 + //初始化 + 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) + } + }, []); + + function handleOk () { + //点击弹框确定 右边按钮 + 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(); + } + }) + ) + } + else { + dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '新增管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 + if (res.success) { + close(); + } + }) + } + }) + } + function handleCancel () { + close(); + //点击弹框取消 左边按钮 + } + return ( + <> + +
+
+
+
成员成为管理员后，拥有平台所有权限和项目，成员的普通角色会被禁用。
+
+
{ + 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); + } + else { + setPeopleList([]) + setDisablePeople(true) + form.current.setValue('pepUserId', undefined); + } + } + } + }} + getFormApi={(formApi) => (form.current = formApi)} + > +
+ + { + pepList.map((item, index) => { + return ( + + {item.name} + + ) + }) + } + +
+
+ + { + peopleList.map((item, index) => { + return ( + + {item.name} + + ) + }) + } + +
+
+
+ + + ); +} +function mapStateToProps (state) { + const { auth, global, members } = state; + return { + // loading: members.isRequesting, + user: auth.user, + actions: global.actions, + // members: members.data, + }; +} + +export default connect(mapStateToProps)(adminModal); diff --git a/web/client/src/sections/install/containers/roles.jsx b/web/client/src/sections/install/containers/roles.jsx index 71333b5..714ae0e 100644 --- a/web/client/src/sections/install/containers/roles.jsx +++ b/web/client/src/sections/install/containers/roles.jsx @@ -266,7 +266,7 @@ const Roles = (props) => { }, ]) // const [data, setdata] = useState([])//表格数据 - const tableData = useRef([]); //每页实际条数 + const tableData = useRef([]); //表格数据 const page = useRef(query.page);//哪一页 const [limits, setLimits] = useState()//每页实际条数 const mylimits = useRef(); //每页实际条数 diff --git a/web/client/src/sections/install/containers/system.jsx b/web/client/src/sections/install/containers/system.jsx index a31d01f..72b0436 100644 --- a/web/client/src/sections/install/containers/system.jsx +++ b/web/client/src/sections/install/containers/system.jsx @@ -1,16 +1,142 @@ -import React, { useEffect } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { connect } from 'react-redux'; -import { Spin, Button } from '@douyinfe/semi-ui'; +import { Skeleton, Button, Pagination, Table, Popconfirm } from '@douyinfe/semi-ui'; +import { SkeletonScreen, } from "$components"; import '../style.less' 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 tableData = useRef([]); //表格数据 useEffect(() => { - // dispatch(actions.example.getMembers(user.orgId)) + // getProjectAnxincloud//获取安心云项目 + // getProjectPmanage//获取PEP项目管理项目 + dispatch(install.getProjectAnxincloud(query)).then((res) => {//获取安心云项目 + console.log('getProjectAnxincloud',res.payload.data); + }) + dispatch(install.getProjectPmanage(query)).then((res) => {//获取PEP项目管理项目 + console.log('getProjectPmanage',res.payload.data); + }) }, []) - - + useEffect(() => { + getProjectPomsList(); + }, [query]); + function getProjectPomsList () { + dispatch(install.getProjectPoms(query)).then((res) => {//获取成员列表 + if (res.success) { + let mytableData = res.payload.data.rows; + for (let index = 0; index < mytableData.length; index++) { + mytableData[index].key = mytableData[index].id + } + tableData.current = mytableData; + setLimits(res.payload.data.count) + mylimits.current = res.payload.data.rows.length + } + }) + } + const [columns, setColumns] = useState([//表格属性 + { + title: "序号", + dataIndex: "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", + render: (_, row) => { + return ( +
+ {row.createTime} +
+ ) + } + }, + { + title: "管理", + width: "20%", + dataIndex: "text", + render: (_, row) => { + return ( +
+ + { + dispatch(install.putOrganizationUser({ pomsUserId: row?.id, deleted: true, msg: '删除成员' })).then(() => { + if (page.current > 0 && mylimits.current < 2) { + setQuery({ limit: 10, page: page.current - 1 }) + } else { + setQuery({ limit: 10, page: page.current }) + } + }) + }} + > + + +
+ ); + }, + }, + ]) + 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)) + console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); + }, + } return ( <>
@@ -20,7 +146,7 @@ const Example = (props) => {
系统映射
ROLE ASSIGNMENT
-
+
-
- 111 +
+ + { + if (index % 1 === 0) { + return { style: { background: '#FAFCFF' } } + } + }} + rowSelection={rowSelection} + /> + +
+
+
勾选{selected.length}条问题
+ + +
+
+ + 共{limits}个问题 + + { + setQuery({ limit: pageSize, page: currentPage - 1 }); + page.current = currentPage - 1 + }} + /> +
+
diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index f58fae4..8c5b9d2 100644 --- a/web/client/src/utils/webapi.js +++ b/web/client/src/utils/webapi.js @@ -16,12 +16,19 @@ export const ApiTable = { login: "login", logout: "logout", + //设置-鉴权管理 getOrganizationDeps: 'organization/deps',//获取项企(PEP)全部部门及其下用户 getOrganizationUser: 'organization/user',//获取成员列表 putOrganizationUser: 'organization/user/{pomsUserId}',//更新成员状态 postOrganizationUser: 'organization/user',//添加/编辑成员 deteleOrganizationAdmin: 'organization/admin/{pomsUserId}',//删除管理员 + //设置-关系映射 + getProjectPoms:'project/poms',//获取已绑定项目列表 + getProjectAnxincloud:'project/anxincloud',//获取安心云项目 + getProjectPmanage:'project/pmanage',//获取PEP项目管理项目 + + //告警 getProjectPoms: 'project/poms', //获取已绑定项目