Skip to content

X
xiaomai-cloud-class-web
Commit 9ff56087 by zhujian
Options

fix

parent 0186c213
Showing with 93 additions and 49 deletions
src/modules/task-center/data-center/components/CourseTable.tsx
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import moment from 'moment'; import ExpiredCourseList from '../../train-task/components/ExpiredCourseList';
import ENUM from '../../enum'; import ENUM from '../../enum';
import './course.less' import './course.less'
...@@ -8,8 +8,9 @@ function CourseTable(props: any) { ...@@ -8,8 +8,9 @@ function CourseTable(props: any) {
const IndexText = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'] const IndexText = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
const [list, setList] = useState<any[]>([]); const [list, setList] = useState<any[]>([]);
useEffect(() => { useEffect(() => {
setList(props.info.trainingTaskList || []) console.log(props.info, 'rtyuio')
}, [props.info.trainingTaskList]) setList(props.info.trainingStageList || [])
}, [props.info.trainingStageList])
return <div className="courseTabContent"> return <div className="courseTabContent">
<div className="tips">{`培训目的：${'djkhdsjksdhdsj'}`}</div> <div className="tips">{`培训目的：${'djkhdsjksdhdsj'}`}</div>
...@@ -29,18 +30,19 @@ function CourseTable(props: any) { ...@@ -29,18 +30,19 @@ function CourseTable(props: any) {
{ {
`${IndexText[index]}、 ` `${IndexText[index]}、 `
} }
{item.taskName} {item.stageName}
</div> </div>
{ {
item.open && <div className="taskItemList"> item.open && <div className="taskItemList">
{ {
item.courseList.map((_item: any, _index: number) => { item.contentVOList.map((_item: any, _index: number) => {
return <div className={_index == item.courseList.length - 1 ? "item noBorder" : "item"}> return <div className={_index == item.contentVOList.length - 1 ? "item noBorder" : "item"}>
<div className="name"> <div className="name">
<img className='type-option-icon' src={ENUM.LearningContentIcon[_item.courseType || _item.contentType]} />
<span style={{ marginRight: 4 }}> {`${index + 1}.${_index + 1}`}</span> <span style={{ marginRight: 4 }}> {`${index + 1}.${_index + 1}`}</span>
{ {
_item.courseName _item.contentName
} }
{ {
(_item.courseType == 'LIVE') && <span className='desc'>{ENUM.courseStateShow[_item.courseState].title}</span> (_item.courseType == 'LIVE') && <span className='desc'>{ENUM.courseStateShow[_item.courseState].title}</span>
...@@ -64,28 +66,13 @@ function CourseTable(props: any) { ...@@ -64,28 +66,13 @@ function CourseTable(props: any) {
</div> </div>
<div className="expired"> <div className="expired">
<div className="title">失效课程</div> <div className="title">失效课程</div>
<p className="desc">为了不影响学员学习，「未成功开课」的课程已从任务中移出，具体课程如下所示：</p>
<div className="list">
{
list.map((item: any) => {
return <div className="item">
<div className="text">
<span className="icon iconfont" style={{ color: 'rgba(255, 79, 79, 1)' ,marginRight:4}}>&#xe80b;</span>
<span style={{marginRight:24}}>未成功开课</span>
<span className='na'>阶段一</span>
<span className='na'>2.1 入门培训任务</span>
<span >张老师 </span>
<span>|</span>
<span>{moment().format('YYYY-MM-DD HH:mm')}</span>
</div>
<div className="ope">删除记录</div>
</div> <div className="list">
}) <ExpiredCourseList expiredCourseList={list} />
}
</div> </div>
</div> </div>
</div> </div>
} }
......
src/modules/task-center/data-center/components/StudyTable.tsx
import React, { useEffect, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Route, withRouter } from "react-router-dom"; import { Route, withRouter } from "react-router-dom";
import { Row, Input, Select, Tooltip, Col } from 'antd'; import { Row, Input, Select, Tooltip, Col } from 'antd';
import RangePicker from '@/modules/common/DateRangePicker'; import RangePicker from '@/modules/common/DateRangePicker';
...@@ -8,11 +8,13 @@ import ENUM from '../../enum'; ...@@ -8,11 +8,13 @@ import ENUM from '../../enum';
import User from '@/common/js/user'; import User from '@/common/js/user';
import moment from 'moment'; import moment from 'moment';
import UserLearningData from '../UserLearningData'; import UserLearningData from '../UserLearningData';
import { timers } from 'jquery';
const { Search } = Input; const { Search } = Input;
const { Option } = Select; const { Option } = Select;
declare var formatDate: any; declare var formatDate: any;
function StudyTable(props: any) { function StudyTable(props: any) {
console.log(props,'rtyjukl')
const [query, setQuery] = useState<any>({ const [query, setQuery] = useState<any>({
current: 1, size: 10, current: 1, size: 10,
taskId: props.taskId, taskId: props.taskId,
...@@ -23,6 +25,8 @@ function StudyTable(props: any) { ...@@ -23,6 +25,8 @@ function StudyTable(props: any) {
}); });
const [list, setList] = useState<any[]>([]); const [list, setList] = useState<any[]>([]);
const [total, setTotal] = useState<any>(0); const [total, setTotal] = useState<any>(0);
const [name, setName] = useState<any>('');
const timer = useRef<any>(null)
useEffect(() => { useEffect(() => {
getList() getList()
...@@ -31,7 +35,7 @@ function StudyTable(props: any) { ...@@ -31,7 +35,7 @@ function StudyTable(props: any) {
function getList() { function getList() {
Service.Hades('public/hades/getTaskCustomerRecordPage', query).then((res: any) => { Service.Hades('public/hades/getTaskCustomerRecordPage', query).then((res: any) => {
setList(res.result.records) setList(res.result.records)
setTotal(res.result.tatal) setTotal(res.result.total)
}) })
} }
...@@ -51,8 +55,12 @@ function StudyTable(props: any) { ...@@ -51,8 +55,12 @@ function StudyTable(props: any) {
}, },
{ {
title: '部门', title: '部门',
key: 'learnState2', key: 'departmentNameList',
dataIndex: 'learnState2', dataIndex: 'departmentNameList',
render: (val: any, record: any) => {
return <div>{val.join(';')}</div>;
},
}, },
{ {
...@@ -67,16 +75,15 @@ function StudyTable(props: any) { ...@@ -67,16 +75,15 @@ function StudyTable(props: any) {
dataIndex: 'learnState', dataIndex: 'learnState',
render: (val: any, record: any) => { render: (val: any, record: any) => {
return <div>{ENUM.LearnState[val].text}</div>; return <div>{ENUM.learnState[val].text}</div>;
}, },
}, },
{ {
title: '学习进度', title: '学习进度',
key: 'learnState', key: 'learnPercentage',
dataIndex: 'learnState', dataIndex: 'learnPercentage',
render: (val: any, record: any) => { render: (val: any, record: any) => {
return `${val}%`;
return <div></div>;
}, },
}, },
...@@ -109,7 +116,7 @@ function StudyTable(props: any) { ...@@ -109,7 +116,7 @@ function StudyTable(props: any) {
render: (val: any, record: any) => { render: (val: any, record: any) => {
return ( return (
<div className='operate-area'> <div className='operate-area'>
<span className='operate-item' onClick={() => {console.log(props.match); props.history.push(`${props.match.path}/user-learning-data`);}}> <span className='operate-item' style={{ color: 'rgba(41, 102, 255, 1)', cursor: 'pointer' }} onClick={() => { console.log(props.match); props.history.push(`${props.match.url}/user-learning-data`); }}>
查看数据 查看数据
</span> </span>
...@@ -128,9 +135,19 @@ function StudyTable(props: any) { ...@@ -128,9 +135,19 @@ function StudyTable(props: any) {
<span className='label'>学员：</span> <span className='label'>学员：</span>
<div className="search"> <div className="search">
<Search <Search
value={query.customerName} value={name}
placeholder='搜索学员名称' placeholder='搜索学员名称'
onChange={(e) => { onChange={(e) => {
setName(e.target.value);
clearTimeout(timer.current)
var name = e.target.value
timer.current = setTimeout(() => {
setQuery({
...query,
current: 1,
customerName: name
})
}, 500)
}} }}
onSearch={() => { onSearch={() => {
...@@ -152,16 +169,24 @@ function StudyTable(props: any) { ...@@ -152,16 +169,24 @@ function StudyTable(props: any) {
allowClear={true} allowClear={true}
value={query.learnState} value={query.learnState}
onChange={(value) => { onChange={(value) => {
setQuery({
...query,
current: 1,
learnState: value
})
}} }}
suffixIcon={ suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}> <span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835; &#xe835;
</span> </span>
}> }>
<Option value='UN_PLAY'>未开始</Option> {
<Option value='UNDER_WAY'>进行中</Option> Object.keys(ENUM.learnState).map((key: any) => {
<Option value='FINISH'>已完成</Option> return <Option value={key}>{ENUM.learnState[key].text}</Option>
})
}
</Select> </Select>
</div> </div>
...@@ -178,7 +203,12 @@ function StudyTable(props: any) { ...@@ -178,7 +203,12 @@ function StudyTable(props: any) {
value={query.startTime ? [moment(query.startTime), moment(query.endTime)] : null} value={query.startTime ? [moment(query.startTime), moment(query.endTime)] : null}
format={'YYYY-MM-DD'} format={'YYYY-MM-DD'}
onChange={(dates: any) => { onChange={(dates: any) => {
setQuery({
...query,
current: 1,
startTime: dates[0]?.startOf('day').valueOf(),
endTime: dates[0]?.endOf('day').valueOf(),
})
}} }}
/> />
...@@ -188,7 +218,17 @@ function StudyTable(props: any) { ...@@ -188,7 +218,17 @@ function StudyTable(props: any) {
</Col> </Col>
<Col offset={2} span={1} > <Col offset={2} span={1} >
<Tooltip title='清空筛选'> <Tooltip title='清空筛选'>
<span className='resetBtn iconfont icon' onClick={() => { }}> <span className='resetBtn iconfont icon' onClick={() => {
setName('');
setQuery({
current: 1, size: 10,
taskId: props.taskId,
source: 0,
storeId: User.getStoreId(),
storeUserId: User.getStoreUserId(),
userId: User.getStoreUserId(),
})
}}>
&#xe61b;{' '} &#xe61b;{' '}
</span> </span>
</Tooltip> </Tooltip>
...@@ -196,28 +236,28 @@ function StudyTable(props: any) { ...@@ -196,28 +236,28 @@ function StudyTable(props: any) {
</Row> </Row>
</div> </div>
<div style={{marginTop:12}}> <div style={{ marginTop: 12 }}>
<XMTable <XMTable
renderEmpty={{ renderEmpty={{
type: 'college', type: 'college',
description: '暂无数据', description: '暂无数据',
}} }}
rowKey={(record:any) => record.storeCustomerId} rowKey={(record: any) => record.storeCustomerId}
dataSource={list} dataSource={list}
columns={columns} columns={columns}
pagination={false} pagination={false}
className='user-learning-table' className='user-learning-table'
onChange={()=>{}} onChange={() => { }}
showSorterTooltip={false} showSorterTooltip={false}
bordered bordered
/> />
{list.length > 0 && ( {list && list.length > 0 && (
<div className='box-footer'> <div className='box-footer'>
<PageControl <PageControl
current={query.current - 1} current={query.current - 1}
pageSize={query.size} pageSize={query.size}
total={total} total={total}
toPage={(page:any) => { toPage={(page: any) => {
setQuery({ ...query, current: query.current + 1 }) setQuery({ ...query, current: query.current + 1 })
}} }}
......
src/modules/task-center/data-center/index.less
...@@ -13,9 +13,10 @@ ...@@ -13,9 +13,10 @@
.left{ .left{
display: flex; display: flex;
.banner{ .banner{
margin-right: 16px; padding: 16px;
img{ img{
height: 141px; width: 194px;
height: 109px;
} }
} }
.textBox{ .textBox{
......
src/modules/task-center/enum.ts
...@@ -26,6 +26,22 @@ const ENUM: any = { ...@@ -26,6 +26,22 @@ const ENUM: any = {
}, },
}, },
learnState: {
UN_FINISH: {
text: "未完成",
},
FINISH: {
text: "已完成",
},
OVERDUE: {
text: "已逾期",
},
},
courseStateShow: { courseStateShow: {
UN_START: { UN_START: {
title: '待开播', title: '待开播',
......
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