FE-V2-PC/src/views/comprehensive/personnel/teacher/bindingCardPage.vue

<template>
    <div class="bindingCardPage">
      <div class="title-box">
        <p>绑定校园卡</p>
      </div>
      <div class="watch-head-box">
        <p>姓名</p>
        <p>工号</p>
        <p>部门</p>
        <p>手机号码</p>
        <p>校园卡号</p>
      </div>
      <div class="center-max-big-box scrollbar-box">
        <div class="watch-data-list" v-for="(item,index) in watchList" :key="index">
          <p>{{item.nickName}}</p>
          <p>{{item.userName}}</p>
          <p>{{item.deptName}}</p>
          <p>{{item.phonenumber}}</p>
          <div class="input-big-box">
            <el-input class="input-box" type="text"
                      maxLength="30"
                      v-model="item.cardNum"
                      clearable
                      placeholder="请输入或读取校园卡号"
            />
            <p class="input-msg-p">{{item.cardType==1?'卡号已存在':(item.cardType==2?'卡号重复':'')}}</p>
          </div>
        </div>
      </div>
      <div class="button-box">
        <p></p>
        <p class="reset-button-one" @click="outPageButton">返回</p>
        <p class="add-button-one-90" @click="setButton">保存</p>
      </div>
    </div>
</template>

<script>
  import { teacherBatchSelect, teacherUpdateCardNum } from "@/api/system/user_teacher";
  export default {
    name: 'bindingCardPage',
    props:{
      ids:{},
    },
    data(){
      return{
        watchList:[],
      }
    },
    created(){

    },
    mounted(){
      this.teacherBatchSelect();
    },
    methods:{
      //批量获取老师数据
      teacherBatchSelect(){
        teacherBatchSelect(this.ids).then(response => {
          this.watchList = response.data;
          this.getInitialization();
        })
      },
      //返回
      outPageButton(){
        this.$parent.outPage(1);
      },
      //提交
      setButton(){
        let self = this
        if(this.setVerification()){
          let list = [];
          for(let i=0;i<self.watchList.length;i++){
            if(self.watchList[i].cardNum){
              let obj = {
                userId:self.watchList[i].userId,
                cardNum:self.watchList[i].cardNum,
              }
              list.push(obj);
            }
          }
          teacherUpdateCardNum(list).then(response => {
            if(response.data.repeatCard == 0){
              this.msgSuccess(response.msg);
              this.$parent.handleQuery();
            }else{
              this.repeatMark(response.data.repeatList);
            }
          })
        }
      },
      //提交验证
      setVerification(){
        let self = this;
        for(let i=0;i<self.watchList.length;i++){
          self.watchList[i].cardType = 0;
        }
        let num = 0;
        for(let i=0;i<self.watchList.length;i++){
          for(let o=0;o<self.watchList.length;o++){
            if(self.watchList[i].cardNum == self.watchList[o].cardNum &&
               self.watchList[i].userId != self.watchList[o].userId ){
              self.$set(self.watchList[i],'cardType',2);
              self.$set(self.watchList[o],'cardType',2);
              num++
            }
          }
        }
        this.$forceUpdate();
        return num == 0;
      },
      //数据初始化
      getInitialization(){
        let self = this;
        for(let i=0;i<self.watchList.length;i++){
          self.watchList[i].cardType = 0;
        }
        this.$forceUpdate();
      },
      //重复标记
      repeatMark(list){
        let self = this;
        for(let i=0;i<list.length;i++){
          for(let o=0;o<self.watchList.length;o++){
            if(list[i] == self.watchList[o].cardNum){
              self.watchList[o].cardType = 1;
            }
          }
        }
        this.$forceUpdate();
      },
    }
  }
</script>

<style scoped lang="scss">
  *{
    margin:0;
    padding:0;
    font-weight:500;
    color:#333;
  }
  .bindingCardPage{
    display: flex;
    flex-direction: column;
    flex:1;
    overflow: hidden;
    .title-box{
      border-bottom:1px solid #E0E0E0;
      p{
        color:#0045AF;
        line-height:60px;
        margin-left:24px;
        font-size:18px;
      }
    }
    .watch-head-box{
      padding:10px 40px 10px;
      display: flex;
      p{
        line-height:40px;
        font-size:16px;
        font-weight: 600;
      }
      p:nth-child(1){
        width:200px;
      }
      p:nth-child(2){
        width:200px;
      }
      p:nth-child(3){
        width:200px;
      }
      p:nth-child(4){
        width:300px;
      }
      input{
        width:300px;
      }
    }
    .center-max-big-box{
      flex:1;
      padding:0 40px;
      .watch-data-list{
        display: flex;
        margin-bottom:10px;
        p{
          line-height:40px;
          font-size:16px;
        }
        p:nth-child(1){
          width:200px;
        }
        p:nth-child(2){
          width:200px;
        }
        p:nth-child(3){
          width:200px;
        }
        p:nth-child(4){
          width:300px;
        }
        .input-big-box{
          display: flex;
          flex:1;
          .input-box{
            width:300px;
          }
          .input-msg-p{
            margin-left:20px;
            width:100px;
            color:#FF6666;
            font-size:14px;
          }
        }
      }
    }
    .button-box{
      height:80px;
      display: flex;
      border-top:1px solid #E0E0E0;
      p{
        margin-top:20px;
      }
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        width:80px;
        margin-right:20px;
        font-size:16px;
      }
      p:nth-child(3){
        width:80px;
        margin-right:20px;
        font-size:16px;
      }
    }
  }
</style>