added vietnamese; translated all for vi.js; added translation variables in 'example/table/*, Tab, Excel, Zip, i18n'

src/components/LangSelect/index.vue

@@ -6,6 +6,7 @@
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item command="zh" :disabled="language==='zh'">中文</el-dropdown-item>
       <el-dropdown-item command="en" :disabled="language==='en'">English</el-dropdown-item>
+      <el-dropdown-item command="vi" :disabled="language==='vi'">Tiếng Việt</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>

src/lang/index.js

@@ -3,8 +3,10 @@ import VueI18n from 'vue-i18n'
 import Cookies from 'js-cookie'
 import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
 import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
+import elementViLocale from 'element-ui/lib/locale/lang/vi'// element-ui lang
 import enLocale from './en'
 import zhLocale from './zh'
+import viLocale from './vi'
 
 Vue.use(VueI18n)
 
@@ -16,6 +18,10 @@ const messages = {
   zh: {
     ...zhLocale,
     ...elementZhLocale
+  },
+  vi: {
+    ...viLocale,
+    ...elementViLocale
   }
 }
 

src/lang/vi.js

@@ -0,0 +1,126 @@
+export default {
+  route: {
+    dashboard: 'Bảng điều khiển',
+    introduction: 'Giới thiệu',
+    documentation: 'Tài liệu',
+    permission: 'Quyền truy cập',
+    icons: 'Biểu tượng',
+    components: 'Components',
+    componentIndex: 'Giới thiệu',
+    tinymce: 'Tinymce',
+    markdown: 'Markdown',
+    jsonEditor: 'Trình soạn thảo JSON',
+    dndList: 'Dnd List',
+    splitPane: 'SplitPane',
+    avatarUpload: 'Ảnh đại diện',
+    dropzone: 'Dropzone',
+    sticky: 'Sticky',
+    countTo: 'CountTo',
+    componentMixin: 'Thành phần',
+    backToTop: 'Trở về trên',
+    charts: 'Biểu đồ',
+    keyboardChart: 'Biểu đồ cột',
+    lineChart: 'Biểu đồ đường',
+    mixChart: 'Biểu đồ Kết hợp',
+    example: 'Ví dụ',
+    Table: 'Bảng',
+    dynamicTable: 'Lọc dữ liệu',
+    dragTable: 'Kéo & Thả',
+    inlineEditTable: 'Sửa tại chỗ',
+    complexTable: 'Đầy đủ',
+    tab: 'Tab',
+    form: 'Form',
+    createForm: 'Tạo Form',
+    editForm: 'Sửa Form',
+    errorPages: 'Các Trang lỗi',
+    page401: '401',
+    page404: '404',
+    errorLog: 'Lịch sử lỗi',
+    excel: 'Excel',
+    exportExcel: 'Xuất Excel',
+    selectExcel: 'Xuất Mục được chọn',
+    uploadExcel: 'Tải Excel',
+    exportZip: 'Xuất Zip',
+    theme: 'Chủ đề',
+    clipboardDemo: 'Clipboard',
+    i18n: 'I18n'
+  },
+  navbar: {
+    logOut: 'Thoát',
+    dashboard: 'Bảng điều khiển',
+    github: 'Github',
+    screenfull: 'Toàn màn hình',
+    theme: 'Đổi Chủ đề'
+  },
+  login: {
+    title: 'Form Đăng nhập',
+    logIn: 'Đăng nhập',
+    username: 'Tài khoản',
+    password: 'Mật khẩu',
+    any: 'Tuỳ ý',
+    thirdparty: 'Hoặc kết nối với',
+    thirdpartyTips: 'Chức năng không thể thực hiện ở local!!!'
+  },
+  documentation: {
+    documentation: 'Tài liệu',
+    github: 'Github Repository'
+  },
+  permission: {
+    roles: 'Quyền truy cập của bạn',
+    switchRoles: 'Thay đổi quyền truy cập'
+  },
+  components: {
+    documentation: 'Tài liệu',
+    tinymceTips: 'Trình soạn thảo văn bản là một phần không thể thiếu của một hệ thống quản lí, nhưng đồng thời nó cũng là nơi xảy ra nhiều vấn đề. Trong quá trình lựa chọn, tôi cũng đã xem qua nhiều trình soạn thảo trên thị trường được nhiều người sử dụng và cuối cùng tôi quyết định chọn Tinymce. Nếu muốn tìm hiểu thêm bạn có thể xem tài liệu về giới thiệu và sự so sánh các trình soạn thảo ở',
+    dropzoneTips: 'Vì sự cần thiết đặc biệt để tải hình ảnh lên qiniu thay vì sử dụng một bên thứ ba, tôi đã tạo nó. Nó là rất đơn giản, bạn có thể xem chi tiết ở @/components/Dropzone.',
+    stickyTips: 'Cố định một phần tử được đặt trước ở phía trên trang khi cuộn trang.',
+    backToTopTips1: 'Nút BackToTop sẽ xuất hiện khi cuộn trang đến một vị trí nhất định.',
+    backToTopTips2: 'Bạn có thể thay đổi style của nút, hiện / ẩn, vị trí xuất hiện, vị trí ẩn. Bạn có thể thay đổi văn bản bằng cách chỉnh của element-ui el-tooltip ở bên ngoài.',
+    imageUploadTips: 'Từ khi sử dụng vue@1 và nó có 1 vài thứ không tương thích với mockjs, tôi đã hiệu chỉnh nó. Nó vẫn tốt hơn nếu được sử dụng bản chính thức nếu bạn muốn.'
+  },
+  table: {
+    dynamicTips1: 'Sắp xếp cố định theo trình tự các tuỳ chọn',
+    dynamicTips2: 'Sắp xếp theo trình tự giá trị được chọn',
+    dragTips1: 'Trình tự ban đầu',
+    dragTips2: 'Trình tự sau khi Kéo & Thả',
+    title: 'Tiêu đề',
+    importance: 'Độ ưu tiên',
+    type: 'Kiểu',
+    remark: 'Ghi chú',
+    search: 'Tìm kiếm',
+    add: 'Tạo mới',
+    export: 'Xuất',
+    reviewer: 'Đánh giá',
+    id: 'IDv',
+    date: 'Ngày giờ',
+    author: 'Tác giả',
+    readings: 'Lượt xem',
+    status: 'Trạng thái',
+    actions: 'Chức năng',
+    edit: 'Sửa',
+    publish: 'Xuất bản',
+    draft: 'Nháp',
+    delete: 'Xoá',
+    cancel: 'Huỷ',
+    confirm: 'Xác nhận'
+  },
+  errorLog: {
+    tips: 'Click vào biểu tượng BUG trên thanh tiêu đề để xem lịch sử lỗi.',
+    description: 'Hiện tại hệ thống quản lí cơ bản chạy kiểu SPA, nó tăng trải nghiệm người dùng đồng thời cũng làm tăng khả năng lỗi của trang, chỉ cần một sợ xuất nhỏ cũng có thể dẫn đến lỗi toàn bộ. May mắn thay, Vue đã cũng cấp cách để xử lí các trường hợp ngoại lệ (exceptions), nơi mà các bạn có thể xử lí hoặc báo cáo.',
+    documentation: 'Tài liệu chi tiết'
+  },
+  excel: {
+    export: 'Xuất',
+    selectedExport: 'Xuất mục được chọn',
+    placeholder: 'Nhập tên file (mặc định excel-list)'
+  },
+  zip: {
+    export: 'Xuất',
+    placeholder: 'Nhập tên file (mặc định file)'
+  },
+  theme: {
+    change: 'Đổi Chủ đề',
+    documentation: 'Tài liệu của Chủ đề',
+    tips: 'Tips: Chức năng này khác với `Đổi chủ đề` ở thanh tiêu đề. Mỗi nơi đều có giá trị khác nhau. Xem chi tiết bên dưới.'
+  }
+}

src/mock/article.js

@@ -13,7 +13,7 @@ for (let i = 0; i < count; i++) {
     title: '@title(5, 10)',
     forecast: '@float(0, 100, 2, 2)',
     importance: '@integer(1, 3)',
-    'type|1': ['CN', 'US', 'JP', 'EU'],
+    'type|1': ['CN', 'US', 'JP', 'VI', 'EU'],
     'status|1': ['published', 'draft', 'deleted'],
     display_time: '@datetime',
     pageviews: '@integer(300, 5000)'

src/views/example/tab/components/tabPane.vue

@@ -1,45 +1,45 @@
 <template>
   <el-table :data="list" border fit highlight-current-row style="width: 100%">
 
-    <el-table-column align="center" label="ID" width="65"  v-loading="loading"
+    <el-table-column align="center" :label="$t('table.id')" width="65"  v-loading="loading"
     element-loading-text="请给我点时间！">
       <template slot-scope="scope">
         <span>{{scope.row.id}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column width="180px" align="center" label="Date">
+    <el-table-column width="180px" align="center" :label="$t('table.date')">
       <template slot-scope="scope">
         <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column min-width="300px" label="Title">
+    <el-table-column min-width="300px" :label="$t('table.title')">
       <template slot-scope="scope">
         <span>{{scope.row.title}}</span>
         <el-tag>{{scope.row.type}}</el-tag>
       </template>
     </el-table-column>
 
-    <el-table-column width="110px" align="center" label="Author">
+    <el-table-column width="110px" align="center" :label="$t('table.author')">
       <template slot-scope="scope">
         <span>{{scope.row.author}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column width="120px" label="Importance">
+    <el-table-column width="120px" :label="$t('table.importance')">
       <template slot-scope="scope">
         <svg-icon v-for="n in +scope.row.importance" icon-class="star" :key="n"></svg-icon>
       </template>
     </el-table-column>
 
-    <el-table-column align="center" label="Readings" width="95">
+    <el-table-column align="center" :label="$t('table.readings')" width="95">
       <template slot-scope="scope">
         <span>{{scope.row.pageviews}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column class-name="status-col" label="Status" width="110">
+    <el-table-column class-name="status-col" :label="$t('table.status')" width="110">
       <template slot-scope="scope">
         <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
       </template>

src/views/example/tab/index.vue

@@ -23,6 +23,7 @@ export default {
         { label: 'China', key: 'CN' },
         { label: 'USA', key: 'US' },
         { label: 'Japan', key: 'JP' },
+        { label: 'Vietnamese', key: 'VI' },
         { label: 'Eurozone', key: 'EU' }
       ],
       activeName: 'CN',

src/views/example/table/complexTable.vue

@@ -142,6 +142,7 @@ const calendarTypeOptions = [
   { key: 'CN', display_name: 'China' },
   { key: 'US', display_name: 'USA' },
   { key: 'JP', display_name: 'Japan' },
+  { key: 'VI', display_name: 'Vietnamese' },
   { key: 'EU', display_name: 'Eurozone' }
 ]
 

src/views/example/table/dragTable.vue

@@ -3,43 +3,43 @@
     <!-- Note that row-key is necessary to get a correct row order. -->
     <el-table :data="list" row-key="id"  v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
 
-      <el-table-column align="center" label="ID" width="65">
+      <el-table-column align="center" :label="$t('table.id')" width="65">
         <template slot-scope="scope">
           <span>{{scope.row.id}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="180px" align="center" label="Date">
+      <el-table-column width="180px" align="center" :label="$t('table.date')">
         <template slot-scope="scope">
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="Title">
+      <el-table-column min-width="300px" :label="$t('table.title')">
         <template slot-scope="scope">
           <span>{{scope.row.title}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="110px" align="center" label="Author">
+      <el-table-column width="110px" align="center" :label="$t('table.author')">
         <template slot-scope="scope">
           <span>{{scope.row.author}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="100px" label="Importance">
+      <el-table-column width="100px" :label="$t('table.importance')">
         <template slot-scope="scope">
           <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Readings" width="95">
+      <el-table-column align="center" :label="$t('table.readings')" width="95">
         <template slot-scope="scope">
           <span>{{scope.row.pageviews}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="Status" width="110">
+      <el-table-column class-name="status-col" :label="$t('table.status')" width="110">
         <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>

src/views/example/table/inlineEditTable.vue

@@ -3,50 +3,50 @@
 
     <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
 
-      <el-table-column align="center" label="ID" width="80">
+      <el-table-column align="center" :label="$t('table.id')" width="80">
         <template slot-scope="scope">
           <span>{{scope.row.id}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="180px" align="center" label="Date">
+      <el-table-column width="180px" align="center" :label="$t('table.date')">
         <template slot-scope="scope">
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="120px" align="center" label="Author">
+      <el-table-column width="120px" align="center" :label="$t('table.author')">
         <template slot-scope="scope">
           <span>{{scope.row.author}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="100px" label="Importance">
+      <el-table-column width="100px" :label="$t('table.importance')">
         <template slot-scope="scope">
           <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="Status" width="110">
+      <el-table-column class-name="status-col" :label="$t('table.status')" width="110">
         <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="Title">
+      <el-table-column min-width="300px" :label="$t('table.title')">
         <template slot-scope="scope">
           <template v-if="scope.row.edit">
             <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
-            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">cancel</el-button>
+            <el-button class='cancel-btn' size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(scope.row)">{{$t('table.cancel')}}</el-button>
           </template>
           <span v-else>{{ scope.row.title }}</span>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="Actions" width="120">
+      <el-table-column align="center" :label="$t('table.actions')" width="120">
         <template slot-scope="scope">
           <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">Ok</el-button>
-          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">Edit</el-button>
+          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">{{$t('table.edit')}}</el-button>
         </template>
       </el-table-column>
 

src/views/excel/exportExcel.vue

@@ -4,27 +4,27 @@
     <el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
-      <el-table-column align="center" label='Id' width="95">
+      <el-table-column align="center" :label="$t('table.id')" width="95">
         <template slot-scope="scope">
           {{scope.$index}}
         </template>
       </el-table-column>
-      <el-table-column label="Title">
+      <el-table-column :label="$t('table.title')">
         <template slot-scope="scope">
           {{scope.row.title}}
         </template>
       </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
+      <el-table-column :label="$t('table.author')" width="110" align="center">
         <template slot-scope="scope">
           <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
+      <el-table-column :label="$t('table.readings')" width="115" align="center">
         <template slot-scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="Date" width="220">
+      <el-table-column align="center" :label="$t('table.date')" width="220">
         <template slot-scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>

src/views/excel/selectExcel.vue

@@ -6,27 +6,27 @@
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
       ref="multipleTable">
       <el-table-column type="selection" align="center"></el-table-column>
-      <el-table-column align="center" label='Id' width="95">
+      <el-table-column align="center" :label="$t('table.id')" width="95">
         <template slot-scope="scope">
           {{scope.$index}}
         </template>
       </el-table-column>
-      <el-table-column label="Title">
+      <el-table-column :label="$t('table.title')">
         <template slot-scope="scope">
           {{scope.row.title}}
         </template>
       </el-table-column>
-      <el-table-column label="Author" width="110" align="center">
+      <el-table-column :label="$t('table.author')" width="110" align="center">
         <template slot-scope="scope">
           <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
+      <el-table-column :label="$t('table.readings')" width="115" align="center">
         <template slot-scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="PDate" width="220">
+      <el-table-column align="center" :label="$t('table.date')" width="220">
         <template slot-scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.display_time}}</span>

src/views/i18n-demo/index.vue

@@ -9,6 +9,7 @@
         <el-radio-group v-model="lang" size="small">
           <el-radio label="zh" border>简体中文</el-radio>
           <el-radio label="en" border>English</el-radio>
+          <el-radio label="vi" border>Tiếng Việt</el-radio>
         </el-radio-group>
         <el-tag style='margin-top:15px;display:block;' type="info">{{$t('i18nView.note')}}</el-tag>
       </div>
@@ -80,6 +81,7 @@ export default {
     if (!this.$i18n.getLocaleMessage('en')[viewName]) {
       this.$i18n.mergeLocaleMessage('en', local.en)
       this.$i18n.mergeLocaleMessage('zh', local.zh)
+      this.$i18n.mergeLocaleMessage('vi', local.vi)
     }
   },
   computed: {

src/views/i18n-demo/local.js

@@ -25,12 +25,28 @@ export default {
       tableDate: 'tableDate',
       tableName: 'tableName',
       tableAddress: 'tableAddress',
-      default: 'default:',
+      default: 'default',
       primary: 'primary',
       success: 'success',
       info: 'info',
       warning: 'warning',
       danger: 'danger'
     }
+  },
+  vi: {
+    i18nView: {
+      title: 'Đổi Ngôn Ngữ',
+      note: 'Hiện tại chỉ dịch với i18n cho trang, sidebar và levelbar. Xin hãy chờ đợi ...',
+      datePlaceholder: 'Chọn ngày',
+      tableDate: 'Ngày giờ',
+      tableName: 'Tên',
+      tableAddress: 'Địa chỉ',
+      default: 'mặc định',
+      primary: 'chính',
+      success: 'thành công',
+      info: 'thông tin',
+      warning: 'cảnh báo',
+      danger: 'nguy hiểm'
+    }
   }
 }

src/views/zip/index.vue

@@ -4,27 +4,27 @@
     <el-input style='width:300px;' :placeholder="$t('zip.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('zip.export')}} zip</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
-      <el-table-column align="center" label='ID' width="95">
+      <el-table-column align="center" :label="$t('table.id')" width="95">
         <template slot-scope="scope">
           {{scope.$index}}
         </template>
       </el-table-column>
-      <el-table-column label="Title">
+      <el-table-column :label="$t('table.title')">
         <template slot-scope="scope">
           {{scope.row.title}}
         </template>
       </el-table-column>
-      <el-table-column label="Author" width="95" align="center">
+      <el-table-column :label="$t('table.author')" width="95" align="center">
         <template slot-scope="scope">
           <el-tag>{{scope.row.author}}</el-tag>
         </template>
       </el-table-column>
-      <el-table-column label="Readings" width="115" align="center">
+      <el-table-column :label="$t('table.readings')" width="115" align="center">
         <template slot-scope="scope">
           {{scope.row.pageviews}}
         </template>
       </el-table-column>
-      <el-table-column align="center" label="Date" width="220">
+      <el-table-column align="center" :label="$t('table.date')" width="220">
         <template slot-scope="scope">
           <i class="el-icon-time"></i>
           <span>{{scope.row.display_time}}</span>