chore: update

src/composables/useGetProjectList.ts

@@ -21,17 +21,18 @@ interface MemberType {
 }
 const store = useUserStore()
 
+const members = ref<MemberType[]>([])
+const departments = ref<DepartmentType[]>([])
+const organizations = ref<OrganizationType[]>([])
 export function useGetProjectList() {
-  const members = ref<MemberType[]>([])
-  const departments = ref<DepartmentType[]>([])
-  const organizations = ref<OrganizationType[]>([])
-  getProjectList({ organization_id: store.organization?.id, project_id: store.project?.id }).then((res: any) => {
-    members.value = res.data.members
-    departments.value = res.data.departments
-    organizations.value = res.data.departments.reduce((result: OrganizationType[], item: DepartmentType) => {
-      return result.concat(item.organizations)
-    }, [])
-  })
+  !departments.value.length &&
+    getProjectList({ organization_id: store.organization?.id, project_id: store.project?.id }).then((res: any) => {
+      members.value = res.data.members
+      departments.value = res.data.departments
+      organizations.value = res.data.departments.reduce((result: OrganizationType[], item: DepartmentType) => {
+        return result.concat(item.organizations)
+      }, [])
+    })
 
   return { members, departments, organizations }
 }

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

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

src/modules/admin/system/experiment/components/FormDialog.vue

 <script setup lang="ts">
 import type { FormInstance, FormRules } from 'element-plus'
-import type { ExperimentCreateItem } from '../types'
+import type { ExperimentItem, ExperimentCreateItem } from '../types'
 
 import { ElMessage } from 'element-plus'
-import { createExperiment } from '../api'
+import { createExperiment, updateExperiment } from '../api'
 import { useGetProjectList } from '@/composables/useGetProjectList'
 import { useGetCourseList } from '../composables/useGetCourseList'
 import { useGetTeacherList } from '../composables/useGetTeacherList'
@@ -11,7 +11,7 @@ import { useGetTeacherList } from '../composables/useGetTeacherList'
 import { useMapStore } from '@/stores/map'
 
 interface Props {
-  data?: any
+  data?: ExperimentItem | null
 }
 
 const props = defineProps<Props>()
@@ -29,42 +29,69 @@ const { courses } = useGetCourseList()
 const { teachers } = useGetTeacherList()
 // 实验类型
 const types = useMapStore().getMapValuesByKey('experiment_type')
+// 数据状态
 const status = useMapStore().getMapValuesByKey('system_status')
 
-const title = $computed(() => {
-  return '新增实验'
-})
-
 const formRef = $ref<FormInstance>()
 const form = reactive<ExperimentCreateItem>({
   organ_id: '',
   status: '1',
   course_id: '',
   name: '',
-  length: '',
+  length: 10,
   type: '',
-  score: '',
+  score: 100,
   teachers_id: '',
   teachers_ids: []
 })
 watchEffect(() => {
-  Object.assign(form, props.data)
+  if (!props.data) return
+  const score = parseFloat(props.data.score)
+  const length = parseFloat(props.data.length)
+  const teachers_ids = props.data.teacher.map(item => item.id)
+  Object.assign(form, props.data, { score, length, teachers_ids })
 })
+
 const rules = ref<FormRules>({
-  organ_id: [{ required: true, message: '请选择实验所属部门/学校', trigger: 'blur' }],
-  course_id: [{ required: true, message: '请选择实验课程', trigger: 'blur' }]
+  organ_id: [{ required: true, message: '请选择实验所属部门/学校' }],
+  course_id: [{ required: true, message: '请选择实验课程' }],
+  name: [{ required: true, message: '请输入实验名称' }],
+  length: [{ required: true, message: '请输入实验学时' }],
+  type: [{ required: true, message: '请选择实验类型' }],
+  teachers_ids: [{ type: 'array', required: true, message: '请选择指导教师', trigger: 'change' }],
+  score: [{ required: true, message: '请输入实验总成绩' }]
 })
+const isUpdate = $computed(() => {
+  return !!form.id
+})
+const title = $computed(() => {
+  return isUpdate ? '编辑实验' : '新增实验'
+})
+
 // 提交
 function handleSubmit() {
-  formRef?.validate().then(update)
+  formRef?.validate().then(() => {
+    const params = {
+      ...form,
+      teachers_id: form.teachers_ids?.join(',') || ''
+    }
+    isUpdate ? handleUpdate(params) : handleCreate(params)
+  })
 }
-// 修改
-const update = () => {
-  createExperiment(form).then(() => {
+// 新增
+function handleCreate(params: ExperimentCreateItem) {
+  createExperiment(params).then(() => {
     ElMessage({ message: '创建成功', type: 'success' })
     emit('update')
     emit('update:modelValue', false)
-    formRef?.resetFields()
+  })
+}
+// 修改
+function handleUpdate(params: ExperimentCreateItem) {
+  updateExperiment(params).then(() => {
+    ElMessage({ message: '修改成功', type: 'success' })
+    emit('update')
+    emit('update:modelValue', false)
   })
 }
 </script>
@@ -73,23 +100,23 @@ const update = () => {
   <el-dialog :title="title" :close-on-click-modal="false" width="600px" @update:modelValue="$emit('update:modelValue')">
     <el-form ref="formRef" :model="form" :rules="rules" label-width="150px">
       <el-form-item label="实验所属部门/学校" prop="organ_id">
-        <el-select v-model="form.organ_id" style="width: 100%">
+        <el-select v-model="form.organ_id" style="width: 100%" :disabled="isUpdate">
           <el-option v-for="item in organizations" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="实验课程" prop="course_id">
-        <el-select v-model="form.course_id" style="width: 100%">
+        <el-select v-model="form.course_id" style="width: 100%" :disabled="isUpdate">
           <el-option v-for="item in courses" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="实验名称" prop="name">
-        <el-input v-model="form.name" />
+        <el-input v-model="form.name" :disabled="isUpdate" />
       </el-form-item>
       <el-form-item label="实验学时" prop="length">
-        <el-input v-model="form.length" />
+        <el-input-number v-model="form.length" :min="1" :max="20" step-strictly style="width: 100%" />
       </el-form-item>
       <el-form-item label="指导教师" prop="teachers_ids">
-        <el-select v-model="form.teachers_id" style="width: 100%">
+        <el-select v-model="form.teachers_ids" multiple style="width: 100%">
           <el-option v-for="item in teachers" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
@@ -99,7 +126,7 @@ const update = () => {
         </el-select>
       </el-form-item>
       <el-form-item label="实验总成绩" prop="score">
-        <el-input v-model="form.score" />
+        <el-input-number v-model="form.score" :min="1" :max="150" step-strictly style="width: 100%" />
       </el-form-item>
       <el-form-item label="有效状态" prop="files">
         <el-radio-group v-model="form.status">

src/modules/admin/system/experiment/composables/useGetCourseList.ts

@@ -8,10 +8,12 @@ interface CourseType {
 }
 const store = useUserStore()
 
+const courses = ref<CourseType[]>([])
+
 export function useGetCourseList() {
-  const courses = ref<CourseType[]>([])
-  getExperimentCourseList({ organ_id: store.organization?.id }).then((res: any) => {
-    courses.value = res.data
-  })
+  !courses.value.length &&
+    getExperimentCourseList({ organ_id: store.organization?.id }).then((res: any) => {
+      courses.value = res.data
+    })
   return { courses }
 }

src/modules/admin/system/experiment/composables/useGetTeacherList.ts

@@ -8,10 +8,12 @@ interface TeacherType {
 }
 const store = useUserStore()
 
+const teachers = ref<TeacherType[]>([])
+
 export function useGetTeacherList() {
-  const teachers = ref<TeacherType[]>([])
-  getExperimentTeacherList({ organ_id: store.organization?.id }).then((res: any) => {
-    teachers.value = res.data
-  })
+  !teachers.value.length &&
+    getExperimentTeacherList({ organ_id: store.organization?.id }).then((res: any) => {
+      teachers.value = res.data
+    })
   return { teachers }
 }

src/modules/admin/system/experiment/types.ts

@@ -29,13 +29,14 @@ export interface ExperimentItem {
 }
 
 export interface ExperimentCreateItem {
+  id?: string
   organ_id: string
   status: string
   course_id: string
   name: string
-  length: string
+  length: number
   type: string
-  score: string
+  score: number
   teachers_id: string
   teachers_ids?: string[]
 }

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

 <script setup lang="ts">
 import { CirclePlusFilled } from '@element-plus/icons-vue'
 import type { ExperimentItem } from '../types'
-import FormDialog from '../components/FormDialog.vue'
+import AppList from '@/components/base/AppList.vue'
 import { getExperimentList } from '../api'
 
+const FormDialog = defineAsyncComponent(() => import('../components/FormDialog.vue'))
+
+const appList = $ref<InstanceType<typeof AppList> | null>(null)
+
 // 列表配置
 const listOptions = {
   remote: {
@@ -34,18 +38,28 @@ const listOptions = {
 }
 
 let dialogVisible = $ref(false)
+const rowData = ref<ExperimentItem | undefined | null>(null)
 
+// 新增
 function handleAdd() {
+  rowData.value = null
   dialogVisible = true
 }
-function handleUpdate() {
+// 编辑
+function handleUpdate(row: ExperimentItem) {
+  rowData.value = row
   dialogVisible = true
 }
+
+function onUpdateSuccess() {
+  dialogVisible = false
+  appList?.refetch()
+}
 </script>
 
 <template>
   <AppCard title="实验管理">
-    <AppList v-bind="listOptions">
+    <AppList v-bind="listOptions" ref="appList">
       <template #header-buttons>
         <el-button type="primary" round :icon="CirclePlusFilled" @click="handleAdd">新增实验</el-button>
       </template>
@@ -57,9 +71,9 @@ function handleUpdate() {
         <el-button type="primary" round>
           <router-link :to="`/admin/system/experiment/${row.id}`" target="_blank">关联班级与分组</router-link>
         </el-button>
-        <el-button type="primary" round @click="handleUpdate">编辑</el-button>
+        <el-button type="primary" round @click="handleUpdate(row)">编辑</el-button>
       </template>
     </AppList>
   </AppCard>
-  <FormDialog v-model="dialogVisible"></FormDialog>
+  <FormDialog v-model="dialogVisible" :data="rowData" @update="onUpdateSuccess" v-if="dialogVisible"></FormDialog>
 </template>