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

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

Showing with 58 additions and 95 deletions

src/modules/course-manage/video-course/components/VideoCourseList.jsx
+58 -95

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: wufan
+ * @LastEditors: fusanqiasng
- * @LastEditTime: 2021-05-30 20:53:07
+ * @LastEditTime: 2021-05-30 22:15:08
 * @Description: 视频课-列表模块
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
-import React from 'react';
+import React from "react"
-import { Table, Modal, message , Tooltip,Switch,Dropdown} from 'antd';
+import { Table, Modal, message, Tooltip, Switch, Dropdown } from "antd"
-import { PageControl } from "@/components";
+import { PageControl } from "@/components"
+import { LIVE_SHARE_MAP } from "@/common/constants/academic/cloudClass"
+import { appId, shareUrl, LIVE_SHARE } from "@/domains/course-domain/constants"
 import ShareLiveModal from "@/modules/course-manage/modal/ShareLiveModal"
 import WatchDataModal from "../modal/WatchDataModal"
 import CourseService from "@/domains/course-domain/CourseService"
@@ -17,6 +21,8 @@ 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)
@@ -24,9 +30,7 @@ class VideoCourseList extends React.Component {
      id: "", // 视频课ID
      studentIds: [],
      RelatedPlanModalVisible: false,
-      selectPlanList: {},
+      selectPlanList: {}
-      ShelfLoading: false
-      // dataSource: [],
    }
  }
@@ -40,6 +44,8 @@ class VideoCourseList extends React.Component {
  // 观看数据弹窗
  handleShowWatchDataModal = (record) => {
+    console.log("111")
+    console.log("record", record)
    const watchDataModal = (
      <WatchDataModal
        type='videoCourseList'
@@ -56,8 +62,6 @@ class VideoCourseList extends React.Component {
  // 请求表头
  parseColumns = () => {
-    const { type } = this.props
-    const { ShelfLoading } = this.state
    const columns = [
      {
        title: "视频课",
@@ -70,57 +74,29 @@ class VideoCourseList extends React.Component {
          return (
            <div className='record__item'>
              {/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
-              <img
+              <img className='course-cover' src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} />
-                className='course-cover'
+              {record.courseName.length > 25 ? (
-                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>
-                </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 (
-            <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>
          )
        }
      },
@@ -142,24 +118,27 @@ class VideoCourseList extends React.Component {
        }
      },
      {
-        title: <span>
+        title: (
+          <span>
            <span>学院展示</span>
-          <Tooltip  title={<div>开启后，学员可在学院内查看到此课程。<br/>关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px',fontWeight:'normal'}}>&#xe61d;</i></Tooltip>
+            <Tooltip
-        </span>,
+              title={
+                <div>
+                  开启后，学员可在学院内查看到此课程。
+                  <br />
+                  关闭后，学院内不再展示此课程，但学员仍可通过分享的海报/链接查看此课程。
+                </div>
+              }>
+              <i className='icon iconfont' style={{ marginLeft: "5px", cursor: "pointer", color: "#bfbfbf", fontSize: "14px" }}>
+                &#xe61d;
+              </i>
+            </Tooltip>
+          </span>
+        ),
        width: 120,
-        key: "shelfState",
+        dataIndex: "courseware",
-        dataIndex: "shelfState",
        render: (val, item, index) => {
-          return (
+          return <Switch defaultChecked={item.shelfState === "YES" ? true : false} onChange={() => this.changeShelfState(item)} />
-            <Switch
-              loading={ShelfLoading}
-              checked={item.shelfState === "YES"}
-              defaultChecked={item.shelfState}
-              onClick={(checked) => {
-                this.changeShelfState(checked, item, index)
-              }}
-            />
-          )
        }
      },
      {
@@ -168,7 +147,7 @@ class VideoCourseList extends React.Component {
        key: "watchUserCount",
        dataIndex: "watchUserCount",
        render: (val, item) => {
-          return <div className='watchUserCount'>{val || 0}</div>
+          return <div className='watchUserCount'>{val}</div>
        }
      },
      {
@@ -199,22 +178,19 @@ class VideoCourseList extends React.Component {
        render: (val, record) => {
          return (
            <div className='related-task'>
-              <Choose>
+              {record.relatedPlanList ? (
-                <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>}
+                        {item.planName} {index < record.relatedPlanList.length - 1 && <span> 、</span>}{" "}
                      </span>
                    )
                  })}
                </Tooltip>
-                </When>
+              ) : (
-                <Otherwise>
                <span></span>
-                </Otherwise>
+              )}
-              </Choose>
            </div>
          )
        }
@@ -231,21 +207,15 @@ class VideoCourseList extends React.Component {
              <div className='operate__item' onClick={() => this.handleShowWatchDataModal(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='more-operate'>
-                  <span className="operate-text">更多</span>
+                  <span className='operate-text'>更多</span>
-                  <span
+                  <span className='iconfont icon' style={{ color: "#5289FA" }}>
-                    className="iconfont icon"
-                    style={{ color: "#2966FF" }}
-                  >
                    &#xe824;
                  </span>
                </span>
@@ -255,37 +225,27 @@ 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>
        )}
-        <If condition={type === "internal"}>
        <div
          className='operate__item'
          onClick={() => {
-              window.RCHistory.push(`/create-video-course?type=edit&id=${item.id}`)
+            RCHistory.push(`/create-video-course?type=edit&id=${item.id}`)
          }}>
          编辑
        </div>
        <div className='operate__item' onClick={() => this.handleDeleteVideoCourse(item.id)}>
          删除
        </div>
-        </If>
      </div>
    )
  }
@@ -302,24 +262,27 @@ class VideoCourseList extends React.Component {
    return planStr
  }
  //改变上架状态
-  changeShelfState = (checked, item, index) => {
+  changeShelfState = (item) => {
-    let _shelfState = checked ? "YES" : "NO"
+    let _shelfState = item.shelfState
-    if (checked) {
+    if (_shelfState === "NO") {
      _shelfState = "YES"
+      item.shelfState = "YES"
    } else {
      _shelfState = "NO"
+      item.shelfState = "NO"
    }
    const params = {
      courseId: item.id,
      shelfState: _shelfState
    }
-    CourseService.changeVideoShelfState(params).then(() => {
+    CourseService.changeVideoShelfState(params).then((res) => {
+      if (res.success) {
        if (_shelfState === "YES") {
          message.success("已开启展示")
        } else {
          message.success("已取消展示")
        }
-      this.props.changeShelfState(index, _shelfState)
+      }
    })
  }
@@ -347,8 +310,9 @@ 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
@@ -364,7 +328,6 @@ class VideoCourseList extends React.Component {
        needStr={needStr}
        data={shareData}
        type='videoClass'
-        courseDivision={type}
        title='视频课'
        close={() => {
          this.setState({
@@ -442,11 +405,11 @@ class VideoCourseList extends React.Component {
    )
  }
  render() {
-    const { dataSource = [], totalCount, query, type } = this.props
+    const { dataSource = [], totalCount, query } = this.props
    const { current, size } = query
    const { RelatedPlanModalVisible, selectPlanList, selectCourseId } = this.state
    return (
-      <div className={`video-course-list ${type !== "internal" ? "video-course-list-mt" : ""}`}>
+      <div className='video-course-list'>
        <Table
          rowKey={(record) => record.id}
          dataSource={dataSource}