Skip to content

X
xiaomai-cloud-class-web
Commit 8120a9da by maolipeng
Options

feat:基本调试完成

parent aa618b9d
Showing with 124 additions and 104 deletions
src/modules/college-manage/EmployeeManage.tsx
...@@ -15,6 +15,7 @@ import Service from '@/common/js/service'; ...@@ -15,6 +15,7 @@ import Service from '@/common/js/service';
import StoreService from "@/domains/store-domain/storeService"; import StoreService from "@/domains/store-domain/storeService";
import EmployeeAddOrEditModal from "../store-manage/EmployeeAddOrEditModal"; import EmployeeAddOrEditModal from "../store-manage/EmployeeAddOrEditModal";
import User from "@/common/js/user"; import User from "@/common/js/user";
import LimitTip from "./LimitTip";
import "./EmployeeManage.less"; import "./EmployeeManage.less";
import ChooseMembersModal from "./modal/ChooseMembersModal"; import ChooseMembersModal from "./modal/ChooseMembersModal";
...@@ -363,6 +364,7 @@ function EmployeeManage() { ...@@ -363,6 +364,7 @@ function EmployeeManage() {
</Button> </Button>
} }
</div> </div>
<LimitTip type="员工" total={total} tip={()=>{return (<div>数据为当前学院的员工数，若员工存在多个学院，企业人数只统计为1人</div>)}}/>
<div className="box-body"> <div className="box-body">
<Table <Table
size={"middle"} size={"middle"}
......
src/modules/college-manage/LimitTip.less 0 → 100644
.limit-tip {
height: 32px;
background: #E9EFFF;
border-radius: 2px;
margin-bottom: 13px;
.always {
display: inline-block;
font-size: 14px;
line-height: 32px;
font-weight: 400;
color: #666666;
margin-left: 16px;
.renew-text {
display: inline-block;
color: #2966FF;
cursor: pointer;
.renew-popover {
display: none;
position: absolute;
z-index: 1000;
width: 276px;
height: 294px;
transform: translate(-98px,13px);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
background-color: white;
background-image: url(https://image.xiaomaiketang.com/xm/CZ4a752jzi.png);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 22px;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
.popover-arrow {
position: absolute;
display: block;
width: 8.48528137px;
height: 8.48528137px;
background: 0 0;
border-style: solid;
border-width: 4.24264069px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
top: -4px;
border-top-color: #fff;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: #fff;
box-shadow: -2px -2px 5px #0000000f;
}
.qrcode {
width: 182px;
height: 204px;
background-color: white;
margin: 28px auto 16px auto;
img {
width: 150px;
height: 150px;
margin: 16px 16px 8px 16px;
}
}
}
&:hover .renew-popover {
display: block;
}
}
}
}
\ No newline at end of file
src/modules/college-manage/LimitTip.tsx 0 → 100644
import React, { useEffect, useState } from "react";
import BaseService from "@/domains/basic-domain/baseService";
import { Tooltip } from "antd"
import "./LimitTip.less"
export default function LimitTip(props:{total:number,type:string,tip:() => React.ReactNode}) {
const [isOver, setIsOver] = useState(false)
const [limitUser, setLimitUser] = useState(0)
useEffect(()=> {
BaseService.getLesseeVersionMsg()
.then(res=> {
setIsOver(res.result.surplusUserNum === 0 || res.result.whetherReachUserNum)
setLimitUser(res.result.userNum)
})
},[])
return (
<div className="limit-tip">
<div className="always">本学院{props.type}共<span style={{color:"#333333",fontWeight:"bold"}}>{props.total}</span>人
<Tooltip overlayStyle={{maxWidth:"587px",width:"fit-content"}} placement="topLeft" arrowPointAtCenter title={props.tip}>
<span className="icon iconfont" style={{cursor:"pointer",marginLeft:"4px",color:"#bfbfbf"}}>&#59449;</span>
</Tooltip>
{
isOver ? (
<>
<div style={{marginLeft:"14px",display:"inline-block"}}>当前企业使用人数已达到上限 (<span style={{color:"#333333",fontWeight:"bold"}}>{limitUser}</span>人)，将无法添加新员工、新学员，如需增加人数限制，请联系小麦企学院服务平台。</div>
<div className="renew-text">立即续费<span className="icon iconfont" style={{fontSize:"10px"}}>&#59291;</span>
<div className="renew-popover">
<div className="popover-arrow"><span className="popover-arrow-content"></span></div>
<div className="qrcode">
<img src="https://cdn.xiaomai5.com/qixueyuankehu.png" alt=""></img>
<div className="des">微信/企业微信扫码续费</div>
</div>
<div className="phone"><svg style={{position:"relative",top:"2px",marginRight:"4px"}} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M512.651 3.78c-281.433 0-509.21 228.324-509.21 509.209 0 281.43 228.325 509.203 509.21 509.203 281.427 0 509.202-228.317 509.202-509.203 0.55-280.885-227.775-509.21-509.202-509.21z m198.205 743.553c-36.14 36.136-169.737 1.641-302.24-130.312-131.953-131.959-165.902-266.104-129.768-301.695 31.211-31.21 68.99-85.417 125.939-14.782 56.943 70.629 29.016 90.34-3.291 122.647-22.449 22.448 24.642 79.392 73.37 128.125 49.283 48.73 105.678 95.818 128.126 73.368 32.306-32.305 52.017-60.23 122.646-3.288 71.182 56.949 16.426 95.276-14.782 125.937z" p-id="4409" fill="#999999"></path></svg>
咨询电话：19157875632</div>
</div>
</div>
</>
) : ("")
}
</div>
</div>
)
}
\ No newline at end of file
src/modules/college-manage/UserManagePage.less
...@@ -17,75 +17,5 @@ ...@@ -17,75 +17,5 @@
margin-left: 4px; margin-left: 4px;
} }
} }
.limit-tip {
height: 32px;
background: #E9EFFF;
border-radius: 2px;
margin-bottom: 13px;
.always {
display: inline-block;
font-size: 14px;
line-height: 32px;
font-weight: 400;
color: #666666;
margin-left: 16px;
.renew-text {
display: inline-block;
color: #2966FF;
cursor: pointer;
.renew-popover {
display: none;
position: absolute;
z-index: 1000;
width: 276px;
height: 294px;
transform: translate(-98px,13px);
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
background-color: white;
background-image: url(https://image.xiaomaiketang.com/xm/CZ4a752jzi.png);
background-repeat: no-repeat;
background-size: cover;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #333333;
line-height: 22px;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.06);
.popover-arrow {
position: absolute;
display: block;
width: 8.48528137px;
height: 8.48528137px;
background: 0 0;
border-style: solid;
border-width: 4.24264069px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
top: -4px;
border-top-color: #fff;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: #fff;
box-shadow: -2px -2px 5px #0000000f;
}
.qrcode {
width: 182px;
height: 204px;
background-color: white;
margin: 28px auto 16px auto;
img {
width: 150px;
height: 150px;
margin: 16px 16px 8px 16px;
}
}
}
&:hover .renew-popover {
display: block;
}
}
}
}
} }
\ No newline at end of file
src/modules/college-manage/UserManagePage.tsx
...@@ -11,10 +11,11 @@ import React, { useEffect, useState } from "react"; ...@@ -11,10 +11,11 @@ import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import _ from "underscore"; import _ from "underscore";
import { PageControl } from "@/components"; import { PageControl } from "@/components";
import { Table, Input, DatePicker, Select, Button, message, Tooltip } from "antd"; import { Table, Input, DatePicker, Select, Button, message } from "antd";
import StoreService from "@/domains/store-domain/storeService"; import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user"; import User from "@/common/js/user";
import ChooseMembersModal from "./modal/ChooseMembersModal"; import ChooseMembersModal from "./modal/ChooseMembersModal";
import LimitTip from "./LimitTip"
import "./UserManagePage.less"; import "./UserManagePage.less";
import moment from "moment"; import moment from "moment";
...@@ -24,38 +25,7 @@ const { RangePicker } = DatePicker; ...@@ -24,38 +25,7 @@ const { RangePicker } = DatePicker;
declare var window: any; declare var window: any;
function LimitTip(props:{total:number,uplimit?:number}) {
const [isOver, setIsOver] = useState(true)
return (
<div className="limit-tip">
<div className="always">本学院学员共<span style={{color:"#333333",fontWeight:"bold"}}>{props.total}</span>人
<Tooltip overlayStyle={{maxWidth:"587px",width:"587px"}} placement="topLeft" arrowPointAtCenter title={()=>{ return (<div><div>1、数据为当前学院的员工数，若学员存在多个学院，企业人数只统计为1人；</div><div>2、若一个学员既用「企业微信」登录学习又用「微信」登录学习，企业人数将统计为2人。</div></div>)}}>
<span className="icon iconfont" style={{cursor:"pointer",marginLeft:"4px",color:"#bfbfbf"}}>&#59449;</span>
</Tooltip>
{
isOver ? (
<>
<div style={{marginLeft:"14px",display:"inline-block"}}>当前企业使用人数已达到上限 (<span style={{color:"#333333",fontWeight:"bold"}}>{props.uplimit}</span>人)，将无法添加新员工、新学员，如需增加人数限制，请联系小麦企学院服务平台。</div>
<div className="renew-text">立即续费<span className="icon iconfont" style={{fontSize:"10px"}}>&#59291;</span>
<div className="renew-popover">
<div className="popover-arrow"><span className="popover-arrow-content"></span></div>
<div className="qrcode">
<img src="https://cdn.xiaomai5.com/qixueyuankehu.png" alt=""></img>
<div className="des">微信/企业微信扫码续费</div>
</div>
<div className="phone"><svg style={{position:"relative",top:"2px",marginRight:"4px"}} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M512.651 3.78c-281.433 0-509.21 228.324-509.21 509.209 0 281.43 228.325 509.203 509.21 509.203 281.427 0 509.202-228.317 509.202-509.203 0.55-280.885-227.775-509.21-509.202-509.21z m198.205 743.553c-36.14 36.136-169.737 1.641-302.24-130.312-131.953-131.959-165.902-266.104-129.768-301.695 31.211-31.21 68.99-85.417 125.939-14.782 56.943 70.629 29.016 90.34-3.291 122.647-22.449 22.448 24.642 79.392 73.37 128.125 49.283 48.73 105.678 95.818 128.126 73.368 32.306-32.305 52.017-60.23 122.646-3.288 71.182 56.949 16.426 95.276-14.782 125.937z" p-id="4409" fill="#999999"></path></svg>
咨询电话：19157875632</div>
</div>
</div>
</>
) : ("")
}
</div>
</div>
)
}
function UserManagePage() { function UserManagePage() {
const [userList, setUserList] = useState([]); const [userList, setUserList] = useState([]);
...@@ -230,7 +200,7 @@ function UserManagePage() { ...@@ -230,7 +200,7 @@ function UserManagePage() {
}} }}
>添加学员</Button> >添加学员</Button>
} }
<LimitTip total={total}/> <LimitTip type="学员" total={total} tip={()=>{ return (<div><div>1、数据为当前学院的员工数，若学员存在多个学院，企业人数只统计为1人；</div><div>2、若一个学员既用「企业微信」登录学习又用「微信」登录学习，企业人数将统计为2人。</div></div>)}}/>
<div className="box-body"> <div className="box-body">
<Table <Table
size={"middle"} size={"middle"}
......
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