|
@@ -1,3 +1,106 @@
|
|
|
|
|
+<script setup>
|
|
|
|
|
+import { ref, computed, onMounted } from 'vue';
|
|
|
|
|
+import { ElMessage, ElMessageBox } from 'element-plus';
|
|
|
|
|
+import { useStudentStore } from '@/stores/educational/student/index';
|
|
|
|
|
+
|
|
|
|
|
+const studentStore = useStudentStore();
|
|
|
|
|
+
|
|
|
|
|
+// 数据绑定
|
|
|
|
|
+const studentList = computed(() => studentStore.tableData);
|
|
|
|
|
+const loading = computed(() => studentStore.loading);
|
|
|
|
|
+const pageNum = computed(() => studentStore.pageNum);
|
|
|
|
|
+const pageSize = computed(() => studentStore.pageSize);
|
|
|
|
|
+const total = computed(() => studentStore.total);
|
|
|
|
|
+
|
|
|
|
|
+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 fetchData = async () => {
|
|
|
|
|
+ await studentStore.queryData({ pageNum: pageNum.value, pageSize: pageSize.value });
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ fetchData();
|
|
|
|
|
+});
|
|
|
|
|
+
|
|
|
|
|
+// 分页事件
|
|
|
|
|
+const handleSizeChange = (val) => {
|
|
|
|
|
+ studentStore.pageSize = val;
|
|
|
|
|
+ fetchData();
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleCurrentChange = (val) => {
|
|
|
|
|
+ studentStore.pageNum = val;
|
|
|
|
|
+ fetchData();
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 新增学生
|
|
|
|
|
+const saveStudent = async () => {
|
|
|
|
|
+ await studentStore.addStudent(newStudent.value);
|
|
|
|
|
+ dialogFormVisible.value = false;
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 编辑学生
|
|
|
|
|
+const updateStudent = async () => {
|
|
|
|
|
+ await studentStore.editStudent(editStudent.value);
|
|
|
|
|
+ editDialogVisible.value = false;
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+const handleEdit = (row) => {
|
|
|
|
|
+ editStudent.value = { ...row };
|
|
|
|
|
+ editDialogVisible.value = true;
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 删除学生
|
|
|
|
|
+const handleDelete = async (id) => {
|
|
|
|
|
+ await ElMessageBox.confirm('确定要删除这个学生吗?', '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ await studentStore.deleteStudent(id);
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+// 批量删除
|
|
|
|
|
+const handleBatchDelete = async () => {
|
|
|
|
|
+ if (selectedIds.value.length === 0) {
|
|
|
|
|
+ ElMessage.warning('请至少选择一条记录进行删除');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ await ElMessageBox.confirm('确定要批量删除选中的学生吗?', '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ type: 'warning'
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ await studentStore.batchDeleteStudent(selectedIds.value);
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
<template>
|
|
<template>
|
|
|
<div class="data-table-container">
|
|
<div class="data-table-container">
|
|
|
<div class="search-from">
|
|
<div class="search-from">
|
|
@@ -81,14 +184,7 @@
|
|
|
</el-select>
|
|
</el-select>
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
<el-form-item label="所属班级" prop="classInfoId">
|
|
<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-input v-model="newStudent.className" placeholder="请输入班级名称,例如:1001" />
|
|
|
</el-form-item>
|
|
</el-form-item>
|
|
|
<el-form-item label="手机号" prop="phoneNumber">
|
|
<el-form-item label="手机号" prop="phoneNumber">
|
|
|
<el-input v-model="newStudent.phoneNumber" placeholder="请输入手机号" />
|
|
<el-input v-model="newStudent.phoneNumber" placeholder="请输入手机号" />
|
|
@@ -146,104 +242,6 @@
|
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
</template>
|
|
</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 lang="less">
|
|
<style scoped lang="less">
|
|
|
.data-table-container {
|
|
.data-table-container {
|
|
|
display: flex;
|
|
display: flex;
|