{"remainingRequest":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\views\\teachOffice\\taskPlan\\index.vue?vue&type=script&setup=true&lang=ts","dependencies":[{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\src\\views\\teachOffice\\taskPlan\\index.vue","mtime":1787322466963},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1787309791955},{"path":"C:\\Users\\Admin\\Desktop\\education\\frontend\\node_modules\\vue-loader\\lib\\index.js","mtime":1787309793790}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoNCmltcG9ydCB7IGNvbXB1dGVkLCBuZXh0VGljaywgcmVhY3RpdmUsIHJlZiwgd2F0Y2ggfSBmcm9tICd2dWUnDQoNCi8qKiDmlZnnoJTlrqTku7vliqHkuabooYwgKi8NCmludGVyZmFjZSBUYXNrQm9va1JvdyB7DQogIGp5czogc3RyaW5nICAgICAgICAvLyDmlZnnoJTlrqQNCiAgenQ6IHN0cmluZyAgICAgICAgIC8vIOeKtuaAgQ0KICBzYnNqOiBzdHJpbmcgICAgICAgLy8g5LiK5oql5pe26Ze0DQogIHh5ZGtjQ291bnQ6IG51bWJlciAvLyDlrablkZjpmJ/or77nqIvku7vliqHmlbANCiAgd2N6ZHNDb3VudDogbnVtYmVyIC8vIOWujOaIkOaMh+WumuaVsA0KfQ0KDQovKiog57yW6L6R5qih5byP5Lyg5YWl55qE5Lu75Yqh6KGM77yI5LuF6ZyA5Lu75Yqh5ZCN56ew77yJICovDQppbnRlcmZhY2UgRGlhbG9nUm93IHsNCiAgcndtYz86IHN0cmluZw0KfQ0KDQpjb25zdCBwcm9wcyA9IHdpdGhEZWZhdWx0cygNCiAgZGVmaW5lUHJvcHM8ew0KICAgIG1vZGVsVmFsdWU6IGJvb2xlYW4NCiAgICBzZW1lc3Rlck5hbWU/OiBzdHJpbmcNCiAgICAvKiog5by556qX5qih5byP77ya5paw5bu6IC8g57yW6L6RICovDQogICAgbW9kZT86ICdjcmVhdGUnIHwgJ2VkaXQnDQogICAgLyoqIOe8lui+keaooeW8j+mAieS4reeahOS7u+WKoeihjCAqLw0KICAgIHJvdz86IERpYWxvZ1JvdyB8IG51bGwNCiAgfT4oKSwNCiAgew0KICAgIHNlbWVzdGVyTmFtZTogJzIwMTflubTnp4vlraPlrabmnJ8nLA0KICAgIG1vZGU6ICdjcmVhdGUnLA0KICAgIHJvdzogbnVsbA0KICB9DQopDQoNCmNvbnN0IGVtaXQgPSBkZWZpbmVFbWl0czx7DQogIChlOiAndXBkYXRlOm1vZGVsVmFsdWUnLCB2YWx1ZTogYm9vbGVhbik6IHZvaWQNCiAgKGU6ICdjb25maXJtJyk6IHZvaWQNCn0+KCkNCg0KY29uc3QgZGlhbG9nVmlzaWJsZSA9IGNvbXB1dGVkKHsNCiAgZ2V0OiAoKSA9PiBwcm9wcy5tb2RlbFZhbHVlLA0KICBzZXQ6ICh2YWw6IGJvb2xlYW4pID0+IGVtaXQoJ3VwZGF0ZTptb2RlbFZhbHVlJywgdmFsKQ0KfSkNCg0KLy8gPT09PT09PT09PT09PT09PT09PT0g5Z+65pys5L+h5oGvID09PT09PT09PT09PT09PT09PT09DQpjb25zdCBmb3JtID0gcmVhY3RpdmUoew0KICB4cTogcHJvcHMuc2VtZXN0ZXJOYW1lLCAvLyDlrabmnJ/vvIjlj6ror7vvvIkNCiAgcndtYzogJycsICAgICAgICAgICAgICAgLy8g5Lu75Yqh5ZCN56ew77yI5Y+v57yW6L6R77yJDQogIGNqc2o6ICcnLCAgICAgICAgICAgICAgIC8vIOWIm+W7uuaXtumXtO+8iOWPquivu++8iQ0KICBmYnNqOiAnJywgICAgICAgICAgICAgICAvLyDlj5HluIPml7bpl7TvvIjlj6ror7vvvIkNCiAganNzajogJycgICAgICAgICAgICAgICAgLy8g57uT5p2f5pe26Ze077yI5Y+q6K+777yJDQp9KQ0KDQovLyA9PT09PT09PT09PT09PT09PT09PSBUYWIg5qCH562+6aG1ID09PT09PT09PT09PT09PT09PT09DQpjb25zdCBhY3RpdmVUYWIgPSByZWY8c3RyaW5nPigndGFza2Jvb2snKQ0KDQovLyA9PT09PT09PT09PT09PT09PT09PSDmlZnnoJTlrqTku7vliqHkuabliJfooaggPT09PT09PT09PT09PT09PT09PT0NCmNvbnN0IHRhYmxlUmVmID0gcmVmKCkNCmNvbnN0IHRhc2tCb29rUm93cyA9IHJlZjxUYXNrQm9va1Jvd1tdPihbXSkNCmNvbnN0IHNlbGVjdGVkVGFza0Jvb2tSb3dzID0gcmVmPFRhc2tCb29rUm93W10+KFtdKQ0KDQovKiog57yW6L6R5qih5byP5LiL55qE5pWZ56CU5a6k5Lu75Yqh5Lmm5pWw5o2u77yI5oyJ5oiq5Zu+6L+Y5Y6f77yJICovDQpjb25zdCBlZGl0VGFza0Jvb2tSb3dzOiBUYXNrQm9va1Jvd1tdID0gWw0KICB7IGp5czogJ+WGm+S6izgx5pWZ56CU5a6kJywgenQ6ICflj5HluIMnLCBzYnNqOiAnJywgeHlka2NDb3VudDogMzMsIHdjemRzQ291bnQ6IDAgfSwNCiAgeyBqeXM6ICfnv7vor5HlrqQnLCB6dDogJ+WPkeW4gycsIHNic2o6ICcnLCB4eWRrY0NvdW50OiAyLCB3Y3pkc0NvdW50OiAwIH0sDQogIHsganlzOiAn5Yab5LqL5YWx5ZCM5pWZ56CU5a6kJywgenQ6ICfkuIrmiqUnLCBzYnNqOiAnMjAxOS0xMi0xMyAxMDozOScsIHh5ZGtjQ291bnQ6IDk3LCB3Y3pkc0NvdW50OiA4IH0sDQogIHsganlzOiAn5L2c5oiY5L+d6Zqc5pWZ56CU5a6kJywgenQ6ICflj5HluIMnLCBzYnNqOiAnJywgeHlka2NDb3VudDogNDcsIHdjemRzQ291bnQ6IDAgfSwNCiAgeyBqeXM6ICflhpvkuosxMOaVmeeglOWupCcsIHp0OiAn5Y+R5biDJywgc2JzajogJycsIHh5ZGtjQ291bnQ6IDIxLCB3Y3pkc0NvdW50OiAwIH0sDQogIHsganlzOiAn5Yab5LqLODMnLCB6dDogJ+WPkeW4gycsIHNic2o6ICcnLCB4eWRrY0NvdW50OiAyLCB3Y3pkc0NvdW50OiAwIH0sDQogIHsganlzOiAn5Yab5LqLMDnmlZnnoJTlrqQnLCB6dDogJ+WPkeW4gycsIHNic2o6ICcnLCB4eWRrY0NvdW50OiA1Miwgd2N6ZHNDb3VudDogMCB9DQpdDQoNCmNvbnN0IGhhbmRsZVRhc2tCb29rU2VsZWN0aW9uID0gKHJvd3M6IFRhc2tCb29rUm93W10pID0+IHsNCiAgc2VsZWN0ZWRUYXNrQm9va1Jvd3MudmFsdWUgPSByb3dzDQp9DQoNCi8vIOaJk+W8gOaVmeeglOWupOS7u+WKoeS5puivpue7hu+8iOWJjeerr+a8lOekuu+8iQ0KY29uc3QgaGFuZGxlVGFza0Jvb2tEZXRhaWwgPSAoKSA9PiB7fQ0KDQovLyDlvLnnqpfmiZPlvIDml7bmjInmqKHlvI/liJ3lp4vljJYNCndhdGNoKA0KICAoKSA9PiBwcm9wcy5tb2RlbFZhbHVlLA0KICAodmFsKSA9PiB7DQogICAgaWYgKCF2YWwpIHJldHVybg0KICAgIGlmIChwcm9wcy5tb2RlID09PSAnZWRpdCcpIHsNCiAgICAgIGZvcm0ucndtYyA9IHByb3BzLnJvdz8ucndtYyA/PyAnJw0KICAgICAgZm9ybS5janNqID0gJzIwMTctMDctMTQgMTc6MDAnDQogICAgICBmb3JtLmZic2ogPSAnMjAxOS0xMi0xMyAxMDozOScNCiAgICAgIGZvcm0uanNzaiA9ICcnDQogICAgICB0YXNrQm9va1Jvd3MudmFsdWUgPSBbLi4uZWRpdFRhc2tCb29rUm93c10NCiAgICB9IGVsc2Ugew0KICAgICAgZm9ybS5yd21jID0gJ+aWsOeglOeptueUn+aVmeWtpuS7u+WKoScNCiAgICAgIGZvcm0uY2pzaiA9ICcnDQogICAgICBmb3JtLmZic2ogPSAnJw0KICAgICAgZm9ybS5qc3NqID0gJycNCiAgICAgIHRhc2tCb29rUm93cy52YWx1ZSA9IFtdDQogICAgfQ0KICAgIGFjdGl2ZVRhYi52YWx1ZSA9ICd0YXNrYm9vaycNCiAgICAvLyDpu5jorqTpgInkuK3nrKzkuIDooYzvvIjok53oibLpq5jkuq7vvIkNCiAgICBuZXh0VGljaygoKSA9PiB7DQogICAgICBpZiAodGFza0Jvb2tSb3dzLnZhbHVlLmxlbmd0aCkgew0KICAgICAgICB0YWJsZVJlZi52YWx1ZT8uc2V0Q3VycmVudFJvdyh0YXNrQm9va1Jvd3MudmFsdWVbMF0pDQogICAgICB9DQogICAgfSkNCiAgfQ0KKQ0KDQpjb25zdCBoYW5kbGVDb25maXJtID0gKCkgPT4gew0KICBlbWl0KCdjb25maXJtJykNCiAgZGlhbG9nVmlzaWJsZS52YWx1ZSA9IGZhbHNlDQp9DQo="},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4VA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/views/teachOffice/taskPlan","sourcesContent":["<script setup lang=\"ts\">\r\nimport { nextTick, onMounted, reactive, ref } from 'vue'\r\nimport { ElMessage, ElMessageBox } from 'element-plus'\r\nimport { Close, Edit, Plus, Setting, VideoPause, VideoPlay } from '@element-plus/icons-vue'\r\nimport TeachingTaskDialog from './TeachingTaskDialog.vue'\r\n\r\n/** 教学任务表格行 */\r\ninterface TeachingTaskRow {\r\n  bh: string           // 编号\r\n  rwmc: string         // 任务名称\r\n  zt: string           // 状态\r\n  fbsj: string         // 发布时间\r\n  cjsj: string         // 创建时间\r\n  jssj: string         // 结束时间\r\n  jysCount: number     // 教研室数\r\n  teamCount: number    // 学员队数\r\n  hbqKcCount: number   // 合班前课程任务数\r\n  hbqXssCount: number  // 合班前总学时数\r\n  hbhKcCount: number   // 合班后课程任务数\r\n  hbhXssCount: number  // 合班后总学时数\r\n}\r\n\r\n// ==================== 1. 学期信息区域 ====================\r\nconst semester = reactive({\r\n  name: '2017年秋季学期',       // 学期名称\r\n  kxrq: '2017-07-08',           // 校历开学日期\r\n  jsrq: '2018-02-11',           // 结束日期\r\n  weeks: 32                     // 学期周数\r\n})\r\n\r\n// ==================== 2. 数据表格 ====================\r\nconst loading = ref(false)\r\nconst tableRef = ref()\r\nconst tableData = ref<TeachingTaskRow[]>([\r\n  {\r\n    bh: 'task-2017-2',\r\n    rwmc: '2017年下半年教学任务',\r\n    zt: '发布',\r\n    fbsj: '2017年12月1日',\r\n    cjsj: '2017年7月8日',\r\n    jssj: '',\r\n    jysCount: 31,\r\n    teamCount: 78,\r\n    hbqKcCount: 1126,\r\n    hbqXssCount: 36050,\r\n    hbhKcCount: 1058,\r\n    hbhXssCount: 34050\r\n  },\r\n  {\r\n    bh: 'task-2019-1',\r\n    rwmc: '研究生下半年教学任务',\r\n    zt: '发布',\r\n    fbsj: '2019年12月1日',\r\n    cjsj: '2017年7月8日',\r\n    jssj: '',\r\n    jysCount: 12,\r\n    teamCount: 2,\r\n    hbqKcCount: 16,\r\n    hbqXssCount: 560,\r\n    hbhKcCount: 16,\r\n    hbhXssCount: 560\r\n  }\r\n])\r\nconst selectedRows = ref<TeachingTaskRow[]>([])\r\nconst currentRow = ref<TeachingTaskRow>()\r\n\r\nconst handleSelectionChange = (rows: TeachingTaskRow[]) => {\r\n  selectedRows.value = rows\r\n}\r\n\r\nconst handleCurrentChange = (row: TeachingTaskRow) => {\r\n  currentRow.value = row\r\n}\r\n\r\n/** 获取当前选中行，未选中时提示 */\r\nconst getSelected = (): TeachingTaskRow | null => {\r\n  if (!currentRow.value) {\r\n    ElMessage.warning('请先选择一条教学任务')\r\n    return null\r\n  }\r\n  return currentRow.value\r\n}\r\n\r\n// ==================== 操作按钮 ====================\r\n/** 教学任务信息弹窗 */\r\nconst dialogVisible = ref(false)\r\n/** 弹窗模式：新建 / 编辑 */\r\nconst dialogMode = ref<'create' | 'edit'>('create')\r\n/** 编辑模式选中的任务行 */\r\nconst editRow = ref<TeachingTaskRow | null>(null)\r\n\r\nconst handleAdd = () => {\r\n  dialogMode.value = 'create'\r\n  editRow.value = null\r\n  dialogVisible.value = true\r\n}\r\n\r\nconst handleEdit = () => {\r\n  const row = getSelected()\r\n  if (!row) return\r\n  dialogMode.value = 'edit'\r\n  editRow.value = row\r\n  dialogVisible.value = true\r\n}\r\n\r\nconst handleDialogConfirm = () => {\r\n  ElMessage.success('已保存教学任务信息（前端演示）')\r\n}\r\n\r\nconst handleDelete = () => {\r\n  const row = getSelected()\r\n  if (!row) return\r\n  ElMessageBox.confirm(`确定删除教学任务\"${row.rwmc}\"吗？删除后不可恢复。`, '删除确认', {\r\n    confirmButtonText: '确定删除',\r\n    cancelButtonText: '取消',\r\n    type: 'warning'\r\n  })\r\n    .then(() => {\r\n      ElMessage.success('删除成功（前端演示）')\r\n    })\r\n    .catch(() => {})\r\n}\r\n\r\nconst handlePublish = () => {\r\n  const row = getSelected()\r\n  if (!row) return\r\n  ElMessage.success(`已发布教学任务：${row.rwmc}`)\r\n}\r\n\r\nconst handleEndPublish = () => {\r\n  const row = getSelected()\r\n  if (!row) return\r\n  ElMessage.success(`已结束发布：${row.rwmc}`)\r\n}\r\n\r\nconst handleManageTeams = () => {\r\n  const row = getSelected()\r\n  if (!row) return\r\n  ElMessage.success(`管理教学任务所含学员队：${row.rwmc}`)\r\n}\r\n\r\nonMounted(() => {\r\n  // 默认选中第一行（蓝色高亮）\r\n  nextTick(() => {\r\n    if (tableData.value.length) {\r\n      tableRef.value?.setCurrentRow(tableData.value[0])\r\n    }\r\n  })\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div class=\"page-container\">\r\n    <!-- ==================== 1. 学期信息区域 ==================== -->\r\n    <el-card shadow=\"never\" class=\"semester-card\">\r\n      <div class=\"semester-bar\">\r\n        <span class=\"semester-name\">{{ semester.name }}</span>\r\n        <div class=\"semester-fields\">\r\n          <div class=\"field\">\r\n            <span class=\"field-label\">校历开学日期</span>\r\n            <el-date-picker\r\n              v-model=\"semester.kxrq\"\r\n              type=\"date\"\r\n              format=\"YYYY年M月D日\"\r\n              value-format=\"YYYY-MM-DD\"\r\n              placeholder=\"选择日期\"\r\n              style=\"width: 160px\"\r\n            />\r\n          </div>\r\n          <div class=\"field\">\r\n            <span class=\"field-label\">结束日期</span>\r\n            <el-date-picker\r\n              v-model=\"semester.jsrq\"\r\n              type=\"date\"\r\n              format=\"YYYY年M月D日\"\r\n              value-format=\"YYYY-MM-DD\"\r\n              placeholder=\"选择日期\"\r\n              style=\"width: 160px\"\r\n            />\r\n          </div>\r\n          <div class=\"field\">\r\n            <span class=\"field-label\">学期周数</span>\r\n            <el-input v-model=\"semester.weeks\" style=\"width: 90px\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </el-card>\r\n\r\n    <!-- ==================== 2. 操作按钮区域 ==================== -->\r\n    <div class=\"toolbar\">\r\n      <el-button type=\"primary\" plain @click=\"handleAdd\">\r\n        <el-icon><Plus /></el-icon>\r\n        <span>新建(N)</span>\r\n      </el-button>\r\n      <el-button @click=\"handleEdit\">\r\n        <el-icon><Edit /></el-icon>\r\n        <span>编辑(E)</span>\r\n      </el-button>\r\n      <el-button @click=\"handleDelete\">\r\n        <el-icon><Close /></el-icon>\r\n        <span>删除(D)</span>\r\n      </el-button>\r\n      <el-button @click=\"handlePublish\">\r\n        <el-icon><VideoPlay /></el-icon>\r\n        <span>发布教学任务(D)</span>\r\n      </el-button>\r\n      <el-button @click=\"handleEndPublish\">\r\n        <el-icon><VideoPause /></el-icon>\r\n        <span>结束发布(E)</span>\r\n      </el-button>\r\n      <el-button @click=\"handleManageTeams\">\r\n        <el-icon><Setting /></el-icon>\r\n        <span>管理教学任务所含学员队(S)</span>\r\n      </el-button>\r\n    </div>\r\n\r\n    <!-- ==================== 3. 数据表格区域 ==================== -->\r\n    <el-card shadow=\"never\" class=\"table-card\">\r\n      <el-table\r\n        ref=\"tableRef\"\r\n        v-loading=\"loading\"\r\n        :data=\"tableData\"\r\n        border\r\n        stripe\r\n        highlight-current-row\r\n        class=\"task-table\"\r\n        @selection-change=\"handleSelectionChange\"\r\n        @current-change=\"handleCurrentChange\"\r\n      >\r\n        <el-table-column type=\"selection\" width=\"40\" align=\"center\" />\r\n        <el-table-column prop=\"rwmc\" label=\"任务名称\" min-width=\"170\" show-overflow-tooltip />\r\n        <el-table-column label=\"状态\" width=\"80\" align=\"center\">\r\n          <template #default=\"{ row }\">\r\n            <span class=\"status-text\">{{ (row as TeachingTaskRow).zt }}</span>\r\n          </template>\r\n        </el-table-column>\r\n        <el-table-column prop=\"fbsj\" label=\"发布时间\" width=\"130\" align=\"center\" />\r\n        <el-table-column prop=\"cjsj\" label=\"创建时间\" width=\"130\" align=\"center\" />\r\n        <el-table-column label=\"结束时间\" width=\"130\" align=\"center\">\r\n          <template #default=\"{ row }\">\r\n            {{ (row as TeachingTaskRow).jssj || '' }}\r\n          </template>\r\n        </el-table-column>\r\n        <el-table-column prop=\"jysCount\" label=\"教研室数\" width=\"90\" align=\"center\" />\r\n        <el-table-column prop=\"teamCount\" label=\"学员队数\" width=\"90\" align=\"center\" />\r\n        <el-table-column prop=\"hbqKcCount\" label=\"合班前课程任务数\" width=\"140\" align=\"center\" />\r\n        <el-table-column prop=\"hbqXssCount\" label=\"合班前总学时数\" width=\"140\" align=\"center\" />\r\n        <el-table-column prop=\"hbhKcCount\" label=\"合班后课程任务数\" width=\"140\" align=\"center\" />\r\n        <el-table-column prop=\"hbhXssCount\" label=\"合班后总学时数\" width=\"140\" align=\"center\" />\r\n      </el-table>\r\n    </el-card>\r\n\r\n    <!-- ==================== 教学任务信息弹窗 ==================== -->\r\n    <TeachingTaskDialog\r\n      v-model=\"dialogVisible\"\r\n      :semester-name=\"semester.name\"\r\n      :mode=\"dialogMode\"\r\n      :row=\"editRow\"\r\n      @confirm=\"handleDialogConfirm\"\r\n    />\r\n  </div>\r\n</template>\r\n\r\n<style scoped lang=\"scss\">\r\n.page-container {\r\n  padding: 20px;\r\n\r\n  // ========== 1. 学期信息区域 ==========\r\n  .semester-card {\r\n    margin-bottom: 16px;\r\n\r\n    .semester-bar {\r\n      display: flex;\r\n      align-items: center;\r\n      flex-wrap: wrap;\r\n      gap: 28px;\r\n\r\n      .semester-name {\r\n        font-size: 24px;\r\n        font-weight: 700;\r\n        color: #1e6fff;\r\n        white-space: nowrap;\r\n      }\r\n\r\n      .semester-fields {\r\n        display: flex;\r\n        align-items: center;\r\n        flex-wrap: wrap;\r\n        gap: 20px;\r\n\r\n        .field {\r\n          display: flex;\r\n          align-items: center;\r\n          gap: 8px;\r\n\r\n          .field-label {\r\n            font-size: 14px;\r\n            color: #606266;\r\n            white-space: nowrap;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  // ========== 2. 操作按钮区域 ==========\r\n  .toolbar {\r\n    display: flex;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n    margin-bottom: 16px;\r\n\r\n    .el-button + .el-button {\r\n      margin-left: 0;\r\n    }\r\n\r\n    .el-button {\r\n      display: inline-flex;\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  // ========== 3. 数据表格区域 ==========\r\n  .table-card {\r\n    .task-table {\r\n      width: 100%;\r\n\r\n      .status-text {\r\n        color: #1e6fff;\r\n        font-weight: 600;\r\n      }\r\n\r\n      // 当前行蓝色高亮\r\n      :deep(.el-table__body tr.current-row > td.el-table__cell) {\r\n        background-color: #d9ecff;\r\n      }\r\n\r\n      :deep(.el-table__body tr.current-row:hover > td.el-table__cell) {\r\n        background-color: #d9ecff;\r\n      }\r\n    }\r\n  }\r\n}\r\n</style>\r\n\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, nextTick, reactive, ref, watch } from 'vue'\r\n\r\n/** 教研室任务书行 */\r\ninterface TaskBookRow {\r\n  jys: string        // 教研室\r\n  zt: string         // 状态\r\n  sbsj: string       // 上报时间\r\n  xydkcCount: number // 学员队课程任务数\r\n  wczdsCount: number // 完成指定数\r\n}\r\n\r\n/** 编辑模式传入的任务行（仅需任务名称） */\r\ninterface DialogRow {\r\n  rwmc?: string\r\n}\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    modelValue: boolean\r\n    semesterName?: string\r\n    /** 弹窗模式：新建 / 编辑 */\r\n    mode?: 'create' | 'edit'\r\n    /** 编辑模式选中的任务行 */\r\n    row?: DialogRow | null\r\n  }>(),\r\n  {\r\n    semesterName: '2017年秋季学期',\r\n    mode: 'create',\r\n    row: null\r\n  }\r\n)\r\n\r\nconst emit = defineEmits<{\r\n  (e: 'update:modelValue', value: boolean): void\r\n  (e: 'confirm'): void\r\n}>()\r\n\r\nconst dialogVisible = computed({\r\n  get: () => props.modelValue,\r\n  set: (val: boolean) => emit('update:modelValue', val)\r\n})\r\n\r\n// ==================== 基本信息 ====================\r\nconst form = reactive({\r\n  xq: props.semesterName, // 学期（只读）\r\n  rwmc: '',               // 任务名称（可编辑）\r\n  cjsj: '',               // 创建时间（只读）\r\n  fbsj: '',               // 发布时间（只读）\r\n  jssj: ''                // 结束时间（只读）\r\n})\r\n\r\n// ==================== Tab 标签页 ====================\r\nconst activeTab = ref<string>('taskbook')\r\n\r\n// ==================== 教研室任务书列表 ====================\r\nconst tableRef = ref()\r\nconst taskBookRows = ref<TaskBookRow[]>([])\r\nconst selectedTaskBookRows = ref<TaskBookRow[]>([])\r\n\r\n/** 编辑模式下的教研室任务书数据（按截图还原） */\r\nconst editTaskBookRows: TaskBookRow[] = [\r\n  { jys: '军事81教研室', zt: '发布', sbsj: '', xydkcCount: 33, wczdsCount: 0 },\r\n  { jys: '翻译室', zt: '发布', sbsj: '', xydkcCount: 2, wczdsCount: 0 },\r\n  { jys: '军事共同教研室', zt: '上报', sbsj: '2019-12-13 10:39', xydkcCount: 97, wczdsCount: 8 },\r\n  { jys: '作战保障教研室', zt: '发布', sbsj: '', xydkcCount: 47, wczdsCount: 0 },\r\n  { jys: '军事10教研室', zt: '发布', sbsj: '', xydkcCount: 21, wczdsCount: 0 },\r\n  { jys: '军事83', zt: '发布', sbsj: '', xydkcCount: 2, wczdsCount: 0 },\r\n  { jys: '军事09教研室', zt: '发布', sbsj: '', xydkcCount: 52, wczdsCount: 0 }\r\n]\r\n\r\nconst handleTaskBookSelection = (rows: TaskBookRow[]) => {\r\n  selectedTaskBookRows.value = rows\r\n}\r\n\r\n// 打开教研室任务书详细（前端演示）\r\nconst handleTaskBookDetail = () => {}\r\n\r\n// 弹窗打开时按模式初始化\r\nwatch(\r\n  () => props.modelValue,\r\n  (val) => {\r\n    if (!val) return\r\n    if (props.mode === 'edit') {\r\n      form.rwmc = props.row?.rwmc ?? ''\r\n      form.cjsj = '2017-07-14 17:00'\r\n      form.fbsj = '2019-12-13 10:39'\r\n      form.jssj = ''\r\n      taskBookRows.value = [...editTaskBookRows]\r\n    } else {\r\n      form.rwmc = '新研究生教学任务'\r\n      form.cjsj = ''\r\n      form.fbsj = ''\r\n      form.jssj = ''\r\n      taskBookRows.value = []\r\n    }\r\n    activeTab.value = 'taskbook'\r\n    // 默认选中第一行（蓝色高亮）\r\n    nextTick(() => {\r\n      if (taskBookRows.value.length) {\r\n        tableRef.value?.setCurrentRow(taskBookRows.value[0])\r\n      }\r\n    })\r\n  }\r\n)\r\n\r\nconst handleConfirm = () => {\r\n  emit('confirm')\r\n  dialogVisible.value = false\r\n}\r\n</script>\r\n\r\n<template>\r\n  <el-dialog\r\n    v-model=\"dialogVisible\"\r\n    title=\"教学任务信息\"\r\n    width=\"760px\"\r\n    class=\"teaching-task-dialog\"\r\n    :close-on-click-modal=\"false\"\r\n    destroy-on-close\r\n  >\r\n    <!-- ==================== 1. 基本信息区域 ==================== -->\r\n    <el-form label-width=\"86px\" class=\"basic-form\">\r\n      <el-row :gutter=\"20\">\r\n        <el-col :span=\"12\">\r\n          <el-form-item label=\"学期\">\r\n            <el-input v-model=\"form.xq\" readonly />\r\n          </el-form-item>\r\n        </el-col>\r\n        <el-col :span=\"12\">\r\n          <el-form-item label=\"任务名称\">\r\n            <el-input v-model=\"form.rwmc\" placeholder=\"请输入任务名称\" />\r\n          </el-form-item>\r\n        </el-col>\r\n      </el-row>\r\n      <el-row :gutter=\"20\">\r\n        <el-col :span=\"12\">\r\n          <el-form-item label=\"创建时间\">\r\n            <el-input v-model=\"form.cjsj\" readonly />\r\n          </el-form-item>\r\n        </el-col>\r\n        <el-col :span=\"12\">\r\n          <el-form-item label=\"发布时间\">\r\n            <el-input v-model=\"form.fbsj\" readonly />\r\n          </el-form-item>\r\n        </el-col>\r\n      </el-row>\r\n      <el-row :gutter=\"20\">\r\n        <el-col :span=\"12\">\r\n          <el-form-item label=\"结束时间\">\r\n            <el-input v-model=\"form.jssj\" readonly />\r\n          </el-form-item>\r\n        </el-col>\r\n      </el-row>\r\n    </el-form>\r\n\r\n    <!-- ==================== 2. Tab 标签页区域 ==================== -->\r\n    <el-tabs v-model=\"activeTab\" class=\"tt-tabs\">\r\n      <!-- 教研室任务书列表 -->\r\n      <el-tab-pane label=\"教研室任务书列表\" name=\"taskbook\">\r\n        <div class=\"sub-toolbar\">\r\n          <el-button type=\"primary\" plain size=\"small\" @click=\"handleTaskBookDetail\">\r\n            教研室任务书详细(D)\r\n          </el-button>\r\n        </div>\r\n        <el-table\r\n          ref=\"tableRef\"\r\n          :data=\"taskBookRows\"\r\n          border\r\n          stripe\r\n          highlight-current-row\r\n          class=\"taskbook-table\"\r\n          @selection-change=\"handleTaskBookSelection\"\r\n        >\r\n          <!-- 编辑模式：展开列；新建模式：多选列 -->\r\n          <el-table-column v-if=\"mode === 'edit'\" type=\"expand\">\r\n            <template #default=\"{ row }\">\r\n              <div class=\"expand-panel\">\r\n                <el-descriptions :column=\"3\" size=\"small\" border>\r\n                  <el-descriptions-item label=\"教研室\">{{ (row as TaskBookRow).jys }}</el-descriptions-item>\r\n                  <el-descriptions-item label=\"状态\">{{ (row as TaskBookRow).zt }}</el-descriptions-item>\r\n                  <el-descriptions-item label=\"上报时间\">{{ (row as TaskBookRow).sbsj || '-' }}</el-descriptions-item>\r\n                  <el-descriptions-item label=\"学员队课程任务数\">{{ (row as TaskBookRow).xydkcCount }}</el-descriptions-item>\r\n                  <el-descriptions-item label=\"完成指定数\">{{ (row as TaskBookRow).wczdsCount }}</el-descriptions-item>\r\n                </el-descriptions>\r\n              </div>\r\n            </template>\r\n          </el-table-column>\r\n          <el-table-column v-else type=\"selection\" width=\"40\" align=\"center\" />\r\n          <el-table-column prop=\"jys\" label=\"教研室\" min-width=\"120\" align=\"center\" />\r\n          <el-table-column prop=\"zt\" label=\"状态\" width=\"80\" align=\"center\" />\r\n          <el-table-column prop=\"sbsj\" label=\"上报时间\" width=\"150\" align=\"center\" show-overflow-tooltip />\r\n          <el-table-column prop=\"xydkcCount\" label=\"学员队课程任务数\" width=\"150\" align=\"center\" />\r\n          <el-table-column prop=\"wczdsCount\" label=\"完成指定数\" width=\"100\" align=\"center\" />\r\n        </el-table>\r\n      </el-tab-pane>\r\n\r\n      <!-- 学员队列表 -->\r\n      <el-tab-pane label=\"学员队列表\" name=\"team\">\r\n        <div class=\"tab-empty\">暂无学员队列表数据</div>\r\n      </el-tab-pane>\r\n    </el-tabs>\r\n\r\n    <!-- ==================== 3. 底部按钮区域 ==================== -->\r\n    <template #footer>\r\n      <el-button @click=\"dialogVisible = false\">取消(C)</el-button>\r\n      <el-button type=\"primary\" @click=\"handleConfirm\">确定(O)</el-button>\r\n    </template>\r\n  </el-dialog>\r\n</template>\r\n\r\n<style scoped lang=\"scss\">\r\n.teaching-task-dialog {\r\n  .basic-form {\r\n    padding-bottom: 8px;\r\n    border-bottom: 1px solid #ebeef5;\r\n    margin-bottom: 4px;\r\n  }\r\n\r\n  .tt-tabs {\r\n    :deep(.el-tabs__header) {\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .sub-toolbar {\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .taskbook-table {\r\n      width: 100%;\r\n\r\n      // 当前行蓝色高亮\r\n      :deep(.el-table__body tr.current-row > td.el-table__cell) {\r\n        background-color: #d9ecff;\r\n      }\r\n\r\n      :deep(.el-table__body tr.current-row:hover > td.el-table__cell) {\r\n        background-color: #d9ecff;\r\n      }\r\n    }\r\n\r\n    .expand-panel {\r\n      padding: 10px 16px;\r\n      background-color: #f5f7fa;\r\n    }\r\n\r\n    .tab-empty {\r\n      min-height: 200px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: #909399;\r\n      font-size: 13px;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"]}]}