OL-LearnPlatform-Frontend/src/components/teacher/TeamManagement.vue

<template>
    <div class="team-management">
        <div class="toolbar">
            <n-select v-model:value="selectedDepartment" :options="departmentOptions" placeholder="班级名称"
                style="width: 200px" />
            <NSpace>
                <n-button type="primary" @click="showAddModal = true">
                    添加老师
                </n-button>
                <n-input v-model:value="searchKeyword" placeholder="请输入关键词" style="width: 200px" />
                <n-button type="primary">
                    搜索
                </n-button>
            </NSpace>
        </div>

        <n-data-table :columns="columns" :data="data" :pagination="pagination" :loading="loading"
            :row-key="(row: TeacherItem) => row.id" striped size="small" />

        <!-- 添加教师弹窗 -->
        <n-modal v-model:show="showAddModal" title="添加老师">
            <n-card style="width: 600px" title="添加老师" :bordered="false" size="huge" role="dialog" aria-modal="true">
                <n-form ref="formRef" :model="formData" :rules="rules" label-placement="left" label-width="auto"
                    require-mark-placement="right-hanging">
                    <n-form-item label="姓名" path="teacherName">
                        <n-input v-model:value="formData.teacherName" placeholder="请输入老师姓名" />
                    </n-form-item>
                    <n-form-item label="工号" path="teacherId">
                        <n-input v-model:value="formData.teacherId" placeholder="请输入老师工号" />
                    </n-form-item>
                </n-form>
                <template #footer>
                    <div class="modal-footer">
                        <n-button @click="showAddModal = false">取消</n-button>
                        <n-button type="primary" @click="handleSubmit">添加</n-button>
                    </div>
                </template>
            </n-card>
        </n-modal>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, h } from 'vue'
import {
    NDataTable,
    NButton,
    NSpace,
    NSelect,
    NInput,
    NModal,
    NCard,
    NForm,
    NFormItem,
    useMessage,
    type FormInst,
    type FormRules
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'

// 定义数据类型
interface TeacherItem {
    id: string
    teacherName: string
    teacherId: string
    role: string
    studentId: string
    teachingClass: string
    department: string
    joinTime: string
}

// 表单数据类型
interface FormData {
    teacherName: string
    teacherId: string
}

const message = useMessage()

// 响应式数据
const selectedDepartment = ref('')
const searchKeyword = ref('')
const showAddModal = ref(false)
const formRef = ref<FormInst | null>(null)

// 表单数据
const formData = ref<FormData>({
    teacherName: '',
    teacherId: ''
})

// 表单验证规则
const rules: FormRules = {
    teacherName: [
        { required: true, message: '请输入教师姓名', trigger: 'blur' }
    ],
    teacherId: [
        { required: true, message: '请输入工号', trigger: 'blur' }
    ]
}

// 部门选项
const departmentOptions = ref([
    { label: '全部班级', value: '' },
    { label: '软件工程1班', value: 'software1' },
    { label: '软件工程2班', value: 'software2' },
    { label: '计算机科学1班', value: 'cs1' }
])

// 表格列定义
const columns: DataTableColumns<TeacherItem> = [
    {
        title: '姓名',
        key: 'teacherName',
        width: 120,
        align: 'center'
    },
    {
        title: '角色',
        key: 'role',
        width: 100,
        align: 'center'
    },
    {
        title: '成员',
        key: 'studentId',
        width: 120,
        align: 'center'
    },
    {
        title: '任教班级',
        key: 'teachingClass',
        width: 150,
        align: 'center'
    },
    {
        title: '所属机构',
        key: 'department',
        width: 150,
        align: 'center'
    },
    {
        title: '加入时间',
        key: 'joinTime',
        width: 140,
        align: 'center'
    },
    {
        title: '操作',
        key: 'actions',
        width: 100,
        align: 'center',
        render: (row) => {
            return h(
                NButton,
                {
                    size: 'small',
                    type: 'error',
                    ghost: true,
                    onClick: () => handleDelete(row)
                },
                { default: () => '移除' }
            )
        }
    }
]

// 表格数据
const data = ref<TeacherItem[]>([])
const loading = ref(false)

// 分页配置
const pagination = ref({
    page: 1,
    pageSize: 10,
    showSizePicker: true,
    pageSizes: [10, 20, 50],
    onChange: (page: number) => {
        pagination.value.page = page
        loadData()
    },
    onUpdatePageSize: (pageSize: number) => {
        pagination.value.pageSize = pageSize
        pagination.value.page = 1
        loadData()
    }
})

// 操作处理函数
const handleDelete = (row: TeacherItem) => {
    message.warning(`移除教师：${row.teacherName}`)
}

const handleSubmit = async () => {
    try {
        await formRef.value?.validate()
        // 这里处理添加教师的逻辑
        message.success('添加教师成功')
        showAddModal.value = false
        // 重置表单
        formData.value = {
            teacherName: '',
            teacherId: ''
        }
        // 重新加载数据
        loadData()
    } catch (error) {
        message.error('请检查表单信息')
    }
}

// 模拟数据加载
const loadData = async () => {
    loading.value = true
    try {
        await new Promise(resolve => setTimeout(resolve, 500))

        const roles = ['刘桂人']
        const departments = ['北京大学经济学理学院']
        const mockData: TeacherItem[] = Array.from({ length: 1 }, (_, index) => ({
            id: `teacher_${index + 1}`,
            teacherName: roles[0],
            teacherId: `56566652`,
            role: '刘桂人',
            studentId: '56566652',
            teachingClass: '北京大学经济学理学院',
            department: departments[0],
            joinTime: '2025.08.02 07:30'
        }))

        data.value = mockData
    } catch (error) {
        console.error('加载数据失败:', error)
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    loadData()
})
</script>

<style scoped>
.team-management {
    padding: 16px 0;
}

.toolbar {
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-footer{
    display: flex;
    justify-content: end;
    gap: 12px;
}
</style>