Vue+element远程搜索+前后台代码实现(写法一)

效果展示

 技术介绍

SpringBoot    Vue+element

直接上代码

前台代码展示

          <el-form-item>
          合同号 :
          <el-select v-model="f_contract_bill_no" filterable placeholder="请选择" clearable style="width: 150px">
            <el-option
              v-for="item in fScaleNumberList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
             </el-option>
            </el-select>
            <el-checkbox v-model="checkedFmaterialName"></el-checkbox>
          </el-form-item>

前台代码获取数据写入（fScaleNumberList）中

    // 获取合同号信息
    SampleNameList () {
      // 获取列表后清空配批数据
      // this.allocationed = false
      // this.dataListLoading = true
      // 通过接口获取到需要展示的数据
      this.$http({
        url: this.$http.adornUrl('/truckscalemeasurement/getContractBillNoList/list'),
        method: 'get',
        params: this.$http.adornParams({
          'limit': '1000'
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          // 查询到数据，循环便利获取数据单挑
          // console.log('data:' + JSON.stringify(data))
          // console.log('datalength:' + data.data.list.length)
          for (let i = 0; i < data.data.list.length; i++) {
            // 获取每条对应的合同信息
            // console.log('data:' + data.data.list[i].fContractBillNo)
            if (data.data.list[i].fContractBillNo!== null && data.data.list[i].fContractBillNo!== '' && data.data.list[i].fContractBillNo!== undefined) {
              // 判断fScaleNumberList数组中是否存在，不存在添加到fScaleNumberList
              if (JSON.stringify(this.fScaleNumberList).indexOf(data.data.list[i].fContractBillNo) === -1) {
                // 存储方式
                this.fScaleNumberList.push({
                  'value': data.data.list[i].fContractBillNo,
                  'label': data.data.list[i].fContractBillNo
                })
              }
            } else {
              console.log('未找到物料名称！！！')
           
            }
            // }
            // this.fScaleNumberList = [...new Set(this.fScaleNumberList.map(item => JSON.stringify(item)))]
            // this.fScaleNumberList = this.fScaleNumberList.map(item => JSON.parse(item))
            // if (this.fScaleNumberList.length >= 6) {
            //   this.scrollShow = true
          }
          // console.log('this.fScaleNumberList物料名称:' + JSON.stringify(this.fScaleNumberList))
        } else {
          this.$message.error(data.msg)
        }

      })
    }

后台代码实现代码

TruckScaleMeasurementDao

@Mapper
public interface TruckScaleMeasurementDao extends BaseMapper<TruckScaleMeasurementEntity> {

    //查询条件展示（合同号）
    @Select("SELECT f_contract_bill_no FROM truck_scale_measurement ${ew.customSqlSegment} GROUP BY f_contract_bill_no ")
    List<TruckScaleMeasurementEntity> getContractBillNoList(@Param(Constants.WRAPPER) QueryWrapper<TruckScaleMeasurementEntity> query);

}

TruckScaleMeasurementService

public interface TruckScaleMeasurementService extends IService<TruckScaleMeasurementEntity> {

    //合同号称列表
    List<TruckScaleMeasurementEntity> getContractBillNoList(Map<String, Object> params);

}

TruckScaleMeasurementApi

@Slf4j
@RestController
public class TruckScaleMeasurementApi extends AbstractController {

    @Autowired
    private TruckScaleMeasurementService truckScaleMeasurementService;

    private final SimpleDateFormat simpleDateFormat=new SimpleDateFormat("yyyyMMdd_HHmmss");



    /**
     * 物料名称列表
     */
    @GetMapping(value = "/truckscalemeasurement/getContractBillNoList/list")
    @PreAuthorize("hasAuthority('limsweighing:truckscalemeasurement:list')")
    public Result<?> getContractBillNoList(@RequestParam Map<String, Object> params){
        List<TruckScaleMeasurementEntity> truckScaleMeasurementEntities = truckScaleMeasurementService.getContractBillNoList(params);
        Map map=new HashMap();
        map.put("list",truckScaleMeasurementEntities);
        return Result.succeed("succeed", map);
    }





}

TruckScaleMeasurementServiceImpl

@Service("truckScaleMeasurementService")
public class TruckScaleMeasurementServiceImpl extends ServiceImpl<TruckScaleMeasurementDao, TruckScaleMeasurementEntity> implements TruckScaleMeasurementService {

    @Autowired
    private TruckScaleMeasurementService truckScaleMeasurementService;

    //获取合同号名称列表
    @Override
    public List<TruckScaleMeasurementEntity> getContractBillNoList(Map<String, Object> params) {
        QueryWrapper<TruckScaleMeasurementEntity> query=new QueryWrapper<>();

           //设置展示条件
//        query=query.ge("f_workflow_step","100000010000");
//        f_contract_bill_no
        String fbillno = (String) params.get("fBillNo");
        if (fbillno != null&&fbillno.length()>0) {
            query.in("f_bill_no", fbillno.split(","));
        }else {
            //流程步骤  f_workflow_step__ge
            String f_workflow_step__ge= (String) params.get("f_workflow_step__ge");
            if (f_workflow_step__ge != null && f_workflow_step__ge.length()>0) {
                query=query.ge("f_workflow_step",f_workflow_step__ge);
            }
             //合同号  f_contract_bill_no
            String f_contract_bill_no= (String) params.get("f_contract_bill_no");
            if (f_contract_bill_no != null && f_contract_bill_no.length()>0) {
                query=query.like("f_contract_bill_no",f_contract_bill_no);
            }

        }

        List<TruckScaleMeasurementEntity> list=this.getBaseMapper().getContractBillNoList(query);
        return list;
    }


}