新增：[演示案例] 远程搜索下拉选择组件

feiyuchuixue · Jan 9, 2025 · 0997c16 · 0997c16
1 parent d94d5b9
commit 0997c16
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/src/api/modules/teacher/teacherStatistics.ts b/src/api/modules/teacher/teacherStatistics.ts
@@ -66,3 +66,12 @@ export const importTeacherStatisticsExcelApi = (params: UploadRawFile, config?:
 export const exportTeacherStatisticsExcelApi = (params: ITeacherStatistics.Query) => {
   return http.download(ADMIN_MODULE + `/teacher-statistics/export`, params);
 };
+
+/**
+ * 远程搜索
+ * @param params
+ */
+export const remoteTeacherStaticsSearchApi = (params: { keyword: string }) => {
+  const { keyword } = params;
+  return http.get<string[]>(ADMIN_MODULE + `/teacher-statistics/remote/${keyword}`);
+};
diff --git a/src/views/teacher/teacherStatistics/index.vue b/src/views/teacher/teacherStatistics/index.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { h, ref } from 'vue';
 import { CirclePlus, Delete, EditPen, Upload, Download } from '@element-plus/icons-vue';
 import ProTable from '@/components/ProTable/index.vue';
 import {
@@ -60,7 +60,8 @@ import {
   getTeacherStatisticsListApi,
   getTeacherStatisticsDetailApi,
   importTeacherStatisticsExcelApi,
-  exportTeacherStatisticsExcelApi
+  exportTeacherStatisticsExcelApi,
+  remoteTeacherStaticsSearchApi
 } from '@/api/modules/teacher/teacherStatistics';
 import { useHandleData } from '@/hooks/useHandleData';
 import TeacherStatisticsForm from '@/views/teacher/teacherStatistics/components/TeacherStatisticsForm.vue';
@@ -71,6 +72,8 @@ import ImportExcel from '@/components/ImportExcel/index.vue';
 import { downloadTemplate } from '@/api/modules/system/common';
 import { ElMessageBox } from 'element-plus';
 import { useDownload } from '@/hooks/useDownload';
+import RemoteSearchSelect from '@/components/RemoteSearchSelect/index.vue';
+
 defineOptions({
   name: 'TeacherStatisticsView'
 });
@@ -127,7 +130,25 @@ const searchColumns: SearchProps[] = [
       valueFormat: 'YYYY-MM-DD HH:mm:ss'
     }
   },
-  { prop: 'teacherId', label: '教师id', el: 'input' },
+  {
+    prop: 'remoteTeacherId',
+    label: '演示：远程搜索',
+    el: 'select',
+    render: (params: any) => {
+      return h(RemoteSearchSelect, {
+        modelValue: params.modelValue,
+        'onUpdate:modelValue': params['onUpdate:modelValue'],
+        placeholder: '教师id，输入数字触发搜索',
+        fetchOptions: remoteTeacherStaticsSearchApi,
+        api: (query: any) => ({ keyword: query }),
+        fieldMappings: {
+          key: 'id',
+          label: 'teacherId',
+          value: 'id'
+        }
+      });
+    }
+  },
   {
     prop: 'teacherCommonType',
     label: '讲师区分类型',