Skip to content

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

feat:处理用户的学习详情

parent 8c1e94a8
Showing with 258 additions and 47 deletions
src/data-source/plan/request-apis.ts
......@@ -2,7 +2,7 @@
* @Author: zhangleyuan
* @Date: 2021-02-21 16:08:38
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-03 14:07:46
* @LastEditTime: 2021-03-04 13:51:35
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -32,3 +32,6 @@ export function getPlanUserRecordPage(params: object) {
export function getPlanCustomerRecordPage(params: object) {
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 @@
* @Author: zhangleyuan
* @Date: 2021-02-21 16:15:38
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-03 14:11:27
* @LastEditTime: 2021-03-04 13:51:01
* @Description: 描述一下
* @@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 {
// 获取员工列表
static getTrainingPlanPage(params: any) {
......@@ -33,4 +33,7 @@ export default class PlanService {
static getPlanCustomerRecordPage(params: any) {
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 @@
* @Author: zhangleyuan
* @Date: 2021-02-20 16:46:46
* @LastEditors: zhangleyuan
* @LastEditTime: 2021-03-03 14:18:59
* @LastEditTime: 2021-03-04 15:37:31
* @Description: 描述一下
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -179,7 +179,7 @@ function PlanList(props) {
}
// 显示分享弹窗
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 shareData = { ...item, longUrl };
const sharePlanModal = (
......
src/modules/plan-manage/components/UserLearningData.jsx
......@@ -33,7 +33,6 @@ class UserLearningData extends React.Component {
},
totalCount:0,
userLearnDetailModalSHow:false,
selectUserId:''
}
}
componentDidMount(){
......@@ -95,7 +94,8 @@ class UserLearningData extends React.Component {
watchDetail = (record)=>{
this.setState({
userLearnDetailModalSHow:true,
storeCustomerId:record.storeCustomerId
storeCustomerId:record.storeCustomerId,
planId:record.planId
})
}
closeUserLearnDetailModal = ()=>{
......@@ -209,7 +209,7 @@ class UserLearningData extends React.Component {
return columns;
}
render() {
const { dataSource,query,size,totalCount,userLearnDetailModalSHow,storeCustomerId} = this.state;
const { dataSource,query,size,totalCount,userLearnDetailModalSHow,storeCustomerId,planId} = this.state;
return (
<div className="user-learning-data">
<div className="search-container">
......@@ -242,7 +242,7 @@ class UserLearningData extends React.Component {
}
</div>
{ userLearnDetailModalSHow &&
<UserLearnDetailModal storeCustomerId={storeCustomerId} visible={userLearnDetailModalSHow} onClose={this.closeUserLearnDetailModal}/>
<UserLearnDetailModal storeCustomerId={storeCustomerId} planId={planId} visible={userLearnDetailModalSHow} onClose={this.closeUserLearnDetailModal}/>
}
</div>
......
src/modules/plan-manage/modal/UserLearnDetailModal.jsx
import React from 'react';
import {Table, Modal,Input} from 'antd';
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 './UserLearnDetailModal.less';
import _ from "underscore";
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 {
constructor(props) {
super(props);
this.state = {
planDataSource:[
{
}
],
planDataSource:[],
taskDataSource:[],
taskSize:10,
taskQuery: {
......@@ -22,10 +44,46 @@ class UserLearnDetailModal extends React.Component {
},
taskTotalCount:0,
courseDataSource:[],
storeCustomerName:'',
storeCustomerPhone:''
};
}
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 = () => {
const columns = [
......@@ -35,23 +93,24 @@ class UserLearnDetailModal extends React.Component {
dataIndex: 'planInfo',
render: (val, record) => {
return (
<div>
<div>
<img src="https://image.xiaomaiketang.com/xm/YNfi45JwFA.png" style={{width:'100px',height:'50px'}}/>
<div className="plan-instro">
<div className="img-con">
<img src={record.coverUrl}/>
</div>
<div>培训计划名称培训计划名称</div>
<div className="plan-name">{record.planName}</div>
</div>
)
}
},
{
title: '学习进度',
key: 'learnFinishNum',
dataIndex: 'learnFinishNum',
key: 'learnFinishPercentage',
dataIndex: 'learnFinishPercentage',
width:167,
render: (val, record) => {
return (
<div>
12%
<div className="plan-learn-percentage">
{val}%
</div>
)
}
......@@ -68,8 +127,8 @@ class UserLearnDetailModal extends React.Component {
dataIndex: 'taskName',
render: (val, record,index) => {
return (
<div>
{ size*10 + (index + 1) }.{val}
<div className="taskName">
{index + 1}.{record.taskName}
</div>
)
}
......@@ -78,10 +137,11 @@ class UserLearnDetailModal extends React.Component {
title: '学习进度',
key: 'learnFinishPercentage',
dataIndex: 'learnFinishPercentage',
width:167,
render: (val, record) => {
return (
<div>
{val}%
<div className="task-learn-percentage">
{val}%
</div>
)
}
......@@ -97,20 +157,26 @@ class UserLearnDetailModal extends React.Component {
dataIndex: 'courseName',
render: (val, record,index) => {
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>
)
}
},
{
title: '学习进度',
key: 'learnState',
dataIndex: 'learnState',
key: 'learnFinishPercentage',
dataIndex: 'learnFinishPercentage',
width:152,
render: (val, record) => {
return (
<div>
{val}%
<div className="course-learn-percentage">
{val}%
</div>
)
}
......@@ -119,7 +185,7 @@ class UserLearnDetailModal extends React.Component {
return columns;
}
render() {
const { planDataSource,taskDataSource,taskQuery,taskTotalCount} = this.state;
const {storeCustomerName,storeCustomerPhone,planDataSource,taskDataSource,taskQuery,taskTotalCount} = this.state;
const { visible } = this.props;
return (
<Modal
......@@ -132,44 +198,48 @@ class UserLearnDetailModal extends React.Component {
width={800}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
>
<div>
<span>
<div className="customer-info">
<span className="customer-name">
<span>用户：</span>
<span>巴扎黑</span>
<span>{storeCustomerName}</span>
</span>
<span>
<span>手机号</span>
<span>18226927277</span>
<span className="customer-phone">
<span>手机号：</span>
<span>{storeCustomerPhone}</span>
</span>
</div>
<div>
<Table
rowKey={record => record.id}
dataSource={planDataSource}
columns={this.parsePlanColumns()}
pagination={false}
bordered
className="plan-table"
/>
</div>
<div>
<Table
rowKey={record => record.id}
rowKey={(record) => record.taskId}
className="task-table"
dataSource={taskDataSource}
columns={this.parseTaskColumns()}
pagination={false}
bordered
expandedRowRender={(record,index) => {
if (record.courseList.length !== 0 ){
if(!record.courseVOList){
return
}
if (record.courseVOList.length !== 0 ){
return <div>
<Table
pagination={false}
dataSource={record.courseList}
dataSource={record.courseVOList}
columns={this.parseCoursecolumns(index)}
rowKey={record => record.id}
className="child-table"
/>
</div>
}
}}
rowClassName={(record,index)=>{if(index%2===0){return 'odd-row'}else{ return 'even-row'}}}
/>
</div>
</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