Skip to content

E
ETL-admin
Commit 74cbec0a by 李耀琨
Options

解决冲突

parents f75d681c 4e9ff468
Showing with 3883 additions and 64 deletions
.env.development
ENV = 'development'
#VUE_APP_BASE_API = 'http://147.1.3.180:9888/'
#VUE_APP_WS_API = 'ws://147.1.3.180:9888/'
VUE_APP_BASE_API = 'http://192.168.0.44:9888/'
VUE_APP_WS_API = 'ws://192.168.0.44:9888/'
......
src/views/dashboard-kettle/components/appBulletFrame/customConstant.vue
......@@ -18,7 +18,7 @@
<el-tab-pane label="元数据">
<el-button
size="small"
type="primary"
type="text"
style="margin: 10px"
@click="customClick(true)"
>添加元数据</el-button
......@@ -57,7 +57,7 @@
<el-tab-pane label="数据">
<el-button
size="small"
type="primary"
type="text"
style="margin: 10px"
@click="valueClick(true)"
>添加数据</el-button
......
src/views/dashboard-kettle/components/appBulletFrame/generatingRecords.vue
......@@ -43,7 +43,7 @@
<el-card class="box-card">
<el-button
size="small"
type="primary"
type="text"
style="margin: 10px"
@click="addField(true)"
>添加字段</el-button
......
src/views/dashboard-kettle/components/appBulletFrame/getSystemInformation.vue
......@@ -9,7 +9,7 @@
</el-form>
<el-form ref="form" :model="form" label-width="0px">
<el-button type="primary" @click="addSheet(true)" style="margin: 10px"
<el-button type="text" @click="addSheet(true)" style="margin: 10px"
>添加字段</el-button
>
<el-form-item>
......
src/views/dashboard-kettle/components/appBulletFrame/getVariable.vue
......@@ -6,8 +6,8 @@
</el-form-item>
</el-form>
<el-button type="primary" @click="fieldClick(true)">添加字段</el-button>
<el-button type="primary" @click="getTheField">获取字段</el-button>
<el-button type="text" @click="fieldClick(true)">添加字段</el-button>
<el-button type="text" @click="getTheField">获取字段</el-button>
<el-table :data="fields" style="width: 100%">
<el-table-column prop="field_name" label="字段名称"> </el-table-column>g
......
src/views/dashboard-kettle/components/appBulletFrame/mergeRecords.vue
......@@ -37,7 +37,7 @@
{{"匹配的关键字："}}
<br>
<br>
<el-button type="primary" @click="matchingFieldClick(true)"
<el-button type="text" @click="matchingFieldClick(true)"
>添加字段</el-button
>
......@@ -70,7 +70,7 @@
{{"数据字段:"}}
<br>
<br>
<el-button type="primary" @click="fieldClick(true)"
<el-button type="text" @click="fieldClick(true)"
>添加字段</el-button
>
......
src/views/dashboard-kettle/components/appBulletFrame/randomNumber.vue
......@@ -8,7 +8,7 @@
</el-form>
<el-form ref="form" :model="form" label-width="0px">
<el-button type="primary" @click="addSheet(true)" style="margin: 10px"
<el-button type="text" @click="addSheet(true)" style="margin: 10px"
>添加字段</el-button
>
<el-form-item>
......
src/views/dashboard-kettle/components/appBulletFrame/selectField.vue
......@@ -8,8 +8,8 @@
<el-tabs type="border-card">
<el-tab-pane label="选择和修改">
<el-button type="primary" @click="selectModify(true)">添加字段</el-button>
<el-button type="primary" @click="selectModifyGetTheField">获取字段</el-button>
<el-button type="text" @click="selectModify(true)">添加字段</el-button>
<el-button type="text" @click="selectModifyGetTheField">获取字段</el-button>
<el-table :data="fields" style="width: 100%">
<el-table-column prop="name" label="字段名称"> </el-table-column>
......@@ -36,8 +36,8 @@
</el-tab-pane>
<el-tab-pane label="移除">
<el-button type="primary" @click="fieldClick(true)">添加字段</el-button>
<el-button type="primary" @click="getTheField">获取字段</el-button>
<el-button type="text" @click="fieldClick(true)">添加字段</el-button>
<el-button type="text" @click="getTheField">获取字段</el-button>
<el-table :data="remove" style="width: 100%">
<el-table-column prop="name" label="字段名称"> </el-table-column>
......@@ -62,8 +62,8 @@
</el-tab-pane>
<el-tab-pane label="元数据">
<el-button type="primary" @click="metadata(true)">添加字段</el-button>
<el-button type="primary" @click="metadataGetTheField">获取字段</el-button>
<el-button type="text" @click="metadata(true)">添加字段</el-button>
<el-button type="text" @click="metadataGetTheField">获取字段</el-button>
<el-table :data="meta" style="width: 100%">
<el-table-column prop="name" label="字段名称"> </el-table-column>
......
src/views/dashboard-kettle/components/appBulletFrame/setVariable.vue
......@@ -6,8 +6,8 @@
</el-form-item>
</el-form>
<el-button type="primary" @click="fieldClick(true)">添加字段</el-button>
<el-button type="primary" @click="getTheField">获取字段</el-button>
<el-button type="text" @click="fieldClick(true)">添加字段</el-button>
<el-button type="text" @click="getTheField">获取字段</el-button>
<el-table :data="fields" style="width: 100%">
<el-table-column prop="field_name" label="字段名称"> </el-table-column>g
......
src/views/dashboard-kettle/components/appBulletFrame/sortRecord.vue
......@@ -47,8 +47,8 @@
</el-form-item>
</el-form>
<el-card class="box-card">
<el-button type="primary" @click="fieldClick(true)">添加字段</el-button>
<el-button type="primary" @click="getTheField">获取字段</el-button>
<el-button type="text" @click="fieldClick(true)">添加字段</el-button>
<el-button type="text" @click="getTheField">获取字段</el-button>
<el-table :data="fields" style="width: 100%">
<el-table-column prop="name" label="字段名称"> </el-table-column>g
......
src/views/dashboard-kettle/components/appBulletFrame/tableInput.vue
......@@ -398,7 +398,7 @@ export default {
// this.fieldName = this.fieldName + element + ","
if (!i == 0) {
this.fieldName = this.fieldName + "," + element;
this.fieldName = this.fieldName + "\n," + element;
} else {
this.fieldName = element;
}
......@@ -406,7 +406,7 @@ export default {
console.log(this.fieldName, 464564564);
}
this.form.sql = `select ${this.fieldName} from ${this.tableDetails.nodeId}.${this.tableDetails.text}`;
this.form.sql = `select `+"\n"+`${this.fieldName} `+"\n"+`from `+"\n"+`${this.tableDetails.nodeId}.${this.tableDetails.text}`;
});
},
......
src/views/dashboard-kettle/components/appBulletFrame/textFileInput.vue
......@@ -432,7 +432,7 @@
</el-form>
</el-tab-pane>
<el-tab-pane label="过滤">
<el-button type="primary" @click="filterClick(true)"
<el-button type="text" @click="filterClick(true)"
>添加过滤字段</el-button
>
......@@ -470,8 +470,8 @@
</el-tab-pane>
<el-tab-pane label="字段">
<el-button type="primary" @click="fieldClick(true)">添加字段</el-button>
<el-button type="primary" @click="getTheField">获取字段</el-button>
<el-button type="text" @click="fieldClick(true)">添加字段</el-button>
<el-button type="text" @click="getTheField">获取字段</el-button>
<el-table :data="inputFields" style="width: 100%">
<el-table-column prop="name" label="名称"> </el-table-column>g
......
src/views/dashboard-kettle/components/designer/mxgraphDesigner--change.vue 0 → 100644
<template>
<div class="ef-flow-box" v-if="easyFlowVisible">
<div class="ef-flow-header">
<el-row>
<!--顶部工具菜单-->
<el-col :span="24">
<div class="ef-tooltar">
<el-link type="primary" :underline="false">{{
flowData.name
}}</el-link>
<el-divider direction="vertical"></el-divider>
<el-tooltip
class="item"
effect="dark"
:open-delay="300"
content="保存流程图"
placement="bottom"
>
<el-button
type="text"
icon="el-icon-receiving"
size="large"
@click="saveFlow"
></el-button>
</el-tooltip>
<el-divider direction="vertical"></el-divider>
<el-tooltip
class="item"
effect="dark"
:open-delay="300"
content="生产流程图片"
placement="bottom"
>
<el-button
type="text"
icon="el-icon-picture"
size="large"
></el-button>
</el-tooltip>
<el-divider direction="vertical"></el-divider>
<el-tooltip
class="item"
effect="dark"
content="执行转换"
placement="bottom"
>
<el-button
type="text"
icon="el-icon-refresh"
size="large"
@click="doTrans"
></el-button>
</el-tooltip>
<el-divider direction="vertical"></el-divider>
<el-tooltip
class="item"
effect="dark"
content="点击删除"
placement="bottom"
>
<el-button
type="text"
icon="el-icon-delete"
size="large"
@click="deleteFlow"
></el-button>
</el-tooltip>
<el-divider direction="vertical"></el-divider>
<el-tooltip
class="item"
effect="dark"
content="设置"
placement="bottom"
>
<el-button
type="text"
icon="el-icon-setting"
size="large"
></el-button>
</el-tooltip>
</div>
</el-col>
</el-row>
</div>
<div class="ef-flow-main">
<!-- 画布start -->
<div class="mxgraphClass">
<div id="mxgraph" ref="container"></div>
</div>
</div>
<!-- 输入工具弹框 -->
<el-dialog
title="Excelt输入"
:visible.sync="excelLnput"
width="800px"
:before-close="handleClose"
>
<div id="ExcelInputDialog"></div>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="步骤名称:">
<el-input v-model="form.label"></el-input>
</el-form-item>
</el-form>
<el-tabs v-model="activeName" type="border-card" @tab-click="tapClick">
<el-tab-pane label="文件" name="file">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="表格类(引擎):">
<el-select v-model="form.spreadsheet_type" style="width: 100%" clearable>
<el-option
v-for="item in engine"
:key="item.code"
:label="item.desc"
:value="item.code"
/>
</el-select>
</el-form-item>
<el-form-item label="选中的文件:">
<el-button size="small" type="primary" @click="selectFilePath(1)"
>选择文件</el-button
>
<el-card class="box-card">
<el-table :data="file" style="width: 100%">
<el-table-column prop="name" label="文件/目录" width="120">
</el-table-column>
<el-table-column prop="filemask" label="通配符">
</el-table-column>
<el-table-column
prop="exclude_filemask"
label="通配符号（排除）"
width="120"
>
</el-table-column>
<el-table-column prop="file_required" label="要求">
</el-table-column>
<el-table-column prop="include_subfolders" label="包含子目录">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
type="text"
size="small"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="deleteFile(scope.$index, file)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-card>
</el-form-item>
</el-form>
<el-card class="box-card">
<el-form ref="form" :model="form" label-width="200px">
<el-form-item label="从前面的步骤获取文件名：">
<el-checkbox
v-model="form.accept_filenames"
true-label="Y"
false-label="N"
></el-checkbox>
</el-form-item>
<el-form-item label="从哪个步骤读文件名:">
<el-select
v-model="form.accept_stepname"
style="width: 100%"
:disabled="
!form.accept_filenames || form.accept_filenames == 'N'"
@click.native="lastStep" clearable
>
<el-option
v-for="item in connectionNode"
:key="item.id"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="保存文件的字段:">
<el-select
v-model="form.accept_field"
style="width: 100%"
:disabled="
!form.accept_filenames || form.accept_filenames == 'N'
"
@click.native="previousField" clearable
>
<el-option v-for="item in getField"
:key="item.id"
:label="item.name"
:value="item"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-card>
</el-tab-pane>
<el-tab-pane label="工作表" name="worksheet">
<h3>要读取的工作表列表</h3>
<el-button type="primary" @click="workClick(true)"
>添加工作表</el-button
>
<br />
<el-card class="box-card">
<el-table :data="sheets" style="width: 100%">
<el-table-column prop="name" label="工作表名称" width="120">
</el-table-column>
<el-table-column prop="startcol" label="起始行">
</el-table-column>
<el-table-column prop="startrow" label="起始列">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
@click="workClick(false, scope.row)"
type="text"
size="small"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="deleteRow(scope.$index, sheets)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-card>
</el-tab-pane>
<el-tab-pane label="内容" name="content">
<el-form ref="form" :model="form" label-width="200px">
<el-form-item label="头部：">
<el-checkbox
v-model="form.header"
true-label="Y"
false-label="N"
></el-checkbox>
</el-form-item>
<el-form-item label="没有空行：">
<el-checkbox
v-model="form.noempty"
true-label="Y"
false-label="N"
></el-checkbox>
</el-form-item>
<el-form-item label="停在空白记录：">
<el-checkbox
v-model="form.stoponempty"
true-label="Y"
false-label="N"
></el-checkbox>
</el-form-item>
<el-form-item label="限制:">
<el-input v-model="form.limit"></el-input>
</el-form-item>
<el-form-item label="编码:">
<el-select v-model="form.encoding" filterable style="width: 100%" clearable>
<el-option
v-for="item in codingType"
:key="item.index"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="添加文件名">
<el-checkbox
v-model="form.add_to_result_filenames"
true-label="Y"
false-label="N"
></el-checkbox>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="错误处理" name="handling">
<el-form ref="form" :model="form" label-width="130px">
<el-form-item label="严格类型:">
<el-checkbox
v-model="form.strict_types"
true-label="Y"
false-label="N"
></el-checkbox>
</el-form-item>
<el-form-item label="忽略错误:">
<el-checkbox
v-model="form.error_ignored"
true-label="Y"
false-label="N"
></el-checkbox>
</el-form-item>
<el-form-item label="跳过错误行:">
<el-checkbox
v-model="form.error_line_skipped"
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
true-label="Y"
false-label="N"
></el-checkbox>
</el-form-item>
<el-form-item label="告警文件目录:">
<el-row :gutter="10">
<el-col :span="8">
<el-input
v-model="form.bad_line_files_destination_directory"
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
></el-input>
</el-col>
<el-col class="line" :span="2.5">扩展名</el-col>
<el-col :span="8">
<el-input
v-model="form.bad_line_files_extension"
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
></el-input>
</el-col>
<el-col class="line" :span="2.5">
<el-button
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
size="mini"
>变量</el-button
></el-col
>
<el-col class="line" :span="2.5">
<el-button
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
size="mini"
@click="selectFilePath(2)"
>浏览</el-button
></el-col
>
</el-row>
</el-form-item>
<el-form-item label="错误件目录:">
<el-row :gutter="10">
<el-col :span="8">
<el-input
v-model="form.error_line_files_destination_directory"
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
></el-input>
</el-col>
<el-col class="line" :span="2.5">扩展名</el-col>
<el-col :span="8">
<el-input
v-model="form.error_line_files_extension"
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
></el-input>
</el-col>
<el-col class="line" :span="2.5">
<el-button
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
size="mini"
>变量</el-button
></el-col
>
<el-col class="line" :span="2.5">
<el-button
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
size="mini"
@click="selectFilePath(3)"
>浏览</el-button
></el-col
>
</el-row>
</el-form-item>
<el-form-item label="失败行数文件目录:">
<el-row :gutter="10">
<el-col :span="8">
<el-input
v-model="form.line_number_files_destination_directory"
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
></el-input>
</el-col>
<el-col class="line" :span="2.5">扩展名</el-col>
<el-col :span="8">
<el-input
v-model="form.line_number_files_extension"
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
></el-input>
</el-col>
<el-col class="line" :span="2.5">
<el-button
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
size="mini"
>变量</el-button
></el-col
>
<el-col class="line" :span="2.5">
<el-button
:disabled="
!this.form.error_ignored || this.form.error_ignored == 'N'
"
size="mini"
@click="selectFilePath(4)"
>浏览</el-button
></el-col
>
</el-row>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane label="字段" name="field">
<el-button type="primary" @click="fieldClick(true)">添加字段</el-button>
<el-button type="primary" @click="getTheField">获取字段</el-button>
<el-table :data="fields" style="width: 100%">
<el-table-column prop="name" label="名称"> </el-table-column>
<el-table-column prop="type" label="类型"> </el-table-column>
<el-table-column prop="length" label="长度"> </el-table-column>
<el-table-column prop="precision" label="精度"> </el-table-column>
<el-table-column prop="trim_type" label="去除空格类型">
</el-table-column>
<el-table-column prop="repeat" label="重复"> </el-table-column>
<el-table-column prop="format" label="格式"> </el-table-column>
<el-table-column prop="currency" label="货币"> </el-table-column>
<el-table-column prop="decimal" label="小数"> </el-table-column>
<el-table-column prop="group" label="分组"> </el-table-column>
<el-table-column label="操作" width="100px">
<template slot-scope="scope">
<el-button
@click="fieldClick(false, scope.row)"
type="text"
size="small"
>编辑</el-button
>
<el-button
type="text"
size="small"
@click="deletefield(scope.$index, fields)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="其他输出字段" name="oher ">
<el-form ref="form" :model="form" label-width="150px">
<el-form-item label="文件名称字段:">
<el-input v-model="form.filefield"></el-input>
</el-form-item>
<el-form-item label="Sheet名称字段:">
<el-input v-model="form.sheetfield"></el-input>
</el-form-item>
<el-form-item label="Sheet的行号列:">
<el-input v-model="form.sheetrownumfield"></el-input>
</el-form-item>
<el-form-item label="行号列:">
<el-input v-model="form.rownumfield"></el-input>
</el-form-item>
<el-form-item label="文件名字段:">
<el-input v-model="form.shortFileFieldName"></el-input>
</el-form-item>
<el-form-item label="扩展名字段:">
<el-input v-model="form.extensionFieldName"></el-input>
</el-form-item>
<el-form-item label="路径字段:">
<el-input v-model="form.pathFieldName"></el-input>
</el-form-item>
<el-form-item label="文件大小字段:">
<el-input v-model="form.sizeFieldName"></el-input>
</el-form-item>
<el-form-item label="是否为隐藏文件字段:">
<el-input v-model="form.hiddenFieldName"></el-input>
</el-form-item>
<el-form-item label="最后修改时间字段:">
<el-input v-model="form.lastModificationTimeFieldName"></el-input>
</el-form-item>
<el-form-item label="Uri字段:">
<el-input v-model="form.uriNameFieldName"></el-input>
</el-form-item>
<el-form-item label="Root uri字段:">
<el-input v-model="form.rootUriNameFieldName"></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
<span slot="footer" class="dialog-footer">
<el-button @click="excelLnput = false">取 消</el-button>
<el-button type="primary" @click="excelLnputDetermine">确 定</el-button>
</span>
</el-dialog>
<!-- 修改-->
<el-dialog
title="编辑"
:visible.sync="edit"
width="500px"
:before-close="handleClose"
>
<el-form ref="form" :model="formFile" label-width="150px">
<el-form-item label="文件/目录:">
<el-input v-model="formFile.name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="通配符:">
<el-input v-model="formFile.filemask"></el-input>
</el-form-item>
<el-form-item label="通配符号（排除）:">
<el-input v-model="formFile.exclude_filemask"></el-input>
</el-form-item>
<el-form-item label="要求:">
<el-select v-model="formFile.file_required" style="width: 100%">
<el-option label="Y" value="Y"></el-option>
<el-option label="N" value="N"></el-option>
</el-select>
</el-form-item>
<el-form-item label="包含子目录:">
<el-select v-model="formFile.include_subfolders" style="width: 100%">
<el-option label="Y" value="Y"></el-option>
<el-option label="N" value="N"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="edit = false">取 消</el-button>
<el-button type="primary" @click="edit = false">确 定</el-button>
</span>
</el-dialog>
<!-- 工作添加/修改-->
<el-dialog
title="编辑"
:visible.sync="work"
width="500px"
:before-close="handleClose"
>
<el-form ref="form" :model="workForm" label-width="150px">
<el-form-item label="工作表名称:">
<el-input v-model="workForm.name"></el-input>
</el-form-item>
<el-form-item label="起始行:">
<el-input v-model="workForm.startcol"></el-input>
</el-form-item>
<el-form-item label="起始列:">
<el-input v-model="workForm.startrow"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="work = false">取 消</el-button>
<el-button type="primary" @click="addWork">确 定</el-button>
</span>
</el-dialog>
<!-- 字段添加/修改-->
<el-dialog
title="编辑"
:visible.sync="field"
width="500px"
:before-close="handleClose"
>
<el-form ref="form" :model="fieldForm" label-width="120px">
<el-form-item label="名称:">
<el-input v-model="fieldForm.name"></el-input>
</el-form-item>
<el-form-item label="类型:">
<el-select v-model="fieldForm.type" style="width: 100%" clearable>
<el-option
v-for="item in fieldType"
:key="item.id"
:label="item.name"
:value="item.name"
/>
</el-select>
</el-form-item>
<el-form-item label="长度:">
<el-input v-model="fieldForm.length"></el-input>
</el-form-item>
<el-form-item label="精度:">
<el-input v-model="fieldForm.accuracy"></el-input>
</el-form-item>
<el-form-item label="去除空格类型:">
<el-select v-model="fieldForm.space" style="width: 100%" clearable>
<el-option label="不去掉空格" value="none"></el-option>
<el-option label="去掉左空格" value="left"></el-option>
<el-option label="去掉右空格" value="right"></el-option>
<el-option label="去掉左右两端空格" value="both"></el-option>
</el-select>
</el-form-item>
<el-form-item label="重复:">
<el-input v-model="fieldForm.repeat"></el-input>
</el-form-item>
<el-form-item label="格式:">
<el-select v-model="fieldForm.format" style="width: 100%" clearable>
<el-option
v-for="item in fieldFormat"
:key="item.index"
:label="item.name"
:value="item.name"
/></el-select>
</el-form-item>
<el-form-item label="货币:">
<el-input v-model="fieldForm.currency"></el-input>
</el-form-item>
<el-form-item label="小数:">
<el-input v-model="fieldForm.decimal"></el-input>
</el-form-item>
<el-form-item label="分组:">
<el-input v-model="fieldForm.grouping"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="field = false">取 消</el-button>
<el-button type="primary" @click="addField">确 定</el-button>
</span>
</el-dialog>
<!-- 表输入-->
<el-dialog
title="表输入"
:visible.sync="TableInputDialog"
width="800px"
:before-close="handleClose"
>
<tableInput
:disabled="true"
:form="form"
:graphXml="graphXml"
:nodeData="nodeData"
ref="tableInputDialog"
>
</tableInput>
<span slot="footer" class="dialog-footer">
<el-button @click="TableInputDialog = false">取 消</el-button>
<el-button type="info" @click="dataFlowFun" >浏览</el-button>
<el-button type="primary" @click="TableInputDialogFun"
>确 定</el-button
>
</span>
</el-dialog>
<!-- 获取系统信息-->
<el-dialog
title="获取系统信息"
:visible.sync="SystemInfoDialog"
width="800px"
:before-close="handleClose"
>
<getSystemInformation ref="SystemInfoDialog" :disabled="true" :form="form"> </getSystemInformation>
<span slot="footer" class="dialog-footer">
<el-button @click="SystemInfoDialog = false">取 消</el-button>
<el-button type="primary" @click="SystemInfoDialogFun"
>确 定</el-button
>
</span>
</el-dialog>
<!-- 自定义常量数据-->
<el-dialog
title="自定义常量数据"
:visible.sync="ConstantDialog"
width="800px"
:before-close="handleClose"
>
<customConstant ref="ConstantDialog" :disabled="true" :form="form"> </customConstant>
<span slot="footer" class="dialog-footer">
<el-button @click="ConstantDialog = false">取 消</el-button>
<el-button type="primary" @click="ConstantDialogFun"
>确 定</el-button
>
</span>
</el-dialog>
<!-- 自定义常量数据弹窗 -->
<!-- <customConstant :ConstantDialog.sync="ConstantDialog" :saveOutputDialog="saveOutputDialog" :doubleClickCell="doubleClickCell" :myForm="myoutPutFormData" > </customConstant> -->
<!-- 生成随机数-->
<el-dialog
title="生成随机数"
:visible.sync="RandomValueDialog"
width="800px"
:before-close="handleClose"
>
<randomNumber ref="RandomValueDialog" :disabled="true" :form="form"> </randomNumber>
<span slot="footer" class="dialog-footer">
<el-button @click="RandomValueDialog = false">取 消</el-button>
<el-button type="primary" @click="RandomValueDialogFun"
>确 定</el-button
>
</span>
</el-dialog>
<!-- 生成记录-->
<el-dialog
title="生成记录"
:visible.sync="RowGeneratorDialog"
width="800px"
:before-close="handleClose"
>
<generatingRecords ref="RowGeneratorDialog" :disabed="true" :form="form"></generatingRecords>
<span slot="footer" class="dialog-footer">
<el-button @click="RowGeneratorDialog = false">取 消</el-button>
<el-button type="primary" @click="RowGeneratorDialogFun"
>确 定</el-button
>
</span>
</el-dialog>
<!-- 文本文件输入-->
<el-dialog
title="文本文件输入"
:visible.sync="TextFileInputDialog"
width="800px"
:before-close="handleClose"
>
<textFileInput
ref="TextFileInputDialog"
:disabed="true"
:connectionNode="connectionNode"
:form="form"
:nodeData="nodeData"
></textFileInput>
<span slot="footer" class="dialog-footer">
<el-button @click="TextFileInputDialog = false">取 消</el-button>
<el-button type="primary" @click="TextFileInputDialogFun"
>确 定</el-button
>
</span>
</el-dialog>
<!-- 文件浏览器-->
<el-dialog
title="文件浏览器"
:visible.sync="filePathSelection"
width="500px"
:before-close="handleClose"
>
<browseFiles :disabed="true" v-on:route="route"></browseFiles>
<span slot="footer" class="dialog-footer">
<el-button @click="filePathSelection = false">取 消</el-button>
<el-button type="primary" @click="addFilePathSelection"
>确 定</el-button
>
</span>
</el-dialog>
<!-- 输出弹窗start=============== -->
<outDialog
ref="tableOutPut"
:tableOutPutVisible.sync="tableOutPutVisible"
:graph.sync="graph"
:doubleClickCell="doubleClickCell"
:getXmlVal="getXmlVal"
@fathertrans="fathertrans"
:saveOutputDialog="saveOutputDialog"
:tableOutFormSend="outPutFormData1"
></outDialog>
<insertOrUpdate
ref="insertOrdate"
:InsertOrUpdateVisible.sync="InsertOrUpdateVisible"
:saveOutputDialog="saveOutputDialog"
:doubleClickCell="doubleClickCell"
:getXmlVal="getXmlVal"
:insertOrUpdateFormSend="outPutFormData2"
></insertOrUpdate>
<excelOutPutDialog
ref="excelOut"
:excelOutPutVisible.sync="excelOutPutVisible"
:saveOutputDialog="saveOutputDialog"
:doubleClickCell="doubleClickCell"
:excelForm="outPutFormData3"
></excelOutPutDialog>
<updateDialog
ref="update"
:updateVisible.sync="updateVisible"
:saveOutputDialog="saveOutputDialog"
:doubleClickCell="doubleClickCell"
:updateFormSend="outPutFormData4"
:getXmlVal="getXmlVal"></updateDialog>
<synDialog
ref="syn"
:synVisible.sync="synVisible"
:saveOutputDialog="saveOutputDialog"
:doubleClickCell="doubleClickCell"
:synFormSend="outPutFormData5"
:getXmlVal="getXmlVal"></synDialog>
<delDialog
ref="del"
:deleteVisible.sync="deleteVisible"
:saveOutputDialog="saveOutputDialog"
:doubleClickCell="doubleClickCell"
:deleteFormSend="outPutFormData6"
:getXmlVal="getXmlVal"></delDialog>
<sqlDialog
ref="sql"
:sqlVisible.sync="sqlVisible"
:saveOutputDialog="saveOutputDialog"
:doubleClickCell="doubleClickCell"
:sqlFormSend="outPutFormData7"
></sqlDialog>
<textFileDialog
ref="textFile"
:fileVisible.sync="fileVisible"
:getXmlVal="getXmlVal" :saveOutputDialog="saveOutputDialog" :textFileForm="outPutFormData8" :doubleClickCell="doubleClickCell"></textFileDialog>
<microDialog ref="mic" :microVisible.sync="microVisible" :saveOutputDialog="saveOutputDialog" :microForm="outPutFormData9" :doubleClickCell="doubleClickCell"></microDialog>
<!-- 输出弹窗end================== -->
<trans-graph
ref="transRef"
:transGraphVisible.sync="transGraphVisible"
:getXmlVal="getXmlVal"
></trans-graph>
<!-- 数据浏览-->
<el-dialog
title="数据浏览"
:visible.sync="dataFlow"
width="1000px"
:before-close="handleClose"
>
<el-table :data="dataBrowsing" border style="width: 100%" height="600">
<el-table-column
v-for="item in dataField"
:key="item.index"
:label="item.header"
:prop="item.header"
>
</el-table-column>
</el-table>
</el-dialog>
</div>
</template>
<script>
import draggable from "vuedraggable";
// 使用修改后的jsplumb
import lodash from "lodash"; //JavaScript 实用工具库
import {
excelSheetType,
previousSteps,
inputOutputFields,
availableCharsets,
valueFormat,
valueMeta,
save,
newStep,
previewData
} from "@/api/kettle/link";
// 输入弹窗
import tableInput from "../appBulletFrame/tableInput";
import getSystemInformation from "../appBulletFrame/getSystemInformation";
import customConstant from "../appBulletFrame/customConstant";
import randomNumber from "../appBulletFrame/randomNumber";
import generatingRecords from "../appBulletFrame/generatingRecords";
import textFileInput from "../appBulletFrame/textFileInput";
import browseFiles from "../appBulletFrame/browseFiles";
// 输出弹窗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********************************************
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph;
export default {
// props: {
// dialogVisibleFourth: {
// type: Boolean,
// default: false,
// },
// },
props: ["blankCanvas"], //从父组件传过来的值
data() {
return {
nodeData:[],
dataBrowsing:[],
dataField:[],
dataFlow:false,
myoutPutFormData:{},
outPutFormData1:{},
outPutFormData2:{},
outPutFormData3:{},
outPutFormData4:{},
outPutFormData5:{},
outPutFormData6:{},
outPutFormData7:{},
outPutFormData8:{},
outPutFormData9:{},
outPutFormData:{},//输出弹窗组件的表单值
doubleClickCell:{},
getField:[],
transGraphVisible:false,//执行转换弹窗
monitorCanvas: "", //监听画布
getXmlVal: "", //获取上一个xml
keyHandler: null,
palettes: {},
graphXml: "",
xmlDocuments: "", //获取解码的xml
boxInformation: "", //弹框信息
toolItemData: {}, //新增节点时的值
doubleClickCell: {}, //双击节点
filter:{},
// mxl=================================
InsertOrUpdateVisible: false,
tableOutPutVisible: false,
excelOutPutVisible: false,
updateVisible: false,
synVisible: false,
deleteVisible: false,
sqlVisible: false,
fileVisible: false,
microVisible: false,
// mxl=================================
// 输入模块
file: [],
sheets: [],
publicData: [], //全部连接
connectionNode: [],
codingType: [],
routeState: 0,
filePathSelection: false,
TextFileInputDialog: false,
RowGeneratorDialog: false,
TableInputDialog: false,
SystemInfoDialog: false,
ConstantDialog: false,
RandomValueDialog: false,
excelLnput: false,
dataState: false,
edit: false,
work: false,
field: false,
form: {},
formFile: {},
activeName: "file",
fieldType: [],
fieldFormat: [],
fields: [
],
engine: [],
// 画布模块
isShowIcon: false,
isLeftMenu: true,
isShowR: false,
// graph 实例
graph: null,
// 控制画布销毁
easyFlowVisible: true,
// 是否加载完毕标志位
loadEasyFlowFinish: false,
// 数据
flowData: {},
// 激活的元素、可能是节点、可能是连线
activeElement: {
// 可选值 node 、line
type: undefined,
// 节点ID
nodeId: undefined,
// 连线ID
sourceId: undefined,
targetId: undefined,
},
zoom: 0.5,
workForm: {},
fieldForm: {},
};
},
// 一些基础配置移动该文件中
// mixins: [easyFlowMixin],
components: {
tableInput,
draggable,
getSystemInformation,
generatingRecords,
customConstant,
randomNumber,
textFileInput,
browseFiles,
// FlowNodeForm
// 弹窗组件start***********************
outDialog, //表输出
insertOrUpdate, //插入或更新
excelOutPutDialog,
updateDialog,
synDialog,
delDialog,
sqlDialog,
textFileDialog,
microDialog,
// 弹窗组件end***********************
},
//自定义指令 https://www.jb51.net/article/108047.htm
directives: {
flowDrag: {
// bind(el, binding, vnode, oldNode) {
// if (!binding) {
// return;
// }
// el.onmousedown = (e) => {
// if (e.button == 2) {
// // 右键不管
// return;
// }
// // 鼠标按下，计算当前原始距离可视区的高度
// let disX = e.clientX;
// let disY = e.clientY;
// el.style.cursor = "move";
// document.onmousemove = function (e) {
// // 移动时禁止默认事件
// e.preventDefault();
// const left = e.clientX - disX;
// disX = e.clientX;
// el.scrollLeft += -left;
// const top = e.clientY - disY;
// disY = e.clientY;
// el.scrollTop += -top;
// };
// document.onmouseup = function (e) {
// el.style.cursor = "auto";
// document.onmousemove = null;
// document.onmouseup = null;
// };
// };
// },
},
},
watch: {
blankCanvas(n, o) {
this.monitorCanvas = n;
this.setXml();
// this.setShowXml();
this.getXml();
},
// blankCanvas:{
// deep:true,
// immediate:true,
// handler:function(newV,oldV){
// // console.log('watch中：',newV);
// this.monitorCanvas = newV;
// if(newV !=''){
// this.setXml();
// this.getXml();
// }
// }
// }
},
mounted() {
this.createGraph();
this.initToolbar();
this.initGraph();
console.log(this.blankCanvas, 7987987987);
this.$refs.container.style.background = 'url("./mxgraph/images/grid.gif")';
},
// filters: {
// interceptionDate: function (value) {
// if (!value) return;
// return value.split("imgage=");
// },
// },
methods: {
setShowXml() {
this.graph.getModel().beginUpdate();
try {
var doc = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
var codec = new mxCodec(doc);
// var style = new Object();
// style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
// style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter;
// style[mxConstants.STYLE_IMAGE] = 'editors/images/bigicon/start_event_empty.png';
// style[mxConstants.STYLE_IMAGE_WIDTH] = '48';
// style[mxConstants.STYLE_IMAGE_HEIGHT] = '48';
// style[mxConstants.STYLE_FONTCOLOR] = '#000000';
// style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_CENTER;
// this.graph.getStylesheet().putCellStyle('start-s', style);
codec.decode(doc.documentElement, this.graph.getModel());
} finally {
this.graph.getModel().endUpdate();
}
},
getTheField(){
this.form.file = JSON.stringify(this.file)
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.graph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
console.log(this.graphXml,"获取字段");
let pamerFields = new FormData(); // 创建form对象
pamerFields.append("stepName", this.nodeData.value.attributes.label.value)
pamerFields.append("graphXml", this.graphXml);
pamerFields.append("before", false);
inputOutputFields(pamerFields).then((res) => {
this.fields = res
});
},
dataFlowFun(){
this.dataFlow =!this.dataFlow
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.graph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
let pmer = new FormData(); // 创建form对象
pmer.append("graphXml", this.graphXml);
pmer.append("stepName", this.nodeData.value.attributes.label.value);
pmer.append("rowLimit", this.$refs.tableInputDialog.form.limit);
previewData(pmer).then(res =>{
this.dataField = res.columns
this.dataBrowsing = res.firstRecords
})
},
setXml() {
this.graph.getModel().beginUpdate();
try {
var doc = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
var codec = new mxCodec(doc);
codec.decode(doc.documentElement, this.graph.getModel());
} finally {
this.graph.getModel().endUpdate();
}
},
TableInputDialogFun(){
this.TableInputDialog = !this.TableInputDialog
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
},
ConstantDialogFun(){
this.ConstantDialog = !this.ConstantDialog
console.log(this.$refs.ConstantDialog.data,'asghaksghk');
console.log(this.$refs.ConstantDialog.fields,'asghaksghk');
this.form.data = JSON.stringify(this.$refs.ConstantDialog.data)
this.form.fields = JSON.stringify(this.$refs.ConstantDialog.fields)
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
},
SystemInfoDialogFun(){
this.SystemInfoDialog = !this.SystemInfoDialog
console.log(this.$refs.SystemInfoDialog.fields,456753275328);
this.form.fields = JSON.stringify(this.$refs.SystemInfoDialog.fields)
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
},
RandomValueDialogFun(){
this.RandomValueDialog = !this.RandomValueDialog
console.log(this.$refs.RandomValueDialog.fields,4564654654);
this.form.fields = JSON.stringify(this.$refs.RandomValueDialog.fields)
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
},
RowGeneratorDialogFun(){
this.RowGeneratorDialog = !this.RowGeneratorDialog
console.log(this.$refs.RowGeneratorDialog.fields,4564654654);
this.form.fields = JSON.stringify(this.$refs.RowGeneratorDialog.fields)
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
},
TextFileInputDialogFun(){
this.TextFileInputDialog = !this.TextFileInputDialogFun
this.form.filter = JSON.stringify(this.$refs.TextFileInputDialog.filter)
this.form.inputFields = JSON.stringify(this.$refs.TextFileInputDialog.inputFields)
this.form.fileNameStore = JSON.stringify(this.$refs.TextFileInputDialog.fileNameStore)
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
},
excelLnputDetermine() {
this.excelLnput = !this.excelLnput;
console.log(this.fieldForm);
this.form.file = JSON.stringify(this.file);
this.form.sheets = JSON.stringify(this.sheets);
this.form.fields = JSON.stringify(this.fields);
console.log(this.form,456);
// this.fields()
for (let name in this.form) {
var edit = new mxCellAttributeChange(
this.nodeData,
name,
this.form[name]
);
this.graph.getModel().execute(edit);
}
console.log(edit, 4564564564654);
},
// 子组件发射回来的弹窗变量变为true
fathertrans(res) {
// this.dialogVisibleFourth=res;
this.$emit("update:dialogVisibleFourth", res);
console.log("发射回父组件====");
},
fileChnageInput(e) {
console.log(e);
},
deleteRow(index, rows) {
rows.splice(index, 1);
},
deletefield(index, rows) {
rows.splice(index, 1);
},
deleteFile(index, rows) {
rows.splice(index, 1);
},
tapClick() {},
// 文件
handleClick(val) {
this.edit = !this.edit;
this.formFile = val;
},
// 字段
addField() {
this.field = !this.field;
if (this.dataState) {
this.fields.push(this.fieldForm);
} else {
}
},
fieldClick(state, val) {
this.field = !this.field;
this.dataState = state;
if (state) {
this.fieldForm = {};
} else {
this.fieldForm = val;
}
},
// 工作表
workClick(state, val) {
this.work = !this.work;
this.dataState = state;
if (state) {
this.workForm = {};
} else {
this.workForm = val;
}
},
addWork() {
this.work = !this.work;
if (this.dataState) {
this.sheets.push(this.workForm);
} else {
}
},
// 关闭弹框
handleClose(done) {
this.$confirm("确认关闭？")
.then((_) => {
done();
})
.catch((_) => {});
},
addFilePathSelection() {
this.filePathSelection = !this.filePathSelection;
if (this.routeState == 1) {
this.localPath.include_subfolders = "N"
this.file.push(this.localPath);
} else if (this.routeState == 2) {
this.form.bad_line_files_destination_directory = this.localPath.name;
} else if (this.routeState == 3) {
this.form.errorFilesDestinationDirectory = this.localPath.name;
} else if (this.routeState == 4) {
this.form.lineNumberFilesDestinationDirectory = this.localPath.name;
}
},
route(flowData) {
this.localPath = flowData;
console.log(this.localPath);
},
selectFilePath(tsate) {
this.routeState = tsate;
this.filePathSelection = !this.filePathSelection;
},
task() {
let domArr = document.querySelectorAll('[key-id="123"]');
this.createGraph();
this.initToolbar();
},
handleNodeClick(e, node, i) {
this.$forceUpdate();
},
//生成画布
createGraph() {
this.graph = new mxGraph(this.$refs.container);
},
// 转xml
encode(graph) {
const encoder = new mxCodec();
const result = encoder.encode(graph.getModel());
return mxUtils.getPrettyXml(result);
},
decode(graphXml, graph) {
window["mxGraphModel"] = mxGraphModel;
window["mxGeometry"] = mxGeometry;
// const xmlDocument = mxUtils.parseXml(graphXml);
// const decoder = new mxCodec(xmlDocument);
// const node = xmlDocument.documentElement;
// decoder.decode(node, graph.getModel());
var enc = new mxCodec(mxUtils.createXmlDocument(graphXml));
var node = enc.encode(graph.getModel());
console.log(mxUtils.getPrettyXml(node));
return mxUtils.getPrettyXml(node);
},
lastStep(){
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.graph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
let pamerSteps = new FormData(); // 创建form对象
pamerSteps.append("stepName", this.nodeData.value.attributes.label.value);
pamerSteps.append("graphXml", this.graphXml);
pamerSteps.append("query", "");
previousSteps(pamerSteps).then((res) => {
this.connectionNode = res
});
},
previousField(){
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.graph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
let pamerFields = new FormData(); // 创建form对象
pamerFields.append("stepName", this.nodeData.value.attributes.label.value)
pamerFields.append("graphXml", this.graphXml);
pamerFields.append("before", true);
pamerFields.append("query", "");
inputOutputFields(pamerFields).then((res) => {
this.getField = res
});
},
//初始化画布
initGraph() {
if (this.R.isNil(this.graph)) {
return;
}
this.graph.setConnectable(true); // 允许连线
this.graph.setCellsEditable(false); // 不可修改
this.graph.setTooltips(true);
this.graph.setPanning(true);
this.graph.setDropEnabled(true);
this.graph.setAllowDanglingEdges(false);
this.graph.setDisconnectOnMove(false);
this.graph.setMultigraph(false);
this.graph.convertValueToString = (cell) => {
var label = cell.getAttribute("label");
// var icon = cell.getAttribute(cell.style.split("image="));
// mxl------------------------------------------------------------
// if(label) {
// if(cell.isEdge() && cell.value.nodeName == 'TransHop') {
// return '<img src="' + label + '" width="16" height="16" />';
// } else if(cell.isEdge() && cell.value.nodeName == 'JobHop') {
// var jsonArray = Ext.decode(label), label = '';
// Ext.each(jsonArray, function(img) {
// label += '<img src="' + img + '" width="16" height="16" />';
// });
// return label;
// } else {
// return decodeURIComponent(label);
// }
// }
// mxl------------------------------------------------------------
return label;
// console.log(cell.value.attributes,99999999999999);
// if (!cell.title && cell.value) {
// console.log("======11=",cell.value);
// console.log("======22=",cell);
// if(cell.value.attributes["ctype"]){
// cell.title = cell.value.attributes["ctype"]["value"];
// }
// // cell.title = cell.value.attribllutes.label.value;
// }
// cell.ctype = cell.value.attributes.ctype.value;
// let imgs = img.split("=");
// // let d = imgs[1]
// console.log(imgs);
// const styleObj = {
// title: cell.title,
// fillColor: "transparent",
// strokeColor: "#000000",
// strokeWidth: "1",
// shape: mxConstants.SHAPE_LABEL,
// align: mxConstants.ALIGN_CENTER,
// verticalAlign: mxConstants.ALIGN_BOTTOM,
// imageAlign: mxConstants.ALIGN_CENTER,
// imageVerticalAlign: mxConstants.ALIGN_TOP,
// image: '192.168.0.44:9888/ETLWEB-SERVER/etlweb/ui/images/GEN.svg?scale=32',
// };
// const style = Object.keys(styleObj)
// .map((attr) => `${attr}=${styleObj[attr]}`)
// .join(";");
// cell.style = style
// console.log(this.R.prop("title", cell),132132);
// return this.R.prop("title", cell);
};
this.graph.addListener(mxEvent.DOUBLE_CLICK, (graph, evt) => {
console.log(evt);
// this.xmlDocuments = mxUtils.parseXml(decodeURIComponent(this.blankCanvas));
this.graphXml = this.encode(this.graph);
console.log(this.graphXml, 11111111111111111111111);
// 监听双击事件
const cell = this.R.pathOr([], ["properties", "cell"], evt);
console.info(cell); // 在控制台输出双击的cell
this.nodeData = cell;
// this.setXml();
this.doubleClickCell = cell;
// 获取接口数据
availableCharsets(pamer).then((res) => {
this.codingType = res;
});
let pamer = new FormData(); // 创建form对象
pamer.append("query", "");
excelSheetType(pamer).then((res) => {
this.engine = res;
});
valueMeta().then((res) => {
this.fieldType = res;
});
let pamer2 = new FormData(); // 创建form对象
pamer2.append("stepName", "all");
valueFormat(pamer2).then((res) => {
this.fieldFormat = res;
});
if (
cell.ids == "step1" ||
cell.value.attributes.ctype.value == "ExcelInput"
) {
this.excelLnput = !this.excelLnput;
this.form = {};
let q = {};
let obj = cell.value.attributes;
for (let vel in obj) {
let key = obj[vel];
q[key.name] = key.value;
}
q.file = JSON.parse(q.file)
q.sheets = JSON.parse(q.sheets)
q.fields = JSON.parse(q.fields)
console.log(q,45646546464);
this.form = q;
this.sheets = q.sheets
this.fields = q.fields
this.file = q.file
return;
} else if (
cell.ids == "step7" ||
cell.value.attributes.ctype.value == "TableInput"
) {
this.TableInputDialog = !this.TableInputDialog;
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.graph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
this.form = {};
let q = {};
let obj = cell.value.attributes;
for (let vel in obj) {
let key = obj[vel];
q[key.name] = key.value;
}
this.form = q;
this.form.sql = decodeURIComponent( this.form.sql)
setTimeout(() => {
this.$refs.tableInputDialog.clickFun(this.graph);
}, 500);
return;
} else if (
cell.ids == "step6" ||
cell.value.attributes.ctype.value == "SystemInfo"
) {
this.SystemInfoDialog = !this.SystemInfoDialog;
this.form = {};
let q = {};
let obj = cell.value.attributes;
for (let vel in obj) {
let key = obj[vel];
q[key.name] = key.value;
}
q.fields = JSON.parse(q.fields)
this.form = q;
return;
} else if (
cell.ids == "step5" ||
cell.value.attributes.ctype.value == "DataGrid"
) {
this.ConstantDialog = !this.ConstantDialog;
this.form = {};
let q = {};
let obj = cell.value.attributes;
for (let vel in obj) {
let key = obj[vel];
q[key.name] = key.value;
}
q.data = JSON.parse(q.data)
q.fields = JSON.parse(q.fields)
this.form = q;
return;
} else if (
cell.ids == "step4" ||
cell.value.attributes.ctype.value == "RandomValue"
) {
this.RandomValueDialog = !this.RandomValueDialog;
this.form = {};
let q = {};
let obj = cell.value.attributes;
for (let vel in obj) {
let key = obj[vel];
q[key.name] = key.value;
}
q.fields = JSON.parse(q.fields)
this.form = q;
return;
} else if (
cell.ids == "step3" ||
cell.value.attributes.ctype.value == "RowGenerator"
) {
this.RowGeneratorDialog = !this.RowGeneratorDialog;
this.form = {};
let q = {};
let obj = cell.value.attributes;
for (let vel in obj) {
let key = obj[vel];
q[key.name] = key.value;
}
q.fields = JSON.parse(q.fields)
this.form = q;
return;
} else if (
cell.ids == "step2" ||
cell.value.attributes.ctype.value == "TextFileInput"
) {
this.TextFileInputDialog = !this.TextFileInputDialog;
this.form = {};
let q = {};
let obj = cell.value.attributes;
for (let vel in obj) {
let key = obj[vel];
q[key.name] = key.value;
}
console.log(q.fileNameStore,"sghywkglaslkhygslu");
q.fileNameStore = JSON.parse(q.fileNameStore)
q.inputFields = JSON.parse(q.inputFields)
q.filter = JSON.parse(q.filter)
this.form = q;
setTimeout(() => {
this.$refs.TextFileInputDialog.clickFun(this.graph)
}, 500);
return;
} else if (
cell.ids == "step17" ||
cell.value.attributes.ctype.value == "TableOutput"
) {
//表输出
this.tableOutPutVisible = !this.tableOutPutVisible;
this.outPutFormData1 = this.showDataFunc();
this.$refs.tableOutPut.clickFun(this.graph);
return;
} else if (cell.ids == "step16" || cell.value.attributes.ctype.value == "Update" ) {
//更新
this.updateVisible = !this.updateVisible;
this.outPutFormData4 = this.showDataFunc();
this.$refs.update.clickFun(this.graph);//向子组件传递画布
return;
} else if (cell.ids == "step15" || cell.value.attributes.ctype.value == "TextFileOutput" ) {
//文本文件输出
this.fileVisible = !this.fileVisible;
this.outPutFormData8 = this.showDataFunc();
this.$refs.textFile.clickFun(this.graph);//向子组件传递画布
return;
} else if (cell.ids == "step14" || cell.value.attributes.ctype.value == "SynchronizeAfterMerge" ) {
//数据同步
this.synVisible = !this.synVisible;
this.outPutFormData5 = this.showDataFunc();
this.$refs.syn.clickFun(this.graph);//向子组件传递画布
return;
} else if (cell.ids == "step13" || cell.value.attributes.ctype.value == "InsertUpdate" ) {
//插入、更新
this.InsertOrUpdateVisible = !this.InsertOrUpdateVisible;
this.outPutFormData2 = this.showDataFunc();
this.$refs.insertOrdate.clickFun(this.graph);//向子组件传递画布
return;
} else if (cell.ids == "step12" || cell.value.attributes.ctype.value == "Delete" ) {
//删除
this.deleteVisible = !this.deleteVisible;
this.outPutFormData6 = this.showDataFunc();
this.$refs.del.clickFun(this.graph);//向子组件传递画布
return;
} else if (cell.ids == "step11" || cell.value.attributes.ctype.value == "SQLFileOutput" ) {
//SQL文件输出
this.sqlVisible = !this.sqlVisible;
this.outPutFormData7 = this.showDataFunc();
this.$refs.sql.clickFun(this.graph);//向子组件传递画布
return;
}else if (cell.ids == "step10" || cell.value.attributes.ctype.value == "TypeExitExcelWriterStep" ) {
//mico-Excel输出
this.microVisible = !this.microVisible;
this.outPutFormData9 = this.showDataFunc();
setTimeout(() => {
this.$refs.mic.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
} else if (cell.ids == "step9" || cell.value.attributes.ctype.value == "ExcelOutput" ) {
//Excel输出
this.excelOutPutVisible = !this.excelOutPutVisible;
this.outPutFormData3 = this.showDataFunc();
setTimeout(() => {
this.$refs.excelOut.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
}
});
this.graph.addListener(mxEvent.CLICK, (graph, evt) => {
// console.log(evt);
// 监听单击事件
const cell = this.R.pathOr([], ["properties", "cell"], evt);
// console.info(cell); // 在控制台输出单击的cell
});
},
// 回显数据封装的方法
showDataFunc() {
let q = {};
let obj = this.doubleClickCell.value.attributes;
for (let vel in obj) {
let key = obj[vel];
q[key.name] = key.value;
}
return q;
},
addCell(toolItem, x, y) {
const { width, height } = toolItem;
// const parent = this.graph.getDefaultParent();
this.graph.getModel().beginUpdate();
const styleObj = {
title: toolItem["title"],
fillColor: "transparent",
strokeColor: "#000000",
strokeWidth: "1",
shape: mxConstants.SHAPE_LABEL,
align: mxConstants.ALIGN_CENTER,
verticalAlign: mxConstants.ALIGN_BOTTOM,
imageAlign: mxConstants.ALIGN_CENTER,
imageVerticalAlign: mxConstants.ALIGN_TOP,
image: toolItem["icon"],
};
const style = Object.keys(styleObj)
.map((attr) => `${attr}=${styleObj[attr]}`)
.join(";");
this.toolItemData = toolItem;
try {
let pameStep = new FormData(); // 创建form对象
pameStep.append("graphXml", this.getXmlVal);
pameStep.append("pluginId", toolItem.pluginId);
pameStep.append("name", toolItem.title);
newStep(pameStep).then((res) => {
this.boxInformation = res;
var doc = mxUtils.parseXml(res);
this.graph.getModel().beginUpdate();
try {
var cell = this.graph.insertVertex(
this.graph.getDefaultParent(),
null,
doc.documentElement,
x,
y,
width,
height,
style
);
console.log(cell, 4564564564);
console.log(toolItem, 111111111111111111);
cell.title = toolItem["title"];
cell.ids = toolItem["id"];
// cell.pluginId = toolItem["pluginId"];
// cell.icon = toolItem["icon"];
this.graph.setSelectionCells([cell]);
} finally {
this.graph.getModel().endUpdate();
}
this.getXml();
});
} finally {
this.graph.getModel().endUpdate();
}
},
// 获取上一个xml
getXml() {
const codec = new mxCodec();
// mxl=========================
var node = mxUtils.load('etlweb/mxgraph2/style/default-style.xml?_dc='+new Date().getTime()).getDocumentElement();
// var dec = new mxCodec(node.ownerDocument);
// dec.decode(node, this.graph.getStylesheet());
// mxl=========================
const encodedModel = codec.encode(this.graph.getModel());
console.log(encodedModel,46546465456);
this.getXmlVal = mxUtils.getXml(encodedModel);
let w = ""
w = JSON.stringify(this.getXmlVal)
console.log(w,46546465456);
// console.log(this.getXmlVal, 8888888888888);
},
//选择
initToolbar() {
let domArr = document.querySelectorAll('[key-id="123"]');
domArr.forEach((dom, index) => {
// console.log(dom.pluginId);
// console.log(dom);
let toolItemObj = {
title: dom.innerText,
id: dom.id,
width: 50,
height: 50,
icon: dom.attributes["icon"].nodeValue,
// value: dom.pluginId,
pluginId: dom.getAttribute("pluginId"),
};
const { width, height } = toolItemObj;
const dropHandler = (graph, evt, cell, x, y) => {
this.addCell(toolItemObj, x, y);
};
const createDragPreview = () => {
const elt = document.createElement("div");
elt.style.border = "1px dotted black";
elt.style.width = `${width}px`;
elt.style.height = `${height}px`;
return elt;
};
mxUtils.makeDraggable(
dom,
this.graph,
dropHandler,
createDragPreview(),
0,
0,
false,
true
);
});
},
// //设置
settingFlow() {
// console.log("按钮给我测试其他的功能--1", );
},
// // 删除激活的元素
deleteFlow() {
this.graph.removeCells(this.graph.getSelectionCells(), false); //删除选中节点
// if (this.activeElement.type === "node") {
// this.deleteNode(this.activeElement.nodeId);
// } else if (this.activeElement.type === "line") {
// this.$confirm("确定删除所点击的线吗?", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// })
// .then(() => {
// var conn = this.graph.getConnections({
// source: this.activeElement.sourceId,
// target: this.activeElement.targetId,
// })[0];
// this.graph.deleteConnection(conn);
// })
// .catch(() => {});
// }
},
// // 删除线
// deleteLine(from, to) {
// delete this.publicData[to];
// this.flowData.lineList = this.flowData.lineList.filter(function (line) {
// if (line.from == from && line.to == to) {
// return false;
// }
// return true;
// });
// },
// // 改变连线
// changeLine(oldFrom, oldTo) {
// this.deleteLine(oldFrom, oldTo);
// },
// // 改变节点的位置
// changeNodeSite(flowData) {
// for (var i = 0; i < this.flowData.nodeList.length; i++) {
// let node = this.flowData.nodeList[i];
// if (node.id === flowData.nodeId) {
// node.left = flowData.left;
// node.top = flowData.top;
// }
// }
// },
// /**
// * 删除节点
// * @param nodeId 被删除节点的ID
// */
// deleteNode(nodeId) {
// this.$confirm("确定要删除节点" + nodeId + "?", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// closeOnClickModal: false,
// })
// .then(() => {
// /**
// * 这里需要进行业务判断，是否可以删除
// */
// this.flowData.nodeList = this.flowData.nodeList.filter(function (
// node
// ) {
// if (node.id === nodeId) {
// // 伪删除，将节点隐藏，否则会导致位置错位
// // node.show = false
// return false;
// }
// return true;
// });
// this.$nextTick(function () {
// this.graph.removeAllEndpoints(nodeId);
// });
// })
// .catch(() => {});
// return true;
// },
// console.log("点击节点操作", node);
// // this.$emit("dialogVisibleFourth",true);
// // this.$emit('updata:dialogVisibleFourth',true); //触发showbox方法，true为向父组件传递的数据
// this.stepName = node;
// this.connectionNode = this.publicData[node.id];
// console.log(this.connectionNode);
// this.isShowR = true;
// this.activeElement.type = "node";
// this.activeElement.nodeId = node.id;
// // this.$refs.nodeForm.nodeInit(this.flowData, nodeId)
// let pamer = new FormData(); // 创建form对象
// pamer.append("query", "");
// excelSheetType(pamer).then((res) => {
// this.engine = res;
// });
// availableCharsets(pamer).then((res) => {
// this.codingType = res;
// });
// let pamer2 = new FormData(); // 创建form对象
// pamer2.append("valueType", "all");
// valueFormat(pamer2).then((res) => {
// this.fieldFormat = res;
// });
// valueMeta().then((res) => {
// this.fieldType = res;
// });
// previousSteps().then((res) => {});
// inputOutputFields().then((res) => {});
// if (node.ids == "step1") {
// this.excelLnput = !this.excelLnput;
// return;
// } else if (node.ids == "step7") {
// this.TableInputDialog = !this.TableInputDialog;
// return;
// } else if (node.ids == "step6") {
// this.SystemInfoDialog = !this.SystemInfoDialog;
// return;
// } else if (node.ids == "step5") {
// this.ConstantDialog = !this.ConstantDialog;
// return;
// } else if (node.ids == "step4") {
// this.RandomValueDialog = !this.RandomValueDialog;
// return;
// } else if (node.ids == "step3") {
// this.RowGeneratorDialog = !this.RowGeneratorDialog;
// return;
// } else if (node.ids == "step2") {
// this.TextFileInputDialog = !this.TextFileInputDialog;
// return;
// }
// if (node.ids == "step16") {
// this.tableOutPutVisible = !this.tableOutPutVisible;
// return;
// }
// // 是否具有该线
// hasLine(from, to) {
// for (var i = 0; i < this.flowData.lineList.length; i++) {
// var line = this.flowData.lineList[i];
// if (line.from === from && line.to === to) {
// return true;
// }
// }
// return false;
// },
// // 是否含有相反的线
// hashOppositeLine(from, to) {
// return this.hasLine(to, from);
// },
// nodeRightMenu(nodeId, evt) {
// console.log(88);
// this.menu.show = true;
// this.menu.curNodeId = nodeId;
// this.menu.left = evt.x + "px";
// this.menu.top = evt.y + "px";
// },
// repaintEverything() {
// this.graph.repaint();
// },
// // 加载流程图-不能删
// dataReload(flowData) {
// this.easyFlowVisible = false;
// this.flowData.nodeList = [];
// this.flowData.lineList = [];
// this.$nextTick(() => {
// flowData = lodash.cloneDeep(flowData);
// this.easyFlowVisible = true;
// this.flowData = flowData;
// // console.log(flowData, '渲染数据');
// this.$nextTick(() => {
// this.graph = graph.getInstance();
// this.$nextTick(() => {
// this.jsPlumbInit();
// });
// });
// });
// },
// // 保存流程图
saveFlow() {
// this.graphXml = this.encode(this.graph);
var enc = new mxCodec(mxUtils.createXmlDocument());
var node = enc.encode(this.graph.getModel());
this.graphXml = mxUtils.getPrettyXml(node);
console.log(this.graphXml, 1111111111111);
// console.log(this.graphXml);
// const that = this;
// let flowObj = Object.assign({}, that.flowData);
// // localStorage.setItem("data_test", JSON.stringify(flowObj))
// console.log("保存流程图", flowObj);
// 保存
let pamers = new FormData(); // 创建form对象
pamers.append("graphXml", encodeURIComponent(this.graphXml));
save(pamers).then((res) => {
console.log(res);
if (res.success) {
this.$message.success("保存流程成功！暂时请查先看控制台。");
} else {
}
});
},
// 执行转换
doTrans() {
this.transGraphVisible = !this.transGraphVisible;
this.$refs.transRef.clickFun(this.graph);
},
// //重绘流程图
clearFlow() {
// let that = this;
// console.log("重绘流程图--1", that.flowData);
// that
// .$confirm("确定要重新绘制流程图吗？", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// closeOnClickModal: false,
// })
// .then(() => {
// if (that.flowData.nodeList.length !== 0) {
// that.flowData.nodeList.forEach(function (node, index) {
// that.graph.remove(node.id);
// });
// that.flowData.nodeList = [];
// that.flowData.linkList = [];
// that.$message.success("设置成功");
// console.log("重绘流程图--002", that.flowData);
// }
// })
// .catch(() => {
// console.log("取消重绘流程图--1");
// that.$message.error("取消重制");
// });
// },
// //放小
// zoomSub() {
// let that = this;
// if (that.zoom <= 0) {
// return;
// }
// // setInterval(() => {
// that.zoom = that.zoom - 0.1;
// that.$refs.efContainer.style.transform = `scale(${that.zoom})`;
// that.graph.setZoom(that.zoom);
// // }, 1000)
// },
// //放大
// zoomAdd() {
// let that = this;
// if (that.zoom >= 1) {
// return;
// }
// // setInterval(() => {
// that.zoom = that.zoom + 0.1;
// // that.$refs.efContainer.style.transform = `scale(${that.zoom})`
// console.log(that.zoom);
// that.$refs.efContainer.style.transform = `scale(${that.zoom})`;
// that.graph.setZoom(that.zoom);
// // }, 1000)
},
// // 下载数据
downloadData() {
// this.$confirm("确定要下载该流程数据吗？", "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning",
// closeOnClickModal: false,
// })
// .then(() => {
// var datastr =
// "data:text/json;charset=utf-8," +
// encodeURIComponent(JSON.stringify(this.flowData, null, "\t"));
// console.log(this.flowData);
// var downloadAnchorNode = document.createElement("a");
// downloadAnchorNode.setAttribute("href", datastr);
// downloadAnchorNode.setAttribute("download", "flowData.json");
// downloadAnchorNode.click();
// downloadAnchorNode.remove();
// this.$message.success("正在下载中,请稍后...");
// })
// .catch(() => {});
},
//输出组件保存************************
saveOutputDialog(params) {
var outPutForm = params;
console.log("子组件传回来的弹窗参数===", outPutForm);
for (var name in outPutForm) {
var edit = new mxCellAttributeChange(
this.doubleClickCell,
name,
outPutForm[name]
);
this.graph.getModel().execute(edit);
}
},
//输出组件保存******************/
},
};
</script>
<style lang="scss" type="text/scss" scoped>
.mxgraphClass,
#mxgraph {
height: 100vh;
width: 100%;
}
.moveR-enter-active,
.moveR-leave-active {
transition: all 0.3s linear;
transform: translateX(0);
}
.moveR-enter,
.moveR-leave {
transform: translateX(100%);
}
.moveR-leave-to {
transform: translateX(100%);
}
.moveL-enter-active,
.moveL-leave-active {
transition: all 0.3s linear;
transform: translateX(0%);
}
.moveL-enter,
.moveL-leave {
transform: translateX(-100%);
}
.moveL-leave-to {
transform: translateX(-100%);
}
</style>
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
......@@ -1099,15 +1099,32 @@
></successDialog>
<!-- 作业弹窗组件end------------------------------------->
<!-- 转换弹窗组件start333 ------------------------------>
<switchDialog
ref="switch"
:switchVisible.sync="switchVisible"
<!-- 流程弹窗组件start333 ------------------------------>
<!-- 流程弹窗组件end33333------------------------------ -->
<!-- 脚本弹窗组件start -->
<sqlScriptDialog
ref="script"
:scriptVisible.sync="scriptVisible"
:saveOutputDialog="saveOutputDialog"
:doubleClickCell="doubleClickCell"
:switchFormSend="outPutFormData15"
></switchDialog>
<!-- 转换弹窗组件end33333------------------------------ -->
:scriptFormSend="outPutFormData16"
></sqlScriptDialog>
<!-- 脚本弹窗组件end -->
<!-- 转换弹窗组件start -->
<columnChoose
ref="insertOrdate"
:columnVisible.sync="columnVisible"
:saveOutputDialog="saveOutputDialog"
:doubleClickCell="doubleClickCell"
:getXmlVal="getXmlVal"
:insertOrUpdateFormSend="outPutFormData2"
></columnChoose>
<!-- 转换弹窗组件end -->
<!-- 执行转换开始 -->
<trans-graph
......@@ -1208,9 +1225,16 @@ import homeworkDialog from "../../../job-dialog/homework";
// 流程弹窗组件start3333--------------------
import switchDialog from "../../../stream-dialog/switch";
// 流程弹窗组件end3333333333----------------
// 脚本弹窗组件start---------------------
import sqlScriptDialog from "../../../script-dialog/sql-script";
// 脚本弹窗组件end-----------------------
// 转换弹窗组件start----------
import columnChoose from "../../../trans-dialog/column-choose";
// 转换弹窗组件end------------
import mxgraph from "@/utils/mxgraph";
const {
......@@ -1264,10 +1288,11 @@ export default {
outPutFormData14: {}, //作业---成功
outPutFormData: {}, //输出弹窗组件的表单值
// 转换33start---------
outPutFormData15: {}, //转换--字段选择
// 转换3end------------
getField: [],
transGraphVisible: false, //执行转换弹窗
outPutFormData16:{},//脚本--执行sql脚本
doubleClickCell:{},
getField:[],
transGraphVisible:false,//执行转换弹窗
monitorCanvas: "", //监听画布
getXmlVal: "", //获取上一个xml
keyHandler: null,
......@@ -1307,8 +1332,10 @@ export default {
selectFieldDialog:false,//选择字段
// 流程弹窗组件start----------
switchVisible: false,
// 流程弹窗组件end------------
// 脚本组件start-----
scriptVisible:false,
// 脚本组件end-----
// 输入模块
file: [],
......@@ -1402,9 +1429,17 @@ export default {
mergeRecords, //合并记录
selectField,//选择字段
// 作业弹簧组件end----------------------
// 转换弹窗组件start---------
// 流程弹窗组件start---------
switchDialog,
// 转换弹窗组件end-----------
// 流程弹窗组件end-----------
// 脚本弹窗组件---
sqlScriptDialog,
// 脚本弹窗组件---
// 转换弹窗组件start---
columnChoose,
// 转换弹窗组件end-----
},
//自定义指令 https://www.jb51.net/article/108047.htm
directives: {
......@@ -2471,15 +2506,12 @@ export default {
this.$refs.mytrans.clickFun(this.graph); //向子组件传递画布
}, 500);
return;
} else if (
(this.curFileType == "transformation" && cell.ids == "step36") ||
cell.value.attributes.ctype.value == "SwitchCase"
) {
} else if((this.curFileType=="transformation" && cell.ids == "step45") || cell.value.attributes.ctype.value == "ExecSQL"){
//流程--Switch / Case
this.switchVisible = !this.switchVisible;
this.outPutFormData15 = this.showDataFunc();
this.scriptVisible = !this.scriptVisible;
this.outPutFormData16 = this.showDataFunc();
setTimeout(() => {
this.$refs.switch.clickFun(this.graph); //向子组件传递画布
this.$refs.script.clickFun(this.graph);//向子组件传递画布
}, 500);
return;
}
......
src/views/job-dialog/homework.vue
......@@ -441,7 +441,6 @@ export default ({
formData.append('query', '');
getLogLevelList(formData).then(res=>{
if (res) {
console.log('获取日志级别==',res);
this.logLevelList=res;
}else {
this.$message.error(res.errMsg)
......
src/views/kettle/home2.vue
......@@ -1209,22 +1209,17 @@ props: ["dragItem"],
},
// 新建任务
createJob(){
if(this.curNodeIconCls =='imageFolder'){
this.estabDialogVisible=true;
this.estabTitle='任务';
}else{
this.$message.error('请选择资源库中的一个目录');
}
},
// 新建目录
createFile(){
if(this.curNodeIconCls =='imageFolder'){
this.estabDialogVisible=true;
this.estabTitle='目录';
}else{
this.$message.error('请选择资源库中的一个目录');
}
},
// 删除资源库文件
......@@ -1257,6 +1252,7 @@ props: ["dragItem"],
this.curNode=node;//当前选中节点
this.nodePath=data.path;//当前选择数
this.curNodeIconCls=node.data.iconCls;
console.log('当前节点的文件夹路径:',this.nodePath);
if(node.data.leaf){
this.curNodeText=node.data.text;//当前节点
......@@ -1270,12 +1266,12 @@ props: ["dragItem"],
// this.tabShowFlag=true;//核心对象显项卡显示
//mxl判断作业和转换----------------------
if(node.data.type=="transformation"){
this.$refs.nodeMenu2.stepsFun();
let that=this;
setTimeout(function(){
that.$refs.graphContainer.initGraphClick("transformation");
},500)
})
}else if(node.data.type=="job"){
this.$refs.nodeMenu2.jobentrysFun();
let that=this;
......@@ -1297,8 +1293,8 @@ props: ["dragItem"],
})
}
// else{
// this.$message.error('请选择一个资源库！');
// return;
......
src/views/script-dialog/sql-script.vue 0 → 100644
<template>
<div>
<el-dialog
title="执行SQL语句"
:visible.sync="scriptVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<div id="ExcelInputDialog"></div>
<!-- <el-form ref="stepName" :model="stepName" label-width="120px"> -->
<el-form :model="myForm" label-width="200px">
<el-form-item label="步骤名称:">
<el-input v-model="myForm.label"></el-input>
</el-form-item>
<!-- </el-form> -->
<!-- <el-form :model="insertOrUpdateForm" label-width="200px"> -->
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="基本配置" name="content">
<el-form-item label="数据库连接:" label-width="100px">
<el-row :gutter="24">
<el-col :span="14">
<el-select style="width: 100%" v-model="myForm.connection" placeholder="请选择选择数据库连接" @focus="getGraphDataBases">
<el-option v-for="(item,index) in namesList" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-col>
<el-col class="line" :span="3">
<el-button size="mini" @click.native="editDataBaseModal()">编辑</el-button></el-col
>
<el-col class="line" :span="3">
<el-button size="mini" @click.native="newAdd">新建</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-width="0px">
<el-input type="textarea" v-model="myForm.sql" :rows="12" placeholder="SQL语句，多个语句之间请用;分割"></el-input>
</el-form-item>
<!-- <el-form-item label="提交记录数量:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.commit"></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="myForm.update_bypassed" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item> -->
</el-tab-pane>
<el-tab-pane label="细节" name="second">
<el-form-item label="执行每一行:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.executedEachInputRow" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Execute as a single statement:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.singleStatement" true-label='Y' false-label="N"></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="myForm.replaceVariables" true-label='Y' false-label="N"></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="myForm.setParams" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Quote String:">
<el-row :gutter="10">
<el-col :span="23">
<el-checkbox v-model="myForm.quoteString" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="包含插入状态的字段:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.insert_field"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="包含更新状态的字段:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.update_field"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="包含删除状态的字段:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.delete_field"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="包含读状态的字段:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="myForm.read_field"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="参数" name="handling">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClick(true)">增加参数</el-button>
<!-- <el-button style="padding: 3px 0" type="text" @click="getFields(0)">获取字段</el-button> -->
<el-button style="padding: 3px 0" type="text" @click="deleteFields">删除全部</el-button>
</div>
<table-list ref="tableDia" :tableHead="tableHead" :tableData="tableData" :field.sync="editDia" :fieldClick="fieldClick"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="field"
width="500px"
:before-close="handleCloseEdit"
append-to-body>
<el-form ref="form" :model="fieldForm" label-width="80px">
<el-form-item label="作为参数的字段:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldForm.name"></el-input>
</el-col>
</el-row>
</el-form-item>
<!-- <el-form-item label="表字段:">
<el-select v-model="fieldForm.keyLookup" style="width: 100%" @focus="tableFields">
<el-option v-for="(item,index) in fieldsList1" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="比较符:">
<el-select v-model="fieldForm.keyCondition" style="width: 100%">
<el-option v-for="(item,index) in keyConditionList" :key="index" :label="item.text" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="流里的字段1:">
<el-select v-model="fieldForm.keyStream1" style="width: 100%" @focus="inputOutputFields">
<el-option v-for="(item,index) in fieldsList2" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="流里的字段2:">
<el-select v-model="fieldForm.keyStream2" style="width: 100%" @focus="inputOutputFields">
<el-option v-for="(item,index) in fieldsList2" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item> -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="field = false">取 消</el-button>
<el-button type="primary" @click="addField">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
<!-- <el-tab-pane label="参数" name="oher ">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClickUpdate">新增字段</el-button>
<el-button style="padding: 3px 0" type="text" @click="getFields(1)">获取和更新字段</el-button>
<el-button style="padding: 3px 0" type="text" @click="deleteFieldsUpdate">删除全部</el-button>
<el-button style="padding: 3px 0" type="text">编辑映射</el-button>
</div>
<table-list :tableHead="tableHeadUpdate" :tableData="tableDataUpdate" :field.sync="editDiaUpdate" :fieldClick="fieldClickUpdate"></table-list>
<el-dialog
title="编辑"
:visible.sync="fieldUpdate"
width="500px"
:before-close="handleCloseEditUpdate"
append-to-body>
<el-form ref="form" :model="fieldFormUpdate" label-width="80px">
<el-form-item label="表字段:">
<el-select v-model="fieldFormUpdate.updateLookup" style="width: 100%" @focus="tableFields">
<el-option v-for="(item,index) in fieldsList1" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="流字段:">
<el-select v-model="fieldFormUpdate.updateStream" style="width: 100%" @focus="inputOutputFields">
<el-option v-for="(item,index) in fieldsList2" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="更新:">
<el-select v-model="fieldFormUpdate.update" style="width: 100%">
<el-option v-for="(item,index) in yesOrNoList" :key="index" :label="item.text" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="Update = false">取 消</el-button>
<el-button type="primary" @click="addFieldUpdate">确 定</el-button>
</span>
</el-dialog>
</el-card>
</el-tab-pane> -->
</el-tabs>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="InsertOrUpdateVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
<estab-dialog ref="establishDia" :noneRespository="noneRespository" :graph.sync="newGraph" :form="myForm" :dialogVisibleFourth.sync='dialogVisibleFourth' @getSonValue="getSonValue" ></estab-dialog>
</div>
</template>
<script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph
import {
tableFields,
inputOutputFields
} from "@/api/kettle/file";//获取表输出
import {
listNames,//获取已经创建的数据库列表
} from "@/api/kettle/link";
export default ({
data(){
return{
connectionName:'',
// selectModel:
noneRespository:1,//判断是保存画布还是传后台
dialogVisibleFourth:false,
namesList:[],
myForm: {},//解决子组件改变父组件传递props属性报错
newGraph:{},
fieldsList1:[],
fieldsList2:[],
field:false,//编辑弹窗
editDia:false,//编辑表字段
fieldForm:{},//编辑弹窗
fieldUpdate:false,//更新弹窗
editDiaUpdate:false,//更新字段
fieldFormUpdate:{},//更新弹窗
stepName:{name:'插入/更新'},
// insertOrUpdateForm:{
// commit: "100",
// connection: "",
// schema: "test",
// table: "",
// searchFields: "[]",
// updateFields: "[]",
// update_bypassed: "N"
// },
activeName:'content',
// 查询字段--start------------
fieldsList:[],//字段获取
keyConditionList:[{value: '=', text: '='},
{value: '<>', text: '<>'},
{value: '<', text: '<'},
{value: '<=', text: '<='},
{value: '>', text: '>'},
{value: '>=', text: '>='},
{value: 'LIKE', text: 'LIKE'},
{value: 'BETWEEN', text: 'BETWEEN'},
{value: 'IS NULL', text: 'IS NULL'},
{value: 'IS NOT NULL', text: 'IS NOT NULL'}],
// 表头数据
tableHead:[
{
column_name: "name",column_comment:"作为参数的字段"
},
// {
// column_name: "keyCondition",column_comment:"比较符"
// },
// {
// column_name: "keyStream1",column_comment:"流里的字段1"
// },
// {
// column_name: "keyStream2",column_comment:"流里的字段2"
// }
],
// 表格数据
tableData: [{
keyLookup: '3',
keyCondition: '鞠婧祎',
keyStream1: '女',
keyStream2:'1',
},
{
keyLookup: '3',
keyCondition: '鞠婧祎',
keyStream1: '女',
keyStream2:'1',
},
{
keyLookup: '3',
keyCondition: '鞠婧祎',
keyStream1: '女',
keyStream2:'1',
},
],
// 查询字段--end------------
// 更新字段start------------
// 表头数据
tableHeadUpdate:[
{
column_name: "updateLookup",column_comment:"表字段"
},
{
column_name: "updateStream",column_comment:"流字段"
},
{
column_name: "update",column_comment:"更新"
},
],
// 表格数据
tableDataUpdate: [{
updateLookup: '1',
updateStream: '鞠婧祎1',
update: '女',
},
{
updateLookup: '2',
updateStream: '鞠婧祎2',
update: '女',
},
{
updateLookup: '3',
updateStream: '鞠婧祎3',
update: '女',
},],
yesOrNoList:[{value: 'Y', text: '是'},
{value: 'N', text: '否'}]
// 更新字段end-------------------
}
},
// watch:{
// insertOrUpdateForm(n, o) {
// console.log("回显的表单数据===",n);
// if(n){
// var ny=JSON.parse(n.searchFields);
// var na=JSON.parse(n.updateFields);
// this.tableData=ny;
// this.tableDataUpdate=na;
// }
// },
// },
watch:{
// 解决子组件改变父组件传进来的变量的属性不报错start------
scriptFormSend(val){
console.log("回显的表单数据===",val);
val.sql=decodeURIComponent(val.sql);
this.myForm=val;
if(val.arguments){
var ny=JSON.parse(val.arguments);
this.tableData=ny;
}
},
// 解决子组件改变父组件传进来的变量的属性不报错start------
},
props:["scriptFormSend","scriptVisible","doubleClickCell","getXmlVal","saveOutputDialog"],
mounted(){
},
methods:{
// 获取保存到画布的databases
getGraphDataBases(){
var root = this.newGraph.getDefaultParent(), data = [];
if(root.getAttribute('databases') != null)
data=JSON.parse(root.getAttribute('databases'));
console.log('获取到画布上的databases====',data);
this.namesList=data;
},
// 编辑
editDataBaseModal(){
this.$refs.establishDia.clickFun(this.newGraph);//先把画布传过去
if(this.myForm.connection){
this.dialogVisibleFourth=true;
}
this.$refs.establishDia.getTransDatabase(this.myForm.connection);
this.$refs.establishDia.accessMethod();//获取连接方式
},
// 新增数据库
newAdd(){
this.dialogVisibleFourth=true;
this.$refs.establishDia.clickFun(this.newGraph);//先把画布传过去
this.$refs.establishDia.getTransDatabase();
this.$refs.establishDia.accessMethod();//获取连接方式
},
getSonValue(res){
if(typeof(res)=='string'){
this.connectionName=res
console.log('接收子组件的值1111111----',this.connectionName);
}else if(typeof(res)=='boolean'){
this.dialogVisibleFourth=res;
console.log('接收子组件的值2222222----',this.dialogVisibleFourth);
}
},
clickFun(graph){
console.log(graph,'双击获取值')
this.newGraph = graph;
},
handleClose(){
this.$emit("update:scriptVisible", false);
},
confirm(){
this.myForm.arguments=JSON.stringify(this.tableData);
console.log('弹窗数据：===',this.myForm);
this.saveOutputDialog(this.myForm);
this.handleClose();//关闭弹窗
},
//新增或者编辑弹窗
fieldClick(state, val) {
this.field = !this.field;
this.dataState = state;
if (state) {
this.fieldForm = {};
} else {
this.fieldForm = val;
}
},
//关闭编辑的弹窗
handleCloseEdit(){
this.field = !this.field;
},
// 字段
addField() {
this.field = !this.field;
console.log('添加的字段===',this.fieldForm);
if (this.dataState) {
this.tableData.push(this.fieldForm);
}
},
//新增或者编辑弹窗-----更新start------------------
fieldClickUpdate(state, val) {
this.fieldUpdate = !this.fieldUpdate;
this.dataState = state;
if (state) {
this.fieldFormUpdate = {};
} else {
this.fieldFormUpdate = val;
}
},
//关闭编辑的弹窗
handleCloseEditUpdate(){
this.fieldUpdate = !this.fieldUpdate;
},
// 字段
addFieldUpdate() {
this.fieldUpdate = !this.fieldUpdate;
console.log('添加的字段===',this.fieldFormUpdate);
if (this.dataState) {
this.tableDataUpdate.push(this.fieldFormUpdate);
}
},
// -----更新end------------------
//获取字段
getFields(num){
if(this.doubleClickCell){
// var title=this.doubleClickCell.title;
var title=this.doubleClickCell.value.attributes.label.value;
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
// pamer.append("graphXml", this.getXmlVal);
pamer.append("before", true);
pamer.append("query", '');
inputOutputFields(pamer).then(res=>{
console.log('字段',res);
// this.blankCanvas = res
this.fieldsList=res;
if(num==0){
var myarray=[]
this.fieldsList.forEach(e => {
var obj={};
obj.keyLookup=e.name;
obj.keyCondition="=";
obj.keyStream1=e.name;
obj.keyStream2='';
myarray.push(obj);
});
this.tableData=myarray;
}else if(num==1){
var myarray=[]
this.fieldsList.forEach(e => {
var obj={};
obj.updateLookup=e.name;
obj.updateStream=e.name;
obj.update='Y';
myarray.push(obj);
});
this.tableDataUpdate=myarray;
}
})
},
tableFields(){
if(this.doubleClickCell){
// var title=this.doubleClickCell.title;
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
// pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// pamer.append("before", true);
// pamer.append("query", '');
pamer.append("databaseName", this.myForm.connection);
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
// var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
var myXmlVal = mxUtils.getPrettyXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("schema", this.myForm.schema);
pamer.append("table", this.myForm.table);
pamer.append("query", '');
tableFields(pamer).then(res=>{
console.log('字段',res);
// this.blankCanvas = res
this.fieldsList1=res;
})
},
//获取表输出
inputOutputFields(){
if(this.doubleClickCell){
// var title=this.doubleClickCell.title
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
// var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
var myXmlVal = mxUtils.getPrettyXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("before", true);
pamer.append("query", '');
inputOutputFields(pamer).then(res=>{
console.log('字段',res);
this.fieldsList2=res;
})
},
//删除字段
deleteFields(){
this.tableData=[];
},
//删除字段
deleteFieldsUpdate(){
this.tableDataUpdate=[];
}
}
})
</script>
\ No newline at end of file
src/views/trans-dialog/column-choose.vue 0 → 100644
<template>
<div>
<el-dialog
title="字段选择"
:visible.sync="columnVisible"
width="800px"
:before-close="handleClose"
top="10%"
>
<el-form :model="myForm" label-width="200px">
<el-form-item label="步骤名称:">
<el-input v-model="myForm.label"></el-input>
</el-form-item>
<el-tabs v-model="activeName" type="border-card">
<!-- <el-tab-pane label="基本配置" name="content">
<database-choose ref="databaseChoose" :form.sync="insertOrUpdateForm" @fatherFun="fatherFun" :getXmlVal="getXmlVal" :graph="newGraph"></database-choose>
<el-form-item label="提交记录数量:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="insertOrUpdateForm.commit"></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="insertOrUpdateForm.update_bypassed" true-label='Y' false-label="N"></el-checkbox>
</el-col>
</el-row>
</el-form-item>
</el-tab-pane> -->
<el-tab-pane label="选择和修改" name="first">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClick(true)">新增字段</el-button>
<!-- <el-button style="padding: 3px 0" type="text">删除字段</el-button> -->
<el-button style="padding: 3px 0" type="text" @click="getFields(0)">获取字段</el-button>
<el-button style="padding: 3px 0" type="text" @click="deleteFields">删除全部</el-button>
</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> -->
<table-list ref="tableDia" :tableHead="tableHead" :tableData="tableData" :field.sync="editDia" :fieldClick="fieldClick"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="编辑"
:visible.sync="field"
width="500px"
:before-close="handleCloseEdit"
append-to-body>
<el-form ref="form" :model="fieldForm" label-width="80px">
<el-form-item label="字段名称:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldForm.name"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="改名成:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldForm.rename"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="长度:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldForm.length"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="精度:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldForm.precision"></el-input>
</el-col>
</el-row>
</el-form-item>
<!-- <el-form-item label="表字段:">
<el-select v-model="fieldForm.keyLookup" style="width: 100%" @focus="tableFields">
<el-option v-for="(item,index) in fieldsList1" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="比较符:">
<el-select v-model="fieldForm.keyCondition" style="width: 100%">
<el-option v-for="(item,index) in keyConditionList" :key="index" :label="item.text" :value="item.value"></el-option>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="流里的字段1:">
<el-select v-model="fieldForm.keyStream1" style="width: 100%" @focus="inputOutputFields">
<el-option v-for="(item,index) in fieldsList2" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="流里的字段2:">
<el-select v-model="fieldForm.keyStream2" style="width: 100%" @focus="inputOutputFields">
<el-option v-for="(item,index) in fieldsList2" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item> -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="field = false">取 消</el-button>
<el-button type="primary" @click="addField">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
<el-tab-pane label="移除" name="second ">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClickRemove">新增字段</el-button>
<!-- <el-button style="padding: 3px 0" type="text">删除字段</el-button> -->
<el-button style="padding: 3px 0" type="text" @click="getFields(1)">获取字段</el-button>
<el-button style="padding: 3px 0" type="text" @click="deleteFieldsUpdate">删除全部</el-button>
<!-- <el-button style="padding: 3px 0" type="text">编辑映射</el-button> -->
</div>
<table-list :tableHead="tableHeadRemove" :tableData="tableDataRemove" :field.sync="editDiaUpdate" :fieldClick="fieldClickRemove"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="fieldRemove"
width="500px"
:before-close="handleCloseEditRemove"
append-to-body>
<el-form ref="form" :model="fieldFormRemove" label-width="80px">
<el-form-item label="字段名称:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldFormRemove.name"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="Update = false">取 消</el-button>
<el-button type="primary" @click="addFieldRemove">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
<el-tab-pane label="元数据" name="oher ">
<el-card class="box-card" style="margin-top:15px;">
<div slot="header" class="clearfix">
<el-button style="padding: 3px 0" type="text" @click="fieldClickUpdate">新增字段</el-button>
<!-- <el-button style="padding: 3px 0" type="text">删除字段</el-button> -->
<!-- <el-button style="padding: 3px 0" type="text" @click="getFields(1)">获取和更新字段</el-button> -->
<el-button style="padding: 3px 0" type="text" @click="deleteFieldsUpdate">删除全部</el-button>
<!-- <el-button style="padding: 3px 0" type="text">编辑映射</el-button> -->
</div>
<table-list :tableHead="tableHeadUpdate" :tableData="tableDataUpdate" :field.sync="editDiaUpdate" :fieldClick="fieldClickUpdate"></table-list>
<!-- 编辑弹窗开始=========== -->
<el-dialog
title="新增/编辑"
:visible.sync="fieldUpdate"
width="800px"
:before-close="handleCloseEditUpdate"
append-to-body>
<el-form ref="form" :model="fieldFormUpdate" label-width="200px">
<el-form-item label="字段名称:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldFormUpdate.name"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="改名成:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldFormUpdate.rename"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="类型:" >
<el-row :gutter="10">
<el-col :span="23">
<el-select v-model="fieldFormUpdate.type" style="width: 100%" @focus="getValueMetaStore">
<el-option v-for="(item,index) in metaStoreList" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="长度:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldFormUpdate.length"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="精度:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldFormUpdate.precision"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="Binary to Normal:">
<el-select v-model="fieldFormUpdate.storage_type" style="width: 100%" @focus="tableFields">
<el-option label="是" value="Y"></el-option>
<el-option label="否" value="N"></el-option>
</el-select>
</el-form-item>
<el-form-item label="格式:">
<el-select v-model="fieldFormUpdate.conversion_mask" style="width: 100%" @focus="tableFields">
<el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
<el-option label="yyyy/MM/dd HH:mm:ss" value="yyyy/MM/dd HH:mm:ss"></el-option>
<el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
<el-option label="yyyy/MM/dd" value="yyyy/MM/dd"></el-option>
<el-option label="yyyyMMdd" value="yyyyMMdd"></el-option>
<el-option label="yyyyMMddHHmmss" value="yyyyMMddHHmmss"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Date Format Lenient?:">
<el-select v-model="fieldFormUpdate.date_format_lenient" style="width: 100%" @focus="tableFields">
<el-option label="是" value="Y"></el-option>
<el-option label="否" value="N"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Date Locale:">
<el-select v-model="fieldFormUpdate.date_format_locale" style="width: 100%" @focus="tableFields">
<el-option label="不去除字符串首位空字符" value="none"></el-option>
<el-option label="去除字符串首部空字符" value="left"></el-option>
<el-option label="去除字符串尾部空字符" value="right"></el-option>
<el-option label="去除字符串首尾空字符" value="both"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Date Time Zone:">
<el-select v-model="fieldFormUpdate.date_format_timezone" style="width: 100%" @focus="tableFields">
<el-option label="不去除字符串首位空字符" value="none"></el-option>
<el-option label="去除字符串首部空字符" value="left"></el-option>
<el-option label="去除字符串尾部空字符" value="right"></el-option>
<el-option label="去除字符串首尾空字符" value="both"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Lenient number conversion?:">
<el-select v-model="fieldFormUpdate.lenient_string_to_number" style="width: 100%" @focus="tableFields">
<el-option label="是" value="Y"></el-option>
<el-option label="否" value="N"></el-option>
</el-select>
</el-form-item>
<el-form-item label="Encoding:">
<el-select v-model="fieldFormUpdate.encoding" style="width: 100%" @focus="tableFields">
<el-option label="不去除字符串首位空字符" value="none"></el-option>
<el-option label="去除字符串首部空字符" value="left"></el-option>
<el-option label="去除字符串尾部空字符" value="right"></el-option>
<el-option label="去除字符串首尾空字符" value="both"></el-option>
</el-select>
</el-form-item>
<el-form-item label="十进制:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldFormUpdate.decimal_symbol"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="作为参数的字段:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldFormUpdate.grouping_symbol"></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="作为参数的字段:">
<el-row :gutter="10">
<el-col :span="23">
<el-input v-model="fieldFormUpdate.currency_symbol"></el-input>
</el-col>
</el-row>
</el-form-item>
<!-- <el-form-item label="表字段:">
<el-select v-model="fieldFormUpdate.updateLookup" style="width: 100%" @focus="tableFields">
<el-option v-for="(item,index) in fieldsList1" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="流字段:">
<el-select v-model="fieldFormUpdate.updateStream" style="width: 100%" @focus="inputOutputFields">
<el-option v-for="(item,index) in fieldsList2" :key="index" :label="item.name" :value="item.name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="更新:">
<el-select v-model="fieldFormUpdate.update" style="width: 100%">
<el-option v-for="(item,index) in yesOrNoList" :key="index" :label="item.text" :value="item.value"></el-option>
</el-select>
</el-form-item> -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="Update = false">取 消</el-button>
<el-button type="primary" @click="addFieldUpdate">确 定</el-button>
</span>
</el-dialog>
<!-- 编辑弹窗结束============ -->
</el-card>
</el-tab-pane>
</el-tabs>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="InsertOrUpdateVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mxgraph from "@/utils/mxgraph";
const {
mxGraph,
mxUtils,
mxEvent,
mxKeyHandler,
mxRubberband,
mxConstants,
mxStencilRegistry,
mxStencil,
mxCodec,
mxGraphModel,
mxGeometry,
} = mxgraph
import {
tableFields,
inputOutputFields,
getValueMetaStore,
} from "@/api/kettle/file";//获取表输出
export default ({
data(){
return{
metaStoreList:[],//类型
myForm: {},//解决子组件改变父组件传递props属性报错
newGraph:{},
fieldsList1:[],
fieldsList2:[],
field:false,//编辑弹窗
editDia:false,//编辑表字段
fieldForm:{},//编辑弹窗
fieldUpdate:false,//更新弹窗
editDiaUpdate:false,//更新字段
fieldFormUpdate:{},//更新弹窗
fieldRemove:false,//更新弹窗
editDiaRemove:false,//更新字段
fieldFormRemove:{},//更新弹窗
stepName:{name:'插入/更新'},
// insertOrUpdateForm:{
// commit: "100",
// connection: "",
// schema: "test",
// table: "",
// searchFields: "[]",
// updateFields: "[]",
// update_bypassed: "N"
// },
activeName:'first',
// 查询字段--start------------
fieldsList:[],//字段获取
keyConditionList:[{value: '=', text: '='},
{value: '<>', text: '<>'},
{value: '<', text: '<'},
{value: '<=', text: '<='},
{value: '>', text: '>'},
{value: '>=', text: '>='},
{value: 'LIKE', text: 'LIKE'},
{value: 'BETWEEN', text: 'BETWEEN'},
{value: 'IS NULL', text: 'IS NULL'},
{value: 'IS NOT NULL', text: 'IS NOT NULL'}],
// 表头数据
tableHead:[
{
column_name: "name",column_comment:"字段名称"
},
{
column_name: "rename",column_comment:"改名成"
},
{
column_name: "length",column_comment:"长度"
},
{
column_name: "precision",column_comment:"精度"
}
],
// 表格数据
tableData: [
// {
// keyLookup: '3',
// keyCondition: '鞠婧祎',
// keyStream1: '女',
// keyStream2:'1',
// },
// {
// keyLookup: '3',
// keyCondition: '鞠婧祎',
// keyStream1: '女',
// keyStream2:'1',
// },
// {
// keyLookup: '3',
// keyCondition: '鞠婧祎',
// keyStream1: '女',
// keyStream2:'1',
// },
],
// 查询字段--end------------
// 更新字段start------------
// 表头数据
tableHeadUpdate:[
{
column_name: "name",column_comment:"字段名称"
},
{
column_name: "rename",column_comment:"改名成"
},
{
column_name: "type",column_comment:"类型"
},
{
column_name: "length",column_comment:"长度"
},
{
column_name: "precision",column_comment:"精度"
},
{
column_name: "storage_type",column_comment:"Binary to Normal"
},
{
column_name: "conversion_mask",column_comment:"格式"
},
{
column_name: "date_format_lenient",column_comment:"Date Format Lenient?"
},
{
column_name: "date_format_locale",column_comment:"Date Locale"
},
{
column_name: "date_format_timezone",column_comment:"Date Time Zone"
},
{
column_name: "lenient_string_to_number",column_comment:"Lenient number conversion?"
},
{
column_name: "decimal_symbol",column_comment:"十进制"
},
{
column_name: "grouping_symbol",column_comment:"分组"
},
{
column_name: "currency_symbol",column_comment:"货币"
},
],
// 表格数据
tableDataUpdate: [
// {
// updateLookup: '1',
// updateStream: '鞠婧祎1',
// update: '女',
// },
// {
// updateLookup: '2',
// updateStream: '鞠婧祎2',
// update: '女',
// },
// {
// updateLookup: '3',
// updateStream: '鞠婧祎3',
// update: '女',
// },
],
yesOrNoList:[{value: 'Y', text: '是'},
{value: 'N', text: '否'}],
// 更新字段end-------------------
tableHeadRemove:[
{
column_name: "name",column_comment:"字段名称"
},
],
// 表格数据
tableDataRemove: [
// {
// updateLookup: '1',
// updateStream: '鞠婧祎1',
// update: '女',
// },
// {
// updateLookup: '2',
// updateStream: '鞠婧祎2',
// update: '女',
// },
// {
// updateLookup: '3',
// updateStream: '鞠婧祎3',
// update: '女',
// },
],
}
},
// watch:{
// insertOrUpdateForm(n, o) {
// console.log("回显的表单数据===",n);
// if(n){
// var ny=JSON.parse(n.searchFields);
// var na=JSON.parse(n.updateFields);
// this.tableData=ny;
// this.tableDataUpdate=na;
// }
// },
// },
watch:{
// 解决子组件改变父组件传进来的变量的属性不报错start------
insertOrUpdateFormSend(val){
console.log("回显的表单数据===",val);
this.myForm=val;
if(val.searchFields){
var ny=JSON.parse(val.searchFields);
this.tableData=ny;
}
if(val.updateFields){
var na=JSON.parse(val.updateFields);
this.tableDataUpdate=na;
}
},
// 解决子组件改变父组件传进来的变量的属性不报错start------
},
props:["insertOrUpdateFormSend","columnVisible","doubleClickCell","getXmlVal","saveOutputDialog"],
// props:{
// InsertOrUpdateVisible:{
// type: Boolean,
// default:false
// },
// },
mounted(){
},
methods:{
clickFun(graph){
console.log(graph,'双击获取值')
this.newGraph = graph;
setTimeout(() => {
this.$refs.databaseChoose.clickFun(this.newGraph);
}, 500);
},
handleClose(){
this.$emit("update:columnVisible", false);
},
confirm(){
this.myForm.fields=JSON.stringify(this.tableData);//查询字段
this.myForm.remove=JSON.stringify(this.tableDataRemove);//更新字段
this.myForm.meta=JSON.stringify(this.tableDataUpdate);//更新字段
console.log('弹窗数据：===',this.myForm);
this.saveOutputDialog(this.myForm);
this.handleClose();//关闭弹窗
},
//新增或者编辑弹窗
fieldClick(state, val) {
this.field = !this.field;
this.dataState = state;
if (state) {
this.fieldForm = {};
} else {
this.fieldForm = val;
}
},
//关闭编辑的弹窗
handleCloseEdit(){
this.field = !this.field;
},
// 字段
addField() {
this.field = !this.field;
console.log('添加的字段===',this.fieldForm);
if (this.dataState) {
this.tableData.push(this.fieldForm);
}
},
//新增或者编辑弹窗-----更新start------------------
fieldClickUpdate(state, val) {
this.fieldUpdate = !this.fieldUpdate;
this.dataState = state;
if (state) {
this.fieldFormUpdate = {};
} else {
this.fieldFormUpdate = val;
}
},
//关闭编辑的弹窗
handleCloseEditUpdate(){
this.fieldUpdate = !this.fieldUpdate;
},
// 字段
addFieldUpdate() {
this.fieldUpdate = !this.fieldUpdate;
console.log('添加的字段===',this.fieldFormUpdate);
if (this.dataState) {
this.tableDataUpdate.push(this.fieldFormUpdate);
}
},
// -----更新end------------------
//新增或者编辑弹窗-----更新start------------------
fieldClickRemove(state, val) {
this.fieldRemove = !this.fieldRemove;
this.dataState = state;
if (state) {
this.fieldFormRemove = {};
} else {
this.fieldFormRemove = val;
}
},
//关闭编辑的弹窗
handleCloseEditRemove(){
this.fieldRemove = !this.fieldRemove;
},
// 字段
addFieldRemove() {
this.fieldRemove = !this.fieldRemove;
console.log('添加的字段===',this.fieldFormRemove);
if (this.dataState) {
this.tableDataRemove.push(this.fieldFormRemove);
}
},
// -----更新end------------------
//获取字段
getFields(num){
if(this.doubleClickCell){
// var title=this.doubleClickCell.title;
var title=this.doubleClickCell.value.attributes.label.value;
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
// pamer.append("graphXml", this.getXmlVal);
pamer.append("before", true);
pamer.append("query", '');
inputOutputFields(pamer).then(res=>{
console.log('字段',res);
// this.blankCanvas = res
this.fieldsList=res;
if(num==0){
var myarray=[]
this.fieldsList.forEach(e => {
var obj={};
obj.keyLookup=e.name;
obj.keyCondition="=";
obj.keyStream1=e.name;
obj.keyStream2='';
myarray.push(obj);
});
this.tableData=myarray;
}else if(num==1){
var myarray=[]
this.fieldsList.forEach(e => {
var obj={};
obj.updateLookup=e.name;
obj.updateStream=e.name;
obj.update='Y';
myarray.push(obj);
});
this.tableDataUpdate=myarray;
}
})
},
tableFields(){
if(this.doubleClickCell){
// var title=this.doubleClickCell.title;
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
// pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// pamer.append("before", true);
// pamer.append("query", '');
pamer.append("databaseName", this.myForm.connection);
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
// var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
var myXmlVal = mxUtils.getPrettyXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("schema", this.myForm.schema);
pamer.append("table", this.myForm.table);
pamer.append("query", '');
tableFields(pamer).then(res=>{
console.log('字段',res);
// this.blankCanvas = res
this.fieldsList1=res;
})
},
//获取表输出
inputOutputFields(){
if(this.doubleClickCell){
// var title=this.doubleClickCell.title
var title=this.doubleClickCell.value.attributes.label.value
}
console.log('获取cell888888===',this.doubleClickCell);
let pamer = new FormData(); // 创建form对象
pamer.append("stepName", encodeURIComponent(title));
// pamer.append("graphXml", this.getXmlVal);
// 画布xml转码
const codec = new mxCodec();
const encodedModel = codec.encode(this.newGraph.getModel());//xml对象
console.log("获取字段的画布详情：", encodedModel);
// var myXmlVal = mxUtils.getXml(encodedModel);//xml字符串
var myXmlVal = mxUtils.getPrettyXml(encodedModel);//xml字符串
pamer.append("graphXml", myXmlVal);
pamer.append("before", true);
pamer.append("query", '');
inputOutputFields(pamer).then(res=>{
console.log('字段',res);
this.fieldsList2=res;
})
},
//删除字段
deleteFields(){
this.tableData=[];
},
//删除字段
deleteFieldsUpdate(){
this.tableDataUpdate=[];
},
// 获取字段类型
getValueMetaStore(){
var formData = new FormData();
formData.append('query', '');
getValueMetaStore(formData).then(res=>{
if (res) {
console.log('字段类型==',res);
this.metaStoreList=res;
}else {
this.$message.error(res.errMsg)
}
})
},
}
})
</script>
\ No newline at end of file
src/views/watch/transform.vue
......@@ -418,8 +418,7 @@ export default {
//查看详情
checkDetail(row) {
      console.log('打开查看详情弹窗id不为为null');
this.pageLog.transId=row.id;
this.pageLog.transId=row.transId;
this.getKettleTransRecordList();// 分页获取转换执行日志记录列表
this.getSimpleList();//获取我添加的作业列表 搜索下拉框列表
this.dialogShow=true;     
......@@ -427,7 +426,6 @@ export default {
//获取转换下拉列表
getSimpleList(){
getList().then((res)=>{
console.log('获取转换日志下拉列表:',res);
if(res.success){
this.simpleList=res.data;
}
......
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