新增个人中心页面

ruoyi-ui/src/router/index.js

@@ -56,10 +56,38 @@ export const constantRoutes = [
       }
     ]
   }
+  ,{
+    path: '/bkuser',
+    component: resolve => require(['../views/bookmark/bkuser/index.vue'], resolve),
+    hidden: true,
+    children:[
+      {
+        path: '/bkindex',
+        component: resolve => require(['../views/system/user/profile/bkindex.vue'], resolve),
+        hidden: true,
+        meta:{
+          title: '个人中心',icon:'user',
+          requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
+        },
+      }
+      ,
+      {
+        path: '/importHtml',
+        name: 'importHtml',
+        component: resolve => require(['../views/bookmark/common/ImportHtml.vue'], resolve),
+        hidden: true,
+        meta:{
+          title: '导入书签',icon:'user',
+          requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
+        },
+      }
+
+    ]
+  }
   ,{
     path: '/daohang',
     component: resolve => require(['../views/bookmark/menu/index.vue'], resolve),
-    hidden: true
+    hidden: true,
   },
   {
     path: '/login',
@@ -186,14 +214,6 @@ export const constantRoutes = [
           title: '用户标签',icon:'user',
           requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
         },
-      },{
-        path: '/importHtml',
-        name: 'importHtml',
-        component: resolve => require(['../views/bookmark/common/ImportHtml.vue'], resolve),
-        meta:{
-          title: '导入书签',icon:'user',
-          requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
-        },
       },{
         path: '/ceshi',
         name: 'ceshi',

ruoyi-ui/src/views/bookmark/bkuser/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+
+
+    <div class="head-top">
+      <div class="goIndex">
+        <el-page-header @back="goBack" content="">
+        </el-page-header>
+      </div>
+      <div style="position: absolute;left: 47.5%;margin-top:-20px">
+        设置  ·  王先生
+      </div>
+
+    </div>
+
+
+
+    <div class="head-tag">
+      <div class="mdui-btn-group head-tag-button">
+        <button type="button"
+                class="mdui-btn mdui-color-theme-accent mdui-ripple mdui-btn-active mdui-color-blue-50 mdui-text-color-blue-600">
+          个人中心
+        </button>
+        <button type="button" class="mdui-btn mdui-color-theme-accent mdui-ripple">系统设置</button>
+        <button class="mdui-btn mdui-color-theme-accent mdui-ripple">导入书签</button>
+        <button class="mdui-btn mdui-color-theme-accent mdui-ripple">备份导出</button>
+        <button class="mdui-btn mdui-color-theme-accent mdui-ripple">更新日志</button>
+        <button class="mdui-btn mdui-color-theme-accent mdui-ripple">关于我们</button>
+      </div>
+    </div>
+
+
+
+<!--        <bkindex></bkindex>-->
+
+    <router-view ></router-view>
+
+
+
+
+  </div>
+
+</template>
+<script>
+
+  import bkindex from "../../system/user/profile/bkindex.vue";
+  import userAvatar from "../../system/user/profile/userAvatar.vue";
+  export default {
+    name: 'areaTree',
+    components: {bkindex,userAvatar},
+
+    data: function () {
+      return {}
+    },
+    methods: {
+      goBack() {
+        var that = this;
+        //全部书签
+        that.$router.push({
+          path: "/content",
+          query: {
+            menuId: 'BOOKMARK'
+          }
+        })
+      }
+    },
+    mounted() {
+      document.querySelector('body').setAttribute('style', 'background-color:#f6f5f4')
+    },
+    beforeDestroy() {
+      document.querySelector('body').removeAttribute('style')
+    }
+  }
+</script>
+<style>
+
+
+</style>
+<style scoped>
+
+  .goIndex{
+    padding-left: 18px;padding-top: 18px;
+  }
+  .head-tag {
+    width: 100%;
+    height: 48px;
+    background-color: #ffffff;
+    display: flex
+  }
+
+  .head-tag-button {
+    display: flex;
+    justify-content: space-between;
+    width: 50%;
+    margin: 0 auto;
+  }
+
+  .head-top {
+    width: 100%;
+    height: 48px;
+    background-color: #ffffff;
+
+  }
+
+  .main {
+    width: 100%;
+    height: 100%;
+    background-color: #f6f5f4;
+    border-top: 1px solid #D4D4D4;
+  }
+
+  .mian-content {
+    width: 50%;
+    height: 500px;
+
+    margin: 0 auto
+  }
+
+</style>

ruoyi-ui/src/views/bookmark/common/ImportHtml.vue

@@ -2,7 +2,7 @@
   <div >
 
 
-    <Bkhead></Bkhead>
+
 
     <div style="width:360px;height:260px;margin: 0 auto;margin-top: 40px">
       <el-upload

ruoyi-ui/src/views/bookmark/index/index.vue

@@ -5,6 +5,7 @@
       <transition name="el-zoom-in-left">
         <el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left isaside"
                   style="overflow-x:hidden;overflow-y: hidden;">
+
           <el-header class="aside-logo ">
             <!--        <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>-->
             <div class="logoname">
@@ -13,110 +14,56 @@
             <div class="logoright ">
               <i class="el-icon-plus mdui-ripple"/>
             </div>
-
           </el-header>
 
+
+
           <div class="main-right">
 <!--            <svg-icon icon-class="tool" class="svgicon"/>-->
-
+<!--             <div class="aside-title"><i class="el-icon-s-management"></i><span>发现</span></div>-->
-             <div class="aside-title"><i class="el-icon-s-management"></i><span>发现</span></div>
+            <div class="aside-title" @click="goRouter(8)"><i class="el-icon-s-tools"></i><span>最新</span></div>
-            <div class="aside-title" @click="goBookmarkList"><i class="el-icon-s-tools"></i><span>最新</span></div>
             <div class="aside-title"><i class="el-icon-star-on"></i><span>星标</span></div>
             <div class="aside-title"><i class="el-icon-help"></i><span>稍后看</span></div>
-            <div class="aside-title"><i class="el-icon-s-platform"></i><span>任意门</span></div>
+<!--            <div class="aside-title"><i class="el-icon-s-platform"></i><span>任意门</span></div>-->
-            <div class="aside-title"><i class="el-icon-message-solid"></i><span>收件箱</span></div>
+<!--            <div class="aside-title"><i class="el-icon-message-solid"></i><span>收件箱</span></div>-->
             <div class="reminder">我的收藏 <svg-icon icon-class="sx" style="margin-left:5px" @click="refreshNode"/></div>
             <div class="areaTree">
               <ul id="treeDemo" class="ztree"></ul>
             </div>
             <div class="reminder" >工具箱</div>
-            <div class="aside-title"><i class="el-icon-s-flag" style="color: #569cd5"></i><span>RSS订阅</span></div>
+<!--            <div class="aside-title"><i class="el-icon-s-flag" style="color: #569cd5"></i><span>RSS订阅</span></div>-->
-            <div class="aside-title" @click="goUserTagAll"><i class="el-icon-s-management"></i><span>标签管理</span></div>
+            <div class="aside-title" @click="goRouter(7)"><i class="el-icon-s-management"></i><span>标签管理</span></div>
-            <div class="aside-title" @click="gorecycle"><i class="el-icon-delete-solid" style="color: red"></i><span>垃圾桶</span></div>
+            <div class="aside-title" @click="goRouter(6)"><i class="el-icon-delete-solid" style="color: red"></i><span>垃圾桶</span></div>
-            <div class="aside-title" @click="importHtml"><i class="el-icon-s-platform"></i><span>导入书签</span></div>
+<!--            <div class="aside-title" @click="goRouter(5)"><i class="el-icon-s-platform"></i><span>导入书签</span></div>-->
             <div class="aside-title"><i class="el-icon-s-comment"></i><span>意见反馈</span></div>
 <!--            <div class="aside-title" @click="ceshi"><i class="el-icon-s-comment"></i><span>测试页面</span></div>-->
-<!--            <div class="aside-title" @click="NqEdit"><i class="el-icon-s-comment"></i><span>NqQuillEdit编辑器</span></div>-->
+            <div class="aside-title" @click="goRouter(2)"><i class="el-icon-s-platform"></i><span>小工具</span></div>
-            <div class="aside-title "  @click="gotool"><i class="el-icon-s-grid"></i><span>工具箱</span></div>
+            <div class="aside-title " style="margin-bottom: 100px"  @click="goRouter(9)"><i class="el-icon-s-grid"></i><span>更多设置</span></div>
-            <div class="aside-title " style="margin-bottom: 100px" @click="goUser"><i class="el-icon-s-custom"></i><span>个人中心</span></div>
 
           </div>
 
-
-<!--          <div class="tabBar">-->
-<!--            <div class=""-->
-<!--                 style="width: 100%;height: 30px;background-color: #cacaca;float: left;text-align: center;line-height: 30px">-->
-<!--              <i class="el-icon-folder-checked"></i>-->
-<!--              <span>新的收藏集</span>-->
-<!--            </div>-->
-
-<!--            <div class="tabBarList" >-->
-<!--              <div><i class="el-icon-folder-checked"></i></div>-->
-<!--              <div><i class="el-icon-folder-checked"></i></div>-->
-<!--              <div><i class="el-icon-s-tools"></i></div>-->
-<!--            </div>-->
-
-<!--          </div>-->
-
-
         </el-aside>
-
-
-<!--              <el-footer class="aside-navigation">-->
-<!--              </el-footer>-->
-
-
       </transition>
 
-      <div class="isresize" style="cursor:w-resize">
 
+
+
+
+      <div class="isresize" style="cursor:w-resize">
       </div>
-      <!--    <el-drawer-->
+
-      <!--      title="我是标题"-->
-      <!--      :visible.sync="drawer"-->
-      <!--      :direction="direction"-->
-      <!--      :modal-append-to-body="drawerS"-->
-      <!--      :append-to-body="isShowZtree"-->
-      <!--    >-->
-      <!--      <span>我来啦!</span>-->
-      <!--    </el-drawer>-->
 
 
       <!--    <el-button @click="isShowZtree = !isShowZtree">Click Me</el-button>-->
-
-
       <el-container class="mid">
-
         <el-main class="bookmarkmain">
-
           <router-view :key="$route.query.t"></router-view>
-
-
         </el-main>
-
-
       </el-container>
-<!--      <el-aside class="mianUrl">-->
-<!--        <el-header class="mianUrl-top" style="height: 50px">-->
-<!--          <div class="mianUrl-top-left">-->
-<!--            <i class="el-icon-folder-delete"></i>-->
-<!--            <i class="el-icon-rank"></i>-->
-<!--          </div>-->
-<!--          <div class="mianUrl-top-right">-->
-<!--            <i class="el-icon-edit-outline"></i>-->
-<!--            <i class="el-icon-position"></i>-->
-<!--          </div>-->
-<!--        </el-header>-->
-<!--        <div class="mianUrl-botoom">-->
-<!--          <iframe class="openurl" :src="gourl"/>-->
 
-<!--        </div>-->
-<!--      </el-aside>-->
 
 
     </el-container>
-
-
     <!--  编辑弹窗-->
     <el-dialog :title="title" :visible.sync="open" width="500px" class="menuedit" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -124,7 +71,6 @@
           <div class="labelname">菜单名称</div>
           <el-input class="custom-input" v-model="form.menuName" placeholder="请输入菜单名称"/>
         </el-form-item>
-
         <el-form-item prop="menuIcon">
           <div class="labelname">菜单图标</div>
           <br/>
@@ -135,20 +81,16 @@
           <div class="labelname">上级菜单</div>
           <treeselect class="menutreeselect" v-model="form.parentId" :options="menuOptions" :normalizer="normalizer"/>
         </el-form-item>
-
 <!--        <el-form-item prop="menuOrder">-->
 <!--          <div class="labelname">排序(小到大)</div>-->
 <!--          <br/>-->
 <!--          <el-input-number v-model="form.menuOrder" placeholder="计数器"></el-input-number>-->
 <!--        </el-form-item>-->
-
-
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="danger" style="background-color: #ff6c70"  @click="deleteMmenu(form.menuId)">删除</el-button>
         <el-button type="primary" style="background-color: #09b1b9"  @click="submitForm">确定</el-button>
         <el-button  @click="cancel">取消</el-button>
-
       </div>
 
     </el-dialog>
@@ -232,10 +174,8 @@
 <!--    </el-dialog>-->
     <!--背景特效-->
     <canvas id="evanyou"></canvas>
-
   </div>
 
-
 </template>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <style scoped src="../ztree/demo.css"/>
@@ -247,9 +187,7 @@
   import {listMenu, getMenu, delMenu, addMenu, updateMenu, exportMenu} from "@/api/bookmark/menu";
   import Treeselect from "@riophae/vue-treeselect";
   import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-  // import "../ztree/jquery-1.4.4.min.js"
   import "../ztree/jquery.ztree.core.js"
-  // import "../ztree/demo.css"
   import "../ztree/zTreeStyle.css"
   import "../ztree/jquery.ztree.exedit.js"
   import {listMenuByUserId,listByMenuId} from "@/api/bookmark/menu";
@@ -784,10 +722,6 @@
 
       addHoverDom: function (treeId, treeNode) {
         var confCount = $("." + treeNode.tId + "_sz").length;
-        // console.log("进入addHoverDom:统计"+treeNode.tId+"_sz 的数量:"+confCount);
-        // console.log("进入addHoverDom:treeId"+treeNode.tId+"_sz 的数量:"+confCount);
-        // console.log("进入addHoverDom:统计"+treeNode.tId+"_sz 的数量:"+confCount);
-        // console.log("进入addHoverDom:统计"+treeNode.bookmarkCount+"_sz 的数量:"+confCount);
         if (confCount > 0) return;
         $("." + treeNode.tId + "_sz").unbind().remove();
         $("." + treeNode.tId + "_count").unbind().remove();
@@ -882,38 +816,77 @@
         that.isShowZtree = !that.isShowZtree;
 
       },
-      /**跳转导入页面**/
+      goRouter: function (e) {
-      importHtml: function () {
+        var flag=e;
-        this.$router.push({
-          path: "/importHtml",
-        })
-
-      }, /**跳转测试页面**/
-      ceshi: function () {
-        this.$router.push({
-          path: "/ceshi",
-        })
-
-      },
-      /**跳转NqQuillEdit测试页面**/
-      NqEdit: function () {
-        this.$router.push({
-          path: "/nqEdit",
-        })
-      },
-      /** 工具箱**/
-      gotool() {
         var that = this;
-        that.$router.push({
+        switch (flag) {
-          path: "/tool",
+          case 1:
-        })
+            that.$router.push({
-      },
+              path: "/profile",
-      /** 个人中心**/
+            })
-      goUser() {
+            break;
-        var that = this;
+          case 2:
-        that.$router.push({
+            //工具箱
-          path: "/profile",
+            that.$router.push({
-        })
+              path: "/tool",
+            })
+            break;
+          case 3:
+            // 跳转NqQuillEdit测试页面
+            that.$router.push({
+              path: "/nqEdit",
+            })
+            break;
+          case 4:
+            //跳转测试页面
+            that.$router.push({
+              path: "/ceshi",
+            })
+            break;
+          case 5:
+            //导入页面
+            that.$router.push({
+              path: "/importHtml",
+            })
+            break;
+          case 6:
+            //回收站
+            that.$router.push({
+              path: "/content",
+              query: {
+                menuId: 'RECYCLE'
+              }
+            })
+            break;
+          case 7:
+            //用户标签
+            that.$router.push({
+              path: "/userTagAll",
+            })
+            break;
+          case 8:
+            //全部书签
+            that.$router.push({
+              path: "/content",
+              query: {
+                menuId: 'BOOKMARK'
+              }
+            })
+            break;
+          case 9:
+            //个人中心
+            that.$router.push({
+              path: "/bkindex",
+            })
+            break;
+          default:
+            that.$router.push({
+              path: "/content",
+              query: {
+                menuId: 'BOOKMARK'
+              }
+            })
+        }
       },
       editBookmark: function (e) {
         this.reset();
@@ -927,7 +900,6 @@
           this.title = "修改书签菜单";
         });
 
-
         //阻止冒泡事件
         if (e && e.stopPropagation)
         //因此它支持W3C的stopPropagation()方法
@@ -940,19 +912,16 @@
 
       //删除书签目录
       deleteMmenu(menuId) {
-
         this.$confirm('是否删除此目录菜单?', '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           delMenu(menuId).then(response => {
-            // if(){}
             this.$message({
               type: 'success',
               message: '删除成功!'
             });
-
             this.open = false;
             // this.refreshParentNode();
           });
@@ -962,40 +931,7 @@
             message: '已取消删除'
           });
         });
-
-
       },
-      // 全部书签
-      goBookmarkList() {
-        var that = this;
-        that.$router.push({
-          path: "/content",
-          query: {
-            menuId: 'BOOKMARK'
-          }
-        })
-
-      },
-
-      /** 回收站**/
-      gorecycle() {
-        var that = this;
-        that.$router.push({
-          path: "/content",
-          query: {
-            menuId: 'RECYCLE'
-          }
-        })
-      },
-      /** 用户书签**/
-      goUserTagAll() {
-        var that = this;
-        that.$router.push({
-          path: "/userTagAll",
-        })
-      },
-
-
 
     },
 
@@ -1006,7 +942,6 @@
       this.$message('click on item ' + command);
     },
 
-
   }
 </script>
 <style scoped>
@@ -1428,12 +1363,5 @@
 
 
 
-
-  /*.mid{*/
-  /*  min-width: 400px!important;*/
-  /*  max-width: 400px;*/
-  /*}*/
-
-
 </style>
 

ruoyi-ui/src/views/system/user/profile/bkindex.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="app-container ">
+    <el-row :gutter="20" >
+      <el-col :xs="24" :sm="{span: 16, push: 4}" :md="{span: 14, push: 5}"  :xl="{span: 10, push: 7}"  >
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>个人信息</span>
+          </div>
+          <div>
+            <div class="text-center">
+              <userAvatar :user="user" />
+            </div>
+            <ul class="list-group list-group-striped">
+              <li class="list-group-item">
+                <svg-icon icon-class="user" />用户名称
+                <div class="pull-right">{{ user.userName }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="phone" />手机号码
+                <div class="pull-right">{{ user.phonenumber }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="email" />用户邮箱
+                <div class="pull-right">{{ user.email }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="tree" />所属部门
+                <div class="pull-right" v-if="user.dept">{{ user.dept.deptName }} / {{ postGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="peoples" />所属角色
+                <div class="pull-right">{{ roleGroup }}</div>
+              </li>
+              <li class="list-group-item">
+                <svg-icon icon-class="date" />创建日期
+                <div class="pull-right">{{ user.createTime }}</div>
+              </li>
+            </ul>
+          </div>
+        </el-card>
+
+        <el-card style="margin-top: 8px">
+          <div slot="header" class="clearfix">
+            <span>基本资料</span>
+          </div>
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="基本资料" name="userinfo">
+              <userInfo :user="user" />
+            </el-tab-pane>
+            <el-tab-pane label="修改密码" name="resetPwd">
+              <resetPwd :user="user" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import userAvatar from "./userAvatar";
+  import userInfo from "./userInfo";
+  import resetPwd from "./resetPwd";
+  import { getUserProfile } from "@/api/system/user";
+
+  export default {
+    name: "Profile",
+    components: { userAvatar, userInfo, resetPwd },
+    data() {
+      return {
+        user: {},
+        roleGroup: {},
+        postGroup: {},
+        activeTab: "userinfo"
+      };
+    },
+    created() {
+      this.getUser();
+    },
+    methods: {
+      getUser() {
+        getUserProfile().then(response => {
+          this.user = response.data;
+          this.roleGroup = response.roleGroup;
+          this.postGroup = response.postGroup;
+        });
+      }
+    }
+  };
+</script>
+
+

ruoyi-ui/src/views/system/user/profile/userInfo.vue

@@ -9,12 +9,12 @@
     <el-form-item label="邮箱" prop="email">
       <el-input v-model="user.email" maxlength="50" />
     </el-form-item>
-    <el-form-item label="性别">
+<!--    <el-form-item label="性别">-->
-      <el-radio-group v-model="user.sex">
+<!--      <el-radio-group v-model="user.sex">-->
-        <el-radio label="0">男</el-radio>
+<!--        <el-radio label="0">男</el-radio>-->
-        <el-radio label="1">女</el-radio>
+<!--        <el-radio label="1">女</el-radio>-->
-      </el-radio-group>
+<!--      </el-radio-group>-->
-    </el-form-item>
+<!--    </el-form-item>-->
     <el-form-item>
       <el-button type="primary" size="mini" @click="submit">保存</el-button>
       <el-button type="danger" size="mini" @click="close">关闭</el-button>