From a8e3a45fb55180a21d836678c5fa527966f36cdb Mon Sep 17 00:00:00 2001
From: Serge Gao <gaosj1993@foxmail.com>
Date: Fri, 15 Feb 2019 11:37:21 +0800
Subject: [PATCH] perf i18n for role permission

---
 src/lang/en.js                |  8 ++++-
 src/lang/es.js                |  1 +
 src/lang/zh.js                |  8 ++++-
 src/mock/routes.js            |  2 +-
 src/views/permission/role.vue | 55 ++++++++++++++++++-----------------
 5 files changed, 45 insertions(+), 29 deletions(-)

diff --git a/src/lang/en.js b/src/lang/en.js
index 05b34598..5fcb275f 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -6,6 +6,7 @@ export default {
     guide: 'Guide',
     permission: 'Permission',
     pagePermission: 'Page Permission',
+    rolePermission: 'Role Permission',
     directivePermission: 'Directive Permission',
     icons: 'Icons',
     components: 'Components',
@@ -86,9 +87,14 @@ export default {
     github: 'Github Repository'
   },
   permission: {
+    newRole: 'New Role',
+    editPermission: 'Edit Permission',
     roles: 'Your roles',
     switchRoles: 'Switch roles',
-    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.'
+    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
+    delete: 'Delete',
+    confirm: 'Confirm',
+    cancel: 'Cancel'
   },
   guide: {
     description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
diff --git a/src/lang/es.js b/src/lang/es.js
index 8575d382..78844c22 100755
--- a/src/lang/es.js
+++ b/src/lang/es.js
@@ -5,6 +5,7 @@ export default {
     documentation: 'Documentación',
     guide: 'Guía',
     permission: 'Permisos',
+    rolePermission: 'Permisos de rol',
     pagePermission: 'Permisos de la página',
     directivePermission: 'Permisos de la directiva',
     icons: 'Iconos',
diff --git a/src/lang/zh.js b/src/lang/zh.js
index 1fd18355..411d25ab 100644
--- a/src/lang/zh.js
+++ b/src/lang/zh.js
@@ -5,6 +5,7 @@ export default {
     documentation: '文档',
     guide: '引导页',
     permission: '权限测试页',
+    rolePermission: '角色权限',
     pagePermission: '页面权限',
     directivePermission: '指令权限',
     icons: '图标',
@@ -86,9 +87,14 @@ export default {
     github: 'Github 地址'
   },
   permission: {
+    newRole: '新增角色',
+    editPermission: '编辑权限',
     roles: '你的权限',
     switchRoles: '切换权限',
-    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。'
+    tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
+    delete: '删除',
+    confirm: '确定',
+    cancel: '取消'
   },
   guide: {
     description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
diff --git a/src/mock/routes.js b/src/mock/routes.js
index 480334a4..678f4ee9 100644
--- a/src/mock/routes.js
+++ b/src/mock/routes.js
@@ -37,7 +37,7 @@ const asyncRoutesMap = [
         component: 'permission/role',
         name: 'role',
         meta: {
-          title: 'roleManagement',
+          title: 'rolePermission',
           roles: ['admin']
         }
       }
diff --git a/src/views/permission/role.vue b/src/views/permission/role.vue
index b6023a55..53eff624 100644
--- a/src/views/permission/role.vue
+++ b/src/views/permission/role.vue
@@ -1,47 +1,50 @@
 <template>
   <div class="app-container wrapper">
-    <el-button type="primary" @click="handleNewRole">新增角色</el-button>
+    <el-button type="primary" @click="handleNewRole">{{ $t('permission.newRole') }}</el-button>
 
     <el-table :data="rolesData" style="width: 100%" class="roles-table">
-      <el-table-column label="角色名称" width="220">
+      <el-table-column label="Role Id" width="220">
+        <template slot-scope="scope">{{ scope.row.id }}</template>
+      </el-table-column>
+      <el-table-column label="Role Name" width="220">
         <template slot-scope="scope">{{ scope.row.name }}</template>
       </el-table-column>
-      <el-table-column label="角色描述">
+      <el-table-column label="Description">
         <template slot-scope="scope">{{ scope.row.describe }}</template>
       </el-table-column>
-      <el-table-column label="操作">
+      <el-table-column label="Operations">
         <template slot-scope="scope">
-          <el-button type="primary" size="small" @click="handleEdit(scope)">修改权限</el-button>
-          <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
+          <el-button type="primary" size="small" @click="handleEdit(scope)">{{ $t('permission.editPermission') }}</el-button>
+          <el-button type="danger" size="small" @click="handleDelete(scope)">{{ $t('permission.delete') }}</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <el-dialog :visible.sync="newRoleDialogVisible" title="新增角色">
+    <el-dialog :visible.sync="newRoleDialogVisible" title="New Role">
       <el-form :model="newRole" class="new-role-form">
-        <el-form-item label="角色名称">
-          <el-input v-model="newRole.name" placeholder="角色名称"/>
+        <el-form-item label="Role Name">
+          <el-input v-model="newRole.name" placeholder="role name"/>
         </el-form-item>
-        <el-form-item label="角色描述">
-          <el-input v-model="newRole.describe" placeholder="角色描述"/>
+        <el-form-item label="Role Description">
+          <el-input v-model="newRole.describe" placeholder="role Description"/>
         </el-form-item>
       </el-form>
 
-      <el-button type="primary" @click="confirmNewRole">确定</el-button>
-      <el-button type="danger" @click="cancleNewRole">取消</el-button>
+      <el-button type="primary" @click="confirmNewRole">{{ $t('permission.confirm') }}</el-button>
+      <el-button type="danger" @click="cancleNewRole">{{ $t('permission.cancel') }}</el-button>
     </el-dialog>
 
-    <el-dialog :visible.sync="permissionDialogVisible" title="修改权限">
+    <el-dialog :visible.sync="permissionDialogVisible" :title="$t('permission.editPermission')">
       <el-form label-width="100px">
-        <el-form-item label="角色名称">
+        <el-form-item label="Role Name">
           <span>{{ checkedRole.data.name }}</span>
         </el-form-item>
-        <el-form-item label="菜单列表">
+        <el-form-item label="Menus">
           <el-tree ref="tree" :check-strictly="checkStrictly" :data="MapRoutesData" :props="defaultProps" :filter-node-method="filterNode" show-checkbox node-key="id" class="permission-tree"/>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" @click="confirmPermission">确定</el-button>
-          <el-button type="danger" @click="canclePermission">取消</el-button>
+          <el-button type="primary" @click="confirmPermission">{{ $t('permission.confirm') }}</el-button>
+          <el-button type="danger" @click="canclePermission">{{ $t('permission.cancel') }}</el-button>
         </el-form-item>
       </el-form>
     </el-dialog>
@@ -92,7 +95,7 @@ export default {
             route = this.onlyOneShowingChild(route.children, route)
           }
           route.children && (route.children = traverseRoutes(route.children))
-          route.name = this.generateTitle((route.meta && route.meta.title) || route.name || route.path || Math.random() + '')
+          route.name = this.generateTitle((route.meta && route.meta.title) || route.name)
           return route
         })
       }
@@ -110,7 +113,7 @@ export default {
   },
   methods: {
     generateTitle,
-    // 过滤掉隐藏的菜单
+    // filter out the hidden route menu
     filterNode(value, data) {
       return !data.hidden
     },
@@ -159,9 +162,9 @@ export default {
       // this.checkStrictly = false
     },
     handleDelete(scope) {
-      this.$confirm('此操作将删除角色, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      this.$confirm('Confirm to remove the role?', 'Warning', {
+        confirmButtonText: 'Confirm',
+        cancelButtonText: 'Cancel',
         type: 'warning'
       })
         .then(() => {
@@ -171,14 +174,14 @@ export default {
           this.rolesData.splice(scope.$index, 1)
           this.$message({
             type: 'success',
-            message: '删除成功!'
+            message: 'Delete succed!'
           })
         })
         .catch(err => {
           console.error(err)
           this.$message({
             type: 'info',
-            message: '已取消删除'
+            message: 'Delete canceled'
           })
         })
     },
@@ -195,7 +198,7 @@ export default {
       }).then(res => {
         this.rolesData[this.checkedRole.index].accessibleRoutes = routeIds
         this.$message({
-          message: '编辑成功',
+          message: 'Edit succed',
           type: 'success'
         })
         this.permissionDialogVisible = false