dvcp_v2_webapp/project/xiushan/components/AiUserPicker.vue

<template>
  <section class="AiUserPicker">
    <el-select size="small" :value="value" placeholder="选择人员" clearable @change="handleSelect" v-bind="$attrs"
               filterable>
      <el-option v-for="row in list" :key="row.id" :value="row.id" :label="row[label]"/>
    </el-select>
  </section>
</template>

<script>
export default {
  name: "AiUserPicker",
  model: {
    prop: "value",
    event: "select"
  },
  props: {
    value: {default: ""},
    instance: Function,
    action: {default: "/app/appportaluser/list"},
    params: {default: () => ({})},
    label: {default: "phone"},
    name: {default: ""}
  },
  data() {
    return {
      list: []
    }
  },
  methods: {
    getUsers() {
      let {action, params} = this
      this.instance?.post(action, null, {params: {...params, size: 9999}}).then(res => {
        if (res?.data) {
          this.list = res.data.records
        }
      })
    },
    handleSelect(v) {
      let list = this.list.filter(e => [v].flat().includes(e.id))
      this.$emit('select', v)
      this.$emit("update:name", list?.map(e => e[this.label])?.toString() || "")
      this.$emit("list", list)
    }
  },
  created() {
    this.getUsers()
  }
}
</script>

<style lang="scss" scoped>
.AiUserPicker {
  .el-select {
    width: 100%;
  }
}
</style>