左侧双击选中到中间(显示层级结构) 中间可拖拽到右侧(且不可重复拖拽) 右侧上下可互相拖拽
<template>
<div>
<el-form ref="form" :model="form" label-width="200px">
<p class="title">标题</p>
<div class="bottomsql">
<div>
<span>表 树结构</span>
<el-tree
ref="tree"
node-key="id"
:data="datas"
:props="defaultProps"
:expand-on-click-node="false"
@node-click="handleNodeClick"
></el-tree>
</div>
<div>
<span>对应表字段</span>
<div class="el-tree field">
<!-- <p v-for="(item,index) in fieldarr2" :key="index">{{item.name}}</p> -->
<draggable
v-model="fieldarr2"
draggable=".c-item"
v-bind="dragOptions"
:options="{sort: false, group: {name: 'field', pull:'clone',put: false}}"
:move="onMove"
>
<div v-for="d in fieldarr2" :key="d.id" class="c-item">{{d.name}}</div>
</draggable>
</div>
</div>
<div>
<div>
<span>可以拖到这里</span>
<div class="rightsol">
<draggable group="field" :list="formulaarr" v-bind="dragOptions" @change="toChange" :move="onMove">
<div v-for="(d,index) in formulaarr" :key="index" class="item">{{d.name}}</div>
</draggable>
</div>
</div>
<div>
<span>还可以拖到这里</span>
<div class="rightsol">
<draggable group="field" :list="dimensionarr" v-bind="dragOptions" @change="toChange" :move="onMove">
<div v-for="(d,index) in dimensionarr" :key="index" class="item">{{d.name}}</div>
</draggable>
</div>
</div>
</div>
</div>
<div style="text-align: center;height: 100px;line-height: 100px;">
<el-button type="primary" @click="onSubmit" class="submit">确 定</el-button>
<el-button type="success" class="submit">取 消</el-button>
</div>
</el-form>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable
},
data() {
return {
dragOptions: { animation: 500 },
formulaarr: [],
dimensionarr: [],
rowList: [],
fieldarr: [],
fieldarr2: [],
//定义点击次数,默认0次
treeClickCount: 0,
form: {},
datas: [{
id: 1,
label: "数据源1",
children: [{
id: 4,
label: "表",
children: [{
id: 9,
label: "table1",
children: [{
id: 11,
label: "rq"
},{
id: 12,
label: "wlbm"
},{
id: 13,
label: "count"}]},
{
id: 10,
label: "table2",
children: [{
id: 14,
label: "rq2"},{
id: 15,
label: "wlbm2"
},{
id: 16,
label: "armt"}]}]},
{
id: 20,
label: "视图",
children: [{
id: 17,
label: "view1"},{
id: 18,
label: "view2"}]}]},
{
id: 2,
label: "数据源2",
children: [{
id: 5,
label: "二级 2-1"},
{
id: 6,
label: "二级 2-2"}]
},{
id: 3,
label: "数据源3",
children: [{
id: 7,
label: "二级 3-1"
},{
id: 8,
label: "二级 3-2"}]}],
defaultProps: {
children: "children",
label: "label"
}};},
methods: {
onMove(e) { //拖拽事件 https://blog.csdn.net/Kiruthika/article/details/123903706 可查看相关配置
if (
JSON.stringify(e.relatedContext.list).includes(
JSON.stringify(e.draggedContext.element)
) === true
) {
return false;
} else {
return true;
}
},
toChange(e) {//拖拽事件
console.log(e);
},
onSubmit() {
console.log("submit!");
console.log(this.form);
},
//节点点击事件
handleNodeClick(data, node) {
//记录点击次数
this.treeClickCount++;
//单次点击次数超过2次不作处理,直接返回,也可以拓展成多击事件
if (this.treeClickCount >= 2) {
return;
}
//计时器,计算300毫秒为单位,可自行修改
this.timer = window.setTimeout(() => {
if (this.treeClickCount == 1) {
//把次数归零
this.treeClickCount = 0;
//单击事件处理
// console.log(data);
// console.log(node);
} else if (this.treeClickCount > 1) {
//把次数归零
this.treeClickCount = 0;
//双击事件
this.rowList = [];
this.getParent(node);
// this.fieldarr.push(this.rowList.join('.'))
// console.log(data.children, "--->rowList");
if (data.children === undefined || data.children.length === 0) {
if (this.fieldarr.indexOf(...[this.rowList.join(".")]) == -1) {
this.fieldarr.push(this.rowList.join("."));
this.fieldarr2.push({
name: this.rowList.join("."),
id: data.id
});
// console.log(this.fieldarr2, "--->rowList");
} else {
this.$message.error("选择字段重复");
}
} else {
this.$message.error("不能选表名,请选择字段");
}
}
}, 300);
},
getParent(node) {
var that = this;
if (node.parent.data && !Array.isArray(node.parent.data)) {
node.parent.data instanceof Object &&
that.rowList.unshift(node.data.label);
that.getParent(node.parent);
} else if (that.rowList.length === 0) {
if (that.parentList.length === 0) {
that.rowList.unshift(node.data.label);
}
} else {
that.rowList.unshift(node.data.label);}}}};
</script>
<style lang="less" scoped>
.title {
border: 1px solid #000;
background: rgb(52, 101, 187);
color: #fff;
padding-left: 24px;
border-radius: 5px;
height: 30px;
line-height: 30px;
margin-bottom: 20px;
}
/deep/.el-input__inner {
width: 400px;
}
/deep/.el-textarea__inner {
width: 400px;
height: 76px;
}
.onedivstyle {
// border: 2px solid #000;
display: flex;
flex-wrap: wrap;
}
.el-form-item--mini.el-form-item {
margin-right: 135px;
margin-left: 9px;
}
.el-tree {
border: 1px solid #000;
width: 350px;
height: 392px;
overflow-y: auto;
padding: 20px;
}
.field {
.c-item {
margin-bottom: 10px;
}
}
.rightsol {
border: 1px solid #000;
height: 120px;
margin-bottom: 20px;
width: 300px;
padding: 12px;
box-sizing: border-box;
overflow-y: auto;
// .item{
// height: 120px;
// }
}
.bottomsql {
display: flex;
justify-content: space-around;
padding: 0 130px;
}
.submit {
margin-right: 100px;
width: 100px;
height: 48px;
font-size: 20px;
}
</style>
