From 864f0e9e1fa3eefc21fe4b44fc8e2bcd5df5a0c3 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期一, 25 七月 2022 17:11:46 +0800
Subject: [PATCH] 1.对接导入功能
---
src/layout/components/Navbar.vue | 161 ++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 151 insertions(+), 10 deletions(-)
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index aeb09b7..9189fda 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -7,10 +7,15 @@
<div class="right-menu">
<el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper">
- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
- <i class="el-icon-caret-bottom" />
+ <!-- <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">-->
+ <div style="display: flex;align-items: center;margin-top: -5px">
+ <div class="headerImg"><i class="el-icon-user" /></div>
+ <div class="headerName">{{ username }}</div>
+ </div>
+
+ <!-- <i class="el-icon-caret-bottom" />-->
</div>
- <el-dropdown-menu slot="dropdown" class="user-dropdown">
+ <el-dropdown-menu slot="dropdown" class="user-dropdown" style="text-align: center">
<!-- <router-link to="/">-->
<!-- <el-dropdown-item>-->
<!-- Home-->
@@ -22,13 +27,44 @@
<!-- <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">-->
<!-- <el-dropdown-item>Docs</el-dropdown-item>-->
<!-- </a>-->
- <!-- divided-->
- <el-dropdown-item @click.native="logout">
- <span style="display:block;">閫�鍑�</span>
+ <el-dropdown-item @click.native="editPassword">
+ <span style="display:block;">淇敼瀵嗙爜</span>
+ </el-dropdown-item>
+ <el-dropdown-item divided @click.native="logout">
+ <span style="display:block;font-weight: bolder">閫�鍑�</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
+ <el-dialog
+ title="淇敼瀵嗙爜"
+ :visible.sync="dialogVisible"
+ width="500px"
+ :close-on-click-modal="false"
+ @close="handleClose"
+ @closed="handleClose"
+ >
+ <el-form ref="dialogForm" :rules="formRules" :model="form" label-width="100px">
+ <!-- <el-form-item label="鐢ㄦ埛缂栫爜锛�">-->
+ <!-- <div>{{ usercode }}</div>-->
+ <!-- </el-form-item>-->
+ <!-- <el-form-item label="鐢ㄦ埛鍚嶇О锛�">-->
+ <!-- <div> {{ username }}</div>-->
+ <!-- </el-form-item>-->
+ <el-form-item label="瀵嗙爜锛�" prop="password">
+ <el-input v-model="form.password" style="width: 220px;" />
+ </el-form-item>
+ <el-form-item label="鏂板瘑鐮侊細" prop="newpassword">
+ <el-input v-model="form.newpassword" style="width: 220px;" />
+ </el-form-item>
+ </el-form>
+ <span slot="footer" class="dialog-footer">
+ <div class="footerButton">
+ <el-button @click="dialogVisibleCancel">杩斿洖</el-button>
+ <el-button type="primary" @click="dialogVisibleConfirm">纭� 瀹�</el-button>
+ </div>
+ </span>
+ </el-dialog>
</div>
</template>
@@ -36,7 +72,10 @@
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
+import { getCookie } from '@/utils/auth'
+import { UpdateUserPassword } from '@/api/user'
+const SER_HZ = /^[\u4e00-\u9fa5]+$/
export default {
components: {
Breadcrumb,
@@ -48,13 +87,78 @@
'avatar'
])
},
+ created() {
+ this.usercode = getCookie('navTabId')
+ this.username = getCookie('username')
+ },
+ data() {
+ const validatePassword = (rule, value, callback) => {
+ if (!value) {
+ return callback(new Error('璇疯緭鍏ュ瘑鐮侊紒'))
+ } else {
+ if (SER_HZ.test(value)) {
+ return callback(new Error('瀵嗙爜涓嶈兘涓轰腑鏂囷紒'))
+ } else {
+ callback()
+ }
+ }
+ }
+ return {
+ usercode: '',
+ username: '',
+ form: {
+ password: '',
+ newpassword: ''
+ },
+ dialogVisible: false,
+ formRules: {
+ password: [
+ { required: true, validator: validatePassword, trigger: ['blur', 'change'] }
+ ],
+ newpassword: [
+ { required: true, validator: validatePassword, trigger: ['blur', 'change'] }
+ ]
+ }
+ }
+ },
methods: {
toggleSideBar() {
this.$store.dispatch('app/toggleSideBar')
},
async logout() {
await this.$store.dispatch('user/logout')
- this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+ this.$message.success('閫�鍑烘垚鍔燂紒')
+ this.$router.push(`/login`)
+ },
+ editPassword() {
+ this.dialogVisible = true
+ },
+ dialogVisibleCancel() {
+ this.dialogVisible = false
+ },
+ dialogVisibleConfirm() {
+ this.$refs.dialogForm.validate(valid => {
+ if (valid) {
+ const data = {
+ usercode: this.usercode,
+ username: this.username,
+ password: this.form.password,
+ newpassword: this.form.newpassword
+ }
+ console.log(data)
+ UpdateUserPassword(data).then(res => {
+ if (res.code === '200') {
+ this.$message.success('淇敼鎴愬姛锛�')
+ this.dialogVisible = false
+ }
+ })
+ }
+ })
+ },
+ handleClose() {
+ this.form.password = ''
+ this.form.newpassword = ''
+ this.$refs.dialogForm.clearValidate()
}
}
}
@@ -66,7 +170,7 @@
overflow: hidden;
position: relative;
background: #fff;
- box-shadow: 0 1px 4px rgba(0,21,41,.08);
+ box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
.hamburger-container {
line-height: 46px;
@@ -74,7 +178,7 @@
float: left;
cursor: pointer;
transition: background .3s;
- -webkit-tap-highlight-color:transparent;
+ -webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
@@ -118,10 +222,19 @@
.avatar-wrapper {
margin-top: 5px;
position: relative;
+ cursor: pointer;
+
+ .headerImg {
+ margin: 5px;
+ }
+
+ .headerName {
+ font-weight: bolder;
+ }
.user-avatar {
cursor: pointer;
- width: 40px;
+ width: 60px;
height: 40px;
border-radius: 10px;
}
@@ -136,5 +249,33 @@
}
}
}
+
+ .footerButton {
+ display: flex;
+ justify-content: end;
+ }
+
+ ::v-deep .el-button--primary {
+ background-color: #42b983 !important;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ //border: 1px solid $main_color;
+ border: none;
+ padding: 0 20px;
+ }
+
+ ::v-deep .el-button--default {
+ background-color: #ffffff !important;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ }
+
+ ::v-deep .el-input__inner {
+ height: 30px;
+ line-height: 30px;
+ }
}
</style>
--
Gitblit v1.9.3