|
|
@@ -0,0 +1,135 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <a-modal
|
|
|
+ v-model:visible="visible"
|
|
|
+ width="40%"
|
|
|
+ :title="$t('login.form.changePassword')"
|
|
|
+ @cancel="() => handleCancel()"
|
|
|
+ @before-ok="handleBeforeOk"
|
|
|
+ >
|
|
|
+ <a-form :model="form" auto-label-width ref="formRef">
|
|
|
+ <a-row :gutter="8">
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item
|
|
|
+ field="oledPassword"
|
|
|
+ :label="t('login.form.currentPassword')"
|
|
|
+ :rules="getRules(t).required"
|
|
|
+ >
|
|
|
+ <a-input-password v-model="form.oledPassword" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item
|
|
|
+ field="password"
|
|
|
+ :label="t('login.form.newPassword')"
|
|
|
+ :rules="[
|
|
|
+ ...getRules(t).required,
|
|
|
+ {
|
|
|
+ validator: (value: string, cb: (error?: string) => void) => {
|
|
|
+ if (value === form.oledPassword) {
|
|
|
+ cb(t('form.rules.passwordNotSameMatch'));
|
|
|
+ } else {
|
|
|
+ cb();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <a-input-password v-model="form.password" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="24">
|
|
|
+ <a-form-item
|
|
|
+ field="confirmPassword"
|
|
|
+ :label="t('login.form.confirmNewPassword')"
|
|
|
+ :rules="[
|
|
|
+ ...getRules(t).required,
|
|
|
+ {
|
|
|
+ validator: (value: string, cb: (error?: string) => void) => {
|
|
|
+ if (value !== form.password) {
|
|
|
+ cb(t('form.rules.passwordNotMatch'));
|
|
|
+ } else {
|
|
|
+ cb();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <a-input-password v-model="form.confirmPassword" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts" name="ChangePassword">
|
|
|
+import { reactive, ref, shallowRef, watch, getCurrentInstance } from 'vue';
|
|
|
+import { getPluginDetails } from '@/api/plugin';
|
|
|
+import type { DataList } from '@/api/plugin';
|
|
|
+import { privilegeList, getRules } from '@/utils/const';
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+import type { UserData, UserParams } from '@/api/user';
|
|
|
+import { getUserList, saveUpdatePassword } from '@/api/user';
|
|
|
+
|
|
|
+const formRef = ref();
|
|
|
+const { t } = useI18n();
|
|
|
+
|
|
|
+const this_ = getCurrentInstance()?.appContext.config.globalProperties;
|
|
|
+export interface ChangePasswordForm {
|
|
|
+ oledPassword: string;
|
|
|
+ password: string;
|
|
|
+ confirmPassword: string;
|
|
|
+}
|
|
|
+interface ChangePasswordProps {
|
|
|
+ modelValue: boolean;
|
|
|
+}
|
|
|
+interface ChangePasswordEmits {
|
|
|
+ (e: 'update:modelValue', value: boolean): void;
|
|
|
+}
|
|
|
+const props = withDefaults(defineProps<ChangePasswordProps>(), {
|
|
|
+ modelValue: false,
|
|
|
+ id: null,
|
|
|
+});
|
|
|
+const emit = defineEmits<ChangePasswordEmits>();
|
|
|
+const visible = shallowRef<boolean>(false);
|
|
|
+watch(
|
|
|
+ () => props.modelValue,
|
|
|
+ value => {
|
|
|
+ visible.value = value;
|
|
|
+ if (value) {
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+const formModel = () => {
|
|
|
+ return {} as ChangePasswordForm;
|
|
|
+};
|
|
|
+const form = ref<ChangePasswordForm>(formModel());
|
|
|
+const handleBeforeOk = (done: (closed: boolean) => void) => {
|
|
|
+ formRef.value.validate().then((data: ChangePasswordForm) => {
|
|
|
+ if (!data) {
|
|
|
+ saveUpdatePassword(form.value)
|
|
|
+ .then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this_?.$message.success(t('message.success'));
|
|
|
+ handleCancel();
|
|
|
+ done(true); // 关闭模态框
|
|
|
+ } else {
|
|
|
+ res.message && this_?.$message.error(res.message);
|
|
|
+ done(false); // 关闭loading
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ done(false); // 不关闭模态框（例如提交失败时）
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ done(false); // 不关闭模态框（例如提交失败时）
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+const handleCancel = () => {
|
|
|
+ form.value = formModel();
|
|
|
+ visible.value = false;
|
|
|
+ emit('update:modelValue', false);
|
|
|
+};
|
|
|
+</script>
|
曾坤森