分组教学任务

frontend/src/api/teachBusiness/teachingTask.js

@@ -0,0 +1,114 @@
+import request from '@/utils/request'
+
+// 教学任务管理（TeachingTaskController /teachingTask）
+// 接口依据：TeachingTaskController（前端 baseURL 为 /api，此处不重复 /api 前缀）
+// 实体：JXRW（bh 编号[IdType.INPUT 必填]、rwmc 任务名称、nd 年度、zt 状态、
+//        fbsj 发布时间、cjsj 创建时间、jssj 结束时间、jcxqscsj 教材需求生成时间）
+
+/**
+ * 分页查询教学任务列表
+ * GET /teachingTask/list
+ * 查询参数（JXRW）：rwmc 任务名称（模糊）、nd 年度（等值）、zt 状态（等值）、
+ *           pageNum、pageSize
+ * 返回：PageResult<JXRW>（records/total）
+ */
+export function listTeachingTask(params) {
+  return request({
+    url: '/teachingTask/list',
+    method: 'get',
+    params
+  })
+}
+
+/**
+ * 查询所有有效教学任务（DEL_FLAG = 0）
+ * GET /teachingTask/all
+ * 返回：List<JXRW>
+ */
+export function listAllTeachingTask() {
+  return request({
+    url: '/teachingTask/all',
+    method: 'get'
+  })
+}
+
+/**
+ * 根据编号查询教学任务
+ * GET /teachingTask/get?bh=
+ * @param bh 编号
+ * 返回：JXRW
+ */
+export function getTeachingTask(bh) {
+  return request({
+    url: '/teachingTask/get',
+    method: 'get',
+    params: { bh }
+  })
+}
+
+/**
+ * 新增教学任务
+ * POST /teachingTask/add
+ * 请求体（JXRW）：bh 编号（必填，IdType.INPUT 无自动生成）、rwmc 任务名称（必填）、
+ *           nd 年度（必填）、zt 状态（选填）
+ */
+export function addTeachingTask(data) {
+  return request({
+    url: '/teachingTask/add',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 更新教学任务
+ * POST /teachingTask/update
+ * 请求体（JXRW）：bh 编号（必填）、rwmc、nd、zt
+ */
+export function updateTeachingTask(data) {
+  return request({
+    url: '/teachingTask/update',
+    method: 'post',
+    data
+  })
+}
+
+/**
+ * 删除教学任务
+ * POST /teachingTask/delete?bh=
+ * @param bh 编号
+ */
+export function deleteTeachingTask(bh) {
+  return request({
+    url: '/teachingTask/delete',
+    method: 'post',
+    params: { bh }
+  })
+}
+
+/**
+ * 批量删除教学任务
+ * POST /teachingTask/batchDelete
+ * 请求体：List<String>（编号数组）
+ */
+export function batchDeleteTeachingTask(bhList) {
+  return request({
+    url: '/teachingTask/batchDelete',
+    method: 'post',
+    data: bhList
+  })
+}
+
+/**
+ * 发布教学任务及关联教研室任务书
+ * POST /teachingTask/batchPublish?bh=
+ * @param bh 教学任务编号
+ * 返回：更新数量
+ */
+export function publishTeachingTask(bh) {
+  return request({
+    url: '/teachingTask/batchPublish',
+    method: 'post',
+    params: { bh }
+  })
+}

frontend/src/views/teachBusiness/teachingTask/index.vue

@@ -1,282 +1,336 @@
 <template>
   <div class="app-container teaching-task-page">
     <!-- 页面标题 -->
-    <div class="page-title">{{ pageTitle }}</div>
+    <div class="page-title">分组课列表</div>
 
-    <!-- 查询条件 -->
+    <!-- ==================== 1. 查询条件区域 ==================== -->
     <el-card shadow="never" class="search-card">
-      <el-form :model="searchForm" label-width="110px" class="search-form">
+      <el-form :model="searchForm" label-width="80px" class="search-form">
-        <el-row :gutter="32">
+        <el-row :gutter="24">
-          <!-- 左栏 -->
+          <el-col :xs="24" :md="8">
-          <el-col :xs="24" :md="12">
+            <el-form-item label="任务名称">
-            <el-form-item label="授课教员">
+              <el-input v-model="searchForm.rwmc" placeholder="请输入任务名称" clearable @keyup.enter.native="handleQuery" />
-              <el-input v-model="searchForm.skjy" placeholder="请输入授课教员" clearable />
-            </el-form-item>
-            <el-form-item label="可选班次年级">
-              <el-input v-model="searchForm.kxbcnj" placeholder="请输入可选班次年级" clearable />
-            </el-form-item>
-            <el-form-item>
-              <template slot="label">
-                <el-checkbox v-model="searchForm.fzkztEnabled">分组课状态</el-checkbox>
-              </template>
-              <el-select v-model="searchForm.fzkzt" placeholder="请选择分组课状态" class="w-full"
-                :disabled="!searchForm.fzkztEnabled">
-                <el-option v-for="item in groupStatusOptions" :key="item" :label="item" :value="item" />
-              </el-select>
             </el-form-item>
           </el-col>
-
+          <el-col :xs="24" :md="8">
-          <!-- 右栏 -->
+            <el-form-item label="年度">
-          <el-col :xs="24" :md="12">
+              <el-input-number v-model="searchForm.nd" :controls="false" placeholder="请输入年度" clearable class="w-full" />
-            <el-form-item label="课程科目名称">
-              <el-input v-model="searchForm.kckmmc" placeholder="请输入课程科目名称" clearable />
             </el-form-item>
-            <el-form-item label="分组班名称">
+          </el-col>
-              <el-input v-model="searchForm.fzbmc" placeholder="请输入分组班名称" clearable />
+          <el-col :xs="24" :md="8">
-            </el-form-item>
+            <el-form-item label="状态">
-            <el-form-item>
+              <el-input v-model="searchForm.zt" placeholder="请输入状态" clearable @keyup.enter.native="handleQuery" />
-              <template slot="label">
-                <el-checkbox v-model="searchForm.pxccEnabled">培训层次</el-checkbox>
-              </template>
-              <el-select v-model="searchForm.pxcc" placeholder="请选择培训层次" class="w-full"
-                :disabled="!searchForm.pxccEnabled">
-                <el-option v-for="item in trainLevelOptions" :key="item" :label="item" :value="item" />
-              </el-select>
             </el-form-item>
           </el-col>
         </el-row>
-
-        <div class="search-tip">
-          注意：勾选"选择框"表示启用该项对应的查询条件；文本输入框非空白表示启用对应的查询条件。
-        </div>
         <div class="search-actions">
-          <el-button class="gray-btn" @click="handleSearch">查询</el-button>
+          <el-button class="gray-btn" @click="handleQuery">查询</el-button>
         </div>
       </el-form>
     </el-card>
 
-    <!-- 下载按钮 -->
+    <!-- ==================== 2. 操作区域 ==================== -->
-    <div class="toolbar-right">
-      <el-button type="primary" @click="handleDownloadGroupCourseList">下载分组班列表</el-button>
-      <el-button type="primary" @click="handleDownloadWord">下载分组班学员名单Word</el-button>
-      <el-button type="primary" @click="handleDownloadExcel">下载分组班学员名单Excel</el-button>
-    </div>
-
-    <!-- 批量操作 -->
     <el-card shadow="never" class="action-card">
-      <div class="action-groups">
+      <div class="action-left">
-        <div class="action-group">
+        <el-button type="primary" @click="handleAdd">新增教学任务</el-button>
-          <el-button type="primary" plain @click="handleNewGroupCourse">新建分组课</el-button>
+        <el-button type="danger" plain :disabled="selectedRows.length === 0" @click="handleBatchDelete">批量删除</el-button>
-          <el-button type="primary" plain @click="handleBatchOpen">所选班早开放报名</el-button>
+        <el-button type="primary" plain @click="handleDownloadGroupCourseList">下载分组班列表</el-button>
-          <el-button type="primary" plain @click="handleBatchCancelOpen">所选班早取消开放报名</el-button>
+        <el-button type="primary" plain @click="handleDownloadWord">下载分组班学员名单Word</el-button>
-        </div>
+        <el-button type="primary" plain @click="handleDownloadExcel">下载分组班学员名单Excel</el-button>
-        <div class="action-group">
+        <el-button type="primary" plain @click="handleDownloadTemplate">【分组课数据文件模板】下载</el-button>
-          <el-button type="primary" plain @click="handleBatchStop">批量停止报名</el-button>
-          <el-button type="primary" plain @click="handleBatchReverseRange">所选班早根据学员反向确定班次范围</el-button>
-        </div>
       </div>
     </el-card>
 
-    <!-- 导入数据 -->
+    <!-- ==================== 3. 数据表格 ==================== -->
-    <el-card shadow="never" class="import-card">
-      <div class="import-toolbar">
-        <el-button type="primary" @click="handleDownloadTemplate">【分组课数据文件模板】下载</el-button>
-        <div class="file-input">
-          <input ref="fileInput" type="file" accept=".xls,.xlsx" style="display: none" @change="handleFileChange" />
-          <el-button type="primary" plain @click="handleChooseFile">选择文件</el-button>
-          <span class="file-name">{{ fileName }}</span>
-        </div>
-        <el-button type="primary" plain @click="handleUploadData">上传数据</el-button>
-      </div>
-    </el-card>
-
-    <!-- 数据表格 -->
     <el-card shadow="never" class="table-card">
-      <el-table v-loading="loading" :data="tableData" stripe border highlight-current-row
+      <el-table v-loading="loading" :data="tableData" border stripe highlight-current-row
         @selection-change="handleSelectionChange">
         <template slot="empty">
           <span>无数据！</span>
         </template>
         <el-table-column type="selection" width="50" align="center" />
-        <el-table-column type="index" label="序号" width="100" align="center" />
+        <el-table-column type="index" label="序号" width="80" align="center" />
-        <el-table-column prop="kc" label="课程" width="100" show-overflow-tooltip />
+        <el-table-column prop="bh" label="编号" width="140" align="center" show-overflow-tooltip />
-        <el-table-column prop="jc" label="教材" width="100" show-overflow-tooltip />
+        <el-table-column prop="rwmc" label="任务名称" min-width="160" show-overflow-tooltip />
-        <el-table-column prop="ssjy" label="实施教员" width="150" align="center" />
+        <el-table-column prop="nd" label="年度" width="90" align="center" />
-        <el-table-column prop="jxcd" label="教学场地" width="150" align="center" />
+        <el-table-column prop="zt" label="状态" width="90" align="center" show-overflow-tooltip />
-        <el-table-column align="center">
+        <el-table-column prop="fbsj" label="发布时间" width="150" align="center" :formatter="formatDateTime" />
-          <template slot="header">
+        <el-table-column prop="cjsj" label="创建时间" width="150" align="center" :formatter="formatDateTime" />
-            <el-checkbox v-model="showOptionalClasses">显示可选队别班次</el-checkbox>
+        <el-table-column label="操作" width="180" align="center" fixed="right">
-          </template>
-        </el-table-column>
-        <el-table-column label="计划学时/运行学时/学分" width="130" align="center">
-          <template slot="header">
-            <div class="triple-header">
-              <span>计划学时</span>
-              <span>运行学时</span>
-              <span>学分</span>
-            </div>
-          </template>
           <template slot-scope="{ row }">
-            <div class="triple-cell">
+            <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
-              <span>{{ row.jhxs }}</span>
+            <el-button type="text" size="small" @click="handlePublish(row)">发布</el-button>
-              <span>{{ row.zxs }}</span>
+            <el-button type="text" size="small" class="text-danger" @click="handleDelete(row)">删除</el-button>
-              <span>{{ row.xf }}</span>
-            </div>
           </template>
         </el-table-column>
-        <el-table-column prop="kkjkrq" label="开课结课日期" width="110" align="center" :formatter="formatDate" />
-        <el-table-column prop="bmrq" label="报名日期" width="120" align="center" :formatter="formatDate" />
-        <el-table-column prop="jhrs" label="计划人数" width="90" align="center" />
-        <el-table-column prop="yqsm" label="要求说明" width="150" show-overflow-tooltip />
       </el-table>
+
+      <el-pagination
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :total="total"
+        :page-sizes="[10, 20, 50, 100]"
+        layout="total, sizes, prev, pager, next, jumper"
+        class="pagination"
+        @current-change="handlePageChange"
+        @size-change="handleSizeChange"
+      />
     </el-card>
+
+    <!-- ==================== 4. 新增/修改对话框 ==================== -->
+    <el-dialog
+      :visible="dialogVisible"
+      :title="dialogTitle"
+      width="520px"
+      :close-on-click-modal="false"
+      @update:visible="val => dialogVisible = val"
+    >
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="add-form">
+        <el-form-item label="编号" prop="bh">
+          <el-input v-model="form.bh" placeholder="请输入编号" :disabled="isEdit" clearable />
+        </el-form-item>
+        <el-form-item label="任务名称" prop="rwmc">
+          <el-input v-model="form.rwmc" placeholder="请输入任务名称" clearable />
+        </el-form-item>
+        <el-form-item label="年度" prop="nd">
+          <el-input-number v-model="form.nd" :min="0" :controls="false" placeholder="请输入年度" class="w-full" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-input v-model="form.zt" placeholder="请输入状态（选填）" clearable />
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" :loading="saving" @click="handleSubmit">确定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import {
+  listTeachingTask,
+  addTeachingTask,
+  updateTeachingTask,
+  deleteTeachingTask,
+  batchDeleteTeachingTask,
+  publishTeachingTask
+} from '@/api/teachBusiness/teachingTask'
+
 export default {
   name: 'TeachingTask',
   data() {
     return {
       pageTitle: '分组课列表',
 
-      // ==================== 查询表单 ====================
+      // ==================== 1. 查询条件 ====================
       searchForm: {
-        skjy: '',
+        rwmc: '',
-        kckmmc: '',
+        nd: undefined,
-        kxbcnj: '',
+        zt: ''
-        fzbmc: '',
-        fzkzt: '拟制',
-        fzkztEnabled: false,
-        pxcc: '无',
-        pxccEnabled: false
       },
-      groupStatusOptions: ['拟制', '已发布', '已结课'],
-      trainLevelOptions: ['无', '初级', '中级', '高级'],
 
-      // ==================== 批量操作 ====================
+      // ==================== 2. 批量选择 ====================
       selectedRows: [],
 
-      // ==================== 表格数据 ====================
+      // ==================== 3. 表格数据 ====================
       loading: false,
-      showOptionalClasses: false,
+      tableData: [],
-      /** 模拟列表数据（后端接口未提供） */
+      pageNum: 1,
-      tableData: [
+      pageSize: 10,
-        { xh: 1, kc: '高等数学', jc: '高等数学(上册)', ssjy: '张三', jxcd: '1-301', jhxs: 48, zxs: 46, xf: 3, kkjkrq: '2017-09-03', bmrq: '2017-08-20', jhrs: 40, yqsm: '按教学计划执行' },
+      total: 0,
-        { xh: 2, kc: '军事英语', jc: '军事英语教程', ssjy: '李四', jxcd: '2-101', jhxs: 32, zxs: 30, xf: 2, kkjkrq: '2017-09-03', bmrq: '2017-08-22', jhrs: 36, yqsm: '含听力训练' },
-        { xh: 3, kc: '导弹发射原理', jc: '导弹发射原理', ssjy: '王五', jxcd: '3-205', jhxs: 40, zxs: 40, xf: 2.5, kkjkrq: '2017-09-10', bmrq: '2017-08-25', jhrs: 42, yqsm: '实验课随堂进行' },
-        { xh: 4, kc: '通信原理', jc: '通信原理', ssjy: '赵六', jxcd: '5-102', jhxs: 48, zxs: 44, xf: 3, kkjkrq: '2017-09-03', bmrq: '2017-08-28', jhrs: 38, yqsm: '' },
-        { xh: 5, kc: '联合作战指挥', jc: '联合作战指挥', ssjy: '孙七', jxcd: '学术报告厅', jhxs: 40, zxs: 40, xf: 2.5, kkjkrq: '2017-09-17', bmrq: '2017-09-01', jhrs: 45, yqsm: '理论授课+想定作业' }
-      ],
 
-      // ==================== 导入 ====================
+      // ==================== 4. 新增/修改表单 ====================
-      selectedFile: null
+      dialogVisible: false,
-    }
+      dialogTitle: '新增教学任务',
-  },
+      isEdit: false,
-  computed: {
+      saving: false,
-    fileName() {
+      form: this.createEmptyForm(),
-      return (this.selectedFile && this.selectedFile.name) || '未选择任何文件'
+      rules: {
+        bh: [{ required: true, message: '请输入编号', trigger: 'blur' }],
+        rwmc: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
+        nd: [{ required: true, message: '请输入年度', trigger: 'blur' }]
+      }
     }
   },
   mounted() {
     this.fetchList()
   },
   methods: {
-    /** 表格日期格式化 */
+    createEmptyForm() {
-    formatDate(row, column, cellValue) {
+      return {
-      return cellValue ? String(cellValue).substring(0, 10) : ''
+        bh: '',
+        rwmc: '',
+        nd: undefined,
+        zt: ''
+      }
+    },
+
+    /** 后端 LocalDateTime 规范化显示：去掉 T，截断到分钟 */
+    formatDateTime(row, column, cellValue) {
+      if (cellValue === null || cellValue === undefined || cellValue === '') return '-'
+      return String(cellValue).replace('T', ' ').slice(0, 16)
     },
 
     // ==================== 列表加载 ====================
-    // TODO: 后端接口未提供，暂用模拟数据；接口就绪后替换为真实查询接口
     fetchList() {
       this.loading = true
-      setTimeout(() => {
+      const params = { pageNum: this.pageNum, pageSize: this.pageSize }
+      if (this.searchForm.rwmc && this.searchForm.rwmc.trim()) params.rwmc = this.searchForm.rwmc.trim()
+      if (this.searchForm.nd !== undefined && this.searchForm.nd !== null && this.searchForm.nd !== '') {
+        params.nd = this.searchForm.nd
+      }
+      if (this.searchForm.zt && this.searchForm.zt.trim()) params.zt = this.searchForm.zt.trim()
+      listTeachingTask(params).then(res => {
+        const data = (res && res.data) || {}
+        this.tableData = data.records || []
+        this.total = data.total || 0
         this.loading = false
-      }, 200)
+      }).catch(() => {
+        this.tableData = []
+        this.total = 0
+        this.loading = false
+      })
     },
 
-    // ==================== 查询 ====================
     handleSearch() {
-      this.$message.success('查询分组课列表（前端模拟）')
+      this.handleQuery()
     },
 
-    // ==================== 批量操作 ====================
+    handleQuery() {
+      this.pageNum = 1
+      this.fetchList()
+    },
+
+    handlePageChange(page) {
+      this.pageNum = page
+      this.fetchList()
+    },
+
+    handleSizeChange(size) {
+      this.pageSize = size
+      this.pageNum = 1
+      this.fetchList()
+    },
+
+    // ==================== 选择 ====================
     handleSelectionChange(rows) {
       this.selectedRows = rows
     },
 
-    handleNewGroupCourse() {
+    // ==================== 新增 / 修改 ====================
-      this.$message.success('新建分组课（前端模拟）')
+    handleAdd() {
+      this.form = this.createEmptyForm()
+      this.isEdit = false
+      this.dialogTitle = '新增教学任务'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.formRef && this.$refs.formRef.clearValidate()
+      })
     },
 
-    handleBatchOpen() {
+    handleEdit(row) {
+      this.form = {
+        bh: row.bh || '',
+        rwmc: row.rwmc || '',
+        nd: row.nd,
+        zt: row.zt || ''
+      }
+      this.isEdit = true
+      this.dialogTitle = '修改教学任务'
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        this.$refs.formRef && this.$refs.formRef.clearValidate()
+      })
+    },
+
+    handleSubmit() {
+      this.$refs.formRef.validate(valid => {
+        if (!valid) {
+          this.$message.warning('请完善必填项后再提交')
+          return
+        }
+        const payload = this.buildPayload()
+        this.saving = true
+        const req = this.isEdit ? updateTeachingTask(payload) : addTeachingTask(payload)
+        req.then(() => {
+          this.$message.success(this.isEdit ? '修改成功' : '新增成功')
+          this.dialogVisible = false
+          this.fetchList()
+        }).catch(() => {}).finally(() => {
+          this.saving = false
+        })
+      })
+    },
+
+    /** 构建请求体，仅含实体非空字段（时间字段后端自动维护，不传） */
+    buildPayload() {
+      const f = this.form
+      const payload = {}
+      if (f.bh && String(f.bh).trim()) payload.bh = String(f.bh).trim()
+      if (f.rwmc && String(f.rwmc).trim()) payload.rwmc = String(f.rwmc).trim()
+      if (f.nd !== undefined && f.nd !== null && f.nd !== '') payload.nd = f.nd
+      if (f.zt && String(f.zt).trim()) payload.zt = String(f.zt).trim()
+      return payload
+    },
+
+    // ==================== 删除 ====================
+    handleDelete(row) {
+      this.$confirm(`确定要删除「${row.rwmc || row.bh || '该记录'}」吗？`, '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => deleteTeachingTask(row.bh)).then(() => {
+        this.$message.success('删除成功')
+        this.fetchList()
+      }).catch(() => {})
+    },
+
+    handleBatchDelete() {
       if (this.selectedRows.length === 0) {
         this.$message.warning('请先选择数据')
         return
       }
-      this.$message.success('所选批量开放报名（前端模拟）')
+      this.$confirm(`确定要删除选中的 ${this.selectedRows.length} 条记录吗？`, '系统提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const bhList = this.selectedRows.map(r => r.bh)
+        return batchDeleteTeachingTask(bhList)
+      }).then(() => {
+        this.$message.success('删除成功')
+        this.fetchList()
+      }).catch(() => {})
     },
 
-    handleBatchCancelOpen() {
+    // ==================== 发布 ====================
-      if (this.selectedRows.length === 0) {
+    handlePublish(row) {
-        this.$message.warning('请先选择数据')
+      this.$confirm(`确定要发布教学任务「${row.rwmc || row.bh || '该记录'}」吗？发布后将同步更新关联教研室任务书状态。`, '系统提示', {
-        return
+        confirmButtonText: '确定',
-      }
+        cancelButtonText: '取消',
-      this.$message.success('所选批量取消开放报名（前端模拟）')
+        type: 'warning'
+      }).then(() => publishTeachingTask(row.bh)).then(() => {
+        this.$message.success('发布成功')
+        this.fetchList()
+      }).catch(() => {})
     },
 
-    handleBatchStop() {
+    // ==================== 无后端接口功能 ====================
-      if (this.selectedRows.length === 0) {
-        this.$message.warning('请先选择数据')
-        return
-      }
-      this.$message.success('批量停止报名（前端模拟）')
-    },
-
-    handleBatchReverseRange() {
-      if (this.selectedRows.length === 0) {
-        this.$message.warning('请先选择数据')
-        return
-      }
-      this.$message.success('所选批量根据学员反向确定班次范围（前端模拟）')
-    },
-
-    // ==================== 下载按钮 ====================
     handleDownloadGroupCourseList() {
-      this.$message.success('下载分组课列表（前端模拟）')
+      this.$message.info('后端暂未提供该接口')
     },
 
     handleDownloadWord() {
-      this.$message.success('下载分组学员名单Word（前端模拟）')
+      this.$message.info('后端暂未提供该接口')
     },
 
     handleDownloadExcel() {
-      this.$message.success('下载分组学员名单Excel（前端模拟）')
+      this.$message.info('后端暂未提供该接口')
-    },
-
-    // ==================== 导入 ====================
-    handleChooseFile() {
-      this.$refs.fileInput && this.$refs.fileInput.click()
-    },
-
-    handleFileChange(e) {
-      const input = e.target
-      if (input.files && input.files.length > 0) {
-        this.selectedFile = input.files[0]
-      }
     },
 
     handleDownloadTemplate() {
-      this.$message.success('下载分组课数据文件模板（前端模拟）')
+      this.$message.info('后端暂未提供该接口')
-    },
-
-    handleUploadData() {
-      if (!this.selectedFile) {
-        this.$message.warning('请先选择文件')
-        return
-      }
-      this.$message.success('上传数据（前端模拟）')
     }
   }
 }
@@ -287,99 +341,56 @@ export default {
   padding: 20px;
 }
 
-.page-title {
+.teaching-task-page {
-  text-align: center;
+  .page-title {
-  font-size: 20px;
+    text-align: center;
-  font-weight: 600;
+    font-size: 20px;
-  color: #303133;
+    font-weight: 600;
-  margin-bottom: 20px;
+    color: #303133;
-}
+    margin-bottom: 20px;
-
-.search-card {
-  margin-bottom: 16px;
-
-  .search-form {
-    .w-full {
-      width: 100%;
-    }
   }
 
-  .search-tip {
+  // ==================== 1. 查询条件区域 ====================
-    font-size: 12px;
+  .search-card {
-    color: #f56c6c;
+    margin-bottom: 16px;
-    margin-top: 8px;
-    margin-bottom: 8px;
-  }
 
-  .search-actions {
+    .search-form {
-    display: flex;
+      .w-full {
-    justify-content: flex-end;
+        width: 100%;
-    padding-top: 12px;
+      }
-    border-top: 1px solid #ebeef5;
-  }
-}
 
-.toolbar-right {
+      .search-actions {
-  display: flex;
+        display: flex;
-  justify-content: flex-end;
+        justify-content: flex-end;
-  gap: 12px;
+        padding-top: 12px;
-  margin-bottom: 16px;
+        border-top: 1px solid #ebeef5;
-}
-
-.action-card {
-  margin-bottom: 16px;
-
-  .action-groups {
-    display: flex;
-    justify-content: flex-start;
-    gap: 12px;
-    flex-wrap: wrap;
-
-    .action-group {
-      display: flex;
-      flex-direction: row;
-      gap: 12px;
-
-      .el-button {
-        margin: 0;
       }
     }
   }
-}
 
-.import-card {
+  // ==================== 2. 操作区域 ====================
-  margin-bottom: 16px;
+  .action-card {
+    margin-bottom: 16px;
 
-  .import-toolbar {
+    .action-left {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    flex-wrap: wrap;
-
-    .file-input {
       display: flex;
       align-items: center;
-      gap: 8px;
+      flex-wrap: wrap;
-
+      gap: 12px;
-      .file-name {
-        font-size: 14px;
-        color: #606266;
-        min-width: 120px;
-      }
     }
   }
-}
 
-.table-card {
+  // ==================== 3. 数据表格 ====================
-  ::v-deep(.el-table) {
+  .table-card {
-    width: 100%;
+    .pagination {
-  }
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 12px;
+    }
 
-  .triple-header,
+    .text-danger {
-  .triple-cell {
+      color: #f56c6c;
-    display: flex;
+    }
-    flex-direction: column;
-    line-height: 1.4;
   }
 }
 
@@ -399,4 +410,4 @@ export default {
     color: #333;
   }
 }
-</style>
+</style>