2021-7-13 SDU暑期项目实训日志报告07

学习目标：

这篇博客记录我7-12及7-13两天的学习工作。
目标：完成教室管理大部分功能点的界面展示。

---

学习内容：

（一）教室模板及教室的可视化操作
使用vue.draggable实现可视化创建及修改教室模板，包括单击或拖拽。后面教室的可视化创建也是用的这个组件。
相关代码如下：

//教室模板座位布局展示
<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"  
		   @click="setName(index,index2,item2)" >
                      <div  class="item2"     v-if="item2=='不可用'">{{item2}}</div>
                      <div  class="item"   v-else >{{item2}}</div>
            </div>
		</transition-group>
		</vuedraggable> 
      </div> 

//教室座位布局展示
<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"

		   @click="setName(index,index2,item2)" >
                        <div  class="item2"     v-if="item2=='不可用'">{{item2}}</div>
						<div  class="item"   v-else >{{item2}}</div>
            </div>
		</transition-group>
		</vuedraggable>
      </div>

具体界面的操作截图：
单击“添加”按钮或对某个已有模板单击“编辑”按钮，可以进入可视化操作界面。
创建好模板初始属性后生成初始布局，再将想要换位置的座位拖拽到目标位置。比如这里将座位2拖拽到座位3的位置。
拖拽完成。

下面是经过一番拖拽与单击操作之后的模板座位布局。

目前这个功能的实现存在的问题是：
1、只能实现横向拖拽，纵向拖拽有点问题。
2、将已经变为不可用的座位和正常可用座位进行拖拽互换可能也会出一点问题。
有待改进。
（二）已经实现的部分界面
1、创建及编辑模板


2、教室的编辑及删除

此时教室状态是使用中，因此没有设置“删除”按钮，单击“修改状态”将教室状态变为空闲中，就会有“删除”按钮出现。

（三）目前没有实现的功能点
教室模板的删除、教室的查询以及创建教室时输入经纬度（地址）。

---

学习过程：

先搜集学习了很多vue开发的教程和技巧，开发过程需要反复调试。

---

学习计划：

接下来就要与后端进行对接，并进一步完成剩余功能点。