EmploymentSite/vue/src/views/system/users/updatePassword.vue

<template>
  <a-modal
    :width="400"
    v-model:visible="visible"
    title="修改密码"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    ok-text="确认修改"
    cancel-text="取消"
    :keyboard="false"
    :mask-closable="false"
  >
    <a-form autocomplete="off">
      <p style="width:100%; color: red; text-align: center;margin-bottom: 5px"
         v-if="isShowUpdateMsg && updateDatNum >= 60">
        距离上次修改密码已过去{{ updateDatNum }}天，建议修改密码</p>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="用户名" :label-col="{span:8}" name="userName">
            {{ dataModel.userName }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="帐号" :label-col="{span:8}" name="loginID">
            {{ dataModel.loginID }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="新密码" :label-col="{span:8}" name="pwd_default" v-bind="validateInfos.pwd_default">
            <a-input-password v-model:value="dataModel.pwd_default" placeholder="请填写8到16位新密码" type="password"
                              maxlength="16" minlength="8"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="24">
          <a-form-item label="确认新密码" :label-col="{span:8}" name="pwd_confirm" v-bind="validateInfos.pwd_confirm">
            <a-input-password v-model:value="dataModel.pwd_confirm" placeholder="请填写8到16位新密码" type="password"
                              maxlength="16" minlength="8"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script lang="ts">
import {defineComponent, reactive, ref} from "vue";
import {Form} from "ant-design-vue";
import {updateUserPassword} from "@/api/system/user";
import {useUserStore} from "@/store/modules/user";

export default defineComponent({
  props: {
    loadData: {
      type: Function,
      default: null
    }
  },
  setup() {
    const userStore = useUserStore();
    const updateDatNum = ref<any>(userStore.getUpdateDayNum);
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);
    const useForm = Form.useForm;
    const formState = reactive({
      loading: false,
    });
    const dataModel = ref({userID: '', userName: '', loginID: '', pwd_default: '', pwd_confirm: ''});
    const passwordRegex = /(?=.*[a-z_])(?=.*\d)(?=.*[^a-z0-9_])[\S]{8,}/i;
    const rulesRef = reactive({
      pwd_default: [
        {
          required: true,
          message: '请填写8到16位新密码!',
        }, {
          min: 8,
          max: 16,
          message: '密码必须包含字母、数字和特殊字符，且长度要在8到16位。',
          trigger: 'blur',
          pattern:passwordRegex
        }
      ],
      pwd_confirm: [
        {
          required: true,
          message: '请填写8到16位新密码!',
        }, {
          min: 8,
          max: 16,
          message: '密码必须包含字母、数字和特殊字符，且长度要在8到16位。',
          trigger: 'blur',
          pattern:passwordRegex
        }
      ]
    });
    const {validate, validateInfos} = useForm(dataModel, rulesRef);
    const isShowUpdateMsg = ref(false);

    const show = (userID: any, userName: any, loginID: any, showUpdateMsg: any) => {
      console.log(userID, userName, loginID)
      visible.value = true;
      dataModel.value.userID = userID;
      dataModel.value.userName = userName;
      dataModel.value.loginID = loginID;
      dataModel.value.pwd_default = "";
      dataModel.value.pwd_confirm = "";
      isShowUpdateMsg.value = showUpdateMsg;
    };

    const handleOk = () => {
      validate().then(() => {
        updateUserPassword(dataModel.value).then(result => {
          if (result) {
            visible.value = false;
            userStore.setUpdateDayNum();
            updateDatNum.value = 0;
          }
        });
      });
    };

    const handleCancel = () => {
      visible.value = false;
    };

    return {
      dataModel,
      visible,
      confirmLoading,
      show,
      handleOk,
      handleCancel,
      formState,
      validateInfos,
      validate,
      updateDatNum,
      isShowUpdateMsg
    };
  },
  created() {

  },
})
</script>