1.批量删除按钮
< el-button type = " danger" @click = " batchDelete" > 批量删除</ el-button>
< el-tree
:data = " menus"
:props = " defaultProps"
:expand-on-click-node = " false"
node-key = " catId"
:default-expanded-keys = " expandedKey"
show-checkbox
:draggable = " draggable"
:allow-drop = " allowDrop"
@node-drop = " handleDrop"
ref = " menuTree"
>
2.批量删除方法
batchDelete ( ) {
let catIds = [ ] ;
let catNames = [ ] ;
let checkedNodes = this . $refs. menuTree. getCheckedNodes ( ) ;
console. log ( "被选中的元素" , checkedNodes) ;
for ( let i = 0 ; i < checkedNodes. length; i++ ) {
catIds. push ( checkedNodes[ i] . catId) ;
catNames. push ( checkedNodes[ i] . name) ;
}
this . $confirm ( ` 是否批量删除【 ${ catNames} 】菜单? ` , "提示" , {
confirmButtonText: "确定" ,
cancelButtonText: "取消" ,
type: "warning"
} )
. then ( ( ) => {
this . $http ( {
url: this . $http. adornUrl ( "/product/category/delete" ) ,
method: "post" ,
data: this . $http. adornData ( catIds, false )
} ) . then ( ( { data } ) => {
this . $message ( {
message: "菜单批量删除成功" ,
type: "success"
} ) ;
this . getMenus ( ) ;
} ) ;
} )
. catch ( ( ) => { } ) ;
} ,
3.完整代码
< template>
< div>
< el-switch
style = " display : block"
v-model = " draggable"
active-color = " #13ce66"
inactive-color = " #ff4949"
active-text = " 开启拖拽"
inactive-text = " 关闭拖拽"
>
</ el-switch>
< el-button v-if = " draggable" @click = " batchSave" > 批量保存</ el-button>
< el-button type = " danger" @click = " batchDelete" > 批量删除</ el-button>
< el-tree
:data = " menus"
:props = " defaultProps"
:expand-on-click-node = " false"
node-key = " catId"
:default-expanded-keys = " expandedKey"
show-checkbox
:draggable = " draggable"
:allow-drop = " allowDrop"
@node-drop = " handleDrop"
ref = " menuTree"
>
< span class = " custom-tree-node" slot-scope = " { node, data }" >
< span> {{ node.label }}</ span>
< span>
< el-button
type = " text"
size = " mini"
v-if = " node.level <= 2"
@click = " () => append(data)"
>
Append
</ el-button>
< el-button type = " text" size = " mini" @click = " () => edit(data)" >
Edit
</ el-button>
< el-button
type = " text"
size = " mini"
v-if = " node.childNodes.length == 0"
@click = " () => remove(node, data)"
>
Delete
</ el-button>
</ span>
</ span>
</ el-tree>
< el-dialog
:title = " title"
:visible.sync = " dialogVisible"
width = " 30%"
:close-on-click-modal = " false"
>
< el-form :model = " category" >
< el-form-item label = " 分类名称" >
< el-input v-model = " category.name" autocomplete = " off" > </ el-input>
</ el-form-item>
< el-form-item label = " 图标" >
< el-input v-model = " category.icon" autocomplete = " off" > </ el-input>
</ el-form-item>
< el-form-item label = " 计量单位" >
< el-input
v-model = " category.productUnit"
autocomplete = " off"
> </ el-input>
</ el-form-item>
</ el-form>
< span slot = " footer" class = " dialog-footer" >
< el-button @click = " dialogVisible = false" > 取 消</ el-button>
< el-button type = " primary" @click = " submitData" > 确 定</ el-button>
</ span>
</ el-dialog>
</ div>
</ template>
< script>
export default {
name: "" ,
components: { } ,
props: { } ,
data ( ) {
return {
menus: [ ] ,
expandedKey: [ ] ,
dialogVisible: false ,
dialogType: "" ,
title: "" ,
maxLevel: 0 ,
updateNodes: [ ] ,
draggable: false ,
pCid: [ ] ,
category: {
name: "" ,
parentCid: 0 ,
catLevel: 0 ,
showStatus: 1 ,
sort: 0 ,
productUnit: "" ,
icon: "" ,
catId: null ,
} ,
defaultProps: {
children: "children" ,
label: "name" ,
} ,
} ;
} ,
methods: {
getMenus ( ) {
this . $http ( {
url: this . $http. adornUrl ( "/product/category/list/tree" ) ,
method: "get" ,
} ) . then ( ( { data } ) => {
console. log ( "获取菜单数据成功" , data. data) ;
this . menus = data. data;
} ) ;
} ,
append ( data ) {
console. log ( "添加" , data) ;
this . dialogVisible = true ;
this . dialogType = "add" ;
this . title = "添加分类" ;
this . category. parentCid = data. catId;
this . category. catLevel = data. catLevel * 1 + 1 ;
this . category. catId = null ;
this . category. name = "" ;
this . category. icon = "" ;
this . category. productUnit = "" ;
this . category. sort = 0 ;
this . category. showStatus = 1 ;
} ,
addCategory ( ) {
console. log ( "提交的三级分类数据" , this . category) ;
this . $http ( {
url: this . $http. adornUrl ( "/product/category/save" ) ,
method: "post" ,
data: this . $http. adornData ( this . category, false ) ,
} ) . then ( ( { data } ) => {
this . $message ( {
message: ` 【 ${ this . category. name} 】菜单保存成功 ` ,
type: "success" ,
} ) ;
this . dialogVisible = false ;
this . getMenus ( ) ;
this . expandedKey = [ this . category. parentCid] ;
} ) ;
} ,
remove ( node, data ) {
var ids = [ data. catId] ;
this . $confirm ( ` 是否删除【 ${ data. name} 】菜单? ` , "提示" , {
confirmButtonText: "确定" ,
cancelButtonText: "取消" ,
type: "warning" ,
} )
. then ( ( ) => {
this . $http ( {
url: this . $http. adornUrl ( "/product/category/delete" ) ,
method: "post" ,
data: this . $http. adornData ( ids, false ) ,
} ) . then ( ( { data } ) => {
this . $message ( {
message: ` 【 ${ node. data. name} 】菜单删除成功 ` ,
type: "success" ,
} ) ;
this . getMenus ( ) ;
this . expandedKey = [ node. parent. data. catId] ;
} ) ;
} )
. catch ( ( ) => { } ) ;
console. log ( "remove" , node, data) ;
} ,
edit ( data ) {
this . dialogVisible = true ;
this . dialogType = "edit" ;
this . title = "修改分类" ;
this . $http ( {
url: this . $http. adornUrl ( ` /product/category/info/ ${ data. catId} ` ) ,
method: "get" ,
} ) . then ( ( { data } ) => {
console. log ( "修改回显的数据" , data) ;
this . category. name = data. data. name;
this . category. catId = data. data. catId;
this . category. icon = data. data. icon;
this . category. productUnit = data. data. productUnit;
this . category. parentCid = data. data. parentCid;
this . category. catLevel = data. data. catLevel;
this . category. sort = data. data. sort;
this . category. showStatus = data. data. showStatus;
} ) ;
} ,
submitData ( ) {
if ( this . dialogType == "add" ) {
this . addCategory ( ) ;
}
if ( this . dialogType == "edit" ) {
this . editCategory ( ) ;
}
} ,
editCategory ( ) {
var { catId, name, icon, productUnit } = this . category;
this . $http ( {
url: this . $http. adornUrl ( "/product/category/update" ) ,
method: "post" ,
data: this . $http. adornData ( { catId, name, icon, productUnit } , false ) ,
} ) . then ( ( { data } ) => {
this . $message ( {
message: ` 【 ${ this . category. name} 】菜单修改成功 ` ,
type: "success" ,
} ) ;
this . dialogVisible = false ;
this . getMenus ( ) ;
this . expandedKey = [ this . category. parentCid] ;
} ) ;
} ,
allowDrop ( draggingNode, dropNode, type ) {
console. log ( "allowDrop:" , draggingNode, dropNode, type) ;
this . countNodeLevel ( draggingNode) ;
let deep = Math. abs ( this . maxLevel - draggingNode. level) + 1 ;
console. log ( "深度: " , deep) ;
if ( type == "inner" ) {
return deep + dropNode. level <= 3 ;
} else {
return deep + dropNode. parent. level <= 3 ;
}
} ,
countNodeLevel ( node ) {
if ( node. childNodes != null && node. childNodes. length > 0 ) {
for ( let i = 0 ; i < node. childNodes. length; i++ ) {
if ( node. childNodes[ i] . level > this . maxLevel) {
this . maxLevel = node. childNodes[ i] . level;
}
this . countNodeLevel ( node. childNodes[ i] ) ;
}
}
} ,
handleDrop ( draggingNode, dropNode, dropType, ev ) {
console. log ( "handleDrop: " , draggingNode, dropNode, dropType) ;
let pCid = 0 ;
let siblings = null ;
if ( dropType == "before" || dropType == "after" ) {
pCid =
dropNode. parent. data. catId == undefined
? 0
: dropNode. parent. data. catId;
siblings = dropNode. parent. childNodes;
} else {
pCid = dropNode. data. catId;
siblings = dropNode. childNodes;
}
this . pCid. push ( pCid) ;
for ( let i = 0 ; i < siblings. length; i++ ) {
if ( siblings[ i] . data. catId == draggingNode. data. catId) {
let catLevel = draggingNode. level;
if ( siblings[ i] . level != draggingNode. level) {
catLevel = siblings[ i] . level;
this . updateChildNodeLevel ( siblings[ i] ) ;
}
this . updateNodes. push ( {
catId: siblings[ i] . data. catId,
sort: i,
parentCid: pCid,
catLevel: catLevel,
} ) ;
} else {
this . updateNodes. push ( { catId: siblings[ i] . data. catId, sort: i } ) ;
}
}
console. log ( "updateNodes:" , this . updateNodes) ;
} ,
updateChildNodeLevel ( node ) {
if ( node. childNodes. length > 0 ) {
for ( let i = 0 ; i < node. childNodes. length; i++ ) {
var cNode = node. childNodes[ i] . data;
this . updateNodes. push ( {
catId: cNode. catId,
catLevel: node. childNodes[ i] . level,
} ) ;
this . updateChildNodeLevel ( node. childNodes[ i] ) ;
}
}
} ,
batchSave ( ) {
this . $http ( {
url: this . $http. adornUrl ( "/product/category/update/sort" ) ,
method: "post" ,
data: this . $http. adornData ( this . updateNodes, false ) ,
} ) . then ( ( { data } ) => {
this . $message ( {
message: "菜单顺序等修改成功" ,
type: "success" ,
} ) ;
this . getMenus ( ) ;
this . expandedKey = this . pCid;
this . updateNodes = [ ] ;
this . maxLevel = 0 ;
} ) ;
} ,
batchDelete ( ) {
let catIds = [ ] ;
let catNames = [ ] ;
let checkedNodes = this . $refs. menuTree. getCheckedNodes ( ) ;
console. log ( "被选中的元素" , checkedNodes) ;
for ( let i = 0 ; i < checkedNodes. length; i++ ) {
catIds. push ( checkedNodes[ i] . catId) ;
catNames. push ( checkedNodes[ i] . name) ;
}
this . $confirm ( ` 是否批量删除【 ${ catNames} 】菜单? ` , "提示" , {
confirmButtonText: "确定" ,
cancelButtonText: "取消" ,
type: "warning"
} )
. then ( ( ) => {
this . $http ( {
url: this . $http. adornUrl ( "/product/category/delete" ) ,
method: "post" ,
data: this . $http. adornData ( catIds, false )
} ) . then ( ( { data } ) => {
this . $message ( {
message: "菜单批量删除成功" ,
type: "success"
} ) ;
this . getMenus ( ) ;
} ) ;
} )
. catch ( ( ) => { } ) ;
} ,
} ,
computed: { } ,
watch: { } ,
created ( ) {
this . getMenus ( ) ;
} ,
mounted ( ) { } ,
beforeCreate ( ) { } ,
beforeMount ( ) { } ,
beforeUpdate ( ) { } ,
updated ( ) { } ,
beforeDestroy ( ) { } ,
destroyed ( ) { } ,
activated ( ) { } ,
} ;
</ script>
< style scoped >
</ style>