修改普通用户密码

src/components/Setting/components/User.vue

@@ -34,7 +34,9 @@
         <input
           :type="showUpdateUserPasswordVisible ? 'text' : 'password'"
           class="password_input"
+          id="passKey"
           v-model="updateUserNewPassword"
+          @focus="showpasswordKey"
         />
         <p class="tip">{{ updateUserInfoTip }}</p>
       </div>
@@ -106,17 +108,37 @@
       :hideUserModal="hideUserModal"
       :userWarnInfo="userWarnInfo"
     />
+    <div class="key_wrap" v-if="showkeyboard">
+      <SimpleKeyboard
+        :hideKeyBoard="hideKeyBoard"
+        @onChange="onChange"
+        :input="updateUserNewPassword"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import UserModal from 'cpns/dialogs/UserModal'
+import SimpleKeyboard from 'cpns/SimpleKeyboard'
 import Eye from '@/assets/img/login/eye.png'
 import Open from '@/assets/img/login/open.png'
 import { useUserStore, useWebSocketStore } from '@/store'
 import { chpasswdJSON } from '@/mock/command'
 
+const showkeyboard = ref(false)
+const hideKeyBoard = () => {
+  showkeyboard.value = false
+}
+
+const showpasswordKey = () => {
+  showkeyboard.value = true
+}
+const onChange = a => {
+  updateUserNewPassword.value = a
+}
+
 const userStore = useUserStore()
 const webSocketStore = useWebSocketStore()
 const userFormVisible = ref(false)
@@ -166,6 +188,16 @@ const returnToList = () => {
   changePasswordVisible.value = false
 }
 
+onMounted(() => {
+  document.addEventListener('click', e => {
+    let box = document.getElementById('keyboard')
+    let room = document.getElementById('passKey')
+    if (!box?.contains(e.target) && e.target != room) {
+      hideKeyBoard()
+    }
+  })
+})
+
 const returnList = () => {
   userFormVisible.value = false
 }
@@ -191,6 +223,13 @@ const hideUserModal = () => {
   height: 100%;
   padding: 32px 43px;
   background: #ffffff;
+  .key_wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 230px;
+  }
   .title_wrap {
     margin-bottom: 19px;
     padding-left: 5px;