From 00fa9e98f8764ba12ee7c87b70137bb5f92457ae Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Wed, 24 Mar 2021 10:03:16 +0800
Subject: [PATCH] add mixins LocalizationMiXin

---
 vueJs/src/mixins/DataListMiXin.ts             |  17 +-
 vueJs/src/mixins/LocalizationMiXin.ts         |  13 +
 vueJs/src/router/index.ts                     |   2 -
 vueJs/src/router/modules/file-management.ts   |  27 -
 .../AggregateRouteConfigEditForm.vue          |  10 +-
 .../AggregateRouteCreateOrEditForm.vue        |   9 +-
 .../components/GlobalCreateOrEditForm.vue     |   9 +-
 .../components/RouteCreateOrEditForm.vue      |   9 +-
 .../components/RouteGroupCreateOrEditForm.vue |   9 +-
 .../CreateOrUpdateCliamTypeForm.vue           |   9 +-
 .../components/CreateOrUpdateDataDialog.vue   |   9 +-
 .../CreateOrUpdateDataItemDialog.vue          |  13 +-
 .../components/DataDictionaryTree.vue         |  17 +-
 .../components/DataItemTable.vue              |   7 +-
 .../ApiResourceCreateOrEditForm.vue           |   9 +-
 .../components/ApiScopeCreateOrEditForm.vue   |   9 +-
 .../client/components/ClientClaimEditForm.vue |   9 +-
 .../client/components/ClientCloneForm.vue     |   9 +-
 .../client/components/ClientCreateForm.vue    |   7 +-
 .../client/components/ClientEditForm.vue      |   9 +-
 .../components/PropertiesEditForm.vue         |   9 +-
 .../components/SecretEditForm.vue             |   4 -
 .../IdentityResourceCreateOrEditForm.vue      |   9 +-
 .../components/PersistedGrantProfile.vue      |   5 +-
 .../components/OrganizationUnitTree.vue       |   9 +-
 .../components/RoleOrganizationUint.vue       |   9 +-
 .../components/RoleReference.vue              |   9 +-
 .../components/UserOrganizationUint.vue       |   9 +-
 .../components/UserReference.vue              |   9 +-
 .../roles/components/ManageRoleMenuDialog.vue |   7 +-
 .../RoleClaimCreateOrUpdateForm.vue           |   9 +-
 .../admin/roles/components/RoleCreateForm.vue |   7 +-
 .../admin/roles/components/RoleEditForm.vue   |   9 +-
 vueJs/src/views/admin/roles/index.vue         |   8 +-
 .../components/GlobalSettingEditForm.vue      |   7 +-
 .../components/TenantSettingEditForm.vue      |   7 +-
 .../components/TenantConnectionEditForm.vue   |   9 +-
 .../components/TenantCreateOrEditForm.vue     |   9 +-
 .../users/components/ManageUserMenuDialog.vue |  11 +-
 .../UserClaimCreateOrUpdateForm.vue           |  11 +-
 .../components/UserCreateOrUpdateForm.vue     |  10 +-
 vueJs/src/views/admin/users/index.vue         |   6 +-
 .../components/CreateOrUpdateLayoutDialog.vue |  15 +-
 vueJs/src/views/container/layouts/index.vue   |   4 +-
 .../components/CreateOrUpdateMenuDialog.vue   |  15 +-
 .../components/FileDownloadForm.vue           | 179 ------
 .../components/FileUploadForm.vue             | 107 ----
 vueJs/src/views/file-management/index.vue     | 516 ------------------
 vueJs/src/views/login/index.vue               |   9 +-
 .../components/OssObjectProfile.vue           |   1 +
 vueJs/src/views/oss-management/index.vue      |   9 +-
 vueJs/src/views/register/index.vue            |   9 +-
 vueJs/src/views/reset-password/index.vue      |   9 +-
 53 files changed, 184 insertions(+), 1083 deletions(-)
 create mode 100644 vueJs/src/mixins/LocalizationMiXin.ts
 delete mode 100644 vueJs/src/router/modules/file-management.ts
 delete mode 100644 vueJs/src/views/file-management/components/FileDownloadForm.vue
 delete mode 100644 vueJs/src/views/file-management/components/FileUploadForm.vue
 delete mode 100644 vueJs/src/views/file-management/index.vue

diff --git a/vueJs/src/mixins/DataListMiXin.ts b/vueJs/src/mixins/DataListMiXin.ts
index 76185319d..2fc9dd38a 100644
--- a/vueJs/src/mixins/DataListMiXin.ts
+++ b/vueJs/src/mixins/DataListMiXin.ts
@@ -1,11 +1,13 @@
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Mixins } from 'vue-property-decorator'
 import { PagedResultDto, ListResultDto, PagedAndSortedResultRequestDto } from '@/api/types'
+
+import LocalizationMiXin from './LocalizationMiXin'
 /**
  * 数据列表mixin
  * 复写大部分数据列表事件
  */
 @Component
-export default class DataListMiXin extends Vue {
+export default class DataListMiXin extends Mixins(LocalizationMiXin) {
   /** 数据列表 */
   public dataList = new Array<any>()
   /** 数据总数 */
@@ -122,15 +124,4 @@ export default class DataListMiXin extends Vue {
   protected handleSortChange(column: any) {
     this.dataFilter.sorting = column.prop
   }
-
-  /**
-   * 本地化接口
-   * @param name 本地化名称
-   * @param values 参数
-   */
-  protected l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
-
-  /** 还可以添加 eventbus 的通用处理器 */
 }
diff --git a/vueJs/src/mixins/LocalizationMiXin.ts b/vueJs/src/mixins/LocalizationMiXin.ts
new file mode 100644
index 000000000..2fc1632cd
--- /dev/null
+++ b/vueJs/src/mixins/LocalizationMiXin.ts
@@ -0,0 +1,13 @@
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class LocalizationMiXin extends Vue {
+  /**
+   * 本地化接口
+   * @param name 本地化名称
+   * @param values 参数
+   */
+   public l(name: string, values?: any[] | { [key: string]: any }) {
+    return this.$t(name, values).toString()
+  }
+}
\ No newline at end of file
diff --git a/vueJs/src/router/index.ts b/vueJs/src/router/index.ts
index cbefb6e5f..3e2755d6d 100644
--- a/vueJs/src/router/index.ts
+++ b/vueJs/src/router/index.ts
@@ -17,7 +17,6 @@ import adminRouter from './modules/admin'
 import auditingRouter from './modules/auditing'
 import apigatewayRouter from './modules/apigateway'
 import identityServerRouter from './modules/identityServer'
-import fileManagementRouter from './modules/file-management'
 import containerRouter from './modules/container'
 
 Vue.use(Router)
@@ -159,7 +158,6 @@ export const asyncRoutes: RouteConfig[] = [
   auditingRouter,
   apigatewayRouter,
   identityServerRouter,
-  fileManagementRouter,
   containerRouter,
   {
     path: '*',
diff --git a/vueJs/src/router/modules/file-management.ts b/vueJs/src/router/modules/file-management.ts
deleted file mode 100644
index e2a6c03ff..000000000
--- a/vueJs/src/router/modules/file-management.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { RouteConfig } from 'vue-router'
-import Layout from '@/layout/index.vue'
-
-const fileManagementRouter: RouteConfig = {
-  path: '/file-management',
-  component: Layout,
-  meta: {
-    title: 'filemanagement',
-    icon: 'file-manager',
-    roles: ['AbpFileManagement.FileSystem'],
-    alwaysShow: true
-  },
-  children: [
-    {
-      path: 'file-system',
-      component: () => import(/* webpackChunkName: "file-system" */ '@/views/file-management/index.vue'),
-      name: 'filesystem',
-      meta: {
-        title: 'filesystem',
-        icon: 'file-storage',
-        roles: ['AbpFileManagement.FileSystem']
-      }
-    }
-  ]
-}
-
-export default fileManagementRouter
diff --git a/vueJs/src/views/admin/apigateway/components/AggregateRouteConfigEditForm.vue b/vueJs/src/views/admin/apigateway/components/AggregateRouteConfigEditForm.vue
index 974bfa4e1..27d1a5d74 100644
--- a/vueJs/src/views/admin/apigateway/components/AggregateRouteConfigEditForm.vue
+++ b/vueJs/src/views/admin/apigateway/components/AggregateRouteConfigEditForm.vue
@@ -113,16 +113,18 @@
 
 <script lang="ts">
 import ApiGatewayService, { AggregateReRouteConfigCreate, AggregateReRoute } from '@/api/apigateway'
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Prop, Watch, Mixins } from 'vue-property-decorator'
 import { checkPermission } from '@/utils/permission'
 
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
+
 @Component({
   name: 'AggregateRouteConfigEditForm',
   methods: {
     checkPermission
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private aggregateRouteId!: string
 
@@ -185,9 +187,5 @@ export default class extends Vue {
     this.aggregateRouteId = ''
     this.routeConfig = AggregateReRouteConfigCreate.empty()
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
diff --git a/vueJs/src/views/admin/apigateway/components/AggregateRouteCreateOrEditForm.vue b/vueJs/src/views/admin/apigateway/components/AggregateRouteCreateOrEditForm.vue
index 65df958f8..95ce90a76 100644
--- a/vueJs/src/views/admin/apigateway/components/AggregateRouteCreateOrEditForm.vue
+++ b/vueJs/src/views/admin/apigateway/components/AggregateRouteCreateOrEditForm.vue
@@ -140,7 +140,8 @@
 
 <script lang="ts">
 import ElInputTag from '@/components/InputTag/index.vue'
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import { Component, Prop, Mixins, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import ApiGatewayService, { RouteGroupAppIdDto, AggregateReRoute, AggregateReRouteCreate, AggregateReRouteUpdate } from '@/api/apigateway'
 
 @Component({
@@ -149,7 +150,7 @@ import ApiGatewayService, { RouteGroupAppIdDto, AggregateReRoute, AggregateReRou
     ElInputTag
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private aggregateRouteId!: string
 
@@ -242,9 +243,5 @@ export default class extends Vue {
     const formAggregateRoute = this.$refs.formAggregateRoute as any
     formAggregateRoute.resetFields()
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
diff --git a/vueJs/src/views/admin/apigateway/components/GlobalCreateOrEditForm.vue b/vueJs/src/views/admin/apigateway/components/GlobalCreateOrEditForm.vue
index 6abbd9e77..ef1231f43 100644
--- a/vueJs/src/views/admin/apigateway/components/GlobalCreateOrEditForm.vue
+++ b/vueJs/src/views/admin/apigateway/components/GlobalCreateOrEditForm.vue
@@ -352,7 +352,8 @@
 
 <script lang="ts">
 import { checkPermission } from '@/utils/permission'
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import ApiGatewayService, {
   RouteGroupAppIdDto,
   LoadBalancerDescriptor,
@@ -368,7 +369,7 @@ import ApiGatewayService, {
     checkPermission
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private appId!: string
 
@@ -451,10 +452,6 @@ export default class extends Vue {
     formGlobal.resetFields()
     this.$emit('closed', false)
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/apigateway/components/RouteCreateOrEditForm.vue b/vueJs/src/views/admin/apigateway/components/RouteCreateOrEditForm.vue
index 55263d0e2..24a8965e4 100644
--- a/vueJs/src/views/admin/apigateway/components/RouteCreateOrEditForm.vue
+++ b/vueJs/src/views/admin/apigateway/components/RouteCreateOrEditForm.vue
@@ -539,7 +539,8 @@
 import ElInputTag from '@/components/InputTag/index.vue'
 import HostAndPortInputTag from './HostAndPortInputTag.vue'
 import DictionaryInputTag from './DictionaryInputTag.vue'
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import ApiGateWayService, { LoadBalancerDescriptor, RouteGroupAppIdDto, ReRouteDto, ReRouteCreateDto, ReRouteUpdateDto } from '@/api/apigateway'
 
 @Component({
@@ -550,7 +551,7 @@ import ApiGateWayService, { LoadBalancerDescriptor, RouteGroupAppIdDto, ReRouteD
     HostAndPortInputTag
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private routeId!: number
 
@@ -668,10 +669,6 @@ export default class extends Vue {
     this.activeTablePane = 'basicOptions'
     this.$emit('closed')
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/apigateway/components/RouteGroupCreateOrEditForm.vue b/vueJs/src/views/admin/apigateway/components/RouteGroupCreateOrEditForm.vue
index bcb43c818..4cf9c0bd7 100644
--- a/vueJs/src/views/admin/apigateway/components/RouteGroupCreateOrEditForm.vue
+++ b/vueJs/src/views/admin/apigateway/components/RouteGroupCreateOrEditForm.vue
@@ -77,13 +77,14 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import ApiGateWayService, { RouteGroupDto, RouteGroupUpdateDto, RouteGroupCreateDto } from '@/api/apigateway'
 
 @Component({
   name: 'RouteGroupCreateOrEditForm'
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private appId!: string
 
@@ -158,10 +159,6 @@ export default class extends Vue {
     routerEditForm.resetFields()
     this.$emit('closed', false)
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/claim-type/components/CreateOrUpdateCliamTypeForm.vue b/vueJs/src/views/admin/claim-type/components/CreateOrUpdateCliamTypeForm.vue
index 94a08c017..892a338d3 100644
--- a/vueJs/src/views/admin/claim-type/components/CreateOrUpdateCliamTypeForm.vue
+++ b/vueJs/src/views/admin/claim-type/components/CreateOrUpdateCliamTypeForm.vue
@@ -113,12 +113,13 @@ import ClaimTypeApiService, {
   IdentityClaimTypeUpdate,
   IdentityClaimTypeCreateOrUpdateBase
 } from '@/api/cliam-type'
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 
 @Component({
   name: 'CreateOrUpdateCliamTypeForm'
 })
-export default class CreateOrUpdateCliamTypeForm extends Vue {
+export default class CreateOrUpdateCliamTypeForm extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private claimTypeId!: string
 
@@ -206,10 +207,6 @@ export default class CreateOrUpdateCliamTypeForm extends Vue {
     claimType.required = this.claimType.required
     claimType.description = this.claimType.description
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/data-dictionary/components/CreateOrUpdateDataDialog.vue b/vueJs/src/views/admin/data-dictionary/components/CreateOrUpdateDataDialog.vue
index d0ca4fa4f..40c796aef 100644
--- a/vueJs/src/views/admin/data-dictionary/components/CreateOrUpdateDataDialog.vue
+++ b/vueJs/src/views/admin/data-dictionary/components/CreateOrUpdateDataDialog.vue
@@ -73,7 +73,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 
 import { Form } from 'element-ui'
 import DataDictionaryService, {
@@ -85,7 +86,7 @@ import DataDictionaryService, {
 @Component({
   name: 'CreateOrUpdateDataDialog'
 })
-export default class CreateOrUpdateDataDialog extends Vue {
+export default class CreateOrUpdateDataDialog extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -130,7 +131,7 @@ export default class CreateOrUpdateDataDialog extends Vue {
             DataDictionaryService
               .update(this.data.id, update)
               .then(() => {
-                this.$message.success(this.$t('successful').toString())
+                this.$message.success(this.l('successful'))
                 this.onFormClosed(true)
               })
           } else {
@@ -142,7 +143,7 @@ export default class CreateOrUpdateDataDialog extends Vue {
             DataDictionaryService
               .create(create)
               .then(() => {
-                this.$message.success(this.$t('successful').toString())
+                this.$message.success(this.l('successful'))
                 this.onFormClosed(true)
               })
           }
diff --git a/vueJs/src/views/admin/data-dictionary/components/CreateOrUpdateDataItemDialog.vue b/vueJs/src/views/admin/data-dictionary/components/CreateOrUpdateDataItemDialog.vue
index eaffcbde8..3833f0c21 100644
--- a/vueJs/src/views/admin/data-dictionary/components/CreateOrUpdateDataItemDialog.vue
+++ b/vueJs/src/views/admin/data-dictionary/components/CreateOrUpdateDataItemDialog.vue
@@ -146,7 +146,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 
 import { Form } from 'element-ui'
 import DataDictionaryService, {
@@ -158,7 +159,7 @@ import DataDictionaryService, {
 @Component({
   name: 'CreateOrUpdateDataItemDialog'
 })
-export default class CreateOrUpdateDataItemDialog extends Vue {
+export default class CreateOrUpdateDataItemDialog extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -177,9 +178,9 @@ export default class CreateOrUpdateDataItemDialog extends Vue {
 
   get title() {
     if (this.isEdit) {
-      return this.$t('AppPlatform.Data:EditItem')
+      return this.l('AppPlatform.Data:EditItem')
     }
-    return this.$t('AppPlatform.Data:AppendItem')
+    return this.l('AppPlatform.Data:AppendItem')
   }
 
   private onSave() {
@@ -197,7 +198,7 @@ export default class CreateOrUpdateDataItemDialog extends Vue {
             DataDictionaryService
               .updateItem(this.dataId, this.dataItem.name, update)
               .then(() => {
-                this.$message.success(this.$t('successful').toString())
+                this.$message.success(this.l('successful'))
                 this.onFormClosed(true)
               })
           } else {
@@ -211,7 +212,7 @@ export default class CreateOrUpdateDataItemDialog extends Vue {
             DataDictionaryService
               .appendItem(this.dataId, create)
               .then(() => {
-                this.$message.success(this.$t('successful').toString())
+                this.$message.success(this.l('successful'))
                 this.onFormClosed(true)
               })
           }
diff --git a/vueJs/src/views/admin/data-dictionary/components/DataDictionaryTree.vue b/vueJs/src/views/admin/data-dictionary/components/DataDictionaryTree.vue
index 69bd7a771..eff72b3e7 100644
--- a/vueJs/src/views/admin/data-dictionary/components/DataDictionaryTree.vue
+++ b/vueJs/src/views/admin/data-dictionary/components/DataDictionaryTree.vue
@@ -49,7 +49,8 @@
 import { checkPermission } from '@/utils/permission'
 import { generateTree } from '@/utils/index'
 
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Mixins, Vue } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import DataDictionaryService, { Data } from '@/api/data-dictionary'
 
 import CreateOrUpdateDataDialog from './CreateOrUpdateDataDialog.vue'
@@ -70,7 +71,7 @@ const $contextmenu = Vue.prototype.$contextmenu
     }
   }
 })
-export default class DataDictionaryTree extends Vue {
+export default class DataDictionaryTree extends Mixins(LocalizationMiXin) {
   private showDataDialog = false
   private isEditData = false
   private editDataId = ''
@@ -95,7 +96,7 @@ export default class DataDictionaryTree extends Vue {
     $contextmenu({
       items: [
         {
-          label: this.$t('AppPlatform.Data:Edit'),
+          label: this.l('AppPlatform.Data:Edit'),
           icon: 'el-icon-edit',
           disabled: !checkPermission(['Platform.DataDictionary.Update']),
           onClick: () => {
@@ -103,7 +104,7 @@ export default class DataDictionaryTree extends Vue {
           }
         },
         {
-          label: this.$t('AppPlatform.Data:AddNew'),
+          label: this.l('AppPlatform.Data:AddNew'),
           icon: 'ivu-icon ivu-icon-md-add',
           disabled: !checkPermission(['Platform.DataDictionary.Create']),
           onClick: () => {
@@ -111,7 +112,7 @@ export default class DataDictionaryTree extends Vue {
           }
         },
         {
-          label: this.$t('AppPlatform.Data:AppendItem'),
+          label: this.l('AppPlatform.Data:AppendItem'),
           disabled: !checkPermission(['Platform.DataDictionary.ManageItems']),
           onClick: () => {
             this.$emit('onDataChecked', data.id)
@@ -119,7 +120,7 @@ export default class DataDictionaryTree extends Vue {
           }
         },
         {
-          label: this.$t('AppPlatform.Data:Delete'),
+          label: this.l('AppPlatform.Data:Delete'),
           icon: 'el-icon-delete',
           disabled: !checkPermission(['Platform.DataDictionary.Delete']),
           onClick: () => {
@@ -182,10 +183,6 @@ export default class DataDictionaryTree extends Vue {
       this.$emit('onDataChecked', data.id)
     }
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/data-dictionary/components/DataItemTable.vue b/vueJs/src/views/admin/data-dictionary/components/DataItemTable.vue
index f08298083..356260b84 100644
--- a/vueJs/src/views/admin/data-dictionary/components/DataItemTable.vue
+++ b/vueJs/src/views/admin/data-dictionary/components/DataItemTable.vue
@@ -109,6 +109,7 @@
 
 <script lang="ts">
 import EventBusMiXin from '@/mixins/EventBusMiXin'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import Component, { mixins } from 'vue-class-component'
 import { Prop, Watch } from 'vue-property-decorator'
 
@@ -153,7 +154,7 @@ import CreateOrUpdateDataItemDialog from './CreateOrUpdateDataItemDialog.vue'
     checkPermission
   }
 })
-export default class extends mixins(EventBusMiXin) {
+export default class extends mixins(EventBusMiXin, LocalizationMiXin) {
   @Prop({ default: '' })
   private dataId!: string
 
@@ -207,8 +208,8 @@ export default class extends mixins(EventBusMiXin) {
   }
 
   private handleDeleteItem(row: any) {
-    this.$confirm(this.$t('AppPlatform.Data:WillDelete', { 0: row.displayName }).toString(),
-      this.$t('AppPlatform.AreYouSure').toString(), {
+    this.$confirm(this.l('AppPlatform.Data:WillDelete', { 0: row.displayName }),
+      this.l('AppPlatform.AreYouSure'), {
         callback: (action) => {
           if (action === 'confirm') {
             DataDictionaryService
diff --git a/vueJs/src/views/admin/identityServer/api-resources/components/ApiResourceCreateOrEditForm.vue b/vueJs/src/views/admin/identityServer/api-resources/components/ApiResourceCreateOrEditForm.vue
index 114a8ce34..506f908fe 100644
--- a/vueJs/src/views/admin/identityServer/api-resources/components/ApiResourceCreateOrEditForm.vue
+++ b/vueJs/src/views/admin/identityServer/api-resources/components/ApiResourceCreateOrEditForm.vue
@@ -165,7 +165,8 @@ import ApiResourceService, {
   ApiResourceUpdate,
   ApiResourceCreateOrUpdate
 } from '@/api/api-resources'
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import ClaimTypeApiService from '@/api/cliam-type'
 import IdentityServer4Service from '@/api/identity-server4'
 import { checkPermission } from '@/utils/permission'
@@ -198,7 +199,7 @@ import UserClaimEditForm from '../../components/UserClaimEditForm.vue'
     checkPermission
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -340,10 +341,6 @@ export default class extends Vue {
     const frmApiResource = this.$refs.formApiResource as any
     frmApiResource.resetFields()
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/identityServer/api-scopes/components/ApiScopeCreateOrEditForm.vue b/vueJs/src/views/admin/identityServer/api-scopes/components/ApiScopeCreateOrEditForm.vue
index 1829e1736..4f7299eb3 100644
--- a/vueJs/src/views/admin/identityServer/api-scopes/components/ApiScopeCreateOrEditForm.vue
+++ b/vueJs/src/views/admin/identityServer/api-scopes/components/ApiScopeCreateOrEditForm.vue
@@ -122,7 +122,8 @@ import ApiScopeService, {
   ApiScopeUpdate,
   ApiScopeCreateOrUpdate
 } from '@/api/api-scopes'
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import { checkPermission } from '@/utils/permission'
 import { dateFormat } from '@/utils/index'
 import PropertiesEditForm from '../../components/PropertiesEditForm.vue'
@@ -147,7 +148,7 @@ import UserClaimEditForm from '../../components/UserClaimEditForm.vue'
     checkPermission
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -249,10 +250,6 @@ export default class extends Vue {
     const formApiScope = this.$refs.formApiScope as any
     formApiScope.resetFields()
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/identityServer/client/components/ClientClaimEditForm.vue b/vueJs/src/views/admin/identityServer/client/components/ClientClaimEditForm.vue
index 23f96fd7f..abcf6331c 100644
--- a/vueJs/src/views/admin/identityServer/client/components/ClientClaimEditForm.vue
+++ b/vueJs/src/views/admin/identityServer/client/components/ClientClaimEditForm.vue
@@ -152,7 +152,8 @@
 import { dateFormat } from '@/utils/index'
 import ClaimTypeApiService, { IdentityClaimType, IdentityClaimValueType } from '@/api/cliam-type'
 import { Client, ClientClaim } from '@/api/clients'
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import { checkPermission } from '@/utils/permission'
 import { Form } from 'element-ui'
 
@@ -166,7 +167,7 @@ import { Form } from 'element-ui'
     event: 'change'
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: () => { return new Client() } })
   private client!: Client
 
@@ -273,10 +274,6 @@ export default class extends Vue {
       }
     })
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/identityServer/client/components/ClientCloneForm.vue b/vueJs/src/views/admin/identityServer/client/components/ClientCloneForm.vue
index 36f207207..290cece20 100644
--- a/vueJs/src/views/admin/identityServer/client/components/ClientCloneForm.vue
+++ b/vueJs/src/views/admin/identityServer/client/components/ClientCloneForm.vue
@@ -151,12 +151,13 @@
 
 <script lang="ts">
 import ClientService, { ClientClone } from '@/api/clients'
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 
 @Component({
   name: 'ClientCloneForm'
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -199,10 +200,6 @@ export default class extends Vue {
     const frmClient = this.$refs.formCloneClient as any
     frmClient.resetFields()
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/identityServer/client/components/ClientCreateForm.vue b/vueJs/src/views/admin/identityServer/client/components/ClientCreateForm.vue
index dc2c4c542..832339730 100644
--- a/vueJs/src/views/admin/identityServer/client/components/ClientCreateForm.vue
+++ b/vueJs/src/views/admin/identityServer/client/components/ClientCreateForm.vue
@@ -82,7 +82,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 
 import { Form } from 'element-ui'
 import GrantTypeEditForm from './GrantTypeEditForm.vue'
@@ -95,7 +96,7 @@ import ClientApiService, { ClientCreate } from '@/api/clients'
     GrantTypeEditForm
   }
 })
-export default class ClientCreateForm extends Vue {
+export default class ClientCreateForm extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -111,7 +112,7 @@ export default class ClientCreateForm extends Vue {
         ClientApiService
           .create(this.client)
           .then(() => {
-            this.$message.success(this.$t('global.successful').toString())
+            this.$message.success(this.l('global.successful'))
             this.onFormClosed(true)
           })
       }
diff --git a/vueJs/src/views/admin/identityServer/client/components/ClientEditForm.vue b/vueJs/src/views/admin/identityServer/client/components/ClientEditForm.vue
index 57924065e..10edca5ff 100644
--- a/vueJs/src/views/admin/identityServer/client/components/ClientEditForm.vue
+++ b/vueJs/src/views/admin/identityServer/client/components/ClientEditForm.vue
@@ -687,7 +687,8 @@
 <script lang="ts">
 import { checkPermission } from '@/utils/permission'
 
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import ClientApiService, {
   Client,
   ClientUpdate,
@@ -717,7 +718,7 @@ import PropertiesEditForm from '../../components/PropertiesEditForm.vue'
     checkPermission
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -873,10 +874,6 @@ export default class extends Vue {
     clientEditForm.resetFields()
     this.changeClient = false
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/identityServer/components/PropertiesEditForm.vue b/vueJs/src/views/admin/identityServer/components/PropertiesEditForm.vue
index 623b1ecdb..061b1e759 100644
--- a/vueJs/src/views/admin/identityServer/components/PropertiesEditForm.vue
+++ b/vueJs/src/views/admin/identityServer/components/PropertiesEditForm.vue
@@ -97,7 +97,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import { Property } from '@/api/identity-server4'
 import { Form } from 'element-ui'
 
@@ -108,7 +109,7 @@ import { Form } from 'element-ui'
     event: 'change'
   }
 })
-export default class PropertiesEditForm extends Vue {
+export default class PropertiesEditForm extends Mixins(LocalizationMiXin) {
   @Prop({ default: () => { return new Array<Property>() } })
   private properties!: Property[]
 
@@ -146,10 +147,6 @@ export default class PropertiesEditForm extends Vue {
   private onDelete(key: string) {
     this.$emit('change', this.properties.filter(prop => prop.key !== key))
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/identityServer/components/SecretEditForm.vue b/vueJs/src/views/admin/identityServer/components/SecretEditForm.vue
index 6a1874b17..091e82e6d 100644
--- a/vueJs/src/views/admin/identityServer/components/SecretEditForm.vue
+++ b/vueJs/src/views/admin/identityServer/components/SecretEditForm.vue
@@ -214,10 +214,6 @@ export default class SecretEditForm extends Vue {
     console.log(type, value)
     this.$emit('change', this.secrets.filter(secret => secret.value !== value || secret.type !== type))
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/identityServer/identity-resources/components/IdentityResourceCreateOrEditForm.vue b/vueJs/src/views/admin/identityServer/identity-resources/components/IdentityResourceCreateOrEditForm.vue
index 1df4088fc..990c9a830 100644
--- a/vueJs/src/views/admin/identityServer/identity-resources/components/IdentityResourceCreateOrEditForm.vue
+++ b/vueJs/src/views/admin/identityServer/identity-resources/components/IdentityResourceCreateOrEditForm.vue
@@ -135,7 +135,8 @@
 import { checkPermission } from '@/utils/permission'
 
 import { Form } from 'element-ui'
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 
 import PropertiesEditForm from '../../components/PropertiesEditForm.vue'
 import UserClaimEditForm from '../../components/UserClaimEditForm.vue'
@@ -154,7 +155,7 @@ import IdentityResourceService, {
     checkPermission
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: ConstrainBoolean
 
@@ -246,10 +247,6 @@ export default class extends Vue {
     const frmIdentityResource = this.$refs.formIdentityResource as Form
     frmIdentityResource.resetFields()
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/identityServer/persisted-grants/components/PersistedGrantProfile.vue b/vueJs/src/views/admin/identityServer/persisted-grants/components/PersistedGrantProfile.vue
index f16684fdd..646162f18 100644
--- a/vueJs/src/views/admin/identityServer/persisted-grants/components/PersistedGrantProfile.vue
+++ b/vueJs/src/views/admin/identityServer/persisted-grants/components/PersistedGrantProfile.vue
@@ -89,8 +89,7 @@
 
 <script lang="ts">
 import { PersistedGrant } from '@/api/grants'
-import { Component, Prop, Watch } from 'vue-property-decorator'
-import { mixins } from 'vue-class-component'
+import { Component, Prop, Watch, Mixins } from 'vue-property-decorator'
 import { dateFormat } from '@/utils/index'
 import HttpProxyMiXin from '@/mixins/HttpProxyMiXin'
 import JsonEditor from '@/components/JsonEditor/index.vue'
@@ -110,7 +109,7 @@ import JsonEditor from '@/components/JsonEditor/index.vue'
     }
   }
 })
-export default class extends mixins(HttpProxyMiXin) {
+export default class extends Mixins(HttpProxyMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
diff --git a/vueJs/src/views/admin/organization-unit/components/OrganizationUnitTree.vue b/vueJs/src/views/admin/organization-unit/components/OrganizationUnitTree.vue
index 031c7b1bc..9d8319361 100644
--- a/vueJs/src/views/admin/organization-unit/components/OrganizationUnitTree.vue
+++ b/vueJs/src/views/admin/organization-unit/components/OrganizationUnitTree.vue
@@ -65,7 +65,8 @@
 <script lang="ts">
 import { checkPermission } from '@/utils/permission'
 
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Mixins, Vue } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import OrganizationUnitService, { OrganizationUnit } from '@/api/organizationunit'
 
 import { Tree } from 'element-ui'
@@ -114,7 +115,7 @@ class OrganizationUnitItem {
     CreateOrUpdateOrganizationUnit
   }
 })
-export default class OrganizationUnitTree extends Vue {
+export default class OrganizationUnitTree extends Mixins(LocalizationMiXin) {
   private showUserReferenceDialog = false
   private showRoleReferenceDialog = false
 
@@ -279,10 +280,6 @@ export default class OrganizationUnitTree extends Vue {
       this.$emit('onOrganizationUnitChecked', data.id)
     }
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue b/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue
index 7a13611db..4b5286af4 100644
--- a/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue
+++ b/vueJs/src/views/admin/organization-unit/components/RoleOrganizationUint.vue
@@ -86,8 +86,7 @@ import { checkPermission } from '@/utils/permission'
 
 import EventBusMiXin from '@/mixins/EventBusMiXin'
 import DataListMiXin from '@/mixins/DataListMiXin'
-import { Prop, Watch } from 'vue-property-decorator'
-import Component, { mixins } from 'vue-class-component'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import Pagination from '@/components/Pagination/index.vue'
 
 import RoleApiService, { RoleGetPagedDto } from '@/api/roles'
@@ -102,7 +101,7 @@ import OrganizationUnitService from '@/api/organizationunit'
     checkPermission
   }
 })
-export default class extends mixins(DataListMiXin, EventBusMiXin) {
+export default class extends Mixins(DataListMiXin, EventBusMiXin) {
   @Prop({ default: '' })
   private organizationUnitId!: string
 
@@ -133,8 +132,8 @@ export default class extends mixins(DataListMiXin, EventBusMiXin) {
   }
 
   private handleDeleteRole(row: any) {
-    this.$confirm(this.$t('AbpIdentity.OrganizationUnit:AreYouSureRemoveRole', { 0: row.name }).toString(),
-      this.$t('AbpIdentity.AreYouSure').toString(), {
+    this.$confirm(this.l('AbpIdentity.OrganizationUnit:AreYouSureRemoveRole', { 0: row.name }),
+      this.l('AbpIdentity.AreYouSure'), {
         callback: (action) => {
           if (action === 'confirm') {
             RoleApiService
diff --git a/vueJs/src/views/admin/organization-unit/components/RoleReference.vue b/vueJs/src/views/admin/organization-unit/components/RoleReference.vue
index ae1d28615..54c32e2cb 100644
--- a/vueJs/src/views/admin/organization-unit/components/RoleReference.vue
+++ b/vueJs/src/views/admin/organization-unit/components/RoleReference.vue
@@ -110,8 +110,7 @@
 <script lang="ts">
 import EventBusMiXin from '@/mixins/EventBusMiXin'
 import DataListMiXin from '@/mixins/DataListMiXin'
-import Component, { mixins } from 'vue-class-component'
-import { Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import Pagination from '@/components/Pagination/index.vue'
 
 import OrganizationUnitService, { OrganizationUnitAddRole } from '@/api/organizationunit'
@@ -132,7 +131,7 @@ import { Table } from 'element-ui'
     }
   }
 })
-export default class extends mixins(DataListMiXin, EventBusMiXin) {
+export default class extends Mixins(DataListMiXin, EventBusMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -181,8 +180,8 @@ export default class extends mixins(DataListMiXin, EventBusMiXin) {
 
   private onFormClosed() {
     if (this.ouAddRole.roleIds.length > 0) {
-      this.$confirm(this.$t('AbpIdentity.AreYouSureYouWantToCancelEditingWarningMessage').toString(),
-        this.$t('AbpIdentity.AreYouSure').toString(), {
+      this.$confirm(this.l('AbpIdentity.AreYouSureYouWantToCancelEditingWarningMessage'),
+        this.l('AbpIdentity.AreYouSure'), {
           callback: (action) => {
             if (action === 'confirm') {
               this.resetFields()
diff --git a/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue b/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue
index 81bebcb9a..0a916fff8 100644
--- a/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue
+++ b/vueJs/src/views/admin/organization-unit/components/UserOrganizationUint.vue
@@ -102,8 +102,7 @@
 <script lang="ts">
 import EventBusMiXin from '@/mixins/EventBusMiXin'
 import DataListMiXin from '@/mixins/DataListMiXin'
-import Component, { mixins } from 'vue-class-component'
-import { Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import Pagination from '@/components/Pagination/index.vue'
 
 import { checkPermission } from '@/utils/permission'
@@ -127,7 +126,7 @@ import OrganizationUnitService from '@/api/organizationunit'
     checkPermission
   }
 })
-export default class extends mixins(DataListMiXin, EventBusMiXin) {
+export default class extends Mixins(DataListMiXin, EventBusMiXin) {
   @Prop({ default: '' })
   private organizationUnitId!: string
 
@@ -158,8 +157,8 @@ export default class extends mixins(DataListMiXin, EventBusMiXin) {
   }
 
   private handleDeleteUser(row: any) {
-    this.$confirm(this.$t('AbpIdentity.OrganizationUnit:AreYouSureRemoveUser', { 0: row.userName }).toString(),
-      this.$t('AbpIdentity.AreYouSure').toString(), {
+    this.$confirm(this.l('AbpIdentity.OrganizationUnit:AreYouSureRemoveUser', { 0: row.userName }),
+      this.l('AbpIdentity.AreYouSure'), {
         callback: (action) => {
           if (action === 'confirm') {
             UserApiService
diff --git a/vueJs/src/views/admin/organization-unit/components/UserReference.vue b/vueJs/src/views/admin/organization-unit/components/UserReference.vue
index 39f755391..3d21226b0 100644
--- a/vueJs/src/views/admin/organization-unit/components/UserReference.vue
+++ b/vueJs/src/views/admin/organization-unit/components/UserReference.vue
@@ -151,8 +151,7 @@
 <script lang="ts">
 import EventBusMiXin from '@/mixins/EventBusMiXin'
 import DataListMiXin from '@/mixins/DataListMiXin'
-import Component, { mixins } from 'vue-class-component'
-import { Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import Pagination from '@/components/Pagination/index.vue'
 
 import OrganizationUnitService, { OrganizationUnitAddUser } from '@/api/organizationunit'
@@ -173,7 +172,7 @@ import { Form, Table } from 'element-ui'
     }
   }
 })
-export default class extends mixins(DataListMiXin, EventBusMiXin) {
+export default class extends Mixins(DataListMiXin, EventBusMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -222,8 +221,8 @@ export default class extends mixins(DataListMiXin, EventBusMiXin) {
 
   private onFormClosed() {
     if (this.ouAddUser.userIds.length > 0) {
-      this.$confirm(this.$t('AbpIdentity.AreYouSureYouWantToCancelEditingWarningMessage').toString(),
-        this.$t('AbpIdentity.AreYouSure').toString(), {
+      this.$confirm(this.l('AbpIdentity.AreYouSureYouWantToCancelEditingWarningMessage'),
+        this.l('AbpIdentity.AreYouSure'), {
           callback: (action) => {
             if (action === 'confirm') {
               this.resetFields()
diff --git a/vueJs/src/views/admin/roles/components/ManageRoleMenuDialog.vue b/vueJs/src/views/admin/roles/components/ManageRoleMenuDialog.vue
index dacff57a5..f1baad718 100644
--- a/vueJs/src/views/admin/roles/components/ManageRoleMenuDialog.vue
+++ b/vueJs/src/views/admin/roles/components/ManageRoleMenuDialog.vue
@@ -72,7 +72,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import MenuService, { Menu, GetAllMenu, RoleMenu } from '@/api/menu'
 import { generateTree } from '@/utils'
 import { PlatformType, PlatformTypes } from '@/api/layout'
@@ -81,7 +82,7 @@ import { Tree } from 'element-ui'
 @Component({
   name: 'ManageRoleMenuDialog'
 })
-export default class ManageRoleMenuDialog extends Vue {
+export default class ManageRoleMenuDialog extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -143,7 +144,7 @@ export default class ManageRoleMenuDialog extends Vue {
     MenuService
       .setRoleMenu(roleMenu)
       .then(() => {
-        this.$message.success(this.$t('successful').toString())
+        this.$message.success(this.l('successful'))
         this.onFormClosed()
       })
   }
diff --git a/vueJs/src/views/admin/roles/components/RoleClaimCreateOrUpdateForm.vue b/vueJs/src/views/admin/roles/components/RoleClaimCreateOrUpdateForm.vue
index f25108f8a..158708964 100644
--- a/vueJs/src/views/admin/roles/components/RoleClaimCreateOrUpdateForm.vue
+++ b/vueJs/src/views/admin/roles/components/RoleClaimCreateOrUpdateForm.vue
@@ -124,7 +124,8 @@
 <script lang="ts">
 import { dateFormat } from '@/utils/index'
 import { checkPermission } from '@/utils/permission'
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import RoleApiService, { RoleClaim, RoleClaimCreateOrUpdate, RoleClaimDelete } from '@/api/roles'
 import ClaimTypeApiService, { IdentityClaimType, IdentityClaimValueType } from '@/api/cliam-type'
 import { Form } from 'element-ui'
@@ -135,7 +136,7 @@ import { Form } from 'element-ui'
     checkPermission
   }
 })
-export default class UserClaimCreateOrUpdateForm extends Vue {
+export default class UserClaimCreateOrUpdateForm extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private roleId!: string
 
@@ -284,9 +285,5 @@ export default class UserClaimCreateOrUpdateForm extends Vue {
     roleClaimForm.resetFields()
     this.$emit('closed', changed)
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
diff --git a/vueJs/src/views/admin/roles/components/RoleCreateForm.vue b/vueJs/src/views/admin/roles/components/RoleCreateForm.vue
index f19e471d3..18ea5c265 100644
--- a/vueJs/src/views/admin/roles/components/RoleCreateForm.vue
+++ b/vueJs/src/views/admin/roles/components/RoleCreateForm.vue
@@ -62,13 +62,14 @@
 
 <script lang="ts">
 import { Form } from 'element-ui'
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import RoleApiService, { CreateRoleDto } from '@/api/roles'
 
 @Component({
   name: 'RoleCreateForm'
 })
-export default class RoleCreateForm extends Vue {
+export default class RoleCreateForm extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -85,7 +86,7 @@ export default class RoleCreateForm extends Vue {
     roleCreateForm.validate(valid => {
       if (valid) {
         RoleApiService.createRole(this.createRole).then(res => {
-          const message = this.$t('roles.createRoleSuccess', { name: res.name }).toString()
+          const message = this.l('roles.createRoleSuccess', { name: res.name })
           this.$message.success(message)
           this.onFormClosed(true)
         })
diff --git a/vueJs/src/views/admin/roles/components/RoleEditForm.vue b/vueJs/src/views/admin/roles/components/RoleEditForm.vue
index 293468d3b..ce429e096 100644
--- a/vueJs/src/views/admin/roles/components/RoleEditForm.vue
+++ b/vueJs/src/views/admin/roles/components/RoleEditForm.vue
@@ -55,7 +55,8 @@
 
 <script lang="ts">
 import { checkPermission } from '@/utils/permission'
-import { Component, Prop, Watch, Vue } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import RoleService, { RoleDto, UpdateRoleDto } from '@/api/roles'
 import { Form } from 'element-ui'
 
@@ -65,7 +66,7 @@ import { Form } from 'element-ui'
     checkPermission
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private roleId!: string
 
@@ -109,10 +110,6 @@ export default class extends Vue {
     roleEditForm.resetFields()
     this.$emit('closed', changed)
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/roles/index.vue b/vueJs/src/views/admin/roles/index.vue
index e4e6c886d..0eee8411d 100644
--- a/vueJs/src/views/admin/roles/index.vue
+++ b/vueJs/src/views/admin/roles/index.vue
@@ -312,19 +312,19 @@ export default class extends mixins(DataListMiXin) {
     setDefaultRoleDto.isDefault = setDefault
     setDefaultRoleDto.concurrencyStamp = role.concurrencyStamp
     RoleService.updateRole(role.id, setDefaultRoleDto).then(role => {
-      this.$message.success(this.$t('roles.roleHasBeenSetDefault', { name: role.name }).toString())
+      this.$message.success(this.l('roles.roleHasBeenSetDefault', { name: role.name }))
       this.refreshPagedData()
     })
   }
 
   /** 删除角色 */
   private handleDeleteRole(role: RoleDto) {
-    this.$confirm(this.$t('roles.delNotRecoverData').toString(),
-      this.$t('roles.whetherDeleteRole', { name: role.name }).toString(), {
+    this.$confirm(this.l('roles.delNotRecoverData'),
+      this.l('roles.whetherDeleteRole', { name: role.name }), {
         callback: (action) => {
           if (action === 'confirm') {
             RoleService.deleteRole(role.id).then(() => {
-              this.$message.success(this.$t('roles.roleHasBeenDeleted', { name: role.name }).toString())
+              this.$message.success(this.l('roles.roleHasBeenDeleted', { name: role.name }))
               this.refreshPagedData()
             })
           }
diff --git a/vueJs/src/views/admin/settings/components/GlobalSettingEditForm.vue b/vueJs/src/views/admin/settings/components/GlobalSettingEditForm.vue
index 70071c6ad..be6be3bff 100644
--- a/vueJs/src/views/admin/settings/components/GlobalSettingEditForm.vue
+++ b/vueJs/src/views/admin/settings/components/GlobalSettingEditForm.vue
@@ -6,7 +6,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Mixins } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import SettingEditForm from './SettingEditForm.vue'
 import SettingService, { SettingGroup, SettingsUpdate } from '@/api/settings'
 
@@ -16,7 +17,7 @@ import SettingService, { SettingGroup, SettingsUpdate } from '@/api/settings'
     SettingEditForm
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   private settingGroups = new Array<SettingGroup>()
 
   mounted() {
@@ -29,7 +30,7 @@ export default class extends Vue {
 
   private onSettingSaving(settings: SettingsUpdate) {
     SettingService.setGlobalSettings(settings).then(() => {
-      this.$message.success(this.$t('AbpSettingManagement.SuccessfullySaved').toString())
+      this.$message.success(this.l('AbpSettingManagement.SuccessfullySaved'))
     })
   }
 }
diff --git a/vueJs/src/views/admin/settings/components/TenantSettingEditForm.vue b/vueJs/src/views/admin/settings/components/TenantSettingEditForm.vue
index c848f86b1..3ef2af858 100644
--- a/vueJs/src/views/admin/settings/components/TenantSettingEditForm.vue
+++ b/vueJs/src/views/admin/settings/components/TenantSettingEditForm.vue
@@ -6,7 +6,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Mixins } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import SettingEditForm from './SettingEditForm.vue'
 import SettingService, { SettingGroup, SettingsUpdate } from '@/api/settings'
 
@@ -16,7 +17,7 @@ import SettingService, { SettingGroup, SettingsUpdate } from '@/api/settings'
     SettingEditForm
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   private settingGroups = new Array<SettingGroup>()
 
   mounted() {
@@ -29,7 +30,7 @@ export default class extends Vue {
 
   private onSettingSaving(settings: SettingsUpdate) {
     SettingService.setCurrentTenantSettings(settings).then(() => {
-      this.$message.success(this.$t('AbpSettingManagement.SuccessfullySaved').toString())
+      this.$message.success(this.l('AbpSettingManagement.SuccessfullySaved'))
     })
   }
 }
diff --git a/vueJs/src/views/admin/tenants/components/TenantConnectionEditForm.vue b/vueJs/src/views/admin/tenants/components/TenantConnectionEditForm.vue
index 1971bd2f7..4c4ee77cf 100644
--- a/vueJs/src/views/admin/tenants/components/TenantConnectionEditForm.vue
+++ b/vueJs/src/views/admin/tenants/components/TenantConnectionEditForm.vue
@@ -105,7 +105,8 @@
 
 <script lang="ts">
 import TenantService, { TenantConnectionString } from '@/api/tenant-management'
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import { checkPermission } from '@/utils/permission'
 
 @Component({
@@ -114,7 +115,7 @@ import { checkPermission } from '@/utils/permission'
     checkPermission
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private tenantId!: string
 
@@ -200,10 +201,6 @@ export default class extends Vue {
   public resetFields() {
     this.tenantConnection = TenantConnectionString.empty()
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/tenants/components/TenantCreateOrEditForm.vue b/vueJs/src/views/admin/tenants/components/TenantCreateOrEditForm.vue
index 3624eb0f3..64bc9f055 100644
--- a/vueJs/src/views/admin/tenants/components/TenantCreateOrEditForm.vue
+++ b/vueJs/src/views/admin/tenants/components/TenantCreateOrEditForm.vue
@@ -70,12 +70,13 @@
 
 <script lang="ts">
 import TenantService, { TenantCreateOrEdit } from '@/api/tenant-management'
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 
 @Component({
   name: 'TenantCreateOrEditForm'
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private tenantId!: string
 
@@ -165,9 +166,5 @@ export default class extends Vue {
     const frmTenant = this.$refs.formTenant as any
     frmTenant.resetFields()
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
diff --git a/vueJs/src/views/admin/users/components/ManageUserMenuDialog.vue b/vueJs/src/views/admin/users/components/ManageUserMenuDialog.vue
index d49a7aec4..ba402e268 100644
--- a/vueJs/src/views/admin/users/components/ManageUserMenuDialog.vue
+++ b/vueJs/src/views/admin/users/components/ManageUserMenuDialog.vue
@@ -72,7 +72,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import MenuService, { Menu, GetAllMenu, UserMenu } from '@/api/menu'
 import { generateTree } from '@/utils'
 import { PlatformType, PlatformTypes } from '@/api/layout'
@@ -81,7 +82,7 @@ import { Tree } from 'element-ui'
 @Component({
   name: 'ManageUserMenuDialog'
 })
-export default class ManageUserMenuDialog extends Vue {
+export default class ManageUserMenuDialog extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -100,9 +101,9 @@ export default class ManageUserMenuDialog extends Vue {
 
   get confirmButtonTitle() {
     if (this.confirmButtonBusy) {
-      return this.$t('AbpUi.SavingWithThreeDot')
+      return this.l('AbpUi.SavingWithThreeDot')
     }
-    return this.$t('AbpUi.Save')
+    return this.l('AbpUi.Save')
   }
 
   @Watch('showDialog', { immediate: true })
@@ -143,7 +144,7 @@ export default class ManageUserMenuDialog extends Vue {
     MenuService
       .setUserMenu(userMenu)
       .then(() => {
-        this.$message.success(this.$t('successful').toString())
+        this.$message.success(this.l('successful'))
         this.onFormClosed()
       })
   }
diff --git a/vueJs/src/views/admin/users/components/UserClaimCreateOrUpdateForm.vue b/vueJs/src/views/admin/users/components/UserClaimCreateOrUpdateForm.vue
index 70cbf1cc6..50ce89a2e 100644
--- a/vueJs/src/views/admin/users/components/UserClaimCreateOrUpdateForm.vue
+++ b/vueJs/src/views/admin/users/components/UserClaimCreateOrUpdateForm.vue
@@ -124,7 +124,8 @@
 <script lang="ts">
 import { dateFormat } from '@/utils/index'
 import { checkPermission } from '@/utils/permission'
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import UserService, { UserClaim, UserClaimCreateOrUpdate, UserClaimDelete } from '@/api/users'
 import ClaimTypeApiService, { IdentityClaimType, IdentityClaimValueType } from '@/api/cliam-type'
 import { Form } from 'element-ui'
@@ -135,7 +136,7 @@ import { Form } from 'element-ui'
     checkPermission
   }
 })
-export default class UserClaimCreateOrUpdateForm extends Vue {
+export default class UserClaimCreateOrUpdateForm extends Mixins(LocalizationMiXin) {
   @Prop({ default: '' })
   private userId!: string
 
@@ -271,7 +272,7 @@ export default class UserClaimCreateOrUpdateForm extends Vue {
     userClaimForm.validate(valid => {
       if (valid) {
         UserService.addUserClaim(this.userId, this.editUserClaim).then(() => {
-          this.$message.success(this.$t('global.successful').toString())
+          this.$message.success(this.l('global.successful'))
           userClaimForm.resetFields()
           this.handleGetUserClaims()
         })
@@ -284,9 +285,5 @@ export default class UserClaimCreateOrUpdateForm extends Vue {
     userClaimForm.resetFields()
     this.$emit('closed', changed)
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
diff --git a/vueJs/src/views/admin/users/components/UserCreateOrUpdateForm.vue b/vueJs/src/views/admin/users/components/UserCreateOrUpdateForm.vue
index 836c0abcb..048225b54 100644
--- a/vueJs/src/views/admin/users/components/UserCreateOrUpdateForm.vue
+++ b/vueJs/src/views/admin/users/components/UserCreateOrUpdateForm.vue
@@ -130,11 +130,11 @@
 </template>
 
 <script lang="ts">
-import Component, { mixins } from 'vue-class-component'
-import { Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
 import { checkPermission } from '@/utils/permission'
 import { AbpModule } from '@/store/modules/abp'
 import EventBusMiXin from '@/mixins/EventBusMiXin'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 
 import RoleService from '@/api/roles'
 import { IRoleData } from '@/api/types'
@@ -146,7 +146,7 @@ import UserApiService, { UserCreate, UserUpdate, User, UserCreateOrUpdate } from
     checkPermission
   }
 })
-export default class extends mixins(EventBusMiXin) {
+export default class extends Mixins(EventBusMiXin, LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -300,10 +300,6 @@ export default class extends mixins(EventBusMiXin) {
     const editUserForm = this.$refs.editUserForm as any
     editUserForm.resetFields()
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/admin/users/index.vue b/vueJs/src/views/admin/users/index.vue
index 263ab8610..5d5d48f74 100644
--- a/vueJs/src/views/admin/users/index.vue
+++ b/vueJs/src/views/admin/users/index.vue
@@ -342,12 +342,12 @@ export default class extends mixins(DataListMiXin, EventBusMiXin) {
 
   /** 响应删除用户事件 */
   private handleDeleteUser(row: any) {
-    this.$confirm(this.$t('AbpIdentity.UserDeletionConfirmationMessage', { 0: row.userName }).toString(),
-      this.$t('AbpIdentity.AreYouSure').toString(), {
+    this.$confirm(this.l('AbpIdentity.UserDeletionConfirmationMessage', { 0: row.userName }),
+      this.l('AbpIdentity.AreYouSure'), {
         callback: (action) => {
           if (action === 'confirm') {
             UserApiService.deleteUser(row.id).then(() => {
-              this.$message.success(this.$t('global.successful').toString())
+              this.$message.success(this.l('global.successful'))
               this.refreshPagedData()
             })
           }
diff --git a/vueJs/src/views/container/layouts/components/CreateOrUpdateLayoutDialog.vue b/vueJs/src/views/container/layouts/components/CreateOrUpdateLayoutDialog.vue
index 016de8522..3cdb29dd2 100644
--- a/vueJs/src/views/container/layouts/components/CreateOrUpdateLayoutDialog.vue
+++ b/vueJs/src/views/container/layouts/components/CreateOrUpdateLayoutDialog.vue
@@ -139,7 +139,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 
 import { Form } from 'element-ui'
 import DataService, { Data } from '@/api/data-dictionary'
@@ -154,7 +155,7 @@ import LayoutService, {
 @Component({
   name: 'CreateOrUpdateLayoutDialog'
 })
-export default class CreateOrUpdateLayoutDialog extends Vue {
+export default class CreateOrUpdateLayoutDialog extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -175,9 +176,9 @@ export default class CreateOrUpdateLayoutDialog extends Vue {
 
   get title() {
     if (this.isEdit) {
-      return this.$t('AppPlatform.Layout:EditByName', { 0: this.layout.displayName })
+      return this.l('AppPlatform.Layout:EditByName', { 0: this.layout.displayName })
     }
-    return this.$t('AppPlatform.Layout:AddNew')
+    return this.l('AppPlatform.Layout:AddNew')
   }
 
   @Watch('showDialog')
@@ -221,12 +222,12 @@ export default class CreateOrUpdateLayoutDialog extends Vue {
               .update(this.layoutId, update)
               .then(res => {
                 this.layout = res
-                this.$message.success(this.$t('successful').toString())
+                this.$message.success(this.l('successful'))
                 this.onFormClosed(true)
               })
           } else {
             if (!this.dataId) {
-              this.$message.warning(this.$t('pleaseSelectBy', { key: this.$t('AppPlatform.DisplayName:DataDictionary') }).toString())
+              this.$message.warning(this.l('pleaseSelectBy', { key: this.l('AppPlatform.DisplayName:DataDictionary') }))
               return
             }
             const create = new LayoutCreate()
@@ -236,7 +237,7 @@ export default class CreateOrUpdateLayoutDialog extends Vue {
               .create(create)
               .then(res => {
                 this.layout = res
-                this.$message.success(this.$t('successful').toString())
+                this.$message.success(this.l('successful'))
                 this.onFormClosed(true)
               })
           }
diff --git a/vueJs/src/views/container/layouts/index.vue b/vueJs/src/views/container/layouts/index.vue
index 593d1df51..1dbc5c38f 100644
--- a/vueJs/src/views/container/layouts/index.vue
+++ b/vueJs/src/views/container/layouts/index.vue
@@ -157,7 +157,7 @@ import { dateFormat, abpPagerFormat } from '@/utils'
 import { checkPermission } from '@/utils/permission'
 import LayoutService, { Layout, GetLayoutByPaged, PlatformTypes } from '@/api/layout'
 import DataListMiXin from '@/mixins/DataListMiXin'
-import Component, { mixins } from 'vue-class-component'
+import { Component, Mixins } from 'vue-property-decorator'
 import Pagination from '@/components/Pagination/index.vue'
 import CreateOrUpdateLayoutDialog from './components/CreateOrUpdateLayoutDialog.vue'
 
@@ -176,7 +176,7 @@ import CreateOrUpdateLayoutDialog from './components/CreateOrUpdateLayoutDialog.
     checkPermission
   }
 })
-export default class extends mixins(DataListMiXin) {
+export default class extends Mixins(DataListMiXin) {
   public dataFilter = new GetLayoutByPaged()
   private showEditDialog = false
   private editLayoutId = ''
diff --git a/vueJs/src/views/container/menus/components/CreateOrUpdateMenuDialog.vue b/vueJs/src/views/container/menus/components/CreateOrUpdateMenuDialog.vue
index fea5c5eed..9eabf0638 100644
--- a/vueJs/src/views/container/menus/components/CreateOrUpdateMenuDialog.vue
+++ b/vueJs/src/views/container/menus/components/CreateOrUpdateMenuDialog.vue
@@ -177,7 +177,8 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 
 import { Form } from 'element-ui'
 import MenuService, {
@@ -197,7 +198,7 @@ import MenuMetaInput from './MenuMetaInput.vue'
     MenuMetaInput
   }
 })
-export default class CreateOrUpdateMenuDialog extends Vue {
+export default class CreateOrUpdateMenuDialog extends Mixins(LocalizationMiXin) {
   @Prop({ default: false })
   private showDialog!: boolean
 
@@ -216,9 +217,9 @@ export default class CreateOrUpdateMenuDialog extends Vue {
 
   get title() {
     if (this.isEdit) {
-      return this.$t('AppPlatform.Menu:EditByName', { 0: this.menu.displayName })
+      return this.l('AppPlatform.Menu:EditByName', { 0: this.menu.displayName })
     }
-    return this.$t('AppPlatform.Menu:AddNew')
+    return this.l('AppPlatform.Menu:AddNew')
   }
 
   get dataItems() {
@@ -303,12 +304,12 @@ export default class CreateOrUpdateMenuDialog extends Vue {
               .update(this.menuId, updateMenu)
               .then(res => {
                 this.menu = res
-                this.$message.success(this.$t('successful').toString())
+                this.$message.success(this.l('successful'))
                 this.onFormClosed(true)
               })
           } else {
             if (!this.layoutId) {
-              this.$message.warning(this.$t('pleaseSelectBy', { key: this.$t('AppPlatform.DisplayName:Layout') }).toString())
+              this.$message.warning(this.l('pleaseSelectBy', { key: this.l('AppPlatform.DisplayName:Layout') }))
               return
             }
             const createMenu = new MenuCreate()
@@ -319,7 +320,7 @@ export default class CreateOrUpdateMenuDialog extends Vue {
               .create(createMenu)
               .then(res => {
                 this.menu = res
-                this.$message.success(this.$t('successful').toString())
+                this.$message.success(this.l('successful'))
                 this.onFormClosed(true)
               })
           }
diff --git a/vueJs/src/views/file-management/components/FileDownloadForm.vue b/vueJs/src/views/file-management/components/FileDownloadForm.vue
deleted file mode 100644
index e613afdb2..000000000
--- a/vueJs/src/views/file-management/components/FileDownloadForm.vue
+++ /dev/null
@@ -1,179 +0,0 @@
-<template>
-  <el-dialog
-    v-el-draggable-dialog
-    width="800px"
-    :visible="showDialog"
-    :title="$t('fileSystem.downloadTask')"
-    @close="onFormClosed"
-  >
-    <el-table
-      :data="files"
-      stripe
-      style="width: 100%"
-    >
-      <el-table-column
-        prop="name"
-        :label="$t('fileSystem.name')"
-        width="180"
-      />
-      <el-table-column
-        prop="size"
-        :label="$t('fileSystem.size')"
-        width="180"
-      />
-      <el-table-column
-        :label="$t('fileSystem.progress')"
-        width="180"
-      >
-        <template slot-scope="scope">
-          <el-progress
-            :text-inside="true"
-            :stroke-width="26"
-            :status="downloadStatus(scope.row)"
-            :percentage="downloadProgress(scope.row)"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('global.operaActions')"
-        align="center"
-        width="250px"
-      >
-        <template slot-scope="{row}">
-          <el-button
-            size="mini"
-            type="success"
-            icon="el-icon-caret-right"
-            :disabled="row.downloading"
-            @click="handleDownload(row)"
-          />
-          <el-button
-            size="mini"
-            type="info"
-            :disabled="row.pause"
-            @click="handlePause(row)"
-          >
-            <svg-icon name="pause" />
-          </el-button>
-          <el-button
-            size="mini"
-            type="danger"
-            icon="el-icon-delete"
-            @click="handleRemove(row)"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-  </el-dialog>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator'
-import FileSystemService from '@/api/filemanagement'
-
-export class FileInfo {
-  name!: string
-  path!: string
-  size!: number
-  progress!: number
-  pause = true
-  blobs = new Array<BlobPart>()
-  type!: string
-  downloading!: boolean
-}
-
-@Component({
-  name: 'FileDownloadForm'
-})
-export default class FileDownloadForm extends Vue {
-  @Prop({ default: false })
-  private showDialog!: boolean
-
-  @Prop({ default: '' })
-  private files!: FileInfo[]
-
-  get downloadProgress() {
-    return (fileInfo: FileInfo) => {
-      return Math.round(fileInfo.progress / fileInfo.size * 10000) / 100
-    }
-  }
-
-  get downloadStatus() {
-    return (fileInfo: FileInfo) => {
-      const progress = Math.round(fileInfo.progress / fileInfo.size * 10000) / 100
-      if (progress >= 50 && progress < 100) {
-        return 'warning'
-      }
-      if (progress >= 100) {
-        return 'success'
-      }
-    }
-  }
-
-  private handlePause(fileInfo: FileInfo) {
-    fileInfo.pause = true
-    fileInfo.downloading = false
-    this.$emit('onFilePaused', fileInfo)
-  }
-
-  private handleRemove(fileInfo: FileInfo) {
-    fileInfo.pause = true
-    fileInfo.downloading = false
-    fileInfo.blobs.length = 0
-    this.$emit('onFileRemoved', fileInfo)
-  }
-
-  private handleDownload(fileInfo: FileInfo) {
-    if (!fileInfo.downloading) {
-      fileInfo.pause = false
-      fileInfo.downloading = true
-      if (this.downloadProgress(fileInfo) >= 100) {
-        this.downloadBlob(fileInfo)
-      } else {
-        this.downlodFile(fileInfo)
-      }
-    }
-  }
-
-  private downlodFile(fileInfo: FileInfo) {
-    if (fileInfo.pause) {
-      return
-    }
-    FileSystemService
-      .downlodFle(fileInfo.name, fileInfo.path, fileInfo.progress)
-      .then((res: any) => {
-        fileInfo.type = res.headers['content-type']
-        // 获取当前下载字节大小
-        const downloadByte = res.data.size
-        // 当前下载分块入栈
-        fileInfo.blobs.push(res.data)
-        fileInfo.progress += downloadByte
-        if (fileInfo.size > fileInfo.progress) {
-          this.downlodFile(fileInfo)
-        } else {
-          // 合并下载文件
-          this.downloadBlob(fileInfo)
-        }
-      })
-  }
-
-  private downloadBlob(fileInfo: FileInfo) {
-    const url = window.URL.createObjectURL(new Blob(fileInfo.blobs, { type: fileInfo.type }))
-    const link = document.createElement('a')
-    link.style.display = 'none'
-    link.href = url
-    link.setAttribute('download', fileInfo.name)
-    document.body.appendChild(link)
-    link.click()
-    URL.revokeObjectURL(url)
-
-    fileInfo.pause = true
-    fileInfo.downloading = false
-    this.$emit('onFileDownloaded', fileInfo)
-  }
-
-  private onFormClosed() {
-    this.$emit('closed')
-  }
-}
-</script>
diff --git a/vueJs/src/views/file-management/components/FileUploadForm.vue b/vueJs/src/views/file-management/components/FileUploadForm.vue
deleted file mode 100644
index d48afc184..000000000
--- a/vueJs/src/views/file-management/components/FileUploadForm.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <div>
-    <uploader
-      ref="uploader"
-      :options="options"
-      :auto-start="false"
-      class="uploader-pane"
-      @file-added="onFileAdded"
-      @file-error="onFileError"
-      @file-complete="onFileUploadCompleted"
-    >
-      <uploader-unsupport />
-      <uploader-drop>
-        <uploader-btn :attrs="attrs">
-          {{ $t('fileSystem.addFile') }}
-        </uploader-btn>
-      </uploader-drop>
-      <uploader-list />
-    </uploader>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
-import { FileUploadUrl } from '@/api/filemanagement'
-import { UserModule } from '@/store/modules/user'
-
-export class UploadOptions {
-  target!: string
-  chunkSize!: number
-  testChunks!: boolean
-  fileParameterName!: string
-  maxChunkRetries!: number
-  headers?: any
-  query?: any
-  permanentErrors?: number[]
-  successStatuses?: number[]
-
-  constructor() {
-    this.query = {}
-    this.headers = {}
-    this.testChunks = false
-    this.successStatuses = new Array<number>()
-    this.permanentErrors = new Array<number>()
-  }
-}
-
-@Component({
-  name: 'FileUploadForm'
-})
-export default class extends Vue {
-  @Prop({ default: () => new UploadOptions() })
-  private options!: UploadOptions
-
-  @Prop({ default: '' })
-  private path!: string
-
-  private attrs!: {[key: string]: any}
-  private files?: any = {}
-
-  constructor() {
-    super()
-    this.attrs = {
-      accept: ['image/*', 'document/*', 'video/*', 'audio/*']
-    }
-    this.options.target = FileUploadUrl
-    this.options.successStatuses = [200, 201, 202, 204, 205]
-    this.options.permanentErrors = [400, 401, 403, 404, 415, 500, 501]
-    this.options.headers.Authorization = UserModule.token
-  }
-
-  public close() {
-    this.files = {}
-    const uploadControl = this.$refs.uploader as any
-    uploadControl.files = []
-    uploadControl.fileList = []
-    uploadControl.uploader.cancel()
-  }
-
-  @Watch('path', { immediate: true })
-  private onPathChanged() {
-    this.options.query.path = this.path
-  }
-
-  private onFileAdded(file: any) {
-    this.files[file.name] = file.chunkSize
-    file.uploader.fileStatusText.error = this.$t('fileSystem.uploadError')
-    file.uploader.fileStatusText.paused = this.$t('fileSystem.paused')
-    file.uploader.fileStatusText.success = this.$t('fileSystem.uploadSuccess')
-    file.uploader.fileStatusText.waiting = this.$t('fileSystem.waitingUpload')
-    file.uploader.fileStatusText.uploading = this.$t('fileSystem.uploading')
-  }
-
-  private onFileError(rootFile: any, file: any, message: any) {
-    const abpResponse = JSON.parse(message)
-    this.$message.error(abpResponse.error.message)
-  }
-
-  private onFileUploadCompleted(file: any) {
-    this.$emit('onFileUploaded', file)
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>
diff --git a/vueJs/src/views/file-management/index.vue b/vueJs/src/views/file-management/index.vue
deleted file mode 100644
index 86d63218e..000000000
--- a/vueJs/src/views/file-management/index.vue
+++ /dev/null
@@ -1,516 +0,0 @@
-<template>
-  <div class="app-container">
-    <div class="filter-container">
-      <el-breadcrumb
-        ref="fileSystemBreadCrumb"
-        separator-class="el-icon-arrow-right"
-      >
-        <el-breadcrumb-item
-          v-for="(fileRoot, index) in fileSystemRoot"
-          :key="index"
-          class="file-system-breadcrumb"
-          @click.native="(event) => onBreadCrumbClick(event, index)"
-        >
-          {{ fileRoot }}
-        </el-breadcrumb-item>
-      </el-breadcrumb>
-    </div>
-
-    <el-table
-      ref="fileSystemTable"
-      v-loading="dataLoading"
-      row-key="name"
-      :data="dataList"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%;"
-      @row-click="onRowClick"
-      @row-dblclick="onRowDoubleClick"
-      @contextmenu.native="onContextMenu"
-      @sort-change="handleSortChange"
-    >
-      <el-table-column
-        type="selection"
-        width="50"
-        align="center"
-      />
-      <el-table-column
-        :label="$t('fileSystem.name')"
-        prop="name"
-        sortable
-        width="350"
-        align="left"
-      >
-        <template slot-scope="{row}">
-          <svg-icon
-            :name="row.type | fileSystemTypeIconFilter"
-            :class="row.type | fileSystemTypeIconClassFilter"
-          />
-          <span>{{ row.name }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('fileSystem.creationTime')"
-        prop="creationTime"
-        sortable
-        width="200"
-        align="center"
-      >
-        <template slot-scope="{row}">
-          <span>{{ row.creationTime | dateTimeFilter }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('fileSystem.lastModificationTime')"
-        prop="lastModificationTime"
-        sortable
-        width="200"
-        align="center"
-      >
-        <template slot-scope="{row}">
-          <span>{{ row.lastModificationTime | dateTimeFilter }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('fileSystem.type')"
-        prop="type"
-        sortable
-        width="150"
-        align="center"
-      >
-        <template slot-scope="{row}">
-          <span>{{ row.type === 0 ? $t('fileSystem.folder') : $t('fileSystem.fileType', {exten: row.extension}) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('fileSystem.size')"
-        prop="size"
-        sortable
-        width="200"
-        align="center"
-      >
-        <template slot-scope="{row}">
-          <span>{{ row.size | fileSystemSizeFilter }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        :label="$t('global.operaActions')"
-        align="center"
-        width="250"
-        min-width="250"
-      >
-        <template slot-scope="{row}">
-          <el-button
-            :disabled="row.type === 0 ? !checkPermission(['AbpFileManagement.FileSystem.Delete']) : !checkPermission(['AbpFileManagement.FileSystem.FileManager.Delete'])"
-            size="mini"
-            type="danger"
-            @click="handleDeleteFolderOrFile(row)"
-          >
-            {{ row.type === 0 ? $t('fileSystem.deleteFolder') : $t('fileSystem.deleteFile') }}
-          </el-button>
-          <el-dropdown
-            class="options"
-            @command="handleFileSystemCommand"
-          >
-            <el-button
-              v-permission="['AbpFileManagement.FileSystem']"
-              size="mini"
-              type="info"
-            >
-              {{ $t('global.otherOpera') }}<i class="el-icon-arrow-down el-icon--right" />
-            </el-button>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item
-                v-permission="['AbpFileManagement.FileSystem.FileManager.Create']"
-                :command="{key: 'upload', row}"
-              >
-                {{ $t('fileSystem.upload') }}
-              </el-dropdown-item>
-              <el-dropdown-item
-                v-permission="['AbpFileManagement.FileSystem.FileManager.Download']"
-                divided
-                :command="{key: 'download', row}"
-                :disabled="downloading || row.type === 0"
-              >
-                {{ $t('fileSystem.download') }}
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <Pagination
-      v-show="dataTotal>0"
-      :total="dataTotal"
-      :page.sync="currentPage"
-      :limit.sync="pageSize"
-      @pagination="refreshPagedData"
-    />
-
-    <el-dialog
-      :visible.sync="showFileUploadDialog"
-      :title="$t('fileSystem.upload')"
-      :show-close="false"
-      @closed="onFileUploadFormClosed"
-    >
-      <file-upload-form
-        ref="fileUploadForm"
-        :path="lastFilePath"
-        @onFileUploaded="onFileUploaded"
-      />
-    </el-dialog>
-
-    <file-download-form
-      :show-dialog="showDownloadDialog"
-      :files="downloadFiles"
-      @closed="showDownloadDialog=false"
-      @onFileRemoved="onFileRemoved"
-    />
-  </div>
-</template>
-
-<script lang="ts">
-import { dateFormat } from '@/utils'
-import { checkPermission } from '@/utils/permission'
-import { Vue } from 'vue-property-decorator'
-import DataListMiXin from '@/mixins/DataListMiXin'
-import Component, { mixins } from 'vue-class-component'
-import FileUploadForm from './components/FileUploadForm.vue'
-import FileDownloadForm, { FileInfo } from './components/FileDownloadForm.vue'
-import Pagination from '@/components/Pagination/index.vue'
-import FileSystemService, { FileSystemGetByPaged, FileSystemType } from '@/api/filemanagement'
-
-const kbUnit = 1 * 1024
-const mbUnit = kbUnit * 1024
-const gbUnit = mbUnit * 1024
-const $contextmenu = Vue.prototype.$contextmenu
-
-@Component({
-  name: 'FileManagement',
-  components: {
-    Pagination,
-    FileUploadForm,
-    FileDownloadForm
-  },
-  filters: {
-    dateTimeFilter(datetime: string) {
-      const date = new Date(datetime)
-      return dateFormat(date, 'YYYY-mm-dd HH:MM')
-    },
-    fileSystemTypeIconFilter(type: FileSystemType) {
-      if (type === FileSystemType.Folder) {
-        return 'folder'
-      }
-      return 'file'
-    },
-    fileSystemTypeIconClassFilter(type: FileSystemType) {
-      if (type === FileSystemType.Folder) {
-        return 'folder-icon'
-      }
-      return 'file-icon'
-    },
-    fileSystemTypeFilter(type: FileSystemType) {
-      if (type === FileSystemType.Folder) {
-        return 'fileSystem.folder'
-      }
-      return 'fileSystem.fileType'
-    },
-    fileSystemSizeFilter(size: number) {
-      if (size > gbUnit) {
-        let gb = Math.round(size / gbUnit)
-        if (gb < 1) {
-          gb = 1
-        }
-        return gb + ' GB'
-      }
-      if (size > mbUnit) {
-        let mb = Math.round(size / mbUnit)
-        if (mb < 1) {
-          mb = 1
-        }
-        return mb + ' MB'
-      }
-      let kb = Math.round(size / kbUnit)
-      if (kb < 1) {
-        kb = 1
-      }
-      return kb + ' KB'
-    }
-  },
-  methods: {
-    checkPermission,
-    tableRowClassName(row: any) {
-      if (row.row.type === 0) {
-        return 'folder-row'
-      }
-      return 'file-row'
-    }
-  }
-})
-export default class extends mixins(DataListMiXin) {
-  private showFileUploadDialog = false
-  private downloading = false
-  private lastFilePath = ''
-  private fileSystemRoot = new Array<string>()
-
-  private showDownloadDialog = false
-  private downloadFiles = new Array<FileInfo>()
-
-  public dataFilter = new FileSystemGetByPaged()
-
-  mounted() {
-    this.fileSystemRoot.push(this.$t('fileSystem.root').toString())
-    this.refreshPagedData()
-  }
-
-  protected getPagedList(filter: any) {
-    return FileSystemService.getFileSystemList(filter)
-  }
-
-  private navigationToFilePath() {
-    const fileSystemPathArray = this.fileSystemRoot.slice(1)
-    const fileSystemPath = fileSystemPathArray.join('/')
-    this.dataFilter.parent = fileSystemPath
-    this.refreshPagedData()
-  }
-
-  private handleGoToLastFolder() {
-    if (this.fileSystemRoot.length > 1) {
-      this.fileSystemRoot.splice(this.fileSystemRoot.length - 1)
-      this.navigationToFilePath()
-    }
-  }
-
-  private handleDeleteFolderOrFile(row: any) {
-    this.$confirm(this.l('global.whetherDeleteData', { name: row.name }),
-      this.l('global.questingDeleteByMessage',
-        { message: row.type === 0 ? this.l('fileSystem.folder') : this.l('fileSystem.file') }), {
-        callback: (action) => {
-          if (action === 'confirm') {
-            if (row.type === 0) {
-              let path = row.name
-              if (row.parent) {
-                path = row.parent + '/' + row.name
-              }
-              FileSystemService.deleteFolder(path).then(() => {
-                this.$notify.success(this.l('global.dataHasBeenDeleted', { name: row.name }))
-                this.refreshPagedData()
-              })
-            } else {
-              FileSystemService.deleteFile(row.parent, row.name).then(() => {
-                this.$notify.success(this.l('global.dataHasBeenDeleted', { name: row.name }))
-                this.refreshPagedData()
-              })
-            }
-          }
-        }
-      })
-  }
-
-  private handleFileSystemCommand(command: { key: string, row: any}) {
-    switch (command.key) {
-      case 'download':
-        this.handleDownloadFile(command.row.parent, command.row.name, command.row.size)
-        break
-      case 'upload':
-        if (command.row.type === 0) {
-          let path = command.row.name
-          if (command.row.parent) {
-            path = command.row.parent + '/' + path
-          }
-          this.handleUploadFile(path)
-        } else {
-          this.handleUploadFile(command.row.parent)
-        }
-        break
-    }
-  }
-
-  private handleUploadFile(path: string) {
-    this.lastFilePath = path
-    this.showFileUploadDialog = true
-  }
-
-  private handleDownloadFile(path: string, fileName: string, size: number) {
-    if (!this.downloadFiles.some(x => x.name === fileName && x.path === path)) {
-      const file = new FileInfo()
-      file.name = fileName
-      file.path = path
-      file.size = size
-      file.progress = 0
-      this.downloadFiles.push(file)
-    }
-    this.showDownloadDialog = true
-  }
-
-  private onFileRemoved(fileInfo: FileInfo) {
-    const index = this.downloadFiles.findIndex(x => x.path === fileInfo.path && x.name === fileInfo.name)
-    this.downloadFiles.splice(index, 1)
-  }
-
-  private onRowClick(row: any) {
-    if (row.type === FileSystemType.Folder) {
-      let path = row.name
-      if (row.parent) {
-        path = row.parent + '/' + row.name
-      }
-      this.lastFilePath = path
-    }
-    const table = this.$refs.fileSystemTable as any
-    table.toggleRowSelection(row)
-  }
-
-  private onRowDoubleClick(row: any) {
-    if (row.type === FileSystemType.Folder) {
-      this.fileSystemRoot.push(row.name)
-      this.navigationToFilePath()
-    }
-  }
-
-  private onBreadCrumbClick(event: any, index: number) {
-    // 如果点击的索引为最后一个,不做响应
-    if ((index + 1) < this.fileSystemRoot.length) {
-      this.fileSystemRoot.splice(index + 1)
-      this.navigationToFilePath()
-    } else {
-      this.refreshPagedData()
-    }
-  }
-
-  private onFileUploaded() {
-    this.refreshPagedData()
-  }
-
-  private onFileUploadFormClosed() {
-    this.showFileUploadDialog = false
-    const frmUpload = this.$refs.fileUploadForm as any
-    frmUpload.close()
-  }
-
-  private onContextMenu(event: any) {
-    event.preventDefault()
-    $contextmenu({
-      items: [
-        {
-          label: this.$t('fileSystem.addFolder'),
-          disabled: !checkPermission(['AbpFileManagement.FileSystem.Create']),
-          onClick: () => {
-            let parent = ''
-            // 在根目录下
-            if (this.fileSystemRoot.length > 1) {
-              parent = this.fileSystemRoot.slice(1).join('/')
-            }
-            this.$prompt(this.$t('global.pleaseInputBy', { key: this.$t('fileSystem.name') }).toString(),
-              this.$t('fileSystem.addFolder').toString(), {
-                showInput: true,
-                inputValidator: (val) => {
-                  return !(!val || val.length === 0)
-                },
-                inputErrorMessage: this.$t('fileSystem.folderNameIsRequired').toString(),
-                inputPlaceholder: this.$t('global.pleaseInputBy', { key: this.$t('fileSystem.name') }).toString()
-              }).then((val: any) => {
-              FileSystemService.createFolder(val.value, parent).then(() => {
-                this.$message.success(this.$t('fileSystem.folderCreateSuccess', { name: val.value }).toString())
-                this.refreshPagedData()
-              })
-            }).catch(_ => _)
-          },
-          divided: true
-        },
-        {
-          label: this.$t('fileSystem.upload'),
-          disabled: !checkPermission(['AbpFileManagement.FileSystem.FileManager.Create']),
-          onClick: () => {
-            let path = ''
-            if (this.fileSystemRoot.length > 1) {
-              path = this.fileSystemRoot.slice(1).join('/')
-            }
-            this.lastFilePath = path
-            this.showFileUploadDialog = true
-          },
-          divided: true
-        },
-        {
-          label: this.$t('fileSystem.bacthDownload'),
-          disabled: !checkPermission(['AbpFileManagement.FileSystem.FileManager.Download']),
-          onClick: () => {
-            const table = this.$refs.fileSystemTable as any
-            // 过滤未添加到下载列表的文件
-            const selectFiles = table.selection.filter((x: any) => x.type === 1 && !this.downloadFiles.some(f => f.name === x.name && f.path === x.path))
-            // 格式化文件列表别添加到下载列表
-            this.downloadFiles.push(...selectFiles.map((f: any) => {
-              const file = new FileInfo()
-              file.name = f.name
-              file.path = f.parent
-              file.size = f.size
-              file.progress = 0
-              return file
-            }))
-            // 显示下载列表
-            this.showDownloadDialog = true
-          }
-        },
-        {
-          label: this.$t('fileSystem.bacthDelete'),
-          disabled: true, // !checkPermission(['AbpFileManagement.FileSystem.FileManager.Delete']),
-          onClick: () => {
-            // 未公布批量删除接口
-            // const table = this.$refs.fileSystemTable as any
-            // 过滤类型为文件的选中项
-            // const selectFiles = table.selection.filter((x: any) => x.type === 1)
-          }
-        }
-      ],
-      event,
-      customClass: 'context-menu',
-      zIndex: 3,
-      minWidth: 150
-    })
-    return false
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.options {
-  vertical-align: top;
-  margin-left: 20px;
-}
-.el-dropdown + .el-dropdown {
-  margin-left: 15px;
-}
-.el-icon-arrow-down {
-  font-size: 12px;
-}
-</style>
-
-<style lang="scss">
-.el-table .folder-row {
-  cursor: pointer;
-  background-color:rgb(245, 235, 226);
-}
-.el-table .file-row {
-  cursor: pointer;
-  background-color: rgb(210, 219, 235);
-}
-.file-system-breadcrumb .el-breadcrumb__inner {
-  color: rgb(34, 34, 173);
-  cursor: pointer;
-}
-.file-icon {
-  margin-left: 0px;
-  margin-right: 5px;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  color: rgb(55, 189, 189);
-}
-.folder-icon {
-  margin-left: 0px;
-  margin-right: 5px;
-  margin-top: 0px;
-  margin-bottom: 0px;
-  color: rgb(235, 130, 33);
-}
-</style>
diff --git a/vueJs/src/views/login/index.vue b/vueJs/src/views/login/index.vue
index 1a5b47043..dd2a55c9e 100644
--- a/vueJs/src/views/login/index.vue
+++ b/vueJs/src/views/login/index.vue
@@ -156,7 +156,8 @@ import { UserModule } from '@/store/modules/user'
 import { Dictionary } from 'vue-router/types/router'
 import TenantBox from '@/components/TenantBox/index.vue'
 import LangSelect from '@/components/LangSelect/index.vue'
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import UserService from '@/api/users'
 import { AbpModule } from '@/store/modules/abp'
 
@@ -167,7 +168,7 @@ import { AbpModule } from '@/store/modules/abp'
     TenantBox
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   private loginType = 'password'
   private passwordType = 'password'
   private redirect?: string
@@ -324,10 +325,6 @@ export default class extends Vue {
     this.loginType = tab.paneName === '1' ? 'phone' : 'password'
   }
 
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
-
   private resetLoginButton() {
     setTimeout(() => {
       this.logining = false
diff --git a/vueJs/src/views/oss-management/components/OssObjectProfile.vue b/vueJs/src/views/oss-management/components/OssObjectProfile.vue
index 5ab7611a6..69b92c367 100644
--- a/vueJs/src/views/oss-management/components/OssObjectProfile.vue
+++ b/vueJs/src/views/oss-management/components/OssObjectProfile.vue
@@ -32,6 +32,7 @@
                     type="warning"
                     center
                     show-icon
+                    :closable="false"
                   />
                 </div>
               </el-image>
diff --git a/vueJs/src/views/oss-management/index.vue b/vueJs/src/views/oss-management/index.vue
index 1e25761f7..681d70379 100644
--- a/vueJs/src/views/oss-management/index.vue
+++ b/vueJs/src/views/oss-management/index.vue
@@ -170,7 +170,8 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
+import { Component, Mixins, Vue } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import OssManagerApi, {
   GetOssContainerRequest,
   GetOssObjectRequest,
@@ -227,7 +228,7 @@ const $contextmenu = Vue.prototype.$contextmenu
     }
   }
 })
-export default class OssManagement extends Vue {
+export default class OssManagement extends Mixins(LocalizationMiXin) {
   private bucket = ''
   private ossObjectEnd = false
   private objectLoading = false
@@ -476,10 +477,6 @@ export default class OssManagement extends Vue {
     }
     return path
   }
-
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
 }
 </script>
 
diff --git a/vueJs/src/views/register/index.vue b/vueJs/src/views/register/index.vue
index f031627f6..6f8bafd24 100644
--- a/vueJs/src/views/register/index.vue
+++ b/vueJs/src/views/register/index.vue
@@ -123,7 +123,8 @@ import { Route } from 'vue-router'
 import { Dictionary } from 'vue-router/types/router'
 import TenantBox from '@/components/TenantBox/index.vue'
 import LangSelect from '@/components/LangSelect/index.vue'
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import UserService, { UserRegisterData } from '@/api/users'
 import { AbpModule } from '@/store/modules/abp'
 
@@ -134,7 +135,7 @@ import { AbpModule } from '@/store/modules/abp'
     TenantBox
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   private passwordType = 'password'
   private redirect?: string
 
@@ -266,10 +267,6 @@ export default class extends Vue {
     })
   }
 
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
-
   private resetLoginButton() {
     setTimeout(() => {
       this.registing = false
diff --git a/vueJs/src/views/reset-password/index.vue b/vueJs/src/views/reset-password/index.vue
index 77e74949e..397ee5951 100644
--- a/vueJs/src/views/reset-password/index.vue
+++ b/vueJs/src/views/reset-password/index.vue
@@ -111,7 +111,8 @@ import { Route } from 'vue-router'
 import { Dictionary } from 'vue-router/types/router'
 import TenantBox from '@/components/TenantBox/index.vue'
 import LangSelect from '@/components/LangSelect/index.vue'
-import { Component, Vue, Watch } from 'vue-property-decorator'
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import LocalizationMiXin from '@/mixins/LocalizationMiXin'
 import UserService, { UserResetPasswordData } from '@/api/users'
 import { AbpModule } from '@/store/modules/abp'
 
@@ -122,7 +123,7 @@ import { AbpModule } from '@/store/modules/abp'
     TenantBox
   }
 })
-export default class extends Vue {
+export default class extends Mixins(LocalizationMiXin) {
   private passwordType = 'password'
   private redirect?: string
 
@@ -246,10 +247,6 @@ export default class extends Vue {
     })
   }
 
-  private l(name: string, values?: any[] | { [key: string]: any }) {
-    return this.$t(name, values).toString()
-  }
-
   private resetLoginButton() {
     setTimeout(() => {
       this.reseting = false