ExamSphere/admin/src/view/user/teacher.vue

<template>
  <el-row class="page">
    <el-card class="block-view">
      <!-- 顶部标题 -->
      <el-row class="top">
        <el-text><h2>教师账号管理</h2></el-text>
      </el-row>

      <!-- 搜索框和添加按钮 -->
      <el-row class="toolbar" justify="space-between">
        <el-col :span="8">
          <el-input
            v-model="searchQuery"
            placeholder="请输入搜索的用户名"
            clearable
            size="medium"
            @input="searchTeacher"
          >
            <template #append>
              <el-button @click="searchTeacher">搜索</el-button>
            </template>
          </el-input>
        </el-col>

        <el-button type="primary" @click="showAddDialog = true">添加用户</el-button>
        
        <!-- 添加用户弹窗 -->
        <el-dialog title="添加新用户" v-model="showAddDialog" width="500px" center>
          <el-form :model="newTeacher" :rules="rules" ref="TeacherForm" label-width="80px">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="newTeacher.name" placeholder="请输入姓名" />
            </el-form-item>
        
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="newTeacher.email" placeholder="请输入邮箱" />
            </el-form-item>
        
            <el-form-item label="手机" prop="phone">
              <el-input v-model="newTeacher.phone" placeholder="请输入手机号" />
            </el-form-item>
        
            <el-form-item label="角色" prop="role">
              <el-input v-model="newTeacher.role" placeholder="请输入角色" />
            </el-form-item>
        
            <el-form-item label="状态" prop="status">
              <el-switch v-model="newTeacher.status" />
            </el-form-item>
          </el-form>
        
          <!-- 弹窗底部按钮 -->
          <template #footer>
            <span>
              <el-button @click="resetForm">重置</el-button>
              <el-button type="primary" @click="saveTeacher">保存</el-button>
            </span>
          </template>
        </el-dialog>

      </el-row>

      <!-- 表格展示 -->
      <el-table :data="filteredTeacher" style="width: 100%; margin-top: 20px;" stripe>
        <!-- 序号列 -->
        <el-table-column type="index" label="#" width="50" align="center" />

        <el-table-column prop="name" label="姓名" width="150" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="phone" label="手机" width="180" />
        <el-table-column prop="role" label="角色" width="180" />
        
        <!-- 状态列 -->
        <el-table-column label="状态" width="120" align="center">
          <template #default="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </template>
        </el-table-column>

        <el-table-column prop="createdAt" label="创建时间" width="160" />

        <!-- 操作列 -->
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              size="mini"
              @click="editTeacher(scope.row)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="deleteTeacher(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="Teacher.length"
        :page-size="10"
        style="margin-top: 20px; text-align: right;"
      />
    </el-card>
  </el-row>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const Teacher = ref([
  // 示例数据
  { id: 1, name: '15285', email: '14755798', phone: '185825695', role: 'ice喵喵3', status: true, createdAt: '2022-01-14' },
  { id: 2, name: 'root', email: '1060368054@qq.com', phone: '18380546544', role: 'ice喵喵3', status: false, createdAt: '2022-01-14' },
]);

const searchQuery = ref('');
const showAddDialog = ref(false); // 控制弹窗显示
const TeacherForm = ref(); // 表单引用
const newTeacher = ref({ name: '', email: '', phone: '', role: '', status: true }); // 新用户数据

const currentPage = ref(1);
const pageSize = ref(10);



const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  role: [{ required: true, message: '请输入角色', trigger: 'blur' }],
};

// 筛选功能
const filteredTeacher = computed(() => {
  if (!searchQuery.value) return Teacher.value;
  return Teacher.value.filter((item) =>
    item.name.includes(searchQuery.value) || item.email.includes(searchQuery.value)
  );
});


// 保存新用户
const saveTeacher = () => {
  TeacherForm.value.validate((valid) => {
    if (valid) {
      Teacher.value.push({
        ...newTeacher.value,
        id: Date.now(),
        createdAt: new Date().toISOString().split('T')[0], // 添加创建时间
      });
      ElMessage.success('新用户添加成功！');
      resetForm();
      showAddDialog.value = false;
    } else {
      ElMessage.error('请填写完整的信息！');
    }
  });
};

// 编辑用户
const editTeacher = (teacher) => {
  newTeacher.value = { ...teacher }; // 复制要编辑的行数据
  showAddDialog.value = true; // 打开弹窗
};


// 删除用户
const deleteTeacher = (id) => {
  ElMessageBox.confirm('确认删除该用户吗？', '提示', {
    type: 'warning',
  }).then(() => {
    Teacher.value = Teacher.value.filter((item) => item.id !== id);
    ElMessage.success('用户删除成功！');
  });
};

// 重置表单
const resetForm = () => {
  TeacherForm.value.resetFields();
  newTeacher.value = { name: '', email: '', phone: '', role: '', status: true };
};
</script>

<style scoped>
.page {
  padding: 20px;
  background-color: #f4f6f9;
}

.block-view {
  border-radius: 10px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.el-button {
  margin-left: 10px;
}
</style>