科目下拉的查找功能

src/api/projectParamsManagementPage.ts

@@ -5,6 +5,7 @@ import { responseToFile } from "@/utils/utils";
 export function getProjectCourseList(params: {
   courseId?: number;
   projectId: number;
+  courseName: string;
   pageNo?: number;
   pageSize?: number;
 }) {

src/components/CourseSelect.vue

@@ -2,9 +2,12 @@
   <a-select
     placeholder="请选择科目"
     allowClear
+    show-search
     :value="valueStr"
+    @search="handleSearch"
     @change="handleChange"
     style="width: 140px"
+    :filter-option="false"
   >
     <a-select-option
       v-for="(item, index) in optionList"
@@ -26,20 +29,27 @@ const emit = defineEmits(["update:value"]);
 
 let optionList = $ref<{ id: number; name: string }[]>([]);
 
-watch(() => props.rootOrgId, fetchData);
+watch(
+  () => props.rootOrgId,
+  () => fetchData()
+);
 onMounted(fetchData);
-async function fetchData() {
+async function fetchData(searchStr = "") {
   if (typeof props.rootOrgId === "number") {
     const res = await getCourseList({
       rootOrgId: props.rootOrgId,
       enable: true,
+      name: searchStr,
       pageNo: 1,
       pageSize: 100,
     });
     optionList = res.data.content;
   }
 }
-const valueStr = computed(() => {
+async function handleSearch(searchStr: string) {
+  fetchData(searchStr);
+}
+let valueStr = computed(() => {
   let res: undefined | number | string = props.value ?? undefined;
   // if (typeof res === "number") res = props.value + "";
   return res as undefined | string;

src/components/ProjectCourseSelect.vue

@@ -2,10 +2,13 @@
   <a-select
     placeholder="请选择科目"
     allowClear
+    show-search
     :value="valueStr"
+    @search="handleSearch"
     @change="handleChange"
     style="width: 140px"
     :disabled="props.disabled"
+    :filter-option="false"
   >
     <a-select-option
       v-for="(item, index) in optionList"
@@ -30,16 +33,21 @@ const emit = defineEmits(["update:value"]);
 
 let optionList = $ref<{ courseId: number; courseName: string }[]>([]);
 
-onMounted(async () => {
+onMounted(fetchData);
+async function fetchData(searchStr = "") {
   const res = await getProjectCourseList({
     projectId: props.projectId,
+    courseName: searchStr,
     pageNo: 1,
     pageSize: 100,
   });
   optionList = res.data.content;
-});
+}
+async function handleSearch(searchStr: string) {
+  fetchData(searchStr);
+}
 
-const valueStr = computed(() => {
+let valueStr = computed(() => {
   let res: undefined | number | string = props.value ?? undefined;
   // if (typeof res === "number") res = props.value + "";
   return res as undefined | string;

src/features/projectParamsManagement/ProjectParamsManagement.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="tw-bg-white tw-p-5 tw-rounded-xl tw-mb-5">
-      <CourseSelect :root-org-id="rootOrgId" v-model:value="courseId" />
+      <ProjectCourseSelect :project-id="projectId" v-model:value="courseId" />
       <span class="tw-mr-4"></span>
       <a-button @click="search" class="query-btn">查询</a-button>
     </div>