0
点赞
收藏
分享

微信扫一扫

前后端接口对接--根据关键字查询搜索

minute_5 2022-01-27 阅读 88

要实现的内容:在右上角选择列名后,查询对应列名后的数据,点击查询图标,即可查询到相关信息。

如:创建人列里,输入创建2字,即可显示与创建相关内容

 

实现方法:

1.后端swagger中:

 

2.public-src-api下的相关js文件中:

// 表单数据根据关键字查询-分页
export function queryByKeyWord(param) {
    return request({
        url: "/smartcity-datamanagement/cimFormData/queryByKeyWord",
        method: "get",
        params: {
            keyWordName: param.keyWordName,
            keyWordValue: param.keyWordValue,
            page: param.page,
            size: param.size,
            tableName: param.tableName
        }
    });
}

 3.相对应的vue 文件中:

在点击右上角的查询按钮处为调用接口的入口:

<el-button
                class="search-btn"
                icon="el-icon-search"
                type="primary"
                size="mini"
                v-on:click="searchFile"
              >
</el-button>

引入对应js文件中的方法:

import {
  queryByKeyWord
} from "@/api/cimApi/formApi";

在对应方法中methods中调用接口:

// 搜索
    searchFile() {
      //判断输入内容是否为空,为空则不执行
      if (this.searchText == "" && this.columnSelect == "") {
        return;
      }
      // 重置为第一页
      this.currentPage = 1; 
      //将接口中需要的内容写入
      let param = {
        keyWordName: this.columnSelect,
        keyWordValue: this.searchText,
        page: this.currentPage,
        size: this.pageSize,
        tableName: this.$route.query.md5num
      };
      //调用接口
      queryByKeyWord(param).then(res => {
        //返回查询到的总条数和更新含有查询内容的表单
        this.total = res.data.data.total;
        this.formData = res.data.data.rows;
      });
    },
举报

相关推荐

0 条评论