2021-7-10 SDU暑期项目实训日志报告06

学习目标：

这篇博客记录我7-08、7-09号两天的学习工作。
工作目标：实现座位图形的可视化展示，力争实现拖拽或单击来编辑座位布局的功能。

---

学习内容：

（一）部分代码展示：

<template> 
 
	<el-form :inline="true" :model="formInline" class="user-search">
		
	<el-form-item label="行数：">
	  <el-input size="small" v-model="formInline.row" 
			placeholder="输入行数"></el-input>
	</el-form-item>  
	<el-form-item label="列数：">
	  <el-input size="small" v-model="formInline.col" 
			placeholder="输入列数"></el-input>
	</el-form-item>  
	<el-form-item>
	  <el-button size="small" type="primary" icon="el-icon-search" @click="createSeat">创建布局</el-button> 
	</el-form-item>
 
    <div>点击控制可用不可用</div>
      <div v-for="(item,index) in list" :key="item"   >
		 <vuedraggable    >
		   <transition-group class="wrapper">
          <div v-for="(item2,index2) in item.split(',') " 
		  :key="item2"  
		  class="item" 
		   @click="setName(index,index2,item2)" >
                        {{item2}}
            </div>
		</transition-group>
		</vuedraggable> 
      </div> 

  
  </el-form>
</template>

<script>
import vuedraggable from 'vuedraggable';
import axios from 'axios';
export default { 
  components: {vuedraggable},
  props: {
  },
  data() {
    return {
	  formInline:{row:'',col:''},
      list: []
    }
  },
  updated() { 
  },
  methods: {
	  createSeat(){
		  var row=this.formInline.row;
		  if(row==''){
			  this.$message({
			    type: 'fail',
			    message: '行数不能为空！'
			  })
			  return;
		  }
		  
		   var col=this.formInline.col;
		   if(col==''){
		   			  this.$message({
		   			    type: 'fail',
		   			    message: '列数不能为空！'
		   			  })
		   			  return;
		   }
		   var mylist=[];
		   var x=1;
		   for(var i=0;i<row;i++){
			   var str="";
			  for(var j=1;j<=col;j++){
				  str+="座位"+x+",";
				  x++;
			  }  
			   mylist.push( str.substring(0,str.length-1));
		   } 
		   this.list=mylist;
		   
		   
	  },setName(index,index2,e){
		  var col=this.formInline.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=='不可用'){
							    seatStr+="座位"+(index2+1+index*col)+",";  
						   }else{
							    seatStr+="不可用,";  
						   }
						  
					  }else{
						 seatStr+=myseat[x]+",";  
					  } 
					
				  }
				  
				  newlist.push( seatStr.substring(0,seatStr.length-1));
			  }else{
				 newlist.push(seat); 
			  } 
		  }
		  this.list=newlist;
	  }
  }
}
</script>
<style scoped>
.wrapper { 
   display: flex;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-align-content: center;
   align-content: flex-start;
}
.item{
  width: 80px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #42b983;
  margin-right: 20px;
  margin-top: 20px;
  color: #ffffff;
}
</style>

（二）成果展示
目前已经实现通过单击将座位变为不可用来编辑座位状态。如图：
创建一个5*6的教室

通过单击将某些座位变为不可用状态

再次单击部分已变为不可用的座位，将其再变为可用。

---

学习过程总结：

需要反复调试，挺麻烦的。在自己编码的时候也意识到了前期学习的基础知识的重要性。

---

学习计划：

下周将进一步完善目前已有的界面，并与后端组进行对接。