Skip to content

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

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

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