Commit 7eebdadf by zhangleyuan

feat:处理学院管理

parent e36d5075
@font-face {
font-family: 'iconfont'; /* Project id 2223403 */
src: url('//at.alicdn.com/t/font_2223403_n9xskhzzak.woff2?t=1625661501663') format('woff2'),
url('//at.alicdn.com/t/font_2223403_n9xskhzzak.woff?t=1625661501663') format('woff'),
url('//at.alicdn.com/t/font_2223403_n9xskhzzak.ttf?t=1625661501663') format('truetype');
src: url('//at.alicdn.com/t/font_2223403_6hd3qwwrou2.woff2?t=1627033726611') format('woff2'),
url('//at.alicdn.com/t/font_2223403_6hd3qwwrou2.woff?t=1627033726611') format('woff'),
url('//at.alicdn.com/t/font_2223403_6hd3qwwrou2.ttf?t=1627033726611') format('truetype');
}
.iconfont {
font-family: 'iconfont' !important;
......
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-24 12:20:57
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-22 16:42:31
* @LastEditTime: 2021-07-23 17:50:28
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
-->
......@@ -29,7 +29,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_n9xskhzzak.css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_6hd3qwwrou2.css" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
......
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-22 15:12:48
* @LastEditTime: 2021-07-23 16:18:17
* @Description: 学员管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -10,25 +10,14 @@
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
// import { PageControl } from "@/components"
import {Tabs,Input,Tree,Button} from "antd";
import CustomGroupTabCon from './components/CustomGroupTabCon';
import DepartMentTabCon from './components/DepartMentTabCon';
import PostGroupTabCon from './components/PostGroupTabCon';
// import StoreService from "@/domains/store-domain/storeService";
// import User from "@/common/js/user";
// import ChooseMembersModal from "./modal/ChooseMembersModal";
// import { XMTable } from '@/components';
// import college from '@/common/lottie/college.json';
// import moment from "moment";
import "./NewUsersManagePage.less";
// const { Search } = Input;
const { TabPane } = Tabs;
// const { DirectoryTree } = Tree;
function UserManagePage() {
const [currentTab, setCurrentTab] = useState("department");
......@@ -38,109 +27,7 @@ function UserManagePage() {
current: 0,
size: 10,
});
// const columns = [
// {
// title: '学员',
// dataIndex: 'user',
// width:220,
// render: (val, record) => {
// return <span>{val}</span>
// }
// },
// {
// title: '真实姓名',
// dataIndex: 'nickname',
// width:'15%',
// render: (val,record) => {
// return <span>{val}</span>
// }
// },
// {
// title: '账号',
// dataIndex: 'account',
// width:'15%',
// render: (val,record) => {
// return <span>{val}</span>
// }
// },
// {
// title: '岗位',
// dataIndex: 'post',
// render: (val, record) => {
// return <span>{val}</span>
// }
// },
// {
// title: '手机号',
// dataIndex: 'phone',
// render: (val, record) => {
// return <span>{val}</span>;
// }
// },
// {
// title: '注册时间',
// dataIndex: 'registerTime',
// render: (val, record) => {
// return <span>{val}</span>;
// }
// },
// {
// title: "操作",
// key: "operate",
// dataIndex: "operate",
// render: (val, record) => {
// return (
// <div className="operate">
// <div
// className="operate__item"
// >
// 删除
// </div>
// </div>
// )
// }
// },
// ];
// const treeData = [
// {
// title: 'parent 1',
// key: '0-0',
// children: [
// {
// title: 'parent 1-0',
// key: '0-0-0',
// disabled: true,
// children: [
// {
// title: 'leaf',
// key: '0-0-0-0',
// disableCheckbox: true,
// },
// {
// title: 'leaf',
// key: '0-0-0-1',
// },
// ],
// },
// {
// title: 'parent 1-1',
// key: '0-0-1',
// children: [{ title: <span style={{ color: '#1890ff' }}>sss</span>, key: '0-0-1-0' }],
// },
// ],
// },
// ];
// const onSelect = (selectedKeys, info) => {
// console.log('selected', selectedKeys, info);
// };
// const onCheck = (checkedKeys, info) => {
// console.log('onCheck', checkedKeys, info);
// };
// useEffect(() => {
// }, [])
return (
......
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-22 15:31:05
* @Description: 学员管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import "./CustomGroupTabCon.less";
import { Button, Input, message } from "antd";
import LeftStructureTree from "./LeftStructureTree";
import AddOrEditPostGroupModal from "../modal/AddOrEditPostGroupModal";
import UserTable from "./UserTable";
import "./PostGroupTabCon.less";
const { Search } = Input;
function CustomGroupTabCon() {
const [addOrEditPostGroupShow, setAddOrEditPostGroupShow] = useState(false);
const [postGroupModalType, setPostGroupModalType] = useState(""); // 初始化弹框类型为岗位组
const [operatePostGroupModalType,setOperatePostGroupModalType] = useState(""); // 初始化弹框操作为添加操作
const [postGroupModalTitle,setPostGroupModalTitle] = useState("");
const [postGroupModalLable,setPostGroupModalLable] = useState("");
const [postGroupName, setPostGroupName] = useState("");
const [postGroupTreeData, setPostGroupTreeData] = useState([]);
function closeAddOrEditPostGroupModal() {
setAddOrEditPostGroupShow(false);
}
//添加岗位组/岗位
function addPostGroup(type) {
if (postGroupTreeData.length === 10) {
message.error("岗位组数量已达10个上限");
return;
}
setAddOrEditPostGroupShow(true);
setOperatePostGroupModalType("add");
if(type==='postGroup'){
setPostGroupModalType('parentGroup'); //parentGroup 代表岗位组
setPostGroupModalTitle('添加分组集合');
setPostGroupModalLable('分组集合');
}else{
setPostGroupModalType('sub');
setPostGroupModalTitle('添加分组'); // sub代表岗位
setPostGroupModalLable('分组');
}
}
//编辑岗位组/岗位
function editPostGroup(record){
setAddOrEditPostGroupShow(true);
setOperatePostGroupModalType("edit");
//level为0的时候编辑的是岗位组 大于0的时候
if(record.level===0){
setPostGroupModalType('parentGroup');
setPostGroupModalTitle('编辑分组集合');
setPostGroupModalLable('分组集合');
}else{
setPostGroupModalType('sub');
setPostGroupModalTitle('编辑分组');
setPostGroupModalLable('分组');
}
}
function getPostGroupTreeData(){
}
function confirmAddOrEditPostGroup() {
getPostGroupTreeData()
}
function delPostGroup(record){
let title = '确认删除该分组集合吗?';
let content= '删除后,该分组集合下的岗位及也将全部删除。';
if(record.level>0){
title = '确认删除该分组吗?';
content = '删除后,不可恢复';
}
Modal.confirm({
title,
content,
icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk: () => {
},
});
}
return (
<div className="custom-group-tab-con">
<div className="post-group-tab-con">
<div className="organization">
<div className="search-con">
<Search
placeholder="搜索部门/学员姓名"
className="search search-input"
style={{ width: 245 }}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
</div>
<div className="operate">
<Button
className="add-btn"
onClick={() => {
addPostGroup('postGroup');
}}
>
添加自定义分组
</Button>
</div>
<LeftStructureTree
treeData={postGroupTreeData}
treeType={"customGroupTab"}
editPostGroup={(record)=>editPostGroup(record)}
addPostGroup={(record)=>addPostGroup('post')}
/>
</div>
<div className="table-con">
<div className="operate-area">
<Button type="primary" className="add-user-btn">
添加学员
</Button>
<Button className="del-user-btn">移出学员</Button>
</div>
<UserTable />
</div>
{addOrEditPostGroupShow && (
<AddOrEditPostGroupModal
onClose={() => {
closeAddOrEditPostGroupModal();
}}
onConfirm={() => {
confirmAddOrEditPostGroup();
}}
title={postGroupModalTitle}
modalType={postGroupModalType}
modalOperateType={operatePostGroupModalType}
postGroupName={postGroupName}
postGroupTreeData={postGroupTreeData}
label={postGroupModalLable}
/>
)}
</div>
);
}
export default withRouter(CustomGroupTabCon);
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import {Button,Input} from "antd";
import NewChooseMembersModal from "@/modules/college-manage/modal/NewChooseMembersModal";
import LeftStructureTree from './LeftStructureTree';
import UserTable from './UserTable'
import "./DepartMentTabCon.less";
const { Search } = Input;
function DepartMentTabCon() {
const [chooseMembersModalVisible,setChooseMembersModalVisible] = useState(false);
function closeChooseMembersModal(){
setChooseMembersModalVisible(false);
}
return (
<div className="department-tab-con">
......@@ -19,11 +25,11 @@ function DepartMentTabCon() {
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
</div>
<LeftStructureTree/>
<LeftStructureTree treeType={'departMentTab'}/>
</div>
<div className="table-con">
<div className="operate-area">
<Button type="primary" className="add-user-btn">添加学员</Button>
<Button type="primary" className="add-user-btn" onClick={()=>{setChooseMembersModalVisible(true)}}>添加学员</Button>
<Button className="del-user-btn">删除学员</Button>
<Button className="update-user-btn">更新列表数据</Button>
<span className="origin-text">数据来源企业微信通讯录</span>
......@@ -31,6 +37,7 @@ function DepartMentTabCon() {
</div>
<UserTable/>
</div>
<NewChooseMembersModal visible={chooseMembersModalVisible} type="USER" close={()=>{closeChooseMembersModal()}}/>
</div>
);
}
......
......@@ -6,7 +6,8 @@ import "./LeftStructureTree.less";
const { Search } = Input;
const { DirectoryTree } = Tree;
function LeftStructureTree() {
function LeftStructureTree(props) {
const {treeType} = props
const treeData = [
{
title: "parent 1",
......@@ -44,16 +45,30 @@ function LeftStructureTree() {
(document.getElementById("left-box") &&
document.getElementById("left-box").style.width) ||
"304px";
const moreOperate = (record) => (
const moreOpenGroupOperate = (record) => (
<Menu>
<Menu.Item key="rename">
<span onClick={() => this.renameCategory(record)}>重命名</span>
<Menu.Item key="edit">
<span onClick={()=>{props.editPostGroup(record)}}>编辑</span>
</Menu.Item>
<Menu.Item key="add" >
<span onClick={()=>{props.addPostGroup()}}>
{props.treeType==='postGrouptab' &&
<span>新建岗位</span>
}
{props.treeType==='customGroupTab' &&
<span>新建分组</span>
}
</span>
</Menu.Item>
<Menu.Item key="del">
<span onClick={() => this.delCategory(record)}>删除</span>
<span onClick={()=>{props.delPostGroup(record)}}>删除</span>
</Menu.Item>
</Menu>
);
return (
<div className="left-structure-tree">
<div className="tree-con">
......@@ -113,11 +128,13 @@ function LeftStructureTree() {
{nodeData.title}
</div>
<div className="item-count">(0)</div>
{nodeData.key !== "null" && (
<Dropdown overlay={moreOperate(nodeData)}>
<div className="item-more icon iconfont">&#xe927;</div>
</Dropdown>
)}
{ (treeType==='postGrouptab' || treeType=== 'customGroupTab') && (
<Dropdown overlay={moreOpenGroupOperate(nodeData)}>
<div className="item-more icon iconfont">&#xe927;</div>
</Dropdown>
)}
</div>
);
}}
......
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import { Tree, Input, Dropdown, Menu } from "antd";
import "./MemberTree.less";
const { Search } = Input;
const { DirectoryTree } = Tree;
function MemberTree(props) {
const {treeType} = props
const treeData = [
{
title: "小麦助教",
key: "0-0",
children: [
{
title: "技术部",
key: "0-0-0",
children: [
{
title: "leaf",
key: "0-0-0-0",
},
{
title: "leaf",
key: "0-0-0-1",
},
],
},
{
title: "商务部",
key: "0-0-1",
children: [
{
title:'aaa',
key: "0-0-1-0",
},
],
},
],
},
];
return (
<div className="member-tree">
<div className="tree-con">
<DirectoryTree
defaultExpandAll
checkable
showIcon={false}
treeData={treeData}
titleRender={(nodeData) => {
return (
<div
className="node-title-con"
>
{/* <span className="icon iconfont title-icon">&#xe604;</span> */}
<span className="icon iconfont title-icon">&#xe603;</span>
<span>{nodeData.title}</span>
</div>
);
}}
/>
</div>
</div>
);
}
export default withRouter(MemberTree);
.member-tree{
.node-title-con{
color:#666;
font-size:14px;
.title-icon{
margin-right:8px;
}
}
}
\ No newline at end of file
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import {Button,Input,message} from "antd";
import LeftStructureTree from './LeftStructureTree';
import AddOrEditPostGroupModal from '../modal/AddOrEditPostGroupModal'
import UserTable from './UserTable'
import { Button, Input, message,Modal} from "antd";
import LeftStructureTree from "./LeftStructureTree";
import AddOrEditPostGroupModal from "../modal/AddOrEditPostGroupModal";
import UserTable from "./UserTable";
import "./PostGroupTabCon.less";
const { Search } = Input;
function PostGroupTabCon() {
const [addOrEditPostGroupShow,setAddOrEditPostGroupShow] = useState(false);
const [postGroupModalType,setPostGroupModalType] = useState('add');
const [postGroupName,setPostGroupName] = useState('');
const [postGroupTreeData,setPostGroupTreeData] = useState([]);
function closeAddOrEditPostGroupModal(){
const [addOrEditPostGroupShow, setAddOrEditPostGroupShow] = useState(false);
const [postGroupModalType, setPostGroupModalType] = useState(""); // 初始化弹框类型为岗位组
const [operatePostGroupModalType,setOperatePostGroupModalType] = useState(""); // 初始化弹框操作为添加操作
const [postGroupModalTitle,setPostGroupModalTitle] = useState("");
const [postGroupModalLable,setPostGroupModalLable] = useState("");
const [postGroupName, setPostGroupName] = useState("");
const [postGroupTreeData, setPostGroupTreeData] = useState([]);
function closeAddOrEditPostGroupModal() {
setAddOrEditPostGroupShow(false);
}
function addPostGroup(){
if(postGroupTreeData.length===10){
message.error('岗位组数量已达10个上限')
//添加岗位组/岗位
function addPostGroup(type) {
if (postGroupTreeData.length === 10) {
message.error("岗位组数量已达10个上限");
return;
}
setAddOrEditPostGroupShow(true);
setPostGroupModalType('add');
setOperatePostGroupModalType("add");
if(type==='postGroup'){
setPostGroupModalType('parentGroup'); //parentGroup 代表岗位组
setPostGroupModalTitle('添加岗位组');
setPostGroupModalLable('岗位组');
}else{
setPostGroupModalType('sub');
setPostGroupModalTitle('添加岗位'); // sub代表岗位
setPostGroupModalLable('岗位');
}
}
//编辑岗位组/岗位
function editPostGroup(record){
setAddOrEditPostGroupShow(true);
setOperatePostGroupModalType("edit");
//level为0的时候编辑的是岗位组 大于0的时候
if(record.level===0){
setPostGroupModalType('parentGroup');
setPostGroupModalTitle('编辑岗位组');
setPostGroupModalLable('岗位组');
}else{
setPostGroupModalType('sub');
setPostGroupModalTitle('编辑岗位');
setPostGroupModalLable('岗位');
}
}
function confirmAddOrEditPostGroup(){
function delPostGroup(record){
let title = '确认删除该岗位组吗?';
let content= '删除后,该岗位组下的岗位及也将全部删除。';
if(record.level>0){
title = '确认删除该岗位吗?';
content = '删除后,不可恢复';
}
Modal.confirm({
title,
content,
icon: <span className='icon iconfont default-confirm-icon'>&#xe6f4;</span>,
okText: '确定',
okType: 'danger',
cancelText: '取消',
onOk: () => {
},
});
}
function getPostGroupTreeData(){
}
function confirmAddOrEditPostGroup() {
getPostGroupTreeData()
}
return (
<div className="post-group-tab-con">
<div className="organization">
<div className="search-con">
<Search
placeholder="搜索部门/学员姓名"
className="search search-input"
style={{ width: 245 }}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
</div>
<div className="operate">
<Button className="add-btn" onClick={()=>{addPostGroup()}}>添加岗位组</Button>
</div>
<LeftStructureTree treeData={postGroupTreeData} />
<div className="organization">
<div className="search-con">
<Search
placeholder="搜索部门/学员姓名"
className="search search-input"
style={{ width: 245 }}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
</div>
<div className="operate">
<Button
className="add-btn"
onClick={() => {
addPostGroup('postGroup');
}}
>
添加岗位组
</Button>
</div>
<div className="table-con">
<div className="operate-area">
<Button type="primary" className="add-user-btn">添加学员</Button>
<Button className="del-user-btn">删除学员</Button>
<Button className="update-user-btn">更新列表数据</Button>
<span className="origin-text">数据来源企业微信通讯录</span>
<span className="view-text">查看数据更新说明</span>
</div>
<UserTable/>
<LeftStructureTree
treeData={postGroupTreeData}
treeType={"postGrouptab"}
editPostGroup={(record)=>editPostGroup(record)}
addPostGroup={(record)=>addPostGroup('post')}
delPostGroup={(record)=>delPostGroup('record')}
/>
</div>
<div className="table-con">
<div className="operate-area">
<Button type="primary" className="add-user-btn">
添加学员
</Button>
<Button className="del-user-btn">移出学员</Button>
</div>
{addOrEditPostGroupShow &&
<AddOrEditPostGroupModal onClose={()=>{closeAddOrEditPostGroupModal()}} onConfirm={()=>{confirmAddOrEditPostGroup()}} modalType={postGroupModalType} postGroupName={postGroupName} postGroupTreeData={postGroupTreeData}/>
}
<UserTable />
</div>
{addOrEditPostGroupShow && (
<AddOrEditPostGroupModal
onClose={() => {
closeAddOrEditPostGroupModal();
}}
onConfirm={() => {
confirmAddOrEditPostGroup();
}}
title={postGroupModalTitle}
modalType={postGroupModalType}
modalOperateType={operatePostGroupModalType}
postGroupName={postGroupName}
postGroupTreeData={postGroupTreeData}
label={postGroupModalLable}
/>
)}
</div>
);
}
export default withRouter(PostGroupTabCon);
\ No newline at end of file
export default withRouter(PostGroupTabCon);
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-11-27 16:21:49
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-22 18:27:19
* @LastEditTime: 2021-07-23 14:56:55
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -16,6 +16,7 @@ import './AddOrEditPostGroupModal.less'
function AddOrEditPostGroupModal(props) {
const [nameErrorMsg,setNameErrorMsg] = useState('');
const [validateStatus,setValidateStatus] = useState('success');
const [postGroupName,setPostGroupName] = useState('');
useEffect(() => {
});
......@@ -45,7 +46,7 @@ function AddOrEditPostGroupModal(props) {
return (
<Modal
visible={true}
title={props.modalType === "add" ? '添加岗位组' : '编辑岗位组' }
title={props.title}
className="add-edit-post-group-modal"
onCancel={props.onClose}
width={448}
......@@ -69,14 +70,14 @@ function AddOrEditPostGroupModal(props) {
<Form
labelCol={ {span:5 }}
>
<Form.Item
label="岗位组名称"
name="岗位组名称"
<Form.Item
// label={`${props.label}名称`}
name={`${props.label}名称`}
rules={[{ required: true}]}
validateStatus={validateStatus}
help={nameErrorMsg}
>
<Input type="text" placeholder="请输入岗位组名称ga(8个字以内)" maxLength={8} style={{ width: 240 }}
<Input type="text" placeholder={`请输入${props.label}名称(8个字以内)`} maxLength={8} style={{ width: 348 }}
defaultValue={props.postGroupName}
onChange={(e) => {
changePostGroupName(e);
......
/*
* @Author: wanghaofeng
* @date: 2020/11/14 17:42
* @Description:权限管理-选择成员弹窗
*/
import React from 'react';
import { Modal, Input, message, Tooltip } from 'antd';
import { XMTable } from '@/components';
import college from '@/common/lottie/college.json';
import Service from '@/common/js/service';
import User from '@/common/js/user'
import SetEmployeeModal from "./SetEmployeeModal";
import search from '../../lottie/search/data.json';
import MemberTree from '../components/MemberTree'
import './ChooseMembersModal.less';
import _ from 'underscore';
const { Search } = Input;
class NewChooseMembersModal extends React.Component {
constructor(props) {
super(props);
this.state = {
selectUserList:[]
}
}
componentDidMount() {
}
handleClose = ()=>{
this.props.close();
}
render() {
const { type,visible} = this.props;
const {selectUserList} = this.state;
const title = type === 'USER' ? '添加员工' : '添加学员';
return (
<div>
{/* 添加学员页面 */}
<Modal
className="choose-member-modal"
visible={visible}
onCancel={() => this.handleClose()}
onOk={() => {
}}
okText={type === 'USER' ? '下一步' : '确定'}
title={title}
width={680}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
>
<div className='member-container'>
<div className='container-left'>
<div className='container-left-body'>
<Search
placeholder='搜索成员'
className='search search-input'
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
<div className='container-left-body-table'>
<MemberTree/>
</div>
</div>
</div>
{/* 已选择的成员列表 */}
<div className='container-right'>
<span className='span-left'>已选择{type === 'USER' ? '员工' : '学员'}</span>
<div className='span-right' onClick={() => this.clearAllUser()}>
<span className={ (selectUserList.length > 0) ? 'span-right-l' : null }>清空</span>
</div>
<div className='container-right-body'>
</div>
</div>
</div>
</Modal>
</div>
)
}
}
export default NewChooseMembersModal;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment