marking-cet-web/src/modules/bootstrap/change-password/index.vue

<template>
  <div class="grid full change-pwd-view">
    <div class="change-pwd-modal">
      <div class="p-l-large change-pwd-modal-header">请修改密码</div>
      <div class="change-pwd-modal-content">
        <base-form ref="formRef" :model="userModel" :rules="rules" :items="items" :label-width="useVW(90)" size="large">
          <template #form-item-confirm>
            <confirm-button class="m-t-large" size="large" @confirm="onSubmit" @cancel="onCancel"></confirm-button>
          </template>
        </base-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="ChangePassword">
import { reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import useFetch from '@/hooks/useFetch'
import useVModel from '@/hooks/useVModel'
import useVW from '@/hooks/useVW'
import useForm from '@/hooks/useForm'
import BaseForm from '@/components/element/BaseForm.vue'
import ConfirmButton from '@/components/common/ConfirmButton.vue'
import { useRouter, useRoute } from 'vue-router'
import useMainStore from '@/store/main'

import type { EpFormItem, EpFormRules } from 'global-type'
const { push, replace } = useRouter()
const route = useRoute()
const { formRef, elFormRef } = useForm()
const mainStore = useMainStore()
const userModel = reactive<{ password: string; rePassword?: string }>({
  password: '',
  rePassword: '',
})

const rules: EpFormRules = {
  password: [
    { required: true, message: '请填写登录密码' },
    { pattern: /[0-9a-zA-Z~!@#￥%&\*]/, message: '密码限制"数字、字母、~!@#￥%&\*"' },
  ],
  rePassword: [
    {
      required: true,
      validator(_, value, cb) {
        if (!value) {
          cb(new Error('请确认登录密码'))
        } else if (value !== userModel.password) {
          cb(new Error('两次输入密码不一致'))
        } else {
          cb()
        }
      },
      trigger: 'blur',
    },
  ],
}

const items: EpFormItem[] = [
  { label: '新密码', prop: 'password', slotType: 'input', slot: { type: 'password' } },
  { label: '确认密码', prop: 'rePassword', slotType: 'input', slot: { type: 'password' } },
  { slotName: 'confirm' },
]
const onCancel = () => {
  push({ name: 'Login' })
}
const onSubmit = async () => {
  try {
    const valid = await elFormRef?.value?.validate()
    valid && (await useFetch('updateUserPwd').fetch({ password: userModel.password }))
    ElMessage.success('修改成功')
    let rPath: string = route.query.redirectPath?.toString() || ''
    if (rPath) {
      await mainStore.getMyUserInfo()
      replace({ path: decodeURIComponent(rPath) })
    }
  } catch (error) {
    console.error(error)
  }
}
</script>

<style scoped lang="scss">
.change-pwd-view {
  place-items: center;
  .change-pwd-modal {
    width: 480px;
    height: 416px;
    background: $LoginModalBg;
    border-radius: $LoginModalRadius;
    overflow: hidden;
    .change-pwd-modal-header {
      height: $LoginModalHeaderHeight;
      line-height: $LoginModalHeaderHeight;
      background: $LoginModalHeaderBg;
      font-size: $LoginModalHeaderFontSize;
      font-weight: normal;
      color: $LoginModalHeaderFontColor;
    }
    .change-pwd-modal-content {
      height: 336px;
      padding: 52px 60px;
    }
  }
}
</style>