Skip to content

X
xzksxt
Commit 79da9020 by 宋珺琪
Options

视频调整、选项图片添加

parent fd831586
Showing with 409 additions and 135 deletions
src/components/student/answer.vue
...@@ -32,31 +32,80 @@ ...@@ -32,31 +32,80 @@
<div class="right"> <div class="right">
<div class="title"> <div class="title">
<p>{{title}}({{optionValue}})</p> <p>{{title}}({{optionValue}})</p>
<ul style="display: flex;margin-left: 30px">
<li v-for="item in reduceAnswer.img" style="overflow: visible;display: flex">
<img :src="item" alt=""
@click="magnifyPhoto(item)"
style="width: 100px; height:90px; margin-left: 10px;margin-top: -5px">
</li>
</ul>
<i class="iconfont icon-right auto-right"></i> <i class="iconfont icon-right auto-right"></i>
<span>全卷共1题 <i class="iconfont icon-time"></i><!--倒计时：<b>{{time}}</b>分钟--></span> <span style="color: black;font-weight: bold">全卷共1题 <i class="iconfont icon-time"></i><!--倒计时：<b>{{time}}</b>分钟--></span>
</div> </div>
<ul style="display: flex;margin-left: 30px">
<li v-for="item in reduceAnswer.img" style="overflow: visible;display: flex">
<img :src="item" alt=""
@click="magnifyPhoto(item)"
style="width: 300px; height:300px; margin-left: 10px;margin-top: -5px">
</li>
</ul>
<div class="content"> <div class="content">
<p class="topic">{{showQuestion}}</p> <p class="topic">{{showQuestion}}</p>
<div v-if=" optionValue == '单选题'"> <div v-if=" optionValue == '单选题'">
<el-radio-group v-model="radio[index]" @change="getChangeLabel" > <el-radio-group v-model="radio[index]" @change="getChangeLabel" >
<el-radio :label="1" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='A' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">{{showAnswer.answerA}}</el-radio> <!-- <div style="display: flex">-->
<el-radio :label="2" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='B' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">{{showAnswer.answerB}}</el-radio> <el-radio :label="1" :disabled='radioFlag'
<el-radio :label="3" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='C' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">{{showAnswer.answerC}}</el-radio> :class="[isradio ? (this.reduceAnswer.rightAnswer==='A' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">
<el-radio :label="4" :disabled='radioFlag' :class="[isradio ? (this.reduceAnswer.rightAnswer==='D' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">{{showAnswer.answerD}}</el-radio> {{showAnswer.answerA}}
</el-radio>
<ul v-if="showAnswer.Aimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Aimg" alt=""
@click="magnifyPhoto(showAnswer.Aimg)"
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
<!-- </div>-->
<!-- <div style="display: flex">-->
<el-radio :label="2" :disabled='radioFlag'
:class="[isradio ? (this.reduceAnswer.rightAnswer==='B' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">
{{showAnswer.answerB}}
</el-radio>
<ul v-if="showAnswer.Bimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Bimg" alt=""
@click="magnifyPhoto(showAnswer.Bimg)"
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
<!-- </div>-->
<!-- <div style="display: flex">-->
<el-radio :label="3" :disabled='radioFlag'
:class="[isradio ? (this.reduceAnswer.rightAnswer==='C' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">
{{showAnswer.answerC}}
</el-radio>
<ul v-if="showAnswer.Cimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Cimg" alt=""
@click="magnifyPhoto(showAnswer.Cimg)"
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
<!-- </div>-->
<!-- <div style="display: flex">-->
<el-radio :label="4" :disabled='radioFlag'
:class="[isradio ? (this.reduceAnswer.rightAnswer==='D' ? 'checkboxTrueStyle' : 'radioFlaseStyle'):'noStyle']">
{{showAnswer.answerD}}
</el-radio>
<ul v-if="showAnswer.Dimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Dimg" alt=""
@click="magnifyPhoto(showAnswer.Dimg)"
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
<!-- </div>-->
</el-radio-group> </el-radio-group>
<div class="analysis" id="topic1Right" style="display: none"> <div class="analysis" id="topic1Right" style="display: none">
<ul> <ul>
<li class="first "> <el-tag type="success">正确答案：</el-tag><span class="right">{{reduceAnswer.rightAnswer}}</span></li> <li class="first "> <el-tag type="success">正确答案：</el-tag><span class="right">{{reduceAnswer.rightAnswer}}</span></li>
<li class="second"><el-tag>题目解析：</el-tag> <li class="second"><el-tag>题目解析：</el-tag>
<div class="li2right">{{reduceAnswer.analysis == null ? '无': reduceAnswer.analysis}}</div> <div class="li2right">{{(reduceAnswer.analysis == null || reduceAnswer.analysis == '') ? '无': reduceAnswer.analysis}}</div>
<!-- <div class="li2right">{{reduceAnswer.analysis == null || reduceAnswer.analysis=='null' ? '强强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我们努力去外面人了吗；了米女方老大是哪里发你来撒文风给了你手里的你发了什么劳动法；饿了么人类；魔法师空间是你的看法不射控大部分考生蓝风铃看到看见菲尼克斯的缴纳罚款楼上的你发了看到了妇女四点零分': reduceAnswer.analysis}}</div>--> <!-- <div class="li2right">{{reduceAnswer.analysis == null || reduceAnswer.analysis=='null' ? '强强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我强强强强强强强强强强强强强刘乾坤万年两年前为了来思考每年的法律手段你疯了目前我们努力去外面人了吗；了米女方老大是哪里发你来撒文风给了你手里的你发了什么劳动法；饿了么人类；魔法师空间是你的看法不射控大部分考生蓝风铃看到看见菲尼克斯的缴纳罚款楼上的你发了看到了妇女四点零分': reduceAnswer.analysis}}</div>-->
</li> </li>
</ul> </ul>
...@@ -64,19 +113,59 @@ ...@@ -64,19 +113,59 @@
</div> </div>
<div v-if=" optionValue == '多选题'" > <div v-if=" optionValue == '多选题'" >
<el-checkbox-group v-model="checkList" @change="handleCheckboxChange" > <el-checkbox-group v-model="checkList" @change="handleCheckboxChange" >
<el-checkbox :label="1" :disabled='radioFlag' <div style="display: flex">
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('A') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'"> <el-checkbox :label="1" :disabled='radioFlag'
{{showAnswer.answerA}} :class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('A') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
</el-checkbox> {{showAnswer.answerA}}
<el-checkbox :label="2" :disabled='radioFlag' </el-checkbox>
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('B') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'"> <ul v-if="showAnswer.Aimg" style="display: flex;margin-left: 30px">
{{showAnswer.answerB}}</el-checkbox > <li style="overflow: visible;display: flex">
<el-checkbox :label="3" :disabled='radioFlag' <img :src="showAnswer.Aimg" alt=""
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('C') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'"> @click="magnifyPhoto(showAnswer.Aimg)"
{{showAnswer.answerC}}</el-checkbox > style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
<el-checkbox :label="4" :disabled='radioFlag' </li>
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('D') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'"> </ul>
{{showAnswer.answerD}}</el-checkbox > </div>
<div style="display: flex">
<el-checkbox :label="2" :disabled='radioFlag'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('B') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
{{showAnswer.answerB}}
</el-checkbox>
<ul v-if="showAnswer.Bimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Bimg" alt=""
@click="magnifyPhoto(showAnswer.Bimg)"
style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
</div>
<div style="display:flex;">
<el-checkbox :label="3" :disabled='radioFlag'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('C') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
{{showAnswer.answerC}}
</el-checkbox>
<ul v-if="showAnswer.Cimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Cimg" alt=""
@click="magnifyPhoto(showAnswer.Cimg)"
style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
</div>
<div style="display: flex">
<el-checkbox :label="4" :disabled='radioFlag'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('D') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
{{showAnswer.answerD}}
</el-checkbox>
<ul v-if="showAnswer.Dimg" style="display: flex;margin-left: 30px">
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Dimg" alt=""
@click="magnifyPhoto(showAnswer.Dimg)"
style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
</div>
</el-checkbox-group> </el-checkbox-group>
<el-button class="submitAnswerClass" type="primary" plain v-show="isOptionSelected" @click="submitAnswer" >提交</el-button> <el-button class="submitAnswerClass" type="primary" plain v-show="isOptionSelected" @click="submitAnswer" >提交</el-button>
...@@ -87,7 +176,7 @@ ...@@ -87,7 +176,7 @@
<span class="right">{{reduceAnswer.rightAnswer}}</span></li> <span class="right">{{reduceAnswer.rightAnswer}}</span></li>
<li class="second"> <li class="second">
<el-tag>题目解析：</el-tag> <el-tag>题目解析：</el-tag>
<div class="li2right">{{reduceAnswer.analysis == null ? '无': reduceAnswer.analysis}}</div> <div class="li2right">{{(reduceAnswer.analysis == null || reduceAnswer.analysis == '') ? '无': reduceAnswer.analysis}}</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -104,7 +193,7 @@ ...@@ -104,7 +193,7 @@
<span class="right">{{pdtanswer}}</span></li> <span class="right">{{pdtanswer}}</span></li>
<li class="second"> <li class="second">
<el-tag>题目解析：</el-tag> <el-tag>题目解析：</el-tag>
<div class="li2right">{{reduceAnswer.analysis == null ? '无': reduceAnswer.analysis}}</div> <div class="li2right">{{(reduceAnswer.analysis == null || reduceAnswer.analysis == '')? '无': reduceAnswer.analysis}}</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -229,9 +318,13 @@ export default { ...@@ -229,9 +318,13 @@ export default {
this.optionValue = "单选题" this.optionValue = "单选题"
this.showAnswer ={ this.showAnswer ={
answerA:reduceAnswer.answerA, answerA:reduceAnswer.answerA,
Aimg:reduceAnswer.aimg,
answerB:reduceAnswer.answerB, answerB:reduceAnswer.answerB,
Bimg:reduceAnswer.bimg,
answerC:reduceAnswer.answerC, answerC:reduceAnswer.answerC,
Cimg:reduceAnswer.cimg,
answerD:reduceAnswer.answerD, answerD:reduceAnswer.answerD,
Dimg:reduceAnswer.dimg,
} }
}else if (reduceAnswer.oneOrMore=='2'){ }else if (reduceAnswer.oneOrMore=='2'){
this.optionValue = "多选题" this.optionValue = "多选题"
...@@ -535,7 +628,7 @@ export default { ...@@ -535,7 +628,7 @@ export default {
.radioFlaseStyle::before{ .radioFlaseStyle::before{
content: "×"; content: "×";
position: absolute; position: absolute;
top: -25px; top: -19px;
left: -8px; left: -8px;
color: #f50808; color: #f50808;
font-size: 30px; font-size: 30px;
...@@ -780,6 +873,7 @@ export default { ...@@ -780,6 +873,7 @@ export default {
} }
.flexarea { .flexarea {
display: flex; display: flex;
padding-top: 90px;
} }
.flexarea .right { .flexarea .right {
flex: 1; flex: 1;
...@@ -919,6 +1013,8 @@ export default { ...@@ -919,6 +1013,8 @@ export default {
} }
#answer .top { #answer .top {
background-color: rgb(39, 118, 223); background-color: rgb(39, 118, 223);
position: fixed;
width: 100%;
} }
#answer .item { #answer .item {
display: flex; display: flex;
...@@ -944,6 +1040,7 @@ export default { ...@@ -944,6 +1040,7 @@ export default {
align-items: center; align-items: center;
} }
#answer { #answer {
position:relative;
padding-bottom: 30px; padding-bottom: 30px;
} }
.icon20 { .icon20 {
......
src/components/teacher/addAnswerChildren.vue
...@@ -105,63 +105,137 @@ ...@@ -105,63 +105,137 @@
<div class="change" v-if="optionValue == '单选题' || optionValue=='多选题'"> <div class="change" v-if="optionValue == '单选题' || optionValue=='多选题'">
<div class="title"> <div class="title">
<el-tag>题目:</el-tag><span>在下面的输入框中输入题目,形如--DNS 服务器和DHCP服务器的作用是（）</span> <el-tag>题目:</el-tag><span>在下面的输入框中输入题目,形如--DNS 服务器和DHCP服务器的作用是（）</span>
<el-input <div style="display: flex">
type="textarea" <el-input
rows="4" type="textarea"
v-model="postChange.question" rows="4"
placeholder="请输入题目内容" v-model="postChange.question"
resize="none" placeholder="请输入题目内容"
class="answer"> resize="none"
</el-input> class="answer">
<el-upload </el-input>
class="upload-demo" <el-upload
action="#" class="upload-demo"
accept="image/jpg,image/jpeg,image/png" action="#"
:auto-upload="false" accept="image/jpg,image/jpeg,image/png"
:on-change="(file, fileList) => {handlePhotoChange(file, fileList);}" :auto-upload="false"
:on-remove="handleRemove" :on-change="(file, fileList) => {handlePhotoChange(file, fileList);}"
:file-list="photoList" :on-remove="handleRemove"
list-type="picture"> :file-list="photoList"
<div> list-type="picture"
<el-button size="small" type="primary">点击上传</el-button> >
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> <div>
</div> <el-button size="small" type="primary">选择图片</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
</div>
</el-upload>
</div>
</el-upload>
</div> </div>
<div class="options"> <div class="options">
<ul> <ul>
<li> <li>
<el-tag type="success">A</el-tag> <el-tag type="success">A</el-tag>
<el-input <div style="display: flex;width: 1000px;">
placeholder="请输入选项A的内容" <el-input
v-model="postChange.answerA" placeholder="请输入选项A的内容"
clearable=""> v-model="postChange.answerA"
</el-input> clearable="">
</el-input>
<el-upload
class="oneSelect-upload-demo"
action="#"
accept="image/jpg,image/jpeg,image/png"
:auto-upload="false"
:on-change="(Afile, AfileList) => {AhandlePhotoChange(Afile, AfileList);}"
:on-remove="AhandleRemove"
:file-list="AphotoList"
:on-exceed="exceedFile"
:limit="1"
list-type="picture">
<div>
<el-button size="small" type="primary">选择图片</el-button>
</div>
</el-upload>
</div>
</li> </li>
<li> <li>
<el-tag type="success">B</el-tag> <el-tag type="success">B</el-tag>
<el-input <div style="display: flex;width: 1000px;">
placeholder="请输入选项B的内容" <el-input
v-model="postChange.answerB" placeholder="请输入选项B的内容"
clearable=""> v-model="postChange.answerB"
</el-input> clearable="">
</el-input>
<el-upload
class="oneSelect-upload-demo"
action="#"
accept="image/jpg,image/jpeg,image/png"
:auto-upload="false"
:on-change="(file, fileList) => {BhandlePhotoChange(file, fileList);}"
:on-remove="BhandleRemove"
:file-list="BphotoList"
:on-exceed="exceedFile"
:limit="1"
list-type="picture">
<div>
<el-button size="small" type="primary">选择图片</el-button>
</div>
</el-upload>
</div>
</li> </li>
<li> <li>
<el-tag type="success">C</el-tag> <el-tag type="success">C</el-tag>
<el-input <div style="display: flex;width: 1000px;">
placeholder="请输入选项C的内容" <el-input
v-model="postChange.answerC" placeholder="请输入选项C的内容"
clearable=""> v-model="postChange.answerC"
</el-input> clearable="">
</el-input>
<el-upload
class="oneSelect-upload-demo"
action="#"
accept="image/jpg,image/jpeg,image/png"
:auto-upload="false"
:on-change="(file, fileList) => {ChandlePhotoChange(file, fileList);}"
:on-remove="ChandleRemove"
:file-list="CphotoList"
:on-exceed="exceedFile"
:limit="1"
list-type="picture">
<div>
<el-button size="small" type="primary">选择图片</el-button>
</div>
</el-upload>
</div>
</li> </li>
<li> <li>
<el-tag type="success">D</el-tag> <el-tag type="success">D</el-tag>
<el-input <div style="display:flex;width: 1000px;">
placeholder="请输入选项D的内容" <el-input
v-model="postChange.answerD" placeholder="请输入选项D的内容"
clearable=""> v-model="postChange.answerD"
</el-input> clearable="">
</el-input>
<el-upload
class="oneSelect-upload-demo"
action="#"
accept="image/jpg,image/jpeg,image/png"
:auto-upload="false"
:on-change="(file, fileList) => {DhandlePhotoChange(file, fileList);}"
:on-remove="DhandleRemove"
:file-list="DphotoList"
:on-exceed="exceedFile"
:limit="1"
list-type="picture">
<div>
<el-button size="small" type="primary">选择图片</el-button>
</div>
</el-upload>
</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -181,65 +255,37 @@ ...@@ -181,65 +255,37 @@
<el-button v-else type="primary" @click="editSubmit()">确认修改</el-button> <el-button v-else type="primary" @click="editSubmit()">确认修改</el-button>
</div> </div>
</div> </div>
<!-- &lt;!&ndash; 填空题部分 &ndash;&gt;
<div class="change fill" v-if="optionValue == '填空题'">
<div class="title">
<el-tag>题目:</el-tag><span>输入题目,形如&#45;&#45;从计算机网络系统组成的角度看，计算机网络可以分为()和()。注意需要考生答题部分一定要用括号（英文半角）括起来。</span>
<el-input
type="textarea"
rows="4"
v-model="postFill.question"
placeholder="请输入题目内容"
resize="none"
class="answer">
</el-input>
</div>
<div class="fillAnswer">
<el-tag>正确答案:</el-tag>
<el-input v-model="postFill.answer"></el-input>
</div>
<div class="title analysis">
<el-tag type="success">解析:</el-tag><span>下方输入框中输入答案解析</span>
<el-input
type="textarea"
rows="4"
v-model="postFill.analysis"
placeholder="请输入答案解析"
resize="none"
class="answer">
</el-input>
</div>
<div class="submit">
<el-button type="primary" @click="fillSubmit()">立即添加</el-button>
</div>
</div>-->
<!-- 判断题 --> <!-- 判断题 -->
<div class="change judge" v-if="optionValue == '判断题'"> <div class="change judge" v-if="optionValue == '判断题'">
<div class="title"> <div class="title">
<el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span> <el-tag>题目:</el-tag><span>在下面的输入框中输入题目</span>
<el-input <div style="display:flex;">
type="textarea" <el-input
rows="4" type="textarea"
v-model="postJudge.question" rows="4"
placeholder="请输入题目内容" v-model="postJudge.question"
resize="none" placeholder="请输入题目内容"
class="answer"> resize="none"
</el-input> class="answer">
<el-upload </el-input>
class="upload-demo" <el-upload
action="#" class="upload-demo"
accept="image/jpg,image/jpeg,image/png" action="#"
:auto-upload="false" accept="image/jpg,image/jpeg,image/png"
:on-change="(file, fileList) => {handlePhotoChange(file, fileList);}" :auto-upload="false"
:on-remove="handleRemove" :on-change="(file, fileList) => {handlePhotoChange(file, fileList);}"
:file-list="photoList" :on-remove="handleRemove"
list-type="picture"> :on-exceed="exceedFile"
<div> :file-list="photoList"
<el-button size="small" type="primary">点击上传</el-button> list-type="picture">
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> <div>
</div> <el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
</div>
</el-upload>
</div>
</el-upload>
</div> </div>
<div class="judgeAnswer"> <div class="judgeAnswer">
<el-radio v-model="postJudge.answer" label="T">正确</el-radio> <el-radio v-model="postJudge.answer" label="T">正确</el-radio>
...@@ -279,7 +325,11 @@ ...@@ -279,7 +325,11 @@
moreSelect:"", moreSelect:"",
row:{},//路由上的参数 row:{},//路由上的参数
isAddOrEdit:true, isAddOrEdit:true,
photoList: [], photoList:[],
AphotoList: [],
BphotoList: [],
CphotoList: [],
DphotoList: [],
changeNumber: null, //选择题出题数量 changeNumber: null, //选择题出题数量
fillNumber: null, //填空题出题数量 fillNumber: null, //填空题出题数量
judgeNumber: null, //判断题出题数量 judgeNumber: null, //判断题出题数量
...@@ -368,6 +418,10 @@ ...@@ -368,6 +418,10 @@
answerB: '', answerB: '',
answerC: '', answerC: '',
answerD: '', answerD: '',
Aimg:'',
Bimg:'',
Cimg:'',
Dimg:'',
}, },
postFill: { //填空题提交内容 postFill: { //填空题提交内容
subject: '', //试卷名称 subject: '', //试卷名称
...@@ -397,6 +451,10 @@ ...@@ -397,6 +451,10 @@
optionValue(newValue) { optionValue(newValue) {
this.postChange.rightAnswer='' this.postChange.rightAnswer=''
this.photoList=[] this.photoList=[]
this.AphotoList=[]
this.BphotoList=[]
this.CphotoList=[]
this.DphotoList=[]
// this.postChange = {} // this.postChange = {}
// this.oneSelect= '' // this.oneSelect= ''
// this.moreSelect = "" // this.moreSelect = ""
...@@ -408,10 +466,13 @@ ...@@ -408,10 +466,13 @@
const row = JSON.parse(this.$route.query.row); const row = JSON.parse(this.$route.query.row);
console.log(row) console.log(row)
this.row = row this.row = row
if(row.aimg){this.AphotoList.push({url:row.aimg})}
if(row.bimg){this.BphotoList.push({url:row.bimg})}
if(row.cimg){this.BphotoList.push({url:row.cimg})}
if(row.dimg){this.BphotoList.push({url:row.dimg})}
//点击编辑时获取照片信息并回显 //点击编辑时获取照片信息并回显
this.$axios(`/api/answersPhoto/${row.questionid}/${row.tablename}/${row.paperid}`).then(res => { this.$axios(`/api/answersPhoto/${row.questionid}/${row.tablename}/${row.paperid}`).then(res => {
const imgs = res.data.data const imgs = res.data.data
console.log(imgs)
if (imgs && imgs.length>0){ if (imgs && imgs.length>0){
imgs.forEach(img=>{ imgs.forEach(img=>{
this.photoList.push({ this.photoList.push({
...@@ -419,7 +480,6 @@ ...@@ -419,7 +480,6 @@
}) })
}) })
} }
console.log(this.photoList)
}) })
this.isAddOrEdit = false this.isAddOrEdit = false
if (row.oneOrMore=='1'){ //单选题 if (row.oneOrMore=='1'){ //单选题
...@@ -459,14 +519,54 @@ ...@@ -459,14 +519,54 @@
this.getParams() this.getParams()
}, },
methods: { methods: {
//设置只能上传一个文件
exceedFile(files, fileList) {
this.$message.error(
`只能选择 1 个图片，当前共选择了 ${files.length + fileList.length} 个`
);
},
//添加照片
AhandlePhotoChange(file, fileList) {
let self = this;
self.AphotoList = fileList
},
BhandlePhotoChange(file, fileList) {
let self = this;
self.BphotoList = fileList
},
ChandlePhotoChange(file, fileList) {
let self = this;
self.CphotoList = fileList
},
DhandlePhotoChange(file, fileList) {
let self = this;
self.DphotoList = fileList
},
//添加照片 //添加照片
handlePhotoChange(file, fileList) { handlePhotoChange(file, fileList) {
let self = this; let self = this;
self.photoList = fileList self.photoList = fileList
}, },
//移除照片 AhandleRemove(file,fileList) {
let self = this;
self.AphotoList = fileList
},
BhandleRemove(file,fileList) {
let self = this;
self.BphotoList = fileList
},
ChandleRemove(file,fileList) {
let self = this;
self.CphotoList = fileList
},
DhandleRemove(file,fileList) {
let self = this;
self.DphotoList = fileList
},
//移除照片
handleRemove(file,fileList) { handleRemove(file,fileList) {
this.photoList =fileList let self = this;
self.photoList = fileList
}, },
create() { create() {
this.$axios({ this.$axios({
...@@ -511,6 +611,8 @@ ...@@ -511,6 +611,8 @@
this.postChange.oneOrMore = '1' this.postChange.oneOrMore = '1'
this.postChange.rightAnswer = this.oneSelect this.postChange.rightAnswer = this.oneSelect
this.postChange.subject = this.subject this.postChange.subject = this.subject
this.getABCDImg()
console.log(this.postChange)
if (this.optionValue=='多选题' && this.moreSelect){ if (this.optionValue=='多选题' && this.moreSelect){
this.postChange.rightAnswer = this.moreSelect.join(', '); this.postChange.rightAnswer = this.moreSelect.join(', ');
this.postChange.oneOrMore = '2' this.postChange.oneOrMore = '2'
...@@ -518,9 +620,7 @@ ...@@ -518,9 +620,7 @@
this.$axios({ //提交数据到选择题题库表 this.$axios({ //提交数据到选择题题库表
url: '/api/MultiQuestion', url: '/api/MultiQuestion',
method: 'post', method: 'post',
data: { data: {...this.postChange}
...this.postChange
}
}).then(res => { //添加成功显示提示 }).then(res => { //添加成功显示提示
let status = res.data.code let status = res.data.code
if(status == 200) { if(status == 200) {
...@@ -551,6 +651,64 @@ ...@@ -551,6 +651,64 @@
}) })
}) })
}, },
processImageFile(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
const blob = new Blob([file.raw]);
reader.onload = (event) => {
const base64 = event.target.result;
const imageDataUrl = base64.replace(/^[^,]+/, 'data:image/jpg;base64');
resolve(imageDataUrl);
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsDataURL(blob);
});
},
getABCDImg(){
let self = this;
if (this.AphotoList[0]){
const file = this.AphotoList[0];
this.processImageFile(file)
.then((imageDataUrl) => {
self.postChange.Aimg = imageDataUrl;
})
.catch((error) => {
console.error(error);
});
}
if (this.BphotoList[0]){
const file = this.BphotoList[0]; // 获取文件对象
this.processImageFile(file)
.then((imageDataUrl) => {
self.postChange.Bimg = imageDataUrl;
})
.catch((error) => {
console.error(error);
});
}
if (this.CphotoList[0]){
const file = this.CphotoList[0]; // 获取文件对象
this.processImageFile(file)
.then((imageDataUrl) => {
self.postChange.Cimg = imageDataUrl;
})
.catch((error) => {
console.error(error);
});
}
if (this.DphotoList[0]){
const file = this.DphotoList[0]; // 获取文件对象
this.processImageFile(file)
.then((imageDataUrl) => {
self.postChange.Dimg = imageDataUrl;
})
.catch((error) => {
console.error(error);
});
}
},
//单选多选修改 //单选多选修改
editSubmit(){ editSubmit(){
console.log(this.photoList) console.log(this.photoList)
...@@ -566,6 +724,7 @@ ...@@ -566,6 +724,7 @@
this.postChange.subject = this.row.subject this.postChange.subject = this.row.subject
this.postChange.questionid = this.row.questionid this.postChange.questionid = this.row.questionid
this.postChange.tablename = this.row.tablename this.postChange.tablename = this.row.tablename
this.getABCDImg()
this.$axios({ //提交数据到选择题题库表 this.$axios({ //提交数据到选择题题库表
url: '/api/updateAnswers', url: '/api/updateAnswers',
method: 'post', method: 'post',
...@@ -573,6 +732,7 @@ ...@@ -573,6 +732,7 @@
...this.postChange ...this.postChange
} }
}).then(res => { }).then(res => {
console.log(self.row)
var params = new FormData(); var params = new FormData();
params.append('questionId',self.row.questionid) params.append('questionId',self.row.questionid)
params.append('questionType','1') params.append('questionType','1')
...@@ -687,6 +847,11 @@ ...@@ -687,6 +847,11 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.options{
/deep/.el-input__inner{
height: -webkit-fill-available !important;
}
}
//小对号 //小对号
/deep/.el-upload-list__item-status-label{ /deep/.el-upload-list__item-status-label{
display: block; display: block;
...@@ -695,6 +860,11 @@ ...@@ -695,6 +860,11 @@
.upload-demo{ .upload-demo{
height: 100px; height: 100px;
display: flex; display: flex;
margin-top: 20px;
}
//单选选项的上传
.oneSelect-upload-demo{
display: flex;
} }
//图片列表 //图片列表
/deep/.el-upload-list--picture{ /deep/.el-upload-list--picture{
...@@ -735,6 +905,8 @@ ...@@ -735,6 +905,8 @@
} }
} }
.change { .change {
max-height: 660px; /* 设置固定高度，根据需要调整 */
overflow: auto; /* 添加滚动条 */
margin-top: 20px; margin-top: 20px;
padding: 20px 16px; padding: 20px 16px;
background-color: #E7F6F6; background-color: #E7F6F6;
...@@ -753,6 +925,7 @@ ...@@ -753,6 +925,7 @@
} }
} }
.options { .options {
display: flex;
ul { ul {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
......
src/components/teacher/addVideo.vue
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
accept="video/*" accept="video/*"
:on-change="handlePhotoChange" :on-change="handlePhotoChange"
:limit="1" :limit="1"
ref="uploadRef"
:show-file-list="false"> :show-file-list="false">
<el-button slot="trigger" type="primary" style="margin-left: 10px;" title="只能上传视频文件">上传视频</el-button> <el-button slot="trigger" type="primary" style="margin-left: 10px;" title="只能上传视频文件">上传视频</el-button>
</el-upload> </el-upload>
...@@ -160,6 +161,7 @@ ...@@ -160,6 +161,7 @@
this.videoName = file.name this.videoName = file.name
this.fileList.push(file.raw); this.fileList.push(file.raw);
this.submitForm(); this.submitForm();
}, },
//移除 //移除
handleRemove(file) { handleRemove(file) {
...@@ -195,7 +197,9 @@ ...@@ -195,7 +197,9 @@
this.fileList = [] this.fileList = []
this.video = '' this.video = ''
this.$message.success('添加成功'); this.$message.success('添加成功');
this.videoList() this.videoList();
// 重置上传组件
this.$refs.uploadRef.clearFiles();
} }
}) })
}, },
......
src/components/videoList/packages/vue-mini-player/src/VuePlayer.vue
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<source v-for="(item, index) in vUrl" <source v-for="(item, index) in vUrl"
:key="index" :key="index"
:src="item" :src="item"
:type="`${getUrlType(item)}`"> type="video/mp4">
Your browser does not support the video element. Your browser does not support the video element.
</video> </video>
</template> </template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment