页面接口对接，以及样式调整

frontend/src/views/teachOffice/elective/index.vue

@@ -88,17 +88,17 @@
 
     <!-- ==================== 6. 数据表格区域 ==================== -->
     <div class="section-card table-card">
-      <el-table :data="pagedData" border stripe class="main-table" @selection-change="handleSelectionChange">
+      <el-table v-loading="loading" :data="tableData" border stripe class="main-table" @selection-change="handleSelectionChange">
         <template slot="empty">
           <span>无数据！</span>
         </template>
         <el-table-column type="selection" width="40" align="center" />
         <el-table-column type="index" label="序号" width="60" align="center" :index="tableIndex" />
-        <el-table-column prop="course" label="课程" min-width="110" show-overflow-tooltip />
-        <el-table-column prop="textbook" label="教材" min-width="120" show-overflow-tooltip />
-        <el-table-column prop="teacher" label="实施教员" width="90" align="center" />
-        <el-table-column prop="place" label="教学场地" width="100" show-overflow-tooltip />
-        <el-table-column prop="teamClass" label="显示可选队别班次" min-width="150" align="center" show-overflow-tooltip />
+        <el-table-column prop="kmc" label="课程" min-width="110" show-overflow-tooltip />
+        <el-table-column prop="jcmc" label="教材" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="jyxm" label="实施教员" width="90" align="center" />
+        <el-table-column prop="jsmc" label="教学场地" width="100" show-overflow-tooltip />
+        <el-table-column prop="kxdlbc" label="显示可选队别班次" min-width="150" align="center" show-overflow-tooltip />
         <el-table-column label="计划学时/运行学时/学分" width="130" align="center">
           <template slot="header">
             <div class="triple-header">
@@ -109,31 +109,29 @@
           </template>
           <template slot-scope="{ row }">
             <div class="triple-cell">
-              <span>{{ row.planHours }}</span>
-              <span>{{ row.runHours }}</span>
-              <span>{{ row.credit }}</span>
+              <span>{{ row.jhyxxsxf }}</span>
             </div>
           </template>
         </el-table-column>
         <el-table-column label="开课结课日期" min-width="150" align="center">
           <template slot-scope="{ row }">
-            {{ row.startDate }} ~ {{ row.endDate }}
+            {{ row.kkjkrq }}
           </template>
         </el-table-column>
         <el-table-column label="报名日期" min-width="140" align="center">
           <template slot-scope="{ row }">
-            {{ row.signupStart }} ~ {{ row.signupEnd }}
+            {{ row.bmrq }}
           </template>
         </el-table-column>
-        <el-table-column prop="planCount" label="计划人数" width="90" align="center" />
-        <el-table-column prop="requirement" label="要求说明" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="jhrs" label="计划人数" width="90" align="center" />
+        <el-table-column prop="yqsm" label="要求说明" min-width="120" show-overflow-tooltip />
       </el-table>
 
       <div class="pagination-wrap">
         <el-pagination
           background
           layout="total, prev, pager, next, jumper"
-          :total="tableData.length"
+          :total="total"
           :page-size="pageSize"
           :current-page="currentPage"
           @current-change="handlePageChange"
@@ -183,6 +181,17 @@
 </template>
 
 <script>
+import {
+  listElective,
+  batchOpenElective,
+  batchCancelOpenElective,
+  batchStopElective,
+  exportElectiveList,
+  exportElectiveStudentsExcel,
+  exportElectiveStudentsWord
+} from '@/api/teachOffice/elective'
+import { saveAs } from 'file-saver'
+
 export default {
   name: 'Elective',
   data() {
@@ -203,14 +212,10 @@ export default {
         pxcc: '无'
       },
 
-      // ==================== 数据表格 mock ====================
-      tableData: [
-        { id: 1, course: '军事英语', textbook: '军事英语教程', teacher: '张三', place: '教室101', teamClass: '2025级学员1-5队', planHours: 32, runHours: 30, credit: 2, startDate: '2026-09-01', endDate: '2027-01-15', signupStart: '2026-08-20', signupEnd: '2026-09-01', planCount: 60, requirement: '限选50人' },
-        { id: 2, course: '摄影技术', textbook: '摄影基础', teacher: '李四', place: '教室102', teamClass: '2024级学员1-4队', planHours: 24, runHours: 24, credit: 1.5, startDate: '2026-09-01', endDate: '2027-01-15', signupStart: '2026-08-20', signupEnd: '2026-09-01', planCount: 40, requirement: '自备相机' },
-        { id: 3, course: '网球', textbook: '网球教程', teacher: '王五', place: '操场', teamClass: '2025级学员2-6队', planHours: 24, runHours: 22, credit: 1.5, startDate: '2026-09-01', endDate: '2027-01-15', signupStart: '2026-08-21', signupEnd: '2026-09-02', planCount: 30, requirement: '需自备球拍' },
-        { id: 4, course: '书法鉴赏', textbook: '中国书法', teacher: '赵六', place: '教室103', teamClass: '2026级学员1-3队', planHours: 16, runHours: 16, credit: 1, startDate: '2026-09-08', endDate: '2026-12-30', signupStart: '2026-08-25', signupEnd: '2026-09-05', planCount: 35, requirement: '' },
-        { id: 5, course: '无人机操作', textbook: '无人机原理', teacher: '孙七', place: '室外训练场', teamClass: '2025级学员1-6队', planHours: 32, runHours: 28, credit: 2, startDate: '2026-09-08', endDate: '2027-01-10', signupStart: '2026-08-26', signupEnd: '2026-09-06', planCount: 25, requirement: '需通过体检' }
-      ],
+      // ==================== 数据表格 ====================
+      tableData: [],
+      total: 0,
+      loading: false,
       selectedRows: [],
 
       // ==================== 文件上传 ====================
@@ -241,73 +246,124 @@ export default {
   computed: {
     fileName() {
       return (this.selectedFile && this.selectedFile.name) || '未选择任何文件'
-    },
-    pagedData() {
-      const start = (this.currentPage - 1) * this.pageSize
-      return this.tableData.slice(start, start + this.pageSize)
     }
   },
+  created() {
+    this.loadList()
+  },
   methods: {
+    // 组装查询过滤条件（列表与导出共用，导出不含分页参数）
+    buildFilter() {
+      const q = {}
+      if (this.searchForm.js) q.jyxm = this.searchForm.js
+      if (this.searchForm.kbcnj) q.kxbcnj = this.searchForm.kbcnj
+      if (this.searchForm.kckmmc) q.kmc = this.searchForm.kckmmc
+      if (this.searchForm.xxbmc) q.xxbmc = this.searchForm.xxbmc
+      if (this.searchForm.xxkztEnabled) q.xkzt = this.searchForm.xxkzt
+      if (this.searchForm.pxccEnabled) q.pxcc = this.searchForm.pxcc
+      return q
+    },
+
     // ==================== 查询 ====================
     handleQuery() {
-      console.log('查询条件:', JSON.parse(JSON.stringify(this.searchForm)))
-      this.$message.success('查询完成（前端模拟）')
+      this.currentPage = 1
+      this.loadList()
+    },
+    loadList() {
+      this.loading = true
+      const params = Object.assign({ pageNum: this.currentPage, pageSize: this.pageSize }, this.buildFilter())
+      listElective(params)
+        .then(res => {
+          const data = (res && res.data) || {}
+          this.tableData = data.records || []
+          this.total = data.total || 0
+        })
+        .finally(() => {
+          this.loading = false
+        })
     },
 
     // ==================== 导出 ====================
-    downloadBlob(content, filename) {
-      const blob = new Blob(['\ufeff' + content], { type: 'text/plain;charset=utf-8;' })
-      const link = document.createElement('a')
-      link.href = URL.createObjectURL(blob)
-      link.download = filename
-      link.click()
-      URL.revokeObjectURL(link.href)
-    },
     handleDownloadList() {
-      this.downloadBlob('课程,教材,实施教员,教学场地,计划人数\n', '选修班列表.txt')
-      this.$message.success('选修班列表已下载（前端模拟）')
+      exportElectiveList(this.buildFilter())
+        .then(blob => {
+          saveAs(blob, '选修班列表.xlsx')
+          this.$message.success('选修班列表已下载')
+        })
+        .catch(() => {})
     },
     handleDownloadWord() {
-      this.downloadBlob('选修班学员名单\n', '选修班学员名单Word.txt')
-      this.$message.success('选修班学员名单Word已下载（前端模拟）')
+      const bhList = this.selectedRows.map(row => row.bh)
+      if (bhList.length === 0) {
+        this.$message.warning('请先选择选修班')
+        return
+      }
+      exportElectiveStudentsWord(bhList)
+        .then(blob => {
+          saveAs(blob, '选修班学员名单.docx')
+          this.$message.success('选修班学员名单Word已下载')
+        })
+        .catch(() => {})
     },
     handleDownloadExcel() {
-      this.downloadBlob('选修班学员名单\n', '选修班学员名单Excel.txt')
-      this.$message.success('选修班学员名单Excel已下载（前端模拟）')
-    },
-    handleDownloadTemplate() {
-      this.downloadBlob('课程,教材,实施教员,教学场地,计划学时,学分,开课结课日期,报名日期,计划人数,要求说明\n', '选修课数据文件模板.txt')
-      this.$message.success('【选修课数据文件模板】已下载（前端模拟）')
+      const bhList = this.selectedRows.map(row => row.bh)
+      if (bhList.length === 0) {
+        this.$message.warning('请先选择选修班')
+        return
+      }
+      exportElectiveStudentsExcel(bhList)
+        .then(blob => {
+          saveAs(blob, '选修班学员名单.xlsx')
+          this.$message.success('选修班学员名单Excel已下载')
+        })
+        .catch(() => {})
     },
 
     // ==================== 操作按钮 ====================
     handleOpenEarly() {
-      if (this.selectedRows.length === 0) {
+      const bhList = this.selectedRows.map(row => row.bh)
+      if (bhList.length === 0) {
         this.$message.warning('请先选择选修班')
         return
       }
-      this.$message.success('所选班已早开放报名（前端模拟）')
+      batchOpenElective(bhList)
+        .then(() => {
+          this.$message.success('所选班已开放报名')
+          this.loadList()
+        })
+        .catch(() => {})
     },
     handleCancelEarly() {
-      if (this.selectedRows.length === 0) {
+      const bhList = this.selectedRows.map(row => row.bh)
+      if (bhList.length === 0) {
         this.$message.warning('请先选择选修班')
         return
       }
-      this.$message.success('所选班已早取消开放报名（前端模拟）')
+      batchCancelOpenElective(bhList)
+        .then(() => {
+          this.$message.success('所选班已取消开放报名')
+          this.loadList()
+        })
+        .catch(() => {})
     },
     handleStopSignup() {
-      if (this.selectedRows.length === 0) {
+      const bhList = this.selectedRows.map(row => row.bh)
+      if (bhList.length === 0) {
         this.$message.warning('请先选择选修班')
         return
       }
-      this.$message.success('已批量停止报名（前端模拟）')
+      batchStopElective(bhList)
+        .then(() => {
+          this.$message.success('已批量停止报名')
+          this.loadList()
+        })
+        .catch(() => {})
     },
     handleReverseRange() {
-      if (this.selectedRows.length === 0) {
-        this.$message.warning('请先选择选修班')
-        return
-      }
-      this.$message.success('已根据学员反向确定班次范围（前端模拟）')
+      this.$message.warning('后端暂未提供该接口')
+    },
+    handleDownloadTemplate() {
+      this.$message.warning('后端暂未提供该接口')
     },
 
     // ==================== 文件上传 ====================
@@ -322,8 +378,7 @@ export default {
         this.$message.warning('请先选择文件')
         return
       }
-      console.log('上传文件:', this.selectedFile.name)
-      this.$message.success(`文件「${this.selectedFile.name}」上传成功（前端模拟）`)
+      this.$message.warning('后端暂未提供该接口')
     },
 
     // ==================== 表格多选 ====================
@@ -333,8 +388,7 @@ export default {
 
     // ==================== 新建选修课弹窗 ====================
     handleOpenNew() {
-      Object.assign(this.form, { kcmc: '', js: '', jc: '', jxcd: '', jhsxs: 0, yxsxs: 0, xf: 0, jh: 0 })
-      this.dialogVisible = true
+      this.$message.warning('后端暂未提供该接口')
     },
     handleNewConfirm() {
       if (!this.$refs.formRef) return
@@ -349,6 +403,7 @@ export default {
     // ==================== 分页 ====================
     handlePageChange(page) {
       this.currentPage = page
+      this.loadList()
     },
 
     // 表格序号（跨页连续）