Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

密码修改

Browse Source
This commit is contained in:
仲么了
2024-01-29 13:57:52 +08:00
parent 7cfa3c0a9e
commit a0c582e1dd
11 changed files with 391 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/api/user-boot/user.ts
View File

@@ -2,14 +2,14 @@ import request from '@/utils/request'
import { LoginData } from '@/api/types' import { LoginData } from '@/api/types'
import { useAdminInfo } from '@/stores/adminInfo' import { useAdminInfo } from '@/stores/adminInfo'
import { sm3Digest } from '@/assets/commjs/sm3.js' 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) { export function gongkey(params?: any) {
if (!params) { if (!params) {
const adminInfo = useAdminInfo() const adminInfo = useAdminInfo()
params = { params = {
loginName: adminInfo.$state.loginName loginName: encrypt(adminInfo.$state.loginName)
} }
} }
return request({ 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加密 let sm3Pwd = sm3Digest(pwd) //SM3加密
return sm2(sm3Pwd + '|' + pwd, publicKey.data, 0) return sm2(sm3Pwd + '|' + pwd, publicKey.data, 0)
} }
@@ -64,7 +70,6 @@ export const getMarketList = () => {
}) })
} }
export function add(data: any) { export function add(data: any) {
return request({ return request({
url: '/user-boot/user/add', 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({ return request({
url: '/user-boot/user/passwordConfirm?password=' + await pwdSm3(pwd), url: '/user-boot/user/passwordConfirm?password=' + (await pwdSm3(pwd, loginName)),
method: 'get' 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) { export function checkUser(data: any) {
return request({ return request({
@@ -123,4 +138,4 @@ export function checkUser(data: any) {
method: 'put', method: 'put',
data: data data: data
}) })
} }

6
src/components/table/header/index.vue
View File

@@ -13,7 +13,7 @@
label-position="left" label-position="left"
:inline="true" :inline="true"
class="table-com-search-form" class="table-com-search-form"
:label-width="90" :label-width="labelWidth"
> >
<el-form-item label="区域" v-if="area"> <el-form-item label="区域" v-if="area">
<Area ref="areaRef" v-model="tableStore.table.params.deptIndex" /> <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
@@ -52,7 +52,7 @@ const tableHeader = ref()
const datePickerRef = ref() const datePickerRef = ref()
const dictData = useDictData() const dictData = useDictData()
const areaRef = ref() const areaRef = ref()
const labelWidth = ref('')
interface Props { interface Props {
datePicker?: boolean datePicker?: boolean
area?: boolean area?: boolean
@@ -103,9 +103,11 @@ const showSelectChange = () => {
// 把dom(id=header-form)插入到table-com-search1或者table-com-search2 // 把dom(id=header-form)插入到table-com-search1或者table-com-search2
const dom = document.getElementById('header-form') as HTMLElement const dom = document.getElementById('header-form') as HTMLElement
if (showSelect.value) { if (showSelect.value) {
labelWidth.value = '90'
const dom1 = document.getElementById('table-com-search1') as HTMLElement const dom1 = document.getElementById('table-com-search1') as HTMLElement
dom1.appendChild(dom) dom1.appendChild(dom)
} else { } else {
labelWidth.value = ''
const dom2 = document.getElementById('table-com-search2') as HTMLElement const dom2 = document.getElementById('table-com-search2') as HTMLElement
dom2.appendChild(dom) dom2.appendChild(dom)
} }

87
src/components/tree/index.vue
View File

@@ -1,37 +1,66 @@
<template> <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
<template #prefix> v-show="menuCollapse"
<Icon name="el-icon-Search" style="font-size: 16px" /> @click="onMenuCollapse"
</template> :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
</el-input> :class="menuCollapse ? 'unfold' : ''"
<el-tree size="18"
style="flex: 1;overflow: auto;" class="fold ml10 mt20 menu-collapse"
ref="treeRef" style="cursor: pointer"
:props="defaultProps" />
v-bind="$attrs" <div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
highlight-current <div style="display: flex; align-items: center" class="mb10">
default-expand-all <el-input v-model="filterText" placeholder="请输入内容" clearable>
:filter-node-method="filterNode" <template #prefix>
node-key="id" <Icon name="el-icon-Search" style="font-size: 16px" />
> </template>
<template #default="{ node, data }"> </el-input>
<span class="custom-tree-node"> <Icon
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }" v-if="data.icon" /> @click="onMenuCollapse"
<span style="margin-left: 4px">{{ node.label }}</span> :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
</span> :class="menuCollapse ? 'unfold' : ''"
</template> size="18"
</el-tree> class="fold ml10 menu-collapse"
style="cursor: pointer"
/>
</div>
<el-tree
style="flex: 1; overflow: auto"
ref="treeRef"
:props="defaultProps"
v-bind="$attrs"
highlight-current
default-expand-all
:filter-node-method="filterNode"
node-key="id"
>
<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"
/>
<span style="margin-left: 4px">{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ElTree } from 'element-plus'; import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElTree } from 'element-plus'
import { ref, watch } from 'vue' import { ref, watch } from 'vue'
defineOptions({ defineOptions({
name: 'govern/tree' name: 'govern/tree'
}) })
const { proxy } = useCurrentInstance()
const menuCollapse = ref(false)
const filterText = ref('') const filterText = ref('')
const defaultProps = { const defaultProps = {
label: 'name', label: 'name',
@@ -40,6 +69,10 @@ const defaultProps = {
watch(filterText, val => { watch(filterText, val => {
treeRef.value!.filter(val) treeRef.value!.filter(val)
}) })
const onMenuCollapse = () => {
menuCollapse.value = !menuCollapse.value
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
}
const filterNode = (value: string, data: any) => { const filterNode = (value: string, data: any) => {
if (!value) return true if (!value) return true
return data.name.includes(value) return data.name.includes(value)
@@ -47,6 +80,7 @@ const filterNode = (value: string, data: any) => {
const treeRef = ref<InstanceType<typeof ElTree>>() const treeRef = ref<InstanceType<typeof ElTree>>()
defineExpose({ treeRef }) defineExpose({ treeRef })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.cn-tree { .cn-tree {
flex-shrink: 0; flex-shrink: 0;
@@ -57,11 +91,14 @@ defineExpose({ treeRef })
height: 100%; height: 100%;
width: 280px; width: 280px;
:deep(.el-tree) { :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) { :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
background-color: var(--el-color-primary-light-7); background-color: var(--el-color-primary-light-7);
} }
.menu-collapse {
color: var(--el-color-primary);
}
} }
.custom-tree-node { .custom-tree-node {
display: flex; display: flex;

2
src/layouts/admin/components/popup/password.vue
View File

@@ -87,7 +87,7 @@ const open = () => {
dialogVisible.value = true dialogVisible.value = true
} }
const submit = () => { const submit = () => {
formRef.value.validate(async valid => { formRef.value.validate(async (valid: boolean) => {
if (valid) { if (valid) {
passwordConfirm(form.password) passwordConfirm(form.password)
.then(res => { .then(res => {

281
src/styles/app.scss
View File

@@ -1,208 +1,211 @@
/* 基本样式 */ /* 基本样式 */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
outline: none !important; outline: none !important;
} }
html, html,
body, body,
#app { #app {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
font-weight: 400; font-weight: 400;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
background-color: var(--ba-bg-color); background-color: var(--ba-bg-color);
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 8px;
height: 10px; height: 10px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border-radius: 5px; border-radius: 5px;
height: 3px; height: 3px;
background-color: var(--el-color-primary) !important; background-color: var(--el-color-primary) !important;
border-radius: 30px !important; border-radius: 30px !important;
} }
// 阿里 iconfont Symbol引用css // 阿里 iconfont Symbol引用css
.iconfont-icon { .iconfont-icon {
width: 1em; width: 1em;
height: 1em; height: 1em;
vertical-align: -0.15em; vertical-align: -0.15em;
fill: currentColor; fill: currentColor;
overflow: hidden; overflow: hidden;
} }
.w100 { .w100 {
width: 100% !important; width: 100% !important;
} }
.h100 { .h100 {
height: 100% !important; height: 100% !important;
} }
.ba-center { .ba-center {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.default-main { .default-main {
position: relative; position: relative;
background: #fff; background: #fff;
margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space); margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
} }
.zoom-handle { .zoom-handle {
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
bottom: -10px; bottom: -10px;
right: -10px; right: -10px;
cursor: se-resize; cursor: se-resize;
} }
.block-help { .block-help {
display: block; display: block;
width: 100%; width: 100%;
color: #909399; color: #909399;
font-size: 13px; font-size: 13px;
line-height: 16px; line-height: 16px;
padding-top: 5px; padding-top: 5px;
} }
/* 表格顶部菜单-s */ /* 表格顶部菜单-s */
.table-header { .table-header {
.table-header-operate .icon { .table-header-operate .icon {
font-size: 14px !important; font-size: 14px !important;
color: var(--el-color-white) !important; color: var(--el-color-white) !important;
} }
.el-button.is-disabled .icon { .el-button.is-disabled .icon {
color: var(--el-button-disabled-text-color) !important; color: var(--el-button-disabled-text-color) !important;
} }
} }
/* 表格顶部菜单-e */ /* 表格顶部菜单-e */
/* 鼠标置入浮动效果-s */ /* 鼠标置入浮动效果-s */
.suspension { .suspension {
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.suspension:hover { .suspension:hover {
-webkit-transform: translateY(-4px) scale(1.02); -webkit-transform: translateY(-4px) scale(1.02);
-moz-transform: translateY(-4px) scale(1.02); -moz-transform: translateY(-4px) scale(1.02);
-ms-transform: translateY(-4px) scale(1.02); -ms-transform: translateY(-4px) scale(1.02);
-o-transform: translateY(-4px) scale(1.02); -o-transform: translateY(-4px) scale(1.02);
transform: translateY(-4px) scale(1.02); transform: translateY(-4px) scale(1.02);
-webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2); box-shadow: 0 14px 24px rgba(0, 0, 0, 0.2);
z-index: 999; z-index: 999;
border-radius: 6px; border-radius: 6px;
} }
/* 鼠标置入浮动效果-e */ /* 鼠标置入浮动效果-e */
/* 表格-s */ /* 表格-s */
.ba-table-box { .ba-table-box {
border-radius: var(--el-border-radius-round); border-radius: var(--el-border-radius-round);
} }
.ba-table-alert { .ba-table-alert {
background-color: var(--el-fill-color-darker) !important; background-color: var(--el-fill-color-darker) !important;
border: 1px solid var(--ba-boder-color); border: 1px solid var(--ba-boder-color);
border-bottom: 0; border-bottom: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }
/* 表格-e */ /* 表格-e */
/* 新增/编辑表单-s */ /* 新增/编辑表单-s */
.cn-operate-dialog { .cn-operate-dialog {
overflow: hidden; overflow: hidden;
border-radius: var(--el-border-radius-base); border-radius: var(--el-border-radius-base);
} }
.cn-operate-dialog .el-dialog__header { .cn-operate-dialog .el-dialog__header {
padding-bottom: 16px; padding-bottom: 16px;
border-bottom: 1px solid var(--ba-bg-color); border-bottom: 1px solid var(--ba-bg-color);
} }
.cn-operate-dialog .el-dialog__body { .cn-operate-dialog .el-dialog__body {
height: 60vh; height: 60vh;
padding-top: 20px; padding-top: 20px;
padding-bottom: 52px; padding-bottom: 52px;
} }
.cn-operate-dialog .el-dialog__body .el-scrollbar { .cn-operate-dialog .el-dialog__body .el-scrollbar {
padding-right: 60px; // padding-right: 60px;
} }
.cn-operate-dialog .el-dialog__footer { .cn-operate-dialog .el-dialog__footer {
padding: 10px var(--el-dialog-padding-primary); padding: 10px var(--el-dialog-padding-primary);
box-shadow: var(--el-box-shadow); box-shadow: var(--el-box-shadow);
position: absolute; position: absolute;
width: 100%; width: 100%;
bottom: 0; bottom: 0;
}
.cn-operate-dialog .el-form {
width: calc(100% - 60px);
} }
.cn-operate-dialog .el-form--inline { .cn-operate-dialog .el-form--inline {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px 10px; grid-gap: 20px 10px;
width: calc(100% - 1px);
.el-form-item { .el-form-item {
margin-right: 0; margin-right: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }
.cn-operate-dialog .el-form--inline .el-select { .cn-operate-dialog .el-form--inline .el-select {
width: 100%; width: 100%;
} }
.ba-operate-form { .ba-operate-form {
padding-top: 20px; padding-top: 20px;
} }
/* 新增/编辑表单-e */ /* 新增/编辑表单-e */
/* 全局遮罩-s */ /* 全局遮罩-s */
.ba-layout-shade { .ba-layout-shade {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
z-index: 9999990; z-index: 9999990;
} }
/* 全局遮罩-e */ /* 全局遮罩-e */
/* 图片上传预览-s */ /* 图片上传预览-s */
.img-preview-dialog .el-dialog__body { .img-preview-dialog .el-dialog__body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
img { img {
max-width: 100%; max-width: 100%;
} }
} }
/* 图片上传预览-e */ /* 图片上传预览-e */
@@ -212,93 +215,95 @@ body,
.slide-right-leave-active, .slide-right-leave-active,
.slide-left-enter-active, .slide-left-enter-active,
.slide-left-leave-active { .slide-left-leave-active {
will-change: transform; will-change: transform;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
// slide-right // slide-right
.slide-right-enter-from { .slide-right-enter-from {
opacity: 0; opacity: 0;
transform: translateX(-20px); transform: translateX(-20px);
} }
.slide-right-leave-to { .slide-right-leave-to {
opacity: 0; opacity: 0;
transform: translateX(20px); transform: translateX(20px);
} }
// slide-left // slide-left
.slide-left-enter-from { .slide-left-enter-from {
@extend .slide-right-leave-to; @extend .slide-right-leave-to;
} }
.slide-left-leave-to { .slide-left-leave-to {
@extend .slide-right-enter-from; @extend .slide-right-enter-from;
} }
/* 页面切换动画-e */ /* 页面切换动画-e */
/* 布局相关-s */ /* 布局相关-s */
.frontend-footer-brother { .frontend-footer-brother {
min-height: calc(100vh - 120px); min-height: calc(100vh - 120px);
} }
.user-views { .user-views {
padding-left: 15px; padding-left: 15px;
.user-views-card { .user-views-card {
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
.ba-aside-drawer { .ba-aside-drawer {
.el-drawer__body { .el-drawer__body {
padding: 0; padding: 0;
} }
} }
/* 布局相关-e */ /* 布局相关-e */
/* 暗黑模式公共样式-s */ /* 暗黑模式公共样式-s */
.ba-icon-dark { .ba-icon-dark {
color: var(--el-text-color-primary) !important; color: var(--el-text-color-primary) !important;
} }
/* 暗黑模式公共样式-e */ /* 暗黑模式公共样式-e */
/* NProgress-s */ /* NProgress-s */
#nprogress { #nprogress {
.bar, .bar,
.spinner { .spinner {
z-index: 999999; z-index: 999999;
} }
} }
/* NProgress-e */ /* NProgress-e */
/* 自适应-s */ /* 自适应-s */
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.xs-hidden { .xs-hidden {
display: none; display: none;
} }
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
.cn-operate-dialog { .cn-operate-dialog {
width: 96%; width: 96%;
} }
} }
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
.user-views { .user-views {
padding: 0; padding: 0;
} }
} }
/* 自适应-e */ /* 自适应-e */
.custom-table-header { .custom-table-header {
display: flex; display: flex;
padding: 13px 15px; padding: 13px 15px;
align-items: center; align-items: center;
} }

2
src/views/auth/userList/index.vue
View File

@@ -119,7 +119,7 @@ const tableStore = new TableStore({
return row.state !== 1 return row.state !== 1
}, },
click: row => { click: row => {
popupPwdRef.value.open(row.id) popupPwdRef.value.open(row.id, row.loginName)
} }
}, },
{ {

12
src/views/auth/userList/popupPwd.vue
View File

@@ -36,7 +36,8 @@ const form = reactive({
id: '', id: '',
password: '', password: '',
newPwd: '', newPwd: '',
confirmPwd: '' confirmPwd: '',
loginName: ''
}) })
const rules = { const rules = {
password: [ password: [
@@ -46,7 +47,7 @@ const rules = {
max: 16, max: 16,
message: '长度在 6 到 16 个字符', message: '长度在 6 到 16 个字符',
trigger: 'blur' trigger: 'blur'
}, }
], ],
newPwd: [ newPwd: [
{ required: true, message: '请输入密码', trigger: 'blur' }, { required: true, message: '请输入密码', trigger: 'blur' },
@@ -83,17 +84,18 @@ const rules = {
} }
const dialogVisible = ref(false) const dialogVisible = ref(false)
const title = ref('新增菜单') const title = ref('新增菜单')
const open = (id: string) => { const open = (id: string,loginName: string) => {
form.id = id form.id = id
form.loginName = loginName
form.password = '' form.password = ''
form.newPwd = '' form.newPwd = ''
form.confirmPwd = '' form.confirmPwd = ''
dialogVisible.value = true dialogVisible.value = true
} }
const submit = async () => { const submit = async () => {
formRef.value.validate((valid:boolean) => { formRef.value.validate((valid: boolean) => {
if (valid) { if (valid) {
passwordConfirm(form.password).then((res: any) => { passwordConfirm(form.password, form.loginName).then((res: any) => {
updatePassword({ updatePassword({
id: form.id, id: form.id,
newPassword: form.newPwd newPassword: form.newPwd

6
src/views/govern/manage/basic/dictionary.vue
View File

@@ -79,9 +79,9 @@ const tableStore = new TableStore({
{ title: '数据名称', field: 'name' }, { title: '数据名称', field: 'name' },
{ title: '别名', field: 'otherName' }, { title: '别名', field: 'otherName' },
{ title: '展示名称', field: 'showName' }, { 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: 'harmStart' },
{ title: '数据统计方法', field: 'statMethod' }, { title: '数据统计方法', field: 'statMethod' },
{ title: '数据存储', field: 'classIdName' }, { title: '数据存储', field: 'classIdName' },

2
src/views/govern/manage/factory.vue
View File

@@ -264,7 +264,7 @@ const tableStore = new TableStore({
name: 'edit', name: 'edit',
title: '编辑', title: '编辑',
type: 'primary', type: 'primary',
icon: 'el-icon-Edit', icon: 'el-icon-EditPen',
render: 'tipButton', render: 'tipButton',
click: async row => { click: async row => {

91
src/views/user/login.vue
View File

@@ -1,68 +1,69 @@
<template> <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>
<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>
</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 <el-input
ref='usernameRef' ref="usernameRef"
v-model='form.username' v-model="form.username"
type='text' type="text"
clearable clearable
placeholder='用户名' placeholder="用户名"
autocomplete='off' autocomplete="off"
> >
<template #prefix> <template #prefix>
<span class='iconfont icon-yonghu' style='color: #003078'></span> <span class="iconfont icon-yonghu" style="color: #003078"></span>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop='password'> <el-form-item prop="password">
<el-input <el-input
ref='passwordRef' ref="passwordRef"
v-model='form.password' v-model="form.password"
type='password' type="password"
placeholder='密码' placeholder="密码"
show-password show-password
autocomplete='off' autocomplete="off"
> >
<template #prefix> <template #prefix>
<span class='iconfont icon-mima' style='color: #003078'></span> <span class="iconfont icon-mima" style="color: #003078"></span>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button <el-button
:loading='state.submitLoading' :loading="state.submitLoading"
class='submit-btn' class="submit-btn"
round round
type='info' type="info"
@click='onSubmit(formRef)' @click="onSubmit(formRef)"
> >
登录 登录
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
<div class='copy-right'> <div class="copy-right">
<span>版权所有 @ 南京灿能电力自动化股份有限公司</span> <span>版权所有 @ 南京灿能电力自动化股份有限公司</span>
<br /> <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> <span>　　苏公网安备 32011502011902号</span>
</div> </div>
<PopupUpdatePwd ref="popupUpdatePwdRef"></PopupUpdatePwd>
</div> </div>
</template> </template>
<script setup lang='ts'> <script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue' import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
import * as pageBubble from '@/utils/pageBubble' import * as pageBubble from '@/utils/pageBubble'
import { sm3Digest } from '@/assets/commjs/sm3.js' 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 { useRouter } from 'vue-router'
import { ADMIN_INFO } from '@/stores/constant/cacheKey' import { ADMIN_INFO } from '@/stores/constant/cacheKey'
import { Local } from '@/utils/storage' import { Local } from '@/utils/storage'
import PopupUpdatePwd from './popupUpdatePwd.vue'
const router = useRouter() const router = useRouter()
let timer: number let timer: number
const popupUpdatePwdRef = ref()
const formRef = ref<FormInstance>() const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>() const usernameRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>() const passwordRef = ref<InputInstance>()
const userInfo = useAdminInfo() const userInfo = useAdminInfo()
Local.remove(ADMIN_INFO) Local.remove(ADMIN_INFO)
userInfo.removeToken() userInfo.removeToken()
@@ -129,23 +131,30 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
await formEl.validate((valid, fields) => { await formEl.validate((valid, fields) => {
if (valid) { if (valid) {
state.submitLoading = true 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) window.localStorage.setItem('publicKey', res.data)
let jiamipassword = sm2(sm3Digest(form.password) + '|' + form.password, res.data, 0) let jiamipassword = sm2(sm3Digest(form.password) + '|' + form.password, res.data, 0)
login({ login({
username: encrypt(form.username), username: loginName,
password: jiamipassword, password: jiamipassword,
grant_type: 'captcha', grant_type: 'captcha',
imageCode: '', imageCode: '',
verifyCode: 0 verifyCode: 0
}).then(res => {
res.data.loginName = encrypt(form.username)
userInfo.dataFill(res.data)
state.submitLoading = false
router.push({
path: '/'
})
}) })
.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(() => { setTimeout(() => {
state.submitLoading = false state.submitLoading = false
@@ -155,7 +164,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
} }
</script> </script>
<style scoped lang='scss'> <style scoped lang="scss">
.bubble { .bubble {
position: relative; position: relative;
width: 100%; width: 100%;

95
src/views/user/popupUpdatePwd.vue Normal file
View File

@@ -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>