feat:[系统管理] [角色管理] 按照原型进行界面调整

package.json

@@ -36,6 +36,7 @@
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "lodash": "^4.17.21",
     "nprogress": "0.2.0",
     "quill": "2.0.2",
     "screenfull": "5.0.2",

src/api/system/role.js

@@ -117,3 +117,12 @@ export function deptTreeSelect(roleId) {
     method: 'get'
   })
 }
+
+// 设置角色的用户
+export function authUserSetAll(data) {
+  return request({
+    url: '/system/role/authUser/setAll',
+    method: 'post',
+    data
+  })
+}

src/lang/en.js

@@ -129,10 +129,14 @@ export default {
 
         addRole: 'addRole',
         modifyRole: 'modifyRole',
-        notEmpty: ' can not be empty'
+        notEmpty: ' can not be empty',
+
+        filterPlaceholder: 'name/mobile',
+        unauthorized: 'unauthorized',
+        authorized: 'authorized'
       }
     },
-    business:{
+    business: {
       zykgl: {
         zjzt: {
           rk: '入库',
@@ -145,7 +149,7 @@ export default {
         jyzt: {
           wjy: '未借阅',
           djy: '待借阅',
-          jyz: '借阅中',
+          jyz: '借阅中'
         },
         zjzt: {
           wsd: '未锁定',
@@ -168,7 +172,7 @@ export default {
           glyj: '关联药剂',
           ffys: '发放钥匙',
           gh: '归还',
-          ysgh: '钥匙归还',
+          ysgh: '钥匙归还'
         }
       }
     }

src/lang/zh.js

@@ -129,7 +129,11 @@ export default {
 
         addRole: '新增角色',
         modifyRole: '编辑角色',
-        notEmpty: '不能为空'
+        notEmpty: '不能为空',
+
+        filterPlaceholder: '姓名/手机号',
+        unauthorized: '未授权',
+        authorized: '已授权'
       }
     },
     business: {
@@ -145,7 +149,7 @@ export default {
         jyzt: {
           wjy: '未借阅',
           djy: '待借阅',
-          jyz: '借阅中',
+          jyz: '借阅中'
         },
         zjzt: {
           wsd: '未锁定',
@@ -168,7 +172,7 @@ export default {
           glyj: '关联药剂',
           ffys: '发放钥匙',
           gh: '归还',
-          ysgh: '钥匙归还',
+          ysgh: '钥匙归还'
         }
       }
     }

src/main.js

@@ -79,6 +79,8 @@ DictData.install()
  */
 import i18n from './lang'
 
+import _ from 'lodash'
+
 Vue.use(Element, {
   i18n: (key, value) => i18n.t(key, value),
   size: Cookies.get('size') || 'medium' // set element-ui default size

src/views/system/role/index.vue

@@ -133,7 +133,7 @@
           <el-button
             size="mini"
             type="text"
-            @click="handleUpdate(scope.row)"
+            @click="handleStatusChange(scope.row)"
             v-hasPermi="['system:role:edit']"
             v-if="scope.row.status==='0'"
           >{{$t('page.system.role.statusDisable')}}</el-button>
@@ -141,7 +141,7 @@
           <el-button
             size="mini"
             type="text"
-            @click="handleUpdate(scope.row)"
+            @click="handleStatusChange(scope.row)"
             v-hasPermi="['system:role:edit']"
             v-if="scope.row.status==='1'"
           >{{$t('page.system.role.statusEnable')}}</el-button>
@@ -175,7 +175,7 @@
             </el-dropdown-menu>
           </el-dropdown> -->
 
-          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
+          <!-- <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"
@@ -183,7 +183,7 @@
               <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
                 v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
             </el-dropdown-menu>
-          </el-dropdown>
+          </el-dropdown> -->
         </template>
       </el-table-column>
     </el-table>
@@ -296,18 +296,22 @@
 
 
     <!-- 分配角色数据权限对话框 -->
-    <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>
+    <el-dialog :title="transferDialog.title" :visible.sync="transferDialog.visible" width="750px" append-to-body>
+      <el-transfer class="role-transfer" v-model="transferDialog.selected" :data="transferDialog.list" :titles="[$t('page.system.role.unauthorized'), $t('page.system.role.authorized')]"
+        filterable
+        :filter-method="filterMethod"
+        :filter-placeholder="$t('page.system.role.filterPlaceholder')">
+      </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>
+        <el-button type="primary" @click="changRoleUser">{{$t('form.saveConfirm')}}</el-button>
+        <el-button @click="transferDialog.visible = false">{{$t('form.cancel')}}</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect } from "@/api/system/role"
+import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, deptTreeSelect,allocatedUserList,authUserSetAll } from "@/api/system/role"
 import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu"
 
 export default {
@@ -403,6 +407,7 @@ export default {
         
         list:[],
         selected:[],
+        roleId:''
 
       }
     }
@@ -470,14 +475,18 @@ export default {
     },
     // 角色状态修改
     handleStatusChange(row) {
-      let text = row.status === "0" ? "启用" : "停用"
-      this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
-        return changeRoleStatus(row.roleId, row.status)
-      }).then(() => {
-        this.$modal.msgSuccess(text + "成功")
-      }).catch(function() {
-        row.status = row.status === "0" ? "1" : "0"
+      changeRoleStatus(row.roleId, row.status === "0"?'1':'0').then(response => {
+        this.getList()
       })
+
+      // let text = row.status === "0" ? "启用" : "停用"
+      // this.$modal.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？').then(function() {
+      //   return changeRoleStatus(row.roleId, row.status)
+      // }).then(() => {
+      //   this.$modal.msgSuccess(text + "成功")
+      // }).catch(function() {
+      //   row.status = row.status === "0" ? "1" : "0"
+      // })
     },
     // 取消按钮
     cancel() {
@@ -678,9 +687,38 @@ export default {
       }, `role_${new Date().getTime()}.xlsx`)
     },
 
-    transfer(){
-      this.transferDialog.visible = true
+    transfer(row){
+      allocatedUserList({roleId:row.roleId}).then(response => {
+          let list = []
+          _.forEach(response.list,(item)=>{
+            list.push({
+              key:item.userId,
+              label:`${item.nickName}(${item.phonenumber})`
+            })
+          })
+          this.transferDialog.selected = response.selected
+          this.transferDialog.list = list
+          this.transferDialog.roleId = row.roleId
+          this.transferDialog.visible = true
+        }
+      )
+    },
+    filterMethod(query, item){
+      return item.label.indexOf(query) > -1;
+    },
+    changRoleUser(){
+      authUserSetAll({ roleId: this.transferDialog.roleId, userIdList: this.transferDialog.selected && this.transferDialog.selected.length>0 ? this.transferDialog.selected:[] }).then(res => {
+        this.transferDialog.visible = false
+      }) 
     }
   }
 }
-</script>
+</script>
+<style lang="scss">
+.role-transfer{
+  .el-transfer-panel{
+    width: 250px;
+  }
+}
+
+</style>