1111

src/views/system/stuMenu/index.vue

 <template>
   <div>
     <!--搜索条件-->
-<!--    <el-input placeholder="请输入内容"></el-input>-->
+    <!--<el-input placeholder="请输入菜单名称"></el-input>-->
     <section>
       <el-row class="title-add">
-        <el-button type="primary" icon="el-icon-plus">新增菜单</el-button>
+        <el-button type="primary" icon="el-icon-plus" @click="addMenu">新增菜单</el-button>
       </el-row>
       <el-table border ref="filterTable" :data="tableData" :header-cell-style="{background:'#f4f4f4', color:'#727479'}">
         <el-table-column prop="orderNum" label="排序" width="60" align="center"></el-table-column>
@@ -54,13 +54,15 @@
         </el-form-item>
         <el-form-item prop="pid" label="父级：" :label-width="formLabelWidth">
           <el-select v-model="addAndEditFormData.pid" placeholder="请选择是否关闭" style="width:80%" clearable>
-            <el-option value="M" label="目录"></el-option>
+            <el-option :value="pidData.id" :label="pidData.label" style="height:200px;overflow: auto;background-color:#fff">
+              <el-tree :data="pidData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
+            </el-option>
           </el-select>
         </el-form-item>
         <el-row>
           <el-col :span="10">
             <el-form-item prop="menuType" label="菜单类型：" :label-width="formLabelWidth">
-              <el-select v-model="addAndEditFormData.menuType" placeholder="请选择是否关闭" style="width:100%" clearable>
+              <el-select v-model="addAndEditFormData.menuType" placeholder="请选择是否关闭" style="width:100%" clearable >
                 <el-option value="M" label="目录"></el-option>
                 <el-option value="C" label="菜单"></el-option>
                 <el-option value="B" label="按钮"></el-option>
@@ -102,18 +104,16 @@
 </template>
 
 <script>
-  import Message from "element-ui/packages/message/src/main";
-
   export default {
     name: "stuMenu",
     data() {
       return {
         tableData: [],
-        // 模态框相关
+        /* 模态框相关 */
         title: '',
         closeOnClickModal: false,
         addAndEditDialogFormVisible: false,
-        isEditable: false,
+        isEditable: true,                   // 标志是否是编辑
         showAddAndEditForm: false,
         showForm: false,
         formLabelWidth: '150px',
@@ -128,6 +128,7 @@
           isVisible: '',
           orderNum: ''
         },
+
         addAndEditRules: {
           name: {
             required: true, message: '菜单名称不能为空', trigger: 'blur'
@@ -135,12 +136,12 @@
           code: {
             required: true, message: '权限code不能为空', trigger: 'blur'
           },
-          // menuType: {
-          //   required: true, message: '是否解决不能为空', trigger: 'change'
-          // },
-          // closed: {
-          //   required: true, message: '是否关闭不能为空', trigger: 'change'
-          // }
+        },
+        // 下拉树形
+        pidData: [],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
         },
       }
     },
@@ -153,14 +154,24 @@
         this.api.getApi("/menu/get").then(res => {
           this.tableData = res.data.list;
           // debugger
+          // 分页
+
         })
       },
 
-      // 筛选
+      // 筛选菜单类型
       filterTag(value, row) {
         return row.menuType === value;
       },
 
+      // 树形下拉
+      handleNodeClick(data) {
+        console.log(data);
+      },
+
+      // 加载树形菜单
+
+
       // 编辑
       editData(index, row){
         this.title = "编辑";
@@ -185,12 +196,8 @@
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
-          this.api.getApi("/menu/delete?id="+id).then(res => {
+          this.api.deleteApi("/menu/delete?id="+id).then(res => {
             if (res.data.code === 200){
-              this.$message({
-                type: 'success',
-                message: '删除成功!'
-              });
               this.getList();
             }
           })
@@ -209,22 +216,40 @@
         this.addAndEditDialogFormVisible = false;
       },
 
-      // 确定提交
+      // 确定修改
       handleConfirmEvent(formName){
         this.$refs[formName].validate(async valid => {
           if (valid) {
             let formData = this.addAndEditFormData;
-            this.api.putApi("/menu/update",formData).then(res => {
-              if (res.data.code === 200){
-                Message.success("修改成功");
-              }
-            })
-
-
-            this.handleDialogClose();
+            if (this.isEditable){
+              this.api.putApi("/menu/update",formData).then(res => {
+                if (res.data.code === 200){
+                  this.getList();
+                  this.handleDialogClose();
+                }
+              })
+            }else {
+              this.api.postApi("/menu/add",formData).then(res => {
+                if (res.data.code === 200){
+                  this.getList();
+                  this.handleDialogClose();
+                }
+              })
+            }
           }
         })
-      }
+      },
+
+      // 新增
+      addMenu(){
+        this.title = "新增";
+        this.isEditable = false;
+        this.$set(this.addAndEditFormData, 'menuType', 'M');
+        this.$set(this.addAndEditFormData, 'isVisible', true);
+        this.showAddAndEditForm = true;
+        this.addAndEditDialogFormVisible = true;
+      },
+
 
     }
   }