<template>
|
<span>
|
<el-button size="mini" :disabled="disabled" type="primary" @click="choose">选择...</el-button>
|
<div>
|
<!--closable-->
|
<el-tag
|
v-for="tag in tags"
|
:key="tag.name"
|
:type="tag.type"
|
@close="handleClose(tag)"
|
>
|
{{ tag.name }}
|
</el-tag>
|
</div>
|
<el-dialog
|
:append-to-body="true"
|
title="选择"
|
:visible.sync="dialogVisible"
|
width="50%"
|
>
|
<div style="max-height: 350px;overflow-y: auto;">
|
<ul :id="id" class="ztree" />
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="_success">确 定</el-button>
|
</span>
|
</el-dialog>
|
|
</span>
|
</template>
|
|
<script>
|
import $ from 'jquery'
|
import '@/plugins/ztree/js/jquery-1.4.4.min.js'
|
import '@/plugins/ztree/js/jquery.ztree.core.min.js'
|
import '@/plugins/ztree/js/jquery.ztree.excheck.js'
|
import request from '@/utils/request'
|
|
export default {
|
props: {
|
// 数据源
|
nodes: {
|
type: Array,
|
default: function() {
|
return []
|
}
|
},
|
// 网络请求数据
|
http: {
|
type: Object,
|
default: function() {
|
return null
|
}
|
},
|
// 是否全部展开
|
expandAll: {
|
type: Boolean,
|
default: function() {
|
return false
|
}
|
},
|
// 是否禁用
|
disabled: {
|
type: Boolean,
|
default: function() {
|
return false
|
}
|
},
|
// 已选项
|
checked: {
|
type: Array,
|
default: function() {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
dialogVisible: false, // 弹窗
|
id: 'treeDemo',
|
setting: {
|
check: {
|
enable: true,
|
chkboxType: { 'Y': 'ps', 'N': 's' }
|
},
|
data: {
|
simpleData: {
|
enable: true,
|
idKey: 'id',
|
pIdKey: 'pid',
|
rootPId: 0
|
}
|
},
|
view: {
|
showIcon: false,
|
showLine: true
|
}
|
},
|
zNodes: this.nodes,
|
tags: [],
|
chooseFlag: false
|
}
|
},
|
watch: {
|
nodes(v) {
|
this.$set(this, 'zNodes', v)
|
this.init()
|
},
|
zNodes() {
|
this.initTag()
|
}
|
},
|
mounted() {
|
this.id = 'treeDemo' + new Date().getTime()
|
if (this.nodes.length <= 0 && this.http != null) {
|
this.getHttpData()
|
}
|
},
|
methods: {
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-08-08 16:45
|
* @Description : 选完收工
|
*/
|
_success() {
|
this.dialogVisible = false
|
const treeObj = window.$.fn.zTree.getZTreeObj(this.id)
|
const nodes = treeObj.getCheckedNodes(true)
|
this.zNodes.forEach(n => {
|
n.checked = false
|
nodes.forEach(v => {
|
if (n.id == v.id) {
|
n.checked = true
|
}
|
})
|
})
|
this.zNodes = Object.assign([], this.zNodes)
|
this.$emit('setView', nodes)
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-08-08 16:42
|
* @Description :获取网络请求数据
|
*/
|
getHttpData() {
|
request({
|
url: this.http.url,
|
method: 'get',
|
params: this.http.params
|
}).then(res => {
|
this.zNodes = res.data
|
if (this.checked != null && this.checked.length > 0) {
|
this.zNodes.forEach(v => {
|
this.checked.forEach(c => {
|
if (v.id == c.id) {
|
v.checked = true
|
}
|
})
|
})
|
}
|
})
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-07-01 17:11
|
* @Description : 初始化树
|
*/
|
init() {
|
if (this.checked.length > 0) {
|
this.zNodes.forEach(v => {
|
this.checked.forEach(c => {
|
if (v.id == c.id) {
|
v.checked = true
|
}
|
})
|
})
|
}
|
this.initTag()
|
if ($('#' + this.id).length == 1) {
|
window.$.fn.zTree.destroy(this.id)
|
window.$.fn.zTree.init($('#' + this.id), this.setting, this.zNodes)
|
if (this.expandAll) {
|
this.$nextTick(() => {
|
const treeObj = window.$.fn.zTree.getZTreeObj(this.id)
|
treeObj.expandAll(true)
|
})
|
}
|
}
|
},
|
initTag() {
|
this.tags = []
|
this.zNodes.forEach(n => {
|
if (n.checked) {
|
this.tags.push({
|
id: n.id,
|
name: n.name,
|
type: 'success'
|
})
|
}
|
})
|
},
|
/*
|
* @Author : liu.q [916000612@qq.com]
|
* @Date : 2019-07-01 15:12
|
* @Description : 获取选中节点
|
*/
|
getCheckedNodes() {
|
if (!this.chooseFlag) {
|
return []
|
}
|
const treeObj = window.$.fn.zTree.getZTreeObj(this.id)
|
const nodes = treeObj.getCheckedNodes(true)
|
return nodes
|
},
|
// 显示ztree树
|
choose() {
|
this.chooseFlag = true
|
this.dialogVisible = true
|
this.$nextTick(() => {
|
this.init()
|
})
|
},
|
handleClose(tag) {
|
this.tags.splice(this.tags.indexOf(tag), 1)
|
for (let i = 0; i < this.zNodes.length; i++) {
|
const node = this.zNodes[i]
|
if (node.id == tag.id) {
|
node.checked = false
|
break
|
}
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
@import "../../../plugins/ztree/css/zTreeStyle/zTreeStyle.css";
|
|
.el-tag {
|
margin-right: 10px;
|
margin-top: 2px;
|
}
|
</style>
|
