feat:[系统管理] [角色管理] 界面级双语修改

src/lang/en.js

@@ -9,11 +9,13 @@ export default {
     reset: 'reset',
     add: 'add',
     export: 'export',
+    saveConfirm: 'confirm',
     confirm: 'confirm',
     cancel: 'cancel',
     operate: 'operate',
     placeholderInput: 'Please Enter',
-    placeholderSelect: 'Please Select'
+    placeholderSelect: 'Please Select',
+    confirmDelete: 'confirm delete？'
   },
   menu: {
     PersonalCenter: 'Personal Center',
@@ -123,7 +125,11 @@ export default {
 
         edit: 'edit',
         allocate: 'allocate',
-        detail: 'detail'
+        detail: 'detail',
+
+        addRole: 'addRole',
+        modifyRole: 'modifyRole',
+        notEmpty: ' can not be empty'
       }
     }
   }

src/lang/zh.js

@@ -2,18 +2,20 @@ export default {
   system: {
     title: '华西海圻管理系统',
     tip: '提示',
-    logOut: '确定注销并退出系统吗？'
+    logOut: '确认注销并退出系统吗？'
   },
   form: {
     search: '查询',
     reset: '重置',
     add: '新增',
     export: '导出',
-    confirm: '确定',
+    saveConfirm: '确定',
+    confirm: '确认',
     cancel: '取消',
     operate: '操作',
     placeholderInput: '请输入',
-    placeholderSelect: '请选择'
+    placeholderSelect: '请选择',
+    confirmDelete: '确认删除？'
   },
   menu: {
     PersonalCenter: '个人中心',
@@ -104,8 +106,8 @@ export default {
         icon: '菜单图标',
         permit: '权限字符',
 
-        addMenu: '添加菜单',
-        modifyMenu: '修改菜单',
+        addMenu: '新增菜单',
+        modifyMenu: '编辑菜单',
 
         root: '主类目',
 
@@ -123,7 +125,11 @@ export default {
 
         edit: '编辑',
         allocate: '分配用户',
-        detail: '详情'
+        detail: '详情',
+
+        addRole: '新增角色',
+        modifyRole: '编辑角色',
+        notEmpty: '不能为空'
       }
     }
   }

src/plugins/modal.js

@@ -1,4 +1,5 @@
 import { Message, MessageBox, Notification, Loading } from 'element-ui'
+import i18n from '@/lang'
 
 let loadingInstance
 
@@ -21,19 +22,19 @@ export default {
   },
   // 弹出提示
   alert(content) {
-    MessageBox.alert(content, "系统提示")
+    MessageBox.alert(content, i18n.t('system.tip'))
   },
   // 错误提示
   alertError(content) {
-    MessageBox.alert(content, "系统提示", { type: 'error' })
+    MessageBox.alert(content, i18n.t('system.tip'), { type: 'error' })
   },
   // 成功提示
   alertSuccess(content) {
-    MessageBox.alert(content, "系统提示", { type: 'success' })
+    MessageBox.alert(content, i18n.t('system.tip'), { type: 'success' })
   },
   // 警告提示
   alertWarning(content) {
-    MessageBox.alert(content, "系统提示", { type: 'warning' })
+    MessageBox.alert(content, i18n.t('system.tip'), { type: 'warning' })
   },
   // 通知提示
   notify(content) {
@@ -53,18 +54,18 @@ export default {
   },
   // 确认窗体
   confirm(content) {
-    return MessageBox.confirm(content, "系统提示", {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: "warning",
+    return MessageBox.confirm(content, i18n.t('system.tip'), {
+      confirmButtonText: i18n.t('form.confirm'),
+      cancelButtonText: i18n.t('form.cancel'),
+      type: 'warning'
     })
   },
   // 提交内容
   prompt(content) {
-    return MessageBox.prompt(content, "系统提示", {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: "warning",
+    return MessageBox.prompt(content, i18n.t('system.tip'), {
+      confirmButtonText: i18n.t('form.confirm'),
+      cancelButtonText: i18n.t('form.cancel'),
+      type: 'warning'
     })
   },
   // 打开遮罩层
@@ -72,8 +73,8 @@ export default {
     loadingInstance = Loading.service({
       lock: true,
       text: content,
-      spinner: "el-icon-loading",
-      background: "rgba(0, 0, 0, 0.7)",
+      spinner: 'el-icon-loading',
+      background: 'rgba(0, 0, 0, 0.7)'
     })
   },
   // 关闭遮罩层

src/views/system/menu/index.vue

@@ -302,8 +302,8 @@
         
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">{{$t('form.saveConfirm')}}</el-button>
+        <el-button @click="cancel">{{$t('form.cancel')}}</el-button>
       </div>
     </el-dialog>
   </div>
@@ -485,11 +485,10 @@ export default {
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
+      this.$modal.confirm(this.$t('form.confirmDelete')).then(function() {
         return delMenu(row.menuId)
       }).then(() => {
         this.getList()
-        this.$modal.msgSuccess("删除成功")
       }).catch(() => {})
     }
   }

src/views/system/role/index.vue

@@ -26,12 +26,8 @@
           clearable
           style="width: 240px"
         >
-          <el-option
-            v-for="dict in dict.type.sys_normal_disable"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
+          <el-option key="0" :label="$t('page.system.role.statusEnable')" value="0" />
+          <el-option key="1" :label="$t('page.system.role.statusDisable')" value="1" />
         </el-select>
       </el-form-item>
       <!-- <el-form-item label="创建时间">
@@ -130,7 +126,7 @@
           <el-button
             size="mini"
             type="text"
-            @click="handleUpdate(scope.row)"
+            @click="handleUpdate(scope.row,false)"
             v-hasPermi="['system:role:edit']"
           >{{$t('page.system.role.edit')}}</el-button>
 
@@ -153,14 +149,14 @@
           <el-button
             size="mini"
             type="text"
-            @click="handleUpdate(scope.row)"
+            @click="transfer(scope.row)"
             v-hasPermi="['system:role:edit']"
           >{{$t('page.system.role.allocate')}}</el-button>
 
           <el-button
             size="mini"
             type="text"
-            @click="handleUpdate(scope.row)"
+            @click="handleUpdate(scope.row,true)"
           >{{$t('page.system.role.detail')}}</el-button>
 
           <!-- <el-button
@@ -178,6 +174,16 @@
                 v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown> -->
+
+          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
+            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
+                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
+              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
+                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
         </template>
       </el-table-column>
     </el-table>
@@ -193,34 +199,40 @@
     <!-- 添加或修改角色配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="角色名称" prop="roleName">
-          <el-input v-model="form.roleName" placeholder="请输入角色名称" />
+        <el-form-item :label="$t('page.system.role.name')+'：'" prop="roleName">
+          <el-input v-model="form.roleName" :placeholder="$t('form.placeholderInput')" :readonly="readonly" />
         </el-form-item>
         <el-form-item prop="roleKey">
           <span slot="label">
-            <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
+            <!-- <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
               <i class="el-icon-question"></i>
-            </el-tooltip>
-            权限字符
+            </el-tooltip> -->
+            {{$t('page.system.role.key')}}：
           </span>
-          <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
+          <el-input v-model="form.roleKey" :placeholder="$t('form.placeholderInput')" :readonly="readonly" />
         </el-form-item>
-        <el-form-item label="角色顺序" prop="roleSort">
+        <!-- <el-form-item label="角色顺序" prop="roleSort">
           <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
+        </el-form-item> -->
+        <el-form-item :label="$t('page.system.role.status')+'：'" prop="status">
+          <el-select
+            v-model="form.status"
+            :placeholder="$t('form.placeholderSelect')"
+            style="width:100%"
+            :disabled="readonly"
+          >
+            <el-option key="0" :label="$t('page.system.role.statusEnable')" value="0" />
+            <el-option key="1" :label="$t('page.system.role.statusDisable')" value="1" />
+          </el-select>
+
         </el-form-item>
-        <el-form-item label="状态">
-          <el-radio-group v-model="form.status">
-            <el-radio
-              v-for="dict in dict.type.sys_normal_disable"
-              :key="dict.value"
-              :label="dict.value"
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
+         <el-form-item :label="$t('page.system.role.remark')+'：'">
+          <el-input v-model="form.remark" type="textarea" :placeholder="$t('form.placeholderSelect')" :readonly="readonly"></el-input>
         </el-form-item>
-        <el-form-item label="菜单权限">
-          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+        <el-form-item :label="$t('page.system.role.permit')+'：'">
+          <!-- <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
           <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
-          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox> -->
           <el-tree
             class="tree-border"
             :data="menuOptions"
@@ -228,17 +240,15 @@
             ref="menu"
             node-key="id"
             :check-strictly="!form.menuCheckStrictly"
-            empty-text="加载中，请稍候"
+            empty-text="loading"
             :props="defaultProps"
           ></el-tree>
         </el-form-item>
-        <el-form-item label="备注">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
-        </el-form-item>
+       
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
+      <div slot="footer" class="dialog-footer" v-if="!readonly">
+        <el-button type="primary" @click="submitForm">{{$t('form.saveConfirm')}}</el-button>
+        <el-button @click="cancel">{{$t('form.cancel')}}</el-button>
       </div>
     </el-dialog>
 
@@ -283,6 +293,16 @@
         <el-button @click="cancelDataScope">取 消</el-button>
       </div>
     </el-dialog>
+
+
+    <!-- 分配角色数据权限对话框 -->
+    <el-dialog :title="transferDialog.title" :visible.sync="transferDialog.visible" width="500px" append-to-body>
+      <el-transfer v-model="transferDialog.selected" :data="transferDialog.list"></el-transfer>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitDataScope">{{$t('form.saveConfirm')}}</el-button>
+        <el-button @click="cancelDataScope">{{$t('form.cancel')}}</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -365,14 +385,25 @@ export default {
       // 表单校验
       rules: {
         roleName: [
-          { required: true, message: "角色名称不能为空", trigger: "blur" }
+          { required: true, message: this.$t('page.system.role.name')+this.$t('page.system.role.notEmpty'), trigger: "blur" }
         ],
         roleKey: [
-          { required: true, message: "权限字符不能为空", trigger: "blur" }
+          { required: true, message: this.$t('page.system.role.key')+this.$t('page.system.role.notEmpty'), trigger: "blur" }
+        ],
+        status: [
+          { required: true, message: this.$t('page.system.role.status')+this.$t('page.system.role.notEmpty'), trigger: "change" }
         ],
-        roleSort: [
-          { required: true, message: "角色顺序不能为空", trigger: "blur" }
-        ]
+      },
+
+      readonly:false,
+      
+      transferDialog:{
+        title:this.$t('page.system.role.allocate'),
+        visible:false,
+        
+        list:[],
+        selected:[],
+
       }
     }
   },
@@ -418,9 +449,18 @@ export default {
     getRoleMenuTreeselect(roleId) {
       return roleMenuTreeselect(roleId).then(response => {
         this.menuOptions = response.menus
+        this.setDisabled(this.menuOptions)
         return response
       })
     },
+    setDisabled(arr) {
+      for (var i = 0; i < arr.length; i++) {
+        arr[i]['disabled'] = this.readonly
+        if (arr[i].children && arr[i].children.length > 0) {
+          this.setDisabled(arr[i].children)
+        }
+      }
+    },
     /** 根据角色ID查询部门树结构 */
     getDeptTree(roleId) {
       return deptTreeSelect(roleId).then(response => {
@@ -534,13 +574,16 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
+      this.readonly = false
       this.reset()
       this.getMenuTreeselect()
       this.open = true
-      this.title = "添加角色"
+      this.title = this.$t('page.system.role.addRole')
+      
     },
     /** 修改按钮操作 */
-    handleUpdate(row) {
+    handleUpdate(row,readonly) {
+      this.readonly = readonly
       this.reset()
       const roleId = row.roleId || this.ids
       const roleMenu = this.getRoleMenuTreeselect(roleId)
@@ -558,7 +601,7 @@ export default {
           })
         })
       })
-      this.title = "修改角色"
+      this.title = this.$t('page.system.role.modifyRole')
     },
     /** 选择角色权限范围触发 */
     dataScopeSelectChange(value) {
@@ -622,11 +665,10 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const roleIds = row.roleId || this.ids
-      this.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？').then(function() {
+      this.$modal.confirm(this.$t('form.confirmDelete')).then(function() {
         return delRole(roleIds)
       }).then(() => {
         this.getList()
-        this.$modal.msgSuccess("删除成功")
       }).catch(() => {})
     },
     /** 导出按钮操作 */
@@ -634,6 +676,10 @@ export default {
       this.download('system/role/export', {
         ...this.queryParams
       }, `role_${new Date().getTime()}.xlsx`)
+    },
+
+    transfer(){
+      this.transferDialog.visible = true
     }
   }
 }