liankao/src/pages/process/fjct/index.vue

<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>