update

src/views/student/studentList.vue

@@ -1,7 +1,7 @@
 <!-- studentList.vue -->
 <template>
   <div>
-    <br><br>
+    <br>
     <!-- 查询表单 -->
     <el-form :inline="true" :model="studentSearchForm">
       <el-form-item label="姓名">
@@ -28,6 +28,7 @@
       <el-form-item label="筛选操作">
         <el-button type="primary" @click="studentListGet">查询</el-button>
         <el-button plain @click="studentSearchClear">清除</el-button>
+        <el-button type="success" @click="studentAdd" style="float: right;">添加</el-button>
       </el-form-item>
     </el-form>
     <br>
@@ -76,6 +77,50 @@
     <el-pagination background layout="sizes, prev, pager, next" @size-change="handleSizeChange"
       @current-change="handleCurrentChange" :total="studentList.total">
     </el-pagination>
+
+    <el-dialog title="编辑学生" :visible.sync="studentEditDialogVisible">
+      <el-form :model="studentEditForm" label-position="top">
+        <el-row :gutter="25">
+          <el-col :span="11">
+            <el-form-item label="姓名">
+              <el-input v-model="studentEditForm.name" placeholder="姓名"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item label="学号">
+              <el-input v-model="studentEditForm.code" placeholder="学号"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="25">
+          <el-col :span="11">
+            <el-form-item label="性别">
+              <el-select v-model="studentEditForm.sex" placeholder="性别">
+                <el-option label="男" :value=0></el-option>
+                <el-option label="女" :value=1></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="11">
+            <el-form-item label="年级">
+              <el-input v-model="studentEditForm.grade" placeholder="年级"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="专业">
+          <el-select v-model="studentEditForm.major">
+            <el-option v-for="(major, index) in majors" :key="major" :label="major" :value="index + 1"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input type="textarea" v-model="studentEditForm.detail" placeholder="备注"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="studentEditDialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="studentSubmit()">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -106,6 +151,8 @@ export default {
         pageSize: 10,
         total: 0
       },
+      studentEditDialogVisible: false,
+      studentEditForm: {id: -1, code: '', name: '', sex: '', grade: '', major: '', detail: ''},
     }
   },
   methods: {
@@ -155,16 +202,164 @@ export default {
       };
       this.studentListGet();
     },
-    studentEdit(student) { console.log('编辑学生：', student) },
+    studentEdit(student) { console.log('编辑学生：', student)
-    studentDelete(student) { console.log('删除学生：', student) },
+      this.studentEditDialogVisible = true;
+      this.studentEditForm = student;
+     },
+    studentDelete(student) { 
+      this.$confirm(
+        '确定要删除学生'+student.name+'吗？',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(()=>{
+        $.ajax({
+          url: this.$apiUrl + "/studentAction/delete",
+          method: 'POST',
+          data: student,
+          success: (data)=>{
+            if (data.success){
+              this.$message({
+                type: 'success',
+                message: '删除成功',
+                showClose: true
+              });
+              this.studentListGet();
+            }else{
+              this.$message({
+                type: 'error',
+                message: '删除失败',
+                showClose: true
+              });
+            }
+          },
+          error:(xhr)=>{
+            this.$message({
+              type: 'error',
+              message: '请求数据失败，code=' + xhr.status,
+              showClose: true
+            });
+          }
+        });
+      }).catch(()=>{
+        this.$message({
+          type: 'info',
+          message: '取消删除',
+          showClose: true
+        });
+      });
+     },
     handleSizeChange(val) {
       this.studentList.pageSize = val;
+      this.studentList.page = 1;
       this.studentListGet();
     },
     handleCurrentChange(val) {
       this.studentList.page = val;
       this.studentListGet();
     },
+    studentAdd(){
+      this.studentEditForm = { id: -1, code: '', name: '', sex: '', grade: '', major: '', detail: '' };
+      this.studentEditDialogVisible = true;
+    },
+    studentSubmit(){
+      if(this.studentEditForm.id===-1){
+        this.$confirm(
+          "确定要添加学生"+this.studentEditForm.name+"吗？",
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(()=>{
+          $.ajax({
+            url: this.$apiUrl + '/studentAction/add',
+            method: "POST",
+            data: this.studentEditForm,
+            success: (data) => {
+              if (data.success) {
+                this.$message({
+                  type: 'success',
+                  message: '保存成功',
+                  showClose: true,
+                });
+                this.studentEditDialogVisible = false;
+                this.studentListGet();
+              } else {
+                this.$message({
+                  type: 'error',
+                  message: data.msg,
+                  showClose: true,
+                });
+              }
+            },
+            error: (xhr) => {
+              this.$message({
+                type: 'error',
+                message: '请求数据失败，code=' + xhr.status,
+                showClose: true,
+              });
+            }
+          });
+        }).catch(()=>{
+          this.$message({
+            type: 'info',
+            message: '取消添加',
+            showClose: true
+          });
+        });
+      }else{
+        this.$confirm(
+          "确定要修改学生" + this.studentEditForm.name + "吗？",
+          '提示',
+          {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }
+        ).then(() => {
+          $.ajax({
+            url: this.$apiUrl + '/studentAction/edit',
+            method: "POST",
+            data: this.studentEditForm,
+            success: (data) => {
+              if (data.success) {
+                this.$message({
+                  type: 'success',
+                  message: '修改成功',
+                  showClose: true,
+                });
+                this.studentEditDialogVisible = false;
+                this.studentListGet();
+              } else {
+                this.$message({
+                  type: 'error',
+                  message: data.msg,
+                  showClose: true,
+                });
+              }
+            },
+            error: (xhr) => {
+              this.$message({
+                type: 'error',
+                message: '请求数据失败，code=' + xhr.status,
+                showClose: true,
+              });
+            }
+          });
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '取消保存',
+            showClose: true
+          });
+        });
+      }
+    },
   },
   mounted(){
     this.studentListGet();