a-tree 控制

<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
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值