admin

10-vuecli/vueapp/vueadmin/src/views/level/LevelAdd.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="level-add">
-    <h1 v-if="ruleForm.id">添加等级</h1>
     <div class="form-content">
       <!-- model 绑定数据 对应data中的变量 -->
       <!-- rules 表单验证规则 -->
@@ -11,14 +10,23 @@
         label-width="100px"
         class="demo-ruleForm"
       >
+        <el-form-item v-if="ruleForm.id" label="等级编号" prop="id">
+          <el-input disabled v-model="ruleForm.id"></el-input>
+        </el-form-item>
+
         <el-form-item label="等级名称" prop="name">
           <el-input v-model="ruleForm.name"></el-input>
         </el-form-item>
 
         <el-form-item>
-          <el-button type="primary" @click="submitForm('ruleForm')"
+
+          <el-button v-if="ruleForm.id" type="primary" @click="submitForm('ruleForm')"
+            >修改</el-button
+          >  
+          <el-button v-else type="primary" @click="submitForm('ruleForm')"
             >立即创建</el-button
           >
+
           <el-button @click="resetForm('ruleForm')">重置</el-button>
         </el-form-item>
       </el-form>
@@ -49,6 +57,31 @@ export default {
     this.ruleForm.id = this.$route.query.id;
   },
   methods: {
+    // 定义一个修改等级函数
+    editFun(){
+        axios({
+        method: "post",
+        url: "http://39.105.160.25:18080/levelController/saveOrUpdateLevel",
+        // data 传递给后端的参数
+        data: {
+          levelname: this.ruleForm.name,
+          jrid:this.ruleForm.id
+        },
+      })
+        // 等级添加成功的回调函数
+        .then((res) => {
+          //  弹框提示成功
+          this.$message({
+            message: "恭喜你，这是一条成功消息",
+            type: "success",
+          });
+          //   跳转页面
+          this.$router.push("/level/list");
+        })
+        .catch((res) => {
+          console.log(res);
+        });
+    },
     // 定义一个函数添加等级
     addFun() {
       axios({
@@ -73,13 +106,21 @@ export default {
           console.log(res);
         });
     },
+    // 验证表单函数
     submitForm(formName) {
       // 对整个表单进行验证如果通过 valid会返回一个true 否则就是 false
       this.$refs[formName].validate((valid) => {
         //   this.$refs.ruleForm.validate((valid) => {
         // 表单验证成功
         if (valid) {
-          this.addFun();
+            //根据是否传递ID 来判断执行添加还是修改
+            //如果传递了ID 就执行修改 this.editFun();
+            //如果没有传递ID 就执行添加 this.addFun();
+          if(this.ruleForm.id){
+            this.editFun();
+          }else{
+            this.addFun();
+          }  
         } else {
           console.log("error submit!!");
           return false;