lanan-system-vue/src/views/repair/Components/StaffChoose.vue

<template>
  <el-select :loading="selectLoading" v-model="staffSelected" clearable filterable :filter-method="changeQuery"
             @blur="$emit('input-blur', $event)">
    <el-option v-for="staff in staffList" :key="staff.id" :label="staff.name + ' ' + staff.tel" :value="staff.id"/>
  </el-select>
</template>

<script>

import {getStaffList} from "@/api/company/staff";

export default {
  name: "StaffChoose",
  props: {
    value: {
      type: Object,
    },
    isGet: {
      type: String,
      default: '',
      required: false
    }
  },
  data() {
    return {
      staffList: [],
      staffSelected: undefined,
      hasRequest: false,
      query: null,
      selectLoading: false,
    }
  },
  watch: {
    staffSelected(val) {
      const staff = this.staffList.find(item => item.id === val);
      if (staff) {
        this.$emit("input", staff);
      }
    },
    value(newVal) {
      if (newVal) {
        this.staffSelected = newVal.id
      } else {
        this.staffSelected = null
      }
    },
  },
  mounted() {
    this.listStaff()
  },
  methods: {
    async listStaff() {
      this.selectLoading = true
      try {
        if (!this.isGet) return;
        const res = await getStaffList(this.query)
        this.staffList = res.data
      } finally {
        this.selectLoading = false
      }
    },
    changeQuery(val) {
      this.query = val
      this.listStaff()
    }
  }
}
</script>

<style scoped lang="scss">

</style>