增加修改密码功能

guanqb

2024-01-15 338749f9a07eaf3ec75f45ff89a19a5cf62d0b06

增加修改密码功能

 src/api/user/index.js

@@ -8,27 +8,40 @@
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
 */
import request from "@/router/axios.js";
import request from "@/router/axios.js"

export const refreshToken = (refresh_token, tenantId) =>
  request({
    url: "/api/blade-auth/oauth/token",
    method: "post",
    headers: {
      "Tenant-Id": tenantId,
      "Dept-Id": "",
      "Role-Id": "",
    },
    params: {
      tenantId,
      refresh_token,
      grant_type: "refresh_token",
      scope: "all",
    },
  });
    request({
        url: "/api/blade-auth/oauth/token",
        method: "post",
        headers: {
            "Tenant-Id": tenantId,
            "Dept-Id": "",
            "Role-Id": "",
        },
        params: {
            tenantId,
            refresh_token,
            grant_type: "refresh_token",
            scope: "all",
        },
    })

export const getButtons = () =>
  request({
    url: "/api/blade-system/menu/buttons",
    method: "get",
  });
    request({
        url: "/api/blade-system/menu/buttons",
        method: "get",
    })

// 修改密码
export const updatePassword = (oldPassword, newPassword, newPassword1) => {
    return request({
        url: '/api/blade-user/update-password',
        method: 'post',
        params: {
            oldPassword,
            newPassword,
            newPassword1,
        }
    })
}

 src/components/map/index.vue

@@ -16,6 +16,8 @@

        <slot name="showButton"></slot>

        <slot name="resetPopup"></slot>

        <div class="compass-btn">
            <el-tooltip content="指北针" placement="top" effect="dark">
                <i id="COMPASSBTN" class="el-icon-compass-btn" style="vertical-align: middle; cursor: pointer"

 src/styles/media/index.scss

@@ -5,9 +5,6 @@
        font-size: countSizeVh(16) !important;

        #app {



            .wrapper {
                width: 100vw;
                height: 100%;
@@ -3102,6 +3099,36 @@
        }
    }

    .reset-popup-box {
        .el-dialog {
            width: countSizeVw(800, 1920);
            height: countSizeVh(500);
        }

        .el-dialog__header button {
            font-size: countSizeVh(18);
            right: countSizeVw(10, 1920);
        }

        .reset-popup-body {
            padding: countSizeVh(40) countSizeVw(40, 1920);

            .el-form-item__label {
                color: #fff;
            }

            .btn-box {
                margin-top: countSizeVh(60);

                .el-button {
                    color: #fff;
                    background-color: rgba(29, 92, 228, 0.6);
                    border: 0.0925925926vh solid rgba(29, 92, 228, 0.6);
                }
            }
        }
    }

    .zhuHuInfo-details-box {
        .el-dialog {
            width: countSizeVw(1200, 1920);

 src/views/layout/index.vue

@@ -18,8 +18,8 @@
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">
                            {{
                                                        subItem.menuName
                                                        }}
                                subItem.menuName
                            }}
                        </div>
                    </div>
                </div>
@@ -35,14 +35,14 @@
                    @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index">
                    <span :class="{ on: currentUrl.indexOf(item.path) != -1 || currentUrl.indexOf(item.pathT) != -1 }">
                        {{
                                                item.menuName }}
                            item.menuName }}
                    </span>
                    <div class="sub-nav-list" v-show="item.children && item.childrenFlag">
                        <div :class="{ on: currentUrl.indexOf(subItem.path) != -1 }"
                            v-for="(subItem, subIndex) in item.children" :key="subIndex" @click.stop="goToPath(subItem)">
                            {{
                                                        subItem.menuName
                                                        }}
                                subItem.menuName
                            }}
                        </div>
                    </div>
                </div>
@@ -61,6 +61,10 @@
                            <i class="el-icon-user-back"></i>
                            运维管理
                        </div>
                        <div class="edit" @click="resetPsd">
                            <i class="el-icon-edit"></i>
                            修改密码
                        </div>
                        <div class="edit" @click="goTOLogout">
                            <i class="el-icon-user-quit"></i>
                            退出登录
@@ -71,15 +75,15 @@
            <!-- <div class="userIcon" :class="{on: userOn == true}" @click="openUser">
                <div class="userDetail" v-if="isShowUserDetail">
                    <div class="triangle"></div>
                                                                                                                        <div class="userName">用户名：{{userName}}</div>
                                                                                                                        <div class="userBtn">
                                                                                                                            <div class="edit" @click="goTOLogin">
                                                                                                                                >
                                                                                                                                <img src="../../../public/img/editLogin.webp" alt />
                                                                                                                            </div>
                                                                                                                            <div class="return" @click="goTOFllow">返回引导页</div>
                                                                                                                        </div>
                                                                                                                    </div>
                    <div class="userName">用户名：{{userName}}</div>
                    <div class="userBtn">
                        <div class="edit" @click="goTOLogin">
                            >
                            <img src="../../../public/img/editLogin.webp" alt />
                        </div>
                        <div class="return" @click="goTOFllow">返回引导页</div>
                    </div>
                </div>
            </div>-->
        </div>

@@ -107,6 +111,28 @@
                    :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                    :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                    @click="flexibelClick"></el-button>
                <div slot="resetPopup">
                    <el-dialog title="修改密码" :visible.sync="resetPsdPopupShow" :modal="true" :before-close="resetBeforeClose"
                        :modal-append-to-body="false" :close-on-click-modal="false" class="reset-popup-box">
                        <div class="reset-popup-body">
                            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                                <el-form-item label="原密码" prop="oldPassword">
                                    <el-input v-model="form.oldPassword" type="password"></el-input>
                                </el-form-item>
                                <el-form-item label="新密码" prop="newPassword">
                                    <el-input v-model="form.newPassword" type="password"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="newPassword1">
                                    <el-input v-model="form.newPassword1" type="password"></el-input>
                                </el-form-item>
                                <div class="btn-box">
                                    <el-button type="primary" @click="submitForm">提交</el-button>
                                    <el-button @click="cancelSF">取消</el-button>
                                </div>
                            </el-form>
                        </div>
                    </el-dialog>
                </div>
            </map-box>
        </div>
    </div>
@@ -127,6 +153,8 @@
import { validatenull } from "@/utils/validate"
import { calcDate } from "@/utils/date.js"
import { getStore } from "@/utils/store.js"
import { updatePassword } from "@/api/user/index.js"
import md5 from "js-md5"

import { getUserInfo, getToken } from '@/utils/auth'
import { mapGetters } from "vuex"
@@ -134,12 +162,19 @@
export default {
    provide () {
        return {
            userInfo: JSON.parse(getUserInfo())
            userInfo: JSON.parse(getUserInfo()),
        }
    },

    data () {
        return {
            form: {},
            rules: {
                oldPassword: [{ required: true, message: "必填" }],
                newPassword: [{ required: true, message: "必填" }],
                newPassword1: [{ required: true, message: "必填" }]
            },
            resetPsdPopupShow: false,
            menuLeftList: [
                {
                    menuName: '首页',
@@ -243,6 +278,48 @@
    },

    methods: {
        // 重置密码
        resetPsd () {
            this.resetPsdPopupShow = true
        },

        // 提交修改
        submitForm () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    updatePassword(md5(this.form.oldPassword), md5(this.form.newPassword), md5(this.form.newPassword1)).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: "success",
                                message: "修改密码成功!"
                            })
                            this.resetBeforeClose()
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.msg
                            })
                        }
                    }, error => {
                        window.console.log(error)
                    })
                } else {
                    return false
                }
            })
        },

        // 取消提交
        cancelSF () {
            this.resetBeforeClose()
        },

        // 弹窗关闭事件
        resetBeforeClose () {
            this.$refs.form.resetFields()
            this.resetPsdPopupShow = false
        },

        init () {
            this.user = this.$store.state.user.userInfo
        },