基于Java的CAP开发学习记录-使用SAP HANA Database

uniapp实现页面滑动

  返回  

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

2021/7/20 16:02:55 浏览:

学习目标:

本博客记录我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、创建教室的时候是否可用选项,“空闲中”为“是”,“使用中”为“否”。

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号