fe.ems.vue3/src/views/account/components/reset-passwd.vue

<script lang="ts" setup>
import { Modal, message } from 'ant-design-vue/es';
import { reactive } from 'vue';
import { updateUserPassword } from '@/api/profile';
import { regExpPasswd } from '@/utils/regular-utils';
import useUserStore from '@/store/modules/user';
import { useRouter } from 'vue-router';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import useI18n from '@/hooks/useI18n';
const { t } = useI18n();
const { userName, fnLogOut } = useUserStore();
const router = useRouter();

let state = reactive({
  /**表单属性 */
  form: {
    oldPassword: '',
    newPassword: '',
    confirmPassword: '',
  },
  /**表单提交点击状态 */
  formClick: false,
});

/**表单验证确认密码是否一致 */
function fnEqualToPassword(
  rule: Record<string, any>,
  value: string,
  callback: (error?: string) => void
) {
  if (!value) {
    return Promise.reject(t('views.account.settings.equalToPassword'));
  }
  if (state.form.oldPassword === value) {
    return Promise.reject(t('views.account.settings.equalToPasswordOld'));
  }
  if (state.form.newPassword === value) {
    return Promise.resolve();
  }
  return Promise.reject(t('views.account.settings.equalToPasswordErr'));
}

/**表单验证通过 */
function fnFinish() {
  Modal.confirm({
    title: t('common.tipTitle'),
    content: t('views.account.settings.submitTip'),
    onOk() {
      state.formClick = true;
      // 发送请求
      const hide = message.loading(t('common.loading'), 0);
      updateUserPassword(state.form.oldPassword, state.form.confirmPassword)
        .then(res => {
          if (res.code === RESULT_CODE_SUCCESS) {
            fnLogOut();
            Modal.success({
              title: t('common.tipTitle'),
              content: t('views.account.settings.submitOkTip', {
                num: userName,
              }),
              okText: t('views.account.settings.submitOk'),
              onOk() {
                router.push({ name: 'Login' });
              },
            });
          } else {
            message.error(`${res.msg}`, 3);
          }
        })
        .finally(() => {
          hide();
          state.formClick = false;
        });
    },
  });
}
</script>

<template>
  <a-form
    :model="state.form"
    name="stateForm"
    layout="vertical"
    :wrapper-col="{ span: 9 }"
    @finish="fnFinish"
  >
    <a-form-item
      :label="t('views.account.settings.oldPassword')"
      name="oldPassword"
      :rules="[
        {
          required: true,
          min: 6,
          max: 26,
          message: t('views.account.settings.oldPasswordTip'),
        },
      ]"
    >
      <a-input-password
        v-model:value="state.form.oldPassword"
        :placeholder="t('views.account.settings.oldPasswordPleace')"
        :maxlength="26"
      >
        <template #prefix>
          <LockOutlined class="prefix-icon" />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item
      :label="t('views.account.settings.newPassword')"
      name="newPassword"
      :rules="[
        {
          required: true,
          pattern: regExpPasswd,
          message: t('views.account.settings.newPasswordTip'),
        },
      ]"
    >
      <a-input-password
        v-model:value="state.form.newPassword"
        :placeholder="t('views.account.settings.newPassworddPleace')"
        :maxlength="26"
      >
        <template #prefix>
          <LockOutlined class="prefix-icon" />
        </template>
      </a-input-password>
    </a-form-item>
    <a-form-item
      :label="t('views.account.settings.confirmPassword')"
      name="confirmPassword"
      :rules="[
        {
          required: true,
          validator: fnEqualToPassword,
        },
      ]"
    >
      <a-input-password
        v-model:value="state.form.confirmPassword"
        :placeholder="t('views.account.settings.confirmPasswordPleace')"
        :maxlength="26"
      >
        <template #prefix>
          <LockOutlined class="prefix-icon" />
        </template>
      </a-input-password>
    </a-form-item>

    <a-form-item :wrapper-col="{ span: 4 }">
      <a-button
        block
        type="primary"
        html-type="submit"
        :loading="state.formClick"
      >
        {{ t('views.account.settings.submit') }}
      </a-button>
    </a-form-item>
  </a-form>
</template>

<style lang="less" scoped></style>