manHourHousekeeper/fhKeeper/formulahousekeeper/customerBuler-crm/src/components/translationComponent/personnelSearch/personnelSearch.vue

<script lang="ts" setup>
import { ref, reactive, onMounted, inject, watchEffect, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { Emits, optionsType } from './type';
import { useStore } from '@/store/index'
import { generateUniqueId } from '@/utils/tools'
import { post, get, uploadFile } from "@/utils/request";

const props = defineProps({
  modelValue: { type: [String, Number, Array, Object, Boolean], required: true },
  multiple: { type: Boolean, required: false, default: false },
  size: { type: String as () => assemblySize, required: true, default: () => 'small' },
  placeholder: { type: String, required: false, default: () => '请填写' },
  disabled: { type: Boolean, required: false, default: false },
  options: { type: Array as () => optionsType, required: false, default: () => [] },
});
const emit = defineEmits<Emits>();
const { userInfo } = storeToRefs(useStore());

const timeRef = generateUniqueId()
const controlTranslation = reactive({
  visibleFlag: false
})

const selectedValue = ref(props.modelValue); // 响应式绑定 v-model 的值

// function getUserList(keyword: string = '', flag: boolean = true) {
//   post(`/user/getEmployeeList`, {
//     keyword,
//     status: 3,
//     matchingType: 0,
//   })
// }

function visibleChange(visible: boolean) { // 下拉框出现/隐藏时触发
  console.log(visible, '<==== visible')
  controlTranslation.visibleFlag = visible
}
function updateValue(val: any) { // 值改变的时候触发
  emit('update:modelValue', selectedValue.value)
  emit('change', val)
}

console.log(props, userInfo, '<==== 看看数据')
</script>

<template>
  <el-select v-model="selectedValue" :ref="`selectRef${timeRef}`" :multiple="multiple" :size="size"
    :placeholder="placeholder" :disabled="disabled" clearable collapse-tags @change="updateValue"
    @visible-change="visibleChange">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

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