d

src/api/system/role.js

@@ -157,4 +157,13 @@ export function setSysTableCfgIsShow(cfgId, isShow, menuId, roleId) {
     method: 'put',
     data: data
   })
+}
+
+// 修改保存角色部门
+export function changeDept(data) {
+  return request({
+    url: '/system/role/changeDept',
+    method: 'put',
+    data: data
+  })
 }

src/views/system/role/index.vue

@@ -36,21 +36,13 @@
 							<el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['system:role:edit']" @click="handleUpdate(scope.row)">修改</el-button>
 							<el-button size="mini" type="text" icon="el-icon-remove-outline" @click="handleStatusChange(scope.row)">{{ scope.row.status == '0' ? '禁用' : '启用' }}</el-button>
 							<el-button size="mini" type="text" icon="el-icon-delete-solid" v-hasPermi="['system:role:remove']" @click="handleDelete(scope.row)">删除</el-button>
+							<el-button size="mini" type="text" icon="el-icon-edit" v-hasPermi="['system:role:edit']" @click="roleDepartments(scope.row)">角色部门</el-button>
 						</template>
 					</el-table-column>
 				</el-table>
 
 				<!-- 功能权限列表 -->
-				<el-table
-					v-loading="loading"
-					:data="FuncListTree"
-					row-key="menuId"
-					:tree-props="{ children: 'children' }"
-					border
-					:cell-style="{ cursor: 'pointer' }"
-					@row-click="functionalLineClick"
-					v-show="functionalShow"
-				>
+				<el-table v-loading="loading" :data="FuncListTree" row-key="menuId" :tree-props="{ children: 'children' }" border :cell-style="{ cursor: 'pointer' }" @row-click="functionalLineClick" v-show="functionalShow">
 					<el-table-column label="名称" prop="menuName" width="200">
 						<template slot-scope="scope">
 							<a href="javascript:void(0);" class="linked" @click="functionalLineDbclick(scope.row)">{{ scope.row.menuName }}</a>
@@ -83,15 +75,7 @@
 					<el-table-column label="列名称" prop="columnName" width="200" />
 					<el-table-column label="状态" class-name="small-padding fixed-width">
 						<template slot-scope="scope">
-							<el-button
-								size="mini"
-								:disabled="disabled"
-								type="text"
-								icon="el-icon-remove-outline"
-								:style="{ color: scope.row.isShow == 0 ? '#409EFF' : '#909399' }"
-								@click="showOrHide(scope.row)"
-								>显示</el-button
-							>
+							<el-button size="mini" :disabled="disabled" type="text" icon="el-icon-remove-outline" :style="{ color: scope.row.isShow == 0 ? '#409EFF' : '#909399' }" @click="showOrHide(scope.row)">显示</el-button>
 						</template>
 					</el-table-column>
 				</el-table>
@@ -118,29 +102,28 @@
 						<el-button size="small" @click="cancel">取 消</el-button>
 					</div>
 				</el-dialog>
+
+				<!-- 角色部门对话框 -->
+				<el-dialog title="角色部门" :visible.sync="roleDepartmentOpen" width="500px" append-to-body>
+					<Treeselect v-model="deptIds" :disable-branch-nodes="true" search-nested :multiple="true" :options="roleDeptOptions" />
+					<div slot="footer" class="dialog-footer">
+						<el-button size="small" @click="cancelRoleDepartment">取 消</el-button>
+						<el-button size="small" type="primary" @click="saveRoleDepartment">确 定</el-button>
+					</div>
+				</el-dialog>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script>
-import {
-	listRole,
-	getRole,
-	delRole,
-	addRole,
-	updateRole,
-	dataScope,
-	changeRoleStatus,
-	getRoleMenuTreeselect,
-	saveRoleMenu,
-	getTableHeadList,
-	authUserCancelAll,
-	setSysTableCfgIsShow
-} from '@/api/system/role'
+import { listRole, getRole, delRole, addRole, updateRole, dataScope, changeRoleStatus, getRoleMenuTreeselect, saveRoleMenu, getTableHeadList, authUserCancelAll, setSysTableCfgIsShow, changeDept } from '@/api/system/role'
 import { treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/menu'
-import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/system/dept'
+// import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/system/dept'
 import pinyin from 'js-pinyin'
+import { treeselect } from '@/api/system/dept'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 export default {
 	name: 'Role',
@@ -168,6 +151,7 @@ export default {
 			// 菜单列表
 			menuOptions: [],
 			// 部门列表
+			roleDeptOptions: undefined,
 			deptOptions: [],
 			// 查询参数
 			queryParams: {
@@ -207,9 +191,14 @@ export default {
 			listName: '',
 			menuId: '',
 			checkStatus: -1,
-			disabled: false
+			disabled: false,
+			roleDepartmentOpen: false,
+			deptIds: []
 		}
 	},
+	components: {
+		Treeselect
+	},
 	created() {
 		this.getList()
 	},
@@ -237,7 +226,7 @@ export default {
 		/** 查询角色列表 */
 		getList() {
 			this.loading = true
-			listRole(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
+			listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
 				this.roleList = response.rows
 				this.total = response.total
 				this.loading = false
@@ -262,7 +251,7 @@ export default {
 				this.FuncList = []
 				this.FuncListTree = []
 				this.roleId = row.roleId
-				getRoleMenuTreeselect(row.roleId).then((res) => {
+				getRoleMenuTreeselect(row.roleId).then(res => {
 					if (res.code === 200) {
 						this.checkedKeys = res.data.checkedKeys
 						this.functionList = res.data.menus
@@ -300,7 +289,7 @@ export default {
 			this.listName = row.menuName
 			this.menuId = row.menuId
 			this.checkStatus = this.isChecked(row) ? 0 : 1
-			getTableHeadList(this.roleId, row.menuId, this.checkStatus).then((res) => {
+			getTableHeadList(this.roleId, row.menuId, this.checkStatus).then(res => {
 				this.headList = res.data
 			})
 		},
@@ -310,16 +299,16 @@ export default {
 		},
 		/** 查询菜单树结构 */
 		getMenuTreeselect() {
-			menuTreeselect().then((response) => {
+			menuTreeselect().then(response => {
 				this.menuOptions = response.data
 			})
 		},
 		/** 查询部门树结构 */
-		getDeptTreeselect() {
-			deptTreeselect().then((response) => {
-				this.deptOptions = response.data
-			})
-		},
+		// getDeptTreeselect() {
+		// 	deptTreeselect().then(response => {
+		// 		this.roleDeptOptions = response.data
+		// 	})
+		// },
 		// 所有菜单节点数据
 		// getMenuAllCheckedKeys() {
 		//   // 目前被选中的菜单节点
@@ -340,14 +329,14 @@ export default {
 		// },
 		/** 根据角色ID查询菜单树结构 */
 		getRoleMenuTreeselect(roleId) {
-			return roleMenuTreeselect(roleId).then((response) => {
+			return roleMenuTreeselect(roleId).then(response => {
 				this.menuOptions = response.menus
 				return response
 			})
 		},
 		/** 根据角色ID查询部门树结构 */
 		getRoleDeptTreeselect(roleId) {
-			return roleDeptTreeselect(roleId).then((response) => {
+			return roleDeptTreeselect(roleId).then(response => {
 				this.deptOptions = response.depts
 				return response
 			})
@@ -368,6 +357,33 @@ export default {
 					row.status = row.status === '0' ? '1' : '0'
 				})
 		},
+		// 角色部门
+		roleDepartments(row) {
+			console.log(row)
+			this.deptIds = row.deptIds.split(',')
+			this.roleId = row.roleId
+			treeselect().then(response => {
+				this.roleDeptOptions = response.data
+				this.roleDepartmentOpen = true
+			})
+		},
+		// 保存角色部门
+		saveRoleDepartment() {
+			let paramsStr = this.deptIds.join(',')
+			changeDept({ deptIds: paramsStr, roleId: this.roleId }).then(res => {
+				if (res.code === 200) {
+					this.roleDepartmentOpen = false
+					this.deptIds = []
+					this.$msg({ message: '修改成功' })
+				}
+			})
+		},
+		// 取消角色部门
+		cancelRoleDepartment() {
+			this.roleDepartmentOpen = false
+			this.deptIds = []
+			this.roleId = ''
+		},
 		// 修改功能操作权限
 		updateBtn(e, obj1) {
 			let obj = {
@@ -383,9 +399,9 @@ export default {
 			// 	parent = this.functionList.find((item) => item.menuId == parent.parentId)
 			// }
 			if (this.checkedKeys.includes(e.menuId)) {
-				authUserCancelAll(arr).then((res) => {
+				authUserCancelAll(arr).then(res => {
 					if (res.code == 200) {
-						this.checkedKeys = this.checkedKeys.filter((item) => item != e.menuId)
+						this.checkedKeys = this.checkedKeys.filter(item => item != e.menuId)
 						this.$msg({ message: '修改成功' })
 					}
 				})
@@ -399,7 +415,7 @@ export default {
 				// 	}
 				// 	arrs.push(e)
 				// });
-				saveRoleMenu(arr).then((res) => {
+				saveRoleMenu(arr).then(res => {
 					if (res.code == 200) {
 						this.checkedKeys.push(e.menuId)
 						this.$msg({ message: '修改成功' })
@@ -460,7 +476,7 @@ export default {
 		// 表头权限显示
 		showOrHide(row) {
 			let iss = row.isShow === '1' ? '0' : '1'
-			setSysTableCfgIsShow(row.id, iss, this.menuId, this.roleId).then((res) => {
+			setSysTableCfgIsShow(row.id, iss, this.menuId, this.roleId).then(res => {
 				if (res.code == 200) {
 					row.isShow = row.isShow == '1' || row.isShow == null ? '0' : '1'
 					this.$msg({ message: '修改成功' })
@@ -564,13 +580,13 @@ export default {
 				}
 				let arr = []
 				arr.push(obj)
-				saveRoleMenu(arr).then((res) => {
+				saveRoleMenu(arr).then(res => {
 					if (res.code == 200) {
 						this.$msg({ message: '修改成功' })
 					}
 				})
 			} else {
-				this.checkedKeys = this.checkedKeys.filter((f) => f != item.menuId)
+				this.checkedKeys = this.checkedKeys.filter(f => f != item.menuId)
 				this.checkStatus = 1
 				this.disabled = true
 				let obj = {
@@ -579,7 +595,7 @@ export default {
 				}
 				let arr = []
 				arr.push(obj)
-				authUserCancelAll(arr).then((res) => {
+				authUserCancelAll(arr).then(res => {
 					if (res.code == 200) {
 						this.$msg({ message: '修改成功' })
 					}
@@ -598,7 +614,7 @@ export default {
 			this.reset()
 			const roleId = row.roleId || this.ids
 			// const roleMenu = this.getRoleMenuTreeselect(roleId);
-			getRole(roleId).then((response) => {
+			getRole(roleId).then(response => {
 				this.form = response.data
 				this.open = true
 				// this.$nextTick(() => {
@@ -624,7 +640,7 @@ export default {
 		handleDataScope(row) {
 			this.reset()
 			const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId)
-			getRole(row.roleId).then((response) => {
+			getRole(row.roleId).then(response => {
 				this.form = response.data
 				this.openDataScope = true
 				// this.$nextTick(() => {
@@ -642,12 +658,12 @@ export default {
 		// },
 		/** 提交按钮 */
 		submitForm: function () {
-			this.$refs['form'].validate((valid) => {
+			this.$refs['form'].validate(valid => {
 				if (valid) {
 					if (this.form.roleId != undefined) {
 						// this.form.menuIds = this.getMenuAllCheckedKeys();
 						this.form.menuIds = []
-						updateRole(this.form).then((response) => {
+						updateRole(this.form).then(response => {
 							console.log(response)
 							this.$modal.msgSuccess('修改成功')
 							this.open = false
@@ -657,7 +673,7 @@ export default {
 						// this.form.menuIds = this.getMenuAllCheckedKeys();
 						let val = this.form.roleName
 						this.form.roleKey = pinyin.getFullChars(val)
-						addRole(this.form).then((response) => {
+						addRole(this.form).then(response => {
 							this.$modal.msgSuccess('新增成功')
 							this.open = false
 							this.getList()
@@ -670,7 +686,7 @@ export default {
 		submitDataScope: function () {
 			if (this.form.roleId != undefined) {
 				this.form.deptIds = this.getDeptAllCheckedKeys()
-				dataScope(this.form).then((response) => {
+				dataScope(this.form).then(response => {
 					this.$modal.msgSuccess('修改成功')
 					this.openDataScope = false
 					this.getList()
@@ -685,7 +701,7 @@ export default {
 				.then(function () {
 					return delRole(roleIds)
 				})
-				.then((res) => {
+				.then(res => {
 					if (res.code === 200) {
 						this.getList()
 						this.$modal.msgSuccess('删除成功')
@@ -716,7 +732,7 @@ export default {
 				return
 			}
 			let res = []
-			parent.children.forEach((item) => {
+			parent.children.forEach(item => {
 				if (item.menuType == 'C') {
 					res.push(item)
 				} else {
@@ -728,17 +744,17 @@ export default {
 		//寻找子id集合
 		findChildrenIds(parent) {
 			if (parent.menuType == 'M') {
-				let childIds = this.findIds(parent).map((item) => item.menuId)
-				return this.btnList.filter((item) => childIds.includes(item.parentId)).map((item) => item.menuId)
+				let childIds = this.findIds(parent).map(item => item.menuId)
+				return this.btnList.filter(item => childIds.includes(item.parentId)).map(item => item.menuId)
 			} else if (parent.menuType == 'C') {
-				return this.btnList.filter((item) => item.parentId == parent.menuId).map((item) => item.menuId)
+				return this.btnList.filter(item => item.parentId == parent.menuId).map(item => item.menuId)
 			}
 		}
 	},
 	computed: {
 		btnListss() {
 			return function (pid) {
-				return this.btnList.filter((item) => item.parentId == pid)
+				return this.btnList.filter(item => item.parentId == pid)
 			}
 		},
 		isChecked() {