4pc/src/view/users-password-edit.vue

<template>

  <el-form label-width="100px" :model="data" :rules="rules" ref="baseFormRef">
    <el-form-item label="手机号" prop="userName" required>
      <el-input disabled v-model="data.userName" style="width: 300px" :maxlength="500" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="验证码" prop="msgAuthCode" required>
      <el-input v-model="data.msgAuthCode" style="width: 190px" :maxlength="500" placeholder="请输入" />
      <el-button :loading="checkCodeBtn.loading" :disabled="checkCodeBtn.disabled" type="danger"
        style="margin-left: 10px" @click="getCheckCode"> {{ checkCodeBtn.text }}</el-button>
    </el-form-item>
    <el-form-item label="密码" prop="password" required>
      <el-input autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" v-model="data.password"
        :type="addPassFlag ? 'text' : 'password'" style="width: 300px" :maxlength="500"
        placeholder="请输入8-16位数字、字母大小写组合">
        <template #suffix>
          <span @click="addPassFlag = !addPassFlag" style="cursor: pointer;">
            <el-icon v-if="addPassFlag">
              <View />
            </el-icon>
            <el-icon v-else>
              <Hide />
            </el-icon>
          </span>
        </template>
      </el-input>

    </el-form-item>
    <el-form-item label="密码确认" prop="confirmPwd" required>
      <el-input autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" v-model="data.confirmPwd"
        :type="addPassFlag ? 'text' : 'password'" style="width: 300px" :maxlength="40"
        placeholder="请输入8-16位数字、字母大小写组合">
        <template #suffix>
          <span @click="addPassFlag = !addPassFlag" style="cursor: pointer;">
            <el-icon v-if="addPassFlag">
              <View />
            </el-icon>
            <el-icon v-else>
              <Hide />
            </el-icon>
          </span>
        </template>
      </el-input>

    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { QuiskExpose } from "@/helper/mount";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { View, Hide } from '@element-plus/icons-vue';
// import type { OrganizationType } from '@/request/organization'
import {
  getMsgAuthCode,
  UserType,
  ChangePasswordParam
} from "@/request";

import { ref, reactive, unref, onMounted, watchEffect } from "vue";
import { onUnmounted } from "vue";
const addPassFlag = ref(false)//图标显示标识

const baseFormRef = ref<FormInstance>();

const props = defineProps<{
  user: UserType,
  submit: (data: ChangePasswordParam) => Promise<any>;
}>();
const data = ref<UserType>({
  nickName: "",
  orgId: undefined,
  password: "",
  msgAuthCode: "",
  confirmPwd: "",
  status: 0,
  userName: "",
  createBy: "",
  createTime: "",
  fdkkId: 0,
  head: "",
  orgName: "",
  tbStatus: 0,
  updateBy: "",
  updateTime: "",
  userId: 0,
  roleNames: ""
});


const equalToPassword = (_, value: any, callback: any) => {
  if (data.value.password !== value) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const rules = reactive<FormRules>({


  userName: [
    { required: true, message: "请输入账号", trigger: "blur" },
  ],
  msgAuthCode: [
    { required: true, message: "请输入验证码", trigger: "change" },
  ],

  password: [
    { required: true, pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{8,16}$/, message: "请输入8-16位数字、字母大小写组合", trigger: "blur" },
    { required: true, min: 8, message: '密码太短！', trigger: "blur" },
  ],
  confirmPwd: [
    { required: true, pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{8,16}$/, message: "请输入8-16位数字、字母大小写组合", trigger: "blur" },
    { required: true, min: 8, message: '密码太短！', trigger: "blur" },
    { required: true, validator: equalToPassword, trigger: "blur" }
  ]
},)


let checkCodeBtn = reactive<any>({
  text: '获取验证码',
  loading: false,
  disabled: false,
  duration: 60,
  timer: null
})

onMounted(async () => {
})
onUnmounted(() => {
  // 清除掉定时器
  checkCodeBtn.timer && clearInterval(checkCodeBtn.timer)
})



watchEffect(() => {
  if (props.user) {
    data.value = { ...props.user }
    console.log('data', data)
  }
})
const getCheckCode = async () => {
  // 倒计时期间按钮不能单击
  const phoneNum = data.value.userName
  console.log('getMsgCode', phoneNum)
  const res = await getMsgAuthCode('+86', phoneNum)
  if (res.success) {
    ElMessage.success(res.data);
  }
  if (checkCodeBtn.duration == 60) {
    checkCodeBtn.disabled = true
  }
  // 清除掉定时器
  checkCodeBtn.timer && clearInterval(checkCodeBtn.timer)
  // 开启定时器
  checkCodeBtn.timer = setInterval(() => {
    const tmp = checkCodeBtn.duration--
    checkCodeBtn.text = `${tmp}秒`
    if (tmp <= 0) {
      // 清除掉定时器
      clearInterval(checkCodeBtn.timer)
      checkCodeBtn.duration = 60
      checkCodeBtn.text = '重新获取'
      // 设置按钮可以单击
      checkCodeBtn.disabled = false
    }
    console.info(checkCodeBtn.duration)
  }, 1000)
}



// const handleSelect = (orgId: number) => {
//   const item = Array.from(allOrgs.value).find(i => i.id === orgId)
//   if (item) {
//     data.value.orgName = item.value
//   }
// }
defineExpose<QuiskExpose>({
  async submit() {
    if (unref(baseFormRef)) {
      const res = await unref(baseFormRef)?.validate();
      if (res) {
        await props.submit(data.value as any as UserType);
        ElMessage.success('编辑成功！');
      }
    } else {
      throw "";
    }
  },
});
</script>