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 MemberModal from '../components/memberModal'; import '../style.less' const Roles = (props) => { const { dispatch, actions, user, loading, socket } = props const { install } = actions; const [roleAssignment, setRoleAssignment] = useState([])//角色分配 const [roleChoose, setRoleChoose] = useState('')//角色选择 const [query, setQuery] = useState({ limit: 10, page: 0 }); //页码信息 const [adminModal, setAdminModal] = useState(false);//管理员弹框 const [adminEdit, setAdminEdit] = useState(false);//管理员弹框是否修改 const [editObj, setEditObj] = useState({});//管理员弹框修改内容 const [memberModal, setMemberModal] = useState(false);//成员弹框 const [memberEdit, setMemberEdit] = useState(false);//成员弹框是否修改 const [columns, setColumns] = useState([//表格属性 { 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: '项目名称', render: (_, row) => { return (
{ row.correlationProject.map((item, index) => { return (
{item}
) }) }
) } }, { title: (
数据分析师
), render: (_, row) => { let rolearr = row.role return (
{ rolearr.indexOf('data_analyst') != -1 ? (
有权限
) : (
无权限
) }
); } }, { title: (
售后运维
), render: (_, row) => { let rolearr = row.role return (
{ rolearr.indexOf('after_sale') != -1 ? (
有权限
) : (
无权限
) }
); } }, { title: (
资源管理员
), render: (_, row) => { let rolearr = row.role return (
{ rolearr.indexOf('resource_manage') != -1 ? (
有权限
) : (
无权限
) }
); } }, { title: (
客户服务
), render: (_, row) => { let rolearr = row.role return (
{ rolearr.indexOf('customer_service') != -1 ? (
有权限
) : (
无权限
) }
); } }, { title: "管理", width: "20%", dataIndex: "", render: (_, row) => { return (
{row?.disabled ? ( ) : ( { dispatch(install.putOrganizationUser({ pomsUserId: row?.id, disabled: !row?.disabled })).then(() => { getUserList(); }) }} > )} { dispatch(install.putOrganizationUser({ pomsUserId: row?.id, deleted: true })).then(() => { if (page.current > 0 && limits.current < 2) { setQuery({ limit: 10, page: page.current - 1 }) } else { setQuery({ limit: 10, page: page.current }) } }) }} >
); }, }, ]) // const [data, setdata] = useState([])//表格数据 const tableData = useRef([]); //每页实际条数 const page = useRef(query.page);//哪一页 const limits = useRef(); //每页实际条数 const [pepList, setPepList] = useState([])//角色分配 useEffect(() => { getUserList(); }, [query, roleChoose]); useEffect(() => { dispatch(install.getOrganizationDeps()).then((res) => {//获取项企(PEP)全部部门及其下用户 setPepList(res.payload.data) }) getUserList() }, []) function getUserList () { let searchData = { ...query, role: roleChoose } dispatch(install.getOrganizationUser(searchData)).then((res) => {//获取成员列表 tableData.current = res.payload.data.users.rows; let notCreatedArr = [] let notCreatedNum = 5 - res.payload.data.admin.length for (let i = 0; i < notCreatedNum; i++) { notCreatedArr.push('') } setRoleAssignment(res.payload.data.admin.concat(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 ( <>
管理员设置
ADMINISTRATOR SETTING
{ roleAssignment.map((item, index) => { return (
{ item.id ? (
{ item.departments?.map((itm, idx) => { let mydepartmentsArr=[] for (let index = 0; index < item.departments.length; index++) { mydepartmentsArr.push(item.departments[index].name) } return (
{ idx > 2 ? (
...
) : ( itm.name ) }
) }) }
) : (
部门
) }
{ item.id ? (
{item.name}
) : (
虚席以待
) }
{ if (item.id) { setEditObj(item) setAdminEdit(true) } else { setEditObj({}) setAdminEdit(false) } setAdminModal(true) }}>
{ item.id ? ( { dispatch(install.deteleOrganizationAdmin(item?.id)).then(() => getUserList()) }} >
) : ('') }
角色说明：拥有全平台的权限
) }) }
成员管理
MANAGEMENT OF MEMBERS
平台有4种类型的成员角色，分别是数据分析师、售后运维、资源管理者和客户服务，每名项目成员可拥有多种成员角色；
全部 数据分析师 售后运维 资源管理者 客户服务
共{limits.current}条信息 { setQuery({ limit: pageSize, page: currentPage - 1 }); page.current = currentPage - 1 }} />
{//管理员弹框 adminModal ? { setAdminModal(false); getUserList() }} > : '' } {//成员弹框 memberModal ? { setMemberModal(false); getUserList() }} > : '' } ) } 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);