day:项目

day35/vue-admin-template-master/src/api/level.js

@@ -1,5 +1,6 @@
 import request from '@/utils/request'
 
+// 获取等级列表
 export function levelMain() {
   return request({
     url: '/showLevel',
@@ -7,3 +8,11 @@ export function levelMain() {
   })
 }
 
+// 添加登记列表
+export function addLevel(data) {
+  return request({
+    url: '/insertOneLevel',
+    method: 'post',
+    data
+  })
+}

day35/vue-admin-template-master/src/views/level/levelList.vue

@@ -1,15 +1,92 @@
 <template>
-  <div>
-    添加等级
+<!-- 
+  思路：
+  添加登记信息，点击提交，联调提交接口，并在列表页可以查询到新增的数据
+ -->
+  <div class="add-level">
+    <el-form
+      :model="ruleForm"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+      :rules="rules"
+    >
+      <el-form-item
+        label="等级名称"
+        prop="levelname"
+      >
+        <el-input
+          v-model="ruleForm.levelname"
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')"
+          >提交</el-button
+        >
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
+import {addLevel} from '@/api/level.js';
 export default {
-    name:'levelList'
-}
+  name: "levelList",
+  data() {
+    return {
+      ruleForm: {
+        levelname: "",
+      },
+      rules:{
+          levelname: [
+            { required: true, message: '等级名称不能为空', trigger: 'blur' },
+          ],
+      }
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      console.log(this.ruleForm.levelname)
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          addLevel({
+            levelname: this.ruleForm.levelname
+          }).then(res => {
+            if(res.code == 101) {
+             this.$message({
+              message: res.message,
+              type: 'success'
+            });
+            // this.resetForm();
+            this.$router.push("/level/index");
+            }
+          }).catch(err=>{
+            console.log(err,'失败')
+          })
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
 </script>
 
-<style>
-
-</style>
+<style scoped lang='scss'>
+.add-level {
+  width: 800px;
+  margin: 200px auto 0;
+}
+// 深度样式穿透 v-deep => ::v-deep 
+// ::v-deep .el-form-item__content {
+//   line-height: 100px;
+// }
+// .el-input {
+//   background: #00f;
+// }
+</style>