admin

10_vuecli/bankpro/src/views/level/LevelAdd.vue

@@ -1,13 +1,13 @@
 <template>
     <div>
-        <h1>等级添加</h1>
         <div class="add-content">
             <el-form :model="levelForm" :rules="rules" ref="levelForm" label-width="100px">
                 <el-form-item label="等级名称" prop="levelname">
                     <el-input v-model="levelForm.levelname"></el-input>
                 </el-form-item>
-                
+
                 <el-form-item>
+                    <!-- 提交按钮 -->
                     <el-button type="primary" @click="submitForm('levelForm')">立即创建</el-button>
                     <el-button @click="resetForm('levelForm')">重置</el-button>
                 </el-form-item>
@@ -16,6 +16,8 @@
     </div>
 </template>
 <script>
+// 引入axios
+import axios from 'axios'
 export default {
     name: "LevelAdd",
     data() {
@@ -23,6 +25,7 @@ export default {
             levelForm: {
                 levelname: ''
             },
+            // 校验规则
             rules: {
                 levelname: [
                     { required: true, message: '请输入等级名称', trigger: 'blur' }
@@ -31,18 +34,38 @@ export default {
         };
     },
     methods: {
+        // 添加等级
         submitForm(formName) {
             // console.log(this.$refs.levelForm)
+            // 校验表单 如果校验通过 valid 为 true 否则为 false
             this.$refs[formName].validate((valid) => {
-                console.log(valid); 
-                // if (valid) {
-                //     alert('submit!');
-                // } else {
-                //     console.log('error submit!!');
-                //     return false;
-                // }
+                // console.log(valid); 
+                if (valid) {
+                    // 发送请求添加等级
+                    axios.post("http://39.105.160.25:18080/levelController/saveOrUpdateLevel", {
+                        levelname: this.levelForm.levelname
+                    }).then(res => {
+                        console.log(res);
+                        // 弹框提示成功
+                        this.$message({
+                            message: '恭喜你，这是一条成功消息',
+                            type: 'success'
+                        });
+                        // 清空表单
+                        this.resetForm("levelForm");
+                        // 跳转等级列表页面
+                        this.$router.push("/level/list");
+                    }).catch(err => {
+                        console.log(err)
+                    })
+
+                } else {
+                    console.log('error submit!!');
+                    return false;
+                }
             });
         },
+        // 重置表单
         resetForm(formName) {
             this.$refs[formName].resetFields();
         }
@@ -50,8 +73,8 @@ export default {
 }
 </script>
 <style scoped>
-.add-content{
+.add-content {
     width: 600px;
-    margin:100px auto;
+    margin: 100px auto;
 }
 </style>

10_vuecli/bankpro/src/views/level/LevelList.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="level-list">
-        <h1>等级列表</h1>
+        <!-- 等级添加按钮 -->
+        <el-button type="primary" @click="goAddLevel">添加等级</el-button>
         <div>
             <el-table :data="tableData" style="width: 100%">
                 <el-table-column type="index" label="序号" width="200">
@@ -36,6 +37,10 @@ export default {
         }
     },
     methods: {
+        // 跳转等级添加页面
+        goAddLevel() {
+            this.$router.push("/level/add")
+        },
         // 获取等级列表
         getData() {
             // 发送请求获取等级列表
@@ -52,6 +57,13 @@ export default {
         // 删除等级
         handleDelete(index, row) {
             console.log(index, row);
+            axios.delete('XXXX', { data: ["XXX"] })
+                .then(response => {
+                    console.log('Resource deleted successfully:', response.data);
+                })
+                .catch(error => {
+                    console.error('Error deleting resource:', error);
+                });
         }
     },
     created() {