ff

src/views/system/role/index.vue

@@ -97,6 +97,8 @@
 			row-key="menuId"
 			:tree-props="{ children: 'children' }"
 			border
+			:row-class-name="tableRowClassName"
+			:row-style="selectedstyle1"
 			class="roleTable"
 			@row-click="functionalLineClick"
 			@row-dblclick="functionalLineDbclick"
@@ -106,7 +108,7 @@
 			<el-table-column label="描述" prop="remark" width="231" />
 			<el-table-column label="权限" prop="createTime" width="55" align="center">
 				<template slot-scope="scope">
-					<span><input type="checkbox" :checked="isChecked(scope.row)" @change="handleCheckedTreeConnect($event, 'menu', scope.row)" /></span>
+					<span><input type="checkbox" v-if="findChildrenIds(scope.row).length" :checked="isChecked(scope.row)" @change="handleCheckedTreeConnect($event, 'menu', scope.row)" /></span>
 				</template>
 			</el-table-column>
 			<el-table-column label="操作" class-name="small-padding fixed-width">
@@ -125,23 +127,25 @@
 		</el-table>
 
 		<!-- 表头权限列表 -->
-		<el-table v-loading="loading" :data="headList" border stripe class="dataTable" @row-click="headlLineClick" v-show="headShow">
+		<el-table v-loading="loading" :data="headList" border :row-class-name="tableRowClassName" :row-style="selectedstyle2" class="dataTable" @row-click="headlLineClick" v-show="headShow">
 			<el-table-column label="列表名称" width="198">{{ listName }}</el-table-column>
 			<el-table-column label="列名称" prop="columnName" width="298" />
 			<el-table-column label="状态" class-name="small-padding fixed-width" width="159">
 				<template slot-scope="scope">
-					<el-button size="mini" 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>
 
-		<!-- <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    /> -->
+		<pagination v-show="total > 0 && roleShow" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
 
 		<!-- 添加或修改角色配置对话框 -->
 		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -236,613 +240,669 @@
 </template>
 
 <script>
-	import {
-		listRole,
-		getRole,
-		delRole,
-		addRole,
-		updateRole,
-		dataScope,
-		changeRoleStatus,
-		getRoleMenuTreeselect,
-		saveRoleMenu,
-		getTableHeadList,
-		authUserCancelAll,
-		setSysTableCfgIsShow
-	} from '@/api/system/role'
-	import { treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/menu'
-	import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/system/dept'
-	import pinyin from 'js-pinyin'
+import {
+	listRole,
+	getRole,
+	delRole,
+	addRole,
+	updateRole,
+	dataScope,
+	changeRoleStatus,
+	getRoleMenuTreeselect,
+	saveRoleMenu,
+	getTableHeadList,
+	authUserCancelAll,
+	setSysTableCfgIsShow
+} from '@/api/system/role'
+import { treeselect as menuTreeselect, roleMenuTreeselect } from '@/api/system/menu'
+import { treeselect as deptTreeselect, roleDeptTreeselect } from '@/api/system/dept'
+import pinyin from 'js-pinyin'
 
-	export default {
-		name: 'Role',
-		dicts: ['sys_normal_disable'],
-		data() {
-			return {
-				// 遮罩层
-				loading: true,
-				// 选中数组
-				ids: [],
-				// 非单个禁用
-				single: true,
-				// 非多个禁用
-				multiple: true,
-				// 显示搜索条件
-				showSearch: true,
-				// 总条数
-				total: 0,
-				// 角色表格数据
-				roleList: [],
-				// 弹出层标题
-				title: '',
-				// 是否显示弹出层
-				open: false,
-				// 是否显示弹出层（数据权限）
-				openDataScope: false,
-				menuExpand: false,
-				menuNodeAll: false,
-				deptExpand: true,
-				deptNodeAll: false,
-				// 日期范围
-				dateRange: [],
-				// 数据范围选项
-				dataScopeOptions: [
-					{
-						value: '1',
-						label: '全部数据权限'
-					},
-					{
-						value: '2',
-						label: '自定数据权限'
-					},
-					{
-						value: '3',
-						label: '本部门数据权限'
-					},
-					{
-						value: '4',
-						label: '本部门及以下数据权限'
-					},
-					{
-						value: '5',
-						label: '仅本人数据权限'
-					}
-				],
-				// 菜单列表
-				menuOptions: [],
-				// 部门列表
-				deptOptions: [],
-				// 查询参数
-				queryParams: {
-					pageNum: 1,
-					pageSize: 10,
-					roleName: undefined,
-					roleKey: undefined,
-					status: undefined
+export default {
+	name: 'Role',
+	dicts: ['sys_normal_disable'],
+	data() {
+		return {
+			// 遮罩层
+			loading: true,
+			// 选中数组
+			ids: [],
+			// 非单个禁用
+			single: true,
+			// 非多个禁用
+			multiple: true,
+			// 显示搜索条件
+			showSearch: true,
+			// 总条数
+			total: 0,
+			// 角色表格数据
+			roleList: [],
+			// 弹出层标题
+			title: '',
+			// 是否显示弹出层
+			open: false,
+			// 是否显示弹出层（数据权限）
+			openDataScope: false,
+			menuExpand: false,
+			menuNodeAll: false,
+			deptExpand: true,
+			deptNodeAll: false,
+			// 日期范围
+			dateRange: [],
+			// 数据范围选项
+			dataScopeOptions: [
+				{
+					value: '1',
+					label: '全部数据权限'
 				},
-				// 表单参数
-				form: {},
-				form1: {},
-				defaultProps: {
-					children: 'children',
-					label: 'label'
+				{
+					value: '2',
+					label: '自定数据权限'
 				},
-				// 表单校验
-				rules: {
-					roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
+				{
+					value: '3',
+					label: '本部门数据权限'
 				},
-				roleShow: true,
-				functionalShow: false,
-				headShow: false,
-				over: 1,
-				background: '',
-				getIndex: null,
-				getIndex1: null,
-				getIndex2: null,
-				functionList: [], // 功能权限列表
-				btnList: [], // 功能权限按钮列表
-				headList: [],
-				FuncList: [],
-				FuncListTree: [],
-				objRole: {},
-				btnsLists: [],
-				btnsList: [],
-				checkedKeys: [],
-				checked: false,
-				roleId: '',
-				listName: '',
-				menuId: ''
+				{
+					value: '4',
+					label: '本部门及以下数据权限'
+				},
+				{
+					value: '5',
+					label: '仅本人数据权限'
+				}
+			],
+			// 菜单列表
+			menuOptions: [],
+			// 部门列表
+			deptOptions: [],
+			// 查询参数
+			queryParams: {
+				pageNum: 1,
+				pageSize: 10,
+				roleName: undefined,
+				roleKey: undefined,
+				status: undefined
+			},
+			// 表单参数
+			form: {},
+			form1: {},
+			defaultProps: {
+				children: 'children',
+				label: 'label'
+			},
+			// 表单校验
+			rules: {
+				roleName: [{ required: true, message: '角色名称不能为空', trigger: 'blur' }]
+			},
+			roleShow: true,
+			functionalShow: false,
+			headShow: false,
+			over: 1,
+			background: '',
+			getIndex: null,
+			getIndex1: null,
+			getIndex2: null,
+			functionList: [], // 功能权限列表
+			btnList: [], // 功能权限按钮列表
+			headList: [],
+			FuncList: [],
+			FuncListTree: [],
+			objRole: {},
+			objFun: {},
+			btnsLists: [],
+			btnsList: [],
+			checkedKeys: [],
+			checked: false,
+			roleId: '',
+			listName: '',
+			menuId: '',
+			checkStatus: -1,
+			disabled: false
+		}
+	},
+	created() {
+		this.getList()
+	},
+	filters: {},
+	methods: {
+		// 角色列表
+		getRole() {
+			this.getList()
+			this.over = 1
+			this.roleShow = true
+			this.functionalShow = false
+			this.headShow = false
+		},
+		// 功能权限列表
+		getFunctionalAuthority() {
+			this.roleLineDbclick(this.objRole)
+			this.headShow = false
+		},
+		// 表头权限；列表
+		getHeaderPermission() {
+			this.functionalLineDbclick(this.objFun)
+		},
+		/** 查询角色列表 */
+		getList() {
+			this.loading = true
+			listRole(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
+				this.roleList = response.rows
+				this.total = response.total
+				this.loading = false
+			})
+		},
+		// 单击角色表格某一行 行点击事件,这里获取到的行对象(row)是没有index属性的
+		roleLineClick(row) {
+			this.getIndex = row.index
+			this.objRole = row
+		},
+		//设置行对象(row)的样式(style)
+		selectedstyle({ row, rowIndex }) {
+			if (this.getIndex === rowIndex) {
+				return {
+					'background-color': '#EBEEF5'
+				}
 			}
 		},
-		created() {
-			this.getList()
+		selectedstyle1({ row, rowIndex }) {
+			if (this.getIndex1 === rowIndex) {
+				return {
+					'background-color': '#EBEEF5'
+				}
+			}
 		},
-		filters: {},
-		methods: {
-			// 角色列表
-			getRole() {
-				this.getList()
-				this.over = 1
-				this.roleShow = true
-				this.functionalShow = false
-				this.headShow = false
-			},
-			// 功能权限列表
-			getFunctionalAuthority() {
-				this.roleLineDbclick(this.objRole)
-				this.headShow = false
-			},
-			// 表头权限；列表
-			getHeaderPermission() {},
-			/** 查询角色列表 */
-			getList() {
-				this.loading = true
-				listRole(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
-					this.roleList = response.rows
-					this.total = response.total
-					this.loading = false
-				})
-			},
-			// 单击角色表格某一行 行点击事件,这里获取到的行对象(row)是没有index属性的
-			roleLineClick(row) {
-				this.getIndex = row.index
-				this.objRole = row
-			},
-			//设置行对象(row)的样式(style)
-			selectedstyle({ row, rowIndex }) {
-				if (this.getIndex === rowIndex) {
-					return {
-						'background-color': '#EBEEF5'
-					}
+		selectedstyle2({ row, rowIndex }) {
+			if (this.getIndex2 === rowIndex) {
+				return {
+					'background-color': '#EBEEF5'
 				}
-			},
-			//为行对象(row)设置index属性
-			tableRowClassName({ row, rowIndex }) {
-				row.index = rowIndex
-			},
-			// 双击角色表格某一行
-			roleLineDbclick(row) {
-				this.roleId = ''
-				this.btnList = []
-				this.FuncList = []
-				this.FuncListTree = []
-				this.roleId = row.roleId
-				getRoleMenuTreeselect(row.roleId).then((res) => {
-					console.log(res)
-					this.checkedKeys = res.checkedKeys
-					this.functionList = res.menus
-					this.btnList = this.functionList.filter((item, index, c) => item.menuType == 'F')
-					this.btnsLists = this.functionList.filter((item, index, c) => item.menuType == 'C')
-					this.FuncList = this.functionList.filter((item, index, c) => item.menuType == 'M' || item.menuType == 'C')
-					this.FuncListTree = this.handleTree(this.FuncList, 'menuId', 'parentId')
-					console.log(this.FuncListTree)
-					// this.btnsLists.forEach(element => {
-					//   this.checkedKeys.forEach(e => {
-					//     if (element.menuId == e) {
-					//       element.menuCheckStrictly == true
-					//     }
-					//   })
-					// });
-				})
-				this.functionalShow = true
-				this.roleShow = false
-				this.over = 2
-			},
-			// 单击功能权限表格某一行
-			functionalLineClick(row, event, column) {
-				// this.getIndex1 = row.index;
-			},
-			// 双击功能权限表格某一行
-			functionalLineDbclick(row, event, column) {
-				console.log(row)
-				this.functionalShow = false
-				this.headShow = true
-				this.over = 3
-				this.listName = row.menuName
-				this.menuId = row.menuId
-				console.log(this.listName)
-				getTableHeadList(this.roleId, row.menuId).then((res) => {
-					console.log(res)
-					this.headList = res.data
+			}
+		},
+		//为行对象(row)设置index属性
+		tableRowClassName({ row, rowIndex }) {
+			row.index = rowIndex
+		},
+		// 双击角色表格某一行
+		roleLineDbclick(row) {
+			this.roleId = ''
+			this.btnList = []
+			this.FuncList = []
+			this.FuncListTree = []
+			this.roleId = row.roleId
+			getRoleMenuTreeselect(row.roleId).then((res) => {
+				console.log(res)
+				this.checkedKeys = res.data.checkedKeys
+				this.functionList = res.data.menus
+				this.btnList = this.functionList.filter((item, index, c) => item.menuType == 'F')
+				this.btnsLists = this.functionList.filter((item, index, c) => item.menuType == 'C')
+				this.FuncList = this.functionList.filter((item, index, c) => item.menuType == 'M' || item.menuType == 'C')
+				this.FuncListTree = this.handleTree(this.FuncList, 'menuId', 'parentId')
+			})
+			this.functionalShow = true
+			this.roleShow = false
+			this.over = 2
+		},
+		// 单击功能权限表格某一行
+		functionalLineClick(row, event, column) {
+			this.getIndex1 = row.index
+			this.objFun = row
+		},
+		// 双击功能权限表格某一行
+		functionalLineDbclick(row, event, column) {
+			this.functionalShow = false
+			this.headShow = true
+			this.over = 3
+			this.listName = row.menuName
+			this.menuId = row.menuId
+			this.checkStatus = this.isChecked(row) ? 0 : 1
+			this.disabled = this.isChecked(row) ? false : true
+			getTableHeadList(this.roleId, row.menuId, this.checkStatus).then((res) => {
+				this.headList = res.data
+				console.log(this.headList)
+			})
+		},
+		// 单击表头权限表格某一行
+		headlLineClick(row, event, column) {
+			this.getIndex2 = row.index
+		},
+		/** 查询菜单树结构 */
+		getMenuTreeselect() {
+			menuTreeselect().then((response) => {
+				this.menuOptions = response.data
+			})
+		},
+		/** 查询部门树结构 */
+		getDeptTreeselect() {
+			deptTreeselect().then((response) => {
+				this.deptOptions = response.data
+			})
+		},
+		// 所有菜单节点数据
+		// getMenuAllCheckedKeys() {
+		//   // 目前被选中的菜单节点
+		//   let checkedKeys = this.$refs.menu.getCheckedKeys();
+		//   // 半选中的菜单节点
+		//   let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
+		//   checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+		//   return checkedKeys;
+		// },
+		// // 所有部门节点数据
+		// getDeptAllCheckedKeys() {
+		//   // 目前被选中的部门节点
+		//   let checkedKeys = this.$refs.dept.getCheckedKeys();
+		//   // 半选中的部门节点
+		//   let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
+		//   checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
+		//   return checkedKeys;
+		// },
+		/** 根据角色ID查询菜单树结构 */
+		getRoleMenuTreeselect(roleId) {
+			return roleMenuTreeselect(roleId).then((response) => {
+				this.menuOptions = response.menus
+				return response
+			})
+		},
+		/** 根据角色ID查询部门树结构 */
+		getRoleDeptTreeselect(roleId) {
+			return roleDeptTreeselect(roleId).then((response) => {
+				this.deptOptions = response.depts
+				return response
+			})
+		},
+		// 角色状态修改
+		handleStatusChange(row) {
+			let text = row.status === '0' ? '禁用' : '启用'
+			this.$modal
+				.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？')
+				.then(function () {
+					row.status = row.status === '0' ? '1' : '0'
+					return changeRoleStatus(row.roleId, row.status)
 				})
-			},
-			// 单击表头权限表格某一行
-			headlLineClick(row, event, column) {
-				// this.getIndex2 = row.index;
-			},
-			/** 查询菜单树结构 */
-			getMenuTreeselect() {
-				menuTreeselect().then((response) => {
-					this.menuOptions = response.data
+				.then(() => {
+					this.$modal.msgSuccess(text + '成功')
 				})
-			},
-			/** 查询部门树结构 */
-			getDeptTreeselect() {
-				deptTreeselect().then((response) => {
-					this.deptOptions = response.data
+				.catch(function () {
+					row.status = row.status === '0' ? '1' : '0'
 				})
-			},
-			// 所有菜单节点数据
-			// getMenuAllCheckedKeys() {
-			//   // 目前被选中的菜单节点
-			//   let checkedKeys = this.$refs.menu.getCheckedKeys();
-			//   // 半选中的菜单节点
-			//   let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
-			//   checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-			//   return checkedKeys;
-			// },
-			// // 所有部门节点数据
-			// getDeptAllCheckedKeys() {
-			//   // 目前被选中的部门节点
-			//   let checkedKeys = this.$refs.dept.getCheckedKeys();
-			//   // 半选中的部门节点
-			//   let halfCheckedKeys = this.$refs.dept.getHalfCheckedKeys();
-			//   checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
-			//   return checkedKeys;
-			// },
-			/** 根据角色ID查询菜单树结构 */
-			getRoleMenuTreeselect(roleId) {
-				return roleMenuTreeselect(roleId).then((response) => {
-					this.menuOptions = response.menus
-					return response
+		},
+		// 修改功能操作权限
+		updateBtn(e) {
+			let obj = {
+				menuId: e.menuId,
+				roleId: this.roleId
+			}
+			let arr = []
+			arr.push(obj)
+			if (this.checkedKeys.includes(e.menuId)) {
+				authUserCancelAll(arr).then((res) => {
+					if (res.code == 200) {
+						this.checkedKeys = this.checkedKeys.filter((item) => item != e.menuId)
+					}
 				})
-			},
-			/** 根据角色ID查询部门树结构 */
-			getRoleDeptTreeselect(roleId) {
-				return roleDeptTreeselect(roleId).then((response) => {
-					this.deptOptions = response.depts
-					return response
+			} else {
+				saveRoleMenu(arr).then((res) => {
+					if (res.code == 200) {
+						this.checkedKeys.push(e.menuId)
+					}
 				})
-			},
-			// 角色状态修改
-			handleStatusChange(row) {
-				console.log(row)
-				let text = row.status === '0' ? '禁用' : '启用'
-				this.$modal
-					.confirm('确认要"' + text + '""' + row.roleName + '"角色吗？')
-					.then(function () {
-						row.status = row.status === '0' ? '1' : '0'
-						return changeRoleStatus(row.roleId, row.status)
-					})
-					.then(() => {
-						this.$modal.msgSuccess(text + '成功')
-					})
-					.catch(function () {
-						row.status = row.status === '0' ? '1' : '0'
-					})
-			},
-			updateBtn(e) {
-				let parent = this.functionList.find((item) => item.menuId == e.parentId)
-				let parents = []
-				while (parent) {
-					parents.push(parent)
-					parent = this.functionList.find((item) => item.menuId == parent.parentId)
+			}
+			// let parent = this.functionList.find((item) => item.menuId == e.parentId)
+			// let parents = []
+			// while (parent) {
+			// 	parents.push(parent)
+			// 	parent = this.functionList.find((item) => item.menuId == parent.parentId)
+			// }
+			// let checked = !this.checkedKeys.includes(e.menuId)
+			// let obj = {
+			// 	menuId: e.menuId,
+			// 	roleId: this.roleId
+			// }
+			// let arr = []
+			// arr.push(obj)
+			// saveRoleMenu(arr).then((res) => {
+			// 		if (res.code == 200) {
+			// 			this.checkedKeys.push(e.menuId)
+			// 		}
+			// 	})
+			// if (checked) {
+			// 	let sArr = [...this.checkedKeys, e.menuId]
+			// 	parents.forEach((p) => {
+			// 		if (this.findChildrenIds(p).every((item) => sArr.includes(item))) {
+			// 			arr.push({
+			// 				menuId: p.menuId,
+			// 				roleId: this.roleId
+			// 			})
+			// 		}
+			// 	})
+			// } else {
+			// 	parents.forEach((p) => {
+			// 		arr.push({
+			// 			menuId: p.menuId,
+			// 			roleId: this.roleId
+			// 		})
+			// 	})
+			// }
+			// let req = JSON.stringify(arr)
+			// this.form1.json = req
+			// if (!checked) {
+			// 	authUserCancelAll(arr).then((res) => {
+			// 		if (res.code == 200) {
+			// 			this.checkedKeys = this.checkedKeys.filter((item) => item != e.menuId)
+			// 		}
+			// 	})
+			// } else {
+			// 	saveRoleMenu(arr).then((res) => {
+			// 		if (res.code == 200) {
+			// 			this.checkedKeys.push(e.menuId)
+			// 		}
+			// 	})
+			// }
+		},
+		// 表头权限显示
+		showOrHide(row) {
+			let iss = row.isShow === '1' ? '0' : '1'
+			setSysTableCfgIsShow(row.id, iss, this.menuId, this.roleId).then((res) => {
+				if (res.code == 200) {
+					row.isShow = row.isShow == '1' || row.isShow == null ? '0' : '1'
 				}
-				let checked = !this.checkedKeys.includes(e.menuId)
-				let obj = {
-					menuId: e.menuId,
-					roleId: this.roleId
+			})
+		},
+		// 取消按钮
+		cancel() {
+			this.open = false
+			this.reset()
+		},
+		// 取消按钮（数据权限）
+		cancelDataScope() {
+			this.openDataScope = false
+			this.reset()
+		},
+		// 表单重置
+		reset() {
+			// if (this.$refs.menu != undefined) {
+			//   this.$refs.menu.setCheckedKeys([]);
+			// }
+			;(this.menuExpand = false),
+				(this.menuNodeAll = false),
+				(this.deptExpand = true),
+				(this.deptNodeAll = false),
+				(this.form = {
+					roleId: undefined,
+					roleName: undefined,
+					roleKey: undefined,
+					roleSort: 0,
+					status: '0',
+					menuIds: [],
+					deptIds: [],
+					menuCheckStrictly: true,
+					deptCheckStrictly: true,
+					remark: undefined
+				})
+			this.resetForm('form')
+		},
+		/** 搜索按钮操作 */
+		handleQuery() {
+			this.queryParams.pageNum = 1
+			this.getList()
+		},
+		/** 重置按钮操作 */
+		resetQuery() {
+			this.dateRange = []
+			this.resetForm('queryForm')
+			this.handleQuery()
+		},
+		// 树权限（展开/折叠）
+		handleCheckedTreeExpand(value, type) {
+			if (type == 'menu') {
+				let treeList = this.menuOptions
+				for (let i = 0; i < treeList.length; i++) {
+					this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
 				}
-				let arr = []
-				arr.push(obj)
-				if (checked) {
-					let sArr = [...this.checkedKeys, e.menuId]
-					parents.forEach((p) => {
-						if (this.findChildrenIds(p).every((item) => sArr.includes(item))) {
-							arr.push({
-								menuId: p.menuId,
-								roleId: this.roleId
-							})
-						}
-					})
-				} else {
-					parents.forEach((p) => {
-						arr.push({
-							menuId: p.menuId,
-							roleId: this.roleId
-						})
-					})
+			} else if (type == 'dept') {
+				let treeList = this.deptOptions
+				for (let i = 0; i < treeList.length; i++) {
+					this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
 				}
-				let req = JSON.stringify(arr)
-				this.form1.json = req
-				if (!checked) {
-					authUserCancelAll(arr).then((res) => {
-						if (res.code == 200) {
-							this.checkedKeys = this.checkedKeys.filter((item) => item != e.menuId)
-						}
-					})
-				} else {
-					saveRoleMenu(arr).then((res) => {
-						if (res.code == 200) {
-							this.checkedKeys.push(e.menuId)
-						}
-					})
+			}
+		},
+		// 树权限（全选/全不选）
+		// handleCheckedTreeNodeAll(value, type) {
+		//   if (type == 'menu') {
+		//     this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
+		//   } else if (type == 'dept') {
+		//     this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+		//   }
+		// },
+		// 树权限（父子联动）
+		handleCheckedTreeConnect(e, type, item) {
+			let value = e.target.checked
+			let ids = this.findChildrenIds(item)
+			let objs = ids.map((m) => {
+				return {
+					menuId: m,
+					roleId: this.roleId
 				}
-			},
-			showOrHide(row) {
-				console.log(row)
-				let iss = row.isShow === 1 || row.isShow === null ? 0 : 1
-				setSysTableCfgIsShow(row.id, iss, this.menuId, this.roleId).then((res) => {
-					console.log(res)
+			})
+			objs.push({
+				menuId: item.menuId,
+				roleId: this.roleId
+			})
+			if (value) {
+				this.checkStatus = 0
+				this.disabled = false
+				saveRoleMenu(objs).then((res) => {
 					if (res.code == 200) {
-						row.isShow = row.isShow == 1 || row.isShow == null ? 0 : 1
+						this.checkedKeys = [...new Set(this.checkedKeys.concat(ids))]
 					}
 				})
-			},
-			// 取消按钮
-			cancel() {
-				this.open = false
-				this.reset()
-			},
-			// 取消按钮（数据权限）
-			cancelDataScope() {
-				this.openDataScope = false
-				this.reset()
-			},
-			// 表单重置
-			reset() {
-				// if (this.$refs.menu != undefined) {
-				//   this.$refs.menu.setCheckedKeys([]);
-				// }
-				;(this.menuExpand = false),
-					(this.menuNodeAll = false),
-					(this.deptExpand = true),
-					(this.deptNodeAll = false),
-					(this.form = {
-						roleId: undefined,
-						roleName: undefined,
-						roleKey: undefined,
-						roleSort: 0,
-						status: '0',
-						menuIds: [],
-						deptIds: [],
-						menuCheckStrictly: true,
-						deptCheckStrictly: true,
-						remark: undefined
-					})
-				this.resetForm('form')
-			},
-			/** 搜索按钮操作 */
-			handleQuery() {
-				this.queryParams.pageNum = 1
-				this.getList()
-			},
-			/** 重置按钮操作 */
-			resetQuery() {
-				this.dateRange = []
-				this.resetForm('queryForm')
-				this.handleQuery()
-			},
-			// 树权限（展开/折叠）
-			handleCheckedTreeExpand(value, type) {
-				if (type == 'menu') {
-					let treeList = this.menuOptions
-					for (let i = 0; i < treeList.length; i++) {
-						this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
-					}
-				} else if (type == 'dept') {
-					let treeList = this.deptOptions
-					for (let i = 0; i < treeList.length; i++) {
-						this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
-					}
-				}
-			},
-			// 树权限（全选/全不选）
-			// handleCheckedTreeNodeAll(value, type) {
-			//   if (type == 'menu') {
-			//     this.$refs.menu.setCheckedNodes(value ? this.menuOptions: []);
-			//   } else if (type == 'dept') {
-			//     this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
-			//   }
-			// },
-			// 树权限（父子联动）
-			handleCheckedTreeConnect(e, type, item) {
-				let value = e.target.checked
-				let ids = this.findChildrenIds(item)
-				let objs = ids.map((m) => {
-					return {
-						menuId: m,
-						roleId: this.roleId
+			} else {
+				this.checkStatus = 1
+				this.disabled = true
+				authUserCancelAll(objs).then((res) => {
+					if (res.code == 200) {
+						this.checkedKeys = this.checkedKeys.filter((f) => !ids.includes(f))
 					}
 				})
-				objs.push({
-					menuId: item.menuId,
-					roleId: this.roleId
-				})
-				if (value) {
-					saveRoleMenu(objs).then((res) => {
-						if (res.code == 200) {
-							this.checkedKeys = [...new Set(this.checkedKeys.concat(ids))]
-						}
-					})
-				} else {
-					authUserCancelAll(objs).then((res) => {
-						if (res.code == 200) {
-							this.checkedKeys = this.checkedKeys.filter((f) => !ids.includes(f))
-						}
-					})
-				}
-			},
-			/** 新增按钮操作 */
-			handleAdd() {
-				this.reset()
-				this.getMenuTreeselect()
+			}
+		},
+		/** 新增按钮操作 */
+		handleAdd() {
+			this.reset()
+			this.getMenuTreeselect()
+			this.open = true
+			this.title = '添加角色'
+		},
+		/** 修改按钮操作 */
+		handleUpdate(row) {
+			this.reset()
+			const roleId = row.roleId || this.ids
+			// const roleMenu = this.getRoleMenuTreeselect(roleId);
+			getRole(roleId).then((response) => {
+				this.form = response.data
 				this.open = true
-				this.title = '添加角色'
-			},
-			/** 修改按钮操作 */
-			handleUpdate(row) {
-				this.reset()
-				const roleId = row.roleId || this.ids
-				// const roleMenu = this.getRoleMenuTreeselect(roleId);
-				getRole(roleId).then((response) => {
-					this.form = response.data
-					this.open = true
-					// this.$nextTick(() => {
-					//   roleMenu.then(res => {
-					//     let checkedKeys = res.checkedKeys
-					//     checkedKeys.forEach((v) => {
-					//         this.$nextTick(()=>{
-					//             this.$refs.menu.setChecked(v, true ,false);
-					//         })
-					//     })
-					//   });
-					// });
-					this.title = '修改角色'
+				// this.$nextTick(() => {
+				//   roleMenu.then(res => {
+				//     let checkedKeys = res.checkedKeys
+				//     checkedKeys.forEach((v) => {
+				//         this.$nextTick(()=>{
+				//             this.$refs.menu.setChecked(v, true ,false);
+				//         })
+				//     })
+				//   });
+				// });
+				this.title = '修改角色'
+			})
+		},
+		/** 选择角色权限范围触发 */
+		// dataScopeSelectChange(value) {
+		//   if(value !== '2') {
+		//     this.$refs.dept.setCheckedKeys([]);
+		//   }
+		// },
+		/** 分配数据权限操作 */
+		handleDataScope(row) {
+			this.reset()
+			const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId)
+			getRole(row.roleId).then((response) => {
+				this.form = response.data
+				this.openDataScope = true
+				// this.$nextTick(() => {
+				//   roleDeptTreeselect.then(res => {
+				//     this.$refs.dept.setCheckedKeys(res.checkedKeys);
+				//   });
+				// });
+				this.title = '分配数据权限'
+			})
+		},
+		/** 分配用户操作 */
+		handleAuthUser: function (row) {
+			const roleId = row.roleId
+			this.$router.push('/system/role-auth/user/' + roleId)
+		},
+		/** 提交按钮 */
+		submitForm: function () {
+			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) => {
+							console.log(response)
+							this.$modal.msgSuccess('修改成功')
+							this.open = false
+							this.getList()
+						})
+					} else {
+						// this.form.menuIds = this.getMenuAllCheckedKeys();
+						let val = this.form.roleName
+						this.form.roleKey = pinyin.getFullChars(val)
+						addRole(this.form).then((response) => {
+							this.$modal.msgSuccess('新增成功')
+							this.open = false
+							this.getList()
+						})
+					}
+				}
+			})
+		},
+		/** 提交按钮（数据权限） */
+		submitDataScope: function () {
+			if (this.form.roleId != undefined) {
+				this.form.deptIds = this.getDeptAllCheckedKeys()
+				dataScope(this.form).then((response) => {
+					this.$modal.msgSuccess('修改成功')
+					this.openDataScope = false
+					this.getList()
 				})
-			},
-			/** 选择角色权限范围触发 */
-			// dataScopeSelectChange(value) {
-			//   if(value !== '2') {
-			//     this.$refs.dept.setCheckedKeys([]);
-			//   }
-			// },
-			/** 分配数据权限操作 */
-			handleDataScope(row) {
-				this.reset()
-				const roleDeptTreeselect = this.getRoleDeptTreeselect(row.roleId)
-				getRole(row.roleId).then((response) => {
-					this.form = response.data
-					this.openDataScope = true
-					// this.$nextTick(() => {
-					//   roleDeptTreeselect.then(res => {
-					//     this.$refs.dept.setCheckedKeys(res.checkedKeys);
-					//   });
-					// });
-					this.title = '分配数据权限'
+			}
+		},
+		/** 删除按钮操作 */
+		handleDelete(row) {
+			const roleIds = row.roleId || this.ids
+			this.$modal
+				.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？')
+				.then(function () {
+					return delRole(roleIds)
 				})
-			},
-			/** 分配用户操作 */
-			handleAuthUser: function (row) {
-				const roleId = row.roleId
-				this.$router.push('/system/role-auth/user/' + roleId)
-			},
-			/** 提交按钮 */
-			submitForm: function () {
-				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) => {
-								console.log(response)
-								this.$modal.msgSuccess('修改成功')
-								this.open = false
-								this.getList()
-							})
-						} else {
-							// this.form.menuIds = this.getMenuAllCheckedKeys();
-							let val = this.form.roleName
-							this.form.roleKey = pinyin.getFullChars(val)
-							addRole(this.form).then((response) => {
-								this.$modal.msgSuccess('新增成功')
-								this.open = false
-								this.getList()
-							})
-						}
-					}
+				.then(() => {
+					this.getList()
+					this.$modal.msgSuccess('删除成功')
 				})
-			},
-			/** 提交按钮（数据权限） */
-			submitDataScope: function () {
-				if (this.form.roleId != undefined) {
-					this.form.deptIds = this.getDeptAllCheckedKeys()
-					dataScope(this.form).then((response) => {
-						this.$modal.msgSuccess('修改成功')
-						this.openDataScope = false
-						this.getList()
-					})
-				}
-			},
-			/** 删除按钮操作 */
-			handleDelete(row) {
-				const roleIds = row.roleId || this.ids
-				this.$modal
-					.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项？')
-					.then(function () {
-						return delRole(roleIds)
-					})
-					.then(() => {
-						this.getList()
-						this.$modal.msgSuccess('删除成功')
-					})
-					.catch(() => {})
-			},
-			/** 导出按钮操作 */
-			handleExport() {
-				this.download(
-					'system/role/export',
-					{
-						...this.queryParams
-					},
-					`role_${new Date().getTime()}.xlsx`
-				)
-			},
-
-			//寻找子id集合
-			findChildrenIds(parent) {
-				if (parent.menuType == 'M') {
-					let childIds = parent.children.map((item) => item.menuId)
-					let btnIds = this.btnList.filter((item) => childIds.includes(item.parentId)).map((item) => item.menuId)
-					return childIds.concat(btnIds)
-				} else if (parent.menuType == 'C') {
-					return this.btnList.filter((item) => item.parentId == parent.menuId).map((item) => item.menuId)
+				.catch(() => {})
+		},
+		/** 导出按钮操作 */
+		handleExport() {
+			this.download(
+				'system/role/export',
+				{
+					...this.queryParams
+				},
+				`role_${new Date().getTime()}.xlsx`
+			)
+		},
+		//寻找子id集合
+		findIds(parent) {
+			if (!parent.children) {
+				return
+			}
+			let res = []
+			parent.children.forEach((item) => {
+				if (item.menuType == 'C') {
+					res.push(item)
+				} else {
+					res = res.concat(this.findIds(item))
 				}
+			})
+			return res
+		},
+		//寻找子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)
+			} else if (parent.menuType == 'C') {
+				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)
 			}
 		},
-		computed: {
-			btnListss() {
-				return function (pid) {
-					return this.btnList.filter((item) => item.parentId == pid)
-				}
-			},
-			isChecked() {
-				return function (obj) {
-					return this.findChildrenIds(obj).every((item) => this.checkedKeys.includes(item))
-				}
+		isChecked() {
+			return function (obj) {
+				// return this.findChildrenIds(obj).length > 0 && this.findChildrenIds(obj).every((item) => this.checkedKeys.includes(item))
+				return this.checkedKeys.includes(obj.menuId)
 			}
 		}
 	}
+}
 </script>
 <style scoped>
-	.role {
-		width: 90px;
-		height: 40px;
-		text-align: center;
-		line-height: 40px;
-		font-size: 14px;
-		border: 1px solid #dfe6ec;
-		border-bottom: none;
-	}
-	.roleTable {
-		width: 1154px;
-	}
-	.add_btn {
-		width: 80px;
-		height: 35px;
-		text-align: center;
-	}
-	.item {
-		width: 1154px;
-		display: flex;
-		justify-content: space-between;
-	}
-	.dataTable {
-		width: 656px;
-	}
-	.left_tag {
-		display: flex;
-	}
-	.border_role {
-		border-right: none;
-	}
-	.functional {
-		border-right: none;
-	}
-	.activeClass {
-		color: #409eff;
-	}
-	.tableRowClassName {
-		background: olive;
-	}
+.role {
+	width: 90px;
+	height: 40px;
+	text-align: center;
+	line-height: 40px;
+	font-size: 14px;
+	border: 1px solid #dfe6ec;
+	border-bottom: none;
+}
+.roleTable {
+	width: 1154px;
+}
+.add_btn {
+	width: 80px;
+	height: 35px;
+	text-align: center;
+}
+.item {
+	width: 1154px;
+	display: flex;
+	justify-content: space-between;
+}
+.dataTable {
+	width: 656px;
+}
+.left_tag {
+	display: flex;
+}
+.border_role {
+	border-right: none;
+}
+.functional {
+	border-right: none;
+}
+.activeClass {
+	color: #409eff;
+}
+.tableRowClassName {
+	background: olive;
+}
+.pagination-container[data-v-72233bcd] {
+	width: 1154px;
+}
 </style>