完善菜单管理

src/views/manager/index.vue

@@ -165,6 +165,7 @@
         closeOnClickModal: false,
         addAndEditDialogFormVisible: false,
         addAndEditFormData: {
+          id: '',
           name: '',
           classId: '',
           oldPassword: '',
@@ -279,6 +280,7 @@
         })
         this.title = "修改用户信息";
         this.addAndEditDialogFormVisible = true;
+        this.$set(this.addAndEditFormData, 'id', this.userInfo.id);
         this.$set(this.addAndEditFormData, 'name', this.userInfo.name);
         this.$set(this.addAndEditFormData, 'classId', this.userInfo.classId);
         this.$set(this.addAndEditFormData, 'phone', this.userInfo.phone);
@@ -294,9 +296,7 @@
       handleConfirmEvent() {
         this.addAndEditDialogFormVisible = false;
         let parma = this.addAndEditFormData;
-        this.api.postApi("/manager/stu/update", parma).then(res => {
-            // todo
-        });
+        this.api.putApi("/manager/stu/update", parma);
       },
 
       // 取消提交修改的用户信息

src/views/system/stuMenu/index.vue

 <template>
   <div>
-    <!--搜索条件-->
-    <!--<el-input placeholder="请输入菜单名称"></el-input>-->
     <section>
       <el-row class="title-add">
-        <el-button type="primary" icon="el-icon-plus" @click="addMenu">新增菜单</el-button>
+        <el-col :span="17">
+          <el-button type="primary" icon="el-icon-plus" @click="addMenu">新增菜单</el-button>
+        </el-col>
+        <!--搜索条件-->
+        <el-col :span="4">
+          <el-input v-model="menuName" placeholder="请输入菜单名称" clearable></el-input>
+        </el-col>
+        <el-col :span="3">
+          <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
+          <el-button type="success" icon="el-icon-circle-close" @click="cleanUp">清除</el-button>
+        </el-col>
       </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>
@@ -24,8 +32,8 @@
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="iconImg" label="菜单图标" width="120" align="center"></el-table-column>
-        <el-table-column prop="pid" label="父级" align="center" width="100"></el-table-column>
+        <el-table-column prop="iconImg" label="菜单图标" width="150" align="center"></el-table-column>
+        <el-table-column prop="parentName" label="父级" align="center" width="100"></el-table-column>
         <el-table-column prop="url" label="页面url" align="center"></el-table-column>
         <el-table-column label="操作" align="center" width="180">
           <template slot-scope="scope">
@@ -34,11 +42,21 @@
           </template>
         </el-table-column>
       </el-table>
+      <div class="bottom-page">
+        <el-pagination
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="page"
+          :page-sizes="[12, 20, 30, 50]"
+          :page-size="limit"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total">
+        </el-pagination>
+      </div>
     </section>
 
     <!--新增/编辑模态框-->
-    <el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible"
-               :before-close="handleDialogClose">
+    <el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible" :before-close="handleDialogClose">
       <el-form v-if="showAddAndEditForm" ref="addAndEditElForm" :model="addAndEditFormData" :rules="addAndEditRules" class="form">
         <el-row>
           <el-col :span="10">
@@ -74,8 +92,7 @@
           </el-col>
           <el-col :span="10">
             <el-form-item prop="isVisible" label="是否启用：" :label-width="formLabelWidth">
-              <el-switch v-model="addAndEditFormData.isVisible" active-color="#13ce66"
-                         inactive-color="#ff4949"></el-switch>
+              <el-switch v-model="addAndEditFormData.isVisible" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
             </el-form-item>
           </el-col>
         </el-row>
@@ -89,14 +106,13 @@
           <el-col :span="10">
             <el-form-item prop="iconImg" label="菜单图标：" :label-width="formLabelWidth">
               <el-popover placement="top" title="点击选择需要设置的图标" width="260" trigger="click">
-                <i class="el-icon-platform-eleme"></i>
-                <i class="el-icon-eleme"></i>
-                <i class="el-icon-delete-solid"></i>
-                <i class="el-icon-delete"></i>
-                <i class="el-icon-s-tools"></i>
+                <span v-for="(item,index) in iconData" :key="index">
+                  <i :class="item" @click="getIcon(item)" style="font-size: 26px;"></i>
+                </span>
                 <el-button type="primary" slot="reference">选择icon图标</el-button>
               </el-popover>
             </el-form-item>
+            <i :class="addAndEditFormData.iconImg" class="icon-img"></i>
           </el-col>
         </el-row>
       </el-form>
@@ -113,6 +129,10 @@ export default {
   name: "stuMenu",
   data() {
     return {
+      total: 1,      // 总数
+      page: 1,       // 当前页
+      limit: 12,     // 分页大小
+      menuName: '',
       tableData: [],
       /* 模态框相关 */
       title: '',
@@ -154,6 +174,15 @@ export default {
         id: '11',
         name: '1'
       },
+      iconData:["el-icon-delete-solid","el-icon-delete","el-icon-s-tools","el-icon-setting","el-icon-user-solid","el-icon-user","el-icon-phone","el-icon-phone-outline","el-icon-star-on",
+        "el-icon-star-off","el-icon-s-goods","el-icon-goods","el-icon-warning","el-icon-warning-outline","el-icon-question","el-icon-info","el-icon-remove","el-icon-circle-plus","el-icon-success",
+        "el-icon-error","el-icon-zoom-in","el-icon-zoom-out","el-icon-remove-outline","el-icon-circle-plus-outline","el-icon-circle-check","el-icon-circle-close","el-icon-s-help",
+        "el-icon-help","el-icon-picture","el-icon-picture-outline","el-icon-picture-outline-round","el-icon-upload","el-icon-camera-solid","el-icon-camera","el-icon-video-camera-solid","el-icon-video-camera",
+        "el-icon-message-solid","el-icon-bell","el-icon-s-cooperation","el-icon-s-order","el-icon-s-platform","el-icon-s-fold","el-icon-s-unfold","el-icon-s-operation","el-icon-s-promotion",
+        "el-icon-s-home","el-icon-s-release","el-icon-s-ticket","el-icon-s-management","el-icon-s-open","el-icon-s-shop","el-icon-s-marketing","el-icon-s-flag","el-icon-s-comment",
+        "el-icon-s-finance","el-icon-s-claim","el-icon-s-custom","el-icon-s-opportunity","el-icon-s-data","el-icon-s-check","el-icon-s-grid","el-icon-menu","el-icon-folder","el-icon-folder-opened",
+        "el-icon-folder-add","el-icon-folder-remove","el-icon-folder-delete","el-icon-folder-checked","el-icon-monitor","el-icon-coin"
+      ]
     }
   },
   created() {
@@ -162,19 +191,42 @@ export default {
   methods: {
     getList() {
       // 加载表格数据
-      this.api.getApi("/menu/get").then(res => {
+      this.api.getApi("/menu/get?page="+this.page+"&limit="+this.limit+"&name=" + this.menuName).then(res => {
         this.tableData = res.data.list;
-        // debugger
-        // 分页
-
+        this.total = res.data.total;
+        this.page = res.data.pageNum;
+        this.limit = res.data.pageSize;
       })
     },
 
+    // 分页大小
+    handleSizeChange(val) {
+      this.limit = val;
+      this.getList();
+    },
+
+    // 第几页
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getList();
+    },
+
+    // 清除
+    cleanUp(){
+      this.menuName = '';
+      this.getList();
+    },
+
     // 筛选菜单类型
     filterTag(value, row) {
       return row.menuType === value;
     },
 
+    // 选择icon图标
+    getIcon(value){
+      this.addAndEditFormData.iconImg = value;
+    },
+
     // 树形下拉
     handleNodeClick(data) {
       this.pidTemp.id = data.id;
@@ -301,8 +353,6 @@ export default {
       this.showAddAndEditForm = true;
       this.addAndEditDialogFormVisible = true;
     },
-
-
   }
 }
 </script>
@@ -312,7 +362,19 @@ export default {
   margin: 10px 10px 10px 0;
 }
 
+.bottom-page{
+  height: 25px;
+}
+
 .title-add button {
   padding: 12px 7px;
 }
+
+.icon-img{
+  position: absolute;
+  right: 190px;
+  bottom: 20px;
+  font-size: 40px;
+}
+
 </style>