diff --git a/frontend/src/views/admin/position-management.vue b/frontend/src/views/admin/position-management.vue
index 737df17..791d4de 100644
--- a/frontend/src/views/admin/position-management.vue
+++ b/frontend/src/views/admin/position-management.vue
@@ -338,40 +338,76 @@
-
-
-
+
+
+
+ 已选择 {{ selectedCourses.length }} 门课程
+
+
+ 批量设为必修
+
+
+
+ 批量设为选修
+
+
+ 取消选择
+
+
+
+
+
+
+
+
+
+
+
{{ scope.row.category }}
-
-
+
+
{{ getDifficultyText(scope.row.difficulty) }}
-
+
必修
选修
未分配
-
+
([])
const optionalCourses = ref([])
const allCourses = ref([])
+// 全选相关
+const courseTableRef = ref(null)
+const selectedCourses = ref([])
+const isAllSelected = ref(false)
+const isIndeterminate = ref(false)
+
// 岗位表单
const positionForm = reactive({
id: '',
@@ -941,6 +983,67 @@ const filteredAllCourses = computed(() => {
)
})
+/**
+ * 处理表格选择变化
+ */
+const handleSelectionChange = (selection: any[]) => {
+ selectedCourses.value = selection
+ const total = filteredAllCourses.value.length
+ isAllSelected.value = selection.length === total && total > 0
+ isIndeterminate.value = selection.length > 0 && selection.length < total
+}
+
+/**
+ * 全选/取消全选
+ */
+const handleSelectAll = (val: boolean) => {
+ if (courseTableRef.value) {
+ if (val) {
+ filteredAllCourses.value.forEach(row => {
+ courseTableRef.value.toggleRowSelection(row, true)
+ })
+ } else {
+ courseTableRef.value.clearSelection()
+ }
+ }
+}
+
+/**
+ * 清除选择
+ */
+const clearSelection = () => {
+ if (courseTableRef.value) {
+ courseTableRef.value.clearSelection()
+ }
+ selectedCourses.value = []
+ isAllSelected.value = false
+ isIndeterminate.value = false
+}
+
+/**
+ * 批量分配课程
+ */
+const batchAssignCourse = async (type: 'required' | 'optional') => {
+ if (!currentPosition.value || selectedCourses.value.length === 0) return
+
+ try {
+ const courseIds = selectedCourses.value.map(c => c.id)
+ const response = await request.post(`/api/v1/admin/positions/${currentPosition.value.id}/courses`, {
+ course_ids: courseIds,
+ course_type: type
+ })
+
+ if (response && response.code === 200) {
+ await loadPositionCourses(currentPosition.value.id)
+ clearSelection()
+ ElMessage.success(`已将 ${courseIds.length} 门课程设为${type === 'required' ? '必修' : '选修'}`)
+ }
+ } catch (error) {
+ console.error('批量分配课程失败:', error)
+ ElMessage.error('批量分配课程失败')
+ }
+}
+
/**
* 检查课程是否为必修
*/
@@ -1326,11 +1429,120 @@ onMounted(() => {
color: #333;
margin: 0;
}
+
+ .header-actions {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ }
+ }
+
+ // 批量操作栏样式
+ .batch-actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ margin-bottom: 12px;
+ background: linear-gradient(135deg, #e8f4fd 0%, #f0f7ff 100%);
+ border-radius: 8px;
+ border: 1px solid #d4e8fc;
+
+ .selected-count {
+ font-size: 14px;
+ font-weight: 500;
+ color: #409eff;
+ margin-right: 8px;
+ }
+
+ .el-button {
+ &.el-button--danger {
+ background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
+ border: none;
+
+ &:hover {
+ background: linear-gradient(135deg, #ff5252 0%, #d63031 100%);
+ }
+ }
+
+ &.el-button--warning {
+ background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
+ border: none;
+
+ &:hover {
+ background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
+ }
+ }
+ }
}
.text-muted {
color: #909399;
}
+
+ // 课程表格样式优化
+ .course-table {
+ // Checkbox 样式优化
+ :deep(.el-checkbox) {
+ .el-checkbox__inner {
+ width: 18px;
+ height: 18px;
+ border-radius: 4px;
+ border: 2px solid #dcdfe6;
+ transition: all 0.2s ease;
+
+ &::after {
+ width: 4px;
+ height: 8px;
+ left: 5px;
+ top: 1px;
+ border-width: 2px;
+ }
+ }
+
+ &:hover .el-checkbox__inner {
+ border-color: #409eff;
+ }
+
+ &.is-checked .el-checkbox__inner {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-color: #667eea;
+ }
+
+ &.is-indeterminate .el-checkbox__inner {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-color: #667eea;
+
+ &::before {
+ height: 3px;
+ top: 6px;
+ left: 3px;
+ right: 3px;
+ }
+ }
+ }
+
+ // 表格行选中效果
+ :deep(.el-table__row) {
+ &.current-row,
+ &:hover {
+ background-color: #f5f7fa;
+ }
+
+ &.selection-row {
+ background-color: #ecf5ff;
+ }
+ }
+
+ // 表头样式
+ :deep(.el-table__header-wrapper) {
+ th {
+ background-color: #fafafa;
+ font-weight: 600;
+ color: #333;
+ }
+ }
+ }
}
}