|
|
@@ -0,0 +1,244 @@
|
|
|
+<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 { studentBatchSelect, studentUpdateCardNum } from "@/api/system/user_student";
|
|
|
+ export default {
|
|
|
+ name: 'bindingCardPage',
|
|
|
+ props:{
|
|
|
+ ids:{},
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ watchList:[],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.studentBatchSelect();
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ //批量获取老师数据
|
|
|
+ studentBatchSelect(){
|
|
|
+ studentBatchSelect(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);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ studentUpdateCardNum(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;
|
|
|
+ if (self.watchList[i].cardNum){
|
|
|
+ self.watchList[i].cardNum = self.watchList[i].cardNum.replace(/^\s*|\s*$/g,"");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ 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.watchList[i].cardNum && self.watchList[o].cardNum){
|
|
|
+ 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>
|
dedsudiyu