<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; }