前端代码
<el-autocomplete
  v-model="accountSearch"
  :fetch-suggestions="accounQuerySearchAsync"
  @select="accountHandleSelect"
  :debounce=10
  placeholder="请输入银行名称"
>
</el-autocomplete>
data: () => {
return {
  getBankCodeFun:getBankCode,
  accountSearch: '',
    }
}


methods: {
accounQuerySearchAsync(queryString, callback) {
  var list = [{}];
  let bankCode ;
//如果传输入框是空值,给后台传"all",表示查询全部
  if (queryString===""){
    bankCode = "all"
  }else {
    bankCode = queryString;
  }
//调用后台接口拿数据
  this.getBankCodeFun(bankCode,(res,err)=>{
    for(let i of res.content){
      i.value = i.bankName;  //将想要展示的数据作为value
    }
    list = res.content;
    callback(list);
  });
},
// 模糊查询下拉框 鼠标键盘选中点击触发
accountHandleSelect(item) {
  this.accountSearch = item.value;
  this.accountSearchCode = item.bankCode;
}
}

//调用后台
function getBankCode(paramObj,cb) {
  const apiUrl =`${apiWayBillDomain}/waybill/broker_report_capital_flow/getBankCode/${paramObj}`;
  HTTP.get(apiUrl, {}, (res, err) => {
    cb(res, err);
  });
}
 

后端代码(我的是根据银行名称模糊查询银行名称与英文缩写,选中银行,获取银行名称缩写进行下一步业务),根据自己业务修改请求参数,写自己业务实现类。

@GetMapping(value = "/waybill/broker_report_capital_flow/getBankCode/{bankName}")
public List<BankCode> getBankCode(@PathVariable("bankName") String bankName){

    return waybillBrokerReportCapitalFlowService.selectBankCode(bankName);
}
Logo

前往低代码交流专区

更多推荐