admin panel add language-select

Author: xiaochong444

vue/src/components/language-list.vue

@@ -0,0 +1,52 @@
+<template>
+    <div  class="full-screen-btn-con language-list" style="width:80px">
+        <Dropdown @on-click="changeLanguage">
+            <a>
+                <i :class="currentLanguage.icon" style="display:inline-block"></i>
+                {{currentLanguage.displayName}}
+                <Icon type="arrow-down-b"></Icon>
+            </a> 
+            <DropdownMenu slot="list">
+                <DropdownItem v-for="(language,index) in languages" :key="index" :name="language.name" style="text-align:left">
+                    <i :class="language.icon" style="display:inline-block"></i>
+                    {{language.displayName}}
+                </DropdownItem>
+            </DropdownMenu>       
+        </Dropdown>
+    </div>
+</template>
+<script lang="ts">
+import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
+import Util from '../lib/util'
+import AbpBase from '../lib/abpbase'
+@Component
+export default class LanguageList extends AbpBase{
+    get languages(){
+        return abp.localization.languages.filter(val=>{
+            return !val.isDisabled&&val.name!==this.currentLanguage.name;
+        });
+    }
+    changeLanguage(languageName:string){
+        abp.utils.setCookieValue(
+            "Abp.Localization.CultureName",
+            languageName,
+            new Date(new Date().getTime() + 5 * 365 * 86400000), //5 year
+            abp.appPath
+        );
+        location.reload();
+    }
+    get currentLanguage(){
+        return abp.localization.currentLanguage;
+    }
+}
+</script>
+<style>
+.language-list{
+    width:80px;
+}
+.language-list i{
+    display: inline-block
+}
+</style>
+
+

vue/src/views/main.less

@@ -148,7 +148,7 @@
             right: 0;
             top: 0;
             height: 100%;
-            width: 230px;
+            width: 300px;
             .switch-theme-con{
                 display: inline-block;
                 width: 40px;
@@ -177,11 +177,11 @@
                     position: absolute;
                     right: 0;
                     top: 0;
-                    width: 150px;
+                    width: 130px;
                     height: 100%;
                     .main-user-name{
                         display: inline-block;
-                        width: 80px;
+                        width: 60px;
                         word-break: keep-all;
                         white-space: nowrap;
                         vertical-align: middle;

vue/src/views/main.vue

@@ -35,7 +35,8 @@
                 <div class="header-avator-con">
                     <full-screen v-model="isFullScreen" @on-change="fullscreenChange"></full-screen>
                     <lock-screen></lock-screen>  
-                    <notice></notice>            
+                    <notice></notice>   
+                    <language-list></language-list>         
                     <div class="user-dropdown-menu-con">
                         <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
                             <Dropdown transfer trigger="click" @on-click="handleClickUserDropdown">
@@ -77,9 +78,10 @@
     import notice from '../components/notices/notice.vue';
     import util from '../lib/util';
     import copyfooter from '../components/Footer.vue'
+    import LanguageList from '../components/language-list.vue'
     import AbpBase from '../lib/abpbase'
     @Component({
-      components:{shrinkableMenu,tagsPageOpened,breadcrumbNav,fullScreen,lockScreen,notice,copyfooter}
+      components:{shrinkableMenu,tagsPageOpened,breadcrumbNav,fullScreen,lockScreen,notice,copyfooter,LanguageList}
     })
     export default class Main extends AbpBase {
         shrink:boolean=false;