From ce58040e3959fc8b23fce4289b170a6dbc2e71a4 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期四, 25 四月 2024 16:49:48 +0800
Subject: [PATCH] 增加用户名的显示和退出登录的操作
---
package-lock.json | 9 +
src/api/admin/user.js | 20 +++
package.json | 3
src/components/layout/components/appHeader/index.vue | 118 ++++++++++++++++--
src/components/layout/components/appHeader/components/updatePassWord.vue | 182 ++++++++++++++++++++++++++++++
5 files changed, 314 insertions(+), 18 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index b55a6fe..aa2aa52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
"downloadjs": "^1.4.7",
"element-ui": "^2.15.13",
"faker": "^5.5.3",
+ "js-cookie": "^3.0.5",
"lodash": "^4.17.21",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
@@ -7036,6 +7037,14 @@
"@sideway/pinpoint": "^2.0.0"
}
},
+ "node_modules/js-cookie": {
+ "version": "3.0.5",
+ "resolved": "https://registry.npmmirror.com/js-cookie/-/js-cookie-3.0.5.tgz",
+ "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+ "engines": {
+ "node": ">=14"
+ }
+ },
"node_modules/js-message": {
"version": "1.0.7",
"resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
diff --git a/package.json b/package.json
index 5121350..6c8db69 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"downloadjs": "^1.4.7",
"element-ui": "^2.15.13",
"faker": "^5.5.3",
+ "js-cookie": "^3.0.5",
"lodash": "^4.17.21",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
@@ -37,4 +38,4 @@
"gitHooks": {
"pre-commit": "lint-staged"
}
-}
\ No newline at end of file
+}
diff --git a/src/api/admin/user.js b/src/api/admin/user.js
new file mode 100644
index 0000000..574aefd
--- /dev/null
+++ b/src/api/admin/user.js
@@ -0,0 +1,20 @@
+import request from "@/common/untils/request.js"
+
+// 閲嶇疆瀵嗙爜
+export function initPassword(data) {
+ return request({
+ url: "/api/user/initPassword",
+ method: "post",
+ data,
+ });
+}
+// 璁剧疆鏂板瘑鐮�
+export function modifiedPwd(data) {
+ return request({
+ url: "/api/user/modifiedPwd",
+ method: "post",
+ data,
+ });
+}
+
+
diff --git a/src/components/layout/components/appHeader/components/updatePassWord.vue b/src/components/layout/components/appHeader/components/updatePassWord.vue
new file mode 100644
index 0000000..9c52471
--- /dev/null
+++ b/src/components/layout/components/appHeader/components/updatePassWord.vue
@@ -0,0 +1,182 @@
+<template>
+ <div>
+ <el-dialog
+ title="淇敼瀵嗙爜"
+ :visible.sync="editConfig.dialogVisible"
+ width="30%"
+ :before-close="handleClose">
+ <el-form :label-position="labelPosition" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+ <el-form-item label="鏃у瘑鐮�:" prop="oldPass">
+ <el-input type="password" clearable v-model="ruleForm.oldPass" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item label="鏂板瘑鐮�:" prop="pass">
+ <el-input type="password" clearable v-model="ruleForm.pass" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item label="纭瀵嗙爜:" prop="checkPass">
+ <el-input type="password" clearable v-model="ruleForm.checkPass" autocomplete="off"></el-input>
+ </el-form-item>
+ <el-form-item>
+ <el-button type="primary" @click="submitForm('ruleForm')" style="margin-bottom:20px;">纭</el-button>
+ </el-form-item>
+ </el-form>
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+import { modifiedPwd } from "@/api/admin/user";
+export default {
+ props: {
+ editCommonConfig: {
+ type: Object,
+ default: () => {
+ return {
+ dialogVisible:false,
+ userId:"",
+ };
+ },
+ },
+ },
+ data() {
+ var validatePass = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('璇疯緭鍏ユ棫瀵嗙爜'));
+ }else{
+ callback();
+ }
+ };
+ var validatePass1 = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('璇疯緭鍏ユ柊瀵嗙爜'));
+ } else {
+ if (this.ruleForm.checkPass !== '') {
+ this.$refs.ruleForm.validateField('checkPass');
+ }
+ callback();
+ }
+ };
+ var validatePass2 = (rule, value, callback) => {
+ if (value === '') {
+ callback(new Error('璇峰啀娆¤緭鍏ュ瘑鐮�'));
+ } else if (value !== this.ruleForm.pass) {
+ callback(new Error('涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!'));
+ } else {
+ callback();
+ }
+ };
+ return {
+ editConfig:this.editCommonConfig,
+ // dialogVisible: false
+ ruleForm: {
+ oldPass:'',
+ pass: '',
+ checkPass: '',
+ },
+ rules: {
+ oldPass: [
+ { validator: validatePass, trigger: 'blur', required: true, }
+ ],
+ pass: [
+ { validator: validatePass1, trigger: 'blur', required: true, }
+ ],
+ checkPass: [
+ { validator: validatePass2, trigger: 'blur', required: true, }
+ ],
+ },
+ labelPosition:"left",
+ userId : '',
+ };
+ },
+ created(){
+
+ },
+ computed: {
+
+ },
+ mounted() {
+ },
+ watch: {
+
+ },
+ methods: {
+ //
+ environmentType(){
+ let type
+ if (location.href.includes('192.168.20.119')) {
+ type = 'test'
+ } else if (location.href.includes('192.168') || location.href.includes('localhost')) {
+ type = 'dev'
+ } else {
+ type = 'prod'
+ }
+ return type
+ },
+ //
+ getApsPage(){
+ // 棣栭〉閮ㄧ讲鍦ㄥ悇涓幆澧冪殑绔彛
+ const loginPathMap = {
+ prod:`//${window.location.hostname}:9080`,
+ test:`//192.168.20.119:9080`,
+ // 鎯宠烦鍒版湰鍦板惎鍔ㄧ殑鐧诲綍椤电殑璇濋渶瑕佹妸dev鏀规垚浣犳湰鍦伴」鐩矾寰�
+ dev: `//192.168.8.108:8080`
+ }
+
+ return loginPathMap[this.environmentType()]
+ },
+ handleClose(done){
+ done();
+ },
+ modifiedPwd(params){
+ modifiedPwd(params).then((res)=>{
+ if(res.code==200){
+ this.editConfig.dialogVisible=false
+ alert("瀵嗙爜淇敼鎴愬姛,璇烽噸鏂扮櫥褰�!")
+ window.location = this.getApsPage()+'/login'
+ }
+ })
+ },
+ submitForm(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ console.log(this.ruleForm,"鐪嬬湅琛ㄥ崟")
+ this.modifiedPwd({
+ userId:this.editConfig.userId,
+ oldPwd:this.ruleForm.oldPass,
+ newPwd:this.ruleForm.pass,
+ })
+
+ } else {
+ console.log('error submit!!');
+ return false;
+ }
+ });
+ },
+
+ },
+ components: {
+
+ },
+};
+</script>
+
+<style scoped lang="scss">
+.el-form{
+ margin-top:20px;
+}
+::v-deep {
+ .el-form-item__content{
+ display: flex;
+ flex-direction: row-reverse;
+ }
+ .el-dialog__header{
+ .el-dialog__title{
+ font-size:18px;
+
+ }
+ }
+ .el-form{
+ margin:20px;
+ }
+
+}
+</style>
diff --git a/src/components/layout/components/appHeader/index.vue b/src/components/layout/components/appHeader/index.vue
index 3381afa..f965e6a 100644
--- a/src/components/layout/components/appHeader/index.vue
+++ b/src/components/layout/components/appHeader/index.vue
@@ -1,25 +1,110 @@
<template>
<div class="sales-lead">
<div class="header-title">{{ headerTitle }}</div>
- <div class="header-user-info"></div>
+ <div class="header-user-info">
+ <div class="avatar"><el-avatar icon="el-icon-user-solid"></el-avatar></div>
+ <el-dropdown @command="handleCommand">
+ <div class="el-dropdown-link">浣犲ソ {{ username }}<i class="el-icon-arrow-down el-icon--right"></i></div>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="logout">閫�鍑�</el-dropdown-item>
+ <!-- <el-dropdown-item @click.native="updatePwd">
+ <d2-icon name="unlock" class="d2-mr-5" />
+ 淇敼瀵嗙爜
+ </el-dropdown-item> -->
+ </el-dropdown-menu>
+ </el-dropdown>
+ <UpdatePassWord :editCommonConfig="editConfig"></UpdatePassWord>
+ </div>
</div>
</template>
<script>
+import Cookies from "js-cookie"
+import UpdatePassWord from "./components/updatePassWord"
export default {
- name: "SalesLead",
+ name: "SalesLeads",
props: {
- headerTitle: String
+ headerTitle: {
+ type:String,
+ default:''
+ }
+ },
+ components:{
+ UpdatePassWord,
},
data() {
- return {}
+ return {
+ username: "",
+ editConfig:{
+ dialogVisible:false,
+ userId:"",
+ }
+ }
+ },
+ created(){
+ const userObj = Cookies.get('userObj');
+ if (userObj) {
+ let userInfo = JSON.parse(userObj);
+ this.editConfig.userId=userInfo.id
+ this.username=userInfo.nickName
+ } else {
+ console.log('Object not found in cookie');
+ }
+ },
+ mounted() {
+ // this.username = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*=\s*([^;]*).*$)|^.*$/, "$1")
},
methods: {
- handleCommand(command) {
- console.log(command)
- if (command === "logout") {
- this.$router.push({ path: "/login" })
+ environmentType() {
+ let type
+ if (location.href.includes("192.168.20.119")) {
+ type = "test"
+ } else if (location.href.includes("192.168") || location.href.includes("localhost")) {
+ type = "dev"
+ } else {
+ type = "prod"
}
+
+ return type
+ },
+ getApsPage() {
+ // 棣栭〉閮ㄧ讲鍦ㄥ悇涓幆澧冪殑绔彛
+ const loginPathMap = {
+ prod: `//${window.location.hostname}:9080`,
+ test: `//192.168.20.119:9080`,
+ // 鎯宠烦鍒版湰鍦板惎鍔ㄧ殑鐧诲綍椤电殑璇濋渶瑕佹妸dev鏀规垚浣犳湰鍦伴」鐩矾寰�
+ dev: `//192.168.8.113:8080`
+ }
+ return loginPathMap[this.environmentType()]
+ },
+ handleCommand(command) {
+ if (command === "logout") {
+ // this.$router.push({ path: "/login" })
+ document.cookie = "cookieName=; path=/;"
+ this.$confirm("纭畾瑕佹敞閿�褰撳墠鐢ㄦ埛鍚�?", "娉ㄩ攢鐢ㄦ埛", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning"
+ })
+ .then(() => {
+ Cookies.remove("token")
+ // window.location.href = 'http://localhost:8080/login'; //鏈湴鐨勬櫤鎱у伐鍘�-鐧诲綍椤�
+ window.location.href = "http:" + this.getApsPage() + "/login"
+ this.$message({
+ type: "success",
+ message: "娉ㄩ攢鎴愬姛!"
+ })
+ })
+ .catch(() => {
+ this.$message({
+ type: "info",
+ message: "宸插彇娑堟敞閿�"
+ })
+ })
+ }
+ },
+ updatePwd(){
+ this.editConfig.dialogVisible=true
}
}
}
@@ -29,24 +114,23 @@
<style lang="scss" scoped>
.sales-lead {
display: flex;
- height: 66px;
+ height: 50px;
box-sizing: border-box;
- line-height: 66px;
- background-color: #fff;
- box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.0588235294117647);
+ line-height: 50px;
+ background-color: $color-bg;
+ border: 1px solid #ccc;
.header-title {
- padding-left: 30px;
+ padding-left: 16px;
font-size: 18px;
- font-family: "Arial Negreta", "Arial Normal", "Arial";
- font-weight: 700;
- color: #227bde;
+ font-weight: bold;
+ color: #171718;
}
.header-user-info {
margin-left: auto;
margin-right: 20px;
display: flex;
.avatar {
- margin-top: 8px;
+ margin-top: 4px;
margin-right: 10px;
}
}
--
Gitblit v1.8.0