弹窗

components.d.ts

@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCol: typeof import('element-plus/es')['ElCol']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -17,7 +16,6 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRow: typeof import('element-plus/es')['ElRow']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ErrorModal: typeof import('./src/components/dialogs/ErrorModal.vue')['default']

src/pages/Index/Settings/Users.vue

@@ -26,8 +26,8 @@
       :message="updatePinMessage" description="您正在更改PIN码,请谨慎操作" confirm-text="确认更新" cancel-text="取消更新"
       @confirm="handleConfirmUpdatePin" @cancel="handleCancelUpdatePin" />
 
-    <EnterPinModal v-if="enterPinModal" :visible="enterPinModal" :loading="updatePinLoading" @confirm="updatePinConfirm"
-      @cancel="closeEnterPinModal" />
+      <EnterPinModal v-if="enterPinModal" :visible="enterPinModal" :loading="updatePinLoading"  mode="edit" :userId="selectedUsers[0]?.id"
+      @confirm="updatePinConfirm" @cancel="closeEnterPinModal" />
 
     <DelMessage v-if="updatePinMsgModal" :visible="updatePinMsgModal" icon="/src/assets/OK.svg" message="PIN码更新成功"
       :username="selectedUsers[0].account" @confirm="handleConfirmMsg" />
@@ -39,7 +39,7 @@
     </template>
 
     <template v-else-if="currentStep === 'pin'">
-      <EnterPinModal :visible="isPinModalVisible" :loading="registerLoading" @confirm="handlePinConfirm"
+      <EnterPinModal :visible="isPinModalVisible" :loading="registerLoading"  mode="add" @confirm="handlePinConfirm"
         @cancel="closeModal" />
     </template>
 
@@ -190,39 +190,47 @@ const handleConfirmMsgDelete = () => {
 //更新PIN
 //定义请求
 const handleUpdatePin = async () => {
-  if (selectedUsers.value.length!== 1) {
+  if (selectedUsers.value.length !== 1) {
     ElMessage.warning('请选择一个用户来修改PIN码')
     return
   }
 
-  const user = tempUser.value
+  const user = selectedUsers.value[0]
   const response = await changeUserPassword({
     id: user.id,
-    password: user.password,
+    oldpasswd: tempUser.value.password,  // 旧密码
+    password: tempUser.value.password    // 新密码
   })
 
   if (response && response.success) {
     ElMessage.success('PIN码更新成功')
     fetchUserList()
   } else {
-    ElMessage.error('修改用户权限失败')
+    ElMessage.error('修改密码失败')
   }
 }
 
 //确认更新pin，打开输入框
 const handleConfirmUpdatePin = () => {
+  if (selectedUsers.value.length !== 1) {
+    ElMessage.warning('请选择一个用户来修改PIN码')
+    return
+  }
   updatePinModal.value = false
   enterPinModal.value = true
 }
 
 //输入pin，确认，发送请求
-const updatePinConfirm = (val: string) => {
+const updatePinConfirm = (parameters: ChangePasswordParams) => {
   enterPinModal.value = false
   updatePinLoading.value = true
-  tempUser.value.password = val
-  handleUpdatePin().then(() => {
+  
+  changeUserPassword(parameters).then(() => {
     updatePinLoading.value = false
     updatePinMsgModal.value = true
+  }).catch(() => {
+    ElMessage.error('修改密码失败')
+    updatePinLoading.value = false
   })
 }
 

src/pages/Index/components/Setting/EnterPinModal.vue

@@ -4,16 +4,37 @@
       <div class="modal-container">
         <div class="modal-header"></div>
         <div class="modal-title">
-          <span class="title-text">请输入 PIN 码</span>
+          <span class="title-text">{{ mode === 'edit'? 'Parameters' : '请输入 PIN 码' }}</span>
         </div>
         <div class="modal-body">
           <div class="input-container">
-            <input type="password" v-model="pin" placeholder="输入 PIN 码" class="pin-input" />
+            <div v-if="mode === 'edit'">
+              <input 
+                type="password" 
+                v-model="form.oldpasswd" 
+                placeholder="oldpasswd" 
+                class="pin-input" 
+              />
+              <input 
+                type="password" 
+                v-model="form.password" 
+                placeholder="password" 
+                class="pin-input" 
+              />
+            </div>
+            <div v-else>
+              <input 
+                type="password" 
+                v-model="pin" 
+                placeholder="输入 PIN 码" 
+                class="pin-input" 
+              />
+            </div>
           </div>
         </div>
         <div class="modal-footer">
           <el-button type="danger" @click="cancel">取消</el-button>
-          <el-button type="primary" @click="confirmPin" :loading="loading">确认</el-button>
+          <el-button type="primary" @click="confirm" :loading="loading">确认</el-button>
         </div>
       </div>
     </div>
@@ -21,21 +42,49 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, reactive } from 'vue'
+import { ChangePasswordParams } from '../../../../types/Index/User'
+
+// 定义组件接收的 props
+const props = defineProps<{ 
+  visible: boolean;
+  loading: boolean;
+  userId?: number;
+  mode: 'edit' | 'add';
+}>()
 
-defineProps<{ visible: boolean; loading: boolean }>()
 const emit = defineEmits<{
-  (e: 'confirm', pin: string): void
+  (e: 'confirm', params: ChangePasswordParams | string): void
   (e: 'cancel'): void
 }>()
 
+// 根据模式创建不同的响应式数据存储输入
+const form = reactive({
+  oldpasswd: '',
+  password: ''
+})
 const pin = ref('')
 
-const confirmPin = () => {
-  emit('confirm', pin.value)
+// 确认操作处理函数，根据模式发送不同的数据
+const confirm = () => {
+  if (props.mode === 'edit') {
+    const parameters: ChangePasswordParams = {
+      id: props.userId,
+      oldpasswd: form.oldpasswd,
+      password: form.password
+    }
+    emit('confirm', parameters)
+  } else {
+    emit('confirm', pin.value)
+  }
 }
 
+// 取消操作处理函数
 const cancel = () => {
+  if (props.mode === 'edit') {
+    form.oldpasswd = ''
+    form.password = ''
+  }
   emit('cancel')
 }
 </script>
@@ -80,7 +129,7 @@ const cancel = () => {
   justify-content: center;
   position: relative;
 
-  .modal-header {
+ .modal-header {
     background-color: #528dfe;
     height: 8px;
     position: absolute;
@@ -89,7 +138,7 @@ const cancel = () => {
     width: 100%;
   }
 
-  .modal-title {
+ .modal-title {
     text-align: center;
     margin-top: 15px;
     font-size: 32px;
@@ -97,16 +146,16 @@ const cancel = () => {
     font-weight: bold;
   }
 
-  .modal-body {
+ .modal-body {
     display: flex;
     justify-content: center;
     padding: 20px;
 
-    .input-container {
+   .input-container {
       position: relative;
       width: 100%;
 
-      .pin-input {
+     .pin-input {
         box-sizing: border-box;
         width: 100%;
         font-size: 32px;
@@ -124,7 +173,7 @@ const cancel = () => {
     }
   }
 
-  .modal-footer {
+ .modal-footer {
     display: flex;
     justify-content: space-around;
     padding: 20px;

src/types/Index/User.ts

@@ -19,3 +19,9 @@ export interface CurrentUserInfo {
   timestamp: number
   success: boolean
 }
+
+export interface ChangePasswordParams {
+  id: number;        // integer($int32)
+  oldpasswd: string; // string (query)
+  password: string;  // string (query)
+}