Skip to content

X
xiaomai-cloud-class-web
Commit f7b2554b by zhangleyuan
Options

feat:处理用户的学习详情

parent 8c1e94a8
Showing with 256 additions and 45 deletions
src/data-source/plan/request-apis.ts
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-21 16:08:38 * @Date: 2021-02-21 16:08:38
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-03 14:07:46 * @LastEditTime: 2021-03-04 13:51:35
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -32,3 +32,6 @@ export function getPlanUserRecordPage(params: object) { ...@@ -32,3 +32,6 @@ export function getPlanUserRecordPage(params: object) {
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) {
return Service.Hades("public/hades/getPlanCustomerDetail", params);
}
src/domains/plan-domain/planService.ts
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-21 16:15:38 * @Date: 2021-02-21 16:15:38
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-03 14:11:27 * @LastEditTime: 2021-03-04 13:51:01
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
import {getTrainingPlanPage,createTrainingPlan,updateStateTrainingPlan,getTrainingPlanDetail,updateTrainingPlan,deleteTrainingPlan,getPlanUserRecordPage,getPlanCustomerRecordPage} from '@/data-source/plan/request-apis'; import {getTrainingPlanPage,createTrainingPlan,updateStateTrainingPlan,getTrainingPlanDetail,updateTrainingPlan,deleteTrainingPlan,getPlanUserRecordPage,getPlanCustomerRecordPage,getPlanCustomerDetail} from '@/data-source/plan/request-apis';
export default class PlanService { export default class PlanService {
// 获取员工列表 // 获取员工列表
static getTrainingPlanPage(params: any) { static getTrainingPlanPage(params: any) {
...@@ -33,4 +33,7 @@ export default class PlanService { ...@@ -33,4 +33,7 @@ export default class PlanService {
static getPlanCustomerRecordPage(params: any) { static getPlanCustomerRecordPage(params: any) {
return getPlanCustomerRecordPage(params); return getPlanCustomerRecordPage(params);
} }
static getPlanCustomerDetail(params: any) {
return getPlanCustomerDetail(params);
}
} }
\ No newline at end of file
src/modules/plan-manage/components/PlanList.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: zhangleyuan * @Author: zhangleyuan
* @Date: 2021-02-20 16:46:46 * @Date: 2021-02-20 16:46:46
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-03 14:18:59 * @LastEditTime: 2021-03-04 15:37:31
* @Description: 描述一下 * @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -179,7 +179,7 @@ function PlanList(props) { ...@@ -179,7 +179,7 @@ function PlanList(props) {
} }
// 显示分享弹窗 // 显示分享弹窗
function handleShowShareModal(item) { function handleShowShareModal(item) {
const htmlUrl = `${LIVE_SHARE}live_detail?id=${User.getStoreId()}`; const htmlUrl = `${LIVE_SHARE}training_plan_detail/${item.planId}?storeId=${User.getStoreId()}&storeUserId=${User.getStoreUserId()}`;
const longUrl = htmlUrl const longUrl = htmlUrl
const shareData = { ...item, longUrl }; const shareData = { ...item, longUrl };
const sharePlanModal = ( const sharePlanModal = (
......
src/modules/plan-manage/components/UserLearningData.jsx
...@@ -33,7 +33,6 @@ class UserLearningData extends React.Component { ...@@ -33,7 +33,6 @@ class UserLearningData extends React.Component {
}, },
totalCount:0, totalCount:0,
userLearnDetailModalSHow:false, userLearnDetailModalSHow:false,
selectUserId:''
} }
} }
componentDidMount(){ componentDidMount(){
...@@ -95,7 +94,8 @@ class UserLearningData extends React.Component { ...@@ -95,7 +94,8 @@ class UserLearningData extends React.Component {
watchDetail = (record)=>{ watchDetail = (record)=>{
this.setState({ this.setState({
userLearnDetailModalSHow:true, userLearnDetailModalSHow:true,
storeCustomerId:record.storeCustomerId storeCustomerId:record.storeCustomerId,
planId:record.planId
}) })
} }
closeUserLearnDetailModal = ()=>{ closeUserLearnDetailModal = ()=>{
...@@ -209,7 +209,7 @@ class UserLearningData extends React.Component { ...@@ -209,7 +209,7 @@ class UserLearningData extends React.Component {
return columns; return columns;
} }
render() { render() {
const { dataSource,query,size,totalCount,userLearnDetailModalSHow,storeCustomerId} = this.state; const { dataSource,query,size,totalCount,userLearnDetailModalSHow,storeCustomerId,planId} = this.state;
return ( return (
<div className="user-learning-data"> <div className="user-learning-data">
<div className="search-container"> <div className="search-container">
...@@ -242,7 +242,7 @@ class UserLearningData extends React.Component { ...@@ -242,7 +242,7 @@ class UserLearningData extends React.Component {
} }
</div> </div>
{ userLearnDetailModalSHow && { userLearnDetailModalSHow &&
<UserLearnDetailModal storeCustomerId={storeCustomerId} visible={userLearnDetailModalSHow} onClose={this.closeUserLearnDetailModal}/> <UserLearnDetailModal storeCustomerId={storeCustomerId} planId={planId} visible={userLearnDetailModalSHow} onClose={this.closeUserLearnDetailModal}/>
} }
</div> </div>
......
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
import React from 'react'; import React from 'react';
import {Table, Modal,Input} from 'antd'; import {Table, Modal,Input} from 'antd';
import { PageControl } from "@/components"; import { PageControl } from "@/components";
import StoreService from "@/domains/store-domain/storeService"; import PlanService from '@/domains/plan-domain/planService'
import User from '@/common/js/user' import User from '@/common/js/user'
import './UserLearnDetailModal.less'; import './UserLearnDetailModal.less';
import _ from "underscore"; import _ from "underscore";
const { Search } = Input; const { Search } = Input;
const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
const CourseType = {
LIVE: {
text: "直播课"
},
VOICE : {
text:"视频课"
},
RECORD : {
text:'录播课'
}
};
const courseStateShow = {
UN_START: {
title: "待开课",
},
STARTING: {
title: "上课中",
},
FINISH: {
title: "已完成",
},
EXPIRED: {
title: "未成功开课",
},
};
class UserLearnDetailModal extends React.Component { class UserLearnDetailModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
planDataSource:[ planDataSource:[],
{
}
],
taskDataSource:[], taskDataSource:[],
taskSize:10, taskSize:10,
taskQuery: { taskQuery: {
...@@ -22,10 +44,46 @@ class UserLearnDetailModal extends React.Component { ...@@ -22,10 +44,46 @@ class UserLearnDetailModal extends React.Component {
}, },
taskTotalCount:0, taskTotalCount:0,
courseDataSource:[], courseDataSource:[],
storeCustomerName:'',
storeCustomerPhone:''
}; };
} }
componentDidMount() { componentDidMount() {
this.getPlanCustomerDetail();
}
getPlanCustomerDetail = ()=>{
PlanService.getPlanCustomerDetail({
planId:getParameterByName("id"),
storeCustomerId:this.props.storeCustomerId,
storeId:User.getStoreId()
}).then((res) => {
const {
storeCustomerName,
storeCustomerPhone,
planName,
learnFinishPercentage,
taskCustomerVOList,
courseMediaVOS,
}=res.result;
let coverUrl;
courseMediaVOS.map((item) => {
if(item.contentType === "COVER"){
coverUrl = item.mediaUrl;
}
return item;
})
const planDataSource = [{
planName,
learnFinishPercentage,
coverUrl:coverUrl || defaultCover
}]
this.setState({
storeCustomerName,
storeCustomerPhone,
planDataSource,
taskDataSource:taskCustomerVOList
})
})
} }
parsePlanColumns = () => { parsePlanColumns = () => {
const columns = [ const columns = [
...@@ -35,23 +93,24 @@ class UserLearnDetailModal extends React.Component { ...@@ -35,23 +93,24 @@ class UserLearnDetailModal extends React.Component {
dataIndex: 'planInfo', dataIndex: 'planInfo',
render: (val, record) => { render: (val, record) => {
return ( return (
<div> <div className="plan-instro">
<div> <div className="img-con">
<img src="https://image.xiaomaiketang.com/xm/YNfi45JwFA.png" style={{width:'100px',height:'50px'}}/> <img src={record.coverUrl}/>
</div> </div>
<div>培训计划名称培训计划名称</div> <div className="plan-name">{record.planName}</div>
</div> </div>
) )
} }
}, },
{ {
title: '学习进度', title: '学习进度',
key: 'learnFinishNum', key: 'learnFinishPercentage',
dataIndex: 'learnFinishNum', dataIndex: 'learnFinishPercentage',
width:167,
render: (val, record) => { render: (val, record) => {
return ( return (
<div> <div className="plan-learn-percentage">
12% {val}%
</div> </div>
) )
} }
...@@ -68,8 +127,8 @@ class UserLearnDetailModal extends React.Component { ...@@ -68,8 +127,8 @@ class UserLearnDetailModal extends React.Component {
dataIndex: 'taskName', dataIndex: 'taskName',
render: (val, record,index) => { render: (val, record,index) => {
return ( return (
<div> <div className="taskName">
{ size*10 + (index + 1) }.{val} {index + 1}.{record.taskName}
</div> </div>
) )
} }
...@@ -78,9 +137,10 @@ class UserLearnDetailModal extends React.Component { ...@@ -78,9 +137,10 @@ class UserLearnDetailModal extends React.Component {
title: '学习进度', title: '学习进度',
key: 'learnFinishPercentage', key: 'learnFinishPercentage',
dataIndex: 'learnFinishPercentage', dataIndex: 'learnFinishPercentage',
width:167,
render: (val, record) => { render: (val, record) => {
return ( return (
<div> <div className="task-learn-percentage">
{val}% {val}%
</div> </div>
) )
...@@ -97,19 +157,25 @@ class UserLearnDetailModal extends React.Component { ...@@ -97,19 +157,25 @@ class UserLearnDetailModal extends React.Component {
dataIndex: 'courseName', dataIndex: 'courseName',
render: (val, record,index) => { render: (val, record,index) => {
return ( return (
<div> <div className="course-info">
<span className="course-type">{CourseType[record.courseType].text}</span>
<span className="course-name">{parentIndex + 1}.{index + 1}从入门到精通</span>
{record.courseState === "EXPIRED" &&
<span className="icon iconfont tip">&#xe834;</span>
}
<span className="course-state">{courseStateShow[record.courseState].title}</span>
</div> </div>
) )
} }
}, },
{ {
title: '学习进度', title: '学习进度',
key: 'learnState', key: 'learnFinishPercentage',
dataIndex: 'learnState', dataIndex: 'learnFinishPercentage',
width:152,
render: (val, record) => { render: (val, record) => {
return ( return (
<div> <div className="course-learn-percentage">
{val}% {val}%
</div> </div>
) )
...@@ -119,7 +185,7 @@ class UserLearnDetailModal extends React.Component { ...@@ -119,7 +185,7 @@ class UserLearnDetailModal extends React.Component {
return columns; return columns;
} }
render() { render() {
const { planDataSource,taskDataSource,taskQuery,taskTotalCount} = this.state; const {storeCustomerName,storeCustomerPhone,planDataSource,taskDataSource,taskQuery,taskTotalCount} = this.state;
const { visible } = this.props; const { visible } = this.props;
return ( return (
<Modal <Modal
...@@ -132,44 +198,48 @@ class UserLearnDetailModal extends React.Component { ...@@ -132,44 +198,48 @@ class UserLearnDetailModal extends React.Component {
width={800} width={800}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>} closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
> >
<div> <div className="customer-info">
<span> <span className="customer-name">
<span>用户：</span> <span>用户：</span>
<span>巴扎黑</span> <span>{storeCustomerName}</span>
</span> </span>
<span> <span className="customer-phone">
<span>手机号</span> <span>手机号：</span>
<span>18226927277</span> <span>{storeCustomerPhone}</span>
</span> </span>
</div> </div>
<div> <div>
<Table <Table
rowKey={record => record.id}
dataSource={planDataSource} dataSource={planDataSource}
columns={this.parsePlanColumns()} columns={this.parsePlanColumns()}
pagination={false} pagination={false}
bordered bordered
className="plan-table"
/> />
</div> </div>
<div> <div>
<Table <Table
rowKey={record => record.id} rowKey={(record) => record.taskId}
className="task-table"
dataSource={taskDataSource} dataSource={taskDataSource}
columns={this.parseTaskColumns()} columns={this.parseTaskColumns()}
pagination={false} pagination={false}
bordered
expandedRowRender={(record,index) => { expandedRowRender={(record,index) => {
if (record.courseList.length !== 0 ){ if(!record.courseVOList){
return
}
if (record.courseVOList.length !== 0 ){
return <div> return <div>
<Table <Table
pagination={false} pagination={false}
dataSource={record.courseList} dataSource={record.courseVOList}
columns={this.parseCoursecolumns(index)} columns={this.parseCoursecolumns(index)}
rowKey={record => record.id} className="child-table"
/> />
</div> </div>
} }
}} }}
rowClassName={(record,index)=>{if(index%2===0){return 'odd-row'}else{ return 'even-row'}}}
/> />
</div> </div>
</Modal> </Modal>
......
src/modules/plan-manage/modal/UserLearnDetailModal.less
.user-Learn-modal{
.customer-info{
margin-bottom:16px;
.customer-name{
font-size:14px;
color:#333;
margin-right:32px;
}
.customer-phone{
font-size:14px;
color:#333;
}
}
.plan-table{
margin-bottom:8px;
.plan-instro{
display: flex;
align-items: center;
.img-con{
margin-right:8px;
img{
width: 97px;
height: 55px;
display: inline-block;
border-radius:4px;
}
}
.plan-name{
color:#666666;
font-size:14px;
}
.plan-learn-percentage{
color:#666666;
font-size:14px;
}
}
}
.task-table{
.taskName{
color:#666666;
font-size:14px;
}
.task-learn-percentage{
color:#666666;
font-size:14px;
}
.course-info{
margin-left:57px;
.course-type{
font-size:11px;
color:#666666;
padding:1px 8px;
border: 1px solid #999999;
margin-right:4px;
border-radius: 2px;
}
.course-name{
color:#666666;
font-size:14px;
margin-right:8px;
}
.tip{
font-size:14px;
color:#FF4F4F;
margin-right:2px;
}
.course-state{
color:#999;
font-size:14px;
}
}
.ant-table-content{
border:1px solid #e8e8e8;
tr{
td{
border:none;
}
.child-table{
.ant-table-content{
border:none;
thead{
display:none;
}
tbody tr td{
border-bottom:none;
}
}
}
}
.odd-row{
background:transparent;
td{
background: #FFF;
}
& + .ant-table-expanded-row{
background:transparent;
td{
background: #FFF;
}
}
&:hover{
& + .ant-table-expanded-row{
background:transparent;
td{
background: #F3f6fa !important;
}
}
}
}
.even-row{
background:transparent;
td{
background: #FAFAFA;
}
& + .ant-table-expanded-row{
background:transparent;
td{
background: #FAFAFA;
}
}
&:hover{
& + .ant-table-expanded-row{
background:transparent;
td{
background: #F3f6fa !important;
}
}
}
}
}
}
}
\ No newline at end of file
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