ADD: 密码修改逻辑封装

src/layouts/components/FHeader.vue

@@ -74,89 +74,42 @@ import { useFullscreen } from '@vueuse/core'
 const {
     // 是否全屏状态
     isFullscreen,
-
     // 切换全屏
     toggle
 } = useFullscreen()
 
+const {
+    formDrawerRef,
+    form,
+    rules,
+    formRef,
+    onSubmit,
+    openRePasswordForm
+} = useRepassword()
+
+
 const store = useStore()
 const router = useRouter()
 
 const handleCommand = (c) => {
-
     switch (c) {
         case "logout":
             handleLogout()
             break;
 
         case "rePassword":
-            formDrawerRef.value.open()
+            openRePasswordForm()
             break;
     }
 }
 
-// 修改密码
-const formDrawerRef = ref(null)
-const form = reactive({
-    oldpassword: "",
-    password: "",
-    repassword: ""
-})
-
-// 密码验证规则
-const rules = {
-    oldpassword: [
-        {
-            required: true,
-            message: '旧密码不能为空',
-            trigger: 'blur'
-        },
-    ],
-    password: [
-        {
-            required: true,
-            message: '新密码不能为空',
-            trigger: 'blur'
-        },
-    ],
-    repassword: [
-        {
-            required: true,
-            message: '确认密码不能为空',
-            trigger: 'blur'
-        },
-    ]
-
-}
-
-
-const formRef = ref(null)
 
 
-const onSubmit = () => {
-    formRef.value.validate((valid) => {
-        if (!valid) {
-            return false
-        }
-        formDrawerRef.value.showLoading();
-
-        updatepassword(form)
-            .then(res => {
-                toast("修改密码成功, 请重新登录!")
-                store.dispatch("logout")
-                router.push("/login")
-
-            })
-            .finally(() => {
-                formDrawerRef.value.hideLoading();
-            })
-    })
-
-}
-
 // 刷新
 const handleRefresh = () => location.reload()
 
+
+// 退出登录
 function handleLogout() {
     showModal("是否要退出登录?").then(res => {
         console.log("退出登录")
@@ -164,22 +117,88 @@ function handleLogout() {
             // 移除cookie
             removeToken()
 
-
             // 清除当前用户状态 vuex
             store.dispatch("logout")
 
-
             // 跳转回登录页
             router.push("/login")
 
-
             // 提示退出成功
             toast("退出成功!")
+        })
+    })
+}
 
 
+function useRepassword() {
+    // 修改密码
+    const form = reactive({
+        oldpassword: "",
+        password: "",
+        repassword: ""
+    })
+
+    const rules = {
+        oldpassword: [
+            {
+                required: true,
+                message: '旧密码不能为空',
+                trigger: 'blur'
+            },
+        ],
+        password: [
+            {
+                required: true,
+                message: '新密码不能为空',
+                trigger: 'blur'
+            },
+        ],
+        repassword: [
+            {
+                required: true,
+                message: '确认密码不能为空',
+                trigger: 'blur'
+            },
+        ]
+
+    }
 
+    const formRef = ref(null)
+    const formDrawerRef = ref(null)
+
+    const onSubmit = () => {
+        formRef.value.validate((valid) => {
+            if (!valid) {
+                return false
+            }
+            formDrawerRef.value.showLoading();
+
+            updatepassword(form)
+                .then(res => {
+                    toast("修改密码成功, 请重新登录!")
+                    store.dispatch("logout")
+                    router.push("/login")
+
+                })
+                .finally(() => {
+                    formDrawerRef.value.hideLoading();
+                })
         })
-    })
+    }
+
+    const openRePasswordForm = () => formDrawerRef.value.open()
+
+    return {
+        formDrawerRef,
+        form,
+        rules,
+        formRef,
+        onSubmit,
+        openRePasswordForm
+
+    }
+
+
 }
 
 </script>