chore: 优化实验管理页面

src/modules/admin/lab/experiment/api.ts

@@ -21,6 +21,10 @@ export function updateExperiment(data: ExperimentCreateItem) {
   return httpRequest.post('/api/resource/v1/backend/experiment/update', data)
 }
 
+// 获取课程实验列表
+export function getCourseExperimentList(params: { course_id: string }) {
+  return httpRequest.get('/api/resource/v1/backend/experiment/experiments', { params })
+}
 // 获取实验课程列表
 export function getExperimentCourseList(params: { organ_id: string }) {
   return httpRequest.get('/api/resource/v1/backend/experiment/courses', { params })

src/modules/admin/lab/experiment/composables/useGetCourseExperimentList.ts

+import { getCourseExperimentList } from '../api'
+
+interface ExperimentType {
+  id: string
+  name: string
+}
+
+export function useGetCourseExperimentList() {
+  const courseExperiments = ref<ExperimentType[]>([])
+  function updateCourseExperiments(courseId: string) {
+    getCourseExperimentList({ course_id: courseId }).then((res: any) => {
+      courseExperiments.value = res.data
+    })
+  }
+  return { courseExperiments, updateCourseExperiments }
+}

src/modules/admin/lab/experiment/views/Index.vue

@@ -3,39 +3,98 @@ import type { ExperimentItem } from '../types'
 import { CirclePlus } from '@element-plus/icons-vue'
 import AppList from '@/components/base/AppList.vue'
 import { getExperimentList } from '../api'
+import { useGetCourseList } from '../composables/useGetCourseList'
+import { useGetCourseExperimentList } from '../composables/useGetCourseExperimentList'
+import { useMapStore } from '@/stores/map'
 
 const FormDialog = defineAsyncComponent(() => import('../components/FormDialog.vue'))
 
+// 数据状态
+const status = useMapStore().getMapValuesByKey('system_status')
+// 课程列表
+const { courses, updateCourses } = useGetCourseList()
+updateCourses('')
+// 课程实验
+const { courseExperiments, updateCourseExperiments } = useGetCourseExperimentList()
+
 const appList = $ref<InstanceType<typeof AppList> | null>(null)
 
+const params = reactive({
+  id: '',
+  course_id: '',
+  name: '',
+  status: ''
+})
+watch(
+  () => params.course_id,
+  () => {
+    updateCourseExperiments(params.course_id)
+  }
+)
 // 列表配置
-const listOptions = {
-  remote: {
-    httpRequest: getExperimentList,
-    params: { name: '' },
-    callback(data: { total: number; list: ExperimentItem[] }) {
-      const { list, total } = data
-      const dataList = list.map(item => {
-        const teacher_names = item.teacher.map(teacher => teacher.name).join('、')
-        return { ...item, teacher_names }
-      })
-      return { list: dataList, total }
-    }
-  },
-  filters: [{ type: 'input', prop: 'name', label: '实验名称', placeholder: '请输入实验名称' }],
-  columns: [
-    { label: '序号', type: 'index', width: 60 },
-    { label: '实验课程名称', prop: 'course_name' },
-    { label: '实验名称', prop: 'name' },
-    { label: '实验学时', prop: 'length' },
-    { label: '指导教师', prop: 'teacher_names' },
-    { label: '实验类型', prop: 'type_name' },
-    { label: '实验总成绩', prop: 'score' },
-    { label: '更新人', prop: 'updated_operator_name' },
-    { label: '更新时间', prop: 'updated_time' },
-    { label: '操作', slots: 'table-x', width: 200 }
-  ]
-}
+const listOptions = $computed(() => {
+  return {
+    remote: {
+      httpRequest: getExperimentList,
+      params,
+      beforeRequest(requestParams: any) {
+        if (params.course_id !== requestParams.course_id) {
+          requestParams.id = ''
+        }
+        params.course_id = requestParams.course_id || ''
+        return requestParams
+      },
+      callback(data: { total: number; list: ExperimentItem[] }) {
+        const { list, total } = data
+        const dataList = list.map(item => {
+          const teacher_names = item.teacher.map(teacher => teacher.name).join('、')
+          return { ...item, teacher_names }
+        })
+        return { list: dataList, total }
+      }
+    },
+    filters: [
+      {
+        type: 'select',
+        prop: 'course_id',
+        label: '实验课程',
+        placeholder: '请选择实验课程',
+        options: courses.value,
+        labelKey: 'name',
+        valueKey: 'id'
+      },
+      {
+        type: 'select',
+        prop: 'id',
+        label: '实验名称',
+        placeholder: '请选择实验',
+        options: courseExperiments.value,
+        labelKey: 'name',
+        valueKey: 'id'
+      },
+      {
+        type: 'select',
+        prop: 'status',
+        label: '生效状态',
+        placeholder: '请选择生效状态',
+        options: status
+      }
+    ],
+    columns: [
+      { label: '序号', type: 'index', width: 60 },
+      { label: '实验课程名称', prop: 'course_name' },
+      { label: '实验名称', prop: 'name' },
+      { label: '实验学时', prop: 'length' },
+      { label: '指导教师', prop: 'teacher_names' },
+      { label: '实验类型', prop: 'type_name' },
+      { label: '实验总成绩', prop: 'score' },
+      { label: '生效状态', prop: 'status_name' },
+      { label: '更新人', prop: 'updated_operator_name' },
+      { label: '更新时间', prop: 'updated_time' },
+      { label: '操作', slots: 'table-x', width: 200 }
+    ]
+  }
+})
 
 let dialogVisible = $ref(false)
 const rowData = ref<ExperimentItem | undefined | null>(null)