admin

10_vuecli/vueadmin/src/api/level.js

@@ -12,4 +12,14 @@ export function getLevelList() {
         // 请求参数 可以在接口文档中查看，如果没有参数 可以不写
         // params:{}
     })
-}
+}
+// 定义添加等级的方法
+export function saveOrUpdateLevel(data) {
+    return request({
+        url:"/levelController/saveOrUpdateLevel",
+        method:"post",
+        // post 请求传递的是data对象    
+        // data:data 根据es6新语法可以简写为data
+        data
+    })
+}

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

@@ -1,5 +1,64 @@
 <template>
     <div class="leveladd">
-        <h1>LevelAdd</h1>
+        <el-form :model="levelAddForm" ref="levelAddForm" label-width="100px" class="demo-ruleForm">
+            <!-- rules 校验规则 -->
+            <el-form-item label="等级名称" prop="levelname" :rules="[
+                { required: true, message: '等级名称不能为空' },
+            ]">
+                <el-input v-model="levelAddForm.levelname" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="submitForm('levelAddForm')">提交</el-button>
+                <el-button @click="resetForm('levelAddForm')">重置</el-button>
+            </el-form-item>
+        </el-form>
     </div>
-</template>
+</template>
+<script>
+// 引入添加等级的方法 通过解构赋值接收相应的方法
+import { saveOrUpdateLevel } from '@/api/level'
+export default {
+    name: 'LevelAdd',
+    data() {
+        return {
+            levelAddForm: {
+                levelname: ''
+            }
+        };
+    },
+    methods: {
+        submitForm(formName) {
+            // 提交表单 element-ui 自带的方法
+            this.$refs[formName].validate((valid) => {
+                // 校验通过后 提交表单
+                if (valid) {
+                    alert('submit!');
+                    // 调用添加等级的方法
+                    // 定义传递的参数
+                    let levelName = {
+                        levelname: this.levelAddForm.levelname
+                    }
+                    saveOrUpdateLevel(levelName).then(res => {
+                        console.log(res)
+                    })
+                } else {
+                    // 校验不通过后 提示用户
+                    console.log('error submit!!');
+                    return false;
+                }
+            });
+        },
+        resetForm(formName) {
+            // 重置表单 element-ui 自带的方法
+            // 重置表单后 表单中的数据会被清空
+            this.$refs[formName].resetFields();
+        }
+    }
+}
+</script>
+<style scoped>
+.leveladd {
+    width: 400px;
+    margin:200px auto;
+}
+</style>

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

@@ -10,8 +10,8 @@
                 <template>
                     <el-table :data="tableData" style="width: 100%">
                         <el-table-column label="序号" type="index" width="180"></el-table-column>
-                        <el-table-column label="等级ID" prop="date"></el-table-column>
-                        <el-table-column label="等级名称" prop="name"></el-table-column>
+                        <el-table-column label="等级ID" prop="jrid"></el-table-column>
+                        <el-table-column label="等级名称" prop="levelname"></el-table-column>
                         <el-table-column label="操作">
                             <template slot-scope="scope">
                                 <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
@@ -32,23 +32,7 @@ export default {
     name: 'LevelList',
     data() {
         return {
-            tableData: [
-                {
-                    date: '2016-05-02',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1518 弄'
-                },
-                {
-                    date: '2016-05-04',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1517 弄'
-                },
-                {
-                    date: '2016-05-01',
-                    name: '王小虎',
-                    address: '上海市普陀区金沙江路 1519 弄'
-                }
-            ]
+            tableData: []
         }
     },
     // 生命周期函数 created 组件创建完成后调用
@@ -63,7 +47,8 @@ export default {
             // 调用获取等级列表的方法
             getLevelList().then(res => {
                 // 接收到数据后 赋值给 tableData
-                this.tableData = res.data
+                console.log(res.data.records)
+                this.tableData = res.data.records
             })
         },
         handleEdit(index, row) {