ruoyi-plus-soybean/src/components/custom/user-select.vue

<script setup lang="ts">
import { ref, useAttrs } from 'vue';
import type { SelectProps } from 'naive-ui';
import { useLoading } from '@sa/hooks';
import { fetchGetUserSelect } from '@/service/api/system';

defineOptions({
  name: 'UserSelect'
});

interface Props {
  [key: string]: any;
}

defineProps<Props>();

const value = defineModel<CommonType.IdType[] | null>('value', { required: false });

const attrs: SelectProps = useAttrs();

const { loading: userLoading, startLoading: startUserLoading, endLoading: endUserLoading } = useLoading();

/** the enabled role options */
const userOptions = ref<CommonType.Option<CommonType.IdType>[]>([]);

async function getUserOptions() {
  startUserLoading();
  const { error, data } = await fetchGetUserSelect();

  if (!error) {
    userOptions.value = data.map(item => ({
      label: `${item.nickName} ( ${item.userName} )`,
      value: item.userId
    }));
  }
  endUserLoading();
}

getUserOptions();
</script>

<template>
  <NSelect
    v-model:value="value"
    :loading="userLoading"
    :options="userOptions"
    v-bind="attrs"
    placeholder="请选择用户"
  />
</template>

<style scoped></style>