deartibers
2 years ago
33 changed files with 710 additions and 168 deletions
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 639 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 789 B |
@ -1,14 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
import { ApiTable ,basicAction} from '$utils' |
|||
|
|||
// export function getMembers (orgId) {
|
|||
// return dispatch => basicAction({
|
|||
// type: 'get',
|
|||
// dispatch: dispatch,
|
|||
// actionType: 'GET_MEMBERS',
|
|||
// url: `${ApiTable.getEnterprisesMembers.replace('{enterpriseId}', orgId)}`,
|
|||
// msg: { error: '获取用户列表失败' },
|
|||
// reducer: { name: 'members' }
|
|||
// });
|
|||
// }
|
|||
@ -1,7 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
import * as example from './example' |
|||
|
|||
export default { |
|||
...example |
|||
} |
|||
@ -1,60 +0,0 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card } from '@douyinfe/semi-ui'; |
|||
import '../style.less' |
|||
const { Meta } = Card; |
|||
|
|||
const Example = (props) => { |
|||
const { dispatch, actions, user, loading, socket } = props |
|||
|
|||
useEffect(() => { |
|||
// ACTION 示例 |
|||
// dispatch(actions.example.getMembers(user.orgId)) |
|||
}, []) |
|||
|
|||
// websocket 使用测试 |
|||
// useEffect(() => { |
|||
// console.log(socket) |
|||
// if (socket) { |
|||
// socket.on('TEST', function (msg) { |
|||
// console.info(msg); |
|||
// }); |
|||
// return () => { |
|||
// socket.off("TEST"); |
|||
// } |
|||
// } |
|||
|
|||
// }, [socket]) |
|||
|
|||
return ( |
|||
<Spin tip="biubiubiu~" spinning={loading}> |
|||
<div id='example'> |
|||
<p>STYLE EXAMPLE</p> |
|||
</div> |
|||
{/* <Card |
|||
style={{ maxWidth: 300 }} |
|||
cover={ |
|||
<img |
|||
alt="example" |
|||
src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo2.jpeg" |
|||
/> |
|||
} |
|||
> |
|||
<Meta title="组件示例" /> |
|||
</Card> */} |
|||
</Spin> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
return { |
|||
// loading: members.isRequesting, |
|||
// user: auth.user, |
|||
// actions: global.actions, |
|||
// members: members.data, |
|||
// socket: webSocket.socket |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Example); |
|||
@ -1,5 +0,0 @@ |
|||
'use strict'; |
|||
|
|||
import Example from './example'; |
|||
|
|||
export { Example }; |
|||
@ -1,33 +0,0 @@ |
|||
import React from 'react'; |
|||
import { IconCode } from '@douyinfe/semi-icons'; |
|||
|
|||
export function getNavItem (user, dispatch) { |
|||
return ( |
|||
[ |
|||
{ |
|||
itemKey: 'example1', |
|||
text: '举个栗子1', |
|||
icon: <IconCode />, |
|||
items: [ |
|||
{ |
|||
itemKey: 'e3', |
|||
text: '举个棒子3', |
|||
icon: <IconCode />, |
|||
to: '/example/e3/c3', |
|||
items: [{ |
|||
itemKey: 'c3', to: '/example/e3/c3', text: '举个锤子3' |
|||
}] |
|||
}, { |
|||
itemKey: 'e4', |
|||
text: '举个棒子4', |
|||
icon: <IconCode />, |
|||
to: '/example/e4/c4', |
|||
items: [{ |
|||
itemKey: 'c4', to: '/example/e4/c4', text: '举个锤子4' |
|||
}] |
|||
}, |
|||
] |
|||
}, |
|||
] |
|||
); |
|||
} |
|||
@ -1,35 +0,0 @@ |
|||
'use strict'; |
|||
import { Example, } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/example1', |
|||
key: 'example1', |
|||
breadcrumb: '栗子1', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
childRoutes: [{ |
|||
path: '/e3', |
|||
key: 'e3', |
|||
// component: Example,
|
|||
breadcrumb: '棒子3', |
|||
childRoutes:[{ |
|||
path: '/c3', |
|||
key: 'c3', |
|||
component: Example, |
|||
breadcrumb: '锤子3', |
|||
}] |
|||
},{ |
|||
path: '/e4', |
|||
key: 'e4', |
|||
// component: Example,
|
|||
breadcrumb: '棒子4', |
|||
childRoutes:[{ |
|||
path: '/c4', |
|||
key: 'c4', |
|||
component: Example, |
|||
breadcrumb: '锤子4', |
|||
}] |
|||
}] |
|||
} |
|||
}]; |
|||
@ -1,7 +0,0 @@ |
|||
#example { |
|||
box-shadow: 3px 3px 2px black; |
|||
} |
|||
|
|||
#example:hover { |
|||
color: yellowgreen; |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
'use strict'; |
|||
|
|||
import * as roles from './roles' |
|||
|
|||
export default { |
|||
...roles |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
'use strict'; |
|||
|
|||
import { ApiTable, basicAction } from '$utils' |
|||
|
|||
export function getOrganizationDeps (query) {//获取项企(PEP)全部部门及其下用户
|
|||
return (dispatch) => basicAction({ |
|||
type: "get", |
|||
dispatch: dispatch, |
|||
actionType: "GET_ORGANIZATIONDEPS", |
|||
query: query, |
|||
url: `${ApiTable.getOrganizationDeps}`, |
|||
msg: { option: "获取项企(PEP)全部部门及其下用户" }, |
|||
reducer: { name: "OrganizationDeps", params: { noClear: true } }, |
|||
}); |
|||
} |
|||
|
|||
export function getOrganizationUser (query) {//获取成员列表
|
|||
return (dispatch) => basicAction({ |
|||
type: "get", |
|||
dispatch: dispatch, |
|||
actionType: "GET_ORGANIZATIONUSER", |
|||
query: query, |
|||
url: `${ApiTable.getOrganizationUser}`, |
|||
msg: { option: "获取成员列表" }, |
|||
reducer: { name: "OrganizationUser", params: { noClear: true } }, |
|||
}); |
|||
} |
|||
export function putOrganizationUser(data) {//更新成员状态
|
|||
let pomsUserId='' |
|||
if(data){ |
|||
pomsUserId = data.pomsUserId |
|||
} |
|||
return (dispatch) => |
|||
basicAction({ |
|||
type: "put", |
|||
dispatch: dispatch, |
|||
data, |
|||
actionType: "PUT_ORGANIZATIONUSER", |
|||
url: `${ApiTable.putOrganizationUser.replace("{pomsUserId}", pomsUserId)}`, |
|||
msg: { option: "更新成员状态" }, //更新成员状态
|
|||
reducer: {}, |
|||
}); |
|||
} |
|||
@ -0,0 +1,61 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
import { connect } from "react-redux"; |
|||
import { Modal, Spin,Input } from "@douyinfe/semi-ui"; |
|||
|
|||
function remarksModal (props) { |
|||
const { |
|||
close, |
|||
visible, |
|||
dispatch, |
|||
actions, |
|||
} = props; |
|||
const { equipmentWarehouse } = actions; |
|||
//初始化 |
|||
useEffect(() => { |
|||
|
|||
}, []); |
|||
|
|||
function handleOk () { |
|||
//点击弹框确定 右边按钮 |
|||
// dispatch( |
|||
// equipmentWarehouse.postCameraRemark({ |
|||
// cameraId:rowId, |
|||
// remark:showScrollList |
|||
// }) |
|||
// ).then((res) => { |
|||
// close(); |
|||
// }) |
|||
} |
|||
function handleCancel () { |
|||
close(); |
|||
//点击弹框取消 左边按钮 |
|||
} |
|||
return ( |
|||
<> |
|||
<Modal |
|||
title="备注管理" |
|||
okText="确定" |
|||
cancelText="取消" |
|||
visible={visible} |
|||
onOk={handleOk} |
|||
width={763} |
|||
onCancel={handleCancel} |
|||
> |
|||
<div style={{margin:"2px 14px 18px 29px",display:'flex'}}> |
|||
|
|||
</div> |
|||
</Modal> |
|||
</> |
|||
); |
|||
} |
|||
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)(remarksModal); |
|||
@ -0,0 +1,5 @@ |
|||
'use strict'; |
|||
|
|||
import Roles from './roles'; |
|||
import System from './system'; |
|||
export { Roles,System }; |
|||
@ -0,0 +1,464 @@ |
|||
import React, { useEffect, useState, useRef } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Skeleton, Table, RadioGroup, Radio, Button, Pagination, Popconfirm, Tooltip } from '@douyinfe/semi-ui'; |
|||
import { SkeletonScreen, } from "$components"; |
|||
import AdminModal from '../components/adminModal'; |
|||
import '../style.less' |
|||
|
|||
const Roles = (props) => { |
|||
const { dispatch, actions, user, loading, socket } = props |
|||
const { install } = actions; |
|||
const [roleAssignment, setRoleAssignment] = useState([])//角色分配 |
|||
const [notCreated, setNotCreated] = useState([])//角色未分配 |
|||
const [roleChoose, setRoleChoose] = useState('')//角色选择 |
|||
const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 |
|||
const [adminModal, setAdminModal] = useState(false); |
|||
const [columns, setColumns] = useState([ |
|||
{ |
|||
title: '成员', |
|||
render: (_, row) => { |
|||
return ( |
|||
'text' |
|||
) |
|||
} |
|||
}, |
|||
{ |
|||
title: '项目名称', |
|||
render: (_, row) => { |
|||
return ( |
|||
'name' |
|||
) |
|||
} |
|||
}, |
|||
{ |
|||
title: ( |
|||
<div style={{ display: 'flex', alignItems: 'center' }}> |
|||
数据分析师 |
|||
<Tooltip content={'拥有分析、工单、资料的权限'}> |
|||
<img src="/assets/images/install/table_question.png" alt="" style={{ height: 14, width: 14, marginLeft: 4 }} /> |
|||
</Tooltip> |
|||
</div> |
|||
), |
|||
render: (_, row) => { |
|||
let rolearr = row.role |
|||
return ( |
|||
<div> |
|||
{ |
|||
rolearr.indexOf('data_analyst') != -1 ? ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div> |
|||
<img src="/assets/images/install/icon_haveAuthority.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
<div>有权限</div> |
|||
</div> |
|||
) : ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div> |
|||
<img src="/assets/images/install/icon_noPermission.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
<div style={{ color: '#969799' }}>无权限</div> |
|||
</div> |
|||
) |
|||
} |
|||
</div> |
|||
); |
|||
} |
|||
}, { |
|||
title: ( |
|||
<div style={{ display: 'flex', alignItems: 'center' }}> |
|||
售后运维 |
|||
<Tooltip content={'拥有问题、设备、工单、资料、一期控制台的权限'}> |
|||
<img src="/assets/images/install/table_question.png" alt="" style={{ height: 14, width: 14, marginLeft: 4 }} /> |
|||
</Tooltip> |
|||
</div> |
|||
), |
|||
render: (_, row) => { |
|||
let rolearr = row.role |
|||
return ( |
|||
<div> |
|||
{ |
|||
rolearr.indexOf('after_sale') != -1 ? ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div> |
|||
<img src="/assets/images/install/icon_haveAuthority.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
<div>有权限</div> |
|||
</div> |
|||
) : ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div> |
|||
<img src="/assets/images/install/icon_noPermission.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
<div style={{ color: '#969799' }}>无权限</div> |
|||
</div> |
|||
) |
|||
} |
|||
</div> |
|||
); |
|||
} |
|||
}, { |
|||
title: ( |
|||
<div style={{ display: 'flex', alignItems: 'center' }}> |
|||
资源管理员 |
|||
<Tooltip content={'拥有资料、工单的权限'}> |
|||
<img src="/assets/images/install/table_question.png" alt="" style={{ height: 14, width: 14, marginLeft: 4 }} /> |
|||
</Tooltip> |
|||
</div> |
|||
), |
|||
render: (_, row) => { |
|||
let rolearr = row.role |
|||
return ( |
|||
<div> |
|||
{ |
|||
rolearr.indexOf('resource_manage') != -1 ? ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div> |
|||
<img src="/assets/images/install/icon_haveAuthority.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
<div>有权限</div> |
|||
</div> |
|||
) : ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div> |
|||
<img src="/assets/images/install/icon_noPermission.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
<div style={{ color: '#969799' }}>无权限</div> |
|||
</div> |
|||
) |
|||
} |
|||
</div> |
|||
); |
|||
} |
|||
}, { |
|||
title: ( |
|||
<div style={{ display: 'flex', alignItems: 'center' }}> |
|||
客户服务 |
|||
<Tooltip content={'拥有服务、工单的权限'}> |
|||
<img src="/assets/images/install/table_question.png" alt="" style={{ height: 14, width: 14, marginLeft: 4 }} /> |
|||
</Tooltip> |
|||
</div> |
|||
), |
|||
render: (_, row) => { |
|||
let rolearr = row.role |
|||
return ( |
|||
<div> |
|||
{ |
|||
rolearr.indexOf('customer_service') != -1 ? ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div> |
|||
<img src="/assets/images/install/icon_haveAuthority.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
<div>有权限</div> |
|||
</div> |
|||
) : ( |
|||
<div style={{ display: 'flex' }}> |
|||
<div> |
|||
<img src="/assets/images/install/icon_noPermission.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
<div style={{ color: '#969799' }}>无权限</div> |
|||
</div> |
|||
) |
|||
} |
|||
</div> |
|||
); |
|||
} |
|||
}, |
|||
{ |
|||
title: "管理", |
|||
width: "20%", |
|||
dataIndex: "", |
|||
render: (_, row) => { |
|||
return ( |
|||
<div style={{ display: "flex" }}> |
|||
{row?.disabled ? ( |
|||
<Button |
|||
theme="borderless" |
|||
onClick={() => { |
|||
dispatch(install.putOrganizationUser({ pomsUserId: row?.id, disabled: !row?.disabled })).then(() => getUserList()) |
|||
}} |
|||
> |
|||
启用 |
|||
</Button> |
|||
) : ( |
|||
<Popconfirm |
|||
title="禁用后，成员暂时将无法登录。" |
|||
arrowPointAtCenter={false} |
|||
showArrow={true} |
|||
position="topRight" |
|||
onConfirm={() => { |
|||
dispatch(install.putOrganizationUser({ pomsUserId: row?.id, disabled: !row?.disabled })).then(() => { |
|||
getUserList(); |
|||
}) |
|||
}} |
|||
> |
|||
<Button theme="borderless">禁用</Button> |
|||
</Popconfirm> |
|||
)} |
|||
<Button |
|||
theme="borderless" |
|||
onClick={() => { |
|||
// setSideSheet(true); |
|||
// setRowId(row.id); |
|||
}} |
|||
> |
|||
编辑 |
|||
</Button> |
|||
<Popconfirm |
|||
title="删除后，成员将无法登录。" |
|||
arrowPointAtCenter={false} |
|||
showArrow={true} |
|||
position="topRight" |
|||
onConfirm={() => { |
|||
dispatch(install.putOrganizationUser({ pomsUserId: row?.id, disabled: !row?.disabled })).then(() => { |
|||
if (page.current > 0 && limits.current < 2) { |
|||
setQuery({ limit: 10, page: page.current - 1 }) |
|||
} else { |
|||
setQuery({ limit: 10, page: page.current }) |
|||
} |
|||
}) |
|||
}} |
|||
> |
|||
<Button theme="borderless">删除</Button> |
|||
</Popconfirm> |
|||
</div> |
|||
); |
|||
}, |
|||
}, |
|||
]) |
|||
const [data, setdata] = useState([]) |
|||
const page = useRef(query.page); |
|||
const limits = useRef(); //每页实际条数 |
|||
useEffect(() => { |
|||
getUserList(); |
|||
}, [query, roleChoose]); |
|||
useEffect(() => { |
|||
dispatch(install.getOrganizationDeps()).then((res)=>{//获取项企(PEP)全部部门及其下用户 |
|||
console.log('resresres',res.payload.data); |
|||
}) |
|||
getUserList() |
|||
}, []) |
|||
function getUserList () { |
|||
let searchData = { ...query, role: roleChoose } |
|||
dispatch(install.getOrganizationUser(searchData)).then((res) => {//获取成员列表 |
|||
setdata(res.payload.data.users.rows); |
|||
setRoleAssignment(res.payload.data.admin) |
|||
let notCreatedArr = [] |
|||
let notCreatedNum = 5 - res.payload.data.admin.length |
|||
for (let i = 0; i < notCreatedNum; i++) { |
|||
notCreatedArr.push('') |
|||
} |
|||
setNotCreated(notCreatedArr) |
|||
limits.current = res.payload.data.users.count |
|||
}) |
|||
} |
|||
function handleRow (record, index) {//斑马条纹 |
|||
// 给偶数行设置斑马纹 |
|||
if (index % 2 === 0) { |
|||
return { |
|||
style: { |
|||
background: '#FAFCFF', |
|||
} |
|||
}; |
|||
} else { |
|||
return {}; |
|||
} |
|||
} |
|||
function roleOnChange (e) {//角色选择 |
|||
setRoleChoose(e.target.value); |
|||
} |
|||
return ( |
|||
<> |
|||
<div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px' }}> |
|||
<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", }}>ADMINISTRATOR SETTING</div> |
|||
</div> |
|||
<div style={{ margintop: 15, overflow: 'auto' }}> |
|||
<div style={{ display: 'inline-flex' }}> |
|||
{ |
|||
roleAssignment.map((item, index) => { |
|||
return ( |
|||
<div key={index} style={{ |
|||
width: 312, height: 127, boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', |
|||
borderRadius: 2, background: "url(/assets/images/install/cardBackground.png)", |
|||
backgroundSize: "100% 100%", marginRight: 20, marginBottom: 20, |
|||
}}> |
|||
<div style={{ |
|||
background: '#52A4F6', borderRadius: 2, height: 18, padding: '2px 4px', |
|||
fontSize: 10, marginTop: 17, marginLeft: 21, width: 'max-content', color: '#FFFFFF', |
|||
display: 'flex', alignItems: 'center', |
|||
}}> |
|||
{'系统管理员0' + (index + 1)} |
|||
</div> |
|||
<div style={{ marginTop: 5, display: 'flex', justifyContent: 'space-between', padding: '0px 21px' }}> |
|||
<div style={{ marginTop: 9 }}> |
|||
<div style={{ display: 'flex' }}> |
|||
<div style={{ fontSize: 14, color: '#4A4A4A', }}>行业服务部-刘昊然</div> |
|||
<div style={{ marginLeft: 4, cursor: "pointer", }}> |
|||
<img src="/assets/images/install/icon_edit.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
<div style={{ marginLeft: 4, cursor: "pointer", }}> |
|||
<img src="/assets/images/install/icon_detele.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
</div> |
|||
<div style={{ fontSize: 12, color: '#969799', marginTop: 20 }}>角色说明：拥有全平台的权限</div> |
|||
</div> |
|||
<div> |
|||
<img src="/assets/images/install/setPermissions.png" alt="" style={{ height: 63, width: 61 }} /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
}) |
|||
} |
|||
{ |
|||
notCreated.map((item, index) => { |
|||
return ( |
|||
// <div key={index} style={{ |
|||
// width: 312, height: 127, boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', |
|||
// borderRadius: 2, background: "url(/assets/images/install/greyBackground.png)", |
|||
// backgroundSize: "100% 100%", marginRight: 20, marginBottom: 20, textAlign: 'center', |
|||
// cursor: "pointer", |
|||
// }} onClick={setAdminModal}> |
|||
// <div style={{ marginTop: 23 }}> |
|||
// <img src="/assets/images/install/roleAdd.png" alt="" style={{ height: 37, width: 32 }} /> |
|||
// </div> |
|||
// <div style={{ color: '#4A4A4A', fontSize: 12, marginTop: 26 }}> |
|||
// 添加新的管理员 |
|||
// </div> |
|||
// </div> |
|||
<div key={index} style={{ |
|||
width: 312, height: 127, boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', |
|||
borderRadius: 2, background: "url(/assets/images/install/cardBackground.png)", |
|||
backgroundSize: "100% 100%", marginRight: 20, marginBottom: 20, |
|||
}}> |
|||
<div style={{ |
|||
background: '#52A4F6', borderRadius: 2, height: 18, padding: '2px 4px', |
|||
fontSize: 10, marginTop: 17, marginLeft: 21, width: 'max-content', color: '#FFFFFF', |
|||
display: 'flex', alignItems: 'center', |
|||
}}> |
|||
{'系统管理员0' + (index + 1)} |
|||
</div> |
|||
<div style={{ marginTop: 5, display: 'flex', justifyContent: 'space-between', padding: '0px 21px' }}> |
|||
<div style={{ marginTop: 9 }}> |
|||
<div style={{ display: 'flex' }}> |
|||
<div style={{ fontSize: 14, color: '#4A4A4A', }}>虚席以待</div> |
|||
<div style={{ marginLeft: 4, cursor: "pointer", }} onClick={()=>{setAdminModal(true)}}> |
|||
<img src="/assets/images/install/icon_edit.png" alt="" style={{ height: 18, width: 18 }} /> |
|||
</div> |
|||
</div> |
|||
<div style={{ fontSize: 12, color: '#969799', marginTop: 20 }}>角色说明：拥有全平台的权限</div> |
|||
</div> |
|||
<div> |
|||
<img src="/assets/images/install/setPermissions.png" alt="" style={{ height: 63, width: 61 }} /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
}) |
|||
} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className='roleBottom' style={{ margin: '20px 12px 12px 12px', background: '#FFFFFF', padding: '20px 20px 40px 20px' }}> |
|||
<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", }}>MANAGEMENT OF MEMBERS</div> |
|||
</div> |
|||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}> |
|||
<div style={{ fontSize: 12, color: '#646566' }}>平台有4种类型的成员角色，分别是数据分析师、售后运维、资源管理者和客户服务，每名项目成员可拥有多种成员角色；</div> |
|||
<div className='roleRadio' style={{ display: 'flex', alignItems: 'center' }}> |
|||
<div> |
|||
<RadioGroup onChange={roleOnChange} value={roleChoose} aria-label="单选组合示例" name="demo-radio-group"> |
|||
<Radio value=''>全部</Radio> |
|||
<Radio value='data_analyst'>数据分析师</Radio> |
|||
<Radio value='after_sale'>售后运维</Radio> |
|||
<Radio value='resource_manage'>资源管理者</Radio> |
|||
<Radio value='customer_service'>客户服务</Radio> |
|||
</RadioGroup> |
|||
</div> |
|||
<div> |
|||
<Button |
|||
theme="solid" |
|||
type="primary" |
|||
style={{ |
|||
width: 108, |
|||
height: 32, |
|||
borderRadius: 2, |
|||
marginLeft: 40 |
|||
}} |
|||
onClick={() => { |
|||
// api.current.validate().then((v) => { |
|||
// setSearch(v); |
|||
// setQuery({ limit: 10, page: 0 }) |
|||
// }); |
|||
}} |
|||
> |
|||
添加成员 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<Skeleton |
|||
loading={false} |
|||
active={true} |
|||
placeholder={SkeletonScreen()} |
|||
> |
|||
<Table |
|||
columns={columns} |
|||
dataSource={data} |
|||
bordered={false} |
|||
onRow={handleRow} |
|||
empty="暂无数据" |
|||
pagination={false} |
|||
/> |
|||
</Skeleton> |
|||
<div |
|||
style={{ |
|||
display: "flex", |
|||
justifyContent: "flex-end", |
|||
padding: "20px 20px", |
|||
}} |
|||
> |
|||
<span style={{ lineHeight: "30px" }}> |
|||
共{limits.current}条信息 |
|||
</span> |
|||
<Pagination |
|||
className="22" |
|||
total={limits.current} |
|||
showSizeChanger |
|||
currentPage={query.page + 1} |
|||
pageSizeOpts={[10, 20, 30, 40]} |
|||
onChange={(currentPage, pageSize) => { |
|||
setQuery({ limit: pageSize, page: currentPage - 1 }); |
|||
page.current = currentPage - 1 |
|||
}} |
|||
/> |
|||
</div> |
|||
</div> |
|||
{ |
|||
adminModal ? |
|||
<AdminModal |
|||
visible={true} |
|||
close={() => { |
|||
setAdminModal(false); |
|||
// equipmentGetCamera(); |
|||
}} > |
|||
</AdminModal> : '' |
|||
} |
|||
</> |
|||
) |
|||
} |
|||
|
|||
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)(Roles); |
|||
@ -0,0 +1,34 @@ |
|||
import React, { useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card } from '@douyinfe/semi-ui'; |
|||
import '../style.less' |
|||
|
|||
const Example = (props) => { |
|||
const { dispatch, actions, user, loading, socket } = props |
|||
|
|||
useEffect(() => { |
|||
// dispatch(actions.example.getMembers(user.orgId)) |
|||
}, []) |
|||
|
|||
|
|||
return ( |
|||
<> |
|||
<div> |
|||
2222222222222 |
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
return { |
|||
// loading: members.isRequesting, |
|||
// user: auth.user, |
|||
// actions: global.actions, |
|||
// members: members.data, |
|||
// socket: webSocket.socket |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Example); |
|||
@ -0,0 +1,33 @@ |
|||
import React from 'react'; |
|||
import { IconCode } from '@douyinfe/semi-icons'; |
|||
|
|||
export function getNavItem (user, dispatch) { |
|||
return ( |
|||
[ |
|||
{ |
|||
itemKey: 'install', |
|||
text: '设置', |
|||
icon: <IconCode />, |
|||
items: [ |
|||
{ |
|||
itemKey: 'authentication', |
|||
text: '鉴权管理', |
|||
icon: <iconpark-icon style={{ width: 20, height: 20 }} name="jq"></iconpark-icon>, |
|||
to: '/install/authentication/roles', |
|||
items: [{ |
|||
itemKey: 'roles', to: '/install/authentication/roles', text: '人员及角色' |
|||
}] |
|||
}, { |
|||
itemKey: 'mapping', |
|||
text: '关系映射', |
|||
icon: <iconpark-icon style={{ width: 20, height: 20 }} name="ys"></iconpark-icon>, |
|||
to: '/install/mapping/system', |
|||
items: [{ |
|||
itemKey: 'system', to: '/install/mapping/system', text: '系统映射' |
|||
}] |
|||
}, |
|||
] |
|||
}, |
|||
] |
|||
); |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
'use strict'; |
|||
import { Roles,System } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/install', |
|||
key: 'install', |
|||
breadcrumb: '设置', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
childRoutes: [{ |
|||
path: '/authentication', |
|||
key: 'authentication', |
|||
breadcrumb: '鉴权管理', |
|||
childRoutes:[{ |
|||
path: '/roles', |
|||
key: 'roles', |
|||
component: Roles, |
|||
breadcrumb: '人员及角色', |
|||
}] |
|||
},{ |
|||
path: '/mapping', |
|||
key: 'mapping', |
|||
breadcrumb: '关系映射', |
|||
childRoutes:[{ |
|||
path: '/system', |
|||
key: 'system', |
|||
component: System, |
|||
breadcrumb: '系统映射', |
|||
}] |
|||
}] |
|||
} |
|||
}]; |
|||
@ -0,0 +1,16 @@ |
|||
.roleRadio{ |
|||
.semi-radio{ |
|||
margin-right: 40px; |
|||
font-size: 13px; |
|||
} |
|||
} |
|||
.roleBottom{ |
|||
.semi-table{ |
|||
.semi-table-row:first-child{ |
|||
.semi-table-row-head{ |
|||
background: #F2F3F5; |
|||
color: #4A4A4A; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue