<template>
|
<div class="tree">
|
<el-row>
|
<el-col :span="12" class="treeTitle title">分类</el-col>
|
<el-col :span="12" class="addIcon">
|
<el-tooltip class="item" effect="dark" content="新增分类" placement="top">
|
<span @click.stop="addItem"><i class="el-icon-plus addIcon"></i></span>
|
</el-tooltip>
|
</el-col>
|
</el-row>
|
<el-tree :data="treeData" :props="props" @node-click="handleNodeClick"
|
:style="'height:' + (height-260) +'px;'" v-loading="loading"
|
:expand-on-click-node="false">
|
<div class="custom-tree-node" slot-scope="{ node , data}">
|
<div class="treeLabel">{{ node.label }}</div>
|
<div class="treeIcon" v-show="node.data.showIcon">
|
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
|
<img src="@/assets/img/edit_icon_2x.png" class="iconSize"
|
@click.stop="() => editData(node,data)" />
|
</el-tooltip>
|
<slot :data="data"></slot>
|
<el-tooltip class="item" effect="dark" content="新增子分类" placement="top">
|
<img src="@/assets/img/add_icon_2x.png" class="iconSize"
|
v-if="node.data.catLevelNum !== 3" @click.stop="() => addItem(node,data)" />
|
</el-tooltip>
|
<el-tooltip class="item" effect="dark" content="删除" placement="top">
|
<img src="@/assets/img/del_icon_2x.png" class="iconSize"
|
@click.stop="() => remove(node,data)" />
|
</el-tooltip>
|
</div>
|
</div>
|
</el-tree>
|
</div>
|
</template>
|
<script>
|
import { mapGetters } from 'vuex'
|
import productCategoryApi from '@/api/productmanagement/productCategory'
|
import productExhibitionApi from '@/api/productmanagement/productExhibition'
|
|
export default {
|
props: ['tag'],
|
data() {
|
return {
|
height: 300,
|
treeData: [],
|
props: {
|
children: 'childrens',
|
label: 'catName',
|
id: 'catId'
|
},
|
listQuery: {
|
bizId: 'B02'
|
},
|
loading: false
|
}
|
},
|
computed: {
|
...mapGetters([
|
'mainContainerHeight'
|
])
|
},
|
watch: {
|
mainContainerHeight(newHeight, oldHeight) {
|
this.height = newHeight
|
}
|
},
|
created() {
|
this.$nextTick(function() {
|
this.height = window.innerHeight
|
this.queryList()
|
})
|
},
|
methods: {
|
/**
|
* 查询列表
|
*/
|
queryList() {
|
this.loading = true
|
let res = null
|
if (this.tag) {
|
res = productExhibitionApi.getList(this.listQuery)
|
} else {
|
res = productCategoryApi.getList(this.listQuery, false)
|
}
|
res.then(res => {
|
if (res.data) {
|
this.judgeIsHasChildren(res.data)
|
this.treeData = res.data
|
this.loading = false
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
},
|
/**
|
* 打开编辑弹窗
|
*/
|
editData(node, data) {
|
node.data.flag = 'edit'
|
this.$emit('hand-show-add-category', node.data, 2)
|
},
|
|
/**
|
* 删除树节点
|
*/
|
remove(node, data) {
|
if (node.childNodes.length > 0) {
|
this.$message({
|
message: '拥有子分类，无法删除',
|
type: 'info'
|
})
|
return
|
}
|
this.$confirm('确认删除这条数据吗？', '删除', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
let res = null
|
if (this.tag) {
|
res = productExhibitionApi.deleteItem({ catId: node.data.catId })
|
} else {
|
res = productCategoryApi.deleteItem({ catId: node.data.catId })
|
}
|
res.then(res => {
|
if (res.data) {
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
this.queryList()
|
this.$emit('hand-tree-item')
|
}
|
})
|
}).catch(() => { })
|
},
|
/**
|
* 打开添加弹窗
|
*/
|
addItem(node, data) {
|
this.$emit('hand-show-add-category', node.data, 1)
|
},
|
/**
|
* 给每个节点增加showIcon属性，控制操作按钮的显示隐藏
|
*/
|
judgeIsHasChildren(data) {
|
data.forEach(item => {
|
item.showIcon = false
|
if (item.childrens) {
|
this.judgeIsHasChildren(item.childrens)
|
}
|
})
|
},
|
handleNodeClick(data) {
|
this.judgeIsHasChildren(this.treeData)
|
this.$set(data, 'showIcon', true)
|
this.$emit('hand-tree-item', data)
|
}
|
}
|
}
|
</script>
|
<style lang="scss">
|
.tree {
|
padding: 10px;
|
height: auto;
|
min-height: 100%;
|
background: #fff;
|
border-radius: 4px;
|
.item{
|
margin-right:5px;
|
}
|
.iconSize {
|
width: 16px;
|
height: 16px;
|
position: relative;
|
top: 2px;
|
}
|
.title {
|
font-size: 16px;
|
color: #000;
|
}
|
.addIcon {
|
text-align: right;
|
span {
|
padding: 5px;
|
border-radius: 5px;
|
cursor: pointer;
|
color: #333;
|
i,
|
.treeTitle {
|
line-height: 27px;
|
}
|
}
|
}
|
.el-tree {
|
margin-top: 20px;
|
overflow: auto;
|
.el-tree-node > .el-tree-node__children {
|
overflow: unset;
|
}
|
.is-current > .el-tree-node__content {
|
background-color: #fff0f0 !important;
|
.custom-tree-node {
|
.treeLabel {
|
background-color: #fff0f0 !important;
|
line-height: 26px;
|
}
|
}
|
}
|
.is-current > .el-tree-node__content {
|
color: rgba(0, 0, 0, 0.86) !important;
|
font-size: 14px;
|
}
|
.el-tree-node__content {
|
.custom-tree-node {
|
width: 100%;
|
display: flex;
|
.treeLabel {
|
flex: 1;
|
}
|
.treeIcon {
|
width: 70px;
|
background: #fff0f0;
|
padding: 0 5px;
|
line-height: 26px;
|
}
|
i {
|
outline-width: 0;
|
}
|
i:nth-child(2) {
|
margin: 0 15px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
