Skip to content

X
xiaomai-cloud-class-web
Commit e36d5075 by zhangleyuan
Options

feat:处理岗位组的的创建

parent fe6dbb79
Showing with 776 additions and 11 deletions
src/common/less/icon-font.less
@font-face { @font-face {
font-family: 'iconfont'; /* Project id 2223403 */ font-family: 'iconfont'; /* Project id 2223403 */
src: url('//at.alicdn.com/t/font_2223403_oe5p510553.woff2?t=1624259078391') format('woff2'), src: url('//at.alicdn.com/t/font_2223403_n9xskhzzak.woff2?t=1625661501663') format('woff2'),
url('//at.alicdn.com/t/font_2223403_oe5p510553.woff?t=1624259078391') format('woff'), url('//at.alicdn.com/t/font_2223403_n9xskhzzak.woff?t=1625661501663') format('woff'),
url('//at.alicdn.com/t/font_2223403_oe5p510553.ttf?t=1624259078391') format('truetype'); url('//at.alicdn.com/t/font_2223403_n9xskhzzak.ttf?t=1625661501663') format('truetype');
} }
.iconfont { .iconfont {
font-family: 'iconfont' !important; font-family: 'iconfont' !important;
......
src/index.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-24 12:20:57 * @Date: 2020-08-24 12:20:57
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-19 15:48:51 * @LastEditTime: 2021-07-22 16:42:31
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
--> -->
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 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="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_oe5p510553.css" /> <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_n9xskhzzak.css" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
......
src/modules/college-manage/NewUsersManagePage.jsx 0 → 100644
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-22 15:12:48
* @Description: 学员管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
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");
const [courseList,setCourseList] = useState([]);
const [total, setTotal] = useState(0);
const [query, setQuery] = useState({
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 (
<div className="page new-user-manage-page">
<div className="content-header">学员管理</div>
<div className="box">
<div className="tab-box">
<Tabs
onChange={(key) => {
setCurrentTab(key);
}}
activeKey={currentTab}
>
<TabPane key="department" tab="部门"></TabPane>
<TabPane key="postGroup" tab="岗位组"></TabPane>
<TabPane key="customGroup" tab="自定义分组"></TabPane>
</Tabs>
</div>
<div className="box-body tab-con">
{currentTab=== 'department' &&
<DepartMentTabCon/>
}
{currentTab=== 'postGroup' &&
<PostGroupTabCon/>
}
{currentTab=== 'customGroup' &&
<CustomGroupTabCon/>
}
</div>
</div>
</div>
);
}
export default withRouter(UserManagePage);
src/modules/college-manage/components/CustomGroupTabCon.jsx 0 → 100644
/*
* @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";
function CustomGroupTabCon() {
return (
<div className="custom-group-tab-con">
</div>
);
}
export default withRouter(CustomGroupTabCon);
src/modules/college-manage/components/DepartMentTabCon.jsx 0 → 100644
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import {Button,Input} from "antd";
import LeftStructureTree from './LeftStructureTree';
import UserTable from './UserTable'
import "./DepartMentTabCon.less";
const { Search } = Input;
function DepartMentTabCon() {
return (
<div className="department-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>
<LeftStructureTree/>
</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/>
</div>
</div>
);
}
export default withRouter(DepartMentTabCon);
\ No newline at end of file
src/modules/college-manage/components/DepartMentTabCon.less 0 → 100644
.department-tab-con{
display: flex;
.table-con{
margin-left:16px;
flex:1;
.operate-area{
margin-bottom:16px;
.add-user-btn{
margin-right:8px;
}
.del-user-btn{
margin-right:8px;
}
.update-user-btn{
margin-right:8px;
}
.origin-text{
font-size:14px;
color:#999;
}
.view-text{
font-size:14px;
color:#5289FA;
}
}
}
}
\ No newline at end of file
src/modules/college-manage/components/LeftStructureTree.jsx 0 → 100644
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import { Tree, Input, Dropdown, Menu } from "antd";
import "./LeftStructureTree.less";
const { Search } = Input;
const { DirectoryTree } = Tree;
function LeftStructureTree() {
const treeData = [
{
title: "parent 1",
key: "0-0",
children: [
{
title: "parent 1-0",
key: "0-0-0",
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:'aaa',
key: "0-0-1-0",
},
],
},
],
},
];
const leftBoxWidth =
(document.getElementById("left-box") &&
document.getElementById("left-box").style.width) ||
"304px";
const moreOperate = (record) => (
<Menu>
<Menu.Item key="rename">
<span onClick={() => this.renameCategory(record)}>重命名</span>
</Menu.Item>
<Menu.Item key="del">
<span onClick={() => this.delCategory(record)}>删除</span>
</Menu.Item>
</Menu>
);
return (
<div className="left-structure-tree">
<div className="tree-con">
<DirectoryTree
defaultExpandAll
showIcon={false}
treeData={treeData}
titleRender={(nodeData) => {
return (
<div
className="node-title-div"
onMouseOver={(e) => {
if (nodeData.key === "null") return;
let moreDiv = e.currentTarget.getElementsByClassName(
"item-more"
)[0];
let countDiv = e.currentTarget.getElementsByClassName(
"item-count"
)[0];
if (moreDiv) {
moreDiv.style.visibility = "visible";
}
if (countDiv) {
countDiv.style.visibility = "hidden";
}
}}
onMouseOut={(e) => {
if (nodeData.key === "null") return;
let moreDiv = e.currentTarget.getElementsByClassName(
"item-more"
)[0];
let countDiv = e.currentTarget.getElementsByClassName(
"item-count"
)[0];
if (moreDiv) {
moreDiv.style.visibility = "hidden";
}
if (countDiv) {
countDiv.style.visibility = "visible";
}
}}
>
<div className="item-icon">
<img src="https://image.xiaomaiketang.com/xm/iY4zdsEJb2.png" />
</div>
<div
className="item-title"
style={{
width:
leftBoxWidth <= "240px"
? "35%"
: leftBoxWidth <= "304px"
? "60%"
: "78%",
}}
>
{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>
)}
</div>
);
}}
/>
</div>
</div>
);
}
export default withRouter(LeftStructureTree);
src/modules/college-manage/components/LeftStructureTree.less 0 → 100644
.left-structure-tree {
margin-right: 24px;
overflow: scroll;
height: calc(~'100vh - 260px');
&::-webkit-scrollbar {
display: none;
}
.node-title-div {
display: flex;
justify-content: space-between;
white-space: nowrap;
.item-icon {
img {
width: 16px;
height: 16px;
}
}
.item-title {
position: absolute;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 55%;
left: 28px;
}
.item-more {
visibility: hidden;
position: absolute;
right: 8px;
text-align: right;
}
.item-count {
visibility: visible;
position: absolute;
right: 12px;
text-align: right;
}
}
// 修改树样式
.ant-tree .ant-tree-treenode {
padding: 10px 0 14px 0;
}
.ant-tree.ant-tree-directory {
.ant-tree-node-selected{
color:#2966FF !important;
}
.ant-tree-treenode-selected:hover::before,
.ant-tree-treenode-selected::before {
background: #f3f6fa;
}
.ant-tree-treenode-selected .ant-tree-switcher {
color: #666666;
}
.ant-tree-treenode .ant-tree-node-content-wrapper {
color: #666666;
}
}
}
\ No newline at end of file
src/modules/college-manage/components/PostGroupTabCon.jsx 0 → 100644
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 "./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(){
setAddOrEditPostGroupShow(false);
}
function addPostGroup(){
if(postGroupTreeData.length===10){
message.error('岗位组数量已达10个上限')
return;
}
setAddOrEditPostGroupShow(true);
setPostGroupModalType('add');
}
function confirmAddOrEditPostGroup(){
}
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>
<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/>
</div>
{addOrEditPostGroupShow &&
<AddOrEditPostGroupModal onClose={()=>{closeAddOrEditPostGroupModal()}} onConfirm={()=>{confirmAddOrEditPostGroup()}} modalType={postGroupModalType} postGroupName={postGroupName} postGroupTreeData={postGroupTreeData}/>
}
</div>
);
}
export default withRouter(PostGroupTabCon);
\ No newline at end of file
src/modules/college-manage/components/PostGroupTabCon.less 0 → 100644
.post-group-tab-con {
display: flex;
.organization {
.search-con{
margin-bottom: 10px;
}
.operate {
margin-bottom:16px;
.add-btn {
width: 230px;
height:32px;
}
}
}
.table-con {
margin-left: 16px;
flex: 1;
.operate-area {
margin-bottom: 16px;
.add-user-btn {
margin-right: 8px;
}
.del-user-btn {
margin-right: 8px;
}
.update-user-btn {
margin-right: 8px;
}
.origin-text {
font-size: 14px;
color: #999;
}
.view-text {
font-size: 14px;
color: #5289fa;
}
}
}
}
src/modules/college-manage/components/UserTable.jsx 0 → 100644
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import { XMTable,PageControl} from '@/components';
import college from '@/common/lottie/college.json';
import "./UserTable.less";
function UserTable() {
const [courseList,setCourseList] = useState([]);
const [total, setTotal] = useState(0);
const [query, setQuery] = useState({
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>
)
}
},
];
return (
<div className="user-table">
<XMTable
renderEmpty={{
image: college,
description: '暂无数据',
}}
bordered
size='middle'
pagination={false}
columns={columns}
scroll={{ x: 1300 }}
dataSource={courseList}
/>
<div className='box-footer'>
<PageControl
current={query.current}
pageSize={query.size}
total={total}
toPage={(page) => {
const queryStates = _.clone(query);
queryStates.current = page;
setQuery(queryStates);
}}
/>
</div>
</div>
);
}
export default withRouter(UserTable);
\ No newline at end of file
src/modules/college-manage/components/UserTable.less 0 → 100644
.user-table{
}
\ No newline at end of file
src/modules/college-manage/modal/AddOrEditPostGroupModal.jsx 0 → 100644
/*
* @Author: wufan
* @Date: 2020-11-27 16:21:49
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-22 18:27:19
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useState, useEffect } from "react";
import { Modal,Form,Input,Button,message} from "antd";
import User from '@/common/js/user';
import StoreService from "@/domains/store-domain/storeService";
import './AddOrEditPostGroupModal.less'
function AddOrEditPostGroupModal(props) {
const [nameErrorMsg,setNameErrorMsg] = useState('');
const [validateStatus,setValidateStatus] = useState('success');
useEffect(() => {
});
function changePostGroupName(e){
setValidateStatus('success');
setNameErrorMsg('该岗位组已存在');
props.postGroupTreeData.map((item,index)=>{
if(item.name === e.target.value){
setValidateStatus('error');
setNameErrorMsg('')
}
return item;
})
setPostGroupName(e.target.value);
}
function handleConfirm(){
props.onConfirm();
}
function addCatalog(){
}
function editCatalog(){
}
return (
<Modal
visible={true}
title={props.modalType === "add" ? '添加岗位组' : '编辑岗位组' }
className="add-edit-post-group-modal"
onCancel={props.onClose}
width={448}
footer={[
<Button
id='cancel_allot_btn'
key="back" onClick={props.onClose}>取消</Button>,
<Button
id='confirm_allot_btn'
key="submit"
type="primary"
onClick={() => {
handleConfirm()
}}>
保存
</Button>
]}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
>
<Form
labelCol={ {span:5 }}
>
<Form.Item
label="岗位组名称"
name="岗位组名称"
rules={[{ required: true}]}
validateStatus={validateStatus}
help={nameErrorMsg}
>
<Input type="text" placeholder="请输入岗位组名称ga（8个字以内）" maxLength={8} style={{ width: 240 }}
defaultValue={props.postGroupName}
onChange={(e) => {
changePostGroupName(e);
}} />
</Form.Item>
</Form>
</Modal>
);
}
export default AddOrEditPostGroupModal;
src/modules/plan-manage/components/PlanList.jsx
/* /*
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:46:46 * @Date: 2021-02-20 16:46:46
* @LastEditors: wufan * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-16 11:29:13 * @LastEditTime: 2021-07-21 16:03:02
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
......
src/routes/config/mainRoutes.tsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-04-29 10:26:32 * @Date: 2020-04-29 10:26:32
* @LastEditors: wufan * @LastEditors: Please set LastEditors
* @LastEditTime: 2021-05-13 16:39:51 * @LastEditTime: 2021-07-21 16:40:07
* @Description: 内容线路由配置 * @Description: 内容线路由配置
*/ */
import Home from '@/modules/home/Home'; import Home from '@/modules/home/Home';
...@@ -10,7 +10,7 @@ import EmployeesManagePage from '@/modules/store-manage/EmployeesManagePage'; ...@@ -10,7 +10,7 @@ import EmployeesManagePage from '@/modules/store-manage/EmployeesManagePage';
import EmployeeManage from '@/modules/college-manage/EmployeeManage'; import EmployeeManage from '@/modules/college-manage/EmployeeManage';
import personalInfoPage from '@/modules/personalInfo'; import personalInfoPage from '@/modules/personalInfo';
import UserManagePage from '@/modules/store-manage/UserManagePage'; import UserManagePage from '@/modules/store-manage/UserManagePage';
import UserManage from '@/modules/college-manage/UserManagePage'; import UserManage from '@/modules/college-manage/NewUsersManagePage';
import StoreDecorationPage from '@/modules/store-manage/StoreDecorationPage'; import StoreDecorationPage from '@/modules/store-manage/StoreDecorationPage';
import CourseCatalogPage from '@/modules/store-manage/CourseCatalogPage'; import CourseCatalogPage from '@/modules/store-manage/CourseCatalogPage';
import LiveCoursePage from '@/modules/course-manage/LiveCoursePage'; import LiveCoursePage from '@/modules/course-manage/LiveCoursePage';
......
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