LiLongLong
/
disinfector_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 设置-用户管理虚拟键盘替换; 修改密码自动赋值的问题

master
guoapeng 2 weeks ago
parent
babfb9df95
commit
eae89659b6
2 changed files with 86 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 104
      src/components/setting/AddUser.vue
  2. 55
      src/components/setting/ModifyPwd.vue

104
src/components/setting/AddUser.vue
View File

@ -1,6 +1,5 @@
<script lang="ts" setup>
import { syncSendCmd } from 'apis/system'
import SoftKeyboard from 'components/common/SoftKeyboard/index.vue'
import type { FormInstance, FormRules } from 'element-plus'
import { FtMessage } from 'libs/message'
import { reactive, ref, watchEffect } from 'vue'
@ -12,9 +11,6 @@ const settingStore = useSettingStore()
const visible = ref(settingStore.addUserVisible)
const modalType = ref(settingStore.userModalState)
const inputValue = ref<string>('')
const keyboardVisible = ref(false)
const keyboardType = ref<'text' | 'number'>('text')
const softKeyboardRef = ref()
const userFormRef = ref()
const focusedInput = ref<string | null>(null)
const modalTitle = ref('新增用户')
@ -31,6 +27,7 @@ watchEffect(() => {
modalTitle.value = '修改密码'
if (settingStore.currentEditUser) {
userForm.value = settingStore.currentEditUser
userForm.value.passwd = ''
}
}
else {
@ -60,17 +57,8 @@ const onSave = (formRef: FormInstance | undefined) => {
}
})
}
const openKeyboard = (e: any) => {
setTimeout(() => {
keyboardVisible.value = true
const labelName = e.target.name
const formValue = userForm.value[labelName]
inputValue.value = formValue ? formValue.toString() : ''
focusedInput.value = e.target.name
}, 100)
}
const doEdit = () => {
}
const doEdit = () => {}
const doSave = () => {
const name = userForm.value.name
const passwd = userForm.value.passwd
@ -111,9 +99,7 @@ const onClose = () => {
focusedInput.value = null
settingStore.updateVisible(false)
}
const handleConfirm = (value: string) => {
console.log('确认输入:', value)
}
interface UserForm {
name: string
passwd: string
@ -160,57 +146,67 @@ const validateConfirmPasswd = (rule: any, value: string, callback: any) => {
}
}
const rules = reactive<FormRules<UserForm>>({
name: [{ required: true, message: '输入登录名', trigger: 'blur' }, { min: 4, max: 10, message: '长度4-10', trigger: 'blur' }, { validator: validateUser, trigger: 'blur' }],
passwd: [{ required: true, message: '输入密码', trigger: 'blur' }, { min: 4, max: 10, message: '长度4-10', trigger: 'blur' }, { validator: validatePasswd, trigger: 'blur' }],
confirmPasswd: [{ required: true, message: '输入密码', trigger: 'blur' }, { min: 4, max: 10, message: '长度4-10', trigger: 'blur' }, { validator: validateConfirmPasswd, trigger: 'blur' }],
name: [
{ required: true, message: '输入登录名', trigger: 'blur' },
{ min: 4, max: 10, message: '长度4-10', trigger: 'blur' },
{ validator: validateUser, trigger: 'blur' },
],
passwd: [
{ required: true, message: '输入密码', trigger: 'blur' },
{ min: 4, max: 10, message: '长度4-10', trigger: 'blur' },
{ validator: validatePasswd, trigger: 'blur' },
],
confirmPasswd: [
{ required: true, message: '输入密码', trigger: 'blur' },
{ min: 4, max: 10, message: '长度4-10', trigger: 'blur' },
{ validator: validateConfirmPasswd, trigger: 'blur' },
],
})
</script>
<template>
<FtDialog v-if="visible" v-model="visible" :title="modalTitle" :ok-handle="() => { onSave(userFormRef) }" @cancel="onClose">
<FtDialog
v-if="visible"
v-model="visible"
:title="modalTitle"
:ok-handle="
() => {
onSave(userFormRef);
}
"
@cancel="onClose"
>
<div>
<el-form ref="userFormRef" :model="userForm" :rules="rules" label-width="auto" style="max-width: 400px">
<el-form-item
v-if="!userForm.id"
label="登录名："
prop="name"
>
<el-input v-model="userForm.name" v-prevent-keyboard name="name" placeholder="登录名" @focus="openKeyboard" />
<el-form-item v-if="!userForm.id" label="登录名：" prop="name">
<ft-input v-model="userForm.name" name="name" placeholder="登录名" />
</el-form-item>
<div>
<el-form-item
label="密码："
prop="passwd"
>
<el-input v-model="userForm.passwd" v-prevent-keyboard name="passwd" type="password" placeholder="密码" @focus="openKeyboard" />
<el-form-item label="密码：" prop="passwd">
<ft-input
v-model="userForm.passwd"
autocomplete="new-password"
name="passwd"
type="password"
placeholder="密码"
/>
</el-form-item>
<el-form-item
label="确认密码："
prop="confirmPasswd"
>
<el-input v-model="userForm.confirmPasswd" v-prevent-keyboard name="confirmPasswd" type="password" placeholder="确认密码" @focus="openKeyboard" />
<el-form-item label="确认密码：" prop="confirmPasswd">
<ft-input
v-model="userForm.confirmPasswd"
autocomplete="new-password"
name="confirmPasswd"
type="password"
placeholder="确认密码"
/>
</el-form-item>
</div>
<el-form-item
label="是否管理员："
>
<el-form-item label="是否管理员：">
<el-checkbox v-model="userForm.roleType" size="small" />
</el-form-item>
</el-form>
<Teleport to="body">
<SoftKeyboard
ref="softKeyboardRef"
v-model="inputValue"
:is-visible="keyboardVisible"
:keyboard-type="keyboardType"
@update-keyboard-visible="(visible) => keyboardVisible = visible"
@confirm="handleConfirm"
@close="keyboardVisible = false"
/>
</Teleport>
</div>
</FtDialog>
</template>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

55
src/components/setting/ModifyPwd.vue
View File

@ -28,6 +28,7 @@ watchEffect(() => {
visible.value = settingStore.modifyPwdVisible
if (settingStore.currentEditUser && settingStore.currentEditUser.id !== userForm.value.id) {
userForm.value = settingStore.currentEditUser
userForm.value.newpasswd = ''
}
if (focusedInput.value) {
userForm.value[focusedInput.value] = inputValue.value
@ -47,15 +48,6 @@ const onSave = (formRef: FormInstance | undefined) => {
}
})
}
const openKeyboard = (e: any) => {
setTimeout(() => {
keyboardVisible.value = true
const labelName = e.target.name
const formValue = userForm.value[labelName as keyof typeof userForm.value]
inputValue.value = formValue ? formValue.toString() : ''
focusedInput.value = e.target.name
}, 100)
}
const doSave = () => {
const passwd = userForm.value.passwd
const newpasswd = userForm.value.newpasswd
@ -122,14 +114,35 @@ const validateConfirmPasswd = (rule: any, value: string, callback: any) => {
}
}
const rules = reactive<FormRules>({
passwd: [{ required: true, message: '输入旧密码', trigger: 'blur' }, { min: 4, max: 10, message: '长度4-10', trigger: 'blur' }, { validator: validatePasswd, trigger: 'blur' }],
newpasswd: [{ required: true, message: '输入新密码', trigger: 'blur' }, { min: 4, max: 10, message: '长度4-10', trigger: 'blur' }, { validator: validatePasswd, trigger: 'blur' }],
confirmPasswd: [{ required: true, message: '输入新密码', trigger: 'blur' }, { min: 4, max: 10, message: '长度4-10', trigger: 'blur' }, { validator: validateConfirmPasswd, trigger: 'blur' }],
passwd: [
{ required: true, message: '输入旧密码', trigger: 'blur' },
{ min: 4, max: 10, message: '长度4-10', trigger: 'blur' },
{ validator: validatePasswd, trigger: 'blur' },
],
newpasswd: [
{ required: true, message: '输入新密码', trigger: 'blur' },
{ min: 4, max: 10, message: '长度4-10', trigger: 'blur' },
{ validator: validatePasswd, trigger: 'blur' },
],
confirmPasswd: [
{ required: true, message: '输入新密码', trigger: 'blur' },
{ min: 4, max: 10, message: '长度4-10', trigger: 'blur' },
{ validator: validateConfirmPasswd, trigger: 'blur' },
],
})
</script>
<template>
<FtDialog v-model="visible" :title="modalTitle" :ok-handle="() => { onSave(userFormRef) }" @cancel="onClose">
<FtDialog
v-model="visible"
:title="modalTitle"
:ok-handle="
() => {
onSave(userFormRef);
}
"
@cancel="onClose"
>
<div>
<el-form ref="userFormRef" :model="userForm" label-width="auto" style="max-width: 400px" :rules="rules">
<div>
@ -143,7 +156,7 @@ const rules = reactive<FormRules>({
trigger: ['blur', 'change'],
}"
>
<el-input v-model="userForm.passwd" v-prevent-keyboard name="passwd" type="password" placeholder="密码" @focus="openKeyboard" />
<ft-input v-model="userForm.passwd" name="passwd" type="password" placeholder="密码" />
</el-form-item>
<el-form-item
label="新密码："
@ -154,7 +167,7 @@ const rules = reactive<FormRules>({
trigger: ['blur', 'change'],
}"
>
<el-input v-model="userForm.newpasswd" v-prevent-keyboard name="newpasswd" type="password" placeholder="密码" @focus="openKeyboard" />
<ft-input v-model="userForm.newpasswd" name="newpasswd" type="password" placeholder="密码" />
</el-form-item>
<el-form-item
label="确认新密码："
@ -165,7 +178,12 @@ const rules = reactive<FormRules>({
trigger: ['blur', 'change'],
}"
>
<el-input v-model="userForm.confirmNewPasswd" v-prevent-keyboard name="confirmNewPasswd" type="password" placeholder="确认密码" @focus="openKeyboard" />
<ft-input
v-model="userForm.confirmNewPasswd"
name="confirmNewPasswd"
type="password"
placeholder="确认密码"
/>
</el-form-item>
</div>
</el-form>
@ -175,7 +193,7 @@ const rules = reactive<FormRules>({
v-model="inputValue"
:is-visible="keyboardVisible"
:keyboard-type="keyboardType"
@update-keyboard-visible="(visible) => keyboardVisible = visible"
@update-keyboard-visible="visible => (keyboardVisible = visible)"
@confirm="handleConfirm"
@close="keyboardVisible = false"
/>
@ -184,5 +202,4 @@ const rules = reactive<FormRules>({
</FtDialog>
</template>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>
Write Preview
Loading…
Cancel
Save