Browse Source

【接口看板】个人中心页面开发 + 退出登录优化

faster_AG_grid
安虹睿 1 year ago
parent
commit
abd47cec11
  1. 6
      PC/InterFace.Dash/public/config.js
  2. 24
      PC/InterFace.Dash/src/layout/components/Navbar.vue
  3. 6
      PC/InterFace.Dash/src/router/index.js
  4. 4
      PC/InterFace.Dash/src/store/modules/user.js
  5. 3
      PC/InterFace.Dash/src/views/login/index.vue
  6. 32
      PC/InterFace.Dash/src/views/profileuser/index.vue
  7. 106
      PC/InterFace.Dash/src/views/profileuser/index_dy.vue
  8. 100
      PC/InterFace.Dash/src/views/profileuser/resetPwd.vue
  9. 52
      PC/InterFace.Dash/src/views/profileuser/userInfo.vue
  10. 2
      PC/InterFace.Dash/vue.config.js

6
PC/InterFace.Dash/public/config.js

@ -1,7 +1,7 @@
// dev_win // dev_win
window.SITE_CONFIG['baseApi'] = 'http://dev.ccwin-in.com:60068' window.SITE_CONFIG['baseApi'] = 'http://dev.ccwin-in.com:60021'
window.SITE_CONFIG['authApi'] = 'http://dev.ccwin-in.com:60068' window.SITE_CONFIG['authApi'] = 'http://dev.ccwin-in.com:60021'
window.SITE_CONFIG['loginApi'] = 'http://dev.ccwin-in.com:60065' window.SITE_CONFIG['loginApi'] = 'http://dev.ccwin-in.com:60020'
window.SITE_CONFIG['businessApi'] = 'http://dev.ccwin-in.com:10097' window.SITE_CONFIG['businessApi'] = 'http://dev.ccwin-in.com:10097'
//是否登录配置信息【loginName】 //是否登录配置信息【loginName】
window.SITE_CONFIG['isConfigLogin'] = false window.SITE_CONFIG['isConfigLogin'] = false

24
PC/InterFace.Dash/src/layout/components/Navbar.vue

@ -36,9 +36,9 @@
<router-link to="/"> <router-link to="/">
<el-dropdown-item>系统首页</el-dropdown-item> <el-dropdown-item>系统首页</el-dropdown-item>
</router-link> </router-link>
<!-- <el-dropdown-item @click.native="showProfileuser"> <el-dropdown-item @click.native="showProfileuser">
<span style="display: block">个人中心</span> <span style="display: block">个人中心</span>
</el-dropdown-item> --> </el-dropdown-item>
<el-dropdown-item divided @click.native="logout"> <el-dropdown-item divided @click.native="logout">
<span style="display: block">退出登录</span> <span style="display: block">退出登录</span>
</el-dropdown-item> </el-dropdown-item>
@ -86,15 +86,17 @@ export default {
}, },
async logout() { async logout() {
this.fullscreenLoading = true this.fullscreenLoading = true
mgr.signoutRedirect() this.$store.dispatch("user/logout")
mgr.signoutRedirectCallback() // 使
.then(() => { // mgr.signoutRedirect()
this.$store.dispatch("user/logout") // mgr.signoutRedirectCallback()
}) // .then(() => {
.catch(function(error){ // this.$store.dispatch("user/logout")
this.$message.error("退出登录失败,请重试") // })
this.fullscreenLoading = false // .catch(function(error){
}) // this.$message.error("退")
// this.fullscreenLoading = false
// })
}, },
showProfileuser() { showProfileuser() {

6
PC/InterFace.Dash/src/router/index.js

@ -102,12 +102,12 @@ export let constantRoutes = [
}] }]
}, },
{ {
path: '/profileuser', path: '/',
component: Layout, component: Layout,
redirect: '/profileuser/index', redirect: '/profileuser',
hidden: true, hidden: true,
children: [{ children: [{
path: 'index', path: 'profileuser',
component: () => import('@/views/profileuser/index'), component: () => import('@/views/profileuser/index'),
name: 'Profileuser', name: 'Profileuser',
meta: { meta: {

4
PC/InterFace.Dash/src/store/modules/user.js

@ -147,8 +147,8 @@ const actions = {
}) })
// reset visited views and cached views // reset visited views and cached views
// to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485 // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
// 防止路由叠加(打开后单点登录的退出无效) // 防止路由叠加(打开后单点登录的退出无效),如果有单点登录方式关闭下方location.reload()
// location.reload() location.reload()
// }).catch(error => { // }).catch(error => {
// reject(error) // reject(error)
// }) // })

3
PC/InterFace.Dash/src/views/login/index.vue

@ -165,9 +165,6 @@ export default {
this.$store.dispatch('user/login', this.loginForm) this.$store.dispatch('user/login', this.loginForm)
.then(() => { .then(() => {
this.$router.push({ path: '/'}) this.$router.push({ path: '/'})
setTimeout(()=>{
this.loading = false
})
}) })
.catch((error) => { .catch((error) => {
this.loading = false this.loading = false

32
PC/InterFace.Dash/src/views/profileuser/index.vue

@ -0,0 +1,32 @@
<template>
<div class="app-container">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>个人中心</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
</div>
<el-tabs v-model="activeTab">
<el-tab-pane label="用户信息" name="userInfo">
<userInfo />
</el-tab-pane>
<!-- <el-tab-pane label="修改密码" name="resetPwd">
<resetPwd />
</el-tab-pane> -->
</el-tabs>
</el-card>
</div>
</template>
<script>
import resetPwd from "./resetPwd";
import userInfo from "./userInfo";
export default {
name: "Profileuser",
components: { resetPwd,userInfo },
data() {
return {
activeTab: "userInfo",
};
},
};
</script>

106
PC/InterFace.Dash/src/views/profileuser/index_dy.vue

@ -0,0 +1,106 @@
<template>
<div class="app-container">
<!-- 左右东阳版本 -->
<el-row :gutter="20">
<el-col :span="6" :xs="24">
<el-card>
<div slot="header" class="clearfix">
<span style="font-size: 18px">个人信息</span>
</div>
<div>
<ul class="list-group-striped">
<li>
<div class="left"><i class="icon el-icon-user-solid"></i></div>
<div class="pull-right">
<p class="title">用户名</p>
<p class="name">{{ user.userName }}</p>
</div>
</li>
<li>
<div class="left"><i class="icon el-icon-info"></i></div>
<div class="pull-right">
<p class="title">姓名</p>
<p class="name">{{ user.name }}</p>
</div>
</li>
<li>
<div class="left"><i class="icon el-icon-s-check"></i></div>
<div class="pull-right">
<p class="title">角色</p>
<p class="name">{{ user.roles.join(',') }}</p>
</div>
</li>
</ul>
</div>
</el-card>
</el-col>
<el-col :span="18" :xs="24">
<el-card>
<div slot="header" class="clearfix">
<span style="font-size: 18px">基本资料</span>
</div>
<el-tabs v-model="activeTab">
<el-tab-pane label="修改密码" name="resetPwd">
<resetPwd :user="user" />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import resetPwd from "./resetPwd";
export default {
name: "Profileuser",
components: { resetPwd },
data() {
return {
user: {},
roleGroup: {},
postGroup: {},
activeTab: "resetPwd",
};
},
created() {
this.user = this.$store.getters.currentUserInfo
},
};
</script>
<style lang="scss" scoped>
.list-group-striped{
list-style: none;
padding-left: 10px;
li{
display: flex;
padding-bottom: 15px;
background: #e9f6ff;
padding: 13px 15px;
border-radius: 4px;
margin-bottom: 18px;
min-height: 70px;
}
.icon{
font-size: 22px;
padding-right: 5px;
vertical-align: top;
color: #49a4f7;
width: 24px;
flex-shrink: 0;
padding-top: 18px;
}
.pull-right{
padding-left: 10px;
color: #999;
p{
margin: 0;
}
.title{
padding-bottom: 5px;
color: #333;
}
}
}
</style>

100
PC/InterFace.Dash/src/views/profileuser/resetPwd.vue

@ -0,0 +1,100 @@
<template>
<el-form ref="form" :model="user" :rules="rules" label-width="80px">
<el-form-item label="旧密码" prop="oldPassword">
<el-input
v-model="user.oldPassword"
placeholder="请输入旧密码"
type="password"
/>
</el-form-item>
<el-form-item label="新密码" prop="newPassword">
<el-input
v-model="user.newPassword"
placeholder="请输入新密码"
type="password"
/>
</el-form-item>
<el-form-item label="确认密码" prop="confirmPassword">
<el-input
v-model="user.confirmPassword"
placeholder="请确认密码"
type="password"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" @click="submit">保存</el-button>
<!-- <el-button type="danger" size="mini" @click="reset">清空</el-button> -->
</el-form-item>
</el-form>
</template>
<script>
import { postLoginUserInfo } from "@/api/wms-auth";
export default {
data() {
const equalToPassword = (rule, value, callback) => {
if (this.user.newPassword !== value) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
};
return {
user: {
oldPassword: undefined,
newPassword: undefined,
confirmPassword: undefined,
},
//
rules: {
oldPassword: [
{ required: true, message: "旧密码不能为空", trigger: "blur" },
],
newPassword: [
{ required: true, message: "新密码不能为空", trigger: "blur" },
{
min: 6,
max: 20,
message: "长度在 6 到 20 个字符",
trigger: "blur",
},
],
confirmPassword: [
{ required: true, message: "确认密码不能为空", trigger: "blur" },
{ required: true, validator: equalToPassword, trigger: "blur" },
],
},
};
},
methods: {
submit() {
this.$refs["form"].validate((valid) => {
if (valid) {
postLoginUserInfo({
currentPassword: this.user.oldPassword,
newPassword: this.user.newPassword,
}, this.$store.getters.currentUserInfo.id)
.then((response) => {
this.$notify({
title: "成功",
message: "修改成功",
type: "success",
duration: 2000,
});
})
.catch(() => {
//
});
}
});
},
reset() {
this.$refs["form"].resetFields();
//this.$store.dispatch("tagsView/delView", this.$route);
//this.$router.push({ path: "/index" });
},
},
};
</script>

52
PC/InterFace.Dash/src/views/profileuser/userInfo.vue

@ -0,0 +1,52 @@
<template>
<el-descriptions
class="profileuser_userinfo_page"
:column="2"
:border="true"
:labelStyle="{width:'200px'}"
>
<el-descriptions-item>
<template slot="label"><i class="item-icon el-icon-user-solid"></i>用户名</template>
{{ user.userName }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label" :span="2"><i class="item-icon el-icon-info"></i>姓名</template>
{{ user.name }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label"><i class="item-icon el-icon-s-check"></i>角色</template>
{{ user.roles.join(',') }}
</el-descriptions-item>
</el-descriptions>
</template>
<script>
export default {
data() {
return {
user:{}
};
},
created() {
this.user = this.$store.getters.currentUserInfo
},
};
</script>
<style lang="scss">
.profileuser_userinfo_page{
padding: 20px;
.el-descriptions-item__container{
padding: 20px 10px;
font-size: 18px;
}
.item-icon{
font-size: 22px;
margin-right: 8px;
color: #49a4f7;
line-height: 18px;
vertical-align: text-bottom;
}
}
</style>

2
PC/InterFace.Dash/vue.config.js

@ -13,7 +13,7 @@ const name = defaultSettings.title || '接口看板-QAD&WMS' // page title
// For example, Mac: sudo npm run // For example, Mac: sudo npm run
// You can change the port by the following method: // You can change the port by the following method:
// port = 9528 npm run dev OR npm run dev --port = 9528 // port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 60066 // dev port const port = process.env.port || process.env.npm_config_port || 60021 // dev port
const Timestamp = new Date().getTime(); const Timestamp = new Date().getTime();
// All configuration item explanations can be find in https://cli.vuejs.org/config/ // All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = { module.exports = {

Loading…
Cancel
Save