Song/xkrs_ms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新增个人中心页面

Browse Source
This commit is contained in:
WangHao 2021-04-10 18:27:22 +08:00
parent 7416beb2ee
commit eccdfddd9a
7 changed files with 499 additions and 339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
ruoyi-ui/src/router/index.js
View File

@ -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',

119
ruoyi-ui/src/views/bookmark/bkuser/index.vue Normal file
View File

@ -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>

2
ruoyi-ui/src/views/bookmark/common/ImportHtml.vue
View File

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

248
ruoyi-ui/src/views/bookmark/index/index.vue
View File

@ -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" @click="goBookmarkList"><i class="el-icon-s-tools"></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"><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-message-solid"></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="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" @click="goUserTagAll"><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="importHtml"><i class="el-icon-s-platform"></i><span>导入书签</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="goRouter(7)"><i class="el-icon-s-management"></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="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="gotool"><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 class="aside-title" @click="goRouter(2)"><i class="el-icon-s-platform"></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>
<!-- <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;
},
/**跳转导入页面**/
importHtml: function () {
this.$router.push({
path: "/importHtml",
})
}, /**跳转测试页面**/
ceshi: function () {
this.$router.push({
path: "/ceshi",
})
},
/**跳转NqQuillEdit测试页面**/
NqEdit: function () {
this.$router.push({
path: "/nqEdit",
})
},
/** 工具箱**/
gotool() {
goRouter: function (e) {
var flag=e;
var that = this;
that.$router.push({
path: "/tool",
})
},
/** 个人中心**/
goUser() {
var that = this;
that.$router.push({
path: "/profile",
})
switch (flag) {
case 1:
that.$router.push({
path: "/profile",
})
break;
case 2:
//工具箱
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>

93
ruoyi-ui/src/views/system/user/profile/bkindex.vue Normal file
View File

@ -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>

182
ruoyi-ui/src/views/system/user/profile/index.vue
View File

@ -1,91 +1,91 @@
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<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-col>
<el-col :span="18" :xs="24">
<el-card>
<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>
<template>
<div class="app-container">
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<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-col>
<el-col :span="18" :xs="24">
<el-card>
<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>

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

@ -1,78 +1,78 @@
<template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="user.nickName" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="user.phonenumber" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="user.email" maxlength="50" />
</el-form-item>
<el-form-item label="性别">
<el-radio-group v-model="user.sex">
<el-radio label="0">男</el-radio>
<el-radio label="1">女</el-radio>
</el-radio-group>
</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>
</el-form-item>
</el-form>
</template>
<script>
import { updateUserProfile } from "@/api/system/user";
export default {
props: {
user: {
type: Object
}
},
data() {
return {
// 表单校验
rules: {
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
email: [
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
{
type: "email",
message: "'请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phonenumber: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
};
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserProfile(this.user).then(response => {
if (response.code === 200) {
this.msgSuccess("修改成功");
}
});
}
});
},
close() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({ path: "/index" });
}
}
};
</script>
<template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-form-item label="用户昵称" prop="nickName">
<el-input v-model="user.nickName" />
</el-form-item>
<el-form-item label="手机号码" prop="phonenumber">
<el-input v-model="user.phonenumber" maxlength="11" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="user.email" maxlength="50" />
</el-form-item>
<!-- <el-form-item label="性别">-->
<!-- <el-radio-group v-model="user.sex">-->
<!-- <el-radio label="0">男</el-radio>-->
<!-- <el-radio label="1">女</el-radio>-->
<!-- </el-radio-group>-->
<!-- </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>
</el-form-item>
</el-form>
</template>
<script>
import { updateUserProfile } from "@/api/system/user";
export default {
props: {
user: {
type: Object
}
},
data() {
return {
// 表单校验
rules: {
nickName: [
{ required: true, message: "用户昵称不能为空", trigger: "blur" }
],
email: [
{ required: true, message: "邮箱地址不能为空", trigger: "blur" },
{
type: "email",
message: "'请输入正确的邮箱地址",
trigger: ["blur", "change"]
}
],
phonenumber: [
{ required: true, message: "手机号码不能为空", trigger: "blur" },
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
}
};
},
methods: {
submit() {
this.$refs["form"].validate(valid => {
if (valid) {
updateUserProfile(this.user).then(response => {
if (response.code === 200) {
this.msgSuccess("修改成功");
}
});
}
});
},
close() {
this.$store.dispatch("tagsView/delView", this.$route);
this.$router.push({ path: "/index" });
}
}
};
</script>