index.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. <template>
  2. <a-select
  3. v-model:value="selected"
  4. :placeholder="placeholder"
  5. :options="optionList"
  6. filter-option
  7. :multiple="false"
  8. :field-names="fieldNames"
  9. v-bind="attrs"
  10. allow-clear
  11. @change="onChange"
  12. >
  13. </a-select>
  14. </template>
  15. <script setup name="SelectSubject" lang="ts">
  16. import { ref, useAttrs, watch } from "vue";
  17. import { getSubjectList } from "@/ap/system";
  18. const props = withDefaults(
  19. defineProps<{
  20. examId: number;
  21. modelValue: string;
  22. placeholder?: string;
  23. }>(),
  24. {
  25. placeholder: "请选择",
  26. }
  27. );
  28. const emit = defineEmits(["update:modelValue", "change"]);
  29. const attrs = useAttrs();
  30. const fieldNames = { label: "name", value: "code" };
  31. const selected = ref("");
  32. const optionList = ref([]);
  33. const search = async () => {
  34. optionList.value = [];
  35. const resData = await getSubjectList({ examId: props.examId });
  36. optionList.value = resData || [];
  37. };
  38. search();
  39. const onChange = () => {
  40. const selectedData = optionList.value.filter(
  41. (item: any) => selected.value === item.code
  42. );
  43. emit("update:modelValue", selected.value);
  44. emit("change", selectedData[0]);
  45. };
  46. watch(
  47. () => props.modelValue,
  48. (val) => {
  49. selected.value = val;
  50. },
  51. {
  52. immediate: true,
  53. }
  54. );
  55. </script>