人员联想模糊匹配

原创于 2021-07-06 19:03:56 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

联想专栏收录该内容

1 篇文章

订阅专栏

这个博客展示了如何在前端应用中使用`el-autocomplete`和`el-select`组件实现用户和群组的搜索选择。组件支持单选和多选，并具备清空、禁用、远程数据加载等功能。用户输入时会触发异步数据请求，从后端获取匹配的用户信息。当用户选择项目负责人时，会更新表单并触发相关处理函数。

单选

<el-autocomplete size="mini" v-model="form.projectLeader" :fetch-suggestions="userAutoSearch" @select="val => userAutoSelect(1, val)" clearable @clear="handleProjectNumberOfPeople" :disabled="currentPhase == '项目已完成'" placeholder="请输入项目负责人">
  <template slot-scope="{ item }">
    {{ item.pinyin + ' ' + item.userCode }}
  </template>
</el-autocomplete>

userAutoSearch(queryString, cb) {
  if (queryString.trim() == '') {
    cb([])
  }
  else {
    let that = this
    let _data = {
      searchParam: queryString,
      returnDataType: 1 //1:只返回用户,2：只返回群组,3：全部返回
    }
    that.$store.dispatch('peopleAccosiation', _data).then((res) => {
      cb(res.data)
    }, (err) => {
      console.log(err.message)
    })
  }
},
userAutoSelect(_no, val) {
  let _user = val.pinyin + ' ' + val.userCode
  if (_no == 1) {
    this.form.projectLeader = _user
    this.handleProjectNumberOfPeople()
  }
  else {
  }
}

多选

<el-select size="mini" v-model="form.TC" :disabled="currentPhase == '项目已完成'" multiple filterable clearable remote :remote-method="userSearch" @change="handleReportTo" placeholder="请输入TC" :loading="userLoading">
  <el-option v-for="(user, index) in userSearchData" :key="index" :value="user.pinyin + ' ' + user.userCode"></el-option>
</el-select>

userSearch(val) {
  let that = this
  if (val.trim() == '') {
    that.userSearchData = []
  }
  else {
    that.userLoading = true
    let _data = {
      searchParam: val,
      returnDataType: 1 //1:只返回用户,2：只返回群组,3：全部返回
    }
    that.$store.dispatch('peopleAccosiation', _data).then((res) => {
      that.userSearchData = res.data
      that.userLoading = false
    }, (err) => {
      console.log(err.message)
      that.userLoading = false
    })
  }
},