fix bug

admin/src/pages/examinationrules/normal/components/AutoSelector.tsx

@@ -78,7 +78,7 @@ const AutoSelector = (props: any, ref: any) => {
       //key: 'code',
       dataIndex: `type${item?.code}`,
       render: ( item, { defaultRender, ...rest }, form) => {
-        return <Form.Item style={{margin:0}} ><InputNumber min={0} defaultValue={1}
+        return <Form.Item style={{margin:0}} ><InputNumber min={0} max={3} defaultValue={1} type='number'
           onChange={(value)=>{
             //
             const _data = [];
@@ -140,20 +140,6 @@ const AutoSelector = (props: any, ref: any) => {
           // setDataSource
         }}
         toolBarRender={false}
-/*
-        editable={{
-          type: 'multiple',
-          //editableKeys,
-          actionRender: (row, config, defaultDoms) => {
-            return [defaultDoms.delete];
-          },
-          onValuesChange: (record, recordList) => {
-            console.log('rrrr',record, recordList)
-            // setDataSource(recordList);
-          },
-          //onChange: setEditableRowKeys,
-        }}
-*/
       />
     </>
   );

admin/src/pages/questionbank/index.tsx

@@ -664,7 +664,7 @@ const QuestionBank = () => {
             valueType: 'select',
             dataIndex: 'tag_ids',
             fieldProps: {
-              mode: "multiple"
+              //mode: "multiple"
             },
             request: async () => {
               const { data: Items } = await queryTagList({});

web/src/pages/course/components/VideoJS.tsx

@@ -0,0 +1,80 @@
+import React, {forwardRef, useEffect,useImperativeHandle,useState} from "react";
+import videojs from "video.js";
+import "video.js/dist/video-js.css";
+import "videojs-contrib-hls";
+
+// React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。
+const VideoJS = ( props: any, ref: any) => {
+  //const [count,setCount]=useState(0);
+  //const countRef=React.useRef(count);
+  const videoRef = React.useRef(null);
+  const playerRef = React.useRef<any>(null);
+  const { options, onReady, } = props;
+
+  useEffect(() => {
+    if (!playerRef.current) {
+      const videoElement = videoRef.current;
+      if (!videoElement) return;
+      const player = playerRef.current = videojs(videoElement, options, () => {
+        // console.log("player is ready");
+        onReady && onReady(player);
+      });
+    } else {
+      // you can update player here [update player through props]
+      const player = playerRef.current;
+      player.src(options.sources[0].src);
+      // player.autoplay(true);
+      videoRef.current.addEventListener('play',()=>{
+        console.log('播放');
+        //setCount(player.currentTime());
+        //playerRef.current.currentTime(count)
+        // player.currentTime(count)
+        // getTime(player.currentTime());
+        // saveLearning();
+      });
+      videoRef.current.addEventListener('pause',()=>{
+        console.log('停止了')
+      })
+    }
+  }, [options]);
+
+  // useEffect(()=>{
+  //   videoRef.current.addEventListener()
+  // },[]);
+/*
+  useEffect(()=>{
+    countRef.current=count;
+  },[count])
+*/
+/*
+  if(count!==0){
+    if(countRef.current.toFixed(2)!==count.toFixed(2)){
+      // console.log('countRef.current前一次',countRef.current.toFixed(2));
+      // console.log('count这一次',count.toFixed(2))
+      getTime(count.toFixed(2));
+      saveLearning(count);
+    }
+  }
+*/
+  // 暴露组件的方法 接受外部获取的ref
+  useImperativeHandle(ref, () => ({
+    // 构造ref的获取数据方法    
+    currentTime: (time: number) => {
+      if(time){
+        playerRef?.current?.currentTime(time)
+      }
+      return playerRef?.current?.currentTime() || 0
+    },
+  }));
+
+  return (
+    <div data-vjs-player>
+      <video style={{
+        width:'100%',
+        height:'auto'
+      }} ref={videoRef} className="video-js vjs-big-play-centered" />
+    </div>
+  );
+}
+// forwardRef这个组件能够将其接受的 ref 属性转发到其组件树下
+export default forwardRef( VideoJS );

web/src/pages/course/components/VideoJS/index.tsx

@@ -1,68 +0,0 @@
-import React, {useEffect,useState} from "react";
-import videojs from "video.js";
-import "video.js/dist/video-js.css";
-import "videojs-contrib-hls";
-export const VideoJS = ( props: any ) => {
-    const [count,setCount]=useState(0);
-    const countRef=React.useRef(count);
-    const videoRef = React.useRef(null);
-    const playerRef = React.useRef<any>(null);
-    const { options, onReady,saveLearning,getTime } = props;
-    React.useEffect(() => {
-      if (!playerRef.current) {
-        const videoElement = videoRef.current;
-        if (!videoElement) return;
-        const player = playerRef.current = videojs(videoElement, options, () => {
-          // console.log("player is ready");
-          onReady && onReady(player);
-        });
-      } else {
-        // you can update player here [update player through props]
-        const player = playerRef.current;
-        player.src(options.sources[0].src);
-        // player.autoplay(true);
-        videoRef.current.addEventListener('play',()=>{
-          console.log('播放');
-          setCount(player.currentTime());
-          playerRef.current.currentTime(count)
-          // player.currentTime(count)
-          // getTime(player.currentTime());
-          // saveLearning();
-        });
-        videoRef.current.addEventListener('pause',()=>{
-          console.log('停止了')
-        })
-
-      }
-
-    }, [options]);
-    // useEffect(()=>{
-    //   videoRef.current.addEventListener()
-    // },[]);
-
-  React.useEffect(()=>{
-    countRef.current=count;
-  },[count])
-
-
-  if(count!==0){
-    if(countRef.current.toFixed(2)!==count.toFixed(2)){
-      // console.log('countRef.current前一次',countRef.current.toFixed(2));
-      // console.log('count这一次',count.toFixed(2))
-      getTime(count.toFixed(2));
-      saveLearning(count);
-
-    }
-  }
-
-
-    return (
-      <div data-vjs-player>
-        <video style={{
-          width:'100%',
-          height:'auto'
-
-        }} ref={videoRef} className="video-js vjs-big-play-centered" />
-      </div>
-    );
-  }

web/src/pages/course/detail/index.tsx

@@ -9,10 +9,11 @@ import styles from './style.less';
 import { Content } from 'antd/lib/layout/layout';
 import Sider from 'antd/lib/layout/Sider';
 import SubMenu from 'antd/lib/menu/SubMenu';
-import { VideoJS } from '../components/VideoJS';
+
 import { useRef } from 'react';
 import {listMyLearningChapterCourse1, viewCourseGetMyLearning,saveMyLearning} from  './service';
 import cookie from 'react-cookies';
+import VideoJS from '../components/VideoJS';
 const { Paragraph } = Typography;
 
 const CardList = () => {
@@ -64,7 +65,6 @@ const CardList = () => {
     });
   });
 
-
   /** 首次页面 当data 变化 执行run， chapterCourse 变化 进行currentCourse赋值 */
   useEffect(() => {
     if(data !== undefined && data !== null){
@@ -162,52 +162,50 @@ const CardList = () => {
         </Col>
         <Col span={18} style={{background:'#ffffff', padding:24}}>
           {
-                videoInfo.url && <VideoJS
+            videoInfo.url && <VideoJS
-                  options={{
+              options={{
-                    controls: true,
+                controls: true,
-                       playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+                playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
-                       autoplay: false, // 如果true,浏览器准备好时开始回放。
+                autoplay: false, // 如果true,浏览器准备好时开始回放。
-                       muted: false, // 默认情况下将会消除任何音频。
+                muted: false, // 默认情况下将会消除任何音频。
-                       loop: true, // 导致视频一结束就重新开始。
+                loop: true, // 导致视频一结束就重新开始。
-                       preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-                       language: 'zh-CN',
+                language: 'zh-CN',
-                       aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-                       fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-                       sources: [
+                sources: [
-                         {
+                  {
-                           // src: 'http://10.10.24.121:8000/dsideal_yy/html/'+videoInfo.url,
+                    // src: 'http://10.10.24.121:8000/dsideal_yy/html/'+videoInfo.url,
-                           src: videoInfo.url,
+                    src: videoInfo.url,
-                           type: 'application/x-mpegURL'
+                    type: 'application/x-mpegURL'
-                         }
+                  }
-                       ],
+                ],
-                       poster: videoInfo.img, // 你的封面地址
+                poster: videoInfo.img, // 你的封面地址
-                       width: document.documentElement.clientWidth,
+                width: document.documentElement.clientWidth,
-                       notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
-                       controlBar: {
+                controlBar: {
-                         timeDivider: true,
+                  timeDivider: true,
-                         durationDisplay: true,
+                  durationDisplay: true,
-                         remainingTimeDisplay: true,
+                  remainingTimeDisplay: true,
-                         fullscreenToggle: true // 全屏按钮
+                  fullscreenToggle: true // 全屏按钮
-                       }
+                }
-
+              }}
-
+              ref={videoRef}
-                  }}
+            />
-                  onReady={(play: any)=>{
+          }
-                  console.log('play====',play);
-                  videoRef.current = play;
-                  play.play()
-                }}
-                  saveLearning={()=>{saveLearning()}}
-                  getTime={(info)=>{
-                    // setTime(info);
-                    time=info;
-                    console.log('接收的秒数',info)
-                  }}
-                />
-              }
         </Col>
       </Row>
 
+      <a onClick={()=>{ 
+        const data = videoRef?.current?.currentTime(); 
+        console.log('getData', data)
+        }}>videoRef get</a> 
+
+      <a onClick={()=>{ 
+        const data = videoRef?.current?.currentTime(300); 
+        console.log('setData', data)
+        }}>videoRef set</a>
+
     </PageContainer>
   );
 };