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

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

如：创建人列里，输入创建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;
      });
    },