bug

src/views/manager/index.vue

@@ -16,12 +16,17 @@
                 <i :class="item.iconImg"></i>
                 <span>{{ item.name }}</span>
               </template>
-              <div v-for="(it,index) in item.child" :key="it.id">
-                <el-menu-item v-if="it.child.length === 0" :index="it.id">{{ it.name }}</el-menu-item>
-                <el-submenu v-else v-for="itChild in it.child" :key="itChild.id" :index="it.id">
-                  <template slot="title">{{ it.name }}</template>
-                  <el-menu-item :index="itChild.id">{{ itChild.name }}</el-menu-item>
-                </el-submenu>
+              <!-- 第二层菜单-->
+              <div v-for="(itemChild,index) in item.child" :key="itemChild.id">
+                <el-menu-item v-if="itemChild.child === undefined" :index="itemChild.id">{{ itemChild.name }}
+                </el-menu-item>
+                <!-- 第三层菜单-->
+                <div v-else v-for="itChild in itemChild.child" :key="itChild.id">
+                  <el-submenu :index="itemChild.id">
+                    <template slot="title">{{ itemChild.name }}</template>
+                    <el-menu-item :index="itChild.id">{{ itChild.name }}</el-menu-item>
+                  </el-submenu>
+                </div>
               </div>
             </el-submenu>
           </el-menu>
@@ -164,296 +169,297 @@
 </template>
 
 <script>
-  import {VueCropper} from 'vue-cropper'
-
-  export default {
-    name: 'manager',
-    components: {VueCropper},
-    data() {
-      return {
-        userInfo: [],
-        stu: [],
-        tableData: [],
-        isCollapse: true,
-        menuWith: '64px',
-        // 模态框相关
-        title: '',
-        closeOnClickModal: false,
-        addAndEditDialogFormVisible: false,
-        addAndEditFormData: {
-          name: '',
-          classId: '',
-          oldPassword: '',
-          password: '',
-          phone: '',
-          idCard: ''
-        },
-        formLabelWidth: '120px',
-        classIds: [],
-        // 菜单数组
-        menu: [],
-        // 修改密码相关
-        pwdFormData: {
-          oldPassword: '',
-          password: ''
-        },
-        pwdCloseOnClickModal: false,
-        pwdAddAndEditDialogFormVisible: false,
-
-        // 头像相关参数
-        avatarURL: require("@/assets/img/w1.png"),
-        editAvatarDialog: false,
-        previews: {},
-        option: {
-          img: '', // 裁剪图片的地址
-          info: true, // 裁剪框的大小信息
-          outputSize: 1, // 剪切后的图片质量（0.1-1）
-          full: true, // 输出原图比例截图 props名full
-          outputType: 'png', // 裁剪生成额图片的格式
-          canMove: true,  // 能否拖动图片
-          original: false,  // 上传图片是否显示原始宽高
-          canMoveBox: true,  // 能否拖动截图框
-          autoCrop: true, // 是否默认生成截图框
-          autoCropWidth: 100,
-          autoCropHeight: 100,
-          fixedBox: true // 截图框固定大小
-        },
+import {VueCropper} from 'vue-cropper'
+
+export default {
+  name: 'manager',
+  components: {VueCropper},
+  data() {
+    return {
+      userInfo: [],
+      stu: [],
+      tableData: [],
+      isCollapse: true,
+      menuWith: '64px',
+      // 模态框相关
+      title: '',
+      closeOnClickModal: false,
+      addAndEditDialogFormVisible: false,
+      addAndEditFormData: {
+        name: '',
+        classId: '',
+        oldPassword: '',
+        password: '',
+        phone: '',
+        idCard: ''
+      },
+      formLabelWidth: '120px',
+      classIds: [],
+      // 菜单数组
+      menu: [],
+      // 修改密码相关
+      pwdFormData: {
+        oldPassword: '',
+        password: ''
+      },
+      pwdCloseOnClickModal: false,
+      pwdAddAndEditDialogFormVisible: false,
+
+      // 头像相关参数
+      avatarURL: require("@/assets/img/w1.png"),
+      editAvatarDialog: false,
+      previews: {},
+      option: {
+        img: '', // 裁剪图片的地址
+        info: true, // 裁剪框的大小信息
+        outputSize: 1, // 剪切后的图片质量（0.1-1）
+        full: true, // 输出原图比例截图 props名full
+        outputType: 'png', // 裁剪生成额图片的格式
+        canMove: true,  // 能否拖动图片
+        original: false,  // 上传图片是否显示原始宽高
+        canMoveBox: true,  // 能否拖动截图框
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 100,
+        autoCropHeight: 100,
+        fixedBox: true // 截图框固定大小
+      },
+    }
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    // 初始化，加载用户信息和菜单
+    init() {
+      let userInfo = this.$store.state.userInfo;
+      if (userInfo === null || userInfo.length === 0) {
+        let item = localStorage.getItem("userInfo");
+        userInfo = JSON.parse(item);
       }
-    },
-    created() {
-      this.init();
-    },
-    methods: {
-      init() {
-        // 从vuex中获取用户信息，找不到去本地缓存中找
-        let userInfo = this.$store.state.userInfo;
-        if (userInfo === null) {
-          let item = localStorage.getItem("userInfo");
-          userInfo = JSON.parse(item);
-        }
-        this.userInfo = userInfo;
-        // 获取菜单
-        let routes = this.$store.state.routes;
-        if (routes.length === 0) {
-          let item = localStorage.getItem("routers");
-          if (item === undefined) {
-            this.api.getApi('/menu/get/treeMenu').then(res => {
-              if (res.data !== undefined) {
-                this.menu = res.data;
-                this.$store.commit("initRoutes", res.data);
-              }
-            })
-          } else {
-            this.menu = JSON.parse(item);
-          }
+      this.userInfo = userInfo;
+      // 获取菜单
+      let routes = this.$store.state.routes;
+      if (routes === null || routes.length === 0) {
+        let item = localStorage.getItem("routers");
+        if (item === undefined ||  item === null) {
+          this.api.getApi('/menu/get/treeMenu').then(res => {
+            if (res.data !== undefined) {
+              this.menu = res.data;
+              this.$store.commit("initRoutes", res.data);
+            }
+          })
         } else {
-          this.menu = this.$store.state.routes;
+          this.menu = JSON.parse(item);
+          this.$store.commit("initRoutes", this.menu);
         }
-      },
+      } else {
+        this.menu = this.$store.state.routes;
+      }
+    },
 
-      // 点开菜单
-      handleOpen() {
-        this.isCollapse = false
-        this.menuWith = '218px';
-      },
+    // 点开菜单
+    handleOpen() {
+      this.isCollapse = false
+      this.menuWith = '218px';
+    },
 
-      // 关闭菜单
-      handleClose() {
-        this.isCollapse = true
-        // 这里为了解决背景灰色框执行太快，体验不好问题
-        setTimeout(() => {
-          this.menuWith = '64px';
-        }, 250);
-      },
+    // 关闭菜单
+    handleClose() {
+      this.isCollapse = true
+      // 这里为了解决背景灰色框执行太快，体验不好问题
+      setTimeout(() => {
+        this.menuWith = '64px';
+      }, 250);
+    },
 
-      // 修改用户头像
-      editAvatar() {
-        this.editAvatarDialog = true
-        this.option.img = this.avatarURL
-      },
+    // 修改用户头像
+    editAvatar() {
+      this.editAvatarDialog = true
+      this.option.img = this.avatarURL
+    },
 
-      // 修改用户密码
-      updatePwd() {
-        this.pwdAddAndEditDialogFormVisible = true;
-      },
+    // 修改用户密码
+    updatePwd() {
+      this.pwdAddAndEditDialogFormVisible = true;
+    },
 
-      // 提交修改的密码
-      submitPwd() {
-        let param = {
-          id: this.userInfo.id,
-          oldPwd: this.pwdFormData.oldPassword,
-          newPwd: this.pwdFormData.password
-        }
-        this.api.getApi("/updatePwd", param).then(e => {
-          console.log(e);
-        })
-      },
+    // 提交修改的密码
+    submitPwd() {
+      let param = {
+        id: this.userInfo.id,
+        oldPwd: this.pwdFormData.oldPassword,
+        newPwd: this.pwdFormData.password
+      }
+      this.api.getApi("/updatePwd", param).then(e => {
+        console.log(e);
+      })
+    },
 
-      // 关闭密码弹框
-      pwdAddAndEditClose() {
-        this.pwdAddAndEditDialogFormVisible = false;
-      },
+    // 关闭密码弹框
+    pwdAddAndEditClose() {
+      this.pwdAddAndEditDialogFormVisible = false;
+    },
 
-      // 修改用户信息
-      updateUserInfo() {
-        // 查找班级信息
-        this.api.getApi("/stu/class/get/treeData").then(e => {
-          this.classIds = e.data;
-        })
-        this.title = "修改用户信息";
-        this.addAndEditDialogFormVisible = true;
-        this.$set(this.addAndEditFormData, 'name', this.userInfo.name);
-        this.$set(this.addAndEditFormData, 'classId', this.userInfo.classId);
-        this.$set(this.addAndEditFormData, 'phone', this.userInfo.phone);
-        this.$set(this.addAndEditFormData, 'idCard', this.userInfo.idCard);
-      },
+    // 修改用户信息
+    updateUserInfo() {
+      // 查找班级信息
+      this.api.getApi("/stu/class/get/treeData").then(e => {
+        this.classIds = e.data;
+      })
+      this.title = "修改用户信息";
+      this.addAndEditDialogFormVisible = true;
+      this.$set(this.addAndEditFormData, 'name', this.userInfo.name);
+      this.$set(this.addAndEditFormData, 'classId', this.userInfo.classId);
+      this.$set(this.addAndEditFormData, 'phone', this.userInfo.phone);
+      this.$set(this.addAndEditFormData, 'idCard', this.userInfo.idCard);
+    },
 
-      // 提交修改的用户信息
-      handleConfirmEvent() {
-        this.addAndEditDialogFormVisible = false;
-        let parma = this.addAndEditFormData;
-        this.api.postApi("/manager/stu/update", parma).then(res => {
+    // 提交修改的用户信息
+    handleConfirmEvent() {
+      this.addAndEditDialogFormVisible = false;
+      let parma = this.addAndEditFormData;
+      this.api.postApi("/manager/stu/update", parma).then(res => {
 
-        });
+      });
 
 
-      },
+    },
 
-      // 取消提交修改的用户信息
-      handleDialogClose() {
-        this.addAndEditDialogFormVisible = false;
-      },
+    // 取消提交修改的用户信息
+    handleDialogClose() {
+      this.addAndEditDialogFormVisible = false;
+    },
 
-      // 退出系统
-      loginOut() {
-        this.api.getApi("/logout").then(e => {
-          if (e.data.code === 200) {
-            this.$store.commit("removeState")
-            this.$router.push("/login");
-            localStorage.removeItem("Authorization");
-          }
-        });
-      },
+    // 退出系统
+    loginOut() {
+      this.api.getApi("/logout").then(e => {
+        if (e.data.code === 200) {
+          this.$store.commit("removeState")
+          this.$router.push("/login");
+          localStorage.removeItem("Authorization");
+        }
+      });
+    },
 
-      /**用户头像相关方法*/
-      // 保存头像修改
-      saveEditAvatar() {
-        this.editAvatarDialog = false
-        this.finish('blob')
-      },
-      // 放大/缩小
-      changeScale(num) {
-        num = num || 1;
-        this.$refs.cropper.changeScale(num);
-      },
-      // 左旋转
-      rotateLeft() {
-        this.$refs.cropper.rotateLeft();
-      },
-      // 右旋转
-      rotateRight() {
-        this.$refs.cropper.rotateRight();
-      },
-      // 保存上传图片
-      finish(type) {
-        if (type === 'blob') {
-          this.$refs.cropper.getCropBlob((data) => {
-            this.avatarURL = window.URL.createObjectURL(data)
-            // todo 访问接口保存到数据库写这儿!
+    /**用户头像相关方法*/
+    // 保存头像修改
+    saveEditAvatar() {
+      this.editAvatarDialog = false
+      this.finish('blob')
+    },
+    // 放大/缩小
+    changeScale(num) {
+      num = num || 1;
+      this.$refs.cropper.changeScale(num);
+    },
+    // 左旋转
+    rotateLeft() {
+      this.$refs.cropper.rotateLeft();
+    },
+    // 右旋转
+    rotateRight() {
+      this.$refs.cropper.rotateRight();
+    },
+    // 保存上传图片
+    finish(type) {
+      if (type === 'blob') {
+        this.$refs.cropper.getCropBlob((data) => {
+          this.avatarURL = window.URL.createObjectURL(data)
+          // todo 访问接口保存到数据库写这儿!
 
 
-          })
-        } else {
-          this.$refs.cropper.getCropData((data) => {
-            // todo 访问接口保存到数据库写这儿!
+        })
+      } else {
+        this.$refs.cropper.getCropData((data) => {
+          // todo 访问接口保存到数据库写这儿!
 
 
-          })
-        }
-      },
-      // 实时预览函数
-      realTime(data) {
-        this.previews = data
-      },
-      // 下载图片
-      down(type) {
-        var aLink = document.createElement('a')
-        aLink.download = 'author-img'
-        if (type === 'blob') {
-          this.$refs.cropper.getCropBlob((data) => {
-            aLink.href = window.URL.createObjectURL(data)
-            aLink.click()
-          })
+        })
+      }
+    },
+    // 实时预览函数
+    realTime(data) {
+      this.previews = data
+    },
+    // 下载图片
+    down(type) {
+      var aLink = document.createElement('a')
+      aLink.download = 'author-img'
+      if (type === 'blob') {
+        this.$refs.cropper.getCropBlob((data) => {
+          aLink.href = window.URL.createObjectURL(data)
+          aLink.click()
+        })
+      } else {
+        this.$refs.cropper.getCropData((data) => {
+          aLink.href = data;
+          aLink.click()
+        })
+      }
+    },
+    // 更换头像--上传本地图片
+    uploadImg(file) {
+      var _this = this;
+      var reader = new FileReader();
+      reader.onload = (e) => {
+        let data;
+        if (typeof e.target.result === 'object') {
+          // 把Array Buffer转化为blob 如果是base64不需要
+          data = window.URL.createObjectURL(new Blob([e.target.result]))
         } else {
-          this.$refs.cropper.getCropData((data) => {
-            aLink.href = data;
-            aLink.click()
-          })
-        }
-      },
-      // 更换头像--上传本地图片
-      uploadImg(file) {
-        var _this = this;
-        var reader = new FileReader();
-        reader.onload = (e) => {
-          let data;
-          if (typeof e.target.result === 'object') {
-            // 把Array Buffer转化为blob 如果是base64不需要
-            data = window.URL.createObjectURL(new Blob([e.target.result]))
-          } else {
-            data = e.target.result
-          }
-          _this.option.img = data
+          data = e.target.result
         }
-        reader.readAsArrayBuffer(file.raw);
-      },
-    }
+        _this.option.img = data
+      }
+      reader.readAsArrayBuffer(file.raw);
+    },
   }
+}
 </script>
 
 <style scoped>
-  .el-menu-vertical-demo:not(.el-menu--collapse) {
-    width: 200px;
-    min-height: 400px;
-  }
-
-  .nameClass {
-    color: #133cce;
-    float: right;
-    margin-top: 15px;
-    margin-left: 8px;
-    font-family: '微软雅黑 Light', sans-serif;
-    font-size: 18px;
-  }
-
-  .hideIcon {
-    font-size: 30px;
-    color: #e7efee;
-    margin: 10px 35%;
-  }
-
-  .imgTitle {
-    /*margin-top: 6px;*/
-  }
-
-  /*用户头像修改*/
-  .previewBox {
-    text-align: center;
-    margin-left: 60px;
-  }
-
-  .preview {
-    width: 150px;
-    height: 150px;
-    margin: 0px auto 20px auto;
-    border-radius: 50%;
-    border: 1px solid #ccc;
-    background-color: #ccc;
-    overflow: hidden;
-  }
-
-  .cropper {
-    width: 260px;
-    height: 260px;
-  }
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 400px;
+}
+
+.nameClass {
+  color: #133cce;
+  float: right;
+  margin-top: 15px;
+  margin-left: 8px;
+  font-family: '微软雅黑 Light', sans-serif;
+  font-size: 18px;
+}
+
+.hideIcon {
+  font-size: 30px;
+  color: #e7efee;
+  margin: 10px 35%;
+}
+
+.imgTitle {
+  /*margin-top: 6px;*/
+}
+
+/*用户头像修改*/
+.previewBox {
+  text-align: center;
+  margin-left: 60px;
+}
+
+.preview {
+  width: 150px;
+  height: 150px;
+  margin: 0px auto 20px auto;
+  border-radius: 50%;
+  border: 1px solid #ccc;
+  background-color: #ccc;
+  overflow: hidden;
+}
+
+.cropper {
+  width: 260px;
+  height: 260px;
+}
 </style>