From 97d2f4fb4a80acd061827bf74864b61369a1571f Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 19 Jan 2021 16:12:07 +0800
Subject: [PATCH] .

---
 src/api/index.js                           |   2 +-
 src/components/pdf/index.vue               | 124 +++++++++++++++++++++
 src/libs/util.js                           |   5 +
 src/mixins/examDo/index.js                 |  57 ++++++++++
 src/pages/achievement/assessment/index.vue |  34 +++---
 src/pages/achievement/practice/index.vue   |  32 +++---
 src/pages/exam/detail/index.vue            |  34 +++---
 src/pages/exam/do/index.vue                |  29 ++++-
 src/pages/exam/list/index.vue              |   1 +
 src/pages/practice/do/index.vue            |  42 +++++--
 src/setting.js                             |  11 +-
 src/store/modules/exam.js                  |   8 +-
 src/store/modules/practice.js              |   2 +-
 src/styles/pages/exam.scss                 |   3 +
 14 files changed, 319 insertions(+), 65 deletions(-)
 create mode 100644 src/components/pdf/index.vue

diff --git a/src/api/index.js b/src/api/index.js
index 4d4670c..765454b 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,5 +1,5 @@
 import Setting from '@/setting'
-let uploadURL = Setting.apiUploadURL
+let uploadURL = Setting.upload.apiURL
 
 export default {
   // 登录注册
diff --git a/src/components/pdf/index.vue b/src/components/pdf/index.vue
new file mode 100644
index 0000000..e822cb5
--- /dev/null
+++ b/src/components/pdf/index.vue
@@ -0,0 +1,124 @@
+<template>
+    <div>
+        <el-dialog
+            custom-class="pdf-dia"
+            :close-on-click-modal="false"
+            :visible.sync="visible"
+            @close="closePdf"
+            :fullscreen="true"
+            :modal="false"
+            :append-to-body="true">
+            <div>
+                <button type="button" aria-label="Close" class="el-dialog__headerbtn" @click="closePdf"><i class="el-dialog__close el-icon el-icon-close"></i></button>
+                <div class="pdf">
+                    <p class="arrow">
+                        <span @click="changePdfPage(0)" class="turn el-icon-arrow-left" :class="{grey: currentPage==1}"></span>
+                        {{currentPage}} / {{pageCount}}
+                        <span @click="changePdfPage(1)" class="turn el-icon-arrow-right" :class="{grey: currentPage==pageCount}"></span>
+                    </p>
+                    <pdf
+                    class="pdf-wrap"
+                    :src="src"
+                    :page="currentPage"
+                    @num-pages="pageCount=$event"
+                    @page-loaded="currentPage=$event"
+                    @loaded="loadPdfHandler"
+                    >
+                    </pdf>
+                </div>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import pdf from "vue-pdf";
+export default {
+    props: ['visible','src'],
+    data() {
+        return {
+            pdfVisible: false,
+            pdfSrc: '',
+            currentPage: 0,
+            pageCount: 0,
+            fileType: 'pdf',
+        };
+    },
+    components: { pdf },
+    mounted(){
+        this.addEvent()
+    },
+    methods: {
+        closePdf(){
+            this.$emit('update:visible',false)
+            this.$emit('update:src','')
+            this.currentPage = 1
+        },
+        changePdfPage (val) {
+            if (val === 0 && this.currentPage > 1) {
+            this.currentPage--
+            }
+            if (val === 1 && this.currentPage < this.pageCount) {
+            this.currentPage++
+            }
+        },
+        loadPdfHandler (e) {
+            this.currentPage = 1
+        },
+        addEvent(){
+            document.onkeydown = e => {
+                let key = window.event.keyCode
+                if(key == 37){
+                    this.changePdfPage(0)
+                }else if(key == 39){
+                    this.changePdfPage(1)
+                }
+            }
+            this.$once('hook:beforeDestroy',() => {
+                document.onkeydown = null
+            })
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+    /deep/.pdf-dia{
+        border-radius: 0 !important;
+        .el-dialog__header{
+            display: none;
+        }
+        .el-dialog__body{
+            padding: 0;
+        }
+        .el-dialog__headerbtn{
+            top: 10px;
+            .el-dialog__close{
+                color: #fff;
+                font-size: 16px;
+            }
+        }
+
+        .pdf{
+            .arrow{
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                padding: 10px 0;
+                font-size: 16px;
+                color: #fff;
+                background-color: #333;
+                .turn{
+                    margin: 0 10px;
+                    font-size: 18px;
+                    cursor: pointer;
+                }
+            }
+            .pdf-wrap{
+                height: calc(100vh - 45px);
+                margin: 0 auto;
+                overflow: auto;
+            }
+        }
+    }
+    
+</style>
\ No newline at end of file
diff --git a/src/libs/util.js b/src/libs/util.js
index 37d0731..acb054d 100644
--- a/src/libs/util.js
+++ b/src/libs/util.js
@@ -73,6 +73,11 @@ const util = {
     if('jpg,jpeg,png,gif,svg,psd'.includes(ext)) return true
     return false
   },
+  // 传入文件后缀判断是否是pdf以外的文档
+  isDoc(ext) {
+    if(!util.isVideo(ext) && !util.isAudio(ext) && !util.isImg(ext) && ext != 'pdf') return true
+    return false
+  },
   // 循环去除html标签
   removeHtmlTag(list,attr) {
     list.map(n => {
diff --git a/src/mixins/examDo/index.js b/src/mixins/examDo/index.js
index ce160f8..617aea0 100644
--- a/src/mixins/examDo/index.js
+++ b/src/mixins/examDo/index.js
@@ -1,4 +1,11 @@
+import Setting from '@/setting'
+import util from '@/libs/util'
 export default {
+    data() {
+        return {
+            maxSize: Setting.upload.maxSize
+        }
+    },
     mounted() {
         this.insertScript()
     },
@@ -56,5 +63,55 @@ export default {
                 document.body.removeChild(document.querySelector('#aliplayerScript'))
             })
         },
+        handleExceed(files, fileList) {
+            this.$message.warning(
+                `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` 
+            )
+        },
+        beforeUpload(file,item){
+            if(util.isDoc(file.name.substring(file.name.lastIndexOf('.') + 1)) && (file.size / 1024 / 1024) > this.maxSize){
+                this.$message.error(`请上传${this.maxSize}M以内的文件`)
+                return false
+            }
+            item.fileName = file.name
+            console.log('上传前：',item,file)
+        },
+        uploadSuccess(res, file, fileList, item) {
+            console.log('上传成功：',res, file, fileList, item)
+            let ext = file.response.data.filesResult.fileType
+            item.fileExt = ext
+            if(util.isVideo(ext)){
+                item.video = res.data.filesResult.fileId
+            }else{
+                item.fileUrl = res.data.filesResult.fileUrl
+            }
+            console.log('上传成功：',item)
+        },
+        uploadError(err, file, fileList) {
+            this.$message({
+                message: "上传出错，请重试！",
+                type: "error",
+                center: true
+            })
+        },
+        beforeRemove(file, fileList) {
+            return this.$confirm(`确定移除 ${file.name}？`)
+        },
+        handleRemove(file, fileList, item) {
+            console.log('删除：',item)
+            if(util.isVideo(item.fileExt)){
+                this.$del(`${this.api.removeVideo}/${item.video}`).then(res => {
+                    item.video = ''
+                }).catch(res => {})
+            }else{
+                console.log('删除前：',item.fileUrl)
+                let fileName = item.fileUrl.replace('https://cj-oss.oss-cn-guangzhou.aliyuncs.com/','')
+                console.log('删除前：',fileName)
+
+                this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => {
+                    item.fileUrl = ''
+                }).catch(res => {})
+            }
+        },
     }
 }
\ No newline at end of file
diff --git a/src/pages/achievement/assessment/index.vue b/src/pages/achievement/assessment/index.vue
index 2ea3ac5..b542a8c 100644
--- a/src/pages/achievement/assessment/index.vue
+++ b/src/pages/achievement/assessment/index.vue
@@ -21,9 +21,9 @@
         </div>
 
         <ul class="tab">
-            <!-- <template v-for="(item,index) in tabs"> -->
-                <li v-for="(item,index) in tabs" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li>
-            <!-- </template> -->
+            <template v-for="(item,index) in tabs">
+                <li v-if="item.show" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li>
+            </template>
         </ul>
 
         <div class="wrap">
@@ -81,23 +81,23 @@ export default {
                 {
                     id: 1,
                     name: '单选题',
-                    show: true
+                    show: false
                 },{
                     id: 2,
                     name: '多选题',
-                    show: true
+                    show: false
                 },{
                     id: 3,
                     name: '判断题',
-                    show: true
+                    show: false
                 },{
                     id: 4,
                     name: '简答题',
-                    show: true
+                    show: false
                 },{
                     id: 5,
                     name: '填空题',
-                    show: true
+                    show: false
                 }
             ],
             active: 1,
@@ -124,12 +124,18 @@ export default {
                 this.ranking = res.ranking
                 this.allData = res.data
                 let tabs = this.tabs
-                res.data.list1.length || (tabs[0].show = false)
-                res.data.list2.length || (tabs[1].show = false)
-                res.data.list3.length || (tabs[2].show = false)
-                res.data.list4.length || (tabs[3].show = false)
-                res.data.list5.length || (tabs[4].show = false)
-                this.curType = this.allData.list1
+                res.data.list1.length && (tabs[0].show = true)
+                res.data.list2.length && (tabs[1].show = true)
+                res.data.list3.length && (tabs[2].show = true)
+                res.data.list4.length && (tabs[3].show = true)
+                res.data.list5.length && (tabs[4].show = true)
+                for(let n of tabs){
+                    if(n.show){
+                        this.active = n.id
+                        this.curType = this.allData[`list${n.id}`]
+                        break
+                    }
+                }
                 this.handleOptions()
             })
             .catch(err => {})
diff --git a/src/pages/achievement/practice/index.vue b/src/pages/achievement/practice/index.vue
index cdf03a2..4fca08c 100644
--- a/src/pages/achievement/practice/index.vue
+++ b/src/pages/achievement/practice/index.vue
@@ -17,9 +17,9 @@
         </div>
 
         <ul class="tab">
-            <!-- <template v-for="(item,index) in tabs"> -->
-                <li v-for="(item,index) in tabs" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li>
-            <!-- </template> -->
+            <template v-for="(item,index) in tabs">
+                <li v-if="item.show" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li>
+            </template>
         </ul>
 
         <div class="wrap">
@@ -77,23 +77,23 @@ export default {
                 {
                     id: 1,
                     name: '单选题',
-                    show: true
+                    show: false
                 },{
                     id: 2,
                     name: '多选题',
-                    show: true
+                    show: false
                 },{
                     id: 3,
                     name: '判断题',
-                    show: true
+                    show: false
                 },{
                     id: 4,
                     name: '简答题',
-                    show: true
+                    show: false
                 },{
                     id: 5,
                     name: '填空题',
-                    show: true
+                    show: false
                 }
             ],
             typeNameList: ['单项选择','多项选择','判断题','简答题','填空题'],
@@ -132,11 +132,17 @@ export default {
                 })
                 this.list = data.list
                 let tabs = this.tabs
-                data.list.find(n => n.typeName == '单项选择') || (tabs[0].show = false)
-                data.list.find(n => n.typeName == '多项选择') || (tabs[1].show = false)
-                data.list.find(n => n.typeName == '判断题') || (tabs[2].show = false)
-                data.list.find(n => n.typeName == '简答题') || (tabs[3].show = false)
-                data.list.find(n => n.typeName == '填空题') || (tabs[4].show = false)
+                data.list.find(n => n.typeName == '单项选择') && (tabs[0].show = true)
+                data.list.find(n => n.typeName == '多项选择') && (tabs[1].show = true)
+                data.list.find(n => n.typeName == '判断题') && (tabs[2].show = true)
+                data.list.find(n => n.typeName == '简答题') && (tabs[3].show = true)
+                data.list.find(n => n.typeName == '填空题') && (tabs[4].show = true)
+                for(let n of tabs){
+                    if(n.show){
+                        this.active = n.id
+                        break
+                    }
+                }
                 this.handleOptions()
                 this.paperName = data.paperName
                 this.userName = data.stuName
diff --git a/src/pages/exam/detail/index.vue b/src/pages/exam/detail/index.vue
index 86df08e..69899f8 100644
--- a/src/pages/exam/detail/index.vue
+++ b/src/pages/exam/detail/index.vue
@@ -17,9 +17,9 @@
         </div>
 
         <ul class="tab">
-            <!-- <template v-for="(item,index) in tabs"> -->
-                <li v-for="(item,index) in tabs" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li>
-            <!-- </template> -->
+            <template v-for="(item,index) in tabs">
+                <li v-if="item.show" :key="index" :class="{active: active == item.id}" @click="tabChange(item.id)">{{item.name}}</li>
+            </template>
         </ul>
 
         <div class="wrap">
@@ -77,23 +77,23 @@ export default {
                 {
                     id: 1,
                     name: '单选题',
-                    show: true
+                    show: false
                 },{
                     id: 2,
                     name: '多选题',
-                    show: true
+                    show: false
                 },{
                     id: 3,
                     name: '判断题',
-                    show: true
+                    show: false
                 },{
                     id: 4,
                     name: '简答题',
-                    show: true
+                    show: false
                 },{
                     id: 5,
                     name: '填空题',
-                    show: true
+                    show: false
                 }
             ],
             active: 1,
@@ -120,12 +120,18 @@ export default {
                 this.time = res.time
                 this.allData = res.data
                 let tabs = this.tabs
-                res.data.list1.length || (tabs[0].show = false)
-                res.data.list2.length || (tabs[1].show = false)
-                res.data.list3.length || (tabs[2].show = false)
-                res.data.list4.length || (tabs[3].show = false)
-                res.data.list5.length || (tabs[4].show = false)
-                this.curType = this.allData.list1
+                res.data.list1.length && (tabs[0].show = true)
+                res.data.list2.length && (tabs[1].show = true)
+                res.data.list3.length && (tabs[2].show = true)
+                res.data.list4.length && (tabs[3].show = true)
+                res.data.list5.length && (tabs[4].show = true)
+                for(let n of tabs){
+                    if(n.show){
+                        this.active = n.id
+                        this.curType = this.allData[`list${n.id}`]
+                        break
+                    }
+                }
                 this.handleOptions()
             }).catch(err => {})
         },
diff --git a/src/pages/exam/do/index.vue b/src/pages/exam/do/index.vue
index 497f09e..27af84c 100644
--- a/src/pages/exam/do/index.vue
+++ b/src/pages/exam/do/index.vue
@@ -72,6 +72,19 @@
                                     </el-checkbox-group>
                                 </template>
                                 <template v-if="item.typeId == 4">
+                                    <el-upload
+                                        class="upload"
+                                        :before-upload="file => beforeUpload(file,item)"
+                                        :on-remove="(file, fileList) => handleRemove(file, fileList, item)"
+                                        :on-error="uploadError"
+                                        :on-success="(res, file, fileList) => uploadSuccess(res, file, fileList, item)"
+                                        :before-remove="beforeRemove"
+                                        :limit="1"
+                                        :on-exceed="handleExceed"
+                                        :action="api.fileupload"
+                                    > 
+                                        <el-button type="primary" class="ml20">上传文件</el-button>
+                                    </el-upload>
                                     <el-input type="textarea" rows="5" v-model="item.val" @input="updateProgress"></el-input>
                                 </template>
                             </div>
@@ -165,7 +178,7 @@ export default {
     mounted() {
         this.getData()
         this.addLeaveEvent()
-        this.queryState()
+        // this.queryState()
     },
     beforeDestroy(){
         clearInterval(this.timer)
@@ -313,14 +326,22 @@ export default {
                     }else{
                         userAnswer = n.val
                     }
-                    if(userAnswer){
-                        data1.push({ 
+                    if(userAnswer || n.fileUrl || n.video){
+                        if(n.fileUrl){
+                            n.fileUrl = n.fileName + ',' + n.fileUrl
+                        }
+                        if(n.video){
+                            n.video = n.fileName + ',' + n.video
+                        }
+                        data1.push({
                             assessmentId: this.assessmentId,
                             questionId: n.id,
                             questionStatus : n.questionStatus,
                             testPaperId: this.testPaperId,
                             userAnswer,
-                            userId: this.userId
+                            userId: this.userId,
+                            fileUrl: n.fileUrl,
+                            videoAudio: n.video
                         })
                     }
                 })
diff --git a/src/pages/exam/list/index.vue b/src/pages/exam/list/index.vue
index 5a37e3c..a409310 100644
--- a/src/pages/exam/list/index.vue
+++ b/src/pages/exam/list/index.vue
@@ -57,6 +57,7 @@
                         <!-- 学生考试状态:考试状态 state: (0、未考 1、在考 2、已考)
                         考核状态:  state: 考核状态(1、待开始 2、进行中 3、已结束) -->
                         <el-button type="text" @click="toExam(scope.row)" v-if="scope.row.assessmentState == 2" :disabled="scope.row.state == 2">进入考试</el-button>
+                        <!-- <el-button type="text" @click="toExam(scope.row)">进入考试</el-button> -->
                         <!-- <el-button type="text" @click="query(scope.row)" v-if="scope.row.state == 2">成绩查询</el-button> -->
                     </template>
                 </el-table-column>
diff --git a/src/pages/practice/do/index.vue b/src/pages/practice/do/index.vue
index a16ea31..43dc2e7 100644
--- a/src/pages/practice/do/index.vue
+++ b/src/pages/practice/do/index.vue
@@ -72,6 +72,19 @@
                                     </el-checkbox-group>
                                 </template>
                                 <template v-if="item.name == '简答题'">
+                                    <el-upload
+                                        class="upload"
+                                        :before-upload="file => beforeUpload(file,item)"
+                                        :on-remove="(file, fileList) => handleRemove(file, fileList, item)"
+                                        :on-error="uploadError"
+                                        :on-success="(res, file, fileList) => uploadSuccess(res, file, fileList, item)"
+                                        :before-remove="beforeRemove"
+                                        :limit="1"
+                                        :on-exceed="handleExceed"
+                                        :action="api.fileupload"
+                                    > 
+                                        <el-button type="primary" class="ml20">上传文件</el-button>
+                                    </el-upload>
                                     <el-input type="textarea" rows="5" v-model="item.val" @input="updateProgress"></el-input>
                                 </template>
                             </div>
@@ -92,7 +105,6 @@ import { mapState,mapGetters,mapActions } from 'vuex'
 import setBackground from '@/mixins/setBackground'
 import examDo from '@/mixins/examDo'
 import util from '@/libs/util'
-
 export default {
     mixins: [ setBackground,examDo ],
     data() {
@@ -271,15 +283,25 @@ export default {
                     }else{
                         userAnswer = n.val
                     }
-                    data1.push({
-                        identification: this.identification,
-                        practiseId: this.practiseId,
-                        questionId: n.questionId,
-                        questionStatus : n.questionStatus,
-                        testPaperId: this.paperId,
-                        userAnswer,
-                        userId: this.userId
-                    })
+                    if(userAnswer || n.fileUrl || n.video){
+                        if(n.fileUrl){
+                            n.fileUrl = n.fileName + ',' + n.fileUrl
+                        }
+                        if(n.video){
+                            n.video = n.fileName + ',' + n.video
+                        }
+                        data1.push({
+                            identification: this.identification,
+                            practiseId: this.practiseId,
+                            questionId: n.questionId,
+                            questionStatus : n.questionStatus,
+                            testPaperId: this.paperId,
+                            userAnswer,
+                            userId: this.userId,
+                            fileUrl: n.fileUrl,
+                            videoAudio: n.video
+                        })
+                    }
                 })
             })
 
diff --git a/src/setting.js b/src/setting.js
index 69de210..f900bcc 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -16,9 +16,7 @@ const Setting = {
     showProgressBar: true,
     // 接口请求地址
     // apiBaseURL: env === 'development' ? 'http://192.168.31.152:8001' : 'http://39.108.250.202:8000',
-    apiBaseURL: env === 'development' ? 'http://39.108.250.202:9000' : 'http://39.108.250.202:9000',
-    // oss文件管理接口地址
-    apiUploadURL: 'http://8.134.8.197:8001',
+    apiBaseURL: env === 'development' ? 'http://192.168.31.152:8001' : 'http://39.108.250.202:9000',
     // 接口请求返回错误时，弹窗的持续时间，单位：秒
     modalDuration: 3,
     // 接口请求返回错误时，弹窗的类型，可选值为 Message 或 Notice
@@ -59,7 +57,12 @@ const Setting = {
     // 相同路由，不同参数间进行切换，是否强力更新
     sameRouteForceUpdate: false,
     // 是否使用动态路由
-    dynamicRoute: false
+    dynamicRoute: false,
+    // 文件上传
+    upload: {
+        apiURL: 'http://8.134.8.197:8001',
+        maxSize: 30,
+    },
 };
 
 export default Setting;
diff --git a/src/store/modules/exam.js b/src/store/modules/exam.js
index 79b0389..e57dd06 100644
--- a/src/store/modules/exam.js
+++ b/src/store/modules/exam.js
@@ -65,16 +65,16 @@ export default {
     },
     getters: {
         getDegreeName: state => id => {
-            return state.degreeList.find(n => n.id == id).label
+            return id != null ? state.degreeList.find(n => n.id == id).label : ''
         },
         getTypeName: state => id => {
-            return state.typeList.find(n => n.id == id).name
+            return id != null ? state.typeList.find(n => n.id == id).name : ''
         },
         getStateName: state => id => {
-            return state.stateList.find(n => n.id == id).name
+            return id != null ? state.stateList.find(n => n.id == id).name : ''
         },
         getAssessmentStateName: state => id => {
-            return state.assessmentStateList.find(n => n.id == id).name
+            return id != null ? state.assessmentStateList.find(n => n.id == id).name : ''
         },
     },
     mutations: {
diff --git a/src/store/modules/practice.js b/src/store/modules/practice.js
index be1775e..47b2971 100644
--- a/src/store/modules/practice.js
+++ b/src/store/modules/practice.js
@@ -26,7 +26,7 @@ export default {
     },
     getters: {
         getDegreeName: state => id => {
-            return state.degreeList.find(n => n.id == id).label
+            return id != null ? state.degreeList.find(n => n.id == id).label : ''
         }
     },
     mutations: {
diff --git a/src/styles/pages/exam.scss b/src/styles/pages/exam.scss
index 94201a9..b3fa550 100644
--- a/src/styles/pages/exam.scss
+++ b/src/styles/pages/exam.scss
@@ -129,6 +129,9 @@ $borderColor: #ececec;
                     /deep/.el-radio__label{
                         padding-left: 6px;
                     }
+                    .upload{
+                        margin: 20px 0 10px;
+                    }
                 }
             }
         }