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

学习目标：

本博客记录我7-19与7-20两天的学习工作。
工作目标：完成查询功能的对接。

---

学习内容：

（一）教室模板查询功能
前端代码：

<el-form :inline="true" :model="info"  class="user-search">
           <el-form-item label="搜索：">
              <el-input size="small" v-model="info.keyword" placeholder="输入关键字"></el-input>
            </el-form-item>
           
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
										
			  <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>
    </el-form>

响应方法代码：

// 搜索事件
    search() {
      this.getdata(this.info)
    } ,

getdata(pageparm) {
      this.loading = true
	  var keyword=pageparm.keyword;
	  if(keyword==''){
		  keyword='all';
	  }
      var param="currentPagee="+pageparm.currentPage+"&pageSize="+pageparm.pageSize+"&keyword="+keyword;
	  getmodellist(param)
        .then(res => {
          this.loading = false
           this.listData = res;
         })
       .catch(err => {
          this.loading = false
          this.$message.error('菜单加载失败，请稍后再试！')
         })


    },

这里有个思考，因为查询结果要分页展示，因此分页接口设计成两个参数，一个是查询关键字，另一个是指定页数。在默认初始列表时，查询关键字keyword设为"all"，具体查询时再赋具体值。
界面效果展示如下：

（二）教室查询功能
与教室模板的查询功能类似。
界面代码：

<el-form :inline="true"  :model="info"  class="user-search">
    <el-form-item label="搜索：">
              <el-input size="small" v-model="info.keyword" placeholder="输入关键字"></el-input>
    </el-form-item>
           
    <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
		 

              <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
    </el-form-item>
</el-form>

响应方法代码：

// 获取列表
    getdata(pageparm) {
      this.loading = true
        var param="currentPagee="+pageparm.currentPage+"&pageSize="+pageparm.pageSize+"&keyword="+this.info.keyword;
      getroomlist(param)
        .then(res => {
          this.loading = false
           this.listData = res;
         })
       .catch(err => {
          this.loading = false
          this.$message.error('数据加载失败，请稍后再试！')
         })
    }, 
	 // 搜索事件
	 search() {
	   this.getdata(this.info)
	 } 

界面展示：

---

学习总结：

接口的对接联调比较辛苦，需要多次沟通磨合。

---

下一阶段工作计划：

美化界面。
1、区分走廊与不可用。
2、查看模板界面提示不可编辑。
3、修改教室界面提示哪些不可修改。
4、教室列表界面状态为“使用中”的不允许有“修改”按钮。
5、创建教室的时候是否可用选项，“空闲中”为“是”，“使用中”为“否”。