FE-V2-PC/src/views/comprehensive/laboratoryManagement/subject/admissionConfiguration.vue

<!--实验室准入配置-->
<template>
  <div class="admissionConfiguration scrollbar-box">
    <div class="top-title-box">
      <p class="title-p">基本信息</p>
      <p class="right-button reset-button-one" @click="backPage">返回</p>
      <!--<p class="el-icon-close right-icon color_one" @click="backPage"></p>-->
    </div>
    <div class="basics">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="适用实验室:" prop="name" class="form-item">
          <el-input
            style="width:320px;"
            maxlength="30"
            v-model="form.name"
            placeholder=""
            clearable
            size="small"
            disabled
          />
        </el-form-item>
        <el-form-item label="考勤方式"  prop="authType" class="form-item" v-if="form.isSignId">
          <el-select v-model="form.authType" clearable >
            <el-option
              v-for="item in verifyWayList"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考勤密码:" prop="authPwd"   class="form-item" v-if="form.isSignId">
          <el-input
            maxlength="16"
            v-model="form.authPwd"
            placeholder=""
            clearable
            size="small"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="top-title-box">
      <p class="title-p">准入信息配置</p>
    </div>
    <div class="max-for-box">
      <div class="for-box" v-for="(item,index) in listStudent" :key="index" :class="item.checkType?'for-border-two':'for-border-one'" @click="forListClick(item)">
        <div><span>{{item.materialName}}</span><span>{{item.materialDescribe}}</span></div>
        <img class="position-img" v-if="item.checkType" src="@/assets/ZDimages/icon_30.png" alt="">
      </div>
    </div>
    <p class="inquire-button-one button-p" @click="upDataButton">{{newUpDataType?'提交':'修改'}}</p>
  </div>
</template>

<script>
import { listTemplate, subjectmaterial, addlist } from "@/api/laboratory/admissionConfiguration";
import {
  getSignTypeList
} from '@/api/laboratory/subject'
import { infoConfigAdd, infoConfigPut } from '@/api/laboratory/safetyInfo'
export default {
  name: "admissionConfiguration",
  props:{
    subjectData:{},
  },
  data() {
    return {
      //学生模板
      listStudent:[],
      //老师模板
      listTeacher:[],
      newUpDataType:false,
      form:{
        authType:'2',
        authPwd:'',
        isSignId:'',
      },
      verifyWayList:[],

      // 表单校验
      rules: {
        authType: [
          { required: true, message: "请选择考勤方式", trigger: "blur" },
        ],
        authPwd: [
          { required: true, message: "考勤密码最少8位 最多16位，必须同时包含字母和数字", trigger: "blur" },
          { pattern:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/, message: "考勤密码最少8位 最多16位，必须同时包含字母和数字", trigger: "blur" }
        ],
      }
    }
  },
  created() {


  },
  mounted(){
    this.subjectmaterial();
    this.getSignTypeList();
  },
  methods:{
    /** 查询门禁授权类型 */
    getSignTypeList(){
      getSignTypeList().then(response => {
        if(response.code==200){
          this.verifyWayList=response.rows
        }
      });
    },
    //获取当前实验室准入配置
    subjectId(){
      let self = this;
      listTemplate({subjectId:this.subjectData.id}).then( response => {
        for(let i=0;i<response.data.listStudent.length;i++){
          for(let o=0;o<self.listStudent.length;o++){
            if(response.data.listStudent[i].id == self.listStudent[o].id){
              self.listStudent[o].checkType = true;
            }
          }
        }
        for(let i=0;i<response.data.listTeacher.length;i++){
          for(let o=0;o<self.listTeacher.length;o++){
            if(response.data.listTeacher[i].id == self.listTeacher[o].id){
              self.listTeacher[o].checkType = true;
            }
          }
        }
        if(!response.data.listStudent[0] && !response.data.listTeacher[0]){
          this.newUpDataType = true;
        }else{
          this.newUpDataType = false;
        }
        this.form.name=this.subjectData.name
      });
    },
    //提交接口
    upDataButton(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          let self = this;
          let num = 0;
          let newData = {
            labSubjectList:[],
            studentList:[],
            teacherList:[],
          };
          newData.labSubjectList.push({id:this.subjectData.id});
          newData.authType=this.form.authType
          newData.authPwd=this.form.authPwd
          for(let i=0;i<self.listStudent.length;i++){
            if(self.listStudent[i].checkType){
              let obj = {
                materialId:self.listStudent[i].id,
                materialType:self.listStudent[i].materialSuit
              };
              newData.studentList.push(obj);
              num++
            }
          }
          for(let i=0;i<self.listTeacher.length;i++){
            if(self.listTeacher[i].checkType){
              let obj = {
                materialId:self.listTeacher[i].id,
                materialType:self.listTeacher[i].materialSuit
              };
              newData.teacherList.push(obj);
              num++
            }
          }
          if(num == 0){
            this.msgError("请选择准入条件");
            return
          }
          addlist(newData).then( response => {
            this.msgSuccess(this.newUpDataType?"提交成功":"修改成功");
            this.$parent.clickPage(1);
          });
        }
      });



    },
    //点击事件
    forListClick(item){
      item.checkType = !item.checkType;
    },
    //获取准入模板
    subjectmaterial(){
      this.loading = true;
      subjectmaterial({subjectId:this.subjectData.id}).then( response => {
        for(let i=0;i<response.data.listStudent.length;i++){
          response.data.listStudent[i].checkType = false;
        }
        for(let i=0;i<response.data.listTeacher.length;i++){
          response.data.listTeacher[i].checkType = false;
        }
        this.$set(this,'listStudent',response.data.listStudent);
        this.$set(this,'listTeacher',response.data.listTeacher);
        this.$set(this.form,'isSignId',response.data.cardInfo.id);
        this.form.authType=response.data.cardInfo.authType+'';
        this.form.authPwd=response.data.cardInfo.authPwd;
        this.subjectId();
      });
    },
    //返回按钮
    backPage(){
      this.$parent.clickPage(1);
    },
  }
}
</script>

<style lang="scss" scoped>
.admissionConfiguration{
  flex:1;
  overflow-y: scroll;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius:10px!important;
  margin:5px 20px 20px 10px!important;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1) !important;
  .form-item{
    display: inline-block;
    margin-top: 40px;
  }
  .basics{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .tip{
      width: 14px;
      height: 14px;
      margin-left: 14px;
    }
  }
  .top-title-box{
    display: flex;
    border-bottom:1px solid #E0E0E0;
    margin:0 20px;
    p{
      margin:20px 0;
      line-height: 40px;
    }
    .title-p{
      font-size:18px;
      flex:1;
      color:#0045AF;
    }
    .right-icon{
      width:40px;
      text-align: center;
    }
    .right-icon:hover{
      cursor: pointer;
      background: rgba(0,0,0,0.1);
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
    }
  }
  .name-box{
    margin:32px 0 0 35px;
    font-size:16px;
    p{
      margin:0;
    }
  }

  .max-for-box{
    .for-box{
      display: inline-block;
      width:400px;
      height:60px;
      margin:32px 0 0 40px;
      cursor: pointer;
      border-radius:10px;
      overflow: hidden;
      position: relative;
      div{
        display: flex;
        line-height:60px;
        span:nth-child(1){
          margin:0 18px 0 18px;
          font-size:16px;
          color:#333;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        span:nth-child(2){
          font-size:14px;
          color:#999999;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
      }
      .position-img{
        position: absolute;
        right:0;
        bottom:0;
      }
    }
    .for-border-one{
      border:1px solid #E0E0E0;
    }
    .for-border-two{
      border:1px solid #349cfb;
    }
  }
  .button-p{
    width:80px;
    margin:40px auto;
  }
}
</style>