Skip to content

E
ETL-admin
Commit 9d5ac4aa by 莫晓莉
Options

123

parent 5a14ffb7
Showing with 697 additions and 8 deletions
src/assets/styles/index.scss
...@@ -582,7 +582,8 @@ aside { ...@@ -582,7 +582,8 @@ aside {
// //
// $svgUrl:'http://192.168.0.2:9888/ETLWEB-SERVER/etlweb'; // $svgUrl:'http://192.168.0.2:9888/ETLWEB-SERVER/etlweb';
$svgUrl:'http://192.168.0.44:9888/ETLWEB-SERVER/etlweb'; // $svgUrl:'http://192.168.0.44:9888/ETLWEB-SERVER/etlweb';
$svgUrl:'http://192.168.0.44:9882/ETLWEB-SERVER/etlweb';
// .schema { background-image: url($svgUrl/ui/images/schema.svg?scale=16) !important;} // .schema { background-image: url($svgUrl/ui/images/schema.svg?scale=16) !important;}
.preview { background-image: url($svgUrl+'/ui/images/preview.svg?scale=16') !important;} .preview { background-image: url($svgUrl+'/ui/images/preview.svg?scale=16') !important;}
......
src/utils/dialog-yyy.js 0 → 100644
import Vue from 'vue';
// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog');
dialogHeaderEl.style.cursor = 'move';
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
// 获取到的值带px 正则匹配替换
let styL, styT;
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if(sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
}else {
styL = +sty.left.replace(/\px/g, '');
styT = +sty.top.replace(/\px/g, '');
};
document.onmousemove = function (e) {
// 通过事件委托，计算移动的距离
const l = e.clientX - disX;
const t = e.clientY - disY;
// 移动当前元素
dragDom.style.left = `${l + styL}px`;
dragDom.style.top = `${t + styT}px`;
//将此时的位置传出去
//binding.value({x:e.pageX,y:e.pageY})
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
})
// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
bind(el, binding, vnode, oldVnode) {
const dragDom = binding.value.$el.querySelector('.el-dialog');
el.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft;
document.onmousemove = function (e) {
e.preventDefault(); // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX;
dragDom.style.width = `${l}px`;
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
})
\ No newline at end of file
src/utils/dialog.js 0 → 100644
import Vue from 'vue';
// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header');
const dragDom = el.querySelector('.el-dialog');
dialogHeaderEl.style.cursor = 'move';
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft;
const disY = e.clientY - dialogHeaderEl.offsetTop;
// 获取到的值带px 正则匹配替换
let styL, styT;
// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if(sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100);
}else {
styL = +sty.left.replace(/\px/g, '');
styT = +sty.top.replace(/\px/g, '');
};
document.onmousemove = function (e) {
// 通过事件委托，计算移动的距离
const l = e.clientX - disX;
const t = e.clientY - disY;
// 移动当前元素
dragDom.style.left = `${l + styL}px`;
dragDom.style.top = `${t + styT}px`;
//将此时的位置传出去
//binding.value({x:e.pageX,y:e.pageY})
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
})
// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
bind(el, binding, vnode, oldVnode) {
const dragDom = binding.value.$el.querySelector('.el-dialog');
el.onmousedown = (e) => {
// 鼠标按下，计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft;
document.onmousemove = function (e) {
e.preventDefault(); // 移动时禁用默认事件
// 通过事件委托，计算移动的距离
const l = e.clientX - disX;
dragDom.style.width = `${l}px`;
};
document.onmouseup = function (e) {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
})
\ No newline at end of file
src/views/dashboard-kettle/components/designer/FlowDesigner.vue
...@@ -683,6 +683,25 @@ ...@@ -683,6 +683,25 @@
</span> </span>
</el-dialog> </el-dialog>
<!-- 输出弹窗start=============== -->
<outDialog ref="tableOutPut" :tableOutPutVisible.sync="tableOutPutVisible"></outDialog>
<insertOrUpdate ref="insertOrdate" :InsertOrUpdateVisible.sync="InsertOrUpdateVisible"></insertOrUpdate>
<excelOutPutDialog ref="excelOut" :excelOutPutVisible.sync="excelOutPutVisible"></excelOutPutDialog>
<updateDialog ref="update" :updateVisible.sync="updateVisible"></updateDialog>
<synDialog ref="syn" :synVisible.sync="synVisible"></synDialog>
<delDialog ref="del" :deleteVisible.sync="deleteVisible"></delDialog>
<sqlDialog ref="sql" :sqlVisible.sync="sqlVisible"></sqlDialog>
<textFileDialog ref="textFile" :fileVisible.sync="fileVisible"></textFileDialog>
<microDialog ref="mic" :microVisible.sync="microVisible"></microDialog>
<!-- 输出弹窗end================== -->
</div> </div>
</template> </template>
...@@ -711,12 +730,45 @@ import customConstant from "../appBulletFrame/customConstant"; ...@@ -711,12 +730,45 @@ import customConstant from "../appBulletFrame/customConstant";
import randomNumber from "../appBulletFrame/randomNumber"; import randomNumber from "../appBulletFrame/randomNumber";
// 输出弹窗start******************************************
import outDialog from '../../../output-dialog/table-out'
import insertOrUpdate from '../../../output-dialog/insertOrUpdate'
import excelOutPutDialog from '../../../output-dialog/Excel-output'
import updateDialog from '../../../output-dialog/update'
import synDialog from '../../../output-dialog/synchronize'
import delDialog from '../../../output-dialog/delete'
import sqlDialog from '../../../output-dialog/sqlFileOutput'
import textFileDialog from '../../../output-dialog/text-file-output'
import microDialog from '../../../output-dialog/micro-excel'
// 输出弹窗end********************************************
export default { export default {
// props: {
// dialogVisibleFourth: {
// type: Boolean,
// default: false
// }
// },
data() { data() {
return { return {
// mxl=================================
InsertOrUpdateVisible:true,
tableOutPutVisible:false,
excelOutPutVisible:false,
updateVisible:false,
synVisible:false,
deleteVisible:false,
sqlVisible:false,
fileVisible:false,
microVisible:true,
// mxl=================================
TableInputDialog:false, TableInputDialog:false,
SystemInfoDialog:false, SystemInfoDialog:false,
ConstantDialog:false, ConstantDialog:false,
...@@ -760,7 +812,7 @@ export default { ...@@ -760,7 +812,7 @@ export default {
workForm:{}, workForm:{},
fieldForm:{}, fieldForm:{},
excelLnput: false, excelLnput:false,
edit: false, edit: false,
work:false, work:false,
field:false, field:false,
...@@ -779,8 +831,20 @@ export default { ...@@ -779,8 +831,20 @@ export default {
nodeMenu, nodeMenu,
getSystemInformation, getSystemInformation,
customConstant, customConstant,
randomNumber randomNumber,
// FlowNodeForm // FlowNodeForm
// 弹窗组件start***********************
outDialog,//表输出
insertOrUpdate,//插入或更新
excelOutPutDialog,
updateDialog,
synDialog,
delDialog,
sqlDialog,
textFileDialog,
microDialog
// 弹窗组件end***********************
}, },
//自定义指令 https://www.jb51.net/article/108047.htm //自定义指令 https://www.jb51.net/article/108047.htm
directives: { directives: {
...@@ -1310,6 +1374,8 @@ export default { ...@@ -1310,6 +1374,8 @@ export default {
}, },
clickNode(node) { clickNode(node) {
console.log("点击节点操作", node); console.log("点击节点操作", node);
// this.$emit("dialogVisibleFourth",true);
// this.$emit('updata:dialogVisibleFourth',true); //触发showbox方法，true为向父组件传递的数据
this.stepName.name = node.name this.stepName.name = node.name
......
src/views/dashboard-kettle/components/designer/modules/node.vue
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<!-- <div class="ef-node-left"></div> --> <!-- <div class="ef-node-left"></div> -->
<!-- 节点类型的图标 --> <!-- 节点类型的图标 -->
<div class="el-node-icon ef-node-left-ico flow-node-drag"> <div class="el-node-icon ef-node-left-ico flow-node-drag">
<img :src="node.ico" alt="" class=" flow-node-drag"> <img :src="prefix+node.ico" alt="" class=" flow-node-drag">
<!-- <i :class="nodeIcoClass"></i> --> <!-- <i :class="nodeIcoClass"></i> -->
</div> </div>
<!-- 节点名称 --> <!-- 节点名称 -->
...@@ -34,7 +34,9 @@ ...@@ -34,7 +34,9 @@
activeElement: Object activeElement: Object
}, },
data() { data() {
return {} return {
prefix:'http://192.168.0.44:9882/etlweb/',
}
}, },
computed: { computed: {
nodeContainerClass() { nodeContainerClass() {
......
src/views/dashboard-kettle/components/designer/modules/node_menu.vue
...@@ -87,7 +87,8 @@ var mousePosition = { ...@@ -87,7 +87,8 @@ var mousePosition = {
export default { export default {
data() { data() {
return { return {
prefix:'http://192.168.0.2:9700/etlweb/', // prefix:'http://192.168.0.2:9700/etlweb/',
prefix:'http://192.168.0.44:9882/etlweb/',
// 测试数据开始===== // 测试数据开始=====
jobTreeList: [ jobTreeList: [
{ {
......
src/views/kettle/home.vue
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
<div class="mid"> <div class="mid">
<el-tabs v-if="tabShowFlag" style="margin-top:-5vh;margin-bottom:0;" v-model="picName" type="card" closable @tab-remove="removeTab"> <el-tabs v-if="tabShowFlag" style="margin-top:-5vh;margin-bottom:0;" v-model="picName" type="card" closable @tab-remove="removeTab">
<el-tab-pane label="数据库名称" > <el-tab-pane label="数据库名称" >
<flow-designer ref="pic"></flow-designer> <flow-designer ref="pic" ></flow-designer>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
......
src/views/kettle/kettle.css 0 → 100644
/* .trans { background-image: url(/web/ui/images/spoongraph.svg?scale=16) !important;} */
\ No newline at end of file
src/views/output-dialog/delete.vue 0 → 100644
<template>
<div>
<el-dialog
title="删除"
:visible.sync="deleteVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<!-- <div id="ExcelInputDialog"></div> -->
<el-form ref="stepName" :model="stepName" label-width="120px">
<el-form-item label="步骤名称:">
<el-input v-model="stepName.name"></el-input>
</el-form-item>
</el-form>
<div style="border:1px solid #99BBE8;padding:15px 15px;margin-bottom:15px;">
<el-form ref="form" :model="form" label-width="200px">
<el-form-item label="数据库连接:">
<el-row :gutter="10">
<el-col :span="14">
<el-select v-model="form.region" style="width: 100%">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini">编辑</el-button></el-col>
<el-col class="line" :span="3">
<el-button size="mini">新建</el-button></el-col>
<el-col class="line" :span="3">
<el-button size="mini">向导</el-button></el-col>
</el-row>
</el-form-item>
<el-form-item label="目的模式:">
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini">浏览</el-button></el-col>
</el-row>
</el-form-item>
<el-form-item label="目标表:">
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini">浏览</el-button></el-col
>
</el-row>
</el-form-item>
<el-form-item label="提交记录数量:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="form.name"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>查询值所需的关键字</span>
</div>
<el-table style="width: 100%" border :data="tableData">
<template v-for="(item,index) in tableHead">
<el-table-column :prop="item.column_name" :label="item.column_comment" :key="index" v-if="item.column_name != 'id'"></el-table-column>
</template>
</el-table>
</el-card>
<span slot="footer" class="dialog-footer">
<el-button @click="deleteVisible = false">取 消</el-button>
<el-button type="primary" @click="deleteVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default ({
data(){
return{
form:{},
stepName:{},
activeName:'content',
engine:[],
// 表头数据
tableHead:[
{
column_name: "column_name",column_comment:"表字段"
},
{
column_name: "column_age",column_comment:"比较符"
},
{
column_name: "column_sex",column_comment:"流里的字段1"
},
{
column_name: "column_col",column_comment:"流里的字段2"
},
],
// 表格数据
tableData: [{
column_age: '3',
column_name: '鞠婧祎',
column_sex: '女',
column_col:'0'
},
{
column_age: '25',
column_name: '魏大勋',
column_sex: '男',
column_col:'1'
},
{
column_age: '18',
column_name: '关晓彤',
column_sex: '女',
column_col:'2'
}],
}
},
props:{
title:{
type:String,
default:''
},
nodePath:{
type:String,
default:''
},
deleteVisible:{
type: Boolean,
default:false
},
explorer:Function
},
mounted(){
},
methods:{
handleClose(){
this.$emit("update:updateVisible", false);
},
confirm(){
},
//新建转换
createTrans(){
var formData = new FormData();
var formData = new FormData();
formData.append('dir', this.nodePath);
formData.append('transName', this.inputValue);
// console.log('新建提交参数==',params);
createTrans(formData).then(res=>{
if (res) {
this.$message.success('创建成功!');
this.explorer('');
this.$emit("update:estabDialogVisible", false);
}else {
this.$message.error(res.errMsg)
}
})
},
// 上传
handleChange(file, fileList) {
// console.log(file);
this.fileList = fileList.slice(-3);
this.tableData.push({ name: file.name });
// console.log(this.tableData);
// this.getObjectURL(file.raw)
// console.log(this.getObjectURL(file.raw));
},
addSheet(){},
fileChnageInput(e) {
console.log(e);
},
}
})
</script>
\ No newline at end of file
src/views/output-dialog/update.vue 0 → 100644
<template>
<div>
<el-dialog
title="更新"
:visible.sync="updateVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<div id="ExcelInputDialog"></div>
<el-form ref="stepName" :model="stepName" label-width="120px">
<el-form-item label="步骤名称:">
<el-input v-model="stepName.name"></el-input>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="基本配置" name="content">
<el-form ref="form" :model="form" label-width="200px">
<el-form-item label="数据库连接:">
<el-row :gutter="10">
<el-col :span="14">
<el-select v-model="form.region" style="width: 100%">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini">编辑</el-button></el-col>
<el-col class="line" :span="3">
<el-button size="mini">新建</el-button></el-col>
<el-col class="line" :span="3">
<el-button size="mini">向导</el-button></el-col>
</el-row>
</el-form-item>
<el-form-item label="目的模式:">
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini">浏览</el-button></el-col>
</el-row>
</el-form-item>
<el-form-item label="目标表:">
<el-row :gutter="10">
<el-col :span="20">
<el-input v-model="form.name"></el-input>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini">浏览</el-button></el-col
>
</el-row>
</el-form-item>
<el-form-item label="提交记录数量:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="form.name"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="批量更新：">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="form.checked"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="跳过查询：">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="form.checked"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="忽略查询失败：">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="form.checked"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="标志字段(key found):">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="form.checked"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="查询字段" name="handling">
<el-table style="width: 100%" border :data="tableData">
<template v-for="(item,index) in tableHead">
<el-table-column :prop="item.column_name" :label="item.column_comment" :key="index" v-if="item.column_name != 'id'"></el-table-column>
</template>
</el-table>
</el-tab-pane>
<el-tab-pane label="更新字段" name="oher ">
<el-table style="width: 100%" border :data="tableData2">
<template v-for="(item,index) in tableHead2">
<el-table-column :prop="item.column_name" :label="item.column_comment" :key="index" v-if="item.column_name != 'id'"></el-table-column>
</template>
</el-table>
</el-tab-pane>
</el-tabs>
<span slot="footer" class="dialog-footer">
<el-button @click="tableOutPutVisible = false">取 消</el-button>
<el-button type="primary" @click="tableOutPutVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default ({
data(){
return{
form:{},
stepName:{},
activeName:'content',
engine:[],
// 表头数据
tableHead:[
{
column_name: "column_name",column_comment:"表字段"
},
{
column_name: "column_age",column_comment:"比较符"
},
{
column_name: "column_sex",column_comment:"流里的字段1"
},
{
column_name: "column_col",column_comment:"流里的字段2"
},
],
// 表格数据
tableData: [{
column_age: '3',
column_name: '鞠婧祎',
column_sex: '女',
column_col:'0'
},
{
column_age: '25',
column_name: '魏大勋',
column_sex: '男',
column_col:'1'
},
{
column_age: '18',
column_name: '关晓彤',
column_sex: '女',
column_col:'2'
}],
// 表头数据
tableHead2:[
{
column_name: "column_name",column_comment:"表字段"
},
{
column_name: "column_age",column_comment:"流字段"
},
],
// 表格数据
tableData2: [{
column_age: '3',
column_name: '鞠婧祎',
},
{
column_age: '25',
column_name: '魏大勋',
},
{
column_age: '18',
column_name: '关晓彤',
}],
}
},
props:{
title:{
type:String,
default:''
},
nodePath:{
type:String,
default:''
},
updateVisible:{
type: Boolean,
default:false
},
explorer:Function
},
mounted(){
},
methods:{
handleClose(){
this.$emit("update:updateVisible", false);
},
confirm(){
},
//新建转换
createTrans(){
var formData = new FormData();
var formData = new FormData();
formData.append('dir', this.nodePath);
formData.append('transName', this.inputValue);
// console.log('新建提交参数==',params);
createTrans(formData).then(res=>{
if (res) {
this.$message.success('创建成功!');
this.explorer('');
this.$emit("update:estabDialogVisible", false);
}else {
this.$message.error(res.errMsg)
}
})
},
// 上传
handleChange(file, fileList) {
// console.log(file);
this.fileList = fileList.slice(-3);
this.tableData.push({ name: file.name });
// console.log(this.tableData);
// this.getObjectURL(file.raw)
// console.log(this.getObjectURL(file.raw));
},
addSheet(){},
fileChnageInput(e) {
console.log(e);
},
}
})
</script>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment