fs-admin/src/components/form/ElEmployees.vue

<script setup lang="ts">
import { getUserList } from '@/api/employees'

interface Props {
  modelValue: any
  type: string
}
const props = defineProps<Props>()
const emits = defineEmits(['update:modelValue'])

const list = ref<any>([])
const userList = ref<any>([])
const data = ref<any>([])
const selectValue = computed({
  get: () => props.modelValue,
  set: value => {
    emits('update:modelValue', value)
  }
})

const employeesOption = ref<any>(null)
const visibleDialog = ref<boolean>(false)
const handleTestTasks = (res: any) => {
  employeesOption.value.blur()
  visibleDialog.value = true
}
const saveDialog = () => {
  selectValue.value = userList.value
  visibleDialog.value = false
}

getUserList(props.type).then(res => {
  data.value = res
})
</script>

<template>
  <el-select ref="employeesOption" v-model="selectValue" @focus="handleTestTasks">
    <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">{{ item.name }} </el-option>
  </el-select>
  <el-dialog title="选择成员" v-model="visibleDialog" append-to-body>
    <el-transfer v-model="userList" filterable :data="data" />
    <template #footer>
      <el-button @click="visibleDialog = false">取 消</el-button>
      <el-button type="primary" @click="saveDialog">确 定</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped></style>