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

<template>
  <el-select v-model="staffSelected" clearable filterable @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
    }
  },
  watch: {
    staffSelected(val) {
      const staff = this.staffList.find(item => item.id === val);
      this.$emit("input", staff);
    },
    value(newVal) {
      if (newVal) {
        this.staffSelected = newVal.id
      } else {
        this.staffSelected = null
      }
    },
  },
  mounted() {
    this.listStaff()
  },
  methods: {
    async listStaff() {
      try {
        if (!this.isGet) return;
        const res = await getStaffList()
        this.staffList = res.data
        this.hasRequest = true
      } catch {
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>