添加修改密码功能

src/api/login/index.ts

@@ -15,3 +15,12 @@ export const getUsers = (data) => {
         data,
     });
 }
+
+/**修改密码 */
+
+export const editPassword = (data) => {
+    return request.post({
+        url: '/updatePasswd',
+        data,
+    });
+}

src/config/request/service.ts

@@ -40,6 +40,7 @@ service.interceptors.request.use(
 service.interceptors.response.use(
     async (response: AxiosResponse<any>) => {
 
+
         if (response.config.responseType === 'blob') {
             // 如果是文件流，直接
             return response;

src/layouts/index.vue

@@ -36,6 +36,12 @@
               {{ userName }}
             </t-button>
           </t-space>
+          <t-button theme="default" variant="text" @click="updatedPassword">
+            <template #icon>
+              <t-icon class="header-user-avatar" name="edit" />
+            </template>
+            修改密码
+          </t-button>
           <t-button variant="text" @click="handleLogout">
             <template #icon><t-icon name="poweroff" /></template>
             退出登录
@@ -54,19 +60,90 @@
         </router-view>
       </div>
     </t-content>
+    <!-- 修改密码 -->
+    <t-dialog
+      header="修改密码"
+      v-model:visible="visible"
+      :cancel-btn="null"
+      :confirm-btn="null"
+    >
+      <t-form
+        ref="form"
+        :data="formData"
+        :rules="rules"
+        @reset="onReset"
+        @submit="onSubmit"
+      >
+        <t-form-item label="原密码" name="oldPasswd">
+          <t-input
+            v-model="formData.oldPasswd"
+            :readonly="true"
+            type="password"
+          ></t-input>
+        </t-form-item>
+
+        <t-form-item label="新密码" name="passwd">
+          <t-input v-model="formData.passwd" type="password"></t-input>
+        </t-form-item>
+        <t-form-item label="确认密码" name="surePassword">
+          <t-input v-model="formData.surePassword" type="password"></t-input>
+        </t-form-item>
+        <t-form-item>
+          <t-space size="small">
+            <t-button theme="primary" type="submit">确定</t-button>
+            <t-button theme="default" variant="base" type="reset"
+              >取消</t-button
+            >
+          </t-space>
+        </t-form-item>
+      </t-form>
+    </t-dialog>
   </t-layout>
 </template>
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, reactive, nextTick } from 'vue';
 import screenfull from 'screenfull';
 import { useUserStore } from '@/store';
 import { useRouter, useRoute } from 'vue-router';
+import { editPassword } from '@/api/login';
+import { MessagePlugin } from 'tdesign-vue-next';
 const route = useRoute();
 const { push } = useRouter();
 const userStore = useUserStore();
 const isFullscreen = ref(false);
 const menuValue = computed(() => route.name);
 const userName = computed(() => userStore.userInfo.nickname || '');
+const visible = ref(false);
+const form = ref(null);
+const passwordValidator = (val) => {
+  if (val === userStore.userInfo.passwd) {
+    return { result: false, message: '新密码不能和旧密码一致', type: 'error' };
+  }
+  return true;
+};
+
+const rePasswordValidator = (val) => {
+  if (val !== formData.passwd) {
+    return { result: false, message: '两次密码不一致', type: 'error' };
+  }
+  return true;
+};
+const formData = reactive({
+  username: '',
+  oldPasswd: '',
+  passwd: '',
+  surePassword: '',
+});
+const rules = {
+  passwd: [
+    { required: true, message: '新密码必填' },
+    { validator: passwordValidator },
+  ],
+  surePassword: [
+    { required: true, message: '确认密码必填' },
+    { validator: rePasswordValidator },
+  ],
+};
 const changeHandler = (active: string) => {
   push({ name: active });
 };
@@ -79,6 +156,37 @@ const toggleFullScreen = () => {
     screenfull.toggle();
   }
 };
+/**修改密码 */
+const updatedPassword = () => {
+  visible.value = true;
+  nextTick(() => {
+    form.value.clearValidate();
+    formData.username = userStore.userInfo.username;
+    formData.oldPasswd = userStore.userInfo.passwd;
+    formData.passwd = '';
+    formData.surePassword = '';
+  });
+};
+const onSubmit = async ({ validateResult, firstError, e }) => {
+  e.preventDefault();
+  if (validateResult === true) {
+    const { username, oldPasswd, passwd } = formData;
+    const resp = await editPassword({ username, oldPasswd, passwd });
+    MessagePlugin.success(resp.data);
+    userStore.userInfo.passwd = passwd;
+
+    setTimeout(() => {
+      visible.value = false;
+      form.value.reset();
+    }, 500);
+  } else {
+    console.log('Validate Errors: ', firstError, validateResult);
+  }
+};
+/**取消 */
+const onReset = () => {
+  visible.value = false;
+};
 /** 退出登录 */
 const handleLogout = async () => {
   await userStore.logout();