对网页进行一些完善

src/views/educational/class/index.vue

@@ -1,20 +1,256 @@
 <template>
-  <div class="home">
-    <h1>欢迎使用管理系统</h1>
-    <p>这个是class</p>
+  <div class="data-table-container">
+    <div class="search-from">
+      <!-- 搜索表单 -->
+    </div>
+    <div class="operate-buttons">
+      <el-button size="default" type="primary" @click="dialogFormVisible = true">
+        <i class="el-icon-plus el-icon--left"></i>新增
+      </el-button>
+      <el-button size="default" type="danger" @click="handleBatchDelete">
+        <i class="el-icon-delete el-icon--left"></i>批量删除
+      </el-button>
+    </div>
+    <div class="data-table">
+      <div class="table-container">
+        <el-table
+          height="600"
+          border
+          fit
+          stripe
+          :data="classList"
+          style="width: 100%"
+          max-height="600"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.1)"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column type="index" label="序号" width="55" />
+          <el-table-column prop="classNo" label="班级号" />
+          <el-table-column prop="teacherFullName" label="班主任姓名" />
+          <el-table-column prop="majorName" label="所属专业" />
+          <el-table-column prop="collegeId" label="所属学院ID" />
+          <el-table-column prop="enrollmentYear" label="入学年份" />
+          <el-table-column prop="description" label="描述" show-overflow-tooltip />
+          <el-table-column fixed="right" label="操作" min-width="80">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click="handleDelete(row.id)">
+                删除
+              </el-button>
+              <el-button link type="primary" size="small" @click="handleEdit(row)">
+                修改
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container">
+        <el-pagination
+          :currentPage="pageNum"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
   </div>
+
+  <!-- 新增班级对话框 -->
+  <el-dialog v-model="dialogFormVisible" title="新增班级" width="600" center>
+    <el-form ref="addFormRef" :model="newClass" :rules="classRules">
+      <el-form-item label="班级号" prop="classNo">
+        <el-input v-model="newClass.classNo" placeholder="请输入班级号" />
+      </el-form-item>
+      <el-form-item label="班主任姓名" prop="teacherFullName">
+        <el-input v-model="newClass.teacherFullName" placeholder="请输入班主任姓名" />
+      </el-form-item>
+      <el-form-item label="所属专业" prop="majorName">
+        <el-input v-model="newClass.majorName" placeholder="请输入所属专业" />
+      </el-form-item>
+      <el-form-item label="所属学院ID" prop="collegeId">
+        <el-input v-model.number="newClass.collegeId" placeholder="请输入所属学院ID" />
+      </el-form-item>
+      <el-form-item label="入学年份" prop="enrollmentYear">
+        <el-input v-model="newClass.enrollmentYear" placeholder="请输入入学年份" />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input v-model="newClass.description" type="textarea" :rows="3" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveClass">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <!-- 编辑班级对话框 -->
+  <el-dialog v-model="editDialogVisible" title="编辑班级" width="600" center>
+    <el-form ref="editFormRef" :model="editClass" :rules="classRules">
+      <el-form-item label="班级号" prop="classNo">
+        <el-input v-model="editClass.classNo" placeholder="请输入班级号" />
+      </el-form-item>
+      <el-form-item label="班主任姓名" prop="teacherFullName">
+        <el-input v-model="editClass.teacherFullName" placeholder="请输入班主任姓名" />
+      </el-form-item>
+      <el-form-item label="所属专业" prop="majorName">
+        <el-input v-model="editClass.majorName" placeholder="请输入所属专业" />
+      </el-form-item>
+      <el-form-item label="所属学院ID" prop="collegeId">
+        <el-input v-model.number="editClass.collegeId" placeholder="请输入所属学院ID" />
+      </el-form-item>
+      <el-form-item label="入学年份" prop="enrollmentYear">
+        <el-input v-model="editClass.enrollmentYear" placeholder="请输入入学年份" />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input v-model="editClass.description" type="textarea" :rows="3" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="updateClass">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
-// 这里可以添加首页需要的业务逻辑
+import { ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const loading = ref(false);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const total = ref(100);
+
+const classList = ref([
+  {
+    id: 1,
+    classNo: 'C1001',
+    teacherFullName: '张老师',
+    majorName: '计算机科学',
+    collegeId: 101,
+    enrollmentYear: '2023',
+    description: '三年制班'
+  }
+]);
+
+const selectedIds = ref([]);
+
+const handleSelectionChange = (rows) => {
+  selectedIds.value = rows.map(row => row.id);
+};
+
+const dialogFormVisible = ref(false);
+const editDialogVisible = ref(false);
+
+const newClass = ref({
+  classNo: '',
+  teacherFullName: '',
+  majorName: '',
+  collegeId: null,
+  enrollmentYear: '',
+  description: ''
+});
+
+const editClass = ref({});
+
+const classRules = {
+  classNo: [{ required: true, message: '请输入班级号', trigger: 'blur' }],
+  teacherFullName: [{ required: true, message: '请输入班主任姓名', trigger: 'blur' }],
+  majorName: [{ required: true, message: '请输入所属专业', trigger: 'blur' }]
+};
+
+const saveClass = () => {
+  console.log('新增班级:', newClass.value);
+  dialogFormVisible.value = false;
+};
+
+const updateClass = () => {
+  console.log('更新班级:', editClass.value);
+  editDialogVisible.value = false;
+};
+
+const handleEdit = (row) => {
+  editClass.value = { ...row };
+  editDialogVisible.value = true;
+};
+
+const handleDelete = (id) => {
+  ElMessageBox.confirm('确定要删除这个班级吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    console.log('删除班级ID:', id);
+  });
+};
+
+const handleBatchDelete = () => {
+  if (selectedIds.value.length === 0) {
+    ElMessage.warning('请至少选择一条记录进行删除');
+    return;
+  }
+  ElMessageBox.confirm('确定要批量删除选中的班级吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    console.log('批量删除班级ID:', selectedIds.value);
+  });
+};
+
+const handleSizeChange = (val) => {
+  pageSize.value = val;
+};
+
+const handleCurrentChange = (val) => {
+  pageNum.value = val;
+};
 </script>
 
-<style scoped>
-.home {
-  padding: 20px;
-  font-size: 16px;
-}
-h1 {
-  color: #1890ff;
+<style scoped lang="less">
+.data-table-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+
+  .search-from {
+    padding-top: 20px;
+  }
+
+  .operate-buttons {
+    height: 54px;
+    line-height: 54px;
+  }
+
+  .data-table {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+
+    .table-container {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .pagination-container {
+      height: 70px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-right: 24px;
+    }
+  }
 }
-</style>
+</style>

src/views/educational/student/index.vue

@@ -1,21 +1,283 @@
 <template>
-  <div className="home">
-    <h1>欢迎使用管理系统</h1>
-    <p>这个是student</p>
+  <div class="data-table-container">
+    <div class="search-from">
+      <!-- 搜索表单 -->
+    </div>
+    <div class="operate-buttons">
+      <el-button size="default" type="primary" @click="dialogFormVisible = true">
+        <i class="el-icon-plus el-icon--left"></i>新增
+      </el-button>
+      <el-button size="default" type="danger" @click="handleBatchDelete">
+        <i class="el-icon-delete el-icon--left"></i>批量删除
+      </el-button>
+    </div>
+    <div class="data-table">
+      <div class="table-container">
+        <el-table
+          height="600"
+          border
+          fit
+          stripe
+          :data="studentList"
+          style="width: 100%"
+          max-height="600"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.1)"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column type="index" label="序号" width="55" />
+          <el-table-column prop="studentNo" label="学号" />
+          <el-table-column prop="fullName" label="姓名" />
+          <el-table-column prop="sex" label="性别" width="80">
+            <template #default="{ row }">
+              {{ row.sex === 1 ? '男' : '女' }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="className" label="班级名称" />
+          <el-table-column prop="phoneNumber" label="手机号" />
+          <el-table-column prop="description" label="描述" show-overflow-tooltip />
+          <el-table-column fixed="right" label="操作" min-width="80">
+            <template #default="{ row }">
+              <el-button link type="primary" size="small" @click="handleDelete(row.id)">
+                删除
+              </el-button>
+              <el-button link type="primary" size="small" @click="handleEdit(row)">
+                修改
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pagination-container">
+        <el-pagination
+          :currentPage="pageNum"
+          :page-sizes="[10, 20, 50, 100]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
   </div>
+
+  <!-- 新增学生对话框 -->
+  <el-dialog v-model="dialogFormVisible" title="新增学生" width="600" center>
+    <el-form ref="addFormRef" :model="newStudent" :rules="studentRules">
+      <el-form-item label="学号" prop="studentNo">
+        <el-input v-model="newStudent.studentNo" placeholder="请输入学号" />
+      </el-form-item>
+      <el-form-item label="姓名" prop="fullName">
+        <el-input v-model="newStudent.fullName" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="newStudent.sex" placeholder="请选择性别">
+          <el-option label="男" :value="1" />
+          <el-option label="女" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属班级" prop="classInfoId">
+        <el-select v-model="newStudent.classInfoId" placeholder="请选择班级">
+          <el-option
+            v-for="cls in classOptions"
+            :key="cls.id"
+            :label="cls.classNo + ' - ' + cls.teacherFullName"
+            :value="cls.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="手机号" prop="phoneNumber">
+        <el-input v-model="newStudent.phoneNumber" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input v-model="newStudent.description" type="textarea" :rows="3" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取消</el-button>
+        <el-button type="primary" @click="saveStudent">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <!-- 编辑学生对话框 -->
+  <el-dialog v-model="editDialogVisible" title="编辑学生" width="600" center>
+    <el-form ref="editFormRef" :model="editStudent" :rules="studentRules">
+      <el-form-item label="学号" prop="studentNo">
+        <el-input v-model="editStudent.studentNo" placeholder="请输入学号" />
+      </el-form-item>
+      <el-form-item label="姓名" prop="fullName">
+        <el-input v-model="editStudent.fullName" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item label="性别" prop="sex">
+        <el-select v-model="editStudent.sex" placeholder="请选择性别">
+          <el-option label="男" :value="1" />
+          <el-option label="女" :value="0" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属班级" prop="classInfoId">
+        <el-select v-model="editStudent.classInfoId" placeholder="请选择班级">
+          <el-option
+            v-for="cls in classOptions"
+            :key="cls.id"
+            :label="cls.classNo + ' - ' + cls.teacherFullName"
+            :value="cls.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="手机号" prop="phoneNumber">
+        <el-input v-model="editStudent.phoneNumber" placeholder="请输入手机号" />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input v-model="editStudent.description" type="textarea" :rows="3" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="editDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="updateStudent">保存</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup>
-// 这里可以添加首页需要的业务逻辑
+import { ref } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+const loading = ref(false);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const total = ref(100);
+
+const studentList = ref([
+  {
+    id: 1,
+    studentNo: 'S2023001',
+    fullName: '李明',
+    sex: 1,
+    className: 'C1001',
+    phoneNumber: '13812345678',
+    description: '优秀学生'
+  }
+]);
+
+const classOptions = ref([
+  { id: 1, classNo: 'C1001', teacherFullName: '张老师' }
+]);
+
+const selectedIds = ref([]);
+
+const handleSelectionChange = (rows) => {
+  selectedIds.value = rows.map(row => row.id);
+};
+
+const dialogFormVisible = ref(false);
+const editDialogVisible = ref(false);
+
+const newStudent = ref({
+  studentNo: '',
+  fullName: '',
+  sex: 1,
+  classInfoId: null,
+  phoneNumber: '',
+  description: ''
+});
+
+const editStudent = ref({});
+
+const studentRules = {
+  studentNo: [{ required: true, message: '请输入学号', trigger: 'blur' }],
+  fullName: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
+};
+
+const saveStudent = () => {
+  console.log('新增学生:', newStudent.value);
+  dialogFormVisible.value = false;
+};
+
+const updateStudent = () => {
+  console.log('更新学生:', editStudent.value);
+  editDialogVisible.value = false;
+};
+
+const handleEdit = (row) => {
+  editStudent.value = { ...row };
+  editDialogVisible.value = true;
+};
+
+const handleDelete = (id) => {
+  ElMessageBox.confirm('确定要删除这个学生吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    console.log('删除学生ID:', id);
+  });
+};
+
+const handleBatchDelete = () => {
+  if (selectedIds.value.length === 0) {
+    ElMessage.warning('请至少选择一条记录进行删除');
+    return;
+  }
+  ElMessageBox.confirm('确定要批量删除选中的学生吗？', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    console.log('批量删除学生ID:', selectedIds.value);
+  });
+};
+
+const handleSizeChange = (val) => {
+  pageSize.value = val;
+};
+
+const handleCurrentChange = (val) => {
+  pageNum.value = val;
+};
 </script>
 
-<style scoped>
-.home {
-  padding: 20px;
-  font-size: 16px;
-}
+<style scoped lang="less">
+.data-table-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+
+  .search-from {
+    padding-top: 20px;
+  }
+
+  .operate-buttons {
+    height: 54px;
+    line-height: 54px;
+  }
+
+  .data-table {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+
+    .table-container {
+      flex: 1;
+      overflow: hidden;
+    }
 
-h1 {
-  color: #1890ff;
+    .pagination-container {
+      height: 70px;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      margin-right: 24px;
+    }
+  }
 }
-</style>
+</style>