new

vue-admin-template-master/.env.development

@@ -3,3 +3,4 @@ ENV = 'development'
 
 # base api
 VUE_APP_BASE_API = 'http://jr.edu.koobietech.com'
+ 

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

@@ -6,4 +6,22 @@ export function getLevel() {
     url: '/showLevel',
     method: 'get'
   })
+}
+
+/* 添加等级信息 */
+export function addLevel(data) {
+  return request({
+    url: '/insertOneLevel',
+    method: 'post',
+    data
+  })
+}
+
+/* 删除等级信息 */
+export function delLevel(params) {
+  return request({
+    url: '/delOneLevel',
+    method: 'get',
+    params
+  })
 }

vue-admin-template-master/src/views/level/addLevel.vue

@@ -3,11 +3,69 @@
   author: zsy
   date: 2024-6-9
 */
-<template><div>添加等级</div></template>
+<template>
+  <div class="add-level">
+    <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="80px">
+      <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>
+</template>
 
 <script>
-export default {};
+import { addLevel } from "@/api/level";
+export default {
+  data() {
+    return {
+      ruleForm: {
+        name: "",
+      },
+      rules: {
+        name: [{ required: true, message: "请输入等级名称", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          addLevel({
+            levelname: this.ruleForm.name,
+          })
+            .then((res) => {
+              this.$message({
+                message: "提交成功",
+                type: "success",
+              });
+              this.$refs[formName].resetFields();
+              this.$router.push('/level/levelList')
+            })
+            .catch((err) => {
+              this.$message.error('提交失败');
+            });
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
 </script>
 
-<style>
+<style scoped>
+.add-level {
+  width: 70%;
+  margin: 120px auto 0;
+}
 </style>

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

@@ -6,15 +6,26 @@
 <template>
   <div class="level-list">
     <el-table :data="tableData" style="width: 100%">
-      <el-table-column type="index" > </el-table-column>
-      <el-table-column prop="jrid" label="等级ID" > </el-table-column>
-      <el-table-column prop="levelname" label="等级名称" > </el-table-column>
+      <el-table-column type="index"> </el-table-column>
+      <el-table-column prop="jrid" label="等级ID"> </el-table-column>
+      <el-table-column prop="levelname" label="等级名称"> </el-table-column>
+      <el-table-column fixed="right" label="操作" width="120">
+        <template slot-scope="scope">
+          <el-button
+            @click.native.prevent="deleteRow(scope.row)"
+            type="text"
+            size="small"
+          >
+            移除
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
 
 <script>
-import {getLevel} from "@/api/level"
+import { getLevel, delLevel } from "@/api/level";
 export default {
   data() {
     return {
@@ -23,22 +34,52 @@ export default {
   },
   methods: {
     /* 获取等级列表 */
-    getLevelList(){
-      getLevel().then((res)=>{
-        console.log(res.data)
-        this.tableData = res.data
+    getLevelList() {
+      getLevel().then((res) => {
+        console.log(res.data);
+        this.tableData = res.data;
+      });
+    },
+    /* 删除等级 */
+    deleteRow(row) {
+      console.log(row);
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       })
-    }
+        .then(() => {
+          delLevel({
+            levelid: row.jrid
+          })
+            .then((res) => {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.getLevelList()
+            })
+            .catch((err) => {
+              this.$message.error("删除失败");
+            });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
+  },
+  created() {
+    this.getLevelList();
   },
-  created(){
-    this.getLevelList()
-  }
 };
 </script>
 
 <style scoped>
-  .level-list{
-    width: 60%;
-    margin: 130px auto 0
-  }
+.level-list {
+  width: 60%;
+  margin: 130px auto 0;
+}
 </style>