名额

src/views/system/studentSelectionProject/studentSelectionProjectForm.vue

@@ -1,64 +1,85 @@
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible">
     <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="130px"
-      v-loading="formLoading"
+        ref="formRef"
+        :model="formData"
+        :rules="formRules"
+        label-width="130px"
+        v-loading="formLoading"
     >
       <el-form-item label="项目名称" prop="projectName">
         <el-input v-model="formData.projectName" placeholder="请输入项目名称" />
       </el-form-item>
       <el-form-item label="学生开始时间" prop="studentStartTime">
         <el-date-picker
-          v-model="formData.studentStartTime"
-          type="datetime"
-          value-format="x"
-          placeholder="选择学生开始时间"
-          class="!w-full"
+            v-model="formData.studentStartTime"
+            type="datetime"
+            value-format="x"
+            placeholder="选择学生开始时间"
+            class="!w-full"
         />
       </el-form-item>
       <el-form-item label="导师截止时间" prop="supervisorConfirmDeadline">
         <el-date-picker
-          v-model="formData.supervisorConfirmDeadline"
-          type="datetime"
-          value-format="x"
-          placeholder="选择导师截止时间"
-          class="!w-full"
+            v-model="formData.supervisorConfirmDeadline"
+            type="datetime"
+            value-format="x"
+            placeholder="选择导师截止时间"
+            class="!w-full"
         />
       </el-form-item>
-
-      <el-form-item label="参与导师" prop="supervisorIds">
-        <el-select
-          v-model="formData.supervisorIds"
-          @change="handleSupervisorChange"
-          placeholder="请选择参与导师"
-          clearable
-          filterable
-          multiple
-          class="!w-full"
-        >
+      <el-form-item label="年级" prop="studentGrade">
+        <el-select v-model="formData.studentGrade" placeholder="请选择年级">
           <el-option
-            v-for="supervisor in supervisors"
-            :key="supervisor.id"
-            :label="supervisor.nickname"
-            :value="supervisor.id"
+              v-for="year in gradeOptions"
+              :key="year"
+              :label="year"
+              :value="year"
           />
         </el-select>
       </el-form-item>
 
-      <el-form-item label="年级" prop="studentGrade">
-        <el-select v-model="formData.studentGrade" placeholder="请选择年级" >
+      <el-form-item label="参与导师" prop="supervisorIds">
+        <el-select
+            v-model="formData.supervisorIds"
+            @change="handleSupervisorChange"
+            placeholder="请选择参与导师"
+            clearable
+            filterable
+            multiple
+            class="!w-full"
+        >
           <el-option
-            v-for="year in gradeOptions"
-            :key="year"
-            :label="year"
-            :value="year"
+              v-for="supervisor in supervisors"
+              :key="supervisor.id"
+              :label="supervisor.nickname"
+              :value="supervisor.id"
           />
         </el-select>
       </el-form-item>
-
+      <el-table :data="supervisorsWithQuota" :stripe="true" :show-overflow-tooltip="true" v-if="formData.supervisorIds.length != 0">
+          <el-table-column label="导师名称" align="center" prop="name" />
+          <el-table-column label="学硕名额" align="center">
+            <template #default="scope">
+              <el-input
+                  v-model="scope.row.academicSlots"
+                  placeholder="输入名额"
+                  type="number"
+                  min="0"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column label="专硕名额" align="center">
+            <template #default="scope">
+              <el-input
+                  v-model="scope.row.professionalSlots"
+                  placeholder="输入名额"
+                  type="number"
+                  min="0"
+              />
+            </template>
+          </el-table-column>
+      </el-table>
     </el-form>
     <template #footer>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -66,9 +87,11 @@
     </template>
   </Dialog>
 </template>
+
 <script setup lang="ts">
 import { studentSelectionProjectApi, studentSelectionProjectVO } from '@/api/system/studentSelectionProject'
 import * as UserApi from '@/api/system/user'
+import { dateFormatter } from "@/utils/formatTime";
 
 /** 师生互选项目 表单 */
 defineOptions({ name: 'StudentSelectionProjectForm' })
@@ -86,9 +109,10 @@ const formData = ref({
   studentStartTime: undefined,
   supervisorConfirmDeadline: undefined,
   studentGrade: undefined,
-  supervisorIds:[],
-  isSupervisor:ref(0),
-  isStudent:ref(0),
+  supervisorIds: [],
+  isSupervisor: ref(0),
+  isStudent: ref(0),
+  supervisorsWithQuota: [],
 })
 const formRules = reactive({
   projectName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
@@ -110,6 +134,7 @@ const open = async (type: string, id?: number, projectId?: number) => {
     formLoading.value = true
     try {
       formData.value = await studentSelectionProjectApi.getStudentSelectionProject(id)
+      supervisorsWithQuota.value = formData.value.supervisorsWithQuota
     } finally {
       formLoading.value = false
     }
@@ -122,6 +147,8 @@ const emit = defineEmits(['success']) // 定义 success 事件，用于操作成
 const submitForm = async () => {
   // 校验表单
   await formRef.value.validate()
+  // 将名额加入 formData
+  formData.value.supervisorsWithQuota = supervisorsWithQuota.value
   // 提交请求
   formLoading.value = true
   try {
@@ -144,17 +171,17 @@ const submitForm = async () => {
 const currentYear = new Date().getFullYear(); // 获取当前年份
 const gradeOptions = computed(() => {
   return [
-    currentYear +'级',          // 今年
-    currentYear - 1 +'级',      // 去年
-    currentYear - 2 +'级',      // 前年
-    currentYear - 3 +'级',      // 大前年
-    currentYear - 4 +'级',      // 大大前年
-  ];
-});
+    currentYear + '级',          // 今年
+    currentYear - 1 + '级',      // 去年
+    currentYear - 2 + '级',      // 前年
+    currentYear - 3 + '级',      // 大前年
+    currentYear - 4 + '级',      // 大大前年
+  ]
+})
 
-//获取所有导师
+// 获取所有导师
 const supervisors = ref()
-const getSupervisor= async () => {
+const getSupervisor = async () => {
   try {
     const result = await UserApi.getSupervisor()
     supervisors.value = result
@@ -163,10 +190,38 @@ const getSupervisor= async () => {
   }
 }
 
+// 处理导师选择变化
 const handleSupervisorChange = (values) => {
-  formData.value.supervisorIds = values;  // values 是选择的导师ID数组
+  formData.value.supervisorIds = values; // 更新选择的导师 ID 数组
+  updateSupervisorsWithQuota()  // 更新导师及名额信息
 }
+// 更新已选导师信息并添加名额
+const supervisorsWithQuota = ref([]) // 存储选择的导师及其名额
+const updateSupervisorsWithQuota = () => {
+  console.log(formData.value.supervisorIds,supervisorsWithQuota.value ,"添加签")
+  // 1. 添加新的导师
+  formData.value.supervisorIds.forEach(id => {
+    const supervisor = supervisors.value.find(s => s.id == id);
+    const supervisorTable = supervisorsWithQuota.value.find(s => s.id == id);
+
+    // 如果 supervisor 存在且 supervisorTable 中没有该 supervisor，则添加
+    if (supervisor && !supervisorTable) {
+      supervisorsWithQuota.value.push({
+        id: supervisor.id,
+        name: supervisor.nickname,
+        academicSlots: undefined, // 第一个名额
+        professionalSlots: undefined, // 第二个名额
+      });
+    }
+  });
+  console.log(formData.value.supervisorIds,supervisorsWithQuota.value ,"添加后")
 
+  // 2. 删除不在 formData.value.supervisorIds 中的导师
+  supervisorsWithQuota.value = supervisorsWithQuota.value.filter(supervisorTable => {
+    return formData.value.supervisorIds.includes(parseInt(supervisorTable.id));
+  });
+  console.log(formData.value.supervisorIds,supervisorsWithQuota.value ,"删除后")
+};
 /** 重置表单 */
 const resetForm = () => {
   formData.value = {
@@ -178,6 +233,7 @@ const resetForm = () => {
     supervisorIds:[],
     isSupervisor:ref(0),
     isStudent:ref(0),
+    supervisorsWithQuota : []
   }
   formRef.value?.resetFields()
 }