2021-7-18 SDU暑期项目实训日志报告09

学习目标：

本博客用于记录7-17及7-18两天的学习工作。
目标：学习与后端接口进行联调的方法，与后端进行功能对接。
实现了教室模板创建、模板删除、教室创建、教室修改功能与后端的对接。

---

学习内容：

（一）教室模板相关
部分代码：

methods: {
	  getInfo(){
		  if(this.model_name!=null){//修改时候 加载信息
               
               getmodelbyname(this.model_name)
                .then(res => {
               			   this.info=res;
                       var row=res.model_row;
                       var col=res.model_col;
                       var model_seats=res.model_seats;
                       var mylist=[];
                       for(var i=0;i<row;i++){
                         var str="";
                       var mystr =model_seats.substring(i*col,col*(i+1));
                        for(var j=0;j<mystr.length;j++){
                          str+=mystr.substring(j,j+1)+",";
                        }
                         mylist.push( str.substring(0,str.length-1));
                       }
                        this.list=mylist;
                 })
               .catch(err => {
                 console.log(err)
                  this.$message({
                    type: 'error',
                    message: '加载失败!'
                  })
                 })
		  }
	  },
	  createSeat(){
		  var row=this.info.model_row;
		  if(row==''){
			  this.$message({
			    type: 'fail',
			    message: '行数不能为空！'
			  })
			  return;
		  }

		   var col=this.info.model_col;
		   if(col==''){
		   			  this.$message({
		   			    type: 'fail',
		   			    message: '列数不能为空！'
		   			  })
		   			  return;
		   }
		   var mylist=[];
		   for(var i=0;i<row;i++){
			   var str="";
			  for(var j=1;j<=col;j++){
				  str+="1"+",";
			  }
			   mylist.push( str.substring(0,str.length-1));
		   }
		   this.list=mylist;


	  },setName(index,index2,e){//点击时候进行切换座位可用不可用 0表示不可用 1表示可用
		  var col=this.info.col;
		  var mylist=this.list;
		   var newlist=[];
		  for(var i=0;i<mylist.length;i++){
			  var seat=mylist[i];
			  if(i==index){
				  var myseat=seat.split(",");
				  var seatStr="";
				  for(var x=0;x<myseat.length;x++){
					  if(x==index2){
						   if(e=='0'){
							    seatStr+="1"+",";
						   }else{
							    seatStr+="0,";
						   }

					  }else{
						 seatStr+=myseat[x]+",";
					  }

				  }

				  newlist.push( seatStr.substring(0,seatStr.length-1));
			  }else{
				 newlist.push(seat);
			  }
		  }
		  this.list=newlist;
	  },saveInfo(){
      var name=this.info.model_name;
      if(name==''){
      			  this.$message({
      			    type: 'fail',
      			    message: '名称不能为空！'
      			  })
      			  return;
      }

		  var row=this.info.model_row;
		  if(row==''){
		  			  this.$message({
		  			    type: 'fail',
		  			    message: '行数不能为空！'
		  			  })
		  			  return;
		  }

		   var col=this.info.model_col;
		   if(col==''){
		   			  this.$message({
		   			    type: 'fail',
		   			    message: '列数不能为空！'
		   			  })
		   			  return;
		   }
       var list=this.list;
       if(list.length==0){
       			  this.$message({
       			    type: 'fail',
       			    message: '请先创建布局不能为空！'
       			  })
       			  return;
       }

        this.info.model_seats=list.toString().replace(/,/g,'');//赋值座位列表，变成01111101格式


 

		this.$axios.post ('http://grandland.gl-data.com:14332/manage/roommanage/createmodel',
		this.info
		)
		.then(res=>{ 
			 if(res.data=='操作成功'){
				 this.$message({
				   type: 'success',
				   message: '操作成功!'
				 })
				  this.$router.push("/room/modelList");
			 }else{
				 this.$message({
				   type: 'error',
				   message: '操作失败!-'+res.data
				 })
			 }     
		})
 

  



	  }
  }

界面展示：

单击查看机房教室

（二）教室相关
部分代码：

methods: {
    // 获取列表
    getdata(pageparm) {
      this.loading = true
        var param="currentPagee="+pageparm.currentPage+"&pageSize="+pageparm.pageSize;
      getallroom(param)
        .then(res => {
          this.loading = false
           this.listData = res;
         })
       .catch(err => {
          this.loading = false
          this.$message.error('数据加载失败，请稍后再试！')
         })
    }  ,
    //编辑界面
    handleEdit: function(index, row) {
      if (row != undefined && row != 'undefined') {//添加
		  this.$router.push("/room/room?room_name="+row.room_name);
      } else {
        this.$router.push("/room/room");
      }
    },deleteInfo(index, row){
		   this.$confirm('确定要删除吗?', '信息', {
		        confirmButtonText: '确定',
		        cancelButtonText: '取消',
		        type: 'warning'
		      })
		        .then(() => {
							
							
							this.$axios.post
							('http://grandland.gl-data.com:14332/manage/roommanage/deleteroom',
							{'room_name':row.room_name}
							)
							.then(res=>{ 
								 if(res.data=='操作成功'){
									this.$message({
									  type: 'success',
									  message: '数据已删除!'
									})
									    that.getdata(this.pageparm);
								 }else{
									 this.$message({
									   type: 'error',
									   message: '操作失败!-'+res.data
									 })
								 }     
							})
				 



					})
					.catch(() => {
					  this.$message({
						type: 'info',
						message: '已取消删除！'
					  })
					})
	},updateStatus(index, row){
		var that=this;
		var params={};
		params.room_name=row.room_name;
		params.room_status=row.room_status==1?0:1;
			this.$axios.post
			('http://grandland.gl-data.com:14332/manage/roommanage/updateroomstatus',
			params
			)
			.then(res=>{ 
				 if(res.data=='success'){
					this.$message({
					  type: 'success',
					  message: '操作成功!'
					})
						that.getdata(this.pageparm);
				 }else{
					 this.$message({
					   type: 'error',
					   message: '操作失败!-'+res.data
					 })
				 }     
			})

	},
    // 分页插件事件
    callFather(parm) {
      this.info.currentPage = parm.currentPage
      this.info.pageSize = parm.pageSize
      this.getdata(this.info)
    }
  }

界面展示：

单击机房教室进行编辑

---

学习过程：

反复调试，很是辛苦。

---

学习计划：

预计下一阶段进行模板查询、教室删除、教室查询接口的联调。