|
|
@@ -0,0 +1,378 @@
|
|
|
+<template>
|
|
|
+ <NavHeader/>
|
|
|
+ <bread-crumb/>
|
|
|
+ <div class="w-1200px m-auto">
|
|
|
+ <div class="relative -mt-40px flex justify-end">
|
|
|
+ <button type="button" class="back-btn" @click="linkTo('process')">返回</button>
|
|
|
+ </div>
|
|
|
+ <div class="mt-10px w-full min-h-860px bg-hex-FFF pt-25px">
|
|
|
+ <h3 class="text-18px text-center">附件出题</h3>
|
|
|
+ <div class="mt-60px pl-250px">
|
|
|
+ <el-form ref="ruleFormRef" :rules="rules" :model="createForm" label-width="140px" size="large" status-icon>
|
|
|
+ <el-form-item label="学科" style="width: 620px">
|
|
|
+ <h3 class="text-14px">{{createForm.xkmc}}</h3>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="答题卡名称" prop="dtkmc" style="width: 620px">
|
|
|
+ <el-input v-model="createForm.dtkmc" placeholder="请输入答题卡名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="答题卡别名" style="width: 620px">
|
|
|
+ <el-input v-model="createForm.dtkbm" placeholder="请输入答题卡别名" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="及格分数" prop="jgfs" style="width: 620px">
|
|
|
+ <el-input v-model="createForm.jgfs" placeholder="请输入及格分数" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="优秀分数" prop="yxfs" style="width: 620px">
|
|
|
+ <el-input v-model="createForm.yxfs" placeholder="请输入优秀分数" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="流程类型" prop="lclx" style="width: 620px">
|
|
|
+ <el-radio-group v-model="createForm.lclx">
|
|
|
+ <el-radio v-for="item in lc_type_list" :label="item.value">{{item.label}}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="阅卷流程" prop="yjlc" style="width: 620px">
|
|
|
+ <el-radio-group v-model="createForm.yjlc">
|
|
|
+ <el-radio v-for="item in yjlc" :label="item.value">{{item.label}}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div v-if="createForm.yjlc === '1'">
|
|
|
+ <el-button type="primary" color="#003eee">
|
|
|
+ <el-icon :size="24"><UploadFilled /></el-icon>
|
|
|
+ <span>上传文件</span>
|
|
|
+ </el-button>
|
|
|
+ <span class="ml-10px text-13px text-hex-999999">上传文件格式支持 jpg,png,jpeg,docx,doc,mp4,pdf,ppt,pptx,xls,xlsx</span>
|
|
|
+ </div>
|
|
|
+ <div v-else-if="createForm.yjlc === '2'">
|
|
|
+ <el-button type="primary" color="#003eee">
|
|
|
+ <el-icon :size="24"><Promotion /></el-icon>
|
|
|
+ <span>启动客户端</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <el-button type="primary" color="#003eee" @click="dialogVisible = true">
|
|
|
+ <el-icon :size="24"><Plus /></el-icon>
|
|
|
+ <span>请选择答题卡</span>
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="createForm.yjlc === '2'" label="扫描文件展示列表"></el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div class="mt-50px pl-50px">
|
|
|
+ <el-button class="mr-20px" @click="linkTo('process')"><span class="px-40px">取消</span></el-button>
|
|
|
+ <el-button type="primary" color="#003eee" @click="handleSubmit(ruleFormRef)"><span class="px-40px">确定</span></el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisible"
|
|
|
+ title="答题卡选择"
|
|
|
+ width="980px"
|
|
|
+ custom-class="dialogTrick"
|
|
|
+ append-to-body
|
|
|
+ >
|
|
|
+ <el-form :inline="true" class="flex justify-between" size="large">
|
|
|
+ <el-form-item label="考试时间筛选">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="time"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择考试时间"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <div>
|
|
|
+ <el-form-item style="margin-right: 10px">
|
|
|
+ <el-input v-model="keyword" placeholder="请输入关键字" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button color="#003eee" type="primary">搜索</el-button>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <ul class="card-list py-15px">
|
|
|
+ <li class="relative py-15px" :class="chooseCheck.includes('1')?'selected':''">
|
|
|
+ <div class="choose">
|
|
|
+ <p class="set-check">
|
|
|
+ <input type="checkbox" id="1" value="1" v-model="chooseCheck">
|
|
|
+ <label :for="1"></label>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="w-162px h-108px m-auto overflow-hidden">
|
|
|
+ <img class="w-full" src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">2023-11-12联考答题卡</h3>
|
|
|
+ <button type="button" class="op-btn block m-auto">查看</button>
|
|
|
+ </li>
|
|
|
+ <li class="relative py-15px">
|
|
|
+ <div class="choose">
|
|
|
+ <p class="set-check">
|
|
|
+ <input type="checkbox" id="2" value="2" v-model="chooseCheck">
|
|
|
+ <label :for="2"></label>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="w-162px h-108px m-auto overflow-hidden">
|
|
|
+ <img class="w-full" src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">2023-11-12联考答题卡</h3>
|
|
|
+ <button type="button" class="op-btn block m-auto">查看</button>
|
|
|
+ </li>
|
|
|
+ <li class="relative py-15px">
|
|
|
+ <div class="w-162px h-108px m-auto overflow-hidden">
|
|
|
+ <img class="w-full" src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">2023-11-12联考答题卡</h3>
|
|
|
+ <button type="button" class="op-btn block m-auto">查看</button>
|
|
|
+ </li>
|
|
|
+ <li class="relative py-15px">
|
|
|
+ <div class="w-162px h-108px m-auto overflow-hidden">
|
|
|
+ <img class="w-full" src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">2023-11-12联考答题卡</h3>
|
|
|
+ <button type="button" class="op-btn block m-auto">查看</button>
|
|
|
+ </li>
|
|
|
+ <li class="relative py-15px">
|
|
|
+ <div class="w-162px h-108px m-auto overflow-hidden">
|
|
|
+ <img class="w-full" src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">2023-11-12联考答题卡</h3>
|
|
|
+ <button type="button" class="op-btn block m-auto">查看</button>
|
|
|
+ </li>
|
|
|
+ <li class="relative py-15px">
|
|
|
+ <div class="w-162px h-108px m-auto overflow-hidden">
|
|
|
+ <img class="w-full" src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">2023-11-12联考答题卡</h3>
|
|
|
+ <button type="button" class="op-btn block m-auto">查看</button>
|
|
|
+ </li>
|
|
|
+ <li class="relative py-15px">
|
|
|
+ <div class="w-162px h-108px m-auto overflow-hidden">
|
|
|
+ <img class="w-full" src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">2023-11-12联考答题卡</h3>
|
|
|
+ <button type="button" class="op-btn block m-auto">查看</button>
|
|
|
+ </li>
|
|
|
+ <li class="relative py-15px">
|
|
|
+ <div class="w-162px h-108px m-auto overflow-hidden">
|
|
|
+ <img class="w-full" src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">2023-11-12联考答题卡</h3>
|
|
|
+ <button type="button" class="op-btn block m-auto">查看</button>
|
|
|
+ </li>
|
|
|
+ <li class="relative py-15px">
|
|
|
+ <div class="w-162px h-108px m-auto overflow-hidden">
|
|
|
+ <img class="w-full" src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">2023-11-12联考答题卡</h3>
|
|
|
+ <button type="button" class="op-btn block m-auto">查看</button>
|
|
|
+ </li>
|
|
|
+ <li class="relative py-15px">
|
|
|
+ <div class="w-162px h-108px m-auto overflow-hidden">
|
|
|
+ <img class="w-full" src="https://yzy.bozedu.net/data/upload/exam_package/20230329/1521/210900241/5-1521-210900241-4096-20230329101520/image_20230329101519044.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <h3 class="mt-10px mb-10px px-20px text-13px leading-20px truncate text-center">2023-11-12联考答题卡</h3>
|
|
|
+ <button type="button" class="op-btn block m-auto">查看</button>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false" class="mr-15px" size="large">
|
|
|
+ <span class="px-10px">取消</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button size="large" color="#003eee" type="primary" @click="dialogVisible = false">
|
|
|
+ <span class="px-10px">确定</span>
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+ <commonFooter/>
|
|
|
+</template>
|
|
|
+<route lang="json">
|
|
|
+{
|
|
|
+"meta":{
|
|
|
+"title":"附件出题",
|
|
|
+"breadcrumb": true
|
|
|
+}
|
|
|
+}
|
|
|
+</route>
|
|
|
+<script setup>
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+const router = useRouter();
|
|
|
+const linkTo = (name) => {
|
|
|
+ router.push({ name });
|
|
|
+};
|
|
|
+const rules = $ref({
|
|
|
+ dtkmc:[{ required: true, message: '请输入答题卡名称', trigger: 'blur' }],
|
|
|
+ jgfs:[{ required: true, message: '请输入及格分数', trigger: 'blur' }],
|
|
|
+ yxfs:[{ required: true, message: '请输入优秀分数', trigger: 'blur' }],
|
|
|
+ lclx: [{required: true, message: '请选择流程类型', trigger: 'change'}],
|
|
|
+ yjlc: [{required: true, message: '请选择阅卷流程', trigger: 'change'}],
|
|
|
+})
|
|
|
+const ruleFormRef = ref(null);
|
|
|
+let createForm = $ref({
|
|
|
+ xkmc:'语文',
|
|
|
+ dtkmc:'',
|
|
|
+ dtkbm:'',
|
|
|
+ jgfs:'',
|
|
|
+ yxfs:'',
|
|
|
+ lclx:'1',
|
|
|
+ yjlc:'1'
|
|
|
+})
|
|
|
+let lc_type_list = [{
|
|
|
+ value: '1',
|
|
|
+ label: '常规'
|
|
|
+}, {
|
|
|
+ value: '2',
|
|
|
+ label: '自定义框选'
|
|
|
+}, {
|
|
|
+ value: '3',
|
|
|
+ label: '无定位点框选（第三方答题卡）'
|
|
|
+}]
|
|
|
+let yjlc = [{
|
|
|
+ value: '1',
|
|
|
+ label: '上传文件'
|
|
|
+}, {
|
|
|
+ value: '2',
|
|
|
+ label: '模板预扫描'
|
|
|
+}, {
|
|
|
+ value: '3',
|
|
|
+ label: '沿用答题卡'
|
|
|
+}]
|
|
|
+
|
|
|
+const handleCancel = () => {
|
|
|
+ router.back();
|
|
|
+}
|
|
|
+
|
|
|
+const handleSubmit = async (formEl) => {
|
|
|
+ if (!formEl) return;
|
|
|
+
|
|
|
+ formEl.validate(async (valid, fields) => {
|
|
|
+ if (valid) {
|
|
|
+
|
|
|
+ } else {
|
|
|
+ console.log("error submit!", fields);
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+let dialogVisible = $ref(false)
|
|
|
+let time = $ref('')
|
|
|
+let keyword = $ref('')
|
|
|
+let chooseCheck = $ref([]);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+.dialogTrick .el-dialog__footer {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.card-list{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ max-height: 480px;
|
|
|
+ overflow-y:auto;
|
|
|
+ li{
|
|
|
+ width: 203px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 2px solid #cacaca;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin-right: 40px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ &.selected{
|
|
|
+ border-color:#003eee;
|
|
|
+ }
|
|
|
+ &:nth-child(4n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ .card-pop{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-title{
|
|
|
+ width: 100%;
|
|
|
+ font-size: 13px;
|
|
|
+ line-height: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-pop{
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 10px;
|
|
|
+ z-index: 30;
|
|
|
+ background: rgba(0,0,0,.45);
|
|
|
+ display: none;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.op-btn {
|
|
|
+ width: 60px;
|
|
|
+ height: 30px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid #003eee;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #003eee;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.choose{
|
|
|
+ position: absolute;
|
|
|
+ left: -12px;
|
|
|
+ top:-12px;
|
|
|
+ z-index: 50;
|
|
|
+}
|
|
|
+.set-check {
|
|
|
+ position: relative;
|
|
|
+ z-index: 40;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+
|
|
|
+ label {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 0 4px rgba(0,0,0,0.18);
|
|
|
+ }
|
|
|
+
|
|
|
+ input[type=checkbox] {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ opacity: 0;
|
|
|
+ &:checked + label {
|
|
|
+ background: #003eee;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:checked + label:after {
|
|
|
+ content: '';
|
|
|
+ width: 16px;
|
|
|
+ height: 10px;
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ left: 4px;
|
|
|
+ border: 3px solid #fff;
|
|
|
+ border-top: none;
|
|
|
+ border-right: none;
|
|
|
+ -moz-transform: rotate(-45deg);
|
|
|
+ -ms-transform: rotate(-45deg);
|
|
|
+ -webkit-transform: rotate(-45deg);
|
|
|
+ transform: rotate(-45deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
luohailiang