admin

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

@@ -1,29 +1,91 @@
 <template>
-    <div class="level-add">
-        <h1>等级添加</h1>
+  <div class="level-add">
+    <div class="form-content">
+      <!-- model 绑定数据 对应data中的变量 -->
+      <!-- rules 表单验证规则 -->
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <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
+          >
+          <el-button @click="resetForm('ruleForm')">重置</el-button>
+        </el-form-item>
+      </el-form>
     </div>
+  </div>
 </template>
 <script>
-    // 引入axios
-    import axios from 'axios';
-    export default{
-        name:"LevelAdd",
-        methods:{
-            // 定义一个函数添加等级
-            addFun(){
-                axios({
-                    method:"post",
-                    url:"http://39.105.160.25:18080/levelController/saveOrUpdateLevel",
-                    // data 传递给后端的参数
-                    data:{
-                        levelname:"经理"
-                    }
-                }).then((res)=>{
-                    console.log(res);
-                }).catch((res)=>{
-                    console.log(res);
-                });
-            }
+// 引入axios
+import axios from "axios";
+export default {
+  name: "LevelAdd",
+  data() {
+    return {
+      ruleForm: {
+        name: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入等级名称", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    // 定义一个函数添加等级
+    addFun() {
+      axios({
+        method: "post",
+        url: "http://39.105.160.25:18080/levelController/saveOrUpdateLevel",
+        // data 传递给后端的参数
+        data: {
+          levelname: this.ruleForm.name,
+        },
+      })
+        // 等级添加成功的回调函数
+        .then((res) => {
+          //  弹框提示成功
+          this.$message({
+            message: "恭喜你，这是一条成功消息",
+            type: "success",
+          });
+        //   跳转页面
+        this.$router.push("/level/list");
+        })
+        .catch((res) => {
+          console.log(res);
+        });
+    },
+    submitForm(formName) {
+      // 对整个表单进行验证如果通过 valid会返回一个true 否则就是 false
+      this.$refs[formName].validate((valid) => {
+        //   this.$refs.ruleForm.validate((valid) => {
+        // 表单验证成功
+        if (valid) {
+          this.addFun();
+        } else {
+          console.log("error submit!!");
+          return false;
         }
-    }
-</script>
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+<style scoped>
+.form-content {
+  width: 50%;
+  margin: 100px auto;
+}
+</style>

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

@@ -29,12 +29,17 @@
             <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
               >编辑</el-button
             >
-            <el-button
+            <!-- <el-button
               size="mini"
               type="danger"
               @click="handleDelete(scope.$index, scope.row)"
               >删除</el-button
-            >
+            > -->
+            <el-popconfirm title="这是一段内容确定删除吗？" @onConfirm="handleDelete(scope.$index, scope.row)">
+              <el-button class="del-btn" size="mini" type="danger" slot="reference"
+                >删除</el-button
+              >
+            </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
@@ -84,8 +89,17 @@ export default {
     },
     handleEdit(index, row) {
       console.log(index, row);
+
     },
     handleDelete(index, row) {
+      // 删除等级
+      axios({
+        method:"delete",
+        url:"http://39.105.160.25:18080/levelController/deleteLevel",
+        data:[1]
+      }).then(()=>{
+      }).catch(()=>{
+      })
       console.log(index, row);
     },
   },
@@ -97,4 +111,7 @@ export default {
 .level-list {
   padding: 30px;
 }
+.del-btn{
+  margin-left: 10px;
+}
 </style>