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

src/components/setting/AddUser.vue

@@ -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>

src/components/setting/ModifyPwd.vue

@@ -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>