feat：修改密码

2024-01-30 17:17:37 +08:00 · 2024-01-30 17:17:37 +08:00 · e36af85649
commit e36af85649
parent 837ebd76e7
3 changed files with 260 additions and 226 deletions
--- a/src/layout/components/Tools/index.vue
+++ b/src/layout/components/Tools/index.vue
@ -1,74 +1,95 @@
 <script setup name="Tools">
-import { useFullscreen } from '@vueuse/core'
-import eventBus from '@/utils/eventBus'
-import { useMainPage } from '@/utils/composables'
-import useSettingsStore from '@/store/modules/settings'
-import useUserStore from '@/store/modules/user'
+import { useFullscreen } from "@vueuse/core";
+import eventBus from "@/utils/eventBus";
+import { useMainPage } from "@/utils/composables";
+import useSettingsStore from "@/store/modules/settings";
+import useUserStore from "@/store/modules/user";

-const router = useRouter()
+const router = useRouter();

-const settingsStore = useSettingsStore()
-const userStore = useUserStore()
+const settingsStore = useSettingsStore();
+const userStore = useUserStore();

-const { isFullscreen, toggle } = useFullscreen()
+const { isFullscreen, toggle } = useFullscreen();

 function userCommand(command) {
  switch (command) {
-        case 'dashboard':
+    case "pwd":
      router.push({
-                name: 'dashboard'
-            })
-            break
-        case 'setting':
-            router.push({
-                name: 'personalSetting'
-            })
-            break
-        case 'logout':
+        name: "personalEditPassword",
+      });
+      break;
+    case "logout":
      userStore.logout().then(() => {
        router.push({
-                    name: 'login'
-                })
-            })
-            break
+          name: "login",
+        });
+      });
+      break;
  }
 }
 function pro() {
-    window.open('https://www.baidu.com/', 'top')
+  window.open("https://www.baidu.com/", "top");
 }
 </script>

 <template>
  <div class="tools">
    <div class="buttons">
-            <span v-if="settingsStore.mode == 'pc' && false" class="item item-pro" @click="pro">
-                <el-icon>
-                    <svg-icon name="pro" />
-                </el-icon>
-                <span class="title">查看专业版</span>
-            </span>
-            <span v-if="settingsStore.topbar.enableNavSearch" class="item" @click="eventBus.emit('global-search-toggle')">
+      <span
+        v-if="settingsStore.topbar.enableNavSearch"
+        class="item"
+        @click="eventBus.emit('global-search-toggle')"
+      >
        <el-icon>
          <svg-icon name="ep:search" />
        </el-icon>
      </span>
-            <span v-if="settingsStore.mode === 'pc' && settingsStore.topbar.enableFullscreen" class="item" @click="toggle">
+      <span
+        v-if="
+          settingsStore.mode === 'pc' && settingsStore.topbar.enableFullscreen
+        "
+        class="item"
+        @click="toggle"
+      >
        <el-icon>
          <svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
        </el-icon>
      </span>
-            <span v-if="settingsStore.topbar.enablePageReload" class="item" @click="useMainPage().reload()">
+      <span
+        v-if="settingsStore.topbar.enablePageReload"
+        class="item"
+        @click="useMainPage().reload()"
+      >
        <el-icon>
          <svg-icon name="ep:refresh-right" />
        </el-icon>
      </span>
-            <span v-if="settingsStore.topbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark')">
+      <span
+        v-if="settingsStore.topbar.enableColorScheme"
+        class="item"
+        @click="
+          settingsStore.setColorScheme(
+            settingsStore.app.colorScheme === 'dark' ? 'light' : 'dark'
+          )
+        "
+      >
        <el-icon>
-                    <svg-icon v-show="settingsStore.app.colorScheme === 'light'" name="ep:sunny" />
-                    <svg-icon v-show="settingsStore.app.colorScheme === 'dark'" name="ep:moon" />
+          <svg-icon
+            v-show="settingsStore.app.colorScheme === 'light'"
+            name="ep:sunny"
+          />
+          <svg-icon
+            v-show="settingsStore.app.colorScheme === 'dark'"
+            name="ep:moon"
+          />
        </el-icon>
      </span>
-            <span v-if="settingsStore.topbar.enableAppSetting" class="item" @click="eventBus.emit('global-theme-toggle')">
+      <span
+        v-if="settingsStore.topbar.enableAppSetting"
+        class="item"
+        @click="eventBus.emit('global-theme-toggle')"
+      >
        <el-icon>
          <svg-icon name="ep:setting" />
        </el-icon>
@ -88,8 +109,7 @@ function pro() {
      </div>
      <template #dropdown>
        <el-dropdown-menu class="user-dropdown">
-                    <el-dropdown-item v-if="settingsStore.dashboard.enable" command="dashboard">控制台</el-dropdown-item>
-                    <el-dropdown-item command="setting">个人设置</el-dropdown-item>
+          <el-dropdown-item command="pwd">修改密码</el-dropdown-item>
          <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@ -21,10 +21,7 @@ const useUserStore = defineStore(
                }
                return retn
            },
-            companyInfo: state => {
-                return state.company || '{}'
-                // return JSON.parse(state.company || '{}')
-            },
+
            userInfo: state => {
                return state.user || '{}'
                // return JSON.parse(state.user || '{}')
@ -36,10 +33,10 @@ const useUserStore = defineStore(
                    loginIn(data).then(res => {
                        if (res.code == 1) {
                            conpanyInfo(res.data.sysuserid).then(result => {
-                                localStorage.setItem('user', JSON.stringify(res.data))
-                                localStorage.setItem('account', res.data.postName)
-                                localStorage.setItem('token', res.data.tokenValue)
-                                localStorage.setItem('failure_time', 1664008260)
+                                localStorage.setItem('user-df', JSON.stringify(res.data))
+                                localStorage.setItem('account-df', res.data.postName)
+                                localStorage.setItem('token-df', res.data.tokenValue)
+                                localStorage.setItem('failure_time-df', 1664008260)
                                resolve()
                            }).catch(error => {
                                reject(error)
@ -56,11 +53,10 @@ const useUserStore = defineStore(
                return new Promise(resolve => {
                    const routeStore = useRouteStore()
                    const menuStore = useMenuStore()
-                    localStorage.removeItem('account')
-                    localStorage.removeItem('token')
-                    localStorage.removeItem('user')
-                    localStorage.removeItem('company')
-                    localStorage.removeItem('failure_time')
+                    localStorage.removeItem('account-df')
+                    localStorage.removeItem('token-df')
+                    localStorage.removeItem('user-df')
+                    localStorage.removeItem('failure_time-df')
                    this.account = ''
                    this.token = ''
                    this.failure_time = ''
--- a/src/views/personal/edit.password.vue
+++ b/src/views/personal/edit.password.vue
@ -7,79 +7,97 @@
 </route>

 <script setup name="PersonalEditPassword">
-import useUserStore from '@/store/modules/user'
+import useUserStore from "@/store/modules/user";

-const route = useRoute()
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();

-const userStore = useUserStore()
+const userStore = useUserStore();

 const validatePassword = (rule, value, callback) => {
  if (value !== form.value.newpassword) {
-        callback(new Error('请确认新密码'))
+    callback(new Error("请确认新密码"));
  } else {
-        callback()
-    }
+    callback();
  }
+};

-const formRef = ref()
+const formRef = ref();
 const form = ref({
-    password: '',
-    newpassword: '',
-    checkpassword: ''
-})
+  password: "",
+  newpassword: "",
+  checkpassword: "",
+});

 const rules = ref({
-    password: [
-        { required: true, message: '请输入原密码', trigger: 'blur' }
-    ],
+  password: [{ required: true, message: "请输入原密码", trigger: "blur" }],
  newpassword: [
-        { required: true, message: '请输入新密码', trigger: 'blur' },
-        { min: 6, max: 18, trigger: 'blur', message: '密码长度为6到18位' }
+    { required: true, message: "请输入新密码", trigger: "blur" },
+    { min: 6, max: 18, trigger: "blur", message: "密码长度为6到18位" },
  ],
  checkpassword: [
-        { required: true, message: '请输入新密码', trigger: 'blur' },
-        { validator: validatePassword }
-    ]
-})
+    { required: true, message: "请输入新密码", trigger: "blur" },
+    { validator: validatePassword },
+  ],
+});

 function onSubmit() {
-    formRef.value.validate(valid => {
+  formRef.value.validate((valid) => {
    if (valid) {
-            userStore.editPassword(form.value).then(() => {
+      userStore
+        .editPassword(form.value)
+        .then(() => {
          ElMessage({
-                    type: 'success',
-                    message: '模拟修改成功，请重新登录'
-                })
+            type: "success",
+            message: "模拟修改成功，请重新登录",
+          });
          userStore.logout().then(() => {
            router.push({
-                        name: 'login',
+              name: "login",
              query: {
-                            redirect: route.fullPath
+                redirect: route.fullPath,
+              },
+            });
+          });
+        })
+        .catch(() => {});
    }
-                    })
-                })
-            }).catch(() => {})
-        }
-    })
+  });
 }
 </script>

 <template>
-    <div>
+  <div style="width: 100%">
    <page-header title="修改密码" content="定期修改密码可以提高帐号安全性噢~" />
    <page-main>
      <el-row>
        <el-col :md="24" :lg="12">
-                    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
+          <el-form
+            ref="formRef"
+            :model="form"
+            :rules="rules"
+            label-width="120px"
+          >
            <el-form-item label="原密码" prop="password">
-                            <el-input v-model="form.password" type="password" placeholder="请输入原密码" />
+              <el-input
+                v-model="form.password"
+                type="password"
+                placeholder="请输入原密码"
+              />
            </el-form-item>
            <el-form-item label="新密码" prop="newpassword">
-                            <el-input v-model="form.newpassword" type="password" placeholder="请输入原密码" />
+              <el-input
+                v-model="form.newpassword"
+                type="password"
+                placeholder="请输入原密码"
+              />
            </el-form-item>
            <el-form-item label="确认新密码" prop="checkpassword">
-                            <el-input v-model="form.checkpassword" type="password" placeholder="请输入原密码" />
+              <el-input
+                v-model="form.checkpassword"
+                type="password"
+                placeholder="请输入原密码"
+              />
            </el-form-item>
          </el-form>
        </el-col>