<el-card class="data-card">
{{ data.name }}-数据接入
<el-row class="data-selection" :gutter="10">
<el-col :span="8">
数据源库
<draggable
:list="databases"
ghost-class="ghost"
handle=".move"
filter=".forbid"
:force-fallback="true"
chosen-class="chosenClass"
animation="300"
@start="onStart"
@end="onEnd"
:group="state.groupC"
:fallback-class="true"
:fallback-on-body="true"
:touch-start-threshold="50"
:fallback-tolerance="50"
:move="onMove"
:sort="false">
<template #item="{ element }">
<label class="move">{{ element.name }}</label>
</template>
</draggable>
</el-col>
<el-col :span="8">
数据库
<draggable
:list="databases2"
ghost-class="ghost"
handle=".move"
filter=".forbid"
:force-fallback="true"
chosen-class="chosenClass"
animation="300"
@start="onStart"
@end="onEnd"
:group="state.groupC"
:fallback-class="true"
:fallback-on-body="true"
:touch-start-threshold="50"
:fallback-tolerance="50"
:move="onMove"
:sort="false">
<template #item="{ element }">
<label class="move">{{ element.name }}</label>
</template>
</draggable>
</el-col>
<el-col :span="8">
目标库
<draggable
:list="databases1"
ghost-class="ghost"
handle=".move"
filter=".forbid"
:force-fallback="true"
chosen-class="chosenClass"
animation="300"
@start="onStart"
@end="onEnd"
:group="state.groupC"
:fallback-class="true"
:fallback-on-body="true"
:touch-start-threshold="50"
:fallback-tolerance="50"
:move="onMove"
:sort="false">
<template #item="{ element }">
<label class="move">{{ element.name }}</label>
</template>
</draggable>
</el-col>
</el-row>
<el-row class="table-selection">
<el-col :span="24">
<el-table :data="tables" style="width: 100%" :row-key="(row) => row.name">
<el-table-column label="表名" prop="name"></el-table-column>
<el-table-column label="表结构" prop="structure"></el-table-column>
<el-table-column label="选择" type="selection" width="55"></el-table-column>
</el-table>
</el-col>
</el-row>
<el-form-item label="定期调度">
<el-checkbox v-model="isScheduled">启用定期调度</el-checkbox>
<el-date-picker
v-model="scheduleTime"
v-if="isScheduled"
type="datetime"
placeholder="选择调度时间"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="validateData">校验数据</el-button>
<el-button type="success" @click="startTask">开始接入任务</el-button>
</el-form-item>
</el-card>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue';
import {
ElCard,
ElRow,
ElCol,
ElFormItem,
ElTable,
ElTableColumn,
ElCheckbox,
ElDatePicker,
ElButton
} from 'element-plus';
import draggable from 'vuedraggable';
const props = defineProps(['data']);
// 模拟数据库数据
const databases = ref([
{ id: 1, name: '数据源库1' },
{ id: 2, name: '数据源库2' },
{ id: 3, name: '数据源库3' }
]);
// 模拟数据库数据
const databases1 = ref([
{ id: 1, name: '目标库1' },
{ id: 2, name: '目标库2' },
{ id: 3, name: '目标库3' }
]);
const databases2 = ref([]);
// 模拟表结构数据
const tables = ref([
{ name: '表1', structure: 'id, name, age' },
{ name: '表2', structure: 'id, description, date' },
{ name: '表3', structure: 'id, title, content' }
]);
// 绑定的表单字段
const sourceDatabase = ref('');
const targetDatabase = ref('');
const isScheduled = ref(false);
const scheduleTime = ref('');
const selectedTables = ref([]);
// 校验数据
const validateData = () => {
// 校验逻辑
console.log('校验数据...');
alert('数据校验完成');
};
// 启动任务
const startTask = () => {
// 启动数据接入任务
const taskData = {
sourceDatabase: sourceDatabase.value,
targetDatabase: targetDatabase.value,
tables: selectedTables.value,
scheduleTime: scheduleTime.value,
isScheduled: isScheduled.value
};
console.log('开始数据接入任务', taskData);
alert('数据接入任务已启动');
};
// 获取选中的表
onMounted(() => {
tables.value.forEach((table) => {
table.selected = false;
});
console.log(props.data, '111');
});
const state = reactive({
groupC: {
name: 'itxst',
put: true, //允许拖入
pull: true //允许拖出,如果设置 字符串'clone' 表示该组拖出的元素会被克隆
}
});
//拖拽开始的事件
const onStart = () => {
console.log('开始拖拽');
};
//拖拽结束的事件
const onEnd = () => {
console.log('结束拖拽');
};
const onMove = (e, originalEvent) => {
//不允许停靠
if (e.relatedContext.element.disabledPark == true) return false;
return true;
};
</script>
<style scoped>
.data-integration {
padding: 20px;
}
.data-card {
margin-top: 20px;
}
.data-selection {
margin-bottom: 10px;
.el-col {
border: solid 1px rgb(255, 252, 252);
align-items: center;
}
}
.table-selection {
margin-bottom: 20px;
}
.itxst {
background-color: #fff9f9;
display: flex;
padding: 20px;
}
.group {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: center;
/* width: 32%; */
/* margin-right: 20px; */
}
.item {
/* border: solid 1px #ddd; */
padding: 0px;
text-align: center;
background-color: #e7e1e1;
margin-bottom: 10px;
display: flex;
height: 36px;
user-select: none;
}
.item > label {
padding: 6px 10px;
color: #333;
}
.item > label:hover {
cursor: move;
}
.item > span {
padding: 6px 10px;
color: #666;
}
.ghost {
border: solid 1px rgb(19, 41, 239) !important;
}
.chosenClass {
opacity: 1;
border: solid 1px red;
}
.fallbackClass {
background-color: aquamarine;
}
</style>
为什么数据源库和目标库中的内容无法拖拽至数据库