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 77cafa3..c491065 100644
--- a/epmet-oper-web/src/views/modules/customer/customize/menuDataCustomer.vue
+++ b/epmet-oper-web/src/views/modules/customer/customize/menuDataCustomer.vue
@@ -17,7 +17,19 @@
开启
关闭
-
+
+
@@ -84,7 +96,178 @@ export default {
AddOrUpdate
},
created() {},
+ mounted() {},
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 = [];
@@ -118,6 +301,9 @@ export default {
open(id) {
let menuIds = [];
+ this.multipleSelection = [];
+ this.getData(this.dataList);
+
if (id != '') {
menuIds = [id];
} else {
@@ -174,6 +360,16 @@ export default {
this.query();
},
query() {
+ function deleteChildren(arr) {
+ arr.forEach(item => {
+ if (item.children.length > 0) {
+ deleteChildren(item.children);
+ } else {
+ delete item.children;
+ }
+ });
+ return arr;
+ }
this.dataListLoading = true;
this.$http
.post('/gov/access/menu/customerMenuList', {
@@ -187,29 +383,34 @@ export default {
this.total = 0;
return this.$message.error(res.msg);
}
- this.dataList = res.data;
+
+ let data = res.data;
+ console.log(data);
+ this.dataList = deleteChildren(data);
+
+ console.log(this.dataList);
})
.catch(() => {
this.dataListLoading = false;
});
},
- initData(customerId, customerName) {
- this.customerId = customerId;
- this.customerName = customerName;
- // if (this.mixinViewModuleOptions.createdIsNeed) {
- // console.log(this.customerId+"22222");
- this.query();
- // }
- },
+ // initData(customerId, customerName) {
+ // this.customerId = customerId;
+ // this.customerName = customerName;
+ // // 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');
@@ -227,4 +428,46 @@ export default {
line-height: 50px;
margin-bottom: 20px;
}
+
+.indeterminate .el-checkbox__input .el-checkbox__inner {
+ background-color: #409eff !important;
+ border-color: #409eff !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;
+}