密码修改

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) {
+export async function pwdSm3(pwd: any, loginName?: string) {
-    let publicKey = await gongkey()
+    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({

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)
     }

src/components/tree/index.vue

@@ -1,12 +1,32 @@
 <template>
-    <div class="cn-tree">
+    <div :style="{ width: menuCollapse ? '40px' : '280px' }" style="transition: all .3s; overflow: hidden;" >
-        <el-input v-model="filterText" placeholder="请输入内容" clearable style="margin-bottom: 10px">
+        <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;

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 => {

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;
 }
+
+

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)
                     }
                 },
                 {

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

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: 'phaseName', width: 80 },
-        { title: '单位', field: 'unit' },
+        { title: '单位', field: 'unit', width: 80 },
-        { title: '基础数据类型', field: 'type' },
+        { title: '基础数据类型', field: 'type', width: 80 },
         { title: '数据谐波次数', field: 'harmStart' },
         { title: '数据统计方法', field: 'statMethod' },
         { title: '数据存储', field: 'classIdName' },

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 => {

src/views/user/login.vue

@@ -1,68 +1,69 @@
 <template>
-    <div @keyup.enter='onSubmit(formRef)'>
+    <div @keyup.enter="onSubmit(formRef)">
-        <div @contextmenu.stop='' id='bubble' class='bubble'>
+        <div @contextmenu.stop="" id="bubble" class="bubble">
-            <canvas id='bubble-canvas' class='bubble-canvas'></canvas>
+            <canvas id="bubble-canvas" class="bubble-canvas"></canvas>
         </div>
-        <div class='login-image'></div>
+        <div class="login-image"></div>
-        <div class='login-container-form'>
+        <div class="login-container-form">
-            <div class='title-container'>
+            <div class="title-container">
-                <div class='title'>
+                <div class="title">
-                    <span style='font-size: 28px'>电能质量数据监测云平台</span>
+                    <span style="font-size: 28px">电能质量数据监测云平台</span>
                 </div>
             </div>
-            <el-form :rules='rules' ref='formRef' size='large' class='login-form' :model='form'>
+            <el-form :rules="rules" ref="formRef" size="large" class="login-form" :model="form">
-                <el-form-item prop='username'>
+                <el-form-item prop="username">
                     <el-input
-                        ref='usernameRef'
+                        ref="usernameRef"
-                        v-model='form.username'
+                        v-model="form.username"
-                        type='text'
+                        type="text"
                         clearable
-                        placeholder='用户名'
+                        placeholder="用户名"
-                        autocomplete='off'
+                        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'
+                        ref="passwordRef"
-                        v-model='form.password'
+                        v-model="form.password"
-                        type='password'
+                        type="password"
-                        placeholder='密码'
+                        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'
+                        :loading="state.submitLoading"
-                        class='submit-btn'
+                        class="submit-btn"
                         round
-                        type='info'
+                        type="info"
-                        @click='onSubmit(formRef)'
+                        @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%;

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>