zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change url when switching tab in user/app settings page

Browse Source
This commit is contained in:
MaysWind
2023-07-24 00:20:01 +08:00
parent dc746a51a5
commit 2c3856be3c
3 changed files with 46 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/router/desktop.js
+2 -2
View File
@@ -114,7 +114,7 @@ const router = createRouter({
component: UserSettingsPage, component: UserSettingsPage,
beforeEnter: checkLogin, beforeEnter: checkLogin,
props: route => ({ props: route => ({
tab: route.query.tab initTab: route.query.tab
}) })
}, },
{ {
@@ -122,7 +122,7 @@ const router = createRouter({
component: AppSettingsPage, component: AppSettingsPage,
beforeEnter: checkLogin, beforeEnter: checkLogin,
props: route => ({ props: route => ({
tab: route.query.tab initTab: route.query.tab
}) })
}, },
{ {
src/views/desktop/app/AppSettingsPage.vue
+21 -5
View File
@@ -1,15 +1,15 @@
<template> <template>
<div> <div>
<v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab"> <v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab">
<v-tab value="basicSetting"> <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
<v-icon size="20" start :icon="icons.basicSetting"/> <v-icon size="20" start :icon="icons.basicSetting"/>
{{ $t('Basic') }} {{ $t('Basic') }}
</v-tab> </v-tab>
<v-tab value="applicationLockSetting"> <v-tab value="applicationLockSetting" @click="pushRouter('applicationLockSetting')">
<v-icon size="20" start :icon="icons.applicationLockSetting"/> <v-icon size="20" start :icon="icons.applicationLockSetting"/>
{{ $t('Application Lock') }} {{ $t('Application Lock') }}
</v-tab> </v-tab>
<v-tab value="statisticsSetting"> <v-tab value="statisticsSetting" @click="pushRouter('statisticsSetting')">
<v-icon size="20" start :icon="icons.statisticsSetting"/> <v-icon size="20" start :icon="icons.statisticsSetting"/>
{{ $t('Statistics') }} {{ $t('Statistics') }}
</v-tab> </v-tab>
@@ -49,10 +49,10 @@ export default {
AppStatisticsSettingTab AppStatisticsSettingTab
}, },
props: [ props: [
'tab' 'initTab'
], ],
data() { data() {
let queryActiveTab = this.tab || 'basicSetting'; let queryActiveTab = this.initTab || 'basicSetting';
if ([ if ([
'basicSetting', 'basicSetting',
@@ -70,6 +70,22 @@ export default {
statisticsSetting: mdiChartPieOutline statisticsSetting: mdiChartPieOutline
} }
}; };
},
beforeRouteUpdate(to) {
if (to.query && to.query.tab && [
'basicSetting',
'applicationLockSetting',
'statisticsSetting'
].indexOf(to.query.tab) >= 0) {
this.activeTab = to.query.tab;
} else {
this.activeTab = 'basicSetting';
}
},
methods: {
pushRouter(tab) {
this.$router.push(`/app/settings?tab=${tab}`);
}
} }
} }
</script> </script>
src/views/desktop/user/UserSettingsPage.vue
+23 -6
View File
@@ -1,19 +1,19 @@
<template> <template>
<div> <div>
<v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab"> <v-tabs show-arrows class="v-tabs-pill text-uppercase" v-model="activeTab">
<v-tab value="basicSetting"> <v-tab value="basicSetting" @click="pushRouter('basicSetting')">
<v-icon size="20" start :icon="icons.basicSetting"/> <v-icon size="20" start :icon="icons.basicSetting"/>
{{ $t('Basic') }} {{ $t('Basic') }}
</v-tab> </v-tab>
<v-tab value="securitySetting"> <v-tab value="securitySetting" @click="pushRouter('securitySetting')">
<v-icon size="20" start :icon="icons.securitySetting"/> <v-icon size="20" start :icon="icons.securitySetting"/>
{{ $t('Security') }} {{ $t('Security') }}
</v-tab> </v-tab>
<v-tab value="twoFactorSetting"> <v-tab value="twoFactorSetting" @click="pushRouter('twoFactorSetting')">
<v-icon size="20" start :icon="icons.twoFactorSetting"/> <v-icon size="20" start :icon="icons.twoFactorSetting"/>
{{ $t('Two-Factor Authentication') }} {{ $t('Two-Factor Authentication') }}
</v-tab> </v-tab>
<v-tab value="dataManagementSetting"> <v-tab value="dataManagementSetting" @click="pushRouter('dataManagementSetting')">
<v-icon size="20" start :icon="icons.dataManagementSetting"/> <v-icon size="20" start :icon="icons.dataManagementSetting"/>
{{ $t('Data Management') }} {{ $t('Data Management') }}
</v-tab> </v-tab>
@@ -60,10 +60,10 @@ export default {
UserDataManagementSettingTab UserDataManagementSettingTab
}, },
props: [ props: [
'tab' 'initTab'
], ],
data() { data() {
let queryActiveTab = this.tab || 'basicSetting'; let queryActiveTab = this.initTab || 'basicSetting';
if ([ if ([
'basicSetting', 'basicSetting',
@@ -90,6 +90,23 @@ export default {
this.$refs.twoFactorSettingTab.reset(); this.$refs.twoFactorSettingTab.reset();
} }
} }
},
beforeRouteUpdate(to) {
if (to.query && to.query.tab && [
'basicSetting',
'securitySetting',
'twoFactorSetting',
'dataManagementSetting'
].indexOf(to.query.tab) >= 0) {
this.activeTab = to.query.tab;
} else {
this.activeTab = 'basicSetting';
}
},
methods: {
pushRouter(tab) {
this.$router.push(`/user/settings?tab=${tab}`);
}
} }
} }
</script> </script>