From 005bf8112ce7b3ac1f1bb46b30da82efdbfd4c7c Mon Sep 17 00:00:00 2001 From: tianq Date: Fri, 14 Apr 2023 08:31:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=9B=E4=B8=AA=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../customer/customize/menuCustomer.vue | 266 ++++++++++++++++-- .../customer/customize/menuDataCustomer.vue | 4 +- .../src/views/modules/workPc/dataMenu.vue | 250 +++++++++++++++- .../src/views/modules/workPc/menu.vue | 249 +++++++++++++++- 4 files changed, 722 insertions(+), 47 deletions(-) diff --git a/epmet-oper-web/src/views/modules/customer/customize/menuCustomer.vue b/epmet-oper-web/src/views/modules/customer/customize/menuCustomer.vue index 43b7caf..afbf963 100644 --- a/epmet-oper-web/src/views/modules/customer/customize/menuCustomer.vue +++ b/epmet-oper-web/src/views/modules/customer/customize/menuCustomer.vue @@ -17,7 +17,18 @@ 开启 关闭 - + @@ -86,6 +97,175 @@ export default { }, methods: { + initData(customerId, customerName) { + this.customerId = customerId; + this.customerName = customerName; + // if (this.mixinViewModuleOptions.createdIsNeed) { + // console.log(this.customerId+"22222"); + this.query(); + console.log(this.dataList); + this.initData2(this.dataList); + }, + + initData2(data) { + data.forEach(item => { + item.isSelect = false; //默认为不选中 + if (item.children && item.children.length) { + this.initData2(item.children); + } + }); + }, + + getData(data) { + console.log("getData",data) + data.forEach(item => { + console.log(item.name,item.isSelect) + if (item.isSelect) { + + this.multipleSelection.push(item.id); + } + if (item.children) { + this.getData(item.children); + } + }); + }, + selectFun(selection, row) { + this.setRowIsSelect(row); + }, + checkIsAllSelect() { + this.oneProductIsSelect = []; + this.dataList.forEach(item => { + this.oneProductIsSelect.push(item.isSelect); + }); + //判断一级产品是否是全选.如果一级产品全为true，则设置为取消全选，否则全选 + let isAllSelect = this.oneProductIsSelect.every(selectStatusItem => { + return true == selectStatusItem; + }); + return isAllSelect; + }, + selectAllFun(selection) { + let isAllSelect = this.checkIsAllSelect(); + this.dataList.forEach(item => { + item.isSelect = isAllSelect; + this.$refs.form.toggleRowSelection(item, !isAllSelect); + this.selectFun(selection, item); + }); + }, + rowClassNameFun({ row }) { + if (row.isSelect === '') { + return 'indeterminate'; + } + }, + headerRowClassName({ row }) { + let oneProductIsSelect = []; + this.dataList.forEach(item => { + oneProductIsSelect.push(item.isSelect); + }); + if (oneProductIsSelect.includes('')) { + return 'indeterminate'; + } + return ''; + }, + setRowIsSelect(row) { + //当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果 + if (row.isSelect === '') { + row.isSelect = false; + this.$refs.form.toggleRowSelection(row, true); + } + row.isSelect = !row.isSelect; + let that = this; + + function selectAllChildrens(data) { + data.forEach(item => { + item.isSelect = row.isSelect; + that.$refs.form.toggleRowSelection(item, row.isSelect); + if (item.children && item.children.length) { + selectAllChildrens(item.children); + } + }); + } + + function getSelectStatus(selectStatuaArr, data) { + data.forEach(childrenItem => { + selectStatuaArr.push(childrenItem.isSelect); + if (childrenItem.children && childrenItem.children.length) { + getSelectStatus(selectStatuaArr, childrenItem.children); + } + }); + + return selectStatuaArr; + } + function getLevelStatus(row) { + //如果当前节点的parantId =0 并且有子节点，则为1 + //如果当前节点的parantId !=0 并且子节点没有子节点 则为3 + if (row.pid == '0') { + if (row.children && row.children.length) { + return 1; + } else { + return 4; + } + } else { + if (!row.children || !row.children.length) { + return 3; + } else { + return 2; + } + } + } + let result = {}; + //获取明确的节点 + function getExplicitNode(data, parentId) { + data.forEach(item => { + if (item.id == parentId) { + result = item; + } + if (item.children && item.children.length) { + getExplicitNode(item.children, parentId); + } + }); + return result; + } + function operateLastLeve(row) { + //操作的是子节点 1、获取父节点 2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态 + let selectStatuaArr = []; + + let item = getExplicitNode(that.dataList, row.pid); + selectStatuaArr = getSelectStatus(selectStatuaArr, item.children); + if ( + selectStatuaArr.every(selectItem => { + return true == selectItem; + }) + ) { + item.isSelect = true; + that.$refs.form.toggleRowSelection(item, true); + } else if ( + selectStatuaArr.every(selectItem => { + return false == selectItem; + }) + ) { + item.isSelect = false; + that.$refs.form.toggleRowSelection(item, false); + } else { + item.isSelect = ''; + } + //则还有父级 + if (item.pid != '0') { + operateLastLeve(item); + } + } + //判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选 + + //1、只是父级 2、既是子集，又是父级 3、只是子级 + let levelSataus = getLevelStatus(row); + if (levelSataus == 1) { + selectAllChildrens(row.children); + } else if (levelSataus == 2) { + selectAllChildrens(row.children); + operateLastLeve(row); + } else if (levelSataus == 3) { + operateLastLeve(row); + } + }, search() { if (this.menuName != '') { let saveList = []; @@ -119,6 +299,9 @@ export default { open(id) { let menuIds = []; + this.multipleSelection = []; + this.getData(this.dataList); + if (id != '') { menuIds = [id]; } else { @@ -143,7 +326,9 @@ export default { }, close(id) { let menuIds = []; - + this.multipleSelection = []; + this.getData(this.dataList); + if (id != '') { menuIds = [id]; } else { @@ -199,25 +384,25 @@ export default { }); }, - initData(customerId, customerName) { - if (customerId != '') { - this.customerId = customerId; - this.customerName = customerName; + // initData(customerId, customerName) { + // if (customerId != '') { + // this.customerId = customerId; + // this.customerName = customerName; - // if (this.mixinViewModuleOptions.createdIsNeed) { - // console.log(this.customerId+"22222"); - this.query(); - // } - } - }, + // // if (this.mixinViewModuleOptions.createdIsNeed) { + // // console.log(this.customerId+"22222"); + // this.query(); + // // } + // } + // }, - handleSelectionChange(val) { - this.multipleSelection = []; - val.forEach(element => { - this.multipleSelection.push(element.id); - }); - console.log(this.multipleSelection); - }, + // handleSelectionChange(val) { + // this.multipleSelection = []; + // val.forEach(element => { + // this.multipleSelection.push(element.id); + // }); + // console.log(this.multipleSelection); + // }, // 取消 diaCancel() { this.$emit('cancleBack'); @@ -235,4 +420,47 @@ export default { line-height: 50px; margin-bottom: 20px; } + +.indeterminate .el-checkbox__input .el-checkbox__inner { + background-color: #17B3A3 !important; + border-color: #17B3A3 !important; + color: #fff !important; +} + +.indeterminate .el-checkbox__input.is-checked .el-checkbox__inner::after { + transform: scale(0.5); +} + +.indeterminate .el-checkbox__input .el-checkbox__inner { + background-color: #f2f6fc; + border-color: #dcdfe6; +} +.indeterminate .el-checkbox__input .el-checkbox__inner::after { + border-color: #c0c4cc !important; + background-color: #c0c4cc; +} +.form-show th .el-checkbox__inner { + display: none !important; +} + +.indeterminate .el-checkbox__input .el-checkbox__inner::after { + content: ''; + position: absolute; + display: block; + background-color: #fff; + height: 2px; + transform: scale(0.5); + left: 0; + right: 0; + top: 5px; + width: auto !important; +} +.form-show .el-checkbox__inner { + display: block !important; +} + +.form-show .el-checkbox { + display: block !important; +} + diff --git a/epmet-oper-web/src/views/modules/customer/customize/menuDataCustomer.vue b/epmet-oper-web/src/views/modules/customer/customize/menuDataCustomer.vue index c491065..e54c612 100644 --- a/epmet-oper-web/src/views/modules/customer/customize/menuDataCustomer.vue +++ b/epmet-oper-web/src/views/modules/customer/customize/menuDataCustomer.vue @@ -430,8 +430,8 @@ export default { } .indeterminate .el-checkbox__input .el-checkbox__inner { - background-color: #409eff !important; - border-color: #409eff !important; + background-color: #17B3A3 !important; + border-color: #17B3A3 !important; color: #fff !important; } diff --git a/epmet-oper-web/src/views/modules/workPc/dataMenu.vue b/epmet-oper-web/src/views/modules/workPc/dataMenu.vue index 6299905..a54a2fe 100644 --- a/epmet-oper-web/src/views/modules/workPc/dataMenu.vue +++ b/epmet-oper-web/src/views/modules/workPc/dataMenu.vue @@ -13,14 +13,16 @@ @@ -92,7 +94,10 @@ export default { }, customerFormVisible: false, dataForm: { tableName: 'data_menu' }, - selMenuName: '' + selMenuName: '', + selection: [], + selAllFlag: false, + }; }, components: { @@ -107,6 +112,175 @@ export default { ...mapGetters(['clientHeight', 'resolution']) }, methods: { + initData(customerId, customerName) { + this.customerId = customerId; + this.customerName = customerName; + // if (this.mixinViewModuleOptions.createdIsNeed) { + // console.log(this.customerId+"22222"); + this.query(); + console.log(this.dataList); + this.initData2(this.dataList); + }, + + initData2(data) { + data.forEach(item => { + item.isSelect = false; //默认为不选中 + if (item.children && item.children.length) { + this.initData2(item.children); + } + }); + }, + + getData(data) { + console.log("getData",data) + data.forEach(item => { + console.log(item.name,item.isSelect) + if (item.isSelect) { + + this.multipleSelection.push(item.id); + } + if (item.children) { + this.getData(item.children); + } + }); + }, + selectFun(selection, row) { + this.setRowIsSelect(row); + }, + checkIsAllSelect() { + this.oneProductIsSelect = []; + this.dataList.forEach(item => { + this.oneProductIsSelect.push(item.isSelect); + }); + //判断一级产品是否是全选.如果一级产品全为true，则设置为取消全选，否则全选 + let isAllSelect = this.oneProductIsSelect.every(selectStatusItem => { + return true == selectStatusItem; + }); + return isAllSelect; + }, + selectAllFun(selection) { + let isAllSelect = this.checkIsAllSelect(); + this.dataList.forEach(item => { + item.isSelect = isAllSelect; + this.$refs.form.toggleRowSelection(item, !isAllSelect); + this.selectFun(selection, item); + }); + }, + rowClassNameFun({ row }) { + if (row.isSelect === '') { + return 'indeterminate'; + } + }, + headerRowClassName({ row }) { + let oneProductIsSelect = []; + this.dataList.forEach(item => { + oneProductIsSelect.push(item.isSelect); + }); + if (oneProductIsSelect.includes('')) { + return 'indeterminate'; + } + return ''; + }, + setRowIsSelect(row) { + //当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果 + if (row.isSelect === '') { + row.isSelect = false; + this.$refs.form.toggleRowSelection(row, true); + } + row.isSelect = !row.isSelect; + let that = this; + + function selectAllChildrens(data) { + data.forEach(item => { + item.isSelect = row.isSelect; + that.$refs.form.toggleRowSelection(item, row.isSelect); + if (item.children && item.children.length) { + selectAllChildrens(item.children); + } + }); + } + + function getSelectStatus(selectStatuaArr, data) { + data.forEach(childrenItem => { + selectStatuaArr.push(childrenItem.isSelect); + if (childrenItem.children && childrenItem.children.length) { + getSelectStatus(selectStatuaArr, childrenItem.children); + } + }); + + return selectStatuaArr; + } + function getLevelStatus(row) { + //如果当前节点的parantId =0 并且有子节点，则为1 + //如果当前节点的parantId !=0 并且子节点没有子节点 则为3 + if (row.pid == '0') { + if (row.children && row.children.length) { + return 1; + } else { + return 4; + } + } else { + if (!row.children || !row.children.length) { + return 3; + } else { + return 2; + } + } + } + let result = {}; + //获取明确的节点 + function getExplicitNode(data, parentId) { + data.forEach(item => { + if (item.id == parentId) { + result = item; + } + if (item.children && item.children.length) { + getExplicitNode(item.children, parentId); + } + }); + return result; + } + function operateLastLeve(row) { + //操作的是子节点 1、获取父节点 2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态 + let selectStatuaArr = []; + + let item = getExplicitNode(that.dataList, row.pid); + selectStatuaArr = getSelectStatus(selectStatuaArr, item.children); + if ( + selectStatuaArr.every(selectItem => { + return true == selectItem; + }) + ) { + item.isSelect = true; + that.$refs.form.toggleRowSelection(item, true); + } else if ( + selectStatuaArr.every(selectItem => { + return false == selectItem; + }) + ) { + item.isSelect = false; + that.$refs.form.toggleRowSelection(item, false); + } else { + item.isSelect = ''; + } + //则还有父级 + if (item.pid != '0') { + operateLastLeve(item); + } + } + //判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选 + + //1、只是父级 2、既是子集，又是父级 3、只是子级 + let levelSataus = getLevelStatus(row); + if (levelSataus == 1) { + selectAllChildrens(row.children); + } else if (levelSataus == 2) { + selectAllChildrens(row.children); + operateLastLeve(row); + } else if (levelSataus == 3) { + operateLastLeve(row); + } + }, search() { if (this.menuName != '') { let saveList = []; @@ -146,20 +320,22 @@ export default { // }); // } // }, - handleSelectionChange(val) { - this.multipleSelection = []; - val.forEach(element => { - this.multipleSelection.push(element.id); - }); - console.log(this.multipleSelection); - }, + // handleSelectionChange(val) { + // this.multipleSelection = []; + // val.forEach(element => { + // this.multipleSelection.push(element.id); + // }); + // console.log(this.multipleSelection); + // }, showCustomerMenu(row) { this.selMenuName = row.name; this.$refs['customerForm'].init(row.id); }, open(id) { - console.log('Aa'); let menuIds = []; + this.multipleSelection = []; + this.getData(this.dataList); + if (id != '') { menuIds = [id]; } else { @@ -183,7 +359,9 @@ export default { }, close(id) { let menuIds = []; - + this.multipleSelection = []; + this.getData(this.dataList); + if (id != '') { menuIds = [id]; } else { @@ -208,9 +386,55 @@ export default { }; + diff --git a/epmet-oper-web/src/views/modules/workPc/menu.vue b/epmet-oper-web/src/views/modules/workPc/menu.vue index d11cde9..12aedce 100644 --- a/epmet-oper-web/src/views/modules/workPc/menu.vue +++ b/epmet-oper-web/src/views/modules/workPc/menu.vue @@ -14,13 +14,15 @@ @@ -86,7 +88,10 @@ export default { }, customerFormVisible: false, dataForm: { tableName: 'gov_menu' }, - selMenuName: '' + selMenuName: '', + selection: [], + selAllFlag: false, + }; }, components: { @@ -103,6 +108,175 @@ export default { }, methods: { + initData(customerId, customerName) { + this.customerId = customerId; + this.customerName = customerName; + // if (this.mixinViewModuleOptions.createdIsNeed) { + // console.log(this.customerId+"22222"); + this.query(); + console.log(this.dataList); + this.initData2(this.dataList); + }, + + initData2(data) { + data.forEach(item => { + item.isSelect = false; //默认为不选中 + if (item.children && item.children.length) { + this.initData2(item.children); + } + }); + }, + + getData(data) { + console.log("getData",data) + data.forEach(item => { + console.log(item.name,item.isSelect) + if (item.isSelect) { + + this.multipleSelection.push(item.id); + } + if (item.children) { + this.getData(item.children); + } + }); + }, + selectFun(selection, row) { + this.setRowIsSelect(row); + }, + checkIsAllSelect() { + this.oneProductIsSelect = []; + this.dataList.forEach(item => { + this.oneProductIsSelect.push(item.isSelect); + }); + //判断一级产品是否是全选.如果一级产品全为true，则设置为取消全选，否则全选 + let isAllSelect = this.oneProductIsSelect.every(selectStatusItem => { + return true == selectStatusItem; + }); + return isAllSelect; + }, + selectAllFun(selection) { + let isAllSelect = this.checkIsAllSelect(); + this.dataList.forEach(item => { + item.isSelect = isAllSelect; + this.$refs.form.toggleRowSelection(item, !isAllSelect); + this.selectFun(selection, item); + }); + }, + rowClassNameFun({ row }) { + if (row.isSelect === '') { + return 'indeterminate'; + } + }, + headerRowClassName({ row }) { + let oneProductIsSelect = []; + this.dataList.forEach(item => { + oneProductIsSelect.push(item.isSelect); + }); + if (oneProductIsSelect.includes('')) { + return 'indeterminate'; + } + return ''; + }, + setRowIsSelect(row) { + //当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果 + if (row.isSelect === '') { + row.isSelect = false; + this.$refs.form.toggleRowSelection(row, true); + } + row.isSelect = !row.isSelect; + let that = this; + + function selectAllChildrens(data) { + data.forEach(item => { + item.isSelect = row.isSelect; + that.$refs.form.toggleRowSelection(item, row.isSelect); + if (item.children && item.children.length) { + selectAllChildrens(item.children); + } + }); + } + + function getSelectStatus(selectStatuaArr, data) { + data.forEach(childrenItem => { + selectStatuaArr.push(childrenItem.isSelect); + if (childrenItem.children && childrenItem.children.length) { + getSelectStatus(selectStatuaArr, childrenItem.children); + } + }); + + return selectStatuaArr; + } + function getLevelStatus(row) { + //如果当前节点的parantId =0 并且有子节点，则为1 + //如果当前节点的parantId !=0 并且子节点没有子节点 则为3 + if (row.pid == '0') { + if (row.children && row.children.length) { + return 1; + } else { + return 4; + } + } else { + if (!row.children || !row.children.length) { + return 3; + } else { + return 2; + } + } + } + let result = {}; + //获取明确的节点 + function getExplicitNode(data, parentId) { + data.forEach(item => { + if (item.id == parentId) { + result = item; + } + if (item.children && item.children.length) { + getExplicitNode(item.children, parentId); + } + }); + return result; + } + function operateLastLeve(row) { + //操作的是子节点 1、获取父节点 2、判断子节点选中个数，如果全部选中则父节点设为选中状态，如果都不选中，则为不选中状态，如果部分选择，则设为不明确状态 + let selectStatuaArr = []; + + let item = getExplicitNode(that.dataList, row.pid); + selectStatuaArr = getSelectStatus(selectStatuaArr, item.children); + if ( + selectStatuaArr.every(selectItem => { + return true == selectItem; + }) + ) { + item.isSelect = true; + that.$refs.form.toggleRowSelection(item, true); + } else if ( + selectStatuaArr.every(selectItem => { + return false == selectItem; + }) + ) { + item.isSelect = false; + that.$refs.form.toggleRowSelection(item, false); + } else { + item.isSelect = ''; + } + //则还有父级 + if (item.pid != '0') { + operateLastLeve(item); + } + } + //判断操作的是子级点复选框还是父级点复选框，如果是父级点，则控制子级点的全选和不全选 + + //1、只是父级 2、既是子集，又是父级 3、只是子级 + let levelSataus = getLevelStatus(row); + if (levelSataus == 1) { + selectAllChildrens(row.children); + } else if (levelSataus == 2) { + selectAllChildrens(row.children); + operateLastLeve(row); + } else if (levelSataus == 3) { + operateLastLeve(row); + } + }, search() { if (this.menuName != '') { let saveList = []; @@ -142,21 +316,23 @@ export default { // }); // } // }, - handleSelectionChange(val) { - this.multipleSelection = []; - val.forEach(element => { - this.multipleSelection.push(element.id); - }); - console.log(this.multipleSelection); - }, + // handleSelectionChange(val) { + // this.multipleSelection = []; + // val.forEach(element => { + // this.multipleSelection.push(element.id); + // }); + // console.log(this.multipleSelection); + // }, showCustomerMenu(row) { this.selMenuName = row.name; this.$refs['customerForm'].init(row.id); }, open(id) { - console.log('Aa'); let menuIds = []; + this.multipleSelection = []; + this.getData(this.dataList); + if (id != '') { menuIds = [id]; } else { @@ -180,7 +356,9 @@ export default { }, close(id) { let menuIds = []; - + this.multipleSelection = []; + this.getData(this.dataList); + if (id != '') { menuIds = [id]; } else { @@ -205,9 +383,54 @@ export default { };