Skip to content

X
xiaomai-cloud-class-web
Commit 7b88a534 by yuananting
Options

feat:培训计划学习进度接口联调

parent 5ca73a22
Showing with 233 additions and 211 deletions
src/data-source/plan/request-apis.ts
/*
* @Author: zhangleyuan
* @Date: 2021-02-21 16:08:38
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-09 12:54:31
* @LastEditors: yuananting
* @LastEditTime: 2021-07-06 11:26:27
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import Service from "@/common/js/service";
import Service from '@/common/js/service';
export function getTrainingPlanPage(params: object) {
return Service.Hades("public/hades/getTrainingPlanPage", params);
return Service.Hades('public/hades/getTrainingPlanPage', params);
}
export function createTrainingPlan(params: object) {
return Service.Hades("public/hades/createTrainingPlan", params);
return Service.Hades('public/hades/createTrainingPlan', params);
}
export function updateStateTrainingPlan(params: object) {
return Service.Hades("public/hades/updateStateTrainingPlan", params);
return Service.Hades('public/hades/updateStateTrainingPlan', params);
}
export function getTrainingPlanDetail(params: object) {
return Service.Hades("public/hades/getTrainingPlanDetail", params);
return Service.Hades('public/hades/getTrainingPlanDetail', params);
}
export function updateTrainingPlan(params: object) {
return Service.Hades("public/hades/updateTrainingPlan", params);
return Service.Hades('public/hades/updateTrainingPlan', params);
}
export function deleteTrainingPlan(params: object) {
return Service.Hades("public/hades/deleteTrainingPlan", params);
return Service.Hades('public/hades/deleteTrainingPlan', params);
}
export function getPlanUserRecordPage(params: object) {
return Service.Hades("public/hades/getPlanUserRecordPage", params);
return Service.Hades('public/hades/getPlanUserRecordPage', params);
}
export function getPlanCustomerRecordPage(params: object) {
return Service.Hades("public/hades/getPlanCustomerRecordPage", params);
return Service.Hades('public/hades/getPlanCustomerRecordPage', params);
}
export function getPlanCustomerDetail(params: object) {
return Service.Hades("public/hades/getPlanCustomerDetail", params);
return Service.Hades('public/customerHades/getPlanCustomerDetail', params);
}
export function getPlanCustomerAboutUser(params: object) {
return Service.Hades("public/hades/getPlanCustomerAboutUser", params);
return Service.Hades('public/hades/getPlanCustomerAboutUser', params);
}
export function removePlanCustomer(params: object) {
return Service.Hades("public/hades/removePlanCustomer", params);
return Service.Hades('public/hades/removePlanCustomer', params);
}
export function getStorePlanAll(params: object) {
return Service.Hades("public/hades/getStorePlanAll", params);
return Service.Hades('public/hades/getStorePlanAll', params);
}
export function getTrainingCourseAutoCancel(params: object) {
return Service.Hades("public/hades/getTrainingCourseAutoCancel", params);
}
\ No newline at end of file
return Service.Hades('public/hades/getTrainingCourseAutoCancel', params);
}
src/modules/plan-manage/components/UserLearningDataFilter.jsx
/*
* @Author: 吴文洁
* @Date: 2020-07-14 15:41:30
* @Author: 吴文洁
* @Date: 2020-07-14 15:41:30
* @Last Modified by: 吴文洁
* @Last Modified time: 2020-07-23 13:45:16
* @Description: 大班直播、互动班课列表的筛选组件
......@@ -8,69 +8,66 @@
import React, { useState, useRef, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { Row, Input, Select ,Tooltip} from 'antd';
import RangePicker from "@/modules/common/DateRangePicker";
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 User from '@/common/js/user'
import StoreService from '@/domains/store-domain/storeService';
import User from '@/common/js/user';
import Bus from '@/core/bus';
import './UserLearningDataFilter.less';
const { Search } = Input;
const { Option } = Select;
const userRole = User.getUserRole();
const userRole = User.getUserRole();
const DEFAULT_QUERY = {
customerName: null,
startTime: null,
endTime:null,
learnState:null,
endTime: null,
learnState: null,
operateId: null,
}
};
const defaultCreatorQuery = {
size: 10,
current: 1,
nickName:null
}
nickName: null,
};
function UserLearningDataFilter(props) {
const [expandFilter, setExpandFilter] = useState(false);
const [query,setQuery] = useState(DEFAULT_QUERY);
const [operateName,setOperateName] = useState(null)
const [hasNext,setHasNext] = useState(false);
const [creatorQuery,setCreatorQuery] = useState(defaultCreatorQuery);
const [creatorList,setCreatorList] = useState([]);
const [query, setQuery] = useState(DEFAULT_QUERY);
const [operateName, setOperateName] = useState(null);
const [hasNext, setHasNext] = useState(false);
const [creatorQuery, setCreatorQuery] = useState(defaultCreatorQuery);
const [creatorList, setCreatorList] = useState([]);
useEffect(() => {
Bus.bind('watchDataView',(record) => handleChangeCreatorQuery(record))
});
Bus.bind('watchDataView', (record) => handleChangeCreatorQuery(record));
}, []);
useEffect(() => {
getCreatorList();
}, []);
function handleChangeCreatorQuery (record){
const _creatorQuery = {...creatorQuery};
function handleChangeCreatorQuery(record) {
const _creatorQuery = { ...creatorQuery };
_creatorQuery.operateId = record.storeUserId;
setCreatorQuery(_creatorQuery);
handleChangeQuery('operateId', record.storeUserId,record.storeUserName)
handleChangeQuery('operateId', record.storeUserId, record.storeUserName);
}
// 改变搜索条件
function handleChangeQuery(field,value,optionValue){
const _query ={
// 改变搜索条件
function handleChangeQuery(field, value, optionValue) {
const _query = {
...query,
[field]: value,
current: 1,
}
};
setQuery(_query);
if(field === 'operateId'){
setOperateName(optionValue)
if (field === 'operateId') {
setOperateName(optionValue);
}
if (field === 'customerName') return;
props.onChange( _query);
props.onChange(_query);
}
function handleChangeDates (dates){
function handleChangeDates(dates) {
const _query = _.clone(query);
if (_.isEmpty(dates)) {
delete _query.startTime;
......@@ -79,149 +76,178 @@ function UserLearningDataFilter(props) {
_query.startTime = dates[0].valueOf();
_query.endTime = dates[1].valueOf();
}
const param ={
const param = {
..._query,
current: 1,
}
};
setQuery(param);
props.onChange(param);
}
// 重置搜索条件
function handleReset(){
function handleReset() {
setQuery(DEFAULT_QUERY);
props.onChange(DEFAULT_QUERY);
}
function getCreatorList(current = 1, selectList){
function getCreatorList(current = 1, selectList) {
const _query = {
...creatorQuery,
current,
size:10
size: 10,
};
StoreService.getStoreUserBasicPage( _query).then((res) => {
const { result = {} } = res;
const { records = [], total = 0, hasNext } = result;
const list = current > 1 ? creatorList.concat(records) : records;
setHasNext(hasNext);
setCreatorList(list);
StoreService.getStoreUserBasicPage(_query).then((res) => {
const { result = {} } = res;
const { records = [], total = 0, hasNext } = result;
const list = current > 1 ? creatorList.concat(records) : records;
setHasNext(hasNext);
setCreatorList(list);
});
}
// 滑动加载更多讲师列表
function handleScrollCreatorList(e){
// 滑动加载更多讲师列表
function handleScrollCreatorList(e) {
const container = e.target;
const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop;
const scrollToBottom = container && container.scrollHeight <= container.clientHeight + container.scrollTop;
if (scrollToBottom && hasNext) {
const _creatorQuery = {...creatorQuery};
const _creatorQuery = { ...creatorQuery };
_creatorQuery.current = creatorQuery.current + 1;
setCreatorQuery(_creatorQuery);
getCreatorList(creatorQuery.current + 1);
}
}
return (
<div className="user-learn-data-filter">
<Row>
<div className="search-condition">
<div className="search-condition__item">
<span className="label customer-label">学员：</span>
<Search
value={query.customerName}
placeholder="搜索学员名称"
onChange={(e) => { handleChangeQuery('customerName', e.target.value)}}
onSearch={ () => { props.onChange(query) } }
style={{ width: "calc(100% - 70px)" }}
enterButton={<span className="icon iconfont">&#xe832;</span>}
/>
</div>
{(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager")&&
<div className="search-condition__item">
<span className="label lead-label">负责人：</span>
<Select
id="leadSelect"
placeholder="请选择员工"
style={{width:"calc(100% - 70px)"}}
showSearch
allowClear
filterOption={(input, option) => option}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
onPopupScroll={handleScrollCreatorList}
value={operateName}
onChange={(value,option) => {
if(option){
handleChangeQuery('operateId',value,option.children)
}else{
handleChangeQuery('operateId',value,"")
}
}}
onSearch={(value) => {
creatorQuery.nickName = value
setCreatorQuery(creatorQuery)
getCreatorList();
}
}
onClear ={(value)=>{
setCreatorQuery({
size: 10,
current: 1,
nickName:null
})
getCreatorList()
}
}
>
{_.map(creatorList, (item, index) => {
return (
<Select.Option value={item.id} key={item.id}>{item.nickName}</Select.Option>
);
})}
</Select>
</div>
}
<div className="search-condition__item">
<span className="label learn-date-label">最近学习日期：</span>
<RangePicker
id="course_date_picker"
allowClear={false}
value={ query.startTime ? [moment(query.startTime), moment(query.endTime)] : null }
format={"YYYY-MM-DD"}
onChange={(dates) => { handleChangeDates(dates) }}
style={{ width: "calc(100% - 98px)" }}
/>
</div>
{ ((expandFilter && (User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager")) || User.getUserRole === "CloudOperator")&&
<div className="search-condition__item">
<span className="label learn-status-label">学习状态：</span>
<Select
style={{ width: "calc(100% - 70px)" }}
placeholder="请选择当前状态"
allowClear={true}
value={query.learnState}
onChange={(value) => { handleChangeQuery('learnState', value) }}
suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}
>
<Option value="UN_PLAY">未开始</Option>
<Option value="UNDER_WAY">进行中</Option>
<Option value="FINISH">已完成</Option>
</Select>
</div>
}
</div>
{( User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager")&&
<div className="reset-fold-area">
<Tooltip title="清空筛选"><span className="resetBtn iconfont icon" onClick={handleReset}>&#xe61b; </span></Tooltip>
<span style={{ cursor: 'pointer' }} className="fold-btn" onClick={() => {
setExpandFilter(!expandFilter)
}}>{expandFilter ? <span><span>收起</span><span className="iconfont icon fold-icon" >&#xe82d; </span> </span> : <span>展开<span className="iconfont icon fold-icon" >&#xe835; </span></span>}</span>
<div className='user-learn-data-filter'>
<Row>
<div className='search-condition'>
<div className='search-condition__item'>
<span className='label customer-label'>学员：</span>
<Search
value={query.customerName}
placeholder='搜索学员名称'
onChange={(e) => {
handleChangeQuery('customerName', e.target.value);
}}
onSearch={() => {
props.onChange(query);
}}
style={{ width: 'calc(100% - 70px)' }}
enterButton={<span className='icon iconfont'>&#xe832;</span>}
/>
</div>
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<div className='search-condition__item'>
<span className='label lead-label'>负责人：</span>
<Select
id='leadSelect'
placeholder='请选择员工'
style={{ width: 'calc(100% - 70px)' }}
showSearch
allowClear
filterOption={(input, option) => option}
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}
onPopupScroll={handleScrollCreatorList}
value={operateName}
onChange={(value, option) => {
if (option) {
handleChangeQuery('operateId', value, option.children);
} else {
handleChangeQuery('operateId', value, '');
}
}}
onSearch={(value) => {
creatorQuery.nickName = value;
setCreatorQuery(creatorQuery);
getCreatorList();
}}
onClear={(value) => {
setCreatorQuery({
size: 10,
current: 1,
nickName: null,
});
getCreatorList();
}}>
{_.map(creatorList, (item, index) => {
return (
<Select.Option value={item.id} key={item.id}>
{item.nickName}
</Select.Option>
);
})}
</Select>
</div>
)}
<div className='search-condition__item'>
<span className='label learn-date-label'>最近学习日期：</span>
<RangePicker
id='course_date_picker'
allowClear={false}
value={query.startTime ? [moment(query.startTime), moment(query.endTime)] : null}
format={'YYYY-MM-DD'}
onChange={(dates) => {
handleChangeDates(dates);
}}
style={{ width: 'calc(100% - 98px)' }}
/>
</div>
{((expandFilter && (User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager')) || User.getUserRole === 'CloudOperator') && (
<div className='search-condition__item'>
<span className='label learn-status-label'>学习状态：</span>
<Select
style={{ width: 'calc(100% - 70px)' }}
placeholder='请选择当前状态'
allowClear={true}
value={query.learnState}
onChange={(value) => {
handleChangeQuery('learnState', value);
}}
suffixIcon={
<span className='icon iconfont' style={{ fontSize: '12px', color: '#BFBFBF' }}>
&#xe835;
</span>
}>
<Option value='UN_PLAY'>未开始</Option>
<Option value='UNDER_WAY'>进行中</Option>
<Option value='FINISH'>已完成</Option>
</Select>
</div>
)}
</div>
{(User.getUserRole() === 'CloudManager' || User.getUserRole() === 'StoreManager') && (
<div className='reset-fold-area'>
<Tooltip title='清空筛选'>
<span className='resetBtn iconfont icon' onClick={handleReset}>
&#xe61b;{' '}
</span>
</Tooltip>
<span
style={{ cursor: 'pointer' }}
className='fold-btn'
onClick={() => {
setExpandFilter(!expandFilter);
}}>
{expandFilter ? (
<span>
<span>收起</span>
<span className='iconfont icon fold-icon'>&#xe82d; </span>{' '}
</span>
) : (
<span>
展开<span className='iconfont icon fold-icon'>&#xe835; </span>
</span>
)}
</span>
</div>
}
</Row>
</div>
)
)}
</Row>
</div>
);
}
export default withRouter(UserLearningDataFilter);
\ No newline at end of file
export default withRouter(UserLearningDataFilter);
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
......@@ -2,7 +2,7 @@
* @Author: yuananting
* @Date: 2021-07-05 10:50:30
* @LastEditors: yuananting
* @LastEditTime: 2021-07-05 11:05:31
* @LastEditTime: 2021-07-06 13:53:12
* @Description: 描述一下咯
* @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
......@@ -80,27 +80,6 @@ class UserLearnDetailModal extends React.Component {
learnFinishPercentage,
coverUrl: coverUrl || defaultCover,
};
taskCustomerVOList.map((item) => {
let videoClass =
item.courseVOList &&
item.courseVOList.filter((childItem, childIndex) => {
return (childItem.courseType = 'VOICE');
});
videoClass.map((chapterItem, chapterIndex) => {
chapterItem.chapterList = [
{
chapterName: '第一节1',
percentage: '80%',
},
{
chapterName: '第一节2',
percentage: '10%',
},
];
return chapterItem;
});
return item;
});
this.setState({
storeCustomerName,
storeCustomerPhone,
......@@ -207,14 +186,28 @@ class UserLearnDetailModal extends React.Component {
const columns = [
{
title: '课节名称',
key: 'chapterName',
dataIndex: 'chapterName',
key: 'name',
dataIndex: 'name',
width: '80%',
render: (val, record, index) => {
return (
<div className='chapter-record'>
<span>
{chapterIndex + 1}.{index + 1}&nbsp;
</span>
<img className='chapter-img' src='https://image.xiaomaiketang.com/xm/TKwbQGYDBR.png' />
<span>{record.name}</span>
</div>
);
},
},
{
title: '学习进度',
key: 'percentage',
dataIndex: 'percentage',
key: 'watchProgress',
dataIndex: 'watchProgress',
render: (val, record) => {
return <span>{val}%</span>;
},
},
];
return columns;
......@@ -252,41 +245,37 @@ class UserLearnDetailModal extends React.Component {
dataSource={taskDataSource}
columns={this.parseTaskColumns()}
pagination={false}
expandedRowRender={(record, index) => {
if (!record.courseVOList) {
return;
}
if (record.courseVOList.length !== 0) {
expandable={{
expandedRowRender: (record, index) => {
return (
<div>
<Table
showHeader={false}
pagination={false}
className='child-table'
rowKey={(record) => record.courseId}
dataSource={record.courseVOList}
columns={this.parseCourseColumns(index)}
className='child-table'
expandedRowRender={(chapterRecord, chapterIndex) => {
if (!chapterRecord.chapterList) {
return;
}
if (chapterRecord.chapterList.length !== 0) {
pagination={false}
expandable={{
expandedRowRender: (chapterRecord, chapterIndex) => {
return (
<div>
<Table
showHeader={false}
pagination={false}
dataSource={chapterRecord.chapterList}
dataSource={chapterRecord.courseChapterList}
columns={this.parseChapterColumns(chapterIndex)}
className='chapter-table'
pagination={false}
/>
</div>
);
}
},
rowExpandable: (record) => record.courseChapterList && record.courseChapterList.length !== 0,
}}
/>
</div>
);
}
},
rowExpandable: (record) => record.courseVOList && record.courseVOList.length !== 0,
}}
rowClassName={(record, index) => {
if (index % 2 === 0) {
......
src/modules/plan-manage/modal/UserLearnDetailModal.less
......@@ -57,6 +57,15 @@
}
}
}
.chapter-record {
display: flex;
align-items: center;
.chapter-img {
width: 18px;
height: 18px;
margin: 0 10px;
}
}
.record-name {
display: flex;
.img-con {
......
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