crm-project/src/views/PersionalSetList.vue

<template>
    <div class="persionalSetList padding-20 flex-center">
        <!-- <h1>This is an AdminSetting page</h1> -->
        <div class="persionalSetList-content">
            <a-row>
                <a-col>
                    <a-tabs type="card" default-active-key="tabsTit_1" @change="callback">
                    <a-tab-pane key="tabsTit_1" tab="設置">
                        <div class="">
                        <a-row >
                            <a-col :span="5">
                                <a-menu
                                    style="width: 100%"
                                    :default-selected-keys="['1']"
                                    :open-keys.sync="openKeys"
                                    v-model="currentMenu"
                                    mode="inline"
                                    @click="handleClick"
                                >
                                    <a-sub-menu :key="item.id" @titleClick="titleClick" v-for="(item, index) in persionalSettingLink">
                                        <span slot="title">
                                            <a-icon :type="item.icon" />
                                            <span>{{item.group_name}}</span>
                                        </span>
                                        <a-menu-item :key="item2.id" v-for="(item2, index2) in item.detail" @click="itemClick(item2)">{{item2.name}}</a-menu-item>
                                    </a-sub-menu>

                                    <!-- <a-sub-menu key="sub1">
                                        <span slot="title"
                                            ><a-icon type="mail" /><span>個人</span></span
                                        >
                                        <a-menu-item key="1">個人喜好</a-menu-item>
                                        <a-menu-item key="2">密碼登入</a-menu-item>
                                        <a-menu-item key="3">電子郵件同步</a-menu-item>
                                        <a-menu-item key="4">聯絡人同步</a-menu-item>
                                        <a-menu-item key="5">日曆同步</a-menu-item>
                                        <a-menu-item key="6">您的設備</a-menu-item>
                                        </a-sub-menu>
                                        <a-sub-menu key="sub2" @titleClick="titleClick">
                                        <span slot="title"
                                            ><a-icon type="appstore" /><span>公司</span></span
                                        >
                                        <a-menu-item key="7"> 公司設定</a-menu-item>
                                        <a-menu-item key="8"> 管理使用者 </a-menu-item>
                                    </a-sub-menu> -->
                            
                                </a-menu>
                            </a-col>

                            <a-col :span="18" class="content-right marginLft-20">
                                <router-view /> 
                            </a-col>

                        </a-row>
                        </div>
                    </a-tab-pane>

                    <a-tab-pane key="tabsTit_2" tab="訂閱">
                        <a-row>
                        <a-col :span="24" class="content-right">
                            <div>
                            <Subscription msg="付款" v-show="!showSubscriptionManage" />
                            <a-button
                                @click="clickSubLink()"
                                v-show="!showSubscriptionManage"
                                >管理訂閱</a-button
                            >
                            <SubscriptionManage
                                msg="管理訂閱"
                                v-show="showSubscriptionManage"
                            />
                            </div>
                        </a-col>
                        </a-row>
                    </a-tab-pane>
                    
                    </a-tabs>
                </a-col>
            </a-row>
        </div>
        
    </div>
</template>
<script>
// import AdminEmail from "@/components/Persionalsetting/email-sync.vue";
// import PersionalSetting from "@/components/PersionalSetting/PersionalSetting.vue";
// import UserManage from "@/components/PersionalSetting/UserManage.vue";
// import PasswordManage from "@/components/PersionalSetting/PasswordManage.vue";
// import CustCync from "@/components/PersionalSetting/CustCync.vue";
// import CompanySetting from "@/components/PersionalSetting/CompanySetting.vue";
// import CalendarCync from "@/components/PersionalSetting/CalendarCync.vue";
// import Subscription from "@/components/PersionalSetting/Subscription.vue";
// import SubscriptionManage from "@/components/PersionalSetting/SubscriptionManage.vue";

export default {
  name: "PersionalSetList",
  components: {
    // UserManage,
    // AdminEmail,
    // PersionalSetting,
    // PasswordManage,
    // CustCync,
    // CompanySetting,
    // CalendarCync,
    // Subscription,
    // SubscriptionManage,
    
  },
  data() {
    return {
      //menu start
      openKeys: ["sub1","sub2"],
      currentMenu: [0],//選中那個菜單
      showAdminEmail: false,
      showPersionalSetting: true,
      showUserManage: false,
      showPasswordManage: false,
      showCustCync: false,
      showCompanySetting: false,
      showCalendarCync: false,
      showSubscriptionManage: false,
      //menu end
      persionalSettingLink:[
        {
          id:"sub1",
          group_name:"個人",
          icon:"mail",
          detail:[
            {
              id:0,
              name:"個人喜好",
              link_path:"/settings/profile",
            },
            {
              id:1,
              name:"密碼登入",
              link_path:"/settings/password",
            },
            {
                id:2,
                name:"電子郵件同步",
                link_path:"/settings/email-sync",
            },
            {
                id:6,
                name:"LINE同步",
                link_path:"/settings/sns-sync",
            },
            {
                id:3,
                name:"聯絡人同步",
                link_path:"/settings/contact-sync",
            },
            {
                id:4,
                name:"日曆同步",
                link_path:"/settings/calendar-sync",
            },
            {
                id:5,
                name:"您的設備",
                link_path:"/settings/subscription/change",
            },
            //<!--功能未完成，未上線 update by 12/2
          ]
        },
        {
          id:"sub2",
          group_name:"公司",
          icon:"appstore",
          detail:[
            {
              id:7,
              name:"公司設定",
              link_path:"/settings/company-settings",
            },
            {
              id:8,
              name:"管理使用者",
              link_path:"/settings/users",
            },
          ]
        }
      ],
    };
  },
  mounted () {
      this.currentMenu = [];
      this.persionalSettingLink.forEach(item => {
          item.detail.forEach(i => {
              if (i.link_path == this.$route.path) {
                  this.currentMenu.push(i.id);
              }
          })
      })
  },
  methods: {
    //tabs start
    callback(key) {
      console.log(key);
      if(key == 'tabsTit_2'){
        this.showSubscriptionManage = false;
      }
    },
    //tabs end
    //menu start
    itemClick(item){
    //   console.log("item  item---",item)
      this.$router.push(item.link_path);
    },
    handleClick(e) {
        // this.currentMenu = 
        this.$util.console(e, '點擊了菜單');
        return;
    },
    titleClick(e) {
      console.log("titleClick", e);
    },
    //menu end
    clickSubLink() {
      this.showSubscriptionManage = true;
    },
  },
  watch: {
    //menu start
    openKeys(val) {
      console.log("openKeys", val);
    },
    //menu end
  },
};
</script>

<style>
    /* .persionalSetList {

    } */

    .persionalSetList-content {
        width: 76%;
        min-width: 760px;
    }

    .content-right {
        background: #fff;
    }

</style>