培训答题修改 看视频 附件 按课件（附件路径）答题

配置加视频路径
公共方法 根据路径 组装 附件查看 list

src/components/CustomPages/SE/SE018PaperPage.js

@@ -1,20 +1,20 @@
 import { message } from "antd/lib/index";
 import { Button, Popconfirm, Row, Col, Checkbox, Radio, Form, Input, Select, Table, Upload, Icon, PageHeader, Modal, Spin } from 'antd';
 import React from 'react';
-import { initFilter, extendRule, extendInclude, setDataFieldValue, guid, initQueryFilter } from "../../../utils/common";
+import { initFilter, extendRule, extendInclude, setDataFieldValue, guid, initQueryFilter, showFiles, getFileShow } from "../../../utils/common";
 import ReactToPrint from "react-to-print";
 import styles from '../../CustomPages/HI/StepForm.css';
 import SEstyles from './SE.css';
 import XLSX from 'xlsx';
 import { connect } from 'dva';
 import moment from 'moment';
+import configc from "../../../config.js";
 
 const Option = Select.Option;
 const answer = {
     color: 'blue',
 }
 
-
 class SE018PaperPage extends React.Component {
     constructor(props) {
         super(props);
@@ -22,6 +22,9 @@ class SE018PaperPage extends React.Component {
         if ((this.props.formParam && this.props.formParam.viewAll) || this.props.data.tableKey == undefined) {
             viewAll = true;
         }
+        this.player = null;
+        this.videoRef = React.createRef();
+        this.lastTimeRef = React.createRef(0);
         this.state = {
             papers: [],
             viewAll,
@@ -35,15 +38,43 @@ class SE018PaperPage extends React.Component {
             END_TIME: null,
             readonly: true,
             loading: false,
+            isCourEdit: false, //是否 有课件的考试
+            isViedo: false,
+            isVideoEnd: true,
+            filepath: '',
+            filepathf: [],
+            btnText: '提交问卷', //'下一题'
+            perPaper: [], //每次的答题 wyw 20260306 
+            listPath: [],
+            indexCour: -1 //课件
         };
     };
     componentDidMount() {
+        this.videoRef?.current?.addEventListener('timeupdate', this.handleTimeUpdate);
         if (window.navigator.userAgent.indexOf("Windows") < 1) {
             this.setState({ isMobile: true })
         }
         if (this.props.data?.id)
             this.loadData(this.props.data?.id);
     }
+    componentWillUnmount() {
+        this.videoRef?.current?.removeEventListener('timeupdate', this.handleTimeUpdate);
+
+        if (this.player) {
+            this.player.destroy();
+        }
+    }
+    handleTimeUpdate = (event) => {
+        const currentTime = event.target.currentTime;
+        if (currentTime < this.state.lastTime) {
+            event.target.currentTime = this.state.lastTime;
+        } else {
+            this.setState({
+                currentTime: currentTime,
+                lastTime: currentTime,
+            });
+        }
+    }
 
     componentWillReceiveProps(NextProps) {
         if (this.props.data.USER_ID !== NextProps.data.USER_ID) {
@@ -115,7 +146,7 @@ class SE018PaperPage extends React.Component {
         if (!this.props.data.TaskID) {
             scort = 'TEXT_ID'
         }
-        let json = initFilter(this.props.login.OrgId, '', scort, 1);
+        let json = initFilter(this.props.login.OrgId, this.props.data.TaskID, scort, 1);
         json.Parameter22 = this.props.data.ORG_ID_HV;
         json.OrgType = 2;
         if (this.props.data.TaskID) {
@@ -132,8 +163,6 @@ class SE018PaperPage extends React.Component {
         extendInclude(json, 'Nav_Record.Nav_Notify.Nav_TrainType');
         extendInclude(json, 'Nav_Record.Nav_Notify');
         extendInclude(json, 'Nav_Record.Nav_Notify.Nav_TrainContentList.Nav_Point');
-
-
         extendInclude(json, 'Nav_Test');
         extendInclude(json, 'Nav_User');
         this.state.loading = true;
@@ -143,6 +172,16 @@ class SE018PaperPage extends React.Component {
             url: 'SE/SETrainRecord/GetUserPapers',
             onComplete: (ret) => {
                 this.state.loading = false;
+                var isCourEdit = false
+                if (this.props.data.tableKey == '1' && ret.listPath != null && ret.listPath.length > 0) {
+                    isCourEdit = true //考试 有 课件
+                    this.state.listPath = ret.listPath
+                }
+                if (ret.listPath.length > 1) {
+                    this.state.btnText = '下一题'
+                }
+                // this.onSave()
+
                 if (ret && ret.Nav_Papers && ret.Nav_Papers.length > 0) {
                     let papers = ret.Nav_Papers.sort((a, b) => { return a.Nav_Test.TYPE - b.Nav_Test.TYPE });
                     let config = ret.Nav_Config;
@@ -155,18 +194,28 @@ class SE018PaperPage extends React.Component {
                             hasAnswered = true;
                         }
                     }
+
+                    var perPaper = []
+                    if (isCourEdit == false)
+                        perPaper = papers //提供显示 
                     this.setState({
                         papers,
+                        perPaper: perPaper,
                         config,
                         record,
                         notify,
                         readonly: hasAnswered,
                         NAME: NAME,
+                        isCourEdit: isCourEdit,
+                        listPath: this.state.listPath,
+                        btnText: this.state.btnText,
                     })
+                    if (isCourEdit == true) {
+                        this.onSave()
+                    }
                 } else {
                     message.error('未能成功获取此用户的在线试卷，请稍后重试');
                 }
-
             }
         });
     }
@@ -179,52 +228,105 @@ class SE018PaperPage extends React.Component {
         if (this.state.readonly) {
             return;
         }
-        let data = JSON.parse(JSON.stringify(this.state.papers));
+        if (this.state.indexCour > -1) {
-        for (let i = 0; i < data.length; i++) {
+            let data = JSON.parse(JSON.stringify(this.state.perPaper));
-            if (data[i].ANSWER == 0) {
+            for (let i = 0; i < data.length; i++) {
-                message.error(`第${i + 1}题尚未选择答题，请完成所有答题后再进行提交`);
+                if (data[i].ANSWER == 0) {
-                return;
+                    message.error(`第${i + 1}题尚未选择答题，请完成所有答题后再进行提交`);
-            }
+                    return;
-            if (data[i].Nav_Test.TYPE === 2 && ([0, 1, 2, 4, 8].indexOf(data[i].ANSWER) !== -1)) {
-                message.error(`第${i + 1}题为多选题，请选择至少两个选项`);
-                return;
-            }
-        }
-        let saveData = () => {
-            let data = {
-                Nav_Config: JSON.parse(JSON.stringify(this.state.config)),
-                Nav_Papers: JSON.parse(JSON.stringify(this.state.papers)),
-                TaskID: this.props.data.TaskID,
-                TEXT_ID: this.props.data.id,
-            }
-            this.props.dispatch({
-                type: 'app/getDataByPost',
-                payload: data,
-                url: 'SE/SETrainRecord/SavePapers',
-                onComplete: (ret) => {
-                    if (ret && ret.IsOperateSuccessful) {
-                        // message.success('提交成功');
-                        if (ret.IsPass) {
-                            message.success(ret.Msg)
-                        } else {
-                            message.warn(ret.Msg)
-                        }
-                    } else {
-                        message.error('提交失败，请稍后重试');
-                    }
-                    this.BtnClose();
                 }
-            });
+                if (data[i].Nav_Test.TYPE === 2 && ([0, 1, 2, 4, 8].indexOf(data[i].ANSWER) !== -1)) {
+                    message.error(`第${i + 1}题为多选题，请选择至少两个选项`);
+                    return;
+                }
+            }
+
+            var replaceModel = {}
+            this.state.papers.forEach(e => {
+                replaceModel = this.state.perPaper.filter(ep => e.ID == ep.ID)
+                if (replaceModel != null) {
+                    e = replaceModel
+                }
+            })
+        }
+
+        if (this.state.btnText == "提交问卷" && this.state.indexCour > -1) {
+            //数据提交
+            let saveData = () => {
+                let data = {
+                    Nav_Config: JSON.parse(JSON.stringify(this.state.config)),
+                    Nav_Papers: JSON.parse(JSON.stringify(this.state.papers)),
+                    TaskID: this.props.data.TaskID,
+                    TEXT_ID: this.props.data.id,
+                }
+                this.props.dispatch({
+                    type: 'app/getDataByPost',
+                    payload: data,
+                    url: 'SE/SETrainRecord/SavePapers',
+                    onComplete: (ret) => {
+                        if (ret && ret.IsOperateSuccessful) {
+                            if (ret.IsPass) {
+                                message.success(ret.Msg)
+                            } else {
+                                message.warn(ret.Msg)
+                            }
+                        } else {
+                            message.error('提交失败，请稍后重试');
+                        }
+                        this.BtnClose();
+                    }
+                });
+            }
+            Modal.confirm({
+                title: '提示',
+                content: '确定要提交当前问卷么？提交之后不可再次更改',
+                onOk: () => {
+                    saveData();
+                },
+                onCancel() {
+                },
+            })
+        } else {
+            //下一题
+            this.state.indexCour++
+            //下一题
+            if (this.state.indexCour == this.state.listPath.length - 1) {
+                this.state.btnText = '提交问卷' //最后一题
+            } else {
+                this.state.btnText = '下一题'
+            }
+            this.state.filepath = this.state.listPath[this.state.indexCour]
+            var perPaper = this.state.papers.filter(e => e.FILE_PATH == this.state.filepath)
+
+            if (this.state.filepath.indexOf('/VIDEO/') > -1) {
+                this.state.isViedo = true
+                this.state.isVideoEnd = false
+                this.state.filepath = configc.videoServerHost + this.state.filepath
+                this.state.filepathf = []
+            } else if (this.state.filepath.indexOf('.mp4') > -1 || this.state.filepath
+                .indexOf('.avi') > -1) {
+                //暂时不应该进来 
+                this.state.isViedo = true
+                this.state.isVideoEnd = false
+                this.state.filepath = configc.picServerHost + this.state.filepath
+                this.state.filepathf = []
+            } else {
+                this.state.isViedo = false
+                this.state.isVideoEnd = true
+                this.state.filepath = this.state.filepath
+                this.state.filepathf = getFileShow(this.state.filepath)
+            }
+
+            this.setState({
+                indexCour: this.state.indexCour,
+                btnText: this.state.btnText,
+                perPaper: perPaper,
+                filepath: this.state.filepath,
+                isViedo: this.state.isViedo,
+                isVideoEnd: this.state.isVideoEnd,
+                filepathf: this.state.filepathf,
+            })
         }
-        Modal.confirm({
-            title: '提示',
-            content: '确定要提交当前问卷么？提交之后不可再次更改',
-            onOk: () => {
-                saveData();
-            },
-            onCancel() {
-            },
-        })
     }
     fmtEnum(name, value) {
         const enums = this.props.app.enums;
@@ -263,18 +365,18 @@ class SE018PaperPage extends React.Component {
         return arr;
     }
     doOptionChange = (it, index, mask, evt) => {
-        let papers = this.state.papers;
+        let perPaper = this.state.perPaper;
         if (evt.target.checked) {
             if (it.Nav_Test.TYPE === 2) {
-                papers[index].ANSWER |= mask;
+                perPaper[index].ANSWER |= mask;
             } else {
-                papers[index].ANSWER = mask;
+                perPaper[index].ANSWER = mask;
             }
         } else {
-            papers[index].ANSWER = papers[index].ANSWER & (~mask);
+            perPaper[index].ANSWER = perPaper[index].ANSWER & (~mask);
         }
         this.setState({
-            papers,
+            perPaper,
         })
     }
     returnModel(level) {
@@ -354,8 +456,22 @@ class SE018PaperPage extends React.Component {
         }
         return ret;
     }
+    onEnd = () => {
+        this.setState({
+            isVideoEnd: true
+        })
+    }
+    TimeUpdate = () => {
+        const currentTime = this.videoRef.current.currentTime;
+        if (currentTime > this.lastTimeRef.current + 1) {
+            this.videoRef.current.currentTime = this.lastTimeRef.current
+            message.error(`禁止快进`);
+        } else {
+            this.lastTimeRef.current = currentTime
+        }
+    }
     render() {
-        const { record, papers, SelUsrID, UserList, notify } = this.state;
+        const { record, perPaper, SelUsrID, UserList, notify, btnText, filepath, isViedo, isCourEdit, isVideoEnd, filepathf } = this.state;
         const SelUsr = SelUsrID && UserList.find(it => it.ID === SelUsrID);
         return <div>
             <div style={{ padding: '10px' }}>
@@ -391,9 +507,7 @@ class SE018PaperPage extends React.Component {
                 <Button style={{ marginLeft: '8px' }} onClick={() => this.onTableBtnExport()} icon="export" >导出</Button>
                 {
                     !this.state.readonly && (
-                        <Button type="primary" style={{ marginLeft: '8px' }} onClick={() => { this.onSave(); }}>
+                        <Button type="primary" style={{ marginLeft: '8px' }} onClick={() => { this.onSave(); }}>{btnText}</Button>
-                            提交问卷
-                        </Button>
                     )
                 }
             </div>
@@ -428,7 +542,6 @@ class SE018PaperPage extends React.Component {
                                 <td colSpan={4} rowSpan={1} className={styles.fontBold}>培训形式</td>
                                 <td colSpan={4} rowSpan={1} >{notify ? this.returnModel(notify.TRAIN_MODEL) : null}</td>
                                 <td colSpan={4} rowSpan={1} className={styles.fontBold}>考核方式</td>
-                                {/* <td colSpan={4} rowSpan={1} >{notify && notify.Nav_TrainCheckType ? notify.Nav_TrainCheckType.NAME : null}</td> */}
                                 <td colSpan={4} rowSpan={1} >{notify && notify.CHECKTYPE && this.props.app.enums.PlanCheckType.enums[notify.CHECKTYPE]}</td>
                             </tr>
                             <tr>
@@ -447,11 +560,35 @@ class SE018PaperPage extends React.Component {
                                 <td colSpan={4} rowSpan={1} className={styles.fontBold}>成绩</td>
                                 <td colSpan={4} rowSpan={1}>{this.CalcScore()}</td>
                             </tr>
+                            {/* isViedo, isCourEdit */}
+                            {
+                                isCourEdit && isViedo ? <tr >
+                                    <td colSpan={24} rowSpan={1} className={styles.fontBold}>
+                                        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
+                                            {
+                                                <video ref={this.videoRef} style={{ marginTop: 5, height: window.innerHeight - 200 }} onEnded={() => this.onEnd()} onTimeUpdate={() => this.TimeUpdate()} src={filepath} controls>
+                                                    <source src={filepath} type="video/mp4" />
+                                                </video>
+                                            }
+                                        </div>
+                                    </td>
+                                </tr> : null
+                            }
+                            {
+                                isCourEdit && !isViedo ? <tr >
+                                    <td colSpan={4} rowSpan={1} className={styles.fontBold}>课件附件</td>
+                                    <td colSpan={20} rowSpan={1} className={styles.fontBold}>
+                                        {
+                                            showFiles(filepathf, configc.picServerHost, this)
+                                        }
+                                    </td>
+                                </tr> : null
+                            }
                             <tr>
                                 <td colSpan={24} rowSpan={1} className={styles.fontBold}>问卷</td>
                             </tr>
                             {
-                                papers.map((it, idx) => {
+                                isVideoEnd && perPaper.map((it, idx) => {
                                     return (
                                         <tr key={it.ID}>
                                             <td colSpan={24} rowSpan={1}>
@@ -469,8 +606,6 @@ class SE018PaperPage extends React.Component {
                                                                 it.Nav_Test.TYPE === 0 ?
                                                                     <td colSpan={24} rowSpan={1} className={this.state.readonly && ((it.Nav_Test.ANSWER & 1) != 0) ? styles.answer : null}>
                                                                         <Radio disabled={this.state.readonly} checked={(it.ANSWER & 1) != 0} onChange={evt => this.doOptionChange(it, idx, 1, evt)} >正确</Radio>
-                                                                        {/* <Radio disabled={this.state.readonly} checked={(it.ANSWER & 1) != 0} onChange={evt => this.doOptionChange(it, idx, 1, evt)} />
-                                                                        <span>正确</span> */}
                                                                     </td>
                                                                     :
                                                                     <td colSpan={24} rowSpan={1} className={this.state.readonly && ((it.Nav_Test.ANSWER & 1) != 0) ? styles.answer : null}>
@@ -480,8 +615,6 @@ class SE018PaperPage extends React.Component {
                                                                                 :
                                                                                 <Checkbox disabled={this.state.readonly} checked={(it.ANSWER & 1) != 0} onChange={evt => this.doOptionChange(it, idx, 1, evt)} >A.{it.Nav_Test.OPTION_A}</Checkbox>
                                                                         }
-                                                                        {/* <span>A.{it.Nav_Test.OPTION_A}</span>
-                                                                        <span></span> */}
                                                                     </td>
                                                             }
                                                         </tr>
@@ -490,8 +623,6 @@ class SE018PaperPage extends React.Component {
                                                                 it.Nav_Test.TYPE === 0 ?
                                                                     <td colSpan={24} rowSpan={1} className={this.state.readonly && ((it.Nav_Test.ANSWER & 2) != 0) ? styles.answer : null}>
                                                                         <Radio disabled={this.state.readonly} checked={(it.ANSWER & 2) != 0} onChange={evt => this.doOptionChange(it, idx, 2, evt)} >错误</Radio>
-                                                                        {/* <Radio disabled={this.state.readonly} checked={(it.ANSWER & 2) != 0} onChange={evt => this.doOptionChange(it, idx, 2, evt)} />
-                                                                        <span>错误</span> */}
                                                                     </td>
                                                                     :
                                                                     <td colSpan={24} rowSpan={1} className={this.state.readonly && ((it.Nav_Test.ANSWER & 2) != 0) ? styles.answer : null}>
@@ -501,8 +632,6 @@ class SE018PaperPage extends React.Component {
                                                                                 :
                                                                                 <Checkbox disabled={this.state.readonly} checked={(it.ANSWER & 2) != 0} onChange={evt => this.doOptionChange(it, idx, 2, evt)} >B.{it.Nav_Test.OPTION_B}</Checkbox>
                                                                         }
-                                                                        {/* <span>B.{it.Nav_Test.OPTION_B}</span>
-                                                                        <span></span> */}
                                                                     </td>
                                                             }
                                                         </tr>
@@ -516,8 +645,6 @@ class SE018PaperPage extends React.Component {
                                                                             :
                                                                             <Checkbox disabled={this.state.readonly} checked={(it.ANSWER & 4) != 0} onChange={evt => this.doOptionChange(it, idx, 4, evt)} >C.{it.Nav_Test.OPTION_C}</Checkbox>
                                                                     }
-                                                                    {/* <span>C.</span>
-                                                                    <span>{it.Nav_Test.OPTION_C}</span> */}
                                                                 </td>
                                                             </tr>
                                                         }
@@ -531,8 +658,6 @@ class SE018PaperPage extends React.Component {
                                                                             :
                                                                             <Checkbox disabled={this.state.readonly} checked={(it.ANSWER & 8) != 0} onChange={evt => this.doOptionChange(it, idx, 8, evt)} >D.{it.Nav_Test.OPTION_D}</Checkbox>
                                                                     }
-                                                                    {/* <span>D.</span>
-                                                                    <span>{it.Nav_Test.OPTION_D}</span> */}
                                                                 </td>
                                                             </tr>
                                                         }
@@ -546,8 +671,6 @@ class SE018PaperPage extends React.Component {
                                                                             :
                                                                             <Checkbox disabled={this.state.readonly} checked={(it.ANSWER & 16) != 0} onChange={evt => this.doOptionChange(it, idx, 16, evt)} >E.{it.Nav_Test.OPTION_E}</Checkbox>
                                                                     }
-                                                                    {/* <span>E.</span>
-                                                                    <span>{it.Nav_Test.OPTION_E}</span> */}
                                                                 </td>
                                                             </tr>
                                                         }

src/config.js

@@ -26,6 +26,7 @@ const config = {
     hmiUrl: "http://localhost:8060/",
     webSocketHost: 'ws://localhost:3140/',
     picServerHost: 'http://localhost:5199',
+    videoServerHost: 'https://sps.cxtc.com:3199',
     dataVUrl: "http://localhost:8062/home",
     version: version,
     guideSeverHost: "http://121.41.2.71/jyapk/",
@@ -42,6 +43,7 @@ const config = {
     hmiUrl: "http://124.117.209.78:8098/",
     webSocketHost: 'ws://124.117.209.78:3140/',
     picServerHost: 'http://124.117.209.78:5199',
+    videoServerHost: 'http://124.117.209.78:5199',
     dataVUrl: "http://124.117.209.78:3167/home",
     version: version,
     guideSeverHost: "http://124.117.209.78:5110/jyapk/",
@@ -58,6 +60,7 @@ const config = {
     hmiUrl: "http://121.41.2.71:8098/",
     webSocketHost: 'ws://121.41.2.71:3140/',
     picServerHost: 'http://121.41.2.71:5199',
+    videoServerHost: 'http://121.41.2.71:5199',
     dataVUrl: "http://121.41.2.71:3167/home",
     version: version,
     guideSeverHost: "http://121.41.2.71/jyapk/",

src/utils/common.js

@@ -1535,6 +1535,22 @@ function fileOnClick(file, callBack) {
     callBack(file)
 }
 
+//适应 组件 对附件的显示
+export function getFileShow(FILE_PATH, FILE_NAME) {
+	const result = []
+	if (!FILE_NAME) {
+		var listPath = FILE_PATH.split('/')
+		FILE_NAME = listPath[listPath.length - 1]
+	}
+	result.push({
+		Nav_ImgFile: {
+			FILE_PATH: FILE_PATH,
+			FILE_NAME: FILE_NAME,
+		}
+	})
+	return result;
+
+}
 //显示附件
 export function showFiles(Nav_Files, imgHost, that, isShowNO, maxShow = 50) {
   var result = []