mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-19 15:56:47 +08:00
添案例接口添多数据情况批量标记弹窗封装新增查答卷查投票抽屉考勤面管添在线注释及清空考和测管内容判断
This commit is contained in:
Ggysh-7
287
src/components/drawers/CheckQue.vue
Normal file
287
src/components/drawers/CheckQue.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<a-drawer
|
||||
:visible="CQvisible"
|
||||
class="drawerStyle CheckWork"
|
||||
placement="right"
|
||||
width="40%"
|
||||
@after-visible-change="afterVisibleChange"
|
||||
>
|
||||
<div class="drawerMain">
|
||||
<div class="headersub">
|
||||
<div class="headerTitle">查看答卷</div>
|
||||
<img
|
||||
style="width:29px;height:29px;cursor:pointer"
|
||||
src="../../assets/images/basicinfo/close.png"
|
||||
@click="closeDrawer"
|
||||
/>
|
||||
</div>
|
||||
<div class="headersup"><span>评估名称：<span style="color:#999ba3">管理者进阶作业</span></span><span style="margin-left:25px">考试总分：<span style="color:#999ba3">100分</span></span><span style="margin-left:25px">及格分：<span style="color:#999ba3">60分</span></span></div>
|
||||
<div class="main">
|
||||
<div class="basetext"><span>考试成绩：</span><span>{{score}}</span></div>
|
||||
<div class="basequestion">
|
||||
<div class="ques" v-for=" item,index in queData" :key="index">
|
||||
<div class="quename">{{ index+1 + "、" + "【" + item.quetype + "】" + item.quename }}</div>
|
||||
<div class="queanswer">
|
||||
<div class="queabox" v-for="items,index in item.answer" :key="index">
|
||||
<div class="single" v-if="item.quetype === '判断' ">
|
||||
<a-radio-group v-model:value="items.index">
|
||||
<div class="queaboxs">
|
||||
<a-radio
|
||||
v-model:checked="checked"
|
||||
:value="1"
|
||||
style="margin-bottom:5px"
|
||||
>
|
||||
正确
|
||||
</a-radio>
|
||||
<a-radio
|
||||
v-model:checked="checked"
|
||||
:value="2"
|
||||
style="margin-bottom:5px"
|
||||
>
|
||||
错误
|
||||
</a-radio>
|
||||
</div>
|
||||
</a-radio-group>
|
||||
<div class="analysisbox">
|
||||
<div class="answer">
|
||||
<span>答案：</span>{{items.answercontent}}
|
||||
</div>
|
||||
<div class="analysis">
|
||||
<span>解析：</span>{{items.analysis}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="multiple" v-if="item.quetype === '多选' ">
|
||||
<a-checkbox
|
||||
:value="items.value">
|
||||
{{items.answercontent}}
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btnn">
|
||||
<button class="btn1">取消</button>
|
||||
<button class="btn2">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toRefs,reactive } from '@vue/reactivity';
|
||||
export default {
|
||||
name:"CheckWork",
|
||||
props:{
|
||||
CQvisible:{
|
||||
type:Boolean,
|
||||
default:false,
|
||||
},
|
||||
},
|
||||
setup(props,ctx){
|
||||
const state = reactive({
|
||||
score:null, //传过来赋给score
|
||||
queData:[
|
||||
{
|
||||
quetype:"判断",
|
||||
quename:"当前项目对您是否有帮助?",
|
||||
value:1,
|
||||
answer:[
|
||||
{
|
||||
value:1,
|
||||
answercontent:"错误",
|
||||
analysis:"暂无解析",
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
quetype:"多选",
|
||||
quename:"哪些项目跨年快乐memememememeemme?",
|
||||
value:2,
|
||||
answer:[
|
||||
{
|
||||
value:1,
|
||||
answercontent:"A、有帮助"
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
answercontent:"B、mei帮助"
|
||||
},
|
||||
{
|
||||
value:3,
|
||||
answercontent:"C、mei5155帮助"
|
||||
},
|
||||
{
|
||||
value:4,
|
||||
answercontent:"D、12345mei帮助"
|
||||
}
|
||||
],
|
||||
answercontent:"错误",
|
||||
analysis:"暂无解析",
|
||||
},
|
||||
{
|
||||
quetype:"多选",
|
||||
quename:"哪些项目跨年快乐memememememeemme?",
|
||||
value:3,
|
||||
answer:[
|
||||
{
|
||||
value:1,
|
||||
answercontent:"A、有帮助"
|
||||
},
|
||||
{
|
||||
value:2,
|
||||
answercontent:"B、mei帮助"
|
||||
},
|
||||
{
|
||||
value:3,
|
||||
answercontent:"C、mei5155帮助"
|
||||
},
|
||||
{
|
||||
value:4,
|
||||
answercontent:"D、12345mei帮助"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
quetype:"判断",
|
||||
quename:"当前项目对您是否有帮助?",
|
||||
value:4,
|
||||
answer:[
|
||||
{
|
||||
value:1,
|
||||
answercontent:"错误",
|
||||
analysis:"暂无解析",
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const closeDrawer = ()=> {
|
||||
ctx.emit("update:CQvisible",false)
|
||||
}
|
||||
const afterVisibleChange = (bool) => {
|
||||
console.log(bool);
|
||||
}
|
||||
return{
|
||||
...toRefs(state),
|
||||
closeDrawer,
|
||||
afterVisibleChange,
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.CheckWork {
|
||||
.drawerMain {
|
||||
min-width: 400px;
|
||||
margin: 0px 32px 0px 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.headersub {
|
||||
height: 73px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.headerTitle {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
.headersup{
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
margin-bottom: 70px;
|
||||
.basetext{
|
||||
color: #333333;
|
||||
line-height: 25px;
|
||||
margin-top: 27px ;
|
||||
margin-bottom: 27px ;
|
||||
}
|
||||
.basequestion{
|
||||
.ques{
|
||||
.quename{
|
||||
margin: 10px auto ;
|
||||
font-weight: bold;
|
||||
}
|
||||
.queanswer{
|
||||
padding-left: 25px;
|
||||
.queabox{
|
||||
margin-bottom: 10px;
|
||||
.single{
|
||||
padding: 5px;
|
||||
.queaboxs{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.analysisbox{
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
|
||||
border-radius: 8px;
|
||||
margin-left: -10px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
.multiple{
|
||||
padding: 5px;
|
||||
.queaboxs{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.analysisbox{
|
||||
border: 1px solid #e8e8e8;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.07);
|
||||
border-radius: 8px;
|
||||
margin-left: -10px;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btnn {
|
||||
height: 72px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
||||
.btn1 {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
border: 1px solid #4ea6ff;
|
||||
border-radius: 8px;
|
||||
color: #4ea6ff;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn2 {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background: #4ea6ff;
|
||||
border-radius: 8px;
|
||||
border: 0;
|
||||
margin-left: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user