|
|
@@ -79,8 +79,7 @@
|
|
|
>
|
|
|
<template slot-scope="scope">
|
|
|
<el-button
|
|
|
- type="danger"
|
|
|
- plain
|
|
|
+ type="text"
|
|
|
icon="el-icon-circle-close"
|
|
|
size="mini"
|
|
|
:disabled="!celDistribution"
|
|
|
@@ -111,10 +110,13 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
<el-table
|
|
|
+ ref="distTable"
|
|
|
v-loading="distLoading"
|
|
|
:data="addMenuList"
|
|
|
row-key="id"
|
|
|
@selection-change="handelAddDist"
|
|
|
+ @select="select"
|
|
|
+ @select-all="selectAll"
|
|
|
>
|
|
|
<el-table-column
|
|
|
type="selection"
|
|
|
@@ -187,7 +189,9 @@ export default {
|
|
|
// 分配菜单表格
|
|
|
addMenuList: [],
|
|
|
// 禁用分配
|
|
|
- distribution: true
|
|
|
+ distribution: true,
|
|
|
+ // 全选按钮选中所有节点
|
|
|
+ isSelectAll: false
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
@@ -210,6 +214,9 @@ export default {
|
|
|
getMenuListTree() {
|
|
|
getMenuListTree().then(res => {
|
|
|
const data = res.data
|
|
|
+ data.forEach(item => {
|
|
|
+ item.isSelect = false
|
|
|
+ })
|
|
|
this.addMenuList = data
|
|
|
this.distLoading = false
|
|
|
})
|
|
|
@@ -270,7 +277,7 @@ export default {
|
|
|
/** 取消分配按钮 */
|
|
|
delMenu(id) {
|
|
|
this.delDistObj.menuList = []
|
|
|
- this.$confirm('是否分配菜单?', '提示', {
|
|
|
+ this.$confirm('是否取消分配菜单?', '提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
cancelButtonClass: 'btn_custom_cancel',
|
|
|
@@ -278,7 +285,6 @@ export default {
|
|
|
}).then(() => {
|
|
|
this.delDistObj.menuList.push({ id })
|
|
|
this.delDistributionMenu()
|
|
|
- console.log(this.delDistObj.menuList)
|
|
|
}).catch(() => {
|
|
|
this.$message({
|
|
|
type: 'info',
|
|
|
@@ -288,7 +294,7 @@ export default {
|
|
|
},
|
|
|
/** 批量取消分配菜单按钮 */
|
|
|
handleDelMenus() {
|
|
|
- this.$confirm('是否批量分配菜单?', '提示', {
|
|
|
+ this.$confirm('是否批量取消分配菜单?', '提示', {
|
|
|
confirmButtonText: '确定',
|
|
|
cancelButtonText: '取消',
|
|
|
cancelButtonClass: 'btn_custom_cancel',
|
|
|
@@ -326,6 +332,68 @@ export default {
|
|
|
this.getList()
|
|
|
}
|
|
|
})
|
|
|
+ },
|
|
|
+ // 选中父节点时，子节点一起选中取消
|
|
|
+ select(selection, row) {
|
|
|
+ if (
|
|
|
+ selection.some((el) => {
|
|
|
+ return row.id === el.id
|
|
|
+ })
|
|
|
+ ) {
|
|
|
+ if (row.children) {
|
|
|
+ // 解决子组件没有被勾选到
|
|
|
+ this.setChildren(row.children, true)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (row.children) {
|
|
|
+ this.setChildren(row.children, false)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toggleSelection(row, select) {
|
|
|
+ if (row) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.distTable && this.$refs.distTable.toggleRowSelection(row, select)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 选择全部
|
|
|
+ selectAll(selection) {
|
|
|
+ // tabledata第一层只要有在selection里面就是全选
|
|
|
+ const isSelect = selection.some((el) => {
|
|
|
+ const tableDataIds = this.addMenuList.map((j) => j.id)
|
|
|
+ return tableDataIds.includes(el.id)
|
|
|
+ })
|
|
|
+ // tableDate第一层只要有不在selection里面就是全不选
|
|
|
+ const isCancel = !this.addMenuList.every((el) => {
|
|
|
+ const selectIds = selection.map((j) => j.id)
|
|
|
+ return selectIds.includes(el.id)
|
|
|
+ })
|
|
|
+ if (isSelect) {
|
|
|
+ selection.map((el) => {
|
|
|
+ if (el.children) {
|
|
|
+ // 解决子组件没有被勾选到
|
|
|
+ this.setChildren(el.children, true)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (isCancel) {
|
|
|
+ this.addMenuList.map((el) => {
|
|
|
+ if (el.children) {
|
|
|
+ // 解决子组件没有被勾选到
|
|
|
+ this.setChildren(el.children, false)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setChildren(children, type) {
|
|
|
+ // 编辑多个子层级
|
|
|
+ children.map((j) => {
|
|
|
+ this.toggleSelection(j, type)
|
|
|
+ if (j.children) {
|
|
|
+ this.setChildren(j.children, type)
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
}
|
FinalYu