修改密码弹窗

src/api/home/index.js

@@ -0,0 +1,9 @@
+import { defAxios as request } from '@/utils/http'
+export function updatePwd(data) {
+  return request({
+    url: '/index/updatePwd',
+    method: 'PUT',
+    data
+  })
+}
+

src/layout/components/Logout/components/UpdateModal.vue

@@ -15,14 +15,36 @@
         :on-negative-click="handleClose"
       >
         <n-form-item
-          label="登录密码:"
+          label="旧密码:"
-          path="password"
+          path="oldPassword"
         >
           <n-input
-            v-model:value="form.password"
+            v-model:value="form.oldPassword"
             type="password"
             :maxlength="20"
-            placeholder="请输入登录密码"
+            placeholder="请输入旧密码"
+          />
+        </n-form-item>
+        <n-form-item
+          label="新密码:"
+          path="newPassword"
+        >
+          <n-input
+            v-model:value="form.newPassword"
+            type="password"
+            :maxlength="20"
+            placeholder="请输入新密码"
+          />
+        </n-form-item>
+        <n-form-item
+          label="确认密码:"
+          path="configmPassword"
+        >
+          <n-input
+            v-model:value="form.configmPassword"
+            type="password"
+            :maxlength="20"
+            placeholder="请再次输入新密码"
           />
         </n-form-item>
       </n-form>
@@ -30,9 +52,82 @@
   </Modal>
 </template>
 <script>
-import Modal from '@/components/Modal/index.vue'
+import Modal from '../../../../components/Modal/index.vue'
+import { updatePwd } from '@/api/home/index.js'
+import { reactive, toRefs, computed } from '@vue/reactivity'
 export default {
   name: 'UpdateModal',
-  components: { Modal }
+  components: { Modal },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    'update:visible': null
+  },
+  setup(props, { emit }) {
+    const data = reactive({
+      form: {
+        oldPassword: '',
+        newPassword: '',
+        configmPassword: ''
+      },
+      rules: {
+        oldPassword: {
+          required: true,
+          trigger: ['blur', 'input'],
+          message: '请输入旧密码'
+        },
+        newPassword: {
+          required: true,
+          trigger: ['blur', 'input'],
+          message: '请输入新密码'
+        },
+        configmPassword: {
+          required: true,
+          trigger: ['blur', 'input'],
+          message: '请再次输入新密码'
+        }
+
+      }
+    })
+
+    const getModalOptions = computed(() => {
+      return {
+        title: '修改密码',
+        show: props.visible,
+        negativeText: '取消',
+        positiveText: '确认'
+      }
+    })
+
+    /* 关闭弹窗 */
+    const handleClose = () => {
+      emit('update:visible', false)
+    }
+    return {
+      ...toRefs(data),
+      getModalOptions,
+      handleClose
+    }
+  },
+  methods: {
+    handleConfirm() {
+      this.$refs.formRef.validate((errors) => {
+        if (!errors) {
+          updatePwd(this.form).then(res => {
+            if (res.code === 0) {
+              this.handleClose()
+              $message.success(res.msg)
+            } else {
+              $message.error(res.msg)
+            }
+          })
+        }
+      })
+    }
+  }
 }
 </script>

src/layout/components/Logout/index.vue

@@ -9,6 +9,9 @@
       <span class="user_name">{{ userInfo.realname }}</span>
     </div>
   </n-dropdown>
+
+  <!-- 修改密码 -->
+  <update-modal v-if="modalShow" v-modal:visible="modalShow" />
 </template>
 <script>
 import { reactive, toRefs, h } from 'vue'
@@ -21,8 +24,10 @@ import { useDialog } from 'naive-ui'
 import { loginOut } from '@/api/login/index.js'
 import { mapActions, mapState } from 'pinia'
 import { useUserStore } from '@/store/modules/user.js'
+import UpdateModal from './components/UpdateModal.vue'
 export default {
   name: 'LogOut',
+  components: { UpdateModal },
   setup() {
     const renderIcon = (icon) => {
       return () => {
@@ -32,9 +37,6 @@ export default {
       }
     }
     const data = reactive({
-      userInfo: {
-        realname: '管理员'
-      },
       options: [
         {
           label: '修改密码',
@@ -46,7 +48,8 @@ export default {
           key: 'out',
           icon: renderIcon(LogoutIcon)
         }
-      ]
+      ],
+      modalShow: false
     })
 
     // 选中选项触发的回调
@@ -86,6 +89,7 @@ export default {
         })
       } else if (key === 'edit') {
         console.log('修改密码')
+        this.modalShow = true
       }
     }
   }

src/layout/components/UpdatePsw/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <Modal
+    :options="getModalOptions"
+    :on-positive-click="handleConfirm"
+    :on-negative-click="handleClose"
+    :on-close="handleClose"
+  >
+    <template #Context>
+      <n-form
+        ref="formRef"
+        :model="form"
+        label-placement="left"
+        :rules="rules"
+        :on-positive-click="handleConfirm"
+        :on-negative-click="handleClose"
+      >
+        <n-form-item
+          label="旧密码:"
+          path="oldPassword"
+        >
+          <n-input
+            v-model:value="form.oldPassword"
+            type="password"
+            :maxlength="20"
+            placeholder="请输入旧密码"
+          />
+        </n-form-item>
+        <n-form-item
+          label="新密码:"
+          path="newPassword"
+        >
+          <n-input
+            v-model:value="form.newPassword"
+            type="password"
+            :maxlength="20"
+            placeholder="请输入新密码"
+          />
+        </n-form-item>
+        <n-form-item
+          label="确认密码:"
+          path="configmPassword"
+        >
+          <n-input
+            v-model:value="form.configmPassword"
+            type="password"
+            :maxlength="20"
+            placeholder="请再次输入新密码"
+          />
+        </n-form-item>
+      </n-form>
+    </template>
+  </Modal>
+</template>
+<script>
+import Modal from '@/components/Modal/index.vue'
+import { updatePwd } from '@/api/home/index.js'
+import { reactive, toRefs } from '@vue/reactivity'
+export default {
+  name: 'UpdateModal',
+  components: { Modal },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    'update:visible': null
+  },
+  setup(props, { emit }) {
+    const data = reactive({
+      form: {
+        oldPassword: '',
+        newPassword: '',
+        configmPassword: ''
+      },
+      rules: {
+        oldPassword: {
+          required: true,
+          trigger: ['blur', 'input'],
+          message: '请输入旧密码'
+        },
+        newPassword: {
+          required: true,
+          trigger: ['blur', 'input'],
+          message: '请输入新密码'
+        },
+        configmPassword: {
+          required: true,
+          trigger: ['blur', 'input'],
+          message: '请再次输入新密码'
+        }
+
+      }
+    })
+
+    /* 关闭弹窗 */
+    const handleClose = () => {
+      emit('update:visible', false)
+    }
+    return {
+      ...toRefs(data),
+      handleClose
+    }
+  },
+  methods: {
+    handleConfirm() {
+      this.$refs.formRef.validate((errors) => {
+        if (!errors) {
+          updatePwd(this.form).then(res => {
+            if (res.code === 0) {
+              this.handleClose()
+              $message.success(res.msg)
+            } else {
+              $message.error(res.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>