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 { debounce } from 'lodash';
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: () => [] },
  clearable: { type: Boolean, required: false, default: true },
  width: { type: String, required: false, default: () => '100%' },
});
const emit = defineEmits<Emits>();
const personnelArray = ref<optionsType>([]);
const { userInfo, personnelList } = storeToRefs(useStore());
const { setValue } = useStore()

const timeRef = generateUniqueId()
const selectLoading = ref(false);
const controlTranslation = reactive({
  visibleFlag: false // 下拉框出现隐藏
})

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

const getSelectedLabel = computed(() => {
  if (!props.multiple) {
    const item = getPersonnelListItems(selectedValue.value);
    return item ? item.label : props.placeholder
  }

  if (props.multiple) {
    if (Array.isArray(selectedValue.value)) {
      if (selectedValue.value.length <= 0) {
        return props.placeholder
      }
      const item = getPersonnelListItems(selectedValue.value);
      return item ? item.label : props.placeholder
    } else {
      return props.placeholder
    }
  }

  return props.placeholder
})

function tagClose(_evt: MouseEvent) {
  if (Array.isArray(selectedValue.value)) {
    selectedValue.value.shift()
    updateValue(selectedValue.value)
  }
}
function getPersonnelListItems(val: any) {
  let value = val;
  if (Array.isArray(val) && val.length > 0) {
    value = val[0]
  }
  return personnelList.value.find((item: any) => item.value == value)
}

function getUserList(keyword: string = '') {
  post(`/user/getSimpleActiveUserListNew`, { keyword }).then(res => {
    personnelArray.value = res.data
    if (!keyword) {
      setValue((res.data || []), 'personnelList')
    }
  }).finally(() => {
    selectLoading.value = false
  })
}

function visibleChange(visible: boolean) { // 下拉框出现/隐藏时触发
  controlTranslation.visibleFlag = visible
}

const filterMethod = debounce(filterMethods, 500)
function filterMethods(val: string) {
  if (val == '') {
    personnelArray.value = personnelList.value
    selectLoading.value = false
    return personnelArray.value
  }
  getUserList(val)
}

function updateValue(val: any) { // 值改变的时候触发
  emit('update:modelValue', selectedValue.value)
  emit('change', val)
}

onMounted(() => {
  if (personnelList.value.length == 0) {
    if (props.options.length > 0) {
      personnelArray.value = props.options
    } else {
      getUserList()
    }
  } else {
    personnelArray.value = personnelList.value
  }
})
</script>

<template>
  <!-- <el-select v-model="selectedValue" :ref="`selectRef${timeRef}`" :multiple="multiple" :size="size"
    :loading="selectLoading" :placeholder="placeholder" :disabled="disabled" clearable filterable collapse-tags
    :style="`width: ${width}`"
    :class="`custom-select ${userInfo.userNameNeedTranslate != 1 && !controlTranslation.visibleFlag ? 'setUpInput' : ''}`"
    @change="updateValue" @visible-change="visibleChange"
    :filter-method="(val: string) => { selectLoading = true, filterMethod(val) }">
    搜索内容显示
    <template #prefix v-if="!multiple">
      <div style="height: 100%;display: flex;align-items: center;">
        单选
        <div v-if="!controlTranslation.visibleFlag" class="selectSingleChoice">
          <template v-if="getSelectedLabel == placeholder">
            {{ placeholder }}
          </template>
<template v-else>
            <span style="color: #303133;">
              <TextTranslation translationTypes="userName" :translationValue="getSelectedLabel"></TextTranslation>
            </span>
          </template>
</div>
</div>
</template>
<template #tag v-if="multiple">
      多选
      <template v-if="Array.isArray(selectedValue) && selectedValue.length > 0">
        <el-tag type="info" :size="size" closable @close="tagClose">
          <TextTranslation translationTypes="userName" :translationValue="getSelectedLabel"></TextTranslation>
        </el-tag>
        <el-tag type="info" :size="size" v-if="selectedValue.length > 1">+{{ selectedValue.length }}</el-tag>
      </template>
<template v-else>
        <span style="color: #A8ABB2">{{ placeholder }}</span> 
      </template>
</template>
主题内容显示
<el-option v-for="item in personnelArray" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select> -->
  <el-select-v2 v-model="selectedValue" :ref="`selectRef${timeRef}`" :multiple="multiple" :size="size"
    :loading="selectLoading" :placeholder="placeholder" :disabled="disabled" :clearable="clearable" filterable collapse-tags
    :style="`width: ${width}`" :options="personnelArray"
    :class="`custom-select ${!controlTranslation.visibleFlag ? 'setUpInput' : ''}`" @change="updateValue"
    @visible-change="visibleChange" :filter-method="filterMethod">
    <!-- 搜索内容显示 -->
    <template #prefix v-if="!multiple">
      <div style="height: 100%;display: flex;align-items: center;">
        <!-- 单选 -->
        <div v-if="!controlTranslation.visibleFlag" class="selectSingleChoice">
          <template v-if="getSelectedLabel == placeholder">
            {{ placeholder }}
          </template>
          <template v-else>
            <span style="color: #606266;">
              <TextTranslation translationTypes="userName" :translationValue="getSelectedLabel"></TextTranslation>
            </span>
          </template>
        </div>
      </div>
    </template>
    <template #tag v-if="multiple">
      <!-- 多选 -->
      <template v-if="Array.isArray(selectedValue) && selectedValue.length > 0">
        <el-tag type="info" :size="size" closable @close="tagClose">
          <TextTranslation translationTypes="userName" :translationValue="getSelectedLabel"></TextTranslation>
        </el-tag>
        <el-tag type="info" :size="size" v-if="selectedValue.length > 1">+{{ selectedValue.length }}</el-tag>
      </template>
      <template v-else>
        <span style="color: #A8ABB2">{{ placeholder }}</span>
      </template>
    </template>
    <!-- 基础 -->
    <template #default="{ item }">
      <div class="flex items-center">
        <TextTranslation translationTypes="userName" :translationValue="item.label"></TextTranslation>
      </div>
    </template>
  </el-select-v2>
</template>

<style lang="scss" scoped>
.custom-select {
  :deep(.el-select__placeholder.is-transparent) {
    color: transparent !important;
  }

  :deep(.el-select__placeholder) {
    span {
      display: none;
    }
  }

  :deep(.el-select__input) {
    margin-left: 0;
  }
}

.setUpInput :deep(.el-input__inner) {
  color: #fff !important;
}
</style>