free-sun
/
OperationalService
16
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

系统映射

dev
deartibers 3 years ago
parent
5847780478
commit
9be8211d3d
5 changed files with 241 additions and 121 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      web/client/assets/images/install/appDelete.png
  2. 2
      web/client/index.ejs
  3. 219
      web/client/src/sections/install/components/systemModal.jsx
  4. 136
      web/client/src/sections/install/containers/system.jsx
  5. 5
      web/client/src/sections/install/style.less

BIN
web/client/assets/images/install/appDelete.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 891 B

2
web/client/index.ejs
View File

@ -13,7 +13,7 @@
<script src="/assets/js/jessibuca/jessibuca.js"></script> <script src="/assets/js/jessibuca/jessibuca.js"></script>
<script <script
src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_14797_10.b43556420cacd0119dedf94deff663bb.js"></script> src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_19077_5.1f8a6b254697a8ad1c955f3a19fc4dd6.es5.js"></script>
</head> </head>
<body> <body>

219
web/client/src/sections/install/components/systemModal.jsx
View File

@ -1,6 +1,6 @@
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import { connect } from "react-redux"; 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'; import { IconAlertCircle } from '@douyinfe/semi-icons';
@ -9,31 +9,35 @@ function adminModal (props) {
close, close,
visible, visible,
dispatch, dispatch,
pepList,
actions, actions,
adminEdit,//是否是编辑 systemEdit,//是否是编辑
editObj, peplist,//项企项目列表
anxincloudList,//安心云项目列表
pepProjectId
} = props; } = props;
const { install } = actions; const { install } = actions;
const form = useRef();//表单 const form = useRef();//表单
const [disablePeople, setDisablePeople] = useState(true); //页码信息 const [custom, setCustom] = useState(false); //是否是自定义项目
const [peopleList, setPeopleList] = useState([]); //人员List const [appList, setAppList] = useState([
const [departmentId, setDepartmentId] = useState(); //部门id {
const [peopleId, setPeopleId] = useState(); //人员id name: '',
url: ''
}
]); //添加应用列表
//初始化 //初始化
useEffect(() => { useEffect(() => {
if (editObj.id) { // if (editObj.id) {
let departmentList = [] // let departmentList = []
for (let i = 0; i < pepList.length; i++) { // for (let i = 0; i < pepList.length; i++) {
if (pepList[i].id == editObj.departments[0].id) { // if (pepList[i].id == editObj.departments[0].id) {
departmentList = pepList[i].users // departmentList = pepList[i].users
} // }
} // }
setPeopleList(departmentList) // setPeopleList(departmentList)
setDepartmentId(editObj.departments[0].id) // setDepartmentId(editObj.departments[0].id)
setPeopleId(editObj.pepUserId) // setPeopleId(editObj.pepUserId)
setDisablePeople(false) // setDisablePeople(false)
} // }
}, []); }, []);
function handleOk () { function handleOk () {
@ -42,20 +46,20 @@ function adminModal (props) {
.validate() .validate()
.then((values) => { .then((values) => {
if (adminEdit) { if (adminEdit) {
dispatch(install.deteleOrganizationAdmin({id:editObj.id,msg:''})).then( // dispatch(install.deteleOrganizationAdmin({id:editObj.id,msg:''})).then(
dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '修改管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 // dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '修改管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户
if (res.success) { // if (res.success) {
close(); // close();
} // }
}) // })
) // )
} }
else { else {
dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '新增管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户 // dispatch(install.postOrganizationUser({ role: ['admin'], pepUserId: values.pepUserId, msg: '新增管理员' })).then((res) => {//获取项企(PEP)全部部门及其下用户
if (res.success) { // if (res.success) {
close(); // close();
} // }
}) // })
} }
}) })
} }
@ -63,45 +67,41 @@ function adminModal (props) {
close(); close();
//点击弹框取消 左边按钮 //点击弹框取消 左边按钮
} }
function onChange (value, index) {
console.log('value', value);
console.log('index', index);
}
return ( return (
<> <>
<Modal <Modal
title="管理员设置" title={systemEdit ? '修改映射关系' : '添加映射关系'}
okText="确定" okText="确定"
cancelText="取消" cancelText="取消"
visible={visible} visible={visible}
onOk={handleOk} onOk={handleOk}
width={607} width={666}
onCancel={handleCancel} onCancel={handleCancel}
> >
<div style={{ margin: "0px 25px" }}> <div style={{ margin: "0px 25px" }}>
<div style={{ width: '100%', height: 32, background: '#F4F8FF', borderRadius: 2, border: '1px solid #C7E1FF', display: 'flex', alignItems: 'center' }}> <div style={{ width: '100%', lineHeight: 2, background: '#F4F8FF', borderRadius: 2, border: '1px solid #C7E1FF', display: 'flex', alignItems: 'center' }}>
<div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}><IconAlertCircle style={{ color: '#0F7EFB' }} /></div> <div style={{ display: 'flex', alignItems: 'center', marginLeft: 12 }}><IconAlertCircle style={{ color: '#0F7EFB' }} /></div>
<div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8 }}>成员成为管理员后，拥有平台所有权限和项目，成员的普通角色会被禁用。</div> <div style={{ color: '#0F7EFB', fontSize: 12, marginLeft: 8, marginRight: 12 }}>映射关系由项企立项项目与安心云项目关联产生，若项目未在项企中有记载，可选自定义项目，待项企立项项后再进行修改！</div>
</div> </div>
<Form <Form
allowEmpty allowEmpty
labelPosition="left" labelPosition="left"
labelAlign="right" labelAlign="right"
labelWidth="90px" labelWidth="110px"
onValueChange={(values, field) => { onValueChange={(values, field) => {
console.log('values', values);
console.log('field', field);
for (var key in field) { for (var key in field) {
if (key == 'department') { if (key == 'projectType') {
if (values.department >= 0) { if (field.projectType == 'pep') {
let departmentList = [] setCustom(false)
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 { else {
setPeopleList([]) setCustom(true)
setDisablePeople(true)
form.current.setValue('pepUserId', undefined);
} }
} }
} }
@ -109,41 +109,61 @@ function adminModal (props) {
getFormApi={(formApi) => (form.current = formApi)} getFormApi={(formApi) => (form.current = formApi)}
> >
<div> <div>
<Form.Select <Form.RadioGroup field="projectType" initValue='pep' label='项目类型:' >
label="选择部门:" <Form.Radio value='pep'>项企项目</Form.Radio>
field="department" <Form.Radio value='axy'>自定义项目（未在项企中立项的项目可选）</Form.Radio>
placeholder="请选择部门" </Form.RadioGroup>
style={{ width: 417 }}
rules={[{ required: true, message: "请选择部门" }]}
initValue={departmentId || ""}
showClear
>
{
pepList.map((item, index) => {
return (
<Form.Select.Option key={index} value={item.id}>
{item.name}
</Form.Select.Option>
)
})
}
</Form.Select>
</div> </div>
{custom ? (
<div>
<Form.Input
field="name"
label='未立项项目:'
style={{ width: 425 }}
placeholder="请输入项目名称，且名称需与项企区分"
showClear
rules={[{ required: true, message: "请输入项目名称，且名称需与项企区分" }]} />
</div>
) : (
<div>
<Form.Select
label="PEP项企项目:"
field="pepUserId"
filter
placeholder="请选择PEP项企项目"
style={{ width: 425 }}
rules={[{ required: true, message: "请选择PEP项企项目" }]}
initValue={pepProjectId || ""}
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> <div>
<Form.Select <Form.Select
label="选择人员:" label="关联项目:"
field="pepUserId" field="anxinProject"
placeholder="请选择人员" multiple
style={{ width: 417 }} filter
rules={[{ required: true, message: "请选择人员" }]} placeholder="请选择关联项目"
initValue={peopleId || ""} style={{ width: 425 }}
rules={[{ required: true, message: "请选择关联项目" }]}
// initValue={departmentId || []}
showClear showClear
disabled={disablePeople}
> >
{ {
peopleList.map((item, index) => { anxincloudList.map((item, index) => {
return ( return (
<Form.Select.Option key={item.id} value={item.id}> <Form.Select.Option key={index} value={item.id}>
{item.name} {item.name}
</Form.Select.Option> </Form.Select.Option>
) )
@ -152,6 +172,47 @@ function adminModal (props) {
</Form.Select> </Form.Select>
</div> </div>
</Form> </Form>
<div style={{ marginTop: 8 }}>
{
appList.map((item, index) => {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ width: 110, textAlign: 'end', paddingRight: 16, color: 'rgba(0, 0, 0, 0.65)', fontWeight: 600 }}>
增加应用:
</div>
<div>
<Input
style={{ width: 149 }}
value={item.name}
placeholder="请输入应用名称"
onChange={(value) => onChange(value, index)}
maxLength={18}
showClear></Input>
</div>
<div>
<Input
style={{ width: 268, marginLeft: 8 }}
value={item.url}
placeholder="请输入URL地址"
onChange={(value) => onChange(value, index)}
maxLength={50}
showClear></Input>
</div>
<div style={{ display: 'flex', alignItems: 'center', cursor: "pointer" }}>
<img src="/assets/images/install/appDelete.png" alt="" style={{ height: 24, width: 24, marginLeft: 8 }} />
</div>
</div>
)
})
}
<div style={{ display: 'flex', alignItems: 'center',marginTop:12,marginLeft:110,justifyContent: 'space-between' }}>
<Button type='primary' theme='solid' style={{ width: 72, height: 25, borderRadius: '1px', border: '1px solid #005ABD',background:'#FFFFFF', color: '#005ABD', fontWeight: 400, }}>继续添加</Button>
<div style={{color:'#646566',fontSize:12,marginRight:32}}>
<span style={{color:'#F31C1C'}}>*</span>
最多可添加30条
</div>
</div>
</div>
</div> </div>
</Modal> </Modal>
</> </>

136
web/client/src/sections/install/containers/system.jsx
View File

@ -1,7 +1,9 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { connect } from 'react-redux'; 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 { SkeletonScreen, } from "$components";
import moment from "moment";
import SystemModal from '../components/systemModal'
import '../style.less' import '../style.less'
const Example = (props) => { const Example = (props) => {
@ -11,15 +13,20 @@ const Example = (props) => {
const [limits, setLimits] = useState()//每页实际条数 const [limits, setLimits] = useState()//每页实际条数
const mylimits = useRef(); //每页实际条数 const mylimits = useRef(); //每页实际条数
const [selected, setSelected] = useState([]) //表格被勾选项 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([]); //表格数据 const tableData = useRef([]); //表格数据
useEffect(() => { useEffect(() => {
// getProjectAnxincloud//获取安心云项目
// getProjectPmanage//获取PEP项目管理项目
dispatch(install.getProjectAnxincloud(query)).then((res) => {//获取安心云项目 dispatch(install.getProjectAnxincloud(query)).then((res) => {//获取安心云项目
console.log('getProjectAnxincloud',res.payload.data); setAnxincloudList(res.payload.data)
}) })
dispatch(install.getProjectPmanage(query)).then((res) => {//获取PEP项目管理项目 dispatch(install.getProjectPmanage(query)).then((res) => {//获取PEP项目管理项目
console.log('getProjectPmanage',res.payload.data); setPeplist(res.payload.data)
}) })
}, []) }, [])
useEffect(() => { useEffect(() => {
@ -42,62 +49,92 @@ const Example = (props) => {
{ {
title: "序号", title: "序号",
dataIndex: "index", dataIndex: "index",
key: 'index',
render: (text, r, index) => { render: (text, r, index) => {
return index + 1; return index + 1;
}, },
}, },
// {
// title: '成员',
// render: (_, row) => {
// let departmentsArr = []
// for (let i = 0; i < row.departments.length; i++) {
// departmentsArr.push(row.departments[i].name)
// }
// return (
// <div style={{ display: 'flex', alignItems: 'center' }}>
// <div>
// {row.name}
// </div>
// <div style={{ padding: '2px 4px', background: '#E8F3FF', borderRadius: 2, fontSize: 12, color: '#005ABD', marginLeft: 4 }}>
// {row.departments[0].name}
// </div>
// {
// row.departments.length > 1 ? (
// <Tooltip content={departmentsArr.join(',')} trigger="click" style={{ lineHeight: 2 }}>
// <div style={{ fontSize: 14, color: '#005ABD', marginLeft: 8, cursor: "pointer", }}>
// +{row.departments.length - 1}
// </div>
// </Tooltip>
// ) : ('')
// }
// </div>
// )
// }
// },
{ {
title: '关联时间', title: '安心云项目名称',
dataIndex: "createTime", dataIndex: "anxinProject",
key: 'anxinProject',
width: 500,
render: (_, row) => { render: (_, row) => {
return ( return (
<div> <div style={{ display: 'flex', alignItems: 'center' }}>
{row.createTime} {
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' }}>
{item.name}
</div>
</Tooltip>
) : row.anxinProject.length == 2 ? (
<Tooltip content={item.name}>
<div style={{ width: item.name.length > 12 ? '173.5' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{item.name}
</div>
</Tooltip>
) : (
<Tooltip content={item.name}>
<div style={{ width: item.name.length > 25 ? '358' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{item.name}
</div>
</Tooltip>
)
}
<div className='separator' style={{ width: 1, height: 12, border: '1px solid #DCDEE0', margin: '0px 10px' }}></div>
</div>
)
})
}
</div> </div>
) )
} }
}, },
{
title: 'PEP项企项目名称',
dataIndex: "pepProjectName",
key: 'pepProjectName',
render: (_, row) => {
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Tooltip content={row.pepProjectName}>
<div style={{ width: row.pepProjectName > 7 ? '112' : '', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{row.pepProjectName}
</div>
</Tooltip>
</div>
)
}
},
{
title: '关联时间',
dataIndex: "createTime",
key: 'time',
render: (_, row) => {
return moment(row.createTime).format("YYYY-MM-DD HH:MM:SS");
}
},
{ {
title: "管理", title: "管理",
width: "20%", width: "20%",
dataIndex: "text", dataIndex: "text",
key: 'text',
render: (_, row) => { render: (_, row) => {
return ( return (
<div style={{ display: "flex" }}> <div style={{ display: "flex" }}>
<Button <Button
theme="borderless" theme="borderless"
onClick={() => { onClick={() => {
setMemberModal(true); setSystemModal(true);
setEditObj(row) setPepProjectId(row.pepProjectId)
setMemberEdit(true) // setEditObj(row)
setSystemEdit(true)
}} }}
> >
修改 修改
@ -157,6 +194,9 @@ const Example = (props) => {
marginLeft: 40 marginLeft: 40
}} }}
onClick={() => { onClick={() => {
setSystemModal(true);
setSystemEdit(false)
setPepProjectId()
// setEditObj({}) // setEditObj({})
// setMemberEdit(false) // setMemberEdit(false)
// setMemberModal(true); // setMemberModal(true);
@ -197,7 +237,7 @@ const Example = (props) => {
<div> <div>
<div style={{ display: 'inline-block', lineHeight: '30px' }}>勾选<span style={{ fontWeight: 400, color: '#0F7EFB', }}>{selected.length}条</span>问题</div> <div style={{ display: 'inline-block', lineHeight: '30px' }}>勾选<span style={{ fontWeight: 400, color: '#0F7EFB', }}>{selected.length}条</span>问题</div>
<Button onClick={() => setSelected([])} style={{ width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#0F7EFB', fontWeight: 400, margin: '0 10px' }}>全选</Button> <Button onClick={() => setSelected([])} style={{ width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#0F7EFB', fontWeight: 400, margin: '0 10px' }}>全选</Button>
<Button type='primary' theme='solid' style={{ width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#FFFFFF', fontWeight: 400, }}>批量确认</Button> <Button type='primary' theme='solid' style={{ width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#FFFFFF', fontWeight: 400, }}>批量删除</Button>
</div> </div>
<div style={{ display: 'flex', }}> <div style={{ display: 'flex', }}>
<span style={{ lineHeight: "30px" }}> <span style={{ lineHeight: "30px" }}>
@ -218,6 +258,20 @@ const Example = (props) => {
</div> </div>
</div> </div>
</div> </div>
{//映射关系弹框
systemModal ?
<SystemModal
visible={true}
anxincloudList={anxincloudList}
systemEdit={systemEdit}
peplist={peplist}
pepProjectId={pepProjectId}
close={() => {
setSystemModal(false);
// getUserList()
}} >
</SystemModal> : ''
}
</> </>
) )
} }

5
web/client/src/sections/install/style.less
View File

@ -20,4 +20,9 @@
} }
.adminTop:hover{ .adminTop:hover{
box-shadow: 0px 0px 12px 2px rgba(130, 131, 133,0.5); box-shadow: 0px 0px 12px 2px rgba(130, 131, 133,0.5);
}
.myseparator:last-child{
.separator{
display: none;
}
} }
Write Preview
Loading…
Cancel
Save