emcp/frontend/src/views/passwordSetting/index.vue

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { verifyAccessPassword, saveDeviceConfig, fetchDeviceConfig, saveDevicePassword } from '@/api/platform'
import { ElMessage } from 'element-plus'
import NumericKeyboard from '@/components/NumericKeyboard.vue'  
const formRef = ref<FormInstance>()

// 表单数据
const form = reactive({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
})
const deviceConfig: any = ref({})
// 校验规则
const rules: FormRules = {
    oldPassword: [
        { required: true, message: '请输入原密码', trigger: 'blur' }
    ],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, max: 6, message: '密码长度需 6位', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (!/^\d{6}$/.test(value)) {
                    callback(new Error('密码必须为6位数字'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入新密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== form.newPassword) {
                    callback(new Error('两次输入的密码不一致'))
                } else {
                    callback()
                }
            },
            trigger: 'blur'
        }
    ]
}
const isSubmit = ref(false)
const dialogVisible = ref(false)
const handleClose = () => {
  dialogVisible.value = false
}
const currentInputValue = ref()
const keyboardVisible = ref(false)
const currentInputType = ref('')

const openKeyboard = (value: string, type: string) => {
  currentInputType.value = type
  currentInputValue.value = value
  keyboardVisible.value = true
}
const handleKeyboardConfirm = (value: string) => {
  if (currentInputType.value === 'oldPassword') {
    form.oldPassword = value
  } else if (currentInputType.value === 'newPassword') {
    form.newPassword = value
  } else if (currentInputType.value === 'confirmPassword') {
    form.confirmPassword = value
  }
  keyboardVisible.value = false
   formRef.value?.clearValidate()
}

// 提交保存
const handleSubmit = async () => {
    if (!formRef.value) return
    await formRef.value.validate((valid) => {
        if (valid) {
            if (isSubmit.value) return
            isSubmit.value = true
            verifyAccessPassword(form.oldPassword).then(res => {
                if (res.data) {
                    saveDevicePassword({
                        password: form.newPassword,
                    }).then(res => {
                        if (res.data) {
                            ElMessage({
                                type: 'success',
                                message: '密码设置成功',
                            })
                            isSubmit.value = false
                        } else {
                            ElMessage({
                                type: 'error',
                                message: '密码设置失败',
                            })
                            isSubmit.value = false
                            return
                        }
                    })
                } else {
                    isSubmit.value = false
                    dialogVisible.value = true
                    return
                }
            })
        }
    })
}
onMounted(() => {
   
})
</script>

<template>
    <div class="password-container">
        <!-- 标题 -->
        <div class="password-container-content">
            <div class="title">
                <span class="title-line"></span>
                密码设置
            </div>
            <!-- 表单 -->
            <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="password-form">
                <el-form-item label="原密码" prop="oldPassword">
                    <el-input v-model="form.oldPassword" @focus="openKeyboard(form.oldPassword, 'oldPassword')" type="password" placeholder="请输入原密码" show-password />
                </el-form-item>

                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="form.newPassword" @focus="openKeyboard(form.newPassword, 'newPassword')" type="password" placeholder="请输入新密码" show-password />
                </el-form-item>

                <el-form-item label="确认新密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" @focus="openKeyboard(form.confirmPassword, 'confirmPassword')" type="password" placeholder="请再次输入新密码" show-password />
                </el-form-item>
            </el-form>
        </div>


        <!-- 保存按钮 -->
        <el-button type="primary" style="background-color: #0099ff;width: 150px;height: 40px;" class="save-btn"
            @click="handleSubmit">
            保存
        </el-button>
        <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :show-close="false" title="错误提示" width="500" :before-close="handleClose">
            <div style="color: #FF4D4F;font-size: 16px;text-align: center;">原密码验证错误！</div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
         <NumericKeyboard v-model:visible="keyboardVisible" :model-value="currentInputValue"
      @confirm="handleKeyboardConfirm" />
    </div>
</template>

<style scoped lang="scss">
.password-container {
    width: 100%;
    height: 100%;
    padding: 15px;

    .password-container-content {
        width: 100%;
        height: calc(100vh - 230px);
        background-color: #ffffff;
        padding: 20px 50px;
        border-radius: 4px;
        box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
    }

    .title {
        font-size: 18px;
        font-weight: 700;
        color: #303133;
        margin-bottom: 24px;
        display: flex;
        align-items: center;

        .title-line {
            display: inline-block;
            width: 4px;
            height: 14px;
            background-color: #409eff;
            margin-right: 8px;
        }
    }

    .password-form {
        width: 60%;
    }

    .save-btn {
        margin-top: 30px;
        font-size: 14px;
    }
}

:deep(.el-form-item--label-right .el-form-item__label) {
    text-align: left;
    justify-content: flex-start;
    color: #787878;
}

:deep(.el-input__inner) {
    color: #363636;
    min-height: 40px;
}

:deep(.el-form-item__label) {
    line-height: 40px !important;
}
</style>