班次学期信息管理

frontend/src/views/teachOffice/shiftSemester/ClassSemesterDetailDialog.vue

@@ -1,82 +1,79 @@
 <template>
   <el-dialog
     :visible="dialogVisible"
-    title="教学班次学期信息明细"
-    width="720px"
+    :title="isEdit ? '编辑班次学期信息' : '教学班次学期信息明细'"
+    width="620px"
     class="class-detail-dialog"
     :close-on-click-modal="false"
     @update:visible="val => dialogVisible = val"
   >
-    <el-form label-width="100px" class="detail-form">
-      <el-row :gutter="24">
-        <!-- 左列 -->
+    <el-form ref="formRef" :model="form" :rules="rules" label-width="110px" class="detail-form">
+      <!-- 班次信息（只读展示） -->
+      <el-row :gutter="16">
         <el-col :span="12">
           <el-form-item label="班次">
-            <el-input v-model="form.bc" readonly />
-          </el-form-item>
-          <el-form-item label="专业">
-            <el-input v-model="form.xkzy" readonly />
-          </el-form-item>
-          <el-form-item label="年级">
-            <el-input v-model="form.nj" readonly />
-          </el-form-item>
-          <el-form-item label="学期">
-            <div class="semester-field">
-              <el-input v-model="form.xq" readonly />
-              <el-input v-model="form.ghn" class="plan-input" placeholder="" />
-            </div>
-          </el-form-item>
-          <el-form-item label="开学日期">
-            <el-date-picker v-model="form.kxrq" type="date" format="yyyy年M月d日" value-format="yyyy-MM-dd" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="结束日期">
-            <el-date-picker v-model="form.jsrq" type="date" format="yyyy年M月d日" value-format="yyyy-MM-dd" style="width: 100%" />
-          </el-form-item>
-          <el-form-item label="学期周数">
-            <el-input v-model="form.zs" />
+            <el-input :value="form.xydmc || form.xydbh" readonly />
           </el-form-item>
         </el-col>
-        <!-- 右列 -->
         <el-col :span="12">
-          <el-form-item label="教学任务">
-            <el-select v-model="form.jxrw" clearable placeholder="请选择" style="width: 100%">
-              <el-option v-for="opt in taskOptions" :key="opt" :label="opt" :value="opt" />
+          <el-form-item label="班次编号">
+            <el-input v-model="form.xydbh" :readonly="isEdit" :disabled="isEdit" placeholder="编辑模式不可修改" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-form-item label="年度" prop="nd">
+            <el-select v-model="form.nd" placeholder="请选择年度" style="width: 100%">
+              <el-option v-for="y in yearOptions" :key="y" :label="`${y}年`" :value="y" />
             </el-select>
           </el-form-item>
-          <el-form-item label="学期层次">
-            <el-select v-model="form.xqcc" style="width: 100%">
-              <el-option v-for="opt in levelOptions" :key="opt" :label="opt" :value="opt" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="开放教员排课">
-            <el-checkbox v-model="form.kfpy" />
-          </el-form-item>
-          <el-form-item label="查找教室">
-            <el-select v-model="form.zxjs" style="width: 100%">
-              <el-option v-for="opt in roomOptions" :key="opt" :label="opt" :value="opt" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="教学楼">
-            <el-select v-model="form.jxl" style="width: 100%">
-              <el-option v-for="opt in buildingOptions" :key="opt" :label="opt" :value="opt" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="专用教室">
-            <el-select v-model="form.zyjs" style="width: 100%">
-              <el-option v-for="opt in zyjsOptions" :key="opt" :label="opt" :value="opt" />
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="学期第次" prop="xqdc">
+            <el-select v-model="form.xqdc" placeholder="请选择学期" style="width: 100%">
+              <el-option v-for="opt in levelOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
             </el-select>
           </el-form-item>
         </el-col>
       </el-row>
-      <!-- 备注 -->
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-form-item label="开学日期" prop="kxrq">
+            <el-date-picker v-model="form.kxrq" type="date" value-format="yyyy-MM-dd" placeholder="请选择" style="width: 100%" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="结束日期" prop="jsrq">
+            <el-date-picker v-model="form.jsrq" type="date" value-format="yyyy-MM-dd" placeholder="请选择" style="width: 100%" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="16">
+        <el-col :span="12">
+          <el-form-item label="专用教室">
+            <el-input v-model="form.zyjsbh" placeholder="请输入专用教室编号" clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="教学任务">
+            <el-select v-model="form.jxrwbh" clearable filterable placeholder="请选择教学任务" style="width: 100%">
+              <el-option v-for="opt in taskOptions" :key="opt.bh" :label="opt.rwmc" :value="opt.bh" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="开放教员排课">
+        <el-checkbox v-model="form.kfjypk">开放教员排课</el-checkbox>
+      </el-form-item>
       <el-form-item label="备注">
-        <el-input v-model="form.bz" type="textarea" :rows="3" placeholder="" style="width: 100%" />
+        <el-input v-model="form.bz" type="textarea" :rows="3" placeholder="请输入备注" clearable />
       </el-form-item>
     </el-form>
 
     <div slot="footer">
       <el-button @click="dialogVisible = false">取消</el-button>
-      <el-button type="primary" @click="handleConfirm">确定</el-button>
+      <el-button type="primary" :loading="saving" @click="handleSubmit">确定</el-button>
     </div>
   </el-dialog>
 </template>
@@ -86,35 +83,32 @@ export default {
   name: 'ClassSemesterDetailDialog',
   props: {
     visible: { type: Boolean, default: false },
-    /** 选中的班次信息 */
-    classInfo: { type: Object, default: null },
-    /** 学期名称 */
-    semesterName: { type: String, default: '2017年秋季学期' }
+    /** 编辑模式：edit / add */
+    mode: { type: String, default: 'add' },
+    /** 编辑时的班次学期记录 */
+    semester: { type: Object, default: null },
+    /** 新增时选中的班次（学员队）信息 */
+    teamInfo: { type: Object, default: null },
+    /** 年度下拉 */
+    yearOptions: { type: Array, default: () => [] },
+    /** 教学任务下拉（{ bh, rwmc }） */
+    taskOptions: { type: Array, default: () => [] }
   },
   data() {
     return {
-      form: {
-        bc: '班次0633',       // 班次
-        xkzy: '专业209',      // 专业
-        nj: '2017级',         // 年级
-        xq: this.semesterName, // 学期
-        ghn: '规划内',        // 规划内
-        kxrq: '2017-09-03',   // 开学日期
-        jsrq: '2018-02-11',   // 结束日期
-        zs: 24,               // 学期周数
-        jxrw: '',             // 教学任务
-        xqcc: '第1学期',      // 学期层次
-        kfpy: true,           // 开放教员排课
-        zxjs: '10-03&10-03(50)', // 查找教室
-        jxl: '5号楼',          // 教学楼
-        zyjs: '作战实验中心学术报告厅', // 专用教室
-        bz: ''                // 备注
-      },
-      taskOptions: ['2017年下半年教学任务', '研究生2017下半年教学任务'],
-      levelOptions: ['第1学期', '第2学期', '第3学期'],
-      roomOptions: ['10-03&10-03(50)', '10-04&10-04(40)', '9-01'],
-      buildingOptions: ['5号楼', '6号楼', '综合楼'],
-      zyjsOptions: ['作战实验中心学术报告厅', '综合教学楼101', '学术报告厅']
+      form: this.createEmptyForm(),
+      levelOptions: [
+        { label: '第1学期', value: 1 },
+        { label: '第2学期', value: 2 },
+        { label: '第3学期', value: 3 }
+      ],
+      saving: false,
+      rules: {
+        nd: [{ required: true, message: '请选择年度', trigger: 'change' }],
+        xqdc: [{ required: true, message: '请选择学期第次', trigger: 'change' }],
+        kxrq: [{ required: true, message: '请选择开学日期', trigger: 'change' }],
+        jsrq: [{ required: true, message: '请选择结束日期', trigger: 'change' }]
+      }
     }
   },
   computed: {
@@ -125,22 +119,93 @@ export default {
       set(val) {
         this.$emit('update:visible', val)
       }
+    },
+    isEdit() {
+      return this.mode === 'edit'
     }
   },
   watch: {
-    // 每次打开时按传入的班次信息初始化表单
     visible(val) {
       if (!val) return
-      this.form.bc = (this.classInfo && this.classInfo.bc) || '班次0633'
-      this.form.xkzy = (this.classInfo && this.classInfo.xkzy) || '专业209'
-      this.form.nj = (this.classInfo && this.classInfo.nj) || '2017级'
-      this.form.xq = this.semesterName
+      this.initForm()
+      this.$nextTick(() => {
+        if (this.$refs.formRef) this.$refs.formRef.clearValidate()
+      })
     }
   },
   methods: {
-    handleConfirm() {
-      this.$emit('confirm')
-      this.dialogVisible = false
+    createEmptyForm() {
+      return {
+        bh: '',
+        xydbh: '',
+        xydmc: '',
+        nd: undefined,
+        xqdc: undefined,
+        kxrq: '',
+        jsrq: '',
+        zyjsbh: '',
+        jxrwbh: undefined,
+        kfjypk: false,
+        bz: ''
+      }
+    },
+    /** 打开时按编辑/新增模式初始化表单 */
+    initForm() {
+      const form = this.createEmptyForm()
+      if (this.isEdit && this.semester) {
+        const row = this.semester
+        form.bh = row.bh || ''
+        form.xydbh = row.xydbh || ''
+        form.xydmc = row.xydmc || ''
+        form.nd = row.nd
+        form.xqdc = row.xqdc
+        form.kxrq = row.kxrq ? String(row.kxrq).slice(0, 10) : ''
+        form.jsrq = row.jsrq ? String(row.jsrq).slice(0, 10) : ''
+        form.zyjsbh = row.zyjsbh || ''
+        form.jxrwbh = row.jxrwbh || undefined
+        form.kfjypk = Number(row.kfjypk) === 1
+        form.bz = row.bz || ''
+      } else if (this.teamInfo) {
+        form.xydbh = this.teamInfo.xydbh || ''
+        form.xydmc = this.teamInfo.xydmc || ''
+        // 默认取当前选中年度的第一学期，日期可后续修改
+        form.nd = this.yearOptions[0]
+        form.xqdc = 1
+      }
+      this.form = form
+    },
+    /** 移除空值（保留 0 等有效值） */
+    cleanPayload(obj) {
+      const payload = {}
+      Object.keys(obj).forEach(key => {
+        const value = obj[key]
+        if (value !== '' && value !== null && value !== undefined) {
+          payload[key] = value
+        }
+      })
+      return payload
+    },
+    handleSubmit() {
+      this.$refs.formRef.validate(valid => {
+        if (!valid) return
+        if (!this.form.xydbh) {
+          this.$message.warning('缺少班次编号，无法保存')
+          return
+        }
+        const payload = this.cleanPayload({
+          bh: this.form.bh,
+          xydbh: this.form.xydbh,
+          nd: this.form.nd,
+          xqdc: this.form.xqdc,
+          kxrq: this.form.kxrq,
+          jsrq: this.form.jsrq,
+          zyjsbh: this.form.zyjsbh,
+          jxrwbh: this.form.jxrwbh,
+          kfjypk: this.form.kfjypk ? 1 : 0,
+          bz: this.form.bz
+        })
+        this.$emit('submit', payload)
+      })
     }
   }
 }
@@ -153,22 +218,6 @@ export default {
     ::v-deep .el-input__inner[readonly] {
       background-color: #f5f7fa;
     }
-
-    .semester-field {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      width: 100%;
-
-      .el-input:first-child {
-        flex: 1;
-      }
-
-      .plan-input {
-        flex-shrink: 0;
-        width: 120px;
-      }
-    }
   }
 }
 </style>