Skip to content

X
xiaomai-cloud-class-web
Commit 05a7f677 by chenshu
Options

feat:数据接入

parent 0ad46886
Showing with 1417 additions and 135 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_51q0004t5ds.eot'); src: url('//at.alicdn.com/t/font_2223403_boiin24pch6.eot');
src: url('//at.alicdn.com/t/font_2223403_51q0004t5ds.eot?#iefix') format('embedded-opentype'), src: url('//at.alicdn.com/t/font_2223403_boiin24pch6.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_51q0004t5ds.woff2') format('woff2'), url('//at.alicdn.com/t/font_2223403_boiin24pch6.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_51q0004t5ds.woff') format('woff'), url('//at.alicdn.com/t/font_2223403_boiin24pch6.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_51q0004t5ds.ttf') format('truetype'), url('//at.alicdn.com/t/font_2223403_boiin24pch6.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_51q0004t5ds.svg#iconfont') format('svg'); url('//at.alicdn.com/t/font_2223403_boiin24pch6.svg#iconfont') format('svg');
} }
.iconfont{ .iconfont{
font-family:"iconfont" !important; font-family:"iconfont" !important;
......
src/data-source/base/request-apis.ts
...@@ -42,7 +42,7 @@ export function getLastedVersion(params: object) { ...@@ -42,7 +42,7 @@ export function getLastedVersion(params: object) {
return Service.Hades("public/hades/getLastedVersion", params); return Service.Hades("public/hades/getLastedVersion", params);
} }
export function getEnterpriseUser(params: object) { export function getEnterpriseUser(params: object) {
return Service.Hades('public/hades/getEnterpriseUser', params); return Service.Hades('public/customerHades/getEnterpriseUser', params);
} }
export function getWXWorkLoginNoCheck(params: object) { export function getWXWorkLoginNoCheck(params: object) {
return Service.Hades('anon/hades/getWXWorkLoginNoCheck', params); return Service.Hades('anon/hades/getWXWorkLoginNoCheck', params);
......
src/h5.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,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_51q0004t5ds.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_boiin24pch6.css">
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
......
src/index.html
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,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_51q0004t5ds.css"> <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_boiin24pch6.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/CollegeInfoPage.jsx
import React from 'react'; import React from 'react';
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import { Form, Input, Button, Checkbox ,Select,Modal,message} from 'antd'; import { Form, Input, Button, Modal, message} from 'antd';
import {industryList,childIndustryList} from '@/domains/store-domain/constants'
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal'; import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload'; import Upload from '@/core/upload';
// import PhotoClip from 'photoclip';
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 Bus from '@/core/tbus'; import Bus from '@/core/tbus';
...@@ -21,8 +19,12 @@ class CollegeInfoPage extends React.Component { ...@@ -21,8 +19,12 @@ class CollegeInfoPage extends React.Component {
cutImageBlob: null, cutImageBlob: null,
} }
} }
componentWillMount(){ componentWillMount() {
this.getStoreDetail() if (User.getEnterpriseId()) {
this.getStoreDetail()
} else {
window.RCHistory.replace('/store-info')
}
} }
getStoreDetail = ()=>{ getStoreDetail = ()=>{
const params= { const params= {
...@@ -185,36 +187,42 @@ class CollegeInfoPage extends React.Component { ...@@ -185,36 +187,42 @@ class CollegeInfoPage extends React.Component {
cutImageBlob, cutImageBlob,
} = this.state; } = this.state;
return ( return (
<div className="page store-info-page"> <div className="page college-info-page">
<div className="content-header">学院基本信息</div> <div className="content-header">学院基本信息</div>
<div className="box"> <div className="box">
<div className="store-info-header">学院基本信息</div> <div className="college-info-header">学院基本信息</div>
<div className="store-info-page-form"> <div className="college-info-page-form">
<Form ref={this.formRef}> <Form ref={this.formRef}>
<Form.Item <Form.Item
label="学院名称" label="学院LOGO"
name="storeName"
rules={[{ required: true}]}
>
<Input value={storeName} style={{ width: '300px' }} placeholder="请输入学院名称" onChange={(e)=>this.onChangeFiledValue("storeName",e.target.value)} maxLength={30}/>
</Form.Item>
<Form.Item
label="学院logo"
> >
<div className="logo-con"> <div className="logo-con">
<div className="logo-img-con"> <div className="logo-img-con">
{ logo ? <img src={logo} className="logo-img"/> : <div className="logo-box"><span className="text">Logo</span></div>} { logo ? <img src={logo} className="logo-img"/> : <div className="logo-box"><span className="text">Logo</span></div>}
</div> </div>
<div className="operate-con"> <div className="upload-box">
<div><span onClick={() => {this.setState({ showSelectFileModal:true })}} className="upload-btn"> <span onClick={() => {this.setState({ showSelectFileModal:true })}} className="upload-btn">
{logo ? <span>重新上传</span> : <span>上传</span> } <span>上传</span>
</span></div> </span>
<div className="tip">建议尺寸702*180px。最大2M，支持jpg、jpeg和png。</div> <div className="tip">建议尺寸702*180px。最大2M，支持jpg、jpeg和png。</div>
</div> </div>
</div> </div>
</Form.Item> </Form.Item>
<Form.Item
label="学院名称"
name="storeName"
rules={[{ required: true}]}
>
<Input
value={storeName}
style={{ width: '300px' }}
placeholder="请输入学院名称"
onChange={(e) => this.onChangeFiledValue("storeName", e.target.value)}
maxLength={30}
/>
</Form.Item>
</Form> </Form>
</div> </div>
{showSelectFileModal && {showSelectFileModal &&
......
src/modules/college-manage/CollegeInfoPage.less
.college-info-page { .college-info-page{
.college-info-header{
font-weight:bold;
color:#333;
font-size:16px;
margin-bottom: 16px;
}
.ant-form-item-label > label{
width:112px;
display:inline-block;
text-align:right;
color:#666666;
font-size:14px;
}
.college-info-page-form{
margin-left:29px;
.logo-con{
.logo-img-con{
width: 258px;
height: 60px;
margin-right:8px;
.logo-box{
width: 258px;
height: 60px;
background: #F7F8F9;
border-radius: 1px;
text-align:center;
.text{
text-align:center;
line-height:60px;
color:#ccc;
font-size:14px;
}
}
.logo-img{
width: 258px;
height: 60px;
}
}
.upload-box{
display: flex;
align-items: center;
margin-top: 12px;
.upload-btn{
width: 58px;
height: 32px;
border: 1px solid #e8e8e8;
border-radius: 4px;
text-align: center;
line-height: 32px;
cursor: pointer;
color: #666;
margin-right: 8px;
}
.tip{
color:#999999;
font-size:14px;
}
}
}
}
.submit-btn{
margin-left:142px;
}
} }
\ No newline at end of file
src/modules/college-manage/EmployeeManage.jsx deleted 100644 → 0
import React from 'react';
import { Input, Button } from 'antd';
import './EmployeeManage.less';
export default class EmployeeManage extends React.Component {
constructor(props) {
super(props);
this.state = {
avatar: 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
name: '',
};
}
render() {
const {
avatar,
} = this.state;
return (
<div className="college-manage-page">
<div className="college-header">
<div className="box">
<img className="box-image" src="https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png" />
<div className="user">
<img className="image" src={avatar} />
<span className="name">Xiaomai</span>
<span className="logout">退出</span>
</div>
</div>
</div>
<div className="create-box">
<img className="image" src="https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png" />
<span className="tip">建议尺寸702*180px，JPG/PNG格式，图片小于2M。</span>
<Input className="input" placeholder="请输入学院名称"></Input>
<Button
className="button"
type="primary"
>确定创建</Button>
</div>
</div>
)
}
}
\ No newline at end of file
src/modules/college-manage/EmployeeManage.tsx 0 → 100644
/*
* @Author: wufan
* @Date: 2020-07-09 14:03:09
* @Last Modified by: chenshu
* @Last Modified time: 2021-04-09 13:41:38
* 学院管理-员工管理
*/
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import PageControl from "@/components/PageControl";
import { CheckBox } from "@/components";
import { Button, Table, Modal, message, Input } from "antd";
import Service from '@/common/js/service';
import StoreService from "@/domains/store-domain/storeService";
import EmployeeAddOrEditModal from "../store-manage/EmployeeAddOrEditModal";
import User from "@/common/js/user";
import "./EmployeeManage.less";
import ChooseMembersModal from "./modal/ChooseMembersModal";
const { confirm } = Modal;
const { Search } = Input;
declare var window: any;
interface RecordTypes {
id: string;
role: string;
roleCodes: Array<string>;
userId: string;
nickName: string;
phone: string;
avatar?: string;
weChatAccount?: string;
}
interface RoleItemType {
isChecked: boolean;
roleCode: string;
name: string;
id: string;
}
interface QueryType {
current: number;
size: number;
nickName?: string;
phone?: string;
roleCodes: Array<string>;
}
interface ChoosedItemType {
nickName?: string;
phone?: string;
role: Array<string>;
avatar?: string;
storeUserId?: string;
weChatAccount?: string;
}
function EmployeeManage() {
const [employeeList, setEmployeeList] = useState([]);
const [query, setQuery] = useState<QueryType>({
current: 0,
size: 10,
nickName: "",
phone: "",
roleCodes: [],
});
const [valueLike, setValueLike] = useState();
const [total, setTotal] = useState(0);
const [model, setModel] = useState<React.ReactNode>(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isManager, setIsManager] = useState(true);
const [isNormal, setIsNormal] = useState(true);
const [choosedItem, setChooseItem] = useState<ChoosedItemType>({
nickName: "",
phone: "",
role: [],
avatar: "",
});
const [roleIds, setRoleIds] = useState<Array<RoleItemType>>([]);
const roleMap = {
CloudManager: "管理员",
CloudLecturer: "讲师",
StoreManager: "学院管理员",
};
const storeId = User.getStoreId();
const StoreType = User.getStoreType();
const isWorkWechat = !!(StoreType === "WE_CHAT_STORE");
useEffect(() => {
if (!User.getEnterpriseId()) {
window.RCHistory.replace('/employees-manage');
}
}, [])
useEffect(() => {
getEmployeeList();
}, [query]);
useEffect(() => {
getListInfo();
}, [storeId]);
async function getListInfo() {
await getStoreRole();
}
function getEmployeeList() {
let _query = _.clone(query);
_query.current = query.current + 1;
StoreService.getEmployeeList(_query).then((res: any) => {
setEmployeeList(res.result.records);
setTotal(res.result.total);
});
}
function getStoreRole() {
StoreService.getStoreRole({ storeId }).then((res: any) => {
const data = [...res.result];
const _query = { ...query };
let _data = _.filter(data, (_item) => {
return _item.roleCode !== "StoreManager";
});
setRoleIds(_data);
});
}
function parseColumn() {
const columns = [
{
title: "员工",
dataIndex: "nickName",
render: (val: string, record: RecordTypes) => {
return (
<div className="employee-info">
{isWorkWechat && (
<img
src={
record.avatar ||
"https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
}
alt=""
/>
)}
<span className="title">{val}</span>
</div>
);
},
},
{
title: "手机号",
dataIndex: "phone",
key: "phone",
render: (val: string) => {
return <div>{val}</div>;
},
},
{
title: "身份",
dataIndex: "role",
key: "role",
render: (val: string) => {
return <div>{val.split("，").join("、")}</div>;
},
},
{
title: "操作",
dataIndex: "operation",
render: (val: string, record: RecordTypes) => {
return record.role === "学院管理员" ||
record.userId === User.getUserId() ? (
<div className="no-operate">-</div>
) : (
<div className="operation">
<span className="edit" onClick={() => handleEditEmployee(record)}>
编辑
</span>
<span className="divider-line">{" | "}</span>
<span
className="delete"
onClick={() =>{
handleDeleteWorkWechatEmployeeConfirm(record)
}}
>
删除
</span>
</div>
);
},
},
];
if (isWorkWechat && columns) {
const item = {
title: "企业微信账号",
dataIndex: "weChatAccount",
key: "weChatAccount",
render: (val: string) => {
return <div>{val}</div>;
},
};
columns.splice(1, 1, item);
}
return columns;
}
function handleEditEmployee(record: RecordTypes) {
const { nickName, phone, roleCodes, avatar, id, weChatAccount } = record;
const _choosesItem = {
nickName: nickName,
phone: phone,
role: roleCodes,
avatar: avatar,
storeUserId: id,
weChatAccount
};
setChooseItem(_choosesItem);
const model: React.ReactNode = (
<EmployeeAddOrEditModal
choosedItem={_choosesItem}
onClose={() => {
setModel(null);
getEmployeeList();
setChooseItem({
nickName: "",
phone: "",
role: [],
avatar: "",
storeUserId: "",
weChatAccount:""
});
}}
isWorkWechat={isWorkWechat}
/>
);
setModel(model);
}
function handleDeleteWorkWechatEmployeeConfirm(record: RecordTypes) {
return confirm({
title: "你确定要删除此员工吗？",
content: "删除后数据无法恢复",
icon: (
<span className="icon iconfont default-confirm-icon">&#xe839; </span>
),
okText: "删除",
okType: "danger",
cancelText: "取消",
onOk: () => {
handleDeleteEmployee(record.id);
},
});
}
function handleToAddEmployee() {
const model: React.ReactNode = (
<ChooseMembersModal
isOpen={true}
type="USER"
handleChooseModal={(bool: any) => {
setModel(null)
if (bool) {
getEmployeeList();
}
}}
/>
);
setModel(model);
}
function handleDeleteEmployee(storeUserId: string) {
StoreService.deleteEmployee({ storeUserId }).then((res: any) => {
const msg = isWorkWechat ? "员工已删除":"讲师已删除";
message.success(msg);
getEmployeeList();
});
}
return (
<div className=" page employee-manage-page">
<div className="content-header">员工管理</div>
<div className="box">
<div className="box-header">
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
padding: "0px 0 16px",
}}
>
<div>
搜索员工：
<Search
style={{
width: 300,
marginRight: 40,
}}
placeholder={
isWorkWechat ? "请输入员工昵称" : "搜索员工昵称/手机号"
}
onSearch={(value) => {
const _query = { ...query };
// 企业微信用户只能搜索员工昵称
if (isWorkWechat) {
_query.nickName = value;
_query.current = 0;
setQuery(_query);
return;
}
if (value) {
const isPhone = (value || "").match(/^\d+$/);
const name = isPhone ? "phone" : "nickName";
const otherName = isPhone ? "nickName" : "phone";
_query[name] = value;
_query[otherName] = "";
_query.current = 0;
} else {
_query.nickName = "";
_query.phone = "";
_query.current = 0;
}
setQuery(_query);
}}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
</div>
<div>
身份：
{_.map(roleIds, (item: any) => {
return (
<CheckBox
text={item.name}
name={item.roleCode}
onChange={(e: any) => {
const { checked, name } = e.target;
const _query = { ...query };
_query.roleCodes = [];
_query.current = 0;
const _roleIds: Array<RoleItemType> = roleIds.map(
(_item: RoleItemType) => {
if (name === _item.roleCode) {
if (checked) {
_item.isChecked = true;
} else {
_item.isChecked = false;
}
}
if (_item.isChecked) {
_query.roleCodes.push(_item.roleCode);
}
return _item;
}
);
setRoleIds(_roleIds);
setQuery(_query);
}}
defaultChecked={item.isChecked}
/>
);
})}
</div>
</div>
<Button
onClick={() => {
handleToAddEmployee();
}}
type="primary"
className="add-show-btn"
>
添加员工
</Button>
</div>
<div className="box-body">
<Table
size={"middle"}
pagination={false}
dataSource={employeeList}
columns={parseColumn()}
rowKey={(item: any) => item.id}
bordered
/>
</div>
<div className="box-footer">
<PageControl
current={query.current}
pageSize={query.size}
total={total}
toPage={(page: any) => {
const queryStates = _.clone(query);
queryStates.current = page;
setQuery(queryStates);
}}
/>
</div>
</div>
{model}
</div>
);
}
export default withRouter(EmployeeManage);
src/modules/college-manage/UserManagePage.jsx deleted 100644 → 0
import React from 'react';
import { Input, Button } from 'antd';
import './UserManagePage.less';
export default class UserManagePage extends React.Component {
constructor(props) {
super(props);
this.state = {
avatar: 'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
name: '',
};
}
render() {
const {
avatar,
} = this.state;
return (
<div className="college-manage-page">
<div className="college-header">
<div className="box">
<img className="box-image" src="https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png" />
<div className="user">
<img className="image" src={avatar} />
<span className="name">Xiaomai</span>
<span className="logout">退出</span>
</div>
</div>
</div>
<div className="create-box">
<img className="image" src="https://image.xiaomaiketang.com/xm/HNHCAF6Fc2.png" />
<span className="tip">建议尺寸702*180px，JPG/PNG格式，图片小于2M。</span>
<Input className="input" placeholder="请输入学院名称"></Input>
<Button
className="button"
type="primary"
>确定创建</Button>
</div>
</div>
)
}
}
\ No newline at end of file
src/modules/college-manage/UserManagePage.less
.user-manage-page {
.box-header {
display: flex;
width: calc(100% - 80px);
margin-bottom: 16px;
.header-item {
width: 30%;
margin-right: 3%;
display: flex;
.item-name {
width: 80px;
flex-shrink: 0;
}
}
}
}
\ No newline at end of file
src/modules/college-manage/UserManagePage.tsx 0 → 100644
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-02-02 10:22:34
* @Description: 用户管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
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 StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user";
import ChooseMembersModal from "./modal/ChooseMembersModal";
import "./UserManagePage.less";
import moment from "moment";
const { Option } = Select;
const { Search } = Input;
const { RangePicker } = DatePicker;
declare var window: any;
function UserManagePage() {
const [userList, setUserList] = useState([]);
const [model, setModel] = useState<React.ReactNode>(null);
const [query, setQuery] = useState({
current: 0,
size: 10,
nickName: "",
phone: "",
registerBegin: null,
registerEnd: null,
sourceEnum: undefined,
});
const [total, setTotal] = useState(0);
useEffect(() => {
if (!User.getEnterpriseId()) {
window.RCHistory.replace('/employees-manage');
}
}, [])
useEffect(() => {
getUserList();
}, [query]);
function getUserList() {
let _query = _.clone(query);
_query.current = query.current + 1;
StoreService.getUserList(_query).then((res: any) => {
setUserList(res.result.records);
setTotal(res.result.total);
});
}
function parseColumn() {
return [
{
title: "用户姓名",
dataIndex: "nickName",
render: (val: string) => {
return (
<div className="coupon-info">
<span className="title">{val}</span>
</div>
);
},
},
{
title: "手机号",
dataIndex: "phone",
key: "phone",
render: (val: string) => {
return <div>{val}</div>;
},
},
{
title: "注册时间",
dataIndex: "created",
key: "created",
render: (val: string) => {
return <div>{moment(val).format("YYYY-MM-DD HH:mm:ss")}</div>;
},
},
];
}
function handleToAddEmployee() {
const model: React.ReactNode = (
<ChooseMembersModal
isOpen={true}
type="CUSTOMER"
handleChooseModal={(bool: any) => {
setModel(null)
if (bool) {
getUserList();
}
}}
/>
);
setModel(model);
}
return (
<div className=" page user-manage-page">
<div className="content-header">用户管理</div>
<div className="box">
<div className="box-header">
<div className="header-item">
<span className="item-name">搜索用户：</span>
<Search
style={{
width: 300,
}}
placeholder="搜索用户姓名/手机号"
onSearch={(value) => {
const _query = { ...query };
if (value) {
console.log("value", value);
const isPhone = (value || "").match(/^\d+$/);
const name = isPhone ? "phone" : "nickName";
_query.nickName = "";
_query.phone = "";
_query[name] = value;
_query.current = 0;
} else {
_query.nickName = "";
_query.phone = "";
_query.current = 0;
}
setQuery(_query);
}}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
</div>
<div className="header-item">
<span className="item-name">用户来源：</span>
<Select
style={{ width: '100%' }}
placeholder="请选择"
allowClear
onChange={(value) => {
const _query: any = _.clone(query);
_query.sourceEnum = value + '';
setQuery(_query);
}}
>
<Option value="WORK_WE_CHAT">企业微信</Option>
<Option value="WE_CHAT">微信</Option>
</Select>
</div>
<div className="header-item">
<span className="item-name">注册时间：</span>
<RangePicker
style={{ flex: 1, width: "auto" }}
value={
query.registerBegin
? [moment(query.registerBegin), moment(query.registerEnd)]
: null
}
format={"YYYY-MM-DD"}
onChange={(dates: any) => {
const _query = _.clone(query);
_query.registerBegin = dates ? dates[0].startOf("day").valueOf() : null;
_query.registerEnd = dates ? dates[1].endOf("day").valueOf() : null;
_query.current = 0;
setQuery({
..._query
});
}}
/>
</div>
</div>
<Button
type="primary"
style={{ marginBottom: 12 }}
onClick={() => {
handleToAddEmployee();
}}
>添加用户</Button>
<div className="box-body">
<Table
size={"middle"}
pagination={false}
dataSource={userList}
columns={parseColumn()}
rowKey={(item: any) => item.id}
bordered
/>
</div>
<div className="box-footer">
<PageControl
current={query.current}
pageSize={query.size}
total={total}
toPage={(page: any) => {
const queryStates = _.clone(query);
queryStates.current = page;
setQuery(queryStates);
}}
/>
</div>
</div>
{model}
</div>
);
}
export default withRouter(UserManagePage);
src/modules/college-manage/modal/ChooseMembersModal.jsx 0 → 100644
/*
* @Author: wanghaofeng
* @date: 2020/11/14 17:42
* @Description：权限管理-选择成员弹窗
*/
import React from 'react';
import { Modal, Input, Table } from 'antd';
import Service from '@/common/js/service';
import User from '@/common/js/user'
import SetEmployeeModal from "./SetEmployeeModal";
import './ChooseMembersModal.less';
const { Search } = Input;
class ChooseMembersModal extends React.Component {
constructor(props) {
super(props);
this.state = {
allUserList : [], // 所有成员列表
selectUserList: [], // 已选则成员
temporaryList: [], // 临时用户成员列表（搜索时使用）
instId : window.currentUserInstInfo.instId, // 机构Id
searchKey : null, // 搜索内容
selectedRowKeys : [], // 勾选的成员
userAuthority: ['可编辑', '可查看/下载', '仅可查看'],
query: {
current: 1,
size: 300,
enterpriseId: User.getEnterpriseId(),
storeId: User.getStoreId(),
visibleTypeEnum: props.type,
}
}
}
componentDidMount() {
this.getUserAuthority();
}
// 获取对应文件相关成员
getUserAuthority = (searchKey='') => {
const { query } = this.state;
query.name = searchKey;
Service.Hades('public/hades/getEnterpriseVisibleUserPage', query).then((res) => {
if (res.result) {
this.setState({
allUserList: res.result.records,
})
}
})
}
// 勾选成员
onChangeRow = (_selectedRowKeys, selectedRows) => {
let { temporaryList, allUserList } = this.state;
let _temporaryIdList = [], _temporaryList = [];
// 解决搜索款2次搜索的问题
if (temporaryList.length === 0) {
_temporaryList = selectedRows;
} else {
temporaryList = temporaryList.concat(selectedRows);
// 之前搜索并勾选的选项以及当前页被勾选的选项
temporaryList = temporaryList.filter(item => (!allUserList.includes(item) || selectedRows.includes(item)) && _selectedRowKeys.includes(item.enterpriseVisibleUserId));
temporaryList.map(item => {
if (!_temporaryIdList.includes(item.enterpriseVisibleUserId)) {
_temporaryIdList.push(item.enterpriseVisibleUserId);
_temporaryList.push(item);
}
return (_temporaryIdList, _temporaryList)
});
}
this.setState({
temporaryList : _temporaryList,
selectUserList : _temporaryList,
selectedRowKeys : _selectedRowKeys
})
}
// 勾选禁用
getCheckboxProps = (record) => {
if (record.whetherExist) {
return ({
disabled : true,
checked: true
})
}
}
// 清空所有成员
clearAllUser = () => {
this.setState({
selectedRowKeys : [],
selectUserList : [],
temporaryList : []
})
}
// 清除单个成员(点击“x”)
clearOneUser = (user) => {
let { selectUserList, selectedRowKeys } = this.state
// 清除成员不是之前选的
selectedRowKeys = selectedRowKeys.filter(item => item !== user.enterpriseVisibleUserId);
selectUserList = selectUserList.filter(item => item.enterpriseVisibleUserId !== user.enterpriseVisibleUserId);
this.setState({
selectedRowKeys,
selectUserList
})
}
// 点击全选
onSelectAll = (selected, selectedRows, changeRows) => {
let { temporaryList, allUserList } = this.state;
let newSelectUserList = [], allUserId = [];
allUserList.map(item => allUserId.push(item.enterpriseVisibleUserId));
temporaryList = temporaryList.filter(item => !allUserId.includes(item.enterpriseVisibleUserId));
if (selectedRows.length === 0) {
// 取消勾选，保留之前已经选择的成员
newSelectUserList = temporaryList;
} else {
newSelectUserList = temporaryList.concat(allUserList);
newSelectUserList = newSelectUserList.filter(item => !item.whetherExist);
}
this.setState({
selectUserList : newSelectUserList,
temporaryList: newSelectUserList
})
}
// 批量添加成员(点击确定)
addUser = () => {
const { selectUserList } = this.state;
let enterpriseUserList = []; // 保存新加进去的成员
selectUserList.map((item) => {
enterpriseUserList.push({
roleCode: 'Cloud_Manager',
enterpriseVisibleUserId: item.enterpriseVisibleUserId
})
return enterpriseUserList
})
const _params = {
storeId: User.getStoreId(),
enterpriseUserList,
}
Service.Hades('public/hades/addBatchEnterpriseStoreUser', _params).then((res) => {
if (res.code === '200') {
this.handleClose(true);
this.setState({
temporaryList: []
})
}
})
}
addCustomer = () => {
const { selectUserList } = this.state;
let enterpriseVisibleUserIdList = []; // 保存新加进去的成员
selectUserList.map((item) => {
enterpriseVisibleUserIdList.push(item.enterpriseVisibleUserId)
return enterpriseVisibleUserIdList
})
const _params = {
storeId: User.getStoreId(),
enterpriseVisibleUserIdList,
}
Service.Hades('public/hades/addBatchEnterpriseStoreCustomer', _params).then((res) => {
if (res.code === '200') {
this.handleClose(true);
this.setState({
temporaryList: []
})
}
})
}
// 搜索成员
handleSearch = () => {
const { searchKey } = this.state;
this.getUserAuthority(searchKey);
}
// 搜索框值更改
handleChangeSearchKey = (e) => {
const { value } = e.target;
this.setState({
searchKey : value
});
}
// 关闭弹窗
handleClose = (bool) => {
this.props.handleChooseModal(bool);
}
// 信息列表-—左边
selectedColumnsLeft = () => {
const selectColumns = [
{
title: '全选', // 实际为头像，但在表格上这行要求显示为全选
key: 'avatar',
dataIndex: 'avatar',
width: '40%',
render: (value, record) => {
const { name } = record;
return (
<div className='avatar'>
<span className="icon iconfont avatar-icon">&#xe84a;</span>
<span className='userImg'>
{ name }
</span>
</div>
)
}
}
]
return selectColumns
}
// 信息列表——右边
selectedColumnsRight = () => {
const selectColumns = [
{
title: '用户名',
key: 'nameRight',
dataIndex: 'name',
width: '70%',
render: (value, record) => {
const { name = '', avatar } = record;
return (
<div className='avatar'>
<span className="icon iconfont avatar-icon">&#xe84a;</span>
<span className='userImg'>
{ name }
</span>
</div>
)
}
},{
title : '操作',
key : 'edit',
dataIndex : 'edit',
width : '30%',
align : 'right',
render: (value, record) => {
return (
<div className='edit' onClick={() => this.clearOneUser(record)}>
<span className="icon iconfont edit-icon">&#xe717;</span>
</div>
)
}
},
]
return selectColumns;
}
render() {
const { isOpen, type } = this.props;
const { selectUserList, allUserList, searchKey, selectedRowKeys } = this.state;
const title = '添加员工';
return (
<div>
{/* 添加学员页面 */}
<Modal
className="choose-member-modal"
visible={isOpen}
onCancel={this.handleClose}
onOk={type === 'USER' ? this.addUser : this.addCustomer}
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='搜索成员'
value={searchKey}
onSearch={this.handleSearch}
onChange={this.handleChangeSearchKey}
className='search search-input'
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
<div className='container-left-body-table'>
<Table
rowKey={(record) => record.enterpriseVisibleUserId}
dataSource={allUserList}
columns={this.selectedColumnsLeft()}
pagination={false}
scroll={{ y: 290}}
// bordered={true}
size={'small'}
rowSelection={{
columnWidth : 24,
selectedRowKeys,
onChange : this.onChangeRow,
getCheckboxProps : this.getCheckboxProps,
onSelectAll : (selected, selectedRows, changeRows) => {
this.onSelectAll(selected, selectedRows, changeRows)
}
}}
/>
</div>
</div>
</div>
{/* 已选择的成员列表 */}
<div className='container-right'>
<span className='span-left'>已选择员工</span>
<div className='span-right' onClick={() => this.clearAllUser()}>
<span className={ (selectUserList.length > 0) ? 'span-right-l' : null }>清空</span>
</div>
<div className='container-right-body'>
<Table
rowKey={(record) => record.enterpriseVisibleUserId}
dataSource={selectUserList}
columns={this.selectedColumnsRight()}
showHeader={false}
scroll={{ y: 375 }}
pagination={false}
size={'small'}
/>
</div>
</div>
</div>
</Modal>
</div>
)
}
}
export default ChooseMembersModal;
\ No newline at end of file
src/modules/college-manage/modal/ChooseMembersModal.less 0 → 100644
.choose-member-modal {
.member-container{
display: flex;
height: 417px;
.container-left{
width: 50%;
padding-right: 10px;
margin-left: 10px;
.container-left-header{
margin-bottom: 12px;
}
.container-left-body{
border: 1px solid #E9E9E9;
height: 100%;
.ant-table-thead > tr > th {
font-weight:400!important;
}
.search{
width: 305px;
padding: 7px 7px;
}
.container-left-body-table{
width: 300px;
height: 330px;
.ant-table {
border: none;
min-height: 250px !important;
.ant-table-header{
margin-bottom: -7px !important;
>table > .ant-table-thead > tr > th {
background-color: #fff !important;
}
}
.ant-table-tbody{
>tr {
>td {
border-bottom: none;
background-color: #fff !important;
padding: 11px 0!important;
}
&:hover {
>td {
background: #F3F6FA !important;
}
}
}
}
}
.ant-empty-normal {
margin: 100px 0 !important;
}
.avatar{
display: flex;
align-items: center;
.avatar-icon {
font-size: 14px;
color: #0081F0;
margin-right: 6px;
}
}
}
}
}
.container-right{
width: 50%;
border: 1px solid #E9E9E9;
.span-left{
line-height: 45px;
margin-left: 10px;
.span-left-l{
color: #ffb714;
cursor: pointer;
}
}
.span-right{
line-height: 45px;
float: right;
margin-right: 10px;
color: #999;
.span-right-l{
color: #5289FA;
cursor: pointer;
}
}
.container-right-body{
min-height:376px;
border-top: 1px solid #e8e8e8;
.edit {
.edit-icon {
color:#999;
}
}
.edit-img{
width: 16px;
height: 16px;
}
.ant-table .ant-table-body {
overflow: auto;
max-height: 376px!important;
}
.ant-table tbody {
tr{
background: #fff;
&:first-child {
display: block;
overflow: hidden;
}
}
}
.ant-empty-normal {
margin: 144px 0 !important;
}
.avatar{
display: flex;
align-items: center;
.avatar-icon {
font-size: 14px;
color: #0081F0;
margin-right: 6px;
}
}
.ant-table-tbody{
>tr >td {
border-bottom:none;
}
>tr .ant-table-selection-column{
width: 30px !important;
}
}
}
}
}
}
\ No newline at end of file
src/modules/college-manage/modal/SetEmployeeModal.jsx 0 → 100644
import React from 'react';
import { Modal, Button, Radio } from 'antd';
import './SetEmployeeModal.less'
const RadioGroup = Radio.Group;
const tagMap = {
Cloud_Operator: '运营师',
Cloud_Lecturer: '讲师',
Cloud_Manager: '管理员',
}
export default class SetEmployeeModal extends React.Component {
constructor(props) {
super(props);
const list = props.list.map(item => ({ ...item, roleCode: item.enterpriseRole === 'ADMIN' ? 'Cloud_Manager' : 'Cloud_Lecturer' }))
const selectedData = list[0] || {};
this.state = {
list,
selected: selectedData.enterpriseVisibleUserId,
roleCode: selectedData.roleCode,
}
}
handleChangeValues(value) {
const { list, selected } = this.state;
list.map((item) => {
if (item.enterpriseVisibleUserId === selected) {
item.roleCode = value;
}
})
this.setState({ roleCode: value, list });
}
render() {
const {
list,
roleCode,
selected,
} = this.state;
return (
<Modal
visible={true}
title="添加员工"
className="set-employee-modal"
onOk={() => {
}}
onCancel={() => {
}}
wenterpriseVisibleUserIdth={680}
footer={
<div className="modal-footer">
<Button style={{ float: 'left' }}>上一步</Button>
<Button>取消</Button>
<Button type="primary">确定</Button>
</div>
}
>
<div className="employee-container">
<div className="employee-box">
{list.map((item) => (
<div
className={`item ${selected === item.enterpriseVisibleUserId ? ' selected' : ''}`}
key={item.enterpriseVisibleUserId}
onClick={() => this.setState({ selected: item.enterpriseVisibleUserId })}
>
<span className="icon iconfont avatar-icon">&#xe84a;</span>
<span className='name'>{item.name}</span>
<span className="tag">{tagMap[item.roleCode]}</span>
</div>
))}
</div>
<div className="detail-box">
<div className="title">员工身份：</div>
<RadioGroup
value={roleCode}
onChange={(e) => {
this.handleChangeValues(e.target.value);
}}
className="mt5"
>
<Radio value={"Cloud_Operator"} className="mt-4">
<span style={{ color: "#333" }}>运营师</span>
<p className="radio-tip">
仅可查看/转发培训计划内容，并查看负责的用户学习进度
</p>
</Radio>
<Radio value={"Cloud_Lecturer"} className="mt-4">
<span style={{ color: "#333" }}>讲师</span>
<p className="radio-tip">
仅可查看/使用与自己相关的文件和课表，并进行上课
</p>
</Radio>
<Radio value={"Cloud_Manager"}>
<span style={{ color: "#333" }}>管理员</span>
<p className="radio-tip">可执行学院中所有的操作</p>
</Radio>
</RadioGroup>
</div>
</div>
</Modal>
)
}
}
\ No newline at end of file
src/modules/college-manage/modal/SetEmployeeModal.less 0 → 100644
.set-employee-modal {
.ant-modal-body {
padding: 0 !important;
.employee-container {
height: 368px;
display: flex;
.employee-box {
width: 253px;
padding-top: 12px;
height: 100%;
overflow-y: auto;
.item {
position: relative;
height: 44px;
padding-left: 18px;
padding-right: 12px;
cursor: pointer;
&:hover {
background: #F3F6FA;
}
.avatar-icon {
font-size: 14px;
color: #0081F0;
margin-right: 6px;
line-height: 44px;
}
.name {
color: #333;
line-height: 44px;
}
.tag {
float: right;
height: 18px;
line-height: 18px;
padding: 0 8px;
border: 1px solid #FFB714;
border-radius: 9px;
color: #FFB714;
margin-top: 13px;
font-size: 12px;
}
&.selected {
background: rgba(255, 183, 20, 0.1);
&::after {
content: '';
position: absolute;
left: 0;
height: 100%;
width: 4px;
background: #FFB714;
}
}
}
}
.detail-box {
width: 427px;
padding: 24px 16px;
padding-right: 0;
height: 100%;
border-left: 1px solid #e8e8e8;
.title {
color: #666;
margin-bottom: 16px;
}
.ant-radio-group {
span {
color: #333;
}
.radio-tip {
color: #999;
}
}
}
}
}
}
\ No newline at end of file
src/modules/root/App.tsx
...@@ -51,7 +51,6 @@ const App: React.FC = (props: any) => { ...@@ -51,7 +51,6 @@ const App: React.FC = (props: any) => {
}; };
Service.Hades('public/customerHades/getStoreAndUserMsg', params).then((res) => { Service.Hades('public/customerHades/getStoreAndUserMsg', params).then((res) => {
const { id, storeUserId, storeName, userRole, storeType } = res.result; const { id, storeUserId, storeName, userRole, storeType } = res.result;
User.setStoreId(id); User.setStoreId(id);
User.setStoreUserId(storeUserId); User.setStoreUserId(storeUserId);
User.setStoreName(storeName); User.setStoreName(storeName);
......
src/modules/root/CollegeManagePage.jsx
...@@ -43,7 +43,7 @@ export default class CollegeManagePage extends React.Component { ...@@ -43,7 +43,7 @@ export default class CollegeManagePage extends React.Component {
enterpriseId, enterpriseId,
userId: User.getUserId(), userId: User.getUserId(),
}; };
Service.Hades('public/hades/getStoreListUser', params).then((res) => { Service.Hades('public/customerHades/getStoreListUser', params).then((res) => {
this.setState({ list: res.result }) this.setState({ list: res.result })
}); });
} }
......
src/modules/root/SwitchRoute.tsx
...@@ -16,7 +16,6 @@ interface SwitchProps {} ...@@ -16,7 +16,6 @@ interface SwitchProps {}
function SwitchRoute(props: SwitchProps) { function SwitchRoute(props: SwitchProps) {
useEffect(() => { useEffect(() => {
console.log(999999999)
const enterpriseId = User.getEnterpriseId(); const enterpriseId = User.getEnterpriseId();
if (enterpriseId) { if (enterpriseId) {
window.RCHistory.push('/college-manage'); window.RCHistory.push('/college-manage');
......
src/routes/config/mainRoutes.tsx
...@@ -109,21 +109,6 @@ const mainRoutes = [ ...@@ -109,21 +109,6 @@ const mainRoutes = [
name: '资料云盘' name: '资料云盘'
}, },
{ {
path: '/college-info',
component:ResourceDisk,
name: '学院信息'
},
{
path: '/employee-manage',
component:ResourceDisk,
name: '员工管理'
},
{
path: '/user-manage',
component:ResourceDisk,
name: '用户管理'
},
{
path: '/question-bank-index', path: '/question-bank-index',
component:QuestionBankIndex, component:QuestionBankIndex,
name: '题库' name: '题库'
......
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