liankao/src/pages/process/index.vue

<template>
  <NavHeader/>
  <bread-crumb/>
  <div class="w-1200px m-auto">
    <div class="flex items-center">
      <div class="w-360px">
        <el-date-picker
          v-model="exam_time"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="handleDateChange"
          size="large"
        />
      </div>

      <el-select class="ml-10px" v-model="exam_type" placeholder="考试类型" size="large" @change="filterData">
        <el-option label="全部" value="0"
        />
        <el-option
          v-for="item in type_list"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="keyword"
        class="ml-20px"
        style="width: 200px;"
        size="large"
        clearable
        @keyup.enter="filterData"
        @clear="filterData"
        placeholder="请输入关键字"
      />
      <el-button color="#003eee" class="ml-20px" type="primary" size="large" @click="filterData">搜索</el-button>
    </div>
    <div class="flex mt-20px justify-between">
      <button type="button" class="add-btn" @click="linkTo({name:'process-create'})">
        <el-icon class="inline-block align-middle">
          <Plus/>
        </el-icon>
        <span class="ml-5px inline-block align-middle">新建考试计划</span>
      </button>
    </div>
    <div class="mt-20px" v-if="listData.length > 0">
      <div class="process-list-table">
        <div class="head">
          <div class="w-340px text-left pl-20px">考试计划名称</div>
          <div class="w-250px">状态</div>
          <div class="w-130px">考试类型</div>
          <div class="w-220px">考试时间</div>
          <div class="w-300px">操作</div>
        </div>
        <div>
          <div v-for="(item,index) in listData" class="line">
            <div class="up">
              <div class="w-340px pl-20px text-left">{{item.ykj_ksrwmc}}</div>
              <div class="w-250px">
                <span class="inline-block align-middle">进行中</span>
                <div class="inline-block align-middle ml-10px process-state">
                  <h3 class="state-line">
                    <span style="width: 11%;"></span>
                  </h3>
                </div>
                <span class="ml-10px inline-block align-middle">11%</span>
              </div>
              <div class="w-130px text-left">
                <span v-if="item.ykj_kslx === '1'">周考</span>
                <span v-if="item.ykj_kslx === '2'">月考</span>
                <span v-if="item.ykj_kslx === '3'">作业</span>
                <span v-if="item.ykj_kslx === '4'">测验</span>
                <span v-if="item.ykj_kslx === '5'">期中</span>
                <span v-if="item.ykj_kslx === '6'">期末</span>
                <span v-if="item.ykj_kslx === '7'">联考</span>
              </div>
              <div class="w-220px text-left">{{item.ykj_ksrq}}~{{item.ykj_jsrq}}</div>
              <div class="w-300px">
                <button type="button" class="op-btn">编辑</button>
                <button type="button" class="op-btn ml-10px" @click="linkTo({name:'process-detail-id',params:{id:item.ykj_id}})">详情</button>
                <div class="ml-10px relative op-btn cursor-pointer">
                  <span class="inline-block align-middle leading-28px">更多</span>
                  <div class="more-list">
                    <ul>
                      <li>扫描批阅进度</li>
                      <li>考试分析</li>
                      <li>删除</li>
                    </ul>
                  </div>
                </div>
                <button type="button" class="ml-10px inline-block align-middle arrow-btn" :class="item.showSub?'up':'down'" @click="toggleDown(index)"></button>
              </div>
            </div>
            <div class="down pt-15px pl-35px" v-if="item.showSub">
              <ul class="subject-list">
                <li v-for="items in item.lc">
                  <span class="sub-del cursor-pointer" @click="del_sub(item.ykj_id,items.ykl_id)"></span>
                  <div>
                    <div class="subject-name m-auto">{{JSON.parse(items.ykl_lc).ze_xueke_name}}</div>
                    <div class="mt-5px">
                      <div class="inline-block align-middle process-state">
                        <h3 class="state-line">
                          <span style="width: 11%;"></span>
                        </h3>
                      </div>
                      <span class="ml-10px text-14px inline-block align-middle">11%</span>
                    </div>
                    <div class="mt-5px text-center">
                      <button type="button" class="op-btn">批阅任务</button>
                      <button type="button" class="ml-10px op-btn">查看</button>
                    </div>
                  </div>
                </li>
                <li class="cursor-pointer" @click="addSubject(item,index)">
                  <div class="subject-add-btn"></div>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>
      <div class="mt-20px page-new flex justify-end">
        <el-pagination v-model:current-page="cur_page" v-model:page-size="limit" layout="total,prev, pager, next" :total="total" :background="true" @current-change="handleSelectionChange"></el-pagination>
      </div>
    </div>
    <div v-else class="no-data">
      <div>
        <h3 class="no-data-img"></h3>
        <h4 class="mt-25px text-18px text-hex-0048e5 text-center">暂无数据</h4>
      </div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="增加考试学科"
    width="500px"
    center
    append-to-body
  >
    <div>
      <el-form label-width="120px" size="large">
        <el-form-item label="请选择学科">
          <el-select v-model="add_sub" placeholder="请选择学科">
            <el-option v-for="item in sub_filter_list" :label="item.subject_name" :value="{value:item.subject_id,label:item.subject_name}" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer text-right">
        <el-button @click="dialogVisible = false" size="large">取消</el-button>
        <el-button size="large" color="#003eee" :disabled="add_sub.value === '' || isSubmit" type="primary" @click="addSubmit">
          确定
        </el-button>
      </span>
    </template>

  </el-dialog>
  <commonFooter/>
</template>
<route lang="json">
{
"meta":{
"title":"阅卷流程",
"breadcrumb": true
}
}
</route>
<script setup>
import {project_list,subject,add_subject} from "~/pages/process/api";
import { useRouter } from "vue-router";
import {user} from "~/store";
import request from "@/utils/request";
const router = useRouter();
console.log(router,87)
const linkTo = (obj) => {
  router.push(obj);
};
let exam_time = $ref([])
let exam_type = $ref('')
let keyword = $ref('')
let type_list = [{
  value: '1',
  label: '周考'
}, {
  value: '2',
  label: '月考'
}, {
  value: '3',
  label: '作业'
},{
  value: '4',
  label: '测验'
}, {
  value: '5',
  label: '期中'
}, {
  value: '6',
  label: '期末'
},{
  value: '7',
  label: '联考'
}]
let subject_list = $ref([])
let noData = $ref(null)
let limit = $ref(10)
let total = $ref(0)
let cur_page = $ref(1)
let listData = $ref([])
let dialogVisible = $ref(false)
let sub_filter_list = $ref([])
let allSub = $ref([])
let add_sub = $ref({
  value:'',
  label:''
})
let isSubmit = $ref(false)
let add_ykj_id = $ref('')
function getSubject() {
   let data = {
     for_mistake:'1'
   }
   if(user.user_role_id < 72) {
     data.sm_id = user.sm_info.sm_id
   }
   subject(data).then(res =>{
     if(res.code === '1') {
       allSub = res.data;
     }
   })
}
getSubject();
function getListData() {
  let data = {
    page:cur_page,
    limit:limit,
    keyword:keyword,
    ykj_ksrq:exam_time[0],
    ykj_jsrq:exam_time[1],
    ykj_kslx:exam_type

  };
  project_list(data).then(res=>{
    if(res.code === '1') {
      listData = res.data.page_data;
      for(let i in listData) {
        if(i == 0) {
          listData[i].showSub = true;
        } else {
          listData[i].showSub = false;
        }

      }
      // console.log(listData,87)
      total = Number(res.data.total_rows);
      cur_page = Number(res.data.page_now);
    }
  })
}
getListData();
function filterData() {
  cur_page = 1;
  getListData();
}
const handleSelectionChange = (val) => {
  cur_page = val;
  getListData();
};
const handleDateChange = (val) => {
  if (val) {
    exam_time = [val[0],val[1]];
  } else {
    exam_time = [];
  }
  cur_page = 1;
  getListData();
}
function addSubject(item) {
  let filter_list = item.ykj_kskm.split(',');
  add_ykj_id = item.ykj_id;
  dialogVisible = true;
  add_sub = {
    label:'',
    value:''
  }
  for(let i in allSub) {
    if(allSub[i].grade == item.ykj_ksnj) {
      subject_list = allSub[i].subjects;
      sub_filter_list = subject_list.filter(item=>!filter_list.some(ele=>ele === item.subject_id))
    }
  }
}
function addSubmit() {
   isSubmit = true;
   let data = {
     ykj_id:add_ykj_id,
     ykj_kskm:add_sub.value,
     ykj_kskm_name:add_sub.label
   }
   add_subject(data).then(res =>{
     isSubmit = false;
     if(res.code === '1') {
       ElMessage.success("科目添加成功！");
       dialogVisible = false;
       getListData();
     }
   })
}
function del_sub(ykj_id,ykl_id) {
  ElMessageBox.confirm("确认删除该学科的考试?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {

    request({
      url: "/yzy/ksjh/liankao_del_subject",
      data: {
        ykj_id: ykj_id,
        ykl_id: ykl_id
      },
    }).then((res) => {
      if (res.code === "1") {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getListData();
      }
    });
  })
}
function toggleDown(index) {
  if(listData[index].showSub) {
    listData[index].showSub = false;
  } else {
    listData[index].showSub = true;
  }
}
</script>
<style lang="scss" scoped>
$color: #0048e5;
::v-deep .el-pagination.is-background .btn-next.is-active,
::v-deep .el-pagination.is-background .btn-prev.is-active,
::v-deep .el-pagination.is-background .el-pager li.is-active{
  background-color: $color;
}
.add-btn {
  width: 129px;
  height: 36px;
  background: #ffffff;
  border: 1px solid $color;
  border-radius: 4px;
  font-size: 14px;
  color: $color;
  text-align: center;
}

.del-btn {
  width: 92px;
  height: 36px;
  background: #ff0000;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  &:disabled{
    opacity: .45;
    cursor: default;
  }
}

.process-list-table {
  width: 100%;
  min-height: 600px;

  .head {
    height: 50px;
    display: flex;
    background: $color;
    border-radius: 6px 6px 0 0;
    font-size: 16px;
    line-height: 50px;
    color: #fff;
  }

  .line {
    width: 100%;

    &:nth-child(odd) {
      >.up {
        border-radius: 4px;
        background: rgba(112, 175, 253, 0.1);
      }
    }

    >.up {
      display: flex;
      align-items: center;
      padding: 15px 0;
      font-size: 15px;
      color: #404040;
    }
  }
}

.set-check {
  position: relative;
  z-index: 40;
  width: 20px;
  height: 20px;
  margin: 15px auto 0;

  label {
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 3px;
  }

  input[type=checkbox] {
    width: 20px;
    height: 20px;
    opacity: 0;

    &:checked + label:after {

    }
  }

  &.all {
    label {
      border: 1px solid #fff;
    }

    input[type=checkbox] {
      &:checked + label {
        border-color: #fff;
      }

      &:checked + label:after {
        content: '';
        width: 14px;
        height: 8px;
        position: absolute;
        top: 3px;
        left: 2px;
        border: 2px solid #fff;
        border-top: none;
        border-right: none;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);

      }
    }
  }

  &.single {
    margin: 0 auto;

    label {
      border: 1px solid #aaa;
    }

    input[type=checkbox] {
      &:checked + label {
        border-color: #003eee;
      }

      &:checked + label:after {
        content: '';
        width: 14px;
        height: 8px;
        position: absolute;
        top: 3px;
        left: 2px;
        border: 2px solid #003eee;
        border-top: none;
        border-right: none;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
    }
  }
}

.process-state {
  width: 140px;

  .state-line {
    width: 100%;
    height: 5px;
    background: #e2e2e2;
    border-radius: 3px;

    span {
      display: block;
      height: 5px;
      background: #003eee;
      border-radius: 3px;
    }
  }

  .state-info {
    position: absolute;
    top: 8px;
    left: 0;
    width: 100%;
    font-size: 13px;
    color: #003eee;
    text-align: center;
  }
}

.op-btn {
  display: inline-block;
  vertical-align: middle;
  padding: 0 15px;
  height: 30px;
  background: #fff;
  border: 1px solid #003eee;
  border-radius: 4px;
  font-size: 14px;
  color: #003eee;
  text-align: center;

  &:disabled {
    background: #ccc;
    border-color: #ccc;
    color: #fff;
    cursor: default;
  }

  .more-list {
    display: none;
    position: absolute;
    left: 50%;
    top: 30px;
    margin-left: -50px;
    z-index: 50;
    width: 100px;
    padding-top: 5px;

    ul {
      width: 100%;
      background: #fff;
      box-shadow: 0 0 5px rgba(0, 0, 0, .3);

      li {
        width: 100%;
        height: 30px;
        font-size: 14px;
        color: #003eee;
        text-align: center;
        line-height: 30px;
        cursor: pointer;

        &.disabled {
          background: #fff !important;
          color: #ccc !important;
          cursor: default !important;
          pointer-events: none;
        }

        &:hover {
          background: #F0F7FF;
        }
      }
    }
  }

  &:hover {
    .more-list {
      display: block;
    }
  }
}
.arrow-btn{
  width: 21px;
  height: 13px;
  &.up{
    background: url("/images/arrow-up.png") center no-repeat;
  }
  &.down{
    background: url("/images/arrow-down.png") center no-repeat;
  }
}
.subject-list{
  display: flex;
  flex-wrap: wrap;
  li{
    position: relative;
    width: 205px;
    height: 280px;
    margin: 0 28px 23px 0;
    border: 2px solid $color;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sub-del{
    position: absolute;
    right: 3px;
    top: 3px;
    z-index: 50;
    width: 20px;
    height: 20px;
    background: url("/images/icon-close.png") center no-repeat;
    background-size: 20px 20px;
  }
}
.subject-add-btn{
  width: 57px;
  height: 57px;
  background: url("/images/icon-add.png") center no-repeat;
}
.no-data {
  width: 100%;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;

  .no-data-img {
    width: 233px;
    height: 199px;
    background: url("/images/no-data.png") center no-repeat;
  }
}
.subject-name{
  width: 138px;
  height: 195px;
  background: url("/images/subject-bg.png") center no-repeat;
  background-size: 138px 195px;
  padding: 20px 10px 0 10px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  text-align: center;

}
</style>