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

f9dc5153 · guomingpang · 4776f0a4 · f9dc5153
Commit f9dc5153 authored May 30, 2021 by guomingpang
Hide whitespace changes
Inline Side-by-side

Showing with 117 additions and 75 deletions

src/modules/course-manage/video-course/components/VideoCourseList.jsx
+117 -75

No files found.
--- a/src/modules/course-manage/video-course/components/VideoCourseList.jsx
+++ b/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 { LIVE_SHARE } from "@/domains/course-domain/constants"
-import { appId, shareUrl, 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`} />
+              <img
-              {record.courseName.length > 25 ? (
+                className='course-cover'
-                <Tooltip title={record.courseName}>
+                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>
+                </Otherwise>
-              ) : (
+              </Choose>
-                <div className='course-name'>{record.courseName}</div>
-              )}
            </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'>
+            <Choose>
-              {record.categoryOneName}
+              <When condition={type === "internal"}>
-              {record.categoryTwoName ? `-${record.categoryTwoName}` : ""}
+                <div className='record__item'>
-            </div>
+                  {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 ? (
+              <Choose>
-                <Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter>
+                <When condition={record.relatedPlanList}>
-                  {record.relatedPlanList.map((item, index) => {
+                  <Tooltip title={this.handlePlanName(record.relatedPlanList)} placement='top' arrowPointAtCenter>
-                    return (
+                    {record.relatedPlanList.map((item, index) => {
-                      <span>
+                      return (
-                        {item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{" "}
+                        <span>
-                      </span>
+                          {item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}
-                    )
+                        </span>
-                  })}
+                      )
-                </Tooltip>
+                    })}
-              ) : (
+                  </Tooltip>
-                <span></span>
+                </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)}>
+              <If condition={type === "internal"}>
-                分享
+                <span className='operate__item split'> | </span>
-              </div>
+                <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
+        <If condition={type === "internal"}>
-          className='operate__item'
+          <div
-          onClick={() => {
+            className='operate__item'
-            RCHistory.push(`/create-video-course?type=edit&id=${item.id}`)
+            onClick={() => {
-          }}>
+              window.RCHistory.push(`/create-video-course?type=edit&id=${item.id}`)
-          编辑
+            }}>
-        </div>
+            编辑
-        <div className='operate__item' onClick={() => this.handleDeleteVideoCourse(item.id)}>
+          </div>
-          删除
+          <div className='operate__item' onClick={() => this.handleDeleteVideoCourse(item.id)}>
-        </div>
+            删除
+          </div>
+        </If>
      </div>
    )
  }
@@ -262,27 +307,24 @@ class VideoCourseList extends React.Component {
    return planStr
  }
  //改变上架状态
-  changeShelfState = (item) => {
+  changeShelfState = (checked, item, index) => {
-    let _shelfState = item.shelfState
+    let _shelfState = checked ? "YES" : "NO"
-    if (_shelfState === "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) => {
+    CourseService.changeVideoShelfState(params).then(() => {
-      if (res.success) {
+      if (_shelfState === "YES") {
-        if (_shelfState === "YES") {
+        message.success("已开启展示")
-          message.success("已开启展示")
+      } else {
-        } else {
+        message.success("已取消展示")
-          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}