tmp-jn/src/components/RemoteMultiSelect/index.vue

<script setup lang="ts">
import { ref, watch } from 'vue';
import request from '~/utils/request';


const props = defineProps<{
  url?: string,
  to?: 'team' | 'grade' | 'class',
  modelValue?: string,
  modelName?: string,
  change?: (item: object | undefined) => void
}>()
const emits = defineEmits(["update:modelValue", "update:modelName"])

const loading = ref(false)

const value = ref(props.modelValue ? props.modelValue.split(',') : [])
const names = props.modelName ? props.modelName.split(',') : []

const options = ref<{ name: string, value: string, origin?: {} }[]>((value.value.length > 0) ? value.value.map((val, idx) => ({
  value: val,
  name: names[idx]
})) : [])

remoteMethod().then(() => {
  // 

  // console.log('true :>> ', props.modelValue, props.modelName, options.value.find(({ value: val }) => val === props.modelValue));
  if (props.modelValue && props.modelName) {
    value.value.forEach((val, idx) => {
      if (!options.value.find((option) => val === option.value)) {
        options.value.unshift({
          value: val,
          name: names[idx],
        })
      }
    })
  }
})

function remoteMethod(keyword?: string) {
  loading.value = true
  return request({
    url: props.to ? `/jcxx/${props.to}/index` : props.url,
    data: {
      keyword,
      limit: 15
    }
  }).then(({ data }) => {
    options.value = data.page_data.map((item: { [index: string]: string }) => ({
      name: item[props.to + '_name'],
      value: item[props.to + '_id'],
      origin: item
    }))

    loading.value = false
  })
}



watch(
  () => value.value,
  (val) => {
    const list = val.map(v => options.value.find(({ value }) => value === v)).sort();
    // console.log('list :>> ', list, list.map(({ value }) => value).join(',')), list.map(({ name }) => name).join(',')));
    emits("update:modelValue", list.map((i) => i?.value).join(','));
    emits("update:modelName", list.map((i) => i?.name).join(','));
    props.change?.(list.map((i) => i?.origin));
  }
)

watch(() => props.modelValue, (val) => {
  if (val === undefined) {
    value.value = []
  }
})
</script>



<template>
  <el-select class="w-full" v-model="value" filterable remote reserve-keyword clearable :remote-method="remoteMethod"
    :loading="loading" multiple>
    <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value" />
  </el-select>
</template>