Skip to content

X
xiaomai-cloud-class-web
Commit 4eee1cdf by chenshu
Options

feat:完善各页面

parent c1c572c6
Showing with 240 additions and 74 deletions
src/modules/college-manage/EmployeeManage.tsx
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-07-09 14:03:09
* @Last Modified by: chenshu
* @Last Modified time: 2021-04-09 13:41:38
* @Last Modified time: 2021-04-10 12:10:35
* 学院管理-员工管理
*/
import React, { useEffect, useState } from "react";
......@@ -395,6 +395,7 @@ function EmployeeManage() {
isOpen={employeeModal}
type="USER"
handleChooseModal={(bool: any) => {
message.success('添加成功')
setEmployeeModal(false)
if (bool) {
getEmployeeList();
......
src/modules/college-manage/UserManagePage.tsx
......@@ -11,7 +11,7 @@ import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import { PageControl } from "@/components";
import { Table, Input, DatePicker, Select, Button } from "antd";
import { Table, Input, DatePicker, Select, Button, message } from "antd";
import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user";
import ChooseMembersModal from "./modal/ChooseMembersModal";
......@@ -95,6 +95,7 @@ function UserManagePage() {
isOpen={true}
type="CUSTOMER"
handleChooseModal={(bool: any) => {
message.success('添加成功')
setModel(null)
if (bool) {
getUserList();
......
src/modules/college-manage/modal/ChooseMembersModal.jsx
......@@ -5,7 +5,7 @@
*/
import React from 'react';
import { Modal, Input, Table, message } from 'antd';
import { Modal, Input, Table, message, Tooltip } from 'antd';
import Service from '@/common/js/service';
import User from '@/common/js/user'
import SetEmployeeModal from "./SetEmployeeModal";
......@@ -214,9 +214,9 @@ class ChooseMembersModal extends React.Component {
return (
<div className='avatar'>
<span className="icon iconfont avatar-icon">&#xe84a;</span>
<span className='userImg'>
{ name }
</span>
<Tooltip title={name}>
<span className='userImg'>{name}</span>
</Tooltip>
</div>
)
}
......@@ -238,9 +238,9 @@ class ChooseMembersModal extends React.Component {
return (
<div className='avatar'>
<span className="icon iconfont avatar-icon">&#xe84a;</span>
<span className='userImg'>
{ name }
</span>
<Tooltip title={name}>
<span className='userImg'>{name}</span>
</Tooltip>
</div>
)
}
......@@ -265,7 +265,7 @@ class ChooseMembersModal extends React.Component {
render() {
const { type } = this.props;
const { selectUserList, allUserList, searchKey, selectedRowKeys, openSetModal, isOpen } = this.state;
const title = '添加员工';
const title = type === 'USER' ? '添加员工' : '添加用户';
return (
<div>
{/* 添加学员页面 */}
......@@ -275,14 +275,18 @@ class ChooseMembersModal extends React.Component {
onCancel={this.handleClose}
onOk={() => {
if (_.isEmpty(selectUserList)) {
message.warning('请选择员工')
message.warning(type === 'USER' ? '请选择员工' : '请选择用户')
return null;
}
type === 'USER' ? this.setState({ openSetModal: true, isOpen: false }) : this.addCustomer();
}}
okText={type === 'USER' ? '下一步' : '确定'}
title={title}
width={680}
maskClosable={false}
okButtonProps={!_.isEmpty(selectUserList) ? {} : {
disabled: true
}}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
>
<div className='member-container'>
......@@ -321,7 +325,7 @@ class ChooseMembersModal extends React.Component {
</div>
{/* 已选择的成员列表 */}
<div className='container-right'>
<span className='span-left'>已选择员工</span>
<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>
......
src/modules/college-manage/modal/ChooseMembersModal.less
......@@ -62,6 +62,11 @@
color: #0081F0;
margin-right: 6px;
}
.userImg {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
......@@ -129,6 +134,11 @@
color: #0081F0;
margin-right: 6px;
}
.userImg {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.ant-table-tbody{
......
src/modules/college-manage/modal/SetEmployeeModal.jsx
import React from 'react';
import { Modal, Button, Radio } from 'antd';
import { Modal, Button, Radio, Tooltip } from 'antd';
import './SetEmployeeModal.less'
const RadioGroup = Radio.Group;
......@@ -65,7 +65,9 @@ export default class SetEmployeeModal extends React.Component {
}}
>
<span className="icon iconfont avatar-icon">&#xe84a;</span>
<span className='name'>{item.name}</span>
<Tooltip title={item.name}>
<span className='name'>{item.name}</span>
</Tooltip>
<span className="tag">{tagMap[item.roleCode]}</span>
</div>
))}
......
src/modules/college-manage/modal/SetEmployeeModal.less
......@@ -15,6 +15,7 @@
padding-left: 18px;
padding-right: 12px;
cursor: pointer;
display: flex;
&:hover {
background: #F3F6FA;
}
......@@ -27,6 +28,10 @@
.name {
color: #333;
line-height: 44px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: calc(100% - 62px);
}
.tag {
float: right;
......@@ -37,7 +42,8 @@
border-radius: 9px;
color: #FFB714;
margin-top: 13px;
font-size: 12px;
font-size: 12px;
flex-shrink: 0;
}
&.selected {
background: rgba(255, 183, 20, 0.1);
......
src/modules/root/CollegeManagePage.jsx
......@@ -3,6 +3,7 @@ import Service from "@/common/js/service";
import BaseService from "@/domains/basic-domain/baseService";
import User from "@/common/js/user";
import moment from 'moment';
import { Modal, message } from 'antd';
import './CollegeManagePage.less';
const roleMap = {
......@@ -18,16 +19,17 @@ export default class CollegeManagePage extends React.Component {
avatar: 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
name: '',
list: [],
enterpriseId: User.getEnterpriseId(),
};
}
componentDidMount() {
const enterpriseId = User.getEnterpriseId();
this.getStoreList(enterpriseId);
this.getEnterpriseUser(enterpriseId);
this.getStoreList();
this.getEnterpriseUser();
}
getEnterpriseUser(enterpriseId) {
getEnterpriseUser() {
const { enterpriseId } = this.state;
const params = {
enterpriseId,
userId: User.getUserId(),
......@@ -38,7 +40,8 @@ export default class CollegeManagePage extends React.Component {
});
}
getStoreList(enterpriseId) {
getStoreList() {
const { enterpriseId } = this.state;
const params = {
enterpriseId,
userId: User.getUserId(),
......@@ -48,6 +51,20 @@ export default class CollegeManagePage extends React.Component {
});
}
changeCollege(item, bool) {
const data = {
storeId: item.id,
userId: User.getUserId(),
enableState: bool ? 'YES' : 'NO',
}
Service.Hades('public/hades/updateStateStore', data).then((res) => {
if (res.success) {
message.success(bool ? '启用成功' : '停用成功');
this.getStoreList();
}
})
}
render() {
const {
name,
......@@ -87,8 +104,9 @@ export default class CollegeManagePage extends React.Component {
{list.map((item) => (
<div
key={item.id}
className="college-item"
className={`college-item${item.state === 'VALID' ? '' : ' disabled'}`}
onClick={() => {
if (item.state !== 'VALID') return null;
User.setStoreId(item.id);
window.RCHistory.push('/home')
}}
......@@ -99,6 +117,45 @@ export default class CollegeManagePage extends React.Component {
</div>
<div className="title">{item.storeName}</div>
<div className="time">{moment(item.createTime).format('YYYY-MM-DD HH:mm')}</div>
<div className="control-box">
{item.state === 'VALID' &&
<span
className="control-button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
User.setStoreId(item.id);
window.RCHistory.push('/college-info')
}}
>编辑</span>
}
<span
className="control-button"
onClick={(e) => {
if (item.state !== 'VALID') return null;
e.preventDefault();
e.stopPropagation();
Modal.confirm({
title: '确定停用吗？',
content: '禁用学院，所有学院相关信息不可使用，用户无法继续学习，请谨慎操作！',
icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
onOk: () => {
this.changeCollege(item, false);
},
okText: '停用',
cancelText: '取消',
})
}}
>{item.state === 'VALID' ? '停用' : '已停用'}</span>
<span
className="control-button disable-button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
this.changeCollege(item, true);
}}
>启用</span>
</div>
</div>
))}
<div
......
src/modules/root/CollegeManagePage.less
......@@ -124,8 +124,52 @@
color: #5289FA;
font-size: 16px;
}
.control-box {
display: none;
position: absolute;
right: 16px;
bottom: 16px;
.control-button {
margin-left: 10px;
cursor: pointer;
color: #5289FA;
}
.disable-button {
display: none;
}
}
&:hover {
background: #F3F6FA;
.control-box {
display: block;
}
}
&.disabled {
.tag {
color: #CCCCCC;
border-color: #CCCCCC;
}
.title {
color: #CCCCCC;
}
.time {
color: #CCCCCC;
}
.control-box {
display: block;
.control-button {
color: #CCCCCC;
}
}
&:hover {
.control-button {
display: none;
}
.disable-button {
display: block;
color: #5289FA;
}
}
}
}
.college-create {
......
src/modules/root/CreateCollege.jsx
import React from 'react';
import { Input, Button, Modal, message } from 'antd';
import { Input, Button, Modal, message, Form } from 'antd';
import Upload from '@/core/upload';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Service from "@/common/js/service";
import BaseService from "@/domains/basic-domain/baseService";
import User from "@/common/js/user";
......@@ -16,15 +15,16 @@ export default class CreateCollege extends React.Component {
avatar: 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
logo: 'https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png',
name: '',
enterpriseId: User.getEnterpriseId(),
};
}
componentDidMount() {
const enterpriseId = User.getEnterpriseId();
this.getEnterpriseUser(enterpriseId);
this.getEnterpriseUser();
}
getEnterpriseUser(enterpriseId) {
getEnterpriseUser() {
const { enterpriseId } = this.state;
const params = {
enterpriseId,
userId: User.getUserId(),
......@@ -35,8 +35,11 @@ export default class CreateCollege extends React.Component {
});
}
handleSelectCover = (file)=> {
this.uploadImage(file);
handleSelectCover = (e) => {
const imageFile = e.target.files[0];
Upload.uploadBlobToOSS(imageFile, 'cover' + (new Date()).valueOf()).then((url) => {
this.uploadImage({ folderName: imageFile.name, ossUrl: url });
})
}
//上传图片
......@@ -62,7 +65,6 @@ export default class CreateCollege extends React.Component {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale')
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
......@@ -141,26 +143,27 @@ export default class CreateCollege extends React.Component {
updateCover = () =>{
const {coverClicpPath,coverId} = this.state
this.setState({
showSelectFileModal: false
})
this.setState({
logo:coverClicpPath
})
}
submit = () => {
const { logo, collegeName } = this.state;
const params = {
enterpriseId: User.getEnterpriseId(),
userId: User.getUserId(),
logo,
storeName: collegeName,
}
Service.Hades('public/hades/createStore', params).then((res) => {
if (res.success) {
window.RCHistory.push('/college-manage')
const { logo, collegeName, enterpriseId } = this.state;
if (!collegeName) {
this.setState({ showError: true })
} else {
const params = {
enterpriseId,
userId: User.getUserId(),
logo,
storeName: collegeName,
}
})
Service.Hades('public/hades/createStore', params).then((res) => {
if (res.success) {
window.RCHistory.push('/college-manage')
}
})
}
}
render() {
......@@ -169,10 +172,10 @@ export default class CreateCollege extends React.Component {
name,
collegeName,
logo,
showSelectFileModal,
visible,
hasImgReady,
cutImageBlob,
showError,
} = this.state;
return (
<div className="college-manage-page">
......@@ -192,41 +195,52 @@ export default class CreateCollege extends React.Component {
</div>
</div>
<div className="create-box">
<div className="image-box" onClick={() => {this.setState({ showSelectFileModal:true })}}>
<div className="image-box">
<img className="image" src={logo} />
<div className="image-mask">
<span
className="icon iconfont"
onClick={() => this.refs.logoInput.click()}
>&#xe6f5;</span>
<span
className="icon iconfont"
onClick={() => {
this.setState({
logo: 'https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png',
visible: false,
})
}}
>&#xe6f6;</span>
</div>
</div>
<span className="tip">建议尺寸702*180px，JPG/PNG格式，图片小于2M。</span>
<Input
className="input"
placeholder="请输入学院名称"
value={collegeName}
onChange={(e) => {
this.setState({ collegeName: e.target.value })
}}
></Input>
<Form>
<Form.Item validateStatus={showError ? 'error' : 'success'} help={showError ? '请输入学院名称' : ''}>
<Input
className="input"
placeholder="请输入学院名称"
maxLength={30}
value={collegeName}
onChange={(e) => {
this.setState({ collegeName: e.target.value, showError: false })
}}
></Input>
</Form.Item>
</Form>
<Button
className="button"
type="primary"
onClick={() => this.submit()}
>确定创建</Button>
</div>
{showSelectFileModal &&
<SelectPrepareFileModal
key="basic"
operateType="select"
multiple={false}
accept="image/jpeg,image/png,image/jpg"
selectTypeList={['JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectFileModal}
onClose={() => {
this.setState({
showSelectFileModal:false
})
}}
onSelect={this.handleSelectCover}
/>
}
<input
type="file"
accept="image/*"
value={""}
ref="logoInput"
style={{ display: "none" }}
onChange={this.handleSelectCover}
/>
<Modal
title="设置图片"
width={1080}
......
src/modules/root/CreateCollege.less
......@@ -4,6 +4,7 @@
margin: 0 auto;
width: 350px;
.image-box {
position: relative;
display: block;
border: 1px dashed #E9E9E9;
width: 312px;
......@@ -14,6 +15,32 @@
height: 100%;
object-fit: contain;
}
.image-mask {
display: none;
}
&:hover {
.image-mask {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
display: flex;
align-items: center;
justify-content: center;
.iconfont {
font-size: 14px;
padding: 10px 25px;
cursor: pointer;
color: #fff;
&:hover {
color: rgba(255, 183, 20, 1);
}
}
}
}
}
.tip {
display: block;
......@@ -23,10 +50,10 @@
}
.input {
width: 350px;
margin-bottom: 52px;
}
.button {
width: 350px;
margin-top: 36px;
height: 32px !important;
}
}
......
src/modules/root/Header.jsx
......@@ -29,6 +29,7 @@ function Header(props) {
const ctx = useContext(XMContext);
const htmlUrl = `${LIVE_SHARE}store/index?id=${User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin`;
const storeUserId = User.getStoreUserId();
const enterpriseId = User.getEnterpriseId();
useEffect(() => {
htmlUrl && handleConvertShortUrl();
......@@ -39,8 +40,7 @@ function Header(props) {
useEffect(() => {
storeUserId && getUserInfo();
const enterpriseId = User.getEnterpriseId();
enterpriseId ? getEnterpriseUser(enterpriseId) : User.setIsAdmin(false);
enterpriseId ? getEnterpriseUser() : User.setIsAdmin(false);
}, [storeUserId]);
function getUserInfo() {
......@@ -55,7 +55,7 @@ function Header(props) {
});
}
function getEnterpriseUser(enterpriseId) {
function getEnterpriseUser() {
const params = {
enterpriseId,
userId: User.getUserId(),
......
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