<a-tree
ref="asyncTree"
:show-line="true"
:show-icon="true"
:load-data="onLoadData"
:tree-data="treeData"
:selectedKeys="selectedKeys"
:expandedKeys="iExpandedKeys"
:autoExpandParent="autoExpandParent"
@expand="onExpand"
@select="onSelect">
</a-tree>
expandedKeys: 通过值控制展开的节点
selectedKeys : 通过值控制当前选中的节点
expand: 手动展开事件
select:手动选中事件

实例代码:
<template>
<a-card :bordered="false">
<div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
<div class="table-page-search-wrapper" style="padding-bottom: 10px">
<a-row :gutter="10">
<a-col :md="20" :sm="24">
全宗号: <a-select style="width: 90%" v-model="defaultFondNo" placeholder="请选择" @change="handleChange">
<a-select-option v-for="item in dataSource" key="item.id" :value="item.fondsNo">
{{ '['+item.fondsNo+']'+item.fondsName }}
</a-select-option>
</a-select>
</a-col>
</a-row>
</div>
<a-row :gutter="10">
<a-col :md="8" :sm="24" >
<a-alert type="info" :showIcon="true">
<div slot="message">
当前选择:<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
<a v-if="this.currSelected.title" style="margin-left: 10px" @click="onClearTreeSelect">取消选择</a>
</div>
</a-alert>
<!-- <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入门类"/>-->
<a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
<span style="user-select: none">
<a-tree
ref="asyncTree"
:show-line="true"
:show-icon="true"
:load-data="onLoadData"
:tree-data="treeData"
:selectedKeys="selectedKeys"
:expandedKeys="iExpandedKeys"
:autoExpandParent="autoExpandParent"
@expand="onExpand"
@select="onSelect">
</a-tree>
</span>
</a-dropdown>
</a-col>
<a-col :md="16" :sm="24" >
<a-card v-if="visibleForm">
<das-code-flh-layout ref="realForm" @ok="submitCallback(arguments)" :disabled="disableSubmit"></das-code-flh-layout>
</a-card>
<a-card v-else >
<a-empty>
<span slot="description"> 请先选择一个分类号! </span>
</a-empty>
</a-card>
</a-col>
</a-row>
</div>
</a-card>
</template>
<script>
import DasCodeFlhForm from './modules/DasCodeFlhForm'
import DasCodeFlhLayout from './modules/DasCodeFlhLayout'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '@/api/manage'
export default {
name: 'DasCodeFondsFlh',
mixins:[JeecgListMixin, mixinDevice],
components: {
DasCodeFlhForm,
DasCodeFlhLayout
},
data () {
return {
items: [{id:'1',value:'1',name:'jack'}, {id:'2',value:'2',name:'lucy'}],
defaultFondNo: '',
mltype :'' ,
// disableMixinCreated:true,
treeData:[
/* { title: 'Expand to load', key: '0' },
{ title: 'Expand to load', key: '1' },
{ title: 'Tree Node', key: '2', isLeaf: true }*/
],
iExpandedKeys: [],
autoExpandParent: true,
selectedKeys: [],
currSelected: {},
currTreeNode: {},
currExpanded:{},
randomNum: '',
dropTrigger: '',
url: {
loadFlhUrl: "/das.code/dasCodeFlh/listflh", //取分类号
loadCategoryUrl: "/das.code/dasCodeCategory/list", //取门类号
list: "/das.code/dasCodeFonds/list", //取全宗号
},
title:'分类号管理',
columns: [
{
title:'全宗号代码',
align:"center",
dataIndex: 'fondsNo'
},{
title:'全宗号名称',
align:"center",
dataIndex: 'fondsName'
},],
width:800,
visibleForm: false ,
visible: true,
disableSubmit: false
}
},
methods: {
loadData() {
if(!this.url.list){
this.$message.error("请设置url.list属性!")
return
}
this.ipagination.current = 1;
var params = this.getQueryParams();//查询条件
this.loading = true;
//加载下拉框
getAction(this.url.list, params).then((res) => {
if (res.success) {
this.dataSource = res.result.records || res.result;
const defaultSelect = fonds?fonds:this.dataSource[0]
this.defaultFondNo = defaultSelect.fondsNo
let fonds = {id: defaultSelect.id, name: defaultSelect.fondsName, code: defaultSelect.fondsNo}
//加载数
this.loadTree(fonds)
} else {
this.$message.warning(res.message)
}
}).finally(() => {
this.loading = false
})
},
//下拉选择
handleChange(value){
let defaultSelect = this.dataSource.find(item =>{
return item.fondsNo === value
})
let fonds = {id:defaultSelect.id,name:defaultSelect.fondsName,code:defaultSelect.fondsNo}
this.loadTree(fonds)
},
created() {
//this.getSuperFieldList();
},
///tree相关
// 右键点击下拉框改变事件
onSearch(value) {
},
dropStatus(visible) {
if (visible == false) {
this.dropTrigger = ''
}
},
loadFlhData(treeNode,resolve,url ){
let pid = treeNode.dataRef.id
let pname = treeNode.dataRef.name
let pcode = treeNode.dataRef.code
let params = {pid: pid}
getAction(url, params).then((res) => {
if (res.success) {
const result = res.result.records || res.result;
const component = res.result.component
let children = []
result.forEach(item => {
let treenode = {}
treenode.key = pid+'-'+item.id+'-'+this.randomNum //item.id
treenode.value = item.code //放code
treenode.title = '['+item.code+']'+item.name
treenode.pid = pid //门类id item.pid
treenode.pname = pname
treenode.pcode = pcode
treenode.id = item.id
treenode.name = item.name
treenode.code = item.code
treenode.descc = item.descc
treenode.sorder = item.sorder
treenode.mltype = this.mltype
treenode.type = "3"
//是否叶子,数据库判断,需要修改
treenode.isLeaf = item.isLeaf//false
children.push(treenode)
})
//console.log(children)
treeNode.dataRef.children = children
this.treeData = [...this.treeData];
//这个地方要用this.treeData[0]
this.setThisExpandedKeys(this.treeData[0])
}
}).finally(() => {
resolve();
})
},
onLoadData(treeNode) {
return new Promise(resolve => {
if (treeNode.dataRef.children) {
resolve();
return;
}
//类型:1:全宗 2:门类 3:分类号
if(treeNode.dataRef.type === '2') {
this.loadFlhData(treeNode, resolve,this.url.loadFlhUrl)
}
else if(treeNode.dataRef.type === '3') {
this.loadFlhData(treeNode, resolve,this.url.loadFlhUrl)
}
else{
resolve();
}
//
})
},
setThisExpandedKeys(node) {
if (node.children && node.children.length > 0) {
if(!this.iExpandedKeys.some(item=>{ return item.key === node.key })){
this.iExpandedKeys.push(node.key)
}
for (let a = 0; a < node.children.length; a++) {
this.setThisExpandedKeys(node.children[a])
}
}
},
// 生成一个随机数
genrateRandomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min)
},
//根据全宗查门类
loadTree(fonds) {
//{id: "1430878450805182466", name: "住建局规划登记", code: "ZJJGH"}
this.randomNum = this.genrateRandomNum(0,9999)
let pid = fonds.id
let pname = fonds.name
let pcode = fonds.code
this.mltype = pid
var that = this
that.treeData = []
let params = {type: "1"} //取档案门类
getAction(this.url.loadCategoryUrl,params).then((res) => {
if (res.success) {
const result = res.result.records || res.result
let children=[]
result.forEach(item=>{
let treenode = {}
treenode.key = pid+'-'+item.id+this.randomNum//
treenode.value = pid+'-'+item.id
treenode.title = '['+item.code+']'+item.name
treenode.name = item.name
treenode.pid = pid //全宗id
treenode.pname = pname
treenode.pcode = pcode
treenode.id = pid+'-'+item.id
treenode.name = item.name
treenode.code = item.code
treenode.descc = item.descc
treenode.sorder = item.sorder
treenode.mltype = pid
treenode.type = "2"
treenode.isLeaf = false
children.push(treenode)
})
let root = {pid:0,key:fonds.id,value:fonds.id,mltype:0, id:fonds.id,title:fonds.name,children:children}
that.treeData.push(root)
that.setThisExpandedKeys(root)
}
}).finally(() => {
this.loading = false
})
},
onClearTreeSelect(){
this.currSelected = []
this.selectedKeys = []
},
getCurrSelectedTitle() {
return !this.currSelected.title ? '' : this.currSelected.title
},
onSelect(selectedKeys, e) {
//console.log('selected', selectedKeys, e)
this.hiding = false
this.currTreeNode = e.node
this.currExpanded = e.node.expanded
let record = e.node.dataRef
this.currSelected = Object.assign({}, record)
if(this.currSelected.type === "2")
{
this.view (this.currSelected)
}else if( this.currSelected.type === "3")
{
this.view (this.currSelected)
}else{
this.visibleForm=false
}
this.model = this.currSelected
this.selectedKeys = [record.key]
this.model.parentId = record.parentId
},
//////////tree相关end//////////
//显示选中记录
view (record) {
this.visibleForm = true
this.$nextTick(()=>{
this.$refs.realForm.view(record);
})
},
onExpand(expandedKeys) {
this.iExpandedKeys = expandedKeys
this.autoExpandParent = false
},
//增加时,加节点
addNode(treeNode,id,node){
treeNode.forEach(item=>{
if(item.id == id){ //相等 == ,用=== 判断不了
if(!item.children){ //有子节点没有load
if(!this.currExpanded){ //没有展开
//此处考虑若有历史数据,通过加载数据,数据库中做了children判读,则不要此段
// console.log("===========没有展开,开始展开============")
this.$set(item, 'isLeaf', false)
this.iExpandedKeys.push(item.key)
this.autoExpandParent = false
}else{
//console.log("===========没有子节点,构建子节点============")
this.$set(item, 'isLeaf', false)
this.$set(item, 'children', [])
item.children.push(node)
}
}
else{
{//console.log("===========有子节点,添加节点============")
this.$set(item, 'isLeaf', false)
//console.log("添加子节点")
item.children.push(node)
//if(!this.currExpanded) {
this.iExpandedKeys.push(item.key)
this.autoExpandParent = false
//}
}
}
//设置当前选择的节点
this.view(node)
this.selectedKeys = [node.key]
this.currSelected = node
}else{
if( item.children &&item.children.length>0){
this.addNode(item.children,id,node)
}
}
})
return treeNode
},
//修改时,更新节点
updateNode(treeNode,id,node){
treeNode.forEach(item=>{
if(item.id == id){ //相等 == ,用=== 判断不了
item.name = node.name
item.code = node.code
item.descc = node.descc
item.sorder = node.sorder
item.title = node.title
}else{
if( item.children &&item.children.length>0){
this.updateNode(item.children,id,node)
}
}
})
return treeNode
},
//排序方法
sortBykey(ary, key) {
return ary.sort(function (a, b) {
let x = a[key]
let y = b[key]
return ((x < y) ? -1 : (x > y) ? 1 : 0)
})
},
//对树进行排序
sortTree(treeNode){
treeNode.forEach(item=>{
if( item.children &&item.children.length>0) {
this.sortTree(item.children)
}else{
this.sortBykey(treeNode,"sorder")
}
})
return treeNode
},
//更新父节点是否有子节点
updateParentNodeHasChild(treeNode,id){
treeNode.forEach((item)=>{
if(item.id == id){ //相等 == ,用=== 判断不了
//没有子节点,取消展开,设置父节点为叶子节点
if( item.children &&item.children.length == 0){
item.isLeaf = true
const idx = this.iExpandedKeys.indexOf(id)
this.iExpandedKeys.splice(idx, 1)
}
//设置当前选择节点
this.currSelected = item
this.selectedKeys = [item.key]
//更新左边form窗口
this.view(item)
}else{
if( item.children &&item.children.length>0){
this.updateParentNodeHasChild(item.children,id)
}
}
})
return treeNode
},
//删除节点
deleteNode(treeNode,id){
treeNode.forEach((item)=>{
if(item.id == id){ //相等 == ,用=== 判断不了
const pid = item.pid
const idx = treeNode.indexOf(item)
treeNode.splice(idx, 1)
//更新父节点是否为叶子节点
this.updateParentNodeHasChild(this.treeData,pid)
}else{
if( item.children &&item.children.length>0){
this.deleteNode(item.children,id)
}
}
})
return treeNode
},
//提交回调
submitCallback(args){
const operator = args[0]
let item = args[1]
let pid = item.pid
// console.log("pid:"+pid+ "pname:"+item.pname)
if(operator == 'addchild'||operator == 'add'){
let treenode = {}
// alert(item.key)
// console.log("item.key:"+item.key)
treenode.key = pid+'-'+item.id+'-'+this.randomNum //item.id
treenode.value = item.code
treenode.title = '['+item.code+']'+item.name
treenode.pid = item.pid
treenode.pname = item.pname
treenode.pcode = item.pcode
treenode.id = item.id
treenode.name = item.name
treenode.code = item.code
treenode.descc = item.descc
treenode.sorder = item.sorder
treenode.type = "3"
treenode.isLeaf = true
treenode.children = []
treenode.mltype = this.mltype
let node = {}
let root = this.addNode(this.treeData,pid,treenode)
this.$set(this.treeData, root)
this.$refs.asyncTree.$forceUpdate()
}else if(operator == 'edit'){
let treenode = {}
treenode.key = item.key
treenode.value = item.code
treenode.title = '['+item.code+']'+item.name
treenode.pid = item.pid
treenode.pname = item.pname
treenode.pcode = item.pcode
treenode.id = item.id
treenode.name = item.name
treenode.code = item.code
treenode.descc = item.descc
treenode.sorder = item.sorder
treenode.type = "3"
treenode.isLeaf = true
treenode.mltype = item.mltype
let node = {}
let root = this.updateNode(this.treeData,treenode.id,treenode)
//排序
this.sortTree(root)
this.$set(this.treeData, root)
this.$refs.asyncTree.$forceUpdate()
}else if(operator == 'delete'){
let root = this.deleteNode(this.treeData,this.currSelected.id)
this.$set(this.treeData, root)
this.$refs.asyncTree.$forceUpdate()
}
},
}
}
</script>

1万+





