|
|
|
@ -17,7 +17,18 @@ |
|
|
|
<el-button type="primary" @click="open('')">开启</el-button> |
|
|
|
<el-button type="primary" @click="close('')">关闭</el-button> |
|
|
|
</div> |
|
|
|
<el-table v-loading="dataListLoading" :data="dataList" row-key="id" border style="width: 100%;" ref="form" @selection-change="handleSelectionChange"> |
|
|
|
<el-table |
|
|
|
v-loading="dataListLoading" |
|
|
|
:data="dataList" |
|
|
|
row-key="id" |
|
|
|
:row-class-name="rowClassNameFun" |
|
|
|
@select="selectFun" |
|
|
|
@select-all="selectAllFun" |
|
|
|
:header-row-class-name="headerRowClassName" |
|
|
|
border |
|
|
|
style="width: 100%;" |
|
|
|
ref="form" |
|
|
|
> |
|
|
|
<el-table-column type="selection" fixed="left" align="center" width="50" /> |
|
|
|
|
|
|
|
<el-table-column label="序号" fixed="left" type="index" align="center" width="50" /> |
|
|
|
@ -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,6 +326,8 @@ export default { |
|
|
|
}, |
|
|
|
close(id) { |
|
|
|
let menuIds = []; |
|
|
|
this.multipleSelection = []; |
|
|
|
this.getData(this.dataList); |
|
|
|
|
|
|
|
if (id != '') { |
|
|
|
menuIds = [id]; |
|
|
|
@ -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; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
|
|
|
|
tianq
3 years ago