Skip to content

X
xiaomai-cloud-class-web
Commit 6871c062 by yuananting
Options

feat:新增培训任务模块开发

parent a7e01f18
Showing with 545 additions and 319 deletions
src/common/constants/academic/taskEnum.js 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-08-02 11:50:37
* @LastEditors: yuananting
* @LastEditTime: 2021-08-02 13:56:52
* @Description: 任务中心
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
const LearningContentIcon = {
LIVE: 'https://image.xiaomaiketang.com/xm/jyFhCtaKfi.png',
VOICE: 'https://image.xiaomaiketang.com/xm/2T2k5Tbmpy.png',
PICTURE: 'https://image.xiaomaiketang.com/xm/yzjNwGX6TY.png',
EAXM: 'https://image.xiaomaiketang.com/xm/fCDPp2Eenc.png',
HOMEWORK: 'https://image.xiaomaiketang.com/xm/hShsAzzppZ.png',
};
export { LearningContentIcon };
src/common/less/icon-font.less
@font-face {
font-family: 'iconfont'; /* Project id 2223403 */
src: url('//at.alicdn.com/t/font_2223403_e1xgcyaur7.woff2?t=1627810786858') format('woff2'),
url('//at.alicdn.com/t/font_2223403_e1xgcyaur7.woff?t=1627810786858') format('woff'),
url('//at.alicdn.com/t/font_2223403_e1xgcyaur7.ttf?t=1627810786858') format('truetype');
src: url('//at.alicdn.com/t/font_2223403_sv3ehwf2rr.woff2?t=1627903518018') format('woff2'),
url('//at.alicdn.com/t/font_2223403_sv3ehwf2rr.woff?t=1627903518018') format('woff'),
url('//at.alicdn.com/t/font_2223403_sv3ehwf2rr.ttf?t=1627903518018') format('truetype');
}
.iconfont {
font-family: 'iconfont' !important;
......
src/index.html
<!--
* @Author: 吴文洁
* @Date: 2020-08-24 12:20:57
* @LastEditors: Please set LastEditors
* @LastEditTime: 2021-07-08 19:38:52
* @LastEditors: yuananting
* @LastEditTime: 2021-08-03 14:08:12
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
-->
......@@ -29,7 +29,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_e1xgcyaur7.css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_sv3ehwf2rr.css" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
......
src/modules/course-manage/components/GraphicsEditor.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-07-05 10:47:19
* @LastEditors: yuananting
* @LastEditTime: 2021-07-12 17:13:38
* @LastEditTime: 2021-08-02 17:54:13
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -49,7 +49,7 @@ class GraphicsEditor extends React.Component {
renderEditor() {
const { editorId } = this.state;
const { detail, onChange, isIntro, maxLimit, editorType } = this.props;
const { detail, onChange, isIntro, maxLimit, editorType, placeholder = '请输入正文' } = this.props;
class ImageMenu extends BtnMenu {
constructor(editor) {
// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
......@@ -89,6 +89,7 @@ class GraphicsEditor extends React.Component {
this.editorInt = new E(`#editor${editorId}`);
this.editorInt.config.focus = false;
this.editorInt.config.showFullScreen = !isIntro;
this.editorInt.config.placeholder = placeholder;
this.editorInt.menus.extend('xmimage', ImageMenu);
!isIntro && this.editorInt.menus.extend('xmvideo', VideoMenu);
this.editorInt.config.menus = isIntro
......
src/modules/task-center/train-task/AddTrainTask.jsx
......@@ -2,13 +2,13 @@
* @Author: yuananting
* @Date: 2021-07-29 13:57:03
* @LastEditors: yuananting
* @LastEditTime: 2021-08-02 10:42:28
* @LastEditTime: 2021-08-02 17:25:17
* @Description: 任务中心-培训任务-新建页面
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from 'react';
import { Button, Tabs, message, Modal } from 'antd';
import { Button, Tabs, message, Modal, Space } from 'antd';
import ShowTips from '@/components/ShowTips';
import Breadcrumbs from '@/components/Breadcrumbs';
import BasicInfo from './components/BasicInfo';
......@@ -78,6 +78,7 @@ function AddTrainTask() {
</Choose>
);
}
function handleGoBack() {
window.RCHistory.goBack();
}
......@@ -100,14 +101,25 @@ function AddTrainTask() {
<div className='show-tips'>
<ShowTips message='请遵守国家相关规定，切勿上传低俗色情、暴力恐怖、谣言诈骗、侵权盗版等相关内容，小麦企学院保有依据国家规定及平台规则进行处理的权利' />
</div>
<Tabs centered={true} onChange={(key) => setActiveStep(key)}>
<TabPane tab='1 基本信息' key='BASIC_INFO'>
<BasicInfo data={basicInfo} onChange={handleChangeBasicInfo} />
</TabPane>
<TabPane tab='2 培训内容' key='TRAIN_CONTENT'>
<TrainContent data={taskList} onChange={handleChangeTaskInfo} />
</TabPane>
</Tabs>
<div className='header-tab'>
<span className='tab-title' onClick={() => setActiveStep('BASIC_INFO')}>
<span className={`step-icon ${activeStep === 'BASIC_INFO' ? 'active-icon' : 'default-icon'}`}>1</span>
<span style={{ position: 'relative' }}>
<span className={`${activeStep === 'BASIC_INFO' && 'active-text'}`}>基本信息</span>
{activeStep === 'BASIC_INFO' && <span className='active-line'></span>}
</span>
</span>
<span className='next-arrow'></span>
<span className='tab-title' onClick={() => setActiveStep('TRAIN_CONTENT')}>
<span className={`step-icon ${activeStep === 'TRAIN_CONTENT' ? 'active-icon' : 'default-icon'}`}>2</span>
<span style={{ position: 'relative' }}>
<span className={`${activeStep === 'TRAIN_CONTENT' && 'active-text'}`}>培训内容</span>
{activeStep === 'TRAIN_CONTENT' && <span className='active-line'></span>}
</span>
</span>
</div>
{activeStep === 'BASIC_INFO' && <BasicInfo data={basicInfo} onChange={handleChangeBasicInfo} />}
{activeStep === 'TRAIN_CONTENT' && <TrainContent data={taskList} onChange={handleChangeTaskInfo} />}
</div>
{renderFooter()}
</div>
......
src/modules/task-center/train-task/AddTrainTask.less
.add-train-task {
.header-tab {
position: relative;
padding: 20px 0 12px 0;
text-align: center;
font-size: 16px;
color: #666666;
line-height: 22px;
border-bottom: 1px solid #e8e8e8;
margin-bottom: 20px;
.tab-title {
position: relative;
cursor: pointer;
&:first-child {
margin-right: 44px;
}
.step-icon {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 12px;
text-align: center;
line-height: 14px;
margin-right: 8px;
&.default-icon {
border: 1px solid #999999;
color: #999999;
}
&.active-icon {
background-color: #2966ff;
border: 1px solid #2966ff;
color: #ffffff;
}
}
.active-text {
color: #2966ff;
}
.active-line {
position: absolute;
width: 32px;
height: 2px;
background: #2966ff;
top: 34px;
left: 16px;
z-index: 999;
}
}
&::after {
content: ' ';
height: 10px;
width: 10px;
border-width: 2px 2px 0 0;
border-color: #999999;
border-style: solid;
transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
position: absolute;
top: 50%;
left: calc(50% - 5px);
}
}
.footer {
position: fixed;
left: 196px;
......
src/modules/task-center/train-task/components/BasicInfo.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-07-29 14:32:24
* @LastEditors: yuananting
* @LastEditTime: 2021-07-30 16:23:11
* @LastEditTime: 2021-08-02 17:50:51
* @Description: 任务中心-培训任务-新建-基本信息
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -41,80 +41,7 @@ function BasicInfo(props) {
percentCompletePicture,
} = data;
const isDefaultCover = true;
const helpStoreUsers = [
{
id: 1,
name: 'y阿萨德at',
},
{
id: 2,
name: 'ASFSDFAtgdf',
},
{
id: 3,
name: 'sfasfasdffff',
},
{
id: 4,
name: 'fsaf',
},
{
id: 5,
name: '示范法as',
},
{
id: 6,
name: '会尽快个何况',
},
{
id: 7,
name: '千多',
},
{
id: 8,
name: '我二合一',
},
{
id: 9,
name: '发顺丰',
},
{
id: 10,
name: '时高时低',
},
{
id: 11,
name: 'ASFSDFAtgdf',
},
{
id: 12,
name: '撒的A',
},
{
id: 13,
name: '山东高速广东省广东省怪怪的',
},
{
id: 14,
name: '而言二',
},
{
id: 15,
name: '而已',
},
{
id: 16,
name: '一条鱼',
},
{
id: 17,
name: '水电费干啥',
},
{
id: 18,
name: 'AddTrainTask',
},
];
const helpStoreUsers = [];
const assignList1 = [
{
......@@ -171,38 +98,6 @@ function BasicInfo(props) {
id: 10,
name: 'iuyti第三方感受到',
},
{
id: 11,
name: 'ASFSDFAtgdf',
},
{
id: 12,
name: '撒的A',
},
{
id: 13,
name: '耳热耳热让他一人',
},
{
id: 14,
name: '而言二',
},
{
id: 15,
name: '而已',
},
{
id: 16,
name: '一条鱼',
},
{
id: 17,
name: '水电费干啥',
},
{
id: 18,
name: 'AddTrainTask',
},
];
// 使用默认封面图
......@@ -312,9 +207,9 @@ function BasicInfo(props) {
</div>
</FormItem>
<FormItem label='指派学员' required>
<div className='item-btn'>添加指派对象</div>
<Button style={{ display: 'block' }}>添加指派对象</Button>
{assignList1.length + assignList2.length > 0 && (
<Space size={'12'} direction={'vertical'} className='item-obj'>
<Space size={'12'} direction={'vertical'} className='select-obj'>
{assignList1.length > 0 && (
<div className='obj-type-container'>
<div className='type-title'>已选组织：</div>
......@@ -339,9 +234,9 @@ function BasicInfo(props) {
)}
</FormItem>
<FormItem label='协同人员'>
<div className='item-btn'>添加协同者</div>
<Button style={{ display: 'block' }}>添加协同者</Button>
{helpStoreUsers.length > 0 && (
<div className='item-obj'>
<div className='select-obj'>
{_.map(helpStoreUsers, (item) => {
return <Tag closable>{item.name}</Tag>;
})}
......@@ -353,6 +248,7 @@ function BasicInfo(props) {
maxLimit={1000}
id='intro'
isIntro={true}
placeholder='请输入培训目的'
detail={{
content: instro,
}}
......
src/modules/task-center/train-task/components/BasicInfo.less
......@@ -46,6 +46,7 @@
}
}
}
.duration {
&__wrap {
.tips {
......@@ -59,13 +60,32 @@
}
}
}
.ant-form-item-extra {
.learning-model-tips {
margin-top: 8px;
color: #999999;
line-height: 20px;
.select-obj {
width: 600px;
max-height: 90px;
overflow-y: scroll;
padding: 12px;
border-radius: 4px;
margin-top: 10px;
border: 1px solid #e8e8e8;
color: #666666;
.obj-type-container {
display: flex;
overflow-wrap: normal;
.type-title {
width: 70px;
flex-shrink: 0;
}
}
}
.learning-model-tips {
margin-top: 8px;
color: #999999;
line-height: 20px;
}
.ant-form-item {
margin-bottom: 24px !important;
.ant-form-item-label > label {
......@@ -85,26 +105,4 @@
font-size: 14px;
}
}
.item-btn {
color: #2966ff;
}
.item-obj {
width: 600px;
max-height: 90px;
overflow-y: scroll;
padding: 12px;
border-radius: 4px;
margin-top: 10px;
border: 1px solid #e8e8e8;
color: #666666;
.obj-type-container {
display: flex;
overflow-wrap: normal;
.type-title {
width: 70px;
flex-shrink: 0;
}
}
}
}
src/modules/task-center/train-task/components/ExpiredCourseList.jsx 0 → 100644
/*
* @Author: yuananting
* @Date: 2021-08-03 10:47:59
* @LastEditors: yuananting
* @LastEditTime: 2021-08-03 14:08:56
* @Description: 编辑培训任务-失效课程
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { List } from 'antd';
import './ExpiredCourseList.less';
import { LearningContentIcon } from '@/common/constants/academic/taskEnum';
function ExpiredCourseList(props) {
const expiredCourseList = [1, 2, 3, 4];
return (
<div className='expired-list-page'>
<div className='tip'>为了不影响学员学习，「未成功开课」的课程已从任务中移出，具体课程如下所示：</div>
<List
dataSource={expiredCourseList}
renderItem={(item) => (
<List.Item>
<div className='item-detail'>
<span className='icon iconfont'>&#xe80b;</span>
<span className='content-status'>未成功开课</span>
<span className='stage-name'>阶段一、</span>
<span className='content-name'>
<img src={LearningContentIcon['LIVE']} />
<span>2.1 入门培训任务</span>
</span>
<span className='teacher-name'>张老师</span>
<span className='split'>|</span>
<span className='course-time'>2020-12-12 09:00~10:00</span>
<span className='del-btn'>删除记录</span>
</div>
</List.Item>
)}
/>
</div>
);
}
export default ExpiredCourseList;
src/modules/task-center/train-task/components/ExpiredCourseList.less 0 → 100644
.expired-list-page {
.tip {
color: #999999;
line-height: 20px;
margin-top: 8px;
margin-bottom: 16px;
}
.ant-list-item {
padding: 16px;
border: none !important;
&:nth-child(even) {
background: #ffffff;
}
&:nth-child(odd) {
background: #f7f8f9;
}
.item-detail {
display: inline-flex;
width: 100%;
height: 20px;
.icon {
font-size: 14px;
color: #ff4f4f;
margin-right: 4px;
}
.content-status {
color: #999999;
margin-right: 24px;
}
.stage-name {
color: #333333;
margin-right: 12px;
}
.content-name {
color: #333333;
margin-right: 12px;
vertical-align: middle;
> * {
vertical-align: middle;
}
img {
width: 20px;
height: 20px;
margin-right: 12px;
}
}
.teacher-name,
.course-time {
color: #999999;
}
.split {
margin-left: 12px;
margin-right: 12px;
color: #999999;
}
.del-btn {
margin-left: auto;
color: #2966ff;
cursor: pointer;
}
}
}
}
src/modules/task-center/train-task/components/RelatedCourseDrawer.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-08-01 17:28:30
* @LastEditors: yuananting
* @LastEditTime: 2021-08-02 11:09:50
* @LastEditTime: 2021-08-02 14:26:43
* @Description: 新建培训任务-关联课程抽屉
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -553,7 +553,6 @@ class RelatedCourseDrawer extends Component {
pictureTotalCount,
videoCourseDivision,
} = this.state;
const { visible } = this.props;
return (
<Drawer
......@@ -562,7 +561,7 @@ class RelatedCourseDrawer extends Component {
maskClosable={false}
closable={true}
onClose={this.props.onClose}
visible={visible}
visible={true}
mask
className='related-course-drawer'>
<div>
......@@ -873,7 +872,18 @@ class RelatedCourseDrawer extends Component {
</div>
<div className='footer shrink-footer'>
<Button onClick={this.props.onClose}>取消</Button>
<Button type='primary'>保存</Button>
<Button
type='primary'
onClick={() =>
this.props.onSelect([
...this.handleSelectVideo(selectVideo.internal),
...this.handleSelectVideo(selectVideo.external),
...this.handleSelectLive(selectLive),
...this.handleSelectPicture(selectPicture),
])
}>
确定
</Button>
</div>
</Drawer>
);
......
src/modules/task-center/train-task/components/RelatedExamDrawer.less 0 → 100644
.related-exam-drawer {
.module-title {
font-size: 16px;
color: #333333;
line-height: 22px;
margin-bottom: 24px;
}
.ant-form-item {
margin-bottom: 24px !important;
.graphics-editor-container {
width: 550px;
height: 130px;
}
}
}
src/modules/task-center/train-task/components/TrainContent.less
.train-content__warp {
.ant-collapse-content {
padding-left: 24px !important;
.train-content-page {
.train-content__warp {
.ant-collapse-header {
padding: 15px 16px !important;
background-color: #f7f8f9;
}
.add-stage-btn {
color: #2966ff;
height: 52px;
background: #f7f8f9;
padding: 16px;
cursor: pointer;
}
}
.expired-info__wrap {
margin-top: 24px;
.module-title {
height: 22px;
font-size: 16px;
color: #333333;
line-height: 22px;
}
}
.finish-standard__warp {
margin-top: 24px;
.module-title {
height: 22px;
font-size: 16px;
color: #333333;
line-height: 22px;
.icon {
font-size: 12px;
margin-left: 8px;
color: #5e606a;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.rotate-arrow {
transform: (rotate(180deg));
}
}
.detail-container {
margin-top: 24px;
display: flex;
.title-text {
color: #333333;
line-height: 20px;
}
.detail-box {
margin-top: -4px;
.item-info {
color: #333333;
vertical-align: middle;
margin-bottom: 20px;
* {
vertical-align: middle;
}
img {
width: 20px;
height: 20px;
margin-right: 8px;
}
.input-box {
width: 60px;
height: 32px;
border-radius: 2px;
border: 1px solid #e8e8e8;
margin: 0 4px;
}
}
}
}
}
}
.sort-task-item {
.sort-stage-item {
width: calc(100% - 24px);
display: inline-flex;
align-items: center;
.ant-form-item {
margin-bottom: 0 !important;
}
.item-name {
line-height: 20px;
.item-info {
color: #333333;
}
.item-operate {
display: none;
margin-left: 30px;
......@@ -28,32 +98,98 @@
}
}
}
&:hover {
.item-operate {
display: block;
}
}
.drag-btn {
margin-left: auto;
.ant-form {
display: inline-block;
.ant-form-item {
margin-bottom: 0 !important;
}
}
}
.add-course-btn {
color: #2966ff;
.sort-content-item {
display: flex;
padding: 15px 16px !important;
margin-left: 40px;
justify-content: space-between;
align-items: center;
border-bottom: 1px dotted #e8e8e8;
vertical-align: middle;
* {
vertical-align: middle;
height: 20px;
}
&:hover {
.content-operate {
display: block;
}
}
.content-info {
.content-name {
color: #333333;
font-size: 14px;
margin-left: 12px;
}
.extra-info {
color: #999999;
margin-left: 12px;
}
.tip {
font-size: 14px;
color: #ff4f4f;
margin-right: 2px;
}
}
.content-operate {
display: none;
margin-left: 26px;
.operate__item {
cursor: pointer;
color: #666666;
.icon {
font-size: 14px;
color: #bfbfbf;
}
.text {
margin-left: 8px;
}
}
}
}
.add-task-btn {
.type-option-icon {
width: 20px;
height: 20px;
}
.type-option-text {
margin-left: 12px;
}
.drag-btn {
margin-left: auto;
color: #cccccc;
cursor: pointer;
}
.add-content-btn {
color: #2966ff;
height: 52px;
background: #f7f8f9;
border-radius: 2px;
padding: 16px;
margin-top: 16px;
cursor: pointer;
display: inline-block;
}
.type-option-icon {
width: 20px;
height: 20px;
margin-right: 12px;
.ant-collapse-content {
padding-left: 24px !important;
> .ant-collapse-content-box {
padding: 0 !important;
}
}
src/modules/task-center/train-task/components/TrainFilter.jsx
......@@ -7,14 +7,12 @@
*/
import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { Row, Input, Select, Tooltip } from 'antd';
import RangePicker from '@/modules/common/DateRangePicker';
import moment from 'moment';
import StoreService from '@/domains/store-domain/storeService';
import './TrainFilter.less';
const { Search } = Input;
const { Option } = Select;
const DEFAULT_QUERY = {
// 头部筛选默认值
......@@ -29,6 +27,7 @@ const DEFAULT_CREATOR_QUERY = {
current: 1,
nickName: null, // 搜索值
};
function TrainFilter(props) {
const [query, setQuery] = useState(DEFAULT_QUERY);
const [hasNext, setHasNext] = useState(false);
......@@ -54,7 +53,7 @@ function TrainFilter(props) {
});
}
// 滑动加载更多讲师列表
// 滑动加载更多创建人列表（讲师）
function handleScrollCreatorList(e) {
const container = e.target;
const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop;
......@@ -145,7 +144,7 @@ function TrainFilter(props) {
<div className='search-condition__item'>
<span className='search-date'>创建日期：</span>
<RangePicker
id='course_date_picker'
id='train_date_picker'
allowClear={false}
value={query.startTime ? [moment(query.startTime), moment(query.endTime)] : null}
format={'YYYY-MM-DD'}
......@@ -169,4 +168,4 @@ function TrainFilter(props) {
);
}
export default withRouter(TrainFilter);
export default TrainFilter;
src/modules/task-center/train-task/components/TrainFilter.less
.train-filter-page {
position: relative;
margin-bottom: 4px;
.ant-input-search-button{
border-left:none;
}
.search-condition {
width: calc(100% - 80px);
display: flex;
......@@ -13,26 +8,16 @@
&__item {
width: 30%;
margin-right: 3%;
margin-bottom: 12px;
line-height: 32px;
}
}
.reset-fold-area {
position: absolute;
right: 12px;
}
.resetBtn {
color: #999999;
font-size: 18px;
margin-right: 8px;
}
.fold-btn {
font-size: 14px;
color: #666666;
line-height: 20px;
.fold-icon {
font-size: 12px;
margin-left:4px;
.resetBtn {
color: #999999;
font-size: 18px;
margin-right: 8px;
}
}
}
\ No newline at end of file
}
src/modules/task-center/train-task/components/TrainList.jsx
......@@ -2,19 +2,17 @@
* @Author: yuananting
* @Date: 2021-07-28 14:56:52
* @LastEditors: yuananting
* @LastEditTime: 2021-07-30 12:01:29
* @LastEditTime: 2021-08-02 15:45:37
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useState, useEffect } from 'react';
import { Route, withRouter } from 'react-router-dom'
import { Tabs, Tooltip, Checkbox, Dropdown, Radio, Button, Space } from 'antd';
import { Route, withRouter } from 'react-router-dom';
import { Tooltip, Checkbox, Dropdown, Radio, Button, Space, Badge } from 'antd';
import './TrainList.less';
import { XMTable, PageControl } from '@/components';
import User from '@/common/js/user';
const { TabPane } = Tabs;
function TrainList(props) {
const {
query: { issueState, myAssist, current, size },
......@@ -24,6 +22,7 @@ function TrainList(props) {
function renderMoreOperate(item) {
return (
<div className='live-course-more-menu'>
<div className='operate__item'>取消发布</div>
<div className='operate__item'>编辑</div>
<div className='operate__item'>分享</div>
<div className='operate__item'>审批作业</div>
......@@ -42,16 +41,16 @@ function TrainList(props) {
fixed: 'left',
render: (val, record) => {
return (
<div className='plan_name_item'>
<img className='plan-cover' src={record.coverUrl || 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png'} alt='' />
<div className='train-task-name'>
<img className='train-cover' src={record.coverUrl || 'https://image.xiaomaiketang.com/xm/rEAetaTEh3.png'} alt='' />
<Choose>
<When condition={record.planName.length > 25}>
<Tooltip title={record.planName}>
<div className='plan-name'>{val}</div>
<div className='train-name'>{val}</div>
</Tooltip>
</When>
<Otherwise>
<div className='plan-name'>{val}</div>
<div className='train-name'>{val}</div>
</Otherwise>
</Choose>
</div>
......@@ -64,7 +63,7 @@ function TrainList(props) {
key: 'status',
dataIndex: 'status',
render: (val, record) => {
return <div className='course-number'>{'未开始'}</div>;
return <span>{'未开始'}</span>;
},
},
{
......@@ -73,18 +72,17 @@ function TrainList(props) {
key: 'courseNum',
dataIndex: 'courseNum',
render: (val, record) => {
return <div className='course-number'>{val}</div>;
return <span>{val}</span>;
},
},
{
title: '学习人数',
width: '8%',
align: 'right',
width: '10%',
key: 'cultureCustomerNum',
dataIndex: 'cultureCustomerNum',
sorter: true,
render: (val) => {
return <div className='join-number'>{val}</div>;
return <span style={{ color: '#2966FF' }}>{val}</span>;
},
},
{
......@@ -95,7 +93,7 @@ function TrainList(props) {
<i
className='icon iconfont'
style={{
marginLeft: '5px',
marginLeft: '4px',
cursor: 'pointer',
color: '#bfbfbf',
fontSize: '14px',
......@@ -127,14 +125,14 @@ function TrainList(props) {
title: '创建人',
key: 'createName',
dataIndex: 'createName',
width: '10%',
width: '12%',
render: (val) => {
return <div className='create-name'>{val}</div>;
return <span>{val}</span>;
},
},
{
title: '创建时间',
width: '14%',
width: '12%',
key: 'created',
dataIndex: 'created',
sorter: true,
......@@ -144,7 +142,7 @@ function TrainList(props) {
},
{
title: '更新时间',
width: '10%',
width: '12%',
key: 'updated',
dataIndex: 'updated',
sorter: true,
......@@ -165,43 +163,23 @@ function TrainList(props) {
<div className='operate__item' onClick={() => toLearningDataPage(record)}>
数据
</div>
{record.enableState === 'YES' && (
<>
<span className='operate__item split'> | </span>
<div
className='operate__item'
onClick={() => {
handleShowShareModal(record);
}}>
指派
</div>
</>
)}
{record.enableState === 'YES' && (
<>
<span className='operate__item split'> | </span>
<div
className='operate__item'
onClick={() => {
handleShowShareModal(record);
}}>
发布
</div>
</>
)}
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<>
<span className='operate__item split'> | </span>
<Dropdown overlay={renderMoreOperate(record)}>
<span className='more-operate'>
<span className='operate-text'>更多</span>
<span className='iconfont icon' style={{ color: '#2966FF' }}>
&#xe824;
</span>
</span>
</Dropdown>
</>
)}
<span className='split'> | </span>
<div
className='operate__item'
onClick={() => {
handleShowShareModal(record);
}}>
指派
</div>
<span className='split'> | </span>
<Dropdown overlay={renderMoreOperate(record)}>
<span className='more-operate'>
<span className='more-text'>更多</span>
<span className='iconfont icon' style={{ color: '#2966FF' }}>
&#xe824;
</span>
</span>
</Dropdown>
</div>
);
},
......@@ -240,9 +218,9 @@ function TrainList(props) {
onChange={(e) => {
handleChangeQuery('issueState', e.target.value);
}}>
<Radio.Button value='ALL'>全部</Radio.Button>
<Radio.Button value='YES'>已发布</Radio.Button>
<Radio.Button value='NO'>未发布</Radio.Button>
<Radio.Button value='ALL'>全部(2)</Radio.Button>
<Radio.Button value='YES'>已发布(2)</Radio.Button>
<Radio.Button value='NO'>未发布(10)</Radio.Button>
</Radio.Group>
<Checkbox style={{ lineHeight: '32px' }} value={myAssist} onChange={(e) => handleChangeQuery('myAssist', e.target.checked)}>
只看我协同的 ({10})
......@@ -260,7 +238,7 @@ function TrainList(props) {
bordered
size='middle'
scroll={{ x: 1600 }}
// className='plan-list-table'
className='train-list-table'
renderEmpty={{
description: <span style={{ display: 'block', paddingBottom: 24 }}>暂无数据</span>,
}}
......
src/modules/task-center/train-task/components/TrainList.less
.train-list-page {
margin-top: 12px;
.header-line {
display: flex;
justify-content: space-between;
margin-top: 16px;
margin-bottom: 12px;
}
.ant-tabs-nav {
margin: 0 !important;
}
.course-number {
margin-right: 45px;
.ant-radio-button-wrapper {
color: #9d9d9d;
&:first-child {
border-radius: 4px 0 0 4px;
}
&:last-child {
border-radius: 0 4px 4px 0;
}
}
.ant-radio-button-wrapper-checked {
color: #2966ff;
}
}
.plan-list-table {
.train-list-table {
.train-task-name {
display: flex;
align-items: center;
.train-cover {
width: 106px;
height: 60px;
border-radius: 2px;
margin-right: 8px;
}
.train-name {
width: 188px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 40px;
}
}
.operate {
display: flex;
&__item {
color: #2966ff;
cursor: pointer;
}
.split {
margin: 0 8px;
color: #bfbfbf;
}
.more-text {
color: #2966ff;
cursor: pointer;
}
}
.tip {
cursor: pointer;
color: '#bfbfbf';
margin-left: 5px;
font-weight: normal;
}
thead.ant-table-thead {
tr {
th {
padding: 10px 12px;
padding: 10px 16px;
}
}
}
tbody {
tr {
td.ant-table-cell {
padding: 16px 12px;
padding: 20px 16px;
color: #333;
}
&:nth-child(even) {
......@@ -46,48 +97,4 @@
}
}
}
.plan_name_item {
display: flex;
align-items: center;
.plan-cover {
width: 106px;
height: 60px;
border-radius: 2px;
margin-right: 8px;
}
.plan-name {
width: 188px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 40px;
}
}
.operate-text {
color: #2966ff;
cursor: pointer;
}
.operate {
display: flex;
&__item {
color: #2966ff;
cursor: pointer;
&.split {
margin: 0 8px;
color: #bfbfbf;
}
}
}
.join-number {
text-align: right;
margin-right: 12px;
}
.more-operate {
line-height: 20px;
}
}
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