Vue+element远程搜索+前后台代码实现(写法二，运用插件)

效果图

 

插件

项目中存放的位置：src\components\remoteSelect\remoteSelect.vue

代码

<template>

    <el-select
      filterable
      remote
      v-model="ivalue"
      clearable
      :multiple="multiple"
      reserve-keyword
      :placeholder="placeholder"
      :remote-method="remoteMethod"
      :loading="loading"
      style="width:100%"
      @change="ichange"
      @focus="focusMethod()"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label?item.label.replace(/<[^>]+>/g,''):''"
        :value="item.value"
      >
        <span >{{item.label}}</span>
      </el-option>
    </el-select>
</template>

<!--
文件上传 支持多个文件上传
uploadAttrs el-upload属性
tooltip 上传文件的提示
bottonText 上传的按钮提示
-->
<script>
import Vue from 'vue'

export default {
  name: 'SelectDialog',
  props: {
    title: {
      type: String,
      default: '请选择'
    },
    placeholder: {
      type: String,
      default: '请输入关键词'
    },
    searchKey: {
      type: String,
      default: 'f_name'
    },
    idKey: {
      type: String,
      default: 'fId'
    },
    labelKey: {
      type: String,
      default: 'fName'
    },
    labelFormatter: {
      type: Function,
      default: (source, label, value) => {
        // console.log('labelFormatterrrr2', source)
        return label
      }
    },
    valueItem: {
      type: Object
    },
    requestUrl: {
      type: String,
      default: '/tdlimsitem'
    },
    change: {
      type: Function,
      default: () => {}
    },
    clear: {
      type: Function,
      default: () => {}
    },
    sure: {
      type: Function,
      default: () => {}
    },
//筛选条件
    extparam: {
      type: Object,
      default: () => {
        return {}
      }
    },
    sortType: {
      type: String,
      default: null
    },
    sortBy: {
      type: String,
      default: null
    },
    value: {
      // type: Object,
      default: () => {
        if (this.multiple) {
          return []
        }
        return ''
      }
    },
    multiple: {
      type: Boolean,
      default: false
    }

  },
  async mounted () {
    // console.log('mounted',this.value);
    // let value =this.value;
    // if(value&&value.length>0){
    //     this.fileList=JSON.parse(value);
    // }
    // console.log('this.valueItem', this.valueItem, 'this.value', this.value)
    await this.initValue()
  },
  watch: {
    valueItem: {
      handler: function (valueItem) {
        console.log('watch', valueItem)
        let item = this.valueItem
        let option = {}
        option.value = item[this.idKey]
        option.label = this.labelFormatter(item, item[this.labelKey], option.value)
        option.source = item
        this.ivalue = option.label
        this.options = [option]
        this.remoteMap[option.value] = item
      },
      deep: true
    },
    value: {
      handler: async function (value) {
        if (!value) {
          return
        }
        await this.initValue()
        this.ivalue = this.value
        // console.log('this.valueItem5', value)
      },
      deep: true
    }
  },

  data () {
    return {
      options: [],
      ivalue: null,
      loading: false,
      downloading: false,
      remoteMap: {},
      query: '',
      tempSearchKey: ''
    }
  },
  methods: {
    async initValue () {
      if (this.valueItem) {
        console.log('this.valueItem1', this.valueItem)
        let item = this.valueItem
        let option = {}
        option.value = item[this.idKey]
        option.label = this.labelFormatter(item, item[this.labelKey], option.value)
        option.source = item
        this.options = [option]
        this.remoteMap[option.value] = item
      } else if (this.multiple && this.value) {
        console.log('this.valueItem2', this.valueItem)
      // 初始化多选内容
        let values = this.value
        if (!(values instanceof Array)) {
          values = this.value.split(',')
        }
        let tempOptions = []
        let workOptions = this.options
        for (let i = 0; i < values.length; i++) {
          const value = values[i]
          await this.$http({
            url: this.$http.adornUrl(`${this.requestUrl}/info/${value}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              let item = data.data
              let result = {}
              let iid = item[this.idKey]
              let ilabel = item[this.labelKey]

              this.remoteMap[iid] = item

              result.value = iid
              result.label = this.labelFormatter(item, ilabel, iid)
              result.source = item
            // 如果当前列表中存在则不添加
              let existOption = false
              for (let s = 0; s < workOptions.length; s++) {
                const workOption = workOptions[s]
                if (workOption.value == iid) {
                  existOption = true
                  break
                }
              }
              if (existOption) {
                return
              }
              tempOptions.push(result)
              this.remoteMap[data.data[this.idKey]] = data.data
            } else {

            }
          })
        }
        console.log('this.options', JSON.stringify(this.value), JSON.stringify(this.options))
        if (tempOptions.length > 0) {
          this.options.concat(tempOptions)
        }
        if (this.ivalue != values) {
          // console.log('ivalue2', this.ivalue, values)
          this.ivalue = values
        }
      } else if (this.value) {
        // console.log('this.valueItem3', this.valueItem)

        // console.log('this.value', this.value)
        const value = this.value
        await this.$http({
          url: this.$http.adornUrl(`${this.requestUrl}/info/${value}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            let item = data.data
            let result = {}
            let iid = item[this.idKey]
            let ilabel = item[this.labelKey]

            this.remoteMap[iid] = item

            result.value = iid
            result.label = this.labelFormatter(item, ilabel, iid)
            let exist = false
            for (let i = 0; i < this.options.length; i++) {
              const element = this.options[i]
              if (element.value == result.value) {
                exist = true
                break
              }
            }
            if (!exist) {
              this.options = [result]
              this.remoteMap[data.data[this.idKey]] = data.data
            }
          } else {

          }
        })
        this.ivalue = value
      } else {
        // console.log('this.valueItem4')
      }
    },
    focusMethod () {
      if (!this.options || this.options.length == 0) {
        this.remoteMethod('')
      }
    },
    remoteMethod (query) {
      if (1 === 1) {
        this.loading = true
        let params = {
          prop: this.sortBy,
          order: this.sortType,
          page: 1,
          limit: 15
        }
        params = Object.assign({}, params, this.extparam)
        params[this.searchKey] = query
        this.tempSearchKey = query
        this.$http({
          url: this.$http.adornUrl(`${this.requestUrl}/list`),
          method: 'get',
          params
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.options = data.data.list.map(item => {
              let result = {}
              let iid = item[this.idKey]
              let ilabel = item[this.labelKey]

              this.remoteMap[iid] = item

              result.value = iid
              result.label = this.labelFormatter(item, ilabel, iid)
              return result
            })
          } else {
            this.options = []
          }
          this.loading = false
        })
      } else {
        this.options = []
      }
    },
    ichange (value) {
      if (this.multiple) {
        // 遍历数组中所有的内容
        let itemArray = []
        for (let i = 0; i < value.length; i++) {
          const itemValue = value[i]
          itemArray.push(this.remoteMap[itemValue])
        }
        this.$emit('input', value, itemArray)
        this.change(value, itemArray)
      } else {
        // console.log('point1')
        if (!value) {
          this.$emit('input', value, {})
          this.change(value, value, {})
          // console.log('point2')
          return
        }
        this.$emit('input', this.remoteMap[value][this.idKey], this.remoteMap[value])
        this.change(value, this.remoteMap[value][this.idKey], this.remoteMap[value])
        console.log('point3')
      }
    },
    handleClose (isData) {
      if (isData && this.ivalue != null && this.ivalue != '') {
        this.sure(this.ivalue, this.remoteMap[this.ivalue])
      }
    }
  }
}
</script>

vue中运用(前台)

引入插件：

import RemoteSelect from '../../../components/remoteSelect/remoteSelect.vue'

          <el-form-item >
            合同号 : <remote-select
            v-model="dataForm.f_contract_bill_no"
            placeholder="合同号"
            requestUrl="/truckscalemeasurement/getContractBillNoList"   //获取数据路径
            idKey="fContractBillNo"
            labelKey="fContractBillNo"                 //对应实体类
            searchKey="f_contract_bill_no"              //查询字段（对应数据库）
            :extparam="{f_workflow_step__ge:'100000010000'}"  //筛选条件
            style="width: 170px"
            clearable
          />
          </el-form-item>

后台支撑代码

 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;
    }


}