角色授权手机菜单

src/api/system/role.js

@@ -117,3 +117,66 @@ export function deptTreeSelect(roleId) {
     method: 'get'
   })
 }
+
+// 获取手机菜单
+export function getRoleMobiles(roleId) {
+  return request({
+    url: '/system/role/getMobiles/' + roleId,
+    method: 'get'
+  })
+}
+
+// 编辑手机菜单
+export function setupRoleMobiles(id, data) {
+  return request({
+    url: '/system/role/setupMobiles/' + id,
+    method: 'post',
+    data: data
+  })
+}
+
+
+// 查询角色已授权手机菜单
+export function allocatedAppList(query) {
+  return request({
+    url: '/system/role/authApp/allocatedList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询角色未授权手机菜单
+export function unallocatedAppList(query) {
+  return request({
+    url: '/system/role/authApp/unallocatedList',
+    method: 'get',
+    params: query
+  })
+}
+
+// 取消手机菜单授权角色
+export function authAppCancel(data) {
+  return request({
+    url: '/system/role/authApp/cancel',
+    method: 'put',
+    data: data
+  })
+}
+
+// 批量取消手机菜单授权角色
+export function authAppCancelAll(data) {
+  return request({
+    url: '/system/role/authApp/cancelAll',
+    method: 'put',
+    params: data
+  })
+}
+
+// 授权手机菜单选择
+export function authAppSelectAll(data) {
+  return request({
+    url: '/system/role/authApp/selectAll',
+    method: 'put',
+    params: data
+  })
+}

src/router/index.js

@@ -120,6 +120,20 @@ export const dynamicRoutes = [
       }
     ]
   },
+  {
+    path: '/system/role-auth',
+    component: Layout,
+    hidden: true,
+    permissions: ['system:role:edit'],
+    children: [
+      {
+        path: 'app/:roleId(\\d+)',
+        component: () => import('@/views/system/role/authApp'),
+        name: 'AuthApp',
+        meta: { title: '手机菜单', activeMenu: '/system/role' }
+      }
+    ]
+  },
   {
     path: '/system/dict-data',
     component: Layout,

src/views/system/role/authApp.vue

@@ -0,0 +1,163 @@
+<template>
+  <div class="app-container">
+     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+       <el-form-item label="模块名称" prop="modelType">
+         <el-select v-model="queryParams.modelType" placeholder="请选择模块名称" clearable>
+           <el-option v-for="dict in dict.type.model_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+         </el-select>
+       </el-form-item>
+       <el-form-item label="菜单名称" prop="menuName">
+         <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
+       </el-form-item>
+       <el-form-item label="菜单状态" prop="menuStatus">
+         <el-select v-model="queryParams.menuStatus" placeholder="请选择菜单状态" clearable>
+           <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value"/>
+         </el-select>
+       </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="openSelectUser" v-hasPermi="['system:role:add']">添加授权</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="danger" plain icon="el-icon-circle-close" size="mini" :disabled="multiple" @click="cancelAuthUserAll" v-hasPermi="['system:role:remove']">批量取消授权</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-close" size="mini" @click="handleClose">关闭</el-button>
+      </el-col>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="menuappList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="模块名称" align="center" prop="modelType">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.model_type" :value="scope.row.modelType"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="菜单名称" align="center" prop="menuName" />
+      <el-table-column label="菜单路径" align="center" prop="menuUrl" />
+      <el-table-column label="菜单图标" align="center" prop="menuIcon" />
+      <el-table-column label="显示顺序" align="center" prop="menuNum" />
+      <el-table-column label="菜单状态" align="center" prop="menuStatus">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.menuStatus"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-circle-close" @click="cancelAuthUser(scope.row)" v-hasPermi="['system:role:remove']">取消授权</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+    <select-app ref="select" :roleId="queryParams.roleId" @ok="handleQuery" />
+  </div>
+</template>
+
+<script>
+
+import { allocatedAppList, authAppCancel, authAppCancelAll } from "@/api/system/role"
+import selectApp from "./selectApp"
+
+export default {
+  name: "AuthApp",
+  dicts: ['model_type', 'sys_normal_disable'],
+  components: { selectApp },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中用户组
+      appIds: [],
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      menuappList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleId: undefined,
+        modelType: null,
+        menuName: null,
+        menuStatus: null,
+      }
+    }
+  },
+  created() {
+    const roleId = this.$route.params && this.$route.params.roleId
+    if (roleId) {
+      this.queryParams.roleId = roleId
+      this.getList()
+    }
+  },
+  methods: {
+    /** 查询授权用户列表 */
+    getList() {
+      this.loading = true
+      allocatedAppList(this.queryParams).then(response => {
+          this.menuappList = response.rows
+          this.total = response.total
+          this.loading = false
+        }
+      )
+    },
+    // 返回按钮
+    handleClose() {
+      const obj = { path: "/system/role" }
+      this.$tab.closeOpenPage(obj)
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.appIds = selection.map(item => item.id)
+      this.multiple = !selection.length
+    },
+    /** 打开授权用户表弹窗 */
+    openSelectUser() {
+      this.$refs.select.show()
+    },
+    /** 取消授权按钮操作 */
+    cancelAuthUser(row) {
+      const roleId = this.queryParams.roleId
+      this.$modal.confirm('确认要取消该授权吗？').then(function() {
+        return authAppCancel({ appId: row.id, roleId: roleId })
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("取消授权成功")
+      }).catch(() => {})
+    },
+    /** 批量取消授权按钮操作 */
+    cancelAuthUserAll(row) {
+      const roleId = this.queryParams.roleId
+      const appIds = this.appIds.join(",")
+      this.$modal.confirm('是否取消选中菜单授权数据项？').then(function() {
+        return authAppCancelAll({ roleId: roleId, appIds: appIds })
+      }).then(() => {
+        this.getList()
+        this.$modal.msgSuccess("取消授权成功")
+      }).catch(() => {})
+    }
+  }
+}
+</script>

src/views/system/role/index.vue

@@ -105,12 +105,7 @@
       <el-table-column label="显示顺序" prop="roleSort" width="100" />
       <el-table-column label="状态" align="center" width="100">
         <template slot-scope="scope">
-          <el-switch
-            v-model="scope.row.status"
-            active-value="0"
-            inactive-value="1"
-            @change="handleStatusChange(scope.row)"
-          ></el-switch>
+          <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
         </template>
       </el-table-column>
       <el-table-column label="创建时间" align="center" prop="createTime" width="180">
@@ -119,28 +114,15 @@
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:role:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:role:remove']"
-          >删除</el-button>
+        <template slot-scope="scope">
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"  v-if="scope.row.roleId !== 1">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"  v-if="scope.row.roleId !== 1">删除</el-button>
           <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-item command="handleDataScope" icon="el-icon-circle-check" v-hasPermi="['system:role:edit']" v-if="scope.row.roleId !== 1">数据权限</el-dropdown-item>
+              <el-dropdown-item command="handleAuthUser" icon="el-icon-user" v-hasPermi="['system:role:edit']" v-if="scope.row.roleId !== 1">分配用户</el-dropdown-item>
+              <el-dropdown-item command="handleAuthApp" icon="el-icon-user" v-hasPermi="['system:role:mobile']">手机菜单</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </template>
@@ -248,13 +230,15 @@
         <el-button @click="cancelDataScope">取 消</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, getRoleMobiles, setupRoleMobiles } from "@/api/system/role"
 import { treeselect as menuTreeselect, roleMenuTreeselect } from "@/api/system/menu"
-
+import { listMenuapp } from "@/api/system/menuapp"
 export default {
   name: "Role",
   dicts: ['sys_normal_disable'],
@@ -338,11 +322,16 @@ export default {
         roleSort: [
           { required: true, message: "角色顺序不能为空", trigger: "blur" }
         ]
-      }
+      },
+      mobileList: [],
+
     }
   },
   created() {
-    this.getList()
+    this.getList();
+    listMenuapp({sysNormalDisable: '0', translate_dict: 1}).then((resp) => {
+      this.mobileList = resp.rows;
+    });
   },
   methods: {
     /** 查询角色列表 */
@@ -463,6 +452,9 @@ export default {
         case "handleAuthUser":
           this.handleAuthUser(row)
           break
+        case "handleAuthApp":
+          this.handleAuthApp(row)
+          break
         default:
           break
       }
@@ -551,6 +543,11 @@ export default {
       const roleId = row.roleId
       this.$router.push("/system/role-auth/user/" + roleId)
     },
+    /** 分配手机菜单操作 */
+    handleAuthApp: function(row) {
+      const roleId = row.roleId
+      this.$router.push("/system/role-auth/app/" + roleId)
+    },
     /** 提交按钮 */
     submitForm: function() {
       this.$refs["form"].validate(valid => {
@@ -599,7 +596,10 @@ export default {
       this.download('system/role/export', {
         ...this.queryParams
       }, `role_${new Date().getTime()}.xlsx`)
-    }
+    },
+
+
+
   }
 }
-</script>
+</script>

src/views/system/role/selectApp.vue

@@ -0,0 +1,129 @@
+<template>
+  <!-- 授权用户 -->
+  <el-dialog title="选择手机菜单" :visible.sync="visible" width="1000px" top="5vh" append-to-body>
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
+      <el-form-item label="模块名称" prop="modelType">
+        <el-select v-model="queryParams.modelType" placeholder="请选择模块名称" clearable>
+          <el-option v-for="dict in dict.type.model_type" :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="菜单名称" prop="menuName">
+        <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery"/>
+      </el-form-item>
+      <el-form-item label="菜单状态" prop="menuStatus">
+        <el-select v-model="queryParams.menuStatus" placeholder="请选择菜单状态" clearable>
+          <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row>
+      <el-table @row-click="clickRow" ref="table" :data="userList" @selection-change="handleSelectionChange" height="260px">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column label="模块名称" align="center" prop="modelType">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.model_type" :value="scope.row.modelType"/>
+          </template>
+        </el-table-column>
+        <el-table-column label="菜单名称" align="center" prop="menuName" />
+        <el-table-column label="菜单路径" align="center" prop="menuUrl" />
+        <el-table-column label="菜单图标" align="center" prop="menuIcon" />
+        <el-table-column label="显示顺序" align="center" prop="menuNum" />
+        <el-table-column label="菜单状态" align="center" prop="menuStatus">
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.menuStatus"/>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
+    </el-row>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="handleSelectApp">确 定</el-button>
+      <el-button @click="visible = false">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { unallocatedAppList, authAppSelectAll } from "@/api/system/role"
+export default {
+  dicts: ['model_type', 'sys_normal_disable'],
+  props: {
+    // 角色编号
+    roleId: {
+      type: [Number, String]
+    }
+  },
+  data() {
+    return {
+      // 遮罩层
+      visible: false,
+      // 选中数组值
+      appIds: [],
+      // 总条数
+      total: 0,
+      // 未授权用户数据
+      userList: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleId: null,
+        modelType: null,
+        menuName: null,
+        menuStatus: null,
+      }
+    }
+  },
+  methods: {
+    // 显示弹框
+    show() {
+      this.queryParams.roleId = this.roleId
+      this.getList()
+      this.visible = true
+    },
+    clickRow(row) {
+      this.$refs.table.toggleRowSelection(row)
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.appIds = selection.map(item => item.id)
+    },
+    // 查询表数据
+    getList() {
+      unallocatedAppList(this.queryParams).then(res => {
+        this.userList = res.rows
+        this.total = res.total
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm")
+      this.handleQuery()
+    },
+    /** 选择授权用户操作 */
+    handleSelectApp() {
+      const roleId = this.queryParams.roleId
+      const appIds = this.appIds.join(",")
+      if (appIds == "") {
+        this.$modal.msgError("请选择要分配的用户")
+        return
+      }
+      authAppSelectAll({ roleId: roleId, appIds: appIds }).then(res => {
+        this.$modal.msgSuccess(res.msg)
+        this.visible = false
+        this.$emit("ok")
+      })
+    }
+  }
+}
+</script>