密码修改

2024-01-29 13:57:52 +08:00
parent 7cfa3c0a9e
commit a0c582e1dd
11 changed files with 391 additions and 226 deletions
--- a/src/api/user-boot/user.ts
+++ b/src/api/user-boot/user.ts
@@ -2,14 +2,14 @@ import request from '@/utils/request'
 import { LoginData } from '@/api/types'
 import { useAdminInfo } from '@/stores/adminInfo'
 import { sm3Digest } from '@/assets/commjs/sm3.js'
-import { sm2 } from '@/assets/commjs/sm2.js'
+import { sm2, encrypt } from '@/assets/commjs/sm2.js'

 // 获取公钥
 export function gongkey(params?: any) {
    if (!params) {
        const adminInfo = useAdminInfo()
        params = {
-            loginName: adminInfo.$state.loginName
+            loginName: encrypt(adminInfo.$state.loginName)
        }
    }
    return request({
@@ -19,8 +19,14 @@ export function gongkey(params?: any) {
    })
 }

-export async function pwdSm3(pwd: any) {
-    let publicKey = await gongkey()
+export async function pwdSm3(pwd: any, loginName?: string) {
+    let publicKey = await gongkey(
+        loginName
+            ? {
+                loginName: encrypt(loginName)
+            }
+            : false
+    )
    let sm3Pwd = sm3Digest(pwd) //SM3加密
    return sm2(sm3Pwd + '|' + pwd, publicKey.data, 0)
 }
@@ -64,7 +70,6 @@ export const getMarketList = () => {
    })
 }

-
 export function add(data: any) {
    return request({
        url: '/user-boot/user/add',
@@ -81,10 +86,10 @@ export function edit(data: any) {
    })
 }

-export async function passwordConfirm(pwd: string) {
-
+export async function passwordConfirm(pwd: string, loginName: string = '') {
+    console.log(pwd, loginName)
    return request({
-        url: '/user-boot/user/passwordConfirm?password=' + await pwdSm3(pwd),
+        url: '/user-boot/user/passwordConfirm?password=' + (await pwdSm3(pwd, loginName)),
        method: 'get'
    })
 }
@@ -116,6 +121,16 @@ export async function updatePassword(params: any) {
    })
 }

+export async function updateFirstPassword(params: any) {
+    return request({
+        url: '/user-boot/user/updateFirstPassword',
+        method: 'put',
+        data: {
+            name: params.name,
+            password: await pwdSm3(params.password, params.name)
+        }
+    })
+}

 export function checkUser(data: any) {
    return request({
--- a/src/components/table/header/index.vue
+++ b/src/components/table/header/index.vue
@@ -13,7 +13,7 @@
                    label-position="left"
                    :inline="true"
                    class="table-com-search-form"
-                    :label-width="90"
+                    :label-width="labelWidth"
                >
                    <el-form-item label="区域" v-if="area">
                        <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
@@ -52,7 +52,7 @@ const tableHeader = ref()
 const datePickerRef = ref()
 const dictData = useDictData()
 const areaRef = ref()
-
+const labelWidth  = ref('')
 interface Props {
    datePicker?: boolean
    area?: boolean
@@ -103,9 +103,11 @@ const showSelectChange = () => {
    // 把dom(id=header-form)插入到table-com-search1或者table-com-search2
    const dom = document.getElementById('header-form') as HTMLElement
    if (showSelect.value) {
+        labelWidth.value = '90'
        const dom1 = document.getElementById('table-com-search1') as HTMLElement
        dom1.appendChild(dom)
    } else {
+        labelWidth.value = ''
        const dom2 = document.getElementById('table-com-search2') as HTMLElement
        dom2.appendChild(dom)
    }
--- a/src/components/tree/index.vue
+++ b/src/components/tree/index.vue
@@ -1,12 +1,32 @@
 <template>
-    <div class="cn-tree">
-        <el-input v-model="filterText" placeholder="请输入内容" clearable style="margin-bottom: 10px">
+    <div :style="{ width: menuCollapse ? '40px' : '280px' }" style="transition: all .3s; overflow: hidden;" >
+        <Icon
+            v-show="menuCollapse"
+            @click="onMenuCollapse"
+            :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+            :class="menuCollapse ? 'unfold' : ''"
+            size="18"
+            class="fold ml10 mt20  menu-collapse"
+            style="cursor: pointer"
+        />
+        <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
+            <div style="display: flex; align-items: center" class="mb10">
+                <el-input v-model="filterText" placeholder="请输入内容" clearable>
                    <template #prefix>
                        <Icon name="el-icon-Search" style="font-size: 16px" />
                    </template>
                </el-input>
+                <Icon
+                    @click="onMenuCollapse"
+                    :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
+                    :class="menuCollapse ? 'unfold' : ''"
+                    size="18"
+                    class="fold ml10 menu-collapse"
+                    style="cursor: pointer"
+                />
+            </div>
            <el-tree
-            style="flex: 1;overflow: auto;"
+                style="flex: 1; overflow: auto"
                ref="treeRef"
                :props="defaultProps"
                v-bind="$attrs"
@@ -17,21 +37,30 @@
            >
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
-                    <Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" v-if="data.icon" />
+                        <Icon
+                            :name="data.icon"
+                            style="font-size: 16px"
+                            :style="{ color: data.color }"
+                            v-if="data.icon"
+                        />
                        <span style="margin-left: 4px">{{ node.label }}</span>
                    </span>
                </template>
            </el-tree>
        </div>
+    </div>
 </template>

 <script lang="ts" setup>
-import { ElTree } from 'element-plus';
+import useCurrentInstance from '@/utils/useCurrentInstance'
+import { ElTree } from 'element-plus'
 import { ref, watch } from 'vue'

 defineOptions({
    name: 'govern/tree'
 })
+const { proxy } = useCurrentInstance()
+const menuCollapse = ref(false)
 const filterText = ref('')
 const defaultProps = {
    label: 'name',
@@ -40,6 +69,10 @@ const defaultProps = {
 watch(filterText, val => {
    treeRef.value!.filter(val)
 })
+const onMenuCollapse = () => {
+    menuCollapse.value = !menuCollapse.value
+    proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
+}
 const filterNode = (value: string, data: any) => {
    if (!value) return true
    return data.name.includes(value)
@@ -47,6 +80,7 @@ const filterNode = (value: string, data: any) => {
 const treeRef = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef })
 </script>
+
 <style lang="scss" scoped>
 .cn-tree {
    flex-shrink: 0;
@@ -57,11 +91,14 @@ defineExpose({ treeRef })
    height: 100%;
    width: 280px;
    :deep(.el-tree) {
-        background: #efeff0;
+        border: 1px solid var(--el-border-color);
    }
    :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
        background-color: var(--el-color-primary-light-7);
    }
+    .menu-collapse {
+        color: var(--el-color-primary);
+    }
 }
 .custom-tree-node {
    display: flex;
--- a/src/layouts/admin/components/popup/password.vue
+++ b/src/layouts/admin/components/popup/password.vue
@@ -87,7 +87,7 @@ const open = () => {
    dialogVisible.value = true
 }
 const submit = () => {
-    formRef.value.validate(async valid => {
+    formRef.value.validate(async (valid: boolean) => {
        if (valid) {
            passwordConfirm(form.password)
                .then(res => {
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -148,7 +148,7 @@ body,
 }

 .cn-operate-dialog .el-dialog__body .el-scrollbar {
-  padding-right: 60px;
+    // padding-right: 60px;
 }

 .cn-operate-dialog .el-dialog__footer {
@@ -159,11 +159,14 @@ body,
    bottom: 0;
 }

+.cn-operate-dialog .el-form {
+    width: calc(100% - 60px);
+}
+
 .cn-operate-dialog .el-form--inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-gap: 20px 10px;
-  width: calc(100% - 1px);

    .el-form-item {
        margin-right: 0;
@@ -302,3 +305,5 @@ body,
    padding: 13px 15px;
    align-items: center;
 }
+
+
--- a/src/views/auth/userList/index.vue
+++ b/src/views/auth/userList/index.vue
@@ -119,7 +119,7 @@ const tableStore = new TableStore({
                        return row.state !== 1
                    },
                    click: row => {
-                        popupPwdRef.value.open(row.id)
+                        popupPwdRef.value.open(row.id, row.loginName)
                    }
                },
                {
--- a/src/views/auth/userList/popupPwd.vue
+++ b/src/views/auth/userList/popupPwd.vue
@@ -36,7 +36,8 @@ const form = reactive({
    id: '',
    password: '',
    newPwd: '',
-    confirmPwd: ''
+    confirmPwd: '',
+    loginName: ''
 })
 const rules = {
    password: [
@@ -46,7 +47,7 @@ const rules = {
            max: 16,
            message: '长度在 6 到 16 个字符',
            trigger: 'blur'
-        },
+        }
    ],
    newPwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
@@ -83,17 +84,18 @@ const rules = {
 }
 const dialogVisible = ref(false)
 const title = ref('新增菜单')
-const open = (id: string) => {
+const open = (id: string,loginName: string) => {
    form.id = id
+    form.loginName = loginName
    form.password = ''
    form.newPwd = ''
    form.confirmPwd = ''
    dialogVisible.value = true
 }
 const submit = async () => {
-    formRef.value.validate((valid:boolean) => {
+    formRef.value.validate((valid: boolean) => {
        if (valid) {
-            passwordConfirm(form.password).then((res: any) => {
+            passwordConfirm(form.password, form.loginName).then((res: any) => {
                updatePassword({
                    id: form.id,
                    newPassword: form.newPwd
--- a/src/views/govern/manage/basic/dictionary.vue
+++ b/src/views/govern/manage/basic/dictionary.vue
@@ -79,9 +79,9 @@ const tableStore = new TableStore({
        { title: '数据名称', field: 'name' },
        { title: '别名', field: 'otherName' },
        { title: '展示名称', field: 'showName' },
-        { title: '相别', field: 'phaseName' },
-        { title: '单位', field: 'unit' },
-        { title: '基础数据类型', field: 'type' },
+        { title: '相别', field: 'phaseName', width: 80 },
+        { title: '单位', field: 'unit', width: 80 },
+        { title: '基础数据类型', field: 'type', width: 80 },
        { title: '数据谐波次数', field: 'harmStart' },
        { title: '数据统计方法', field: 'statMethod' },
        { title: '数据存储', field: 'classIdName' },
--- a/src/views/govern/manage/factory.vue
+++ b/src/views/govern/manage/factory.vue
@@ -264,7 +264,7 @@ const tableStore = new TableStore({
                    name: 'edit',
                    title: '编辑',
                    type: 'primary',
-                    icon: 'el-icon-Edit',
+                    icon: 'el-icon-EditPen',
                    render: 'tipButton',

                    click: async row => {
--- a/src/views/user/login.vue
+++ b/src/views/user/login.vue
@@ -1,68 +1,69 @@
 <template>
-    <div @keyup.enter='onSubmit(formRef)'>
-        <div @contextmenu.stop='' id='bubble' class='bubble'>
-            <canvas id='bubble-canvas' class='bubble-canvas'></canvas>
+    <div @keyup.enter="onSubmit(formRef)">
+        <div @contextmenu.stop="" id="bubble" class="bubble">
+            <canvas id="bubble-canvas" class="bubble-canvas"></canvas>
        </div>
-        <div class='login-image'></div>
-        <div class='login-container-form'>
-            <div class='title-container'>
-                <div class='title'>
-                    <span style='font-size: 28px'>电能质量数据监测云平台</span>
+        <div class="login-image"></div>
+        <div class="login-container-form">
+            <div class="title-container">
+                <div class="title">
+                    <span style="font-size: 28px">电能质量数据监测云平台</span>
                </div>
            </div>
-            <el-form :rules='rules' ref='formRef' size='large' class='login-form' :model='form'>
-                <el-form-item prop='username'>
+            <el-form :rules="rules" ref="formRef" size="large" class="login-form" :model="form">
+                <el-form-item prop="username">
                    <el-input
-                        ref='usernameRef'
-                        v-model='form.username'
-                        type='text'
+                        ref="usernameRef"
+                        v-model="form.username"
+                        type="text"
                        clearable
-                        placeholder='用户名'
-                        autocomplete='off'
+                        placeholder="用户名"
+                        autocomplete="off"
                    >
                        <template #prefix>
-                            <span class='iconfont icon-yonghu' style='color: #003078'></span>
+                            <span class="iconfont icon-yonghu" style="color: #003078"></span>
                        </template>
                    </el-input>
                </el-form-item>
-                <el-form-item prop='password'>
+                <el-form-item prop="password">
                    <el-input
-                        ref='passwordRef'
-                        v-model='form.password'
-                        type='password'
-                        placeholder='密码'
+                        ref="passwordRef"
+                        v-model="form.password"
+                        type="password"
+                        placeholder="密码"
                        show-password
-                        autocomplete='off'
+                        autocomplete="off"
                    >
                        <template #prefix>
-                            <span class='iconfont icon-mima' style='color: #003078'></span>
+                            <span class="iconfont icon-mima" style="color: #003078"></span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
-                        :loading='state.submitLoading'
-                        class='submit-btn'
+                        :loading="state.submitLoading"
+                        class="submit-btn"
                        round
-                        type='info'
-                        @click='onSubmit(formRef)'
+                        type="info"
+                        @click="onSubmit(formRef)"
                    >
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
-        <div class='copy-right'>
+        <div class="copy-right">
            <span>版权所有 @ 南京灿能电力自动化股份有限公司</span>
            <br />
-            <img style='width: 20px; height: 20px; position: absolute' src='@/assets/login/jhui.png' />
+            <img style="width: 20px; height: 20px; position: absolute" src="@/assets/login/jhui.png" />

            <span>　　苏公网安备 32011502011902号</span>
        </div>
+        <PopupUpdatePwd ref="popupUpdatePwdRef"></PopupUpdatePwd>
    </div>
 </template>

-<script setup lang='ts'>
+<script setup lang="ts">
 import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
 import * as pageBubble from '@/utils/pageBubble'
 import { sm3Digest } from '@/assets/commjs/sm3.js'
@@ -74,15 +75,16 @@ import type { FormInstance, InputInstance, FormRules } from 'element-plus'
 import { useRouter } from 'vue-router'
 import { ADMIN_INFO } from '@/stores/constant/cacheKey'
 import { Local } from '@/utils/storage'
+import PopupUpdatePwd from './popupUpdatePwd.vue'

 const router = useRouter()
 let timer: number

+const popupUpdatePwdRef = ref()
 const formRef = ref<FormInstance>()
 const usernameRef = ref<InputInstance>()
 const passwordRef = ref<InputInstance>()
 const userInfo = useAdminInfo()
-
 Local.remove(ADMIN_INFO)
 userInfo.removeToken()

@@ -129,23 +131,30 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
    await formEl.validate((valid, fields) => {
        if (valid) {
            state.submitLoading = true
-            gongkey({ loginName: encrypt(form.username) }).then(res => {
+            const loginName = encrypt(form.username)
+            gongkey({ loginName }).then(res => {
                window.localStorage.setItem('publicKey', res.data)
                let jiamipassword = sm2(sm3Digest(form.password) + '|' + form.password, res.data, 0)
                login({
-                    username: encrypt(form.username),
+                    username: loginName,
                    password: jiamipassword,
                    grant_type: 'captcha',
                    imageCode: '',
                    verifyCode: 0
-                }).then(res => {
-                    res.data.loginName = encrypt(form.username)
+                })
+                    .then(res => {
+                        res.data.loginName = loginName
                        userInfo.dataFill(res.data)
                        state.submitLoading = false
                        router.push({
                            path: '/'
                        })
                    })
+                    .catch(err => {
+                        if (err.code === 'A0101') {
+                            popupUpdatePwdRef.value.open(loginName)
+                        }
+                    })
            })
            setTimeout(() => {
                state.submitLoading = false
@@ -155,7 +164,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
 }
 </script>

-<style scoped lang='scss'>
+<style scoped lang="scss">
 .bubble {
    position: relative;
    width: 100%;
--- a/src/views/user/popupUpdatePwd.vue
+++ b/src/views/user/popupUpdatePwd.vue
@@ -0,0 +1,95 @@
+<template>
+    <el-dialog class="cn-operate-dialog" v-model="dialogVisible" :title="title">
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
+                <el-form-item label="新密码:" prop="newPwd" style="margin-top: 20px">
+                    <el-input v-model="form.newPwd" type="password" placeholder="请输入新密码" show-password />
+                </el-form-item>
+                <el-form-item label="确认密码:" prop="confirmPwd" style="margin-top: 20px">
+                    <el-input v-model="form.confirmPwd" type="password" placeholder="请输入确认密码" show-password />
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="dialogVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { reactive } from 'vue'
+import { ElMessage } from 'element-plus'
+import { updateFirstPassword } from '@/api/user-boot/user'
+import { validatePwd } from '@/utils/common'
+import { useAdminInfo } from '@/stores/adminInfo'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const adminInfo = useAdminInfo()
+const dialogVisible = ref(false)
+const title = ref('修改默认密码')
+const formRef = ref()
+// 注意不要和表单ref的命名冲突
+const form = reactive({
+    newPwd: '',
+    confirmPwd: '',
+    loginName: ''
+})
+const rules = {
+    newPwd: [
+        { required: true, message: '请输入密码', trigger: 'blur' },
+        {
+            min: 6,
+            max: 16,
+            message: '长度在 6 到 16 个字符',
+            trigger: 'blur'
+        },
+        { validator: validatePwd, trigger: 'blur' }
+    ],
+    confirmPwd: [
+        { required: true, message: '请确认密码', trigger: 'blur' },
+        {
+            min: 6,
+            max: 16,
+            message: '长度在 6 到 16 个字符',
+            trigger: 'blur'
+        },
+        {
+            validator: (rule: any, value: string, callback: any) => {
+                if (value === '') {
+                    callback(new Error('请再次输入密码'))
+                } else if (value !== form.newPwd) {
+                    callback(new Error('两次输入密码不一致!'))
+                } else {
+                    callback()
+                }
+            },
+            trigger: 'blur',
+            required: true
+        }
+    ]
+}
+
+const open = (loginName: string) => {
+    form.loginName = loginName
+    dialogVisible.value = true
+}
+const submit = () => {
+    formRef.value.validate(async (valid: boolean) => {
+        if (valid) {
+            updateFirstPassword({
+                name: form.loginName,
+                password: form.confirmPwd
+            }).then((res: any) => {
+                dialogVisible.value = false
+                ElMessage.success('密码修改成功, 请重新登录')
+            })
+        }
+    })
+}
+
+defineExpose({ open })
+</script>