dootask/resources/assets/js/pages/manage/setting/index.vue

<template>
    <div class="page-setting">
        <PageTitle :title="$L(titleNameRoute)"/>
        <div class="setting-head">
            <div class="setting-titbox">
                <div class="setting-title">
                    <h1>{{$L('设置')}}</h1>
                    <div v-if="!show768Menu" class="setting-more" @click="toggleRoute('index')">
                        <Icon type="md-close" />
                    </div>
                </div>
            </div>
        </div>
        <div class="setting-box">
            <div class="setting-menu" :class="{'show768-menu':show768Menu}">
                <ul>
                    <li
                        v-for="(item, key) in menu"
                        :key="key"
                        :class="classNameRoute(item.path, item.divided)"
                        @click="toggleRoute(item.path)">{{$L(item.name)}}</li>
                    <li
                        v-if="!!clientNewVersion"
                        :class="classNameRoute('version', true)"
                        @click="toggleRoute('version')">
                        <AutoTip disabled>{{$L('版本')}}: {{version}}</AutoTip>
                        <Badge :text="clientNewVersion"/>
                    </li>
                    <li v-else class="version divided">
                        <AutoTip>{{$L('版本')}}: {{version}}</AutoTip>
                    </li>
                </ul>
            </div>
            <div class="setting-content">
                <div class="setting-content-title">{{$L(titleNameRoute)}}</div>
                <div class="setting-content-view">
                    <router-view class="setting-router-view"></router-view>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";
import {Store} from "le5le-store";

export default {
    data() {
        return {
            version: window.systemInfo.version
        }
    },

    mounted() {

    },

    computed: {
        ...mapState(['userInfo', 'userIsAdmin', 'clientNewVersion']),

        routeName() {
            return this.$route.name
        },

        show768Menu() {
            return this.routeName === 'manage-setting'
        },

        menu() {
            let menu = [
                {path: 'personal', name: '个人设置'},
                {path: 'language', name: '语言设置'},
                {path: 'password', name: '密码设置'},
            ]
            if (this.windowSmall) {
                menu.push({path: 'clearCache', name: '清除缓存'})
            }
            if (this.userIsAdmin) {
                menu.push(...[
                    {path: 'system', name: '系统设置', divided: true},
                    {path: 'logout', name: '退出登录'},
                ])
            } else {
                menu.push(...[
                    {path: 'logout', name: '退出登录', divided: true},
                ])
            }
            return menu;
        },

        titleNameRoute() {
            const {routeName, menu} = this;
            let name = '';
            menu.some((item) => {
                if (routeName === `manage-setting-${item.path}`) {
                    name = item.name;
                    return true;
                }
            })
            return name || '设置';
        }
    },

    watch: {
        routeName: {
            handler(name) {
                if (name === 'manage-setting' && this.windowLarge) {
                    this.goForward({name: 'manage-setting-personal'}, true);
                }
            },
            immediate: true
        }
    },

    methods: {
        toggleRoute(path) {
            switch (path) {
                case 'clearCache':
                    this.$store.dispatch("handleClearCache", null).then(() => {
                        $A.setStorage("clearCache", $A.randomString(6))
                        $A.reloadUrl()
                    }).catch(() => {
                        $A.reloadUrl()
                    });
                    break;

                case 'logout':
                    $A.modalConfirm({
                        title: '退出登录',
                        content: '你确定要登出系统？',
                        onOk: () => {
                            this.$store.dispatch("logout", false)
                        }
                    });
                    break;

                case 'version':
                    Store.set('updateNotification', null);
                    break;

                case 'index':
                    this.goForward({name: 'manage-setting'});
                    break;

                default:
                    this.goForward({name: 'manage-setting-' + path});
                    break;
            }
        },

        classNameRoute(path, divided) {
            return {
                "active": this.windowLarge && this.routeName === `manage-setting-${path}`,
                "divided": !!divided
            };
        },
    }
}
</script>