perf: 首页新增修改密码提示

This commit is contained in:
xiaojunnuo
2024-11-30 22:35:26 +08:00
parent 61d6b06c56
commit 0772d3b3fd
10 changed files with 162 additions and 92 deletions
@@ -27,6 +27,7 @@ export interface UserInfoRes {
nickName: string;
avatar: string;
roleIds: number[];
isWeak?: boolean;
}
export interface LoginRes {
@@ -0,0 +1,102 @@
<template>
<a-button v-if="showButton" type="primary" @click="open">修改密码</a-button>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { CrudOptions, useColumns, useFormWrapper } from "@fast-crud/fast-crud";
import * as api from "/@/views/certd/mine/api";
import { notification } from "ant-design-vue";
defineProps<{
showButton: boolean;
}>();
let passwordFormRef = ref();
const validatePass1 = async (rule: any, value: any) => {
if (value === "") {
throw new Error("请输入密码");
}
const formData = passwordFormRef.value.getFormData();
if (formData.confirmNewPassword !== "") {
passwordFormRef.value.formRef.formRef.validateFields(["confirmNewPassword"]);
}
if (formData.password === formData.newPassword) {
throw new Error("新密码不能和旧密码相同");
}
};
const validatePass2 = async (rule: any, value: any) => {
if (value === "") {
throw new Error("请再次输入密码");
} else if (value !== passwordFormRef.value.getFormData().newPassword) {
throw new Error("两次输入密码不一致!");
}
};
const { openDialog } = useFormWrapper();
const { buildFormOptions } = useColumns();
const passwordFormOptions: CrudOptions = {
form: {
col: {
span: 24
},
wrapper: {
title: "修改密码",
width: "500px"
},
async doSubmit({ form }) {
await api.changePassword(form);
},
async afterSubmit() {
notification.success({ message: "修改成功" });
}
},
columns: {
password: {
title: "旧密码",
type: "password",
form: {
rules: [{ required: true, message: "请输入旧密码" }]
}
},
newPassword: {
title: "新密码",
type: "password",
form: {
rules: [
{ required: true, message: "请输入确认密码" },
//@ts-ignore
{ validator: validatePass1, trigger: "blur" }
]
}
},
confirmNewPassword: {
title: "确认新密码",
type: "password",
form: {
rules: [
{ required: true, message: "请输入确认密码" },
//@ts-ignore
{ validator: validatePass2, trigger: "blur" }
]
}
}
}
};
async function open(opts: { password: "" }) {
const formOptions = buildFormOptions(passwordFormOptions);
formOptions.newInstance = true; //新实例打开
passwordFormRef.value = await openDialog(formOptions);
passwordFormRef.value.setFormData({
password: opts.password
});
console.log(passwordFormRef.value);
}
const scope = ref({
open: open
});
defineExpose(scope.value);
</script>
@@ -16,7 +16,7 @@
<a-descriptions-item label="邮箱">{{ userInfo.email }}</a-descriptions-item>
<a-descriptions-item label="手机号">{{ userInfo.phoneCode }}{{ userInfo.mobile }}</a-descriptions-item>
<a-descriptions-item label="修改密码">
<a-button type="primary" @click="changePassword">修改密码</a-button>
<change-password-button :show-button="true"> </change-password-button>
</a-descriptions-item>
</a-descriptions>
</div>
@@ -26,8 +26,7 @@
<script lang="ts" setup>
import * as api from "./api";
import { Ref, ref } from "vue";
import { CrudOptions, useColumns, useFormWrapper } from "@fast-crud/fast-crud";
import { notification } from "ant-design-vue";
import ChangePasswordButton from "/@/views/certd/mine/change-password-button.vue";
defineOptions({
name: "UserProfile"
@@ -39,79 +38,4 @@ const getUserInfo = async () => {
userInfo.value = await api.getMineInfo();
};
getUserInfo();
let passwordFormRef = ref();
const validatePass1 = async (rule: any, value: any) => {
if (value === "") {
throw new Error("请输入密码");
}
if (passwordFormRef.value.getFormData().confirmNewPassword !== "") {
passwordFormRef.value.formRef.formRef.validateFields(["confirmNewPassword"]);
}
};
const validatePass2 = async (rule: any, value: any) => {
if (value === "") {
throw new Error("请再次输入密码");
} else if (value !== passwordFormRef.value.getFormData().newPassword) {
throw new Error("两次输入密码不一致!");
}
};
const { openDialog } = useFormWrapper();
const { buildFormOptions } = useColumns();
const passwordFormOptions: CrudOptions = {
form: {
col: {
span: 24
},
wrapper: {
title: "修改密码",
width: "500px"
},
async doSubmit({ form }) {
await api.changePassword(form);
},
async afterSubmit() {
notification.success({ message: "修改成功" });
}
},
columns: {
password: {
title: "旧密码",
type: "password",
form: {
rules: [{ required: true, message: "请输入旧密码" }]
}
},
newPassword: {
title: "新密码",
type: "password",
form: {
rules: [
{ required: true, message: "请输入确认密码" },
//@ts-ignore
{ validator: validatePass1, trigger: "blur" }
]
}
},
confirmNewPassword: {
title: "确认新密码",
type: "password",
form: {
rules: [
{ required: true, message: "请输入确认密码" },
//@ts-ignore
{ validator: validatePass2, trigger: "blur" }
]
}
}
}
};
async function changePassword() {
const formOptions = buildFormOptions(passwordFormOptions);
formOptions.newInstance = true; //新实例打开
passwordFormRef.value = await openDialog(formOptions);
console.log(passwordFormRef.value);
}
</script>
@@ -121,8 +121,9 @@ export function getCommonColumnDefine(crudExpose: any, typeRef: any, api: any) {
if (!immediate) {
form.body = {};
mitter.emit("openVipModal");
if (define.needPlus) {
mitter.emit("openVipModal");
}
}
if (!form.name || form.name === lastTitle) {
@@ -2,12 +2,33 @@
<fs-page class="home—index">
<!-- <page-content />-->
<dashboard-user />
<change-password-button ref="changePasswordButtonRef" :show-button="false"></change-password-button>
</fs-page>
</template>
<script lang="ts" setup>
// import PageContent from "./content/index.vue";
import DashboardUser from "./dashboard/index.vue";
import { useUserStore } from "/@/store/modules/user";
import ChangePasswordButton from "/@/views/certd/mine/change-password-button.vue";
import { onMounted, ref } from "vue";
import { Modal } from "ant-design-vue";
const userStore = useUserStore();
const changePasswordButtonRef = ref();
onMounted(() => {
if (userStore.getUserInfo.isWeak === true) {
Modal.info({
title: "修改密码",
content: "为了您的账户安全,请立即修改密码",
onOk: () => {
changePasswordButtonRef.value.open({
password: "123456"
});
},
okText: "立即修改"
});
}
});
</script>
<style lang="less">
.homeindex {
@@ -16,6 +16,11 @@ export class MineController extends BaseController {
public async info() {
const userId = this.getUserId();
const user = await this.userService.info(userId);
const isWeak = await this.userService.checkPassword('123456', user.password, user.passwordVersion);
if (isWeak) {
//@ts-ignore
user.isWeak = true;
}
user.roleIds = await this.roleService.getRoleIdsByUserId(userId);
delete user.password;
return this.ok(user);
@@ -79,12 +79,7 @@ export class RoleController extends CrudController<RoleService> {
* @param permissionIds
*/
@Post('/authz', { summary: 'sys:auth:role:edit' })
async authz(
@Body('roleId')
roleId,
@Body('permissionIds')
permissionIds
) {
async authz(@Body('roleId') roleId, @Body('permissionIds') permissionIds) {
await this.service.authz(roleId, permissionIds);
return this.ok(null);
}
@@ -44,6 +44,9 @@ export class AnPushNotification extends BaseNotification {
channel: this.channel,
},
};
await this.http.request(config);
const res = await this.http.request(config);
if (res.code != 200) {
throw new Error('发送失败:' + res.msg);
}
}
}