forked from liweijie/education
1 line
27 KiB
JSON
1 line
27 KiB
JSON
{"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"]}]} |