ant tree 排序功能

最新推荐文章于 2024-03-11 11:20:07 发布

原创最新推荐文章于 2024-03-11 11:20:07 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

ant 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何使用Vue.js和Ant Design Vue库创建一个可拖拽排序的组织树形结构。通过监听拖拽事件，动态调整树节点顺序，并在拖放操作完成后，调用后端接口更新排序。文章详细展示了组件代码和后台处理排序的Java方法。

<template>
  <a-modal
    :title="title"
    :mask-closable="true"
    :confirm-loading="confirmLoading"
    :width="drawerWidth"
    :zIndex="1001"
    :visible="visible"
    @close="close"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
<!--    <a-form>-->
      <a-form-item>
        <a-tree
          class="draggable-tree"
          :default-expanded-keys="expandedKeys"
          draggable
          :tree-data="gData"
          :replace-fields="{
            key:'orderNo',
            title:'fullName',
            id:'id',
            pid:'pid',
          }"
          @dragenter="onDragEnter"
          @drop="onDrop"
        />
      </a-form-item>
  </a-modal>
</template>

<script>
import { findOrgTree } from '@/filters'

export default {
  data() {
    return {
      gData:[],
      title:'机构排序',
      visible:false,
      drawerWidth:'900px',
      expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
      loading: false,
      confirmLoading: false,
    };
  },
  methods: {
    show(dataSourceInfo) {
      let data = dataSourceInfo
      findOrgTree(data)
      this.gData = data
      this.visible = true
    },
    onDragEnter(info) {
      console.log(info);
      // expandedKeys 需要受控时设置
      // this.expandedKeys = info.expandedKeys
    },
     //拖拽后，自动形成新的树格式的数据 ，然后去后台sortNo设置
    onDrop(info) {
      console.log(info);
      const dropKey = info.node.eventKey;
      const dragKey = info.dragNode.eventKey;
      const dropPos = info.node.pos.split('-');
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr);
          }
          if (item.children) {
            return loop(item.children, key, callback);
          }
        });
      };
      const data = [...this.gData];

      // Find dragObject
      let dragObj;
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1);
        dragObj = item;
      });
      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, item => {
          item.children = item.children || [];
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.push(dragObj);
        });
      } else if (
        (info.node.children || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, item => {
          item.children = item.children || [];
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.unshift(dragObj);
        });
      } else {
        let ar;
        let i;
        loop(data, dropKey, (item, index, arr) => {
          ar = arr;
          i = index;
        });
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj);
        } else {
          ar.splice(i + 1, 0, dragObj);
        }
      }
      this.gData = data;
      console.log("this.gData=================",this.gData);
    },
    //提交
    handleSubmit(){
      this.confirmLoading = true
      console.log("this.gData",this.gData)
      this.$fetch.postAction('/gbOrg/saveOrgOrder', this.gData,
        { headers: { 'Content-Type': 'application/json;charset=UTF-8' } }).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.confirmLoading = false
          this.visible = false
          this.$emit('ok')
        }else{
          this.$message.success('操作失败')
        }
      })

    },
    handleCancel(){
      this.visible = false
    },
    handleOk () {
      this.visible = false
      this.confirmLoading = false
    },
    close() {
      this.visible = false
    },
  },
};
</script>

//后台设置，递归设置排序字段

public List<GbOrgTreeVo> saveOrgOrderPidList(List<GbOrgTreeVo> gbOrgTreeVos,String level,String pid,String topId) {
    if(gbOrgTreeVos != null && gbOrgTreeVos.size()>0){
        for (int i = 0; i < gbOrgTreeVos.size(); i++) {
            if(gbOrgTreeVos.get(i) != null){
                if("1".equals(level)){
                    topId = gbOrgTreeVos.get(i).getId();
                }
                gbOrgTreeVos.get(i).setTopPid(topId);
                gbOrgTreeVos.get(i).setPid(pid);
                String level1 = level+"-"+i;
                gbOrgTreeVos.get(i).setOrderNo(level1);// 0-0
                gbOrgTreeVos.get(i).setSortNo(i);// 0-0
                if(gbOrgTreeVos.get(i).getChildren() != null && gbOrgTreeVos.get(i).getChildren().size()>0){
                    saveOrgOrderPidList(gbOrgTreeVos.get(i).getChildren(),level1,gbOrgTreeVos.get(i).getId(),topId);
                }
            }
        }
    }
    return gbOrgTreeVos;
}