Skip to content

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

feat:数据接入

parent 0ad46886
Showing with 667 additions and 135 deletions
src/common/less/icon-font.less
@font-face {
font-family: 'iconfont'; /* project id 2223403 */
src: url('//at.alicdn.com/t/font_2223403_51q0004t5ds.eot');
src: url('//at.alicdn.com/t/font_2223403_51q0004t5ds.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_51q0004t5ds.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_51q0004t5ds.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_51q0004t5ds.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_51q0004t5ds.svg#iconfont') format('svg');
src: url('//at.alicdn.com/t/font_2223403_boiin24pch6.eot');
src: url('//at.alicdn.com/t/font_2223403_boiin24pch6.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_2223403_boiin24pch6.woff2') format('woff2'),
url('//at.alicdn.com/t/font_2223403_boiin24pch6.woff') format('woff'),
url('//at.alicdn.com/t/font_2223403_boiin24pch6.ttf') format('truetype'),
url('//at.alicdn.com/t/font_2223403_boiin24pch6.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
......
src/data-source/base/request-apis.ts
......@@ -42,7 +42,7 @@ export function getLastedVersion(params: object) {
return Service.Hades("public/hades/getLastedVersion", params);
}
export function getEnterpriseUser(params: object) {
return Service.Hades('public/hades/getEnterpriseUser', params);
return Service.Hades('public/customerHades/getEnterpriseUser', params);
}
export function getWXWorkLoginNoCheck(params: object) {
return Service.Hades('anon/hades/getWXWorkLoginNoCheck', params);
......
src/h5.html
......@@ -25,7 +25,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_51q0004t5ds.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_boiin24pch6.css">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
......
src/index.html
......@@ -25,7 +25,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_51q0004t5ds.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_boiin24pch6.css">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
......
src/modules/college-manage/CollegeInfoPage.jsx
import React from 'react';
import { withRouter } from "react-router-dom";
import { Form, Input, Button, Checkbox ,Select,Modal,message} from 'antd';
import {industryList,childIndustryList} from '@/domains/store-domain/constants'
import { Form, Input, Button, Modal, message} from 'antd';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import Upload from '@/core/upload';
// import PhotoClip from 'photoclip';
import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user";
import Bus from '@/core/tbus';
......@@ -21,8 +19,12 @@ class CollegeInfoPage extends React.Component {
cutImageBlob: null,
}
}
componentWillMount(){
this.getStoreDetail()
componentWillMount() {
if (User.getEnterpriseId()) {
this.getStoreDetail()
} else {
window.RCHistory.replace('/store-info')
}
}
getStoreDetail = ()=>{
const params= {
......@@ -185,36 +187,42 @@ class CollegeInfoPage extends React.Component {
cutImageBlob,
} = this.state;
return (
<div className="page store-info-page">
<div className="page college-info-page">
<div className="content-header">学院基本信息</div>
<div className="box">
<div className="store-info-header">学院基本信息</div>
<div className="store-info-page-form">
<div className="college-info-header">学院基本信息</div>
<div className="college-info-page-form">
<Form ref={this.formRef}>
<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.Item
label="学院logo"
label="学院LOGO"
>
<div className="logo-con">
<div className="logo-img-con">
{ logo ? <img src={logo} className="logo-img"/> : <div className="logo-box"><span className="text">Logo</span></div>}
</div>
<div className="operate-con">
<div><span onClick={() => {this.setState({ showSelectFileModal:true })}} className="upload-btn">
{logo ? <span>重新上传</span> : <span>上传</span> }
</span></div>
<div className="upload-box">
<span onClick={() => {this.setState({ showSelectFileModal:true })}} className="upload-btn">
<span>上传</span>
</span>
<div className="tip">建议尺寸702*180px。最大2M，支持jpg、jpeg和png。</div>
</div>
</div>
</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>
</div>
{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/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.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) => {
};
Service.Hades('public/customerHades/getStoreAndUserMsg', params).then((res) => {
const { id, storeUserId, storeName, userRole, storeType } = res.result;
User.setStoreId(id);
User.setStoreUserId(storeUserId);
User.setStoreName(storeName);
......
src/modules/root/CollegeManagePage.jsx
......@@ -43,7 +43,7 @@ export default class CollegeManagePage extends React.Component {
enterpriseId,
userId: User.getUserId(),
};
Service.Hades('public/hades/getStoreListUser', params).then((res) => {
Service.Hades('public/customerHades/getStoreListUser', params).then((res) => {
this.setState({ list: res.result })
});
}
......
src/modules/root/SwitchRoute.tsx
......@@ -16,7 +16,6 @@ interface SwitchProps {}
function SwitchRoute(props: SwitchProps) {
useEffect(() => {
console.log(999999999)
const enterpriseId = User.getEnterpriseId();
if (enterpriseId) {
window.RCHistory.push('/college-manage');
......
src/routes/config/mainRoutes.tsx
......@@ -109,21 +109,6 @@ const mainRoutes = [
name: '资料云盘'
},
{
path: '/college-info',
component:ResourceDisk,
name: '学院信息'
},
{
path: '/employee-manage',
component:ResourceDisk,
name: '员工管理'
},
{
path: '/user-manage',
component:ResourceDisk,
name: '用户管理'
},
{
path: '/question-bank-index',
component:QuestionBankIndex,
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