Skip to content

X
xiaomai-cloud-class-web
Commit f9dc5153 by guomingpang
Options

fix:外部课程视频课程分享bug修复

parent 4776f0a4
Showing with 117 additions and 75 deletions
src/modules/course-manage/video-course/components/VideoCourseList.jsx
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:12:45
* @LastEditors: fusanqiasng
* @LastEditTime: 2021-05-30 22:15:08
* @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import React from "react"
import { Table, Modal, message, Tooltip, Switch, Dropdown } from "antd"
import _ from "underscore"
import { PageControl } from "@/components"
import { LIVE_SHARE_MAP } from "@/common/constants/academic/cloudClass"
import { appId, shareUrl, LIVE_SHARE } from "@/domains/course-domain/constants"
import { LIVE_SHARE } from "@/domains/course-domain/constants"
import ShareLiveModal from "@/modules/course-manage/modal/ShareLiveModal"
import WatchDataModal from "../modal/WatchDataModal"
......@@ -21,8 +12,6 @@ import User from "@/common/js/user"
import "./VideoCourseList.less"
const ENV = process.env.DEPLOY_ENV || "dev"
const userRole = User.getUserRole()
class VideoCourseList extends React.Component {
constructor(props) {
super(props)
......@@ -30,7 +19,9 @@ class VideoCourseList extends React.Component {
id: "", // 视频课ID
studentIds: [],
RelatedPlanModalVisible: false,
selectPlanList: {}
selectPlanList: {},
ShelfLoading: false
// dataSource: [],
}
}
......@@ -44,8 +35,6 @@ class VideoCourseList extends React.Component {
// 观看数据弹窗
handleShowWatchDataModal = (record) => {
console.log("111")
console.log("record", record)
const watchDataModal = (
<WatchDataModal
type='videoCourseList'
......@@ -62,6 +51,8 @@ class VideoCourseList extends React.Component {
// 请求表头
parseColumns = () => {
const { type } = this.props
const { ShelfLoading } = this.state
const columns = [
{
title: "视频课",
......@@ -74,29 +65,57 @@ class VideoCourseList extends React.Component {
return (
<div className='record__item'>
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className='course-cover' src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} />
{record.courseName.length > 25 ? (
<Tooltip title={record.courseName}>
<img
className='course-cover'
src={
coverUrl ||
(type === "internal" ? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast` : "https://image.xiaomaiketang.com/xm/mt3ZQRxGKB.png")
}
alt=''
/>
<Choose>
<When condition={record.courseName.length > 25}>
<Tooltip title={record.courseName}>
<div className='course-name'>{record.courseName}</div>
</Tooltip>
</When>
<Otherwise>
<div className='course-name'>{record.courseName}</div>
</Tooltip>
) : (
<div className='course-name'>{record.courseName}</div>
)}
</Otherwise>
</Choose>
</div>
)
}
},
{
title: "课程分类",
title: (
<span>
<span>课程分类</span>
<If condition={type !== "internal"}>
<Tooltip title={<div>外部课程的分类由系统提供，不影响企业课程分类。</div>}>
<i className='icon iconfont' style={{ marginLeft: "5px", cursor: "pointer", color: "#bfbfbf", fontSize: "14px", fontWeight: "normal" }}>
&#xe61d;
</i>
</Tooltip>
</If>
</span>
),
key: "categoryName",
dataIndex: "categoryName",
width: 200,
render: (val, record) => {
return (
<div className='record__item'>
{record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ""}
</div>
<Choose>
<When condition={type === "internal"}>
<div className='record__item'>
{record.categoryOneName}
{record.categoryTwoName ? `-${record.categoryTwoName}` : ""}
</div>
</When>
<Otherwise>
<div className='record__item'>{record.categorySonName}</div>
</Otherwise>
</Choose>
)
}
},
......@@ -136,9 +155,19 @@ class VideoCourseList extends React.Component {
</span>
),
width: 120,
dataIndex: "courseware",
key: "shelfState",
dataIndex: "shelfState",
render: (val, item, index) => {
return <Switch defaultChecked={item.shelfState === "YES" ? true : false} onChange={() => this.changeShelfState(item)} />
return (
<Switch
loading={ShelfLoading}
checked={item.shelfState === "YES"}
defaultChecked={item.shelfState}
onClick={(checked) => {
this.changeShelfState(checked, item, index)
}}
/>
)
}
},
{
......@@ -147,7 +176,7 @@ class VideoCourseList extends React.Component {
key: "watchUserCount",
dataIndex: "watchUserCount",
render: (val, item) => {
return <div className='watchUserCount'>{val}</div>
return <div className='watchUserCount'>{val || 0}</div>
}
},
{
......@@ -178,19 +207,22 @@ class VideoCourseList extends React.Component {
render: (val, record) => {
return (
<div className='related-task'>
{record.relatedPlanList ? (
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter>
{record.relatedPlanList.map((item, index) => {
return (
<span>
{item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{" "}
</span>
)
})}
</Tooltip>
) : (
<span></span>
)}
<Choose>
<When condition={record.relatedPlanList}>
<Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter>
{record.relatedPlanList.map((item, index) => {
return (
<span>
{item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}
</span>
)
})}
</Tooltip>
</When>
<Otherwise>
<span></span>
</Otherwise>
</Choose>
</div>
)
}
......@@ -207,15 +239,18 @@ class VideoCourseList extends React.Component {
<div className='operate__item' onClick={() => this.handleShowWatchDataModal(record)}>
观看数据
</div>
<span className='operate__item split'> | </span>
<div className='operate__item' onClick={() => this.handleShowShareModal(record)}>
分享
</div>
<If condition={type === "internal"}>
<span className='operate__item split'> | </span>
<div className='operate__item' onClick={() => this.handleShowShareModal(record)}>
分享
</div>
</If>
<span className='operate__item split'> | </span>
<Dropdown overlay={this.renderMoreOperate(record)}>
<span className='more-operate'>
<span className='operate-text'>更多</span>
<span className='iconfont icon' style={{ color: "#5289FA" }}>
<span className='iconfont icon' style={{ color: "#2966FF" }}>
&#xe824;
</span>
</span>
......@@ -225,27 +260,37 @@ class VideoCourseList extends React.Component {
}
}
]
type !== "internal" && columns.splice(2, 1)
return columns
}
renderMoreOperate = (item) => {
const { type } = this.props
return (
<div className='live-course-more-menu'>
<If condition={type !== "internal"}>
<div className='operate__item' onClick={() => this.handleShowShareModal(item)}>
分享
</div>
</If>
{(User.getUserRole() === "CloudManager" || User.getUserRole() === "StoreManager") && (
<div className='operate__item' onClick={() => this.handleRelatedModalShow(item)}>
关联培训计划
</div>
)}
<div
className='operate__item'
onClick={() => {
RCHistory.push(`/create-video-course?type=edit&id=${item.id}`)
}}>
编辑
</div>
<div className='operate__item' onClick={() => this.handleDeleteVideoCourse(item.id)}>
删除
</div>
<If condition={type === "internal"}>
<div
className='operate__item'
onClick={() => {
window.RCHistory.push(`/create-video-course?type=edit&id=${item.id}`)
}}>
编辑
</div>
<div className='operate__item' onClick={() => this.handleDeleteVideoCourse(item.id)}>
删除
</div>
</If>
</div>
)
}
......@@ -262,27 +307,24 @@ class VideoCourseList extends React.Component {
return planStr
}
//改变上架状态
changeShelfState = (item) => {
let _shelfState = item.shelfState
if (_shelfState === "NO") {
changeShelfState = (checked, item, index) => {
let _shelfState = checked ? "YES" : "NO"
if (checked) {
_shelfState = "YES"
item.shelfState = "YES"
} else {
_shelfState = "NO"
item.shelfState = "NO"
}
const params = {
courseId: item.id,
shelfState: _shelfState
}
CourseService.changeVideoShelfState(params).then((res) => {
if (res.success) {
if (_shelfState === "YES") {
message.success("已开启展示")
} else {
message.success("已取消展示")
}
CourseService.changeVideoShelfState(params).then(() => {
if (_shelfState === "YES") {
message.success("已开启展示")
} else {
message.success("已取消展示")
}
this.props.changeShelfState(index, _shelfState)
})
}
......@@ -310,9 +352,8 @@ class VideoCourseList extends React.Component {
// 显示分享弹窗
handleShowShareModal = (record, needStr = false) => {
const { type } = this.props
const { id, scheduleVideoUrl } = record
const _appId = appId
const htmlUrl = `${LIVE_SHARE}video_detail/${id}?id=${User.getStoreId()}`
const longUrl = htmlUrl
const { coverUrl, courseName } = record
......@@ -328,6 +369,7 @@ class VideoCourseList extends React.Component {
needStr={needStr}
data={shareData}
type='videoClass'
courseDivision={type}
title='视频课'
close={() => {
this.setState({
......@@ -405,11 +447,11 @@ class VideoCourseList extends React.Component {
)
}
render() {
const { dataSource = [], totalCount, query } = this.props
const { dataSource = [], totalCount, query, type } = this.props
const { current, size } = query
const { RelatedPlanModalVisible, selectPlanList, selectCourseId } = this.state
return (
<div className='video-course-list'>
<div className={`video-course-list ${type !== "internal" ? "video-course-list-mt" : ""}`}>
<Table
rowKey={(record) => record.id}
dataSource={dataSource}
......
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