From f49eebe79d7c30b074f13fe46f453f59032dcda2 Mon Sep 17 00:00:00 2001
From: cxt104926 <1049266034@qq.com>
Date: Tue, 27 Apr 2021 17:23:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B5=8C=E5=85=A5=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                    |   3 +
 config/index.js                              |   6 +-
 src/api.js                                   |   2 +-
 src/router/index.js                          |  54 +++++---
 src/store/store.js                           |   4 +-
 src/views/login.vue                          |   4 +-
 src/views/manager/index.vue                  | 127 +++++++++----------
 src/views/system/stuClass/index.vue          |   4 +-
 src/views/system/stuIframe/index.vue         |  46 +++++++
 src/views/system/stuMenu/index.vue           |  72 +++++++++++
 src/views/system/{menu => welcome}/index.vue |   6 +-
 11 files changed, 234 insertions(+), 94 deletions(-)
 create mode 100644 src/views/system/stuIframe/index.vue
 create mode 100644 src/views/system/stuMenu/index.vue
 rename src/views/system/{menu => welcome}/index.vue (69%)

diff --git a/README.md b/README.md
index bf32742..6cea8f8 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,9 @@ npm run build --report
 
 注册
 
+菜单加载：
+    登录成功后去后台查询菜单，在查询完菜单后，在根据用户去查询权限，将权限code也携带在菜单中，可以实现某一些页面中的按钮这个用户没有权限，就不显示。当然在后端的接口也要验证是否有权限，否则通过手动修改按钮显示也是可以实现数据传入后台。
+
 #### 2.软件架构
 1.  系统环境
 
diff --git a/config/index.js b/config/index.js
index 361fd9b..ff046b2 100644
--- a/config/index.js
+++ b/config/index.js
@@ -10,18 +10,18 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
-      '/': {
+      '/api': {
         target: 'http://localhost:2020', // 请求的接口地址
         changeOrigin: true,
         pathRewrite: {
-          '^/': '/'
+          '^/api': '/'
         }
       }
     },
 
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST
-    port: 8088, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    port: 2021, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,
     notifyOnErrors: true,
diff --git a/src/api.js b/src/api.js
index bffd8df..97a9441 100644
--- a/src/api.js
+++ b/src/api.js
@@ -89,7 +89,7 @@ axios.interceptors.response.use(success => {
 /**
  * 封装请求
  */
-let base = '';
+let base = 'api/';
 export const postApi = (url, params) => {
   return axios({
     method: 'post',
diff --git a/src/router/index.js b/src/router/index.js
index 82209f5..9c8182b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,17 +3,16 @@ import Router from 'vue-router'
 import login from '../views/login'
 import register from '../views/register/register'
 import manager from '../views/manager/index'
-import menu from '../views/system/menu'
-import stuClass from '../views/system/stuClass'
+import de from "element-ui/src/locale/lang/de";
 
 Vue.use(Router)
 
 const router = new Router({
   routes: [
     {
-      path: '',         // 访问的地址
-      redirect:'/login', // 重定向
-      component: login   // 组件名称
+      path: '',            // 访问的地址
+      redirect: '/login',  // 重定向
+      component: login     // 组件名称
     },
     {
       path: '/login',
@@ -28,18 +27,32 @@ const router = new Router({
     {
       path: '/manager',
       name: 'manager',
-      component: manager
+      redirect: '/system/welcome',
+      component: manager,
+      children: [
+        {
+          path: '/system/welcome',
+          name: 'welcome',
+          component: () => import("../views/system/welcome")
+        },
+        {
+          // 嵌入页面
+          path: '/system/stuIframe',
+          name: 'stuIframe',
+          component: () => import("../views/system/stuIframe")
+        },
+        {
+          path: '/system/stuMenu',
+          name: 'stuMenu',
+          component: () => import("../views/system/stuMenu")
+        },
+        {
+          path: '/system/stuClass',
+          name: 'stuClass',
+          component: () => import("../views/system/stuClass")
+        }
+      ]
     },
-    {
-      path: '/system/menu',
-      name: 'menu',
-      component: menu
-    },
-    {
-      path: '/system/stuClass',
-      name: 'stuClass',
-      component: stuClass
-    }
   ]
 });
 
@@ -53,7 +66,14 @@ router.beforeEach((to, from, next) => {
     if (token === 'null' || token === '') {
       next('/login');
     } else {
-      next();
+      // 看是否是嵌入页面，嵌入页面url前缀有iframe:
+      let path = to.path;
+      if (path.indexOf("iframe:") !== -1) {
+        // router.push('/system/iframe');
+        router.push({path: '/system/stuIframe', query: {url: path}});
+      } else {
+        next();
+      }
     }
   }
 });
diff --git a/src/store/store.js b/src/store/store.js
index 890b140..46ad93c 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -6,7 +6,7 @@ vue.use(vuex)
 export default new vuex.Store({
   state: {
     routes: [],
-    userInfo: []
+    userInfo: [],
   },
 
   // 同步
@@ -26,7 +26,7 @@ export default new vuex.Store({
     userInfo(state, data) {
       state.userInfo = data;
       localStorage.setItem("userInfo", JSON.stringify(data));
-    }
+    },
   },
 
   // 异步
diff --git a/src/views/login.vue b/src/views/login.vue
index a5a1c4d..db5736c 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -44,7 +44,7 @@
           verification: ""
         },
         rememberMe: true,
-        imgSrc: "/getVerify?temp=" + new Date(),
+        imgSrc: "/api/getVerify?temp=" + new Date(),
         message: "",
         addAndEditRules: {
           account: {
@@ -68,7 +68,7 @@
     created() {},
     methods: {
       getVerification() {
-        this.imgSrc = "/getVerify?temp=" + +new Date();
+        this.imgSrc = "/api/getVerify?temp=" + +new Date();
       },
       handleConfirmEvent() {
         this.$refs.loginFrom.validate(valid => {
diff --git a/src/views/manager/index.vue b/src/views/manager/index.vue
index a9eb3fb..5d7eb64 100644
--- a/src/views/manager/index.vue
+++ b/src/views/manager/index.vue
@@ -1,12 +1,12 @@
 <template>
   <div style="height: 100%">
     <el-container style="height: 100%; border: 1px solid #eee">
-      <el-aside :width="menuWith" style="background-color: rgb(238, 241, 246)">
+      <el-aside :width="isCollapse?'64px':'200px'" style="background-color: rgb(238, 241, 246)">
         <el-scrollbar style="width: 100%">
           <el-menu :collapse="isCollapse" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
-            active-text-color="#66b1ff">
-            <i v-if="isCollapse" @click="handleOpen" class="hideIcon el-icon-s-unfold"></i>
-            <i v-else @click="handleClose" class="hideIcon el-icon-s-fold"></i>
+                   active-text-color="#66b1ff" :router="true" :collapse-transition="false" :default-active="activePath">
+            <i v-if="isCollapse" @click="isCollapse = false" class="hideIcon el-icon-s-unfold"></i>
+            <i v-else @click="isCollapse = true" class="hideIcon el-icon-s-fold"></i>
             <el-submenu v-for="(item,index) in menu" :key="item.id" :index="item.id">
               <template slot="title">
                 <i :class="item.iconImg"></i>
@@ -14,13 +14,15 @@
               </template>
               <!-- 第二层菜单-->
               <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 v-if="itemChild.child === undefined" :index="itemChild.url"
+                              @click="changeActivePath(itemChild.url)">{{ 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-menu-item :index="itChild.url" @click="changeActivePath(itChild.url)">{{ itChild.name }}
+                    </el-menu-item>
                   </el-submenu>
                 </div>
               </div>
@@ -28,14 +30,13 @@
           </el-menu>
         </el-scrollbar>
       </el-aside>
-
       <!-- 系统头部 -->
       <el-container>
         <el-header style="text-align: right; font-size: 12px;background-color: #a9b3a9">
           <el-dropdown>
             <div style="margin-top: 5px">
               <el-avatar :size="50" class="imgTitle">
-                <img :src="avatarURL" />
+                <img :src="avatarURL"/>
               </el-avatar>
               <span class="nameClass">
                 {{ userInfo.name }}
@@ -49,57 +50,58 @@
             </el-dropdown-menu>
           </el-dropdown>
         </el-header>
+        <!-- 修改头像模态框 -->
+        <el-dialog title="修改头像" :visible.sync="editAvatarDialog" width="30%">
+          <el-row type="flex" justify="center">
+            <div class="cropper">
+              <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"
+                          :info="option.info" :full="option.full" :canMove="option.canMove"
+                          :canMoveBox="option.canMoveBox"
+                          :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
+                          :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox"
+                          @realTime="realTime"></vueCropper>
+            </div>
+            <div class="previewBox">
+              <div :style="previews.div" class="preview">
+                <img :src="previews.url" :style="previews.img">
+              </div>
+              <el-row type="flex" justify="center">
+                <el-upload action="" :show-file-list="false" :auto-upload="false" :on-change="uploadImg">
+                  <el-button size="mini" type="primary">更换头像</el-button>
+                </el-upload>
+              </el-row>
+              <br>
+              <el-row>
+                <el-button icon="el-icon-plus" circle size="mini" @click="changeScale(1)"></el-button>
+                <el-button icon="el-icon-minus" circle size="mini" @click="changeScale(-1)"></el-button>
+                <el-button icon="el-icon-download" circle size="mini" @click="down('blob')"></el-button>
+                <el-button icon="el-icon-refresh-left" circle size="mini" @click="rotateLeft"></el-button>
+                <el-button icon="el-icon-refresh-right" circle size="mini" @click="rotateRight"></el-button>
+              </el-row>
+            </div>
+          </el-row>
+          <span slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="saveEditAvatar">确 定</el-button>
+            <el-button @click="editAvatarDialog = false">取 消</el-button>
+          </span>
+        </el-dialog>
         <el-main>
-          <router-view />
+          <router-view></router-view>
         </el-main>
       </el-container>
     </el-container>
 
-    <!-- 修改头像模态框 -->
-    <el-dialog title="修改头像" :visible.sync="editAvatarDialog" width="30%">
-      <el-row type="flex" justify="center">
-        <div class="cropper">
-          <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"
-            :info="option.info" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox"
-            :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth"
-            :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" @realTime="realTime"></vueCropper>
-        </div>
-        <div class="previewBox">
-          <div :style="previews.div" class="preview">
-            <img :src="previews.url" :style="previews.img">
-          </div>
-          <el-row type="flex" justify="center">
-            <el-upload action="" :show-file-list="false" :auto-upload="false" :on-change="uploadImg">
-              <el-button size="mini" type="primary">更换头像</el-button>
-            </el-upload>
-          </el-row>
-          <br>
-          <el-row>
-            <el-button icon="el-icon-plus" circle size="mini" @click="changeScale(1)"></el-button>
-            <el-button icon="el-icon-minus" circle size="mini" @click="changeScale(-1)"></el-button>
-            <el-button icon="el-icon-download" circle size="mini" @click="down('blob')"></el-button>
-            <el-button icon="el-icon-refresh-left" circle size="mini" @click="rotateLeft"></el-button>
-            <el-button icon="el-icon-refresh-right" circle size="mini" @click="rotateRight"></el-button>
-          </el-row>
-        </div>
-      </el-row>
-      <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="saveEditAvatar">确 定</el-button>
-        <el-button @click="editAvatarDialog = false">取 消</el-button>
-      </span>
-    </el-dialog>
-
     <!-- 密码模态框 -->
     <el-dialog title="修改密码" :closeOnClickModal="pwdCloseOnClickModal" :visible.sync="pwdAddAndEditDialogFormVisible"
-      :before-close="pwdAddAndEditClose" width="30%">
+               :before-close="pwdAddAndEditClose" width="30%">
       <el-form ref="pwdEditElForm" :model="pwdFormData" class="form">
         <el-form-item prop="oldPassword" label="旧密码：" :label-width="formLabelWidth">
           <el-input v-model="pwdFormData.oldPassword" placeholder="请输入旧密码" style="width:90%" show-password clearable
-            autosize></el-input>
+                    autosize></el-input>
         </el-form-item>
         <el-form-item prop="password" label="新密码：" :label-width="formLabelWidth">
           <el-input v-model="pwdFormData.password" placeholder="请输入新密码" style="width:90%" show-password clearable
-            autosize></el-input>
+                    autosize></el-input>
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -110,11 +112,11 @@
 
     <!-- 用户信息模态框 -->
     <el-dialog :title="title" :closeOnClickModal="closeOnClickModal" :visible.sync="addAndEditDialogFormVisible"
-      :before-close="handleDialogClose" width="30%">
+               :before-close="handleDialogClose" width="30%">
       <el-form ref="addAndEditElForm" :model="addAndEditFormData" class="form">
         <el-form-item prop="name" label="用户名：" :label-width="formLabelWidth">
           <el-input v-model="addAndEditFormData.name" placeholder="请输入用户名" style="width:90%" type="text" clearable
-            autosize></el-input>
+                    autosize></el-input>
         </el-form-item>
         <el-form-item prop="classId" label="班级：" :label-width="formLabelWidth">
           <el-select v-model="addAndEditFormData.classId" placeholder="请选择班级" style="width:90%" clearable autosize>
@@ -123,11 +125,11 @@
         </el-form-item>
         <el-form-item prop="idCard" label="身份证号：" :label-width="formLabelWidth">
           <el-input v-model="addAndEditFormData.idCard" placeholder="请输入身份证号" style="width:90%" type="number" min="0"
-            clearable autosize></el-input>
+                    clearable autosize></el-input>
         </el-form-item>
         <el-form-item prop="phone" label="电话：" :label-width="formLabelWidth">
           <el-input v-model="addAndEditFormData.phone" placeholder="请输入电话" style="width:90%" type="number" min="0"
-            clearable autosize></el-input>
+                    clearable autosize></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -154,7 +156,7 @@
         stu: [],
         tableData: [],
         isCollapse: true,
-        menuWith: '64px',
+        activePath: '', // 当前激活菜单的index,存储在localStorage中
         // 模态框相关
         title: '',
         closeOnClickModal: false,
@@ -202,6 +204,7 @@
     created() {
       // 初始化，加载用户信息和菜单
       this.init();
+      this.activePath = window.localStorage.getItem("currentMenu");
     },
     methods: {
       init() {
@@ -232,19 +235,10 @@
         }
       },
 
-      // 点开菜单
-      handleOpen() {
-        this.isCollapse = false
-        this.menuWith = '218px';
-      },
-
-      // 关闭菜单
-      handleClose() {
-        this.isCollapse = true
-        // 这里为了解决背景灰色框执行太快，体验不好问题
-        setTimeout(() => {
-          this.menuWith = '64px';
-        }, 250);
+      // 点击的菜单变色
+      changeActivePath(path) {
+        localStorage.setItem("currentMenu", path);
+        this.activePath = path;
       },
 
       // 修改用户头像
@@ -262,7 +256,7 @@
       submitPwd() {
         let url = "/updatePwd?id=" + this.userInfo.id + "&oldPwd=" + this.pwdFormData.oldPassword + "&newPwd=" + this.pwdFormData.password;
         this.api.getApi(url).then(e => {
-          if (e.data.code === 200){
+          if (e.data.code === 200) {
             this.pwdAddAndEditDialogFormVisible = false;
             this.loginOut();
           }
@@ -310,8 +304,9 @@
           if (e.data.code === 200) {
             this.$store.commit("removeState")
             localStorage.removeItem("Authorization");
+            localStorage.removeItem("currentMenu");
             this.$router.push("/login");
-          }else {
+          } else {
             Message.info("系统出现问题")
           }
         });
diff --git a/src/views/system/stuClass/index.vue b/src/views/system/stuClass/index.vue
index b163553..0714ecd 100644
--- a/src/views/system/stuClass/index.vue
+++ b/src/views/system/stuClass/index.vue
@@ -1,5 +1,7 @@
 <template>
-
+  <div>
+    班
+  </div>
 </template>
 
 <script>
diff --git a/src/views/system/stuIframe/index.vue b/src/views/system/stuIframe/index.vue
new file mode 100644
index 0000000..df98071
--- /dev/null
+++ b/src/views/system/stuIframe/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="iframe-container">
+    <iframe id="iframeId" :src="src" frameborder="0" class="pc iframe" scrolling="auto"></iframe>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "stuIframe",
+    data() {
+      return {
+        src: '',
+      }
+    },
+    created() {
+      let iframe = this.$route.query.url;
+      let split = iframe.split(":");
+      this.src = split[1];
+    },
+    methods: {},
+    mounted() {
+      function changeFrameHeight() {
+        const oIframe = document.getElementById('iframeId');
+        const deviceWidth = document.documentElement.clientWidth;
+        const deviceHeight = document.documentElement.clientHeight;
+        oIframe.style.width = (Number(deviceWidth) - 220) + 'px';
+        oIframe.style.height = (Number(deviceHeight) - 125) + 'px';
+      }
+
+      changeFrameHeight()
+    },
+  }
+</script>
+
+<style scoped>
+  .iframe-container {
+    text-align: center;
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+
+  .iframe-container .iframe {
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/src/views/system/stuMenu/index.vue b/src/views/system/stuMenu/index.vue
new file mode 100644
index 0000000..d40e0c0
--- /dev/null
+++ b/src/views/system/stuMenu/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="活动名称">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="活动区域">
+        <el-select v-model="form.region" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="活动时间">
+        <el-col :span="11">
+          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
+        </el-col>
+        <el-col class="line" :span="2">-</el-col>
+        <el-col :span="11">
+          <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="即时配送">
+        <el-switch v-model="form.delivery"></el-switch>
+      </el-form-item>
+      <el-form-item label="活动性质">
+        <el-checkbox-group v-model="form.type">
+          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+          <el-checkbox label="地推活动" name="type"></el-checkbox>
+          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="特殊资源">
+        <el-radio-group v-model="form.resource">
+          <el-radio label="线上品牌商赞助"></el-radio>
+          <el-radio label="线下场地免费"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="活动形式">
+        <el-input type="textarea" v-model="form.desc"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">立即创建</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "stuMenu",
+    data() {
+      return {
+        form: {
+          name: '',
+          region: '',
+          date1: '',
+          date2: '',
+          delivery: false,
+          type: [],
+          resource: '',
+          desc: ''
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/system/menu/index.vue b/src/views/system/welcome/index.vue
similarity index 69%
rename from src/views/system/menu/index.vue
rename to src/views/system/welcome/index.vue
index d36c978..43bd329 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/welcome/index.vue
@@ -1,10 +1,12 @@
 <template>
-
+  <div>
+     欢迎使用
+  </div>
 </template>
 
 <script>
   export default {
-    name: "menu",
+    name: "welcome",
     data() {
       return {}
     }
-- 
GitLab