Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
E
ETL-admin
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
莫晓莉
ETL-admin
Commits
d6c7fb0a
Commit
d6c7fb0a
authored
May 12, 2021
by
莫晓莉
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
sql脚本,字段选择
parent
4240b4ee
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
3860 additions
and
9 deletions
+3860
-9
.env.development
+4
-4
src/views/dashboard-kettle/components/designer/mxgraphDesigner--change.vue
+2363
-0
src/views/dashboard-kettle/components/designer/mxgraphDesigner.vue
+59
-5
src/views/script-dialog/sql-script.vue
+639
-0
src/views/trans-dialog/column-choose.vue
+795
-0
No files found.
.env.development
View file @
d6c7fb0a
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://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/'
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/designer/mxgraphDesigner--change.vue
0 → 100644
View file @
d6c7fb0a
<
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
View file @
d6c7fb0a
...
...
@@ -901,14 +901,37 @@
<successDialog
ref=
"mySuccess"
:jobSuccessVisible
.
sync=
"jobSuccessVisible"
:saveOutputDialog=
"saveOutputDialog"
:successFormSend=
"outPutFormData14"
:doubleClickCell=
"doubleClickCell"
></successDialog>
<!-- 作业弹窗组件end------------------------------------->
<!--
转换
弹窗组件start333 ------------------------------>
<!--
流程
弹窗组件start333 ------------------------------>
<switchDialog
ref=
"switch"
:switchVisible
.
sync=
"switchVisible"
:saveOutputDialog=
"saveOutputDialog"
:doubleClickCell=
"doubleClickCell"
:switchFormSend=
"outPutFormData15"
></switchDialog>
<!-- 转换弹窗组件end33333------------------------------ -->
<!-- 流程弹窗组件end33333------------------------------ -->
<!-- 脚本弹窗组件start -->
<sqlScriptDialog
ref=
"script"
:scriptVisible
.
sync=
"scriptVisible"
:saveOutputDialog=
"saveOutputDialog"
:doubleClickCell=
"doubleClickCell"
:scriptFormSend=
"outPutFormData16"
></sqlScriptDialog>
<!-- 脚本弹窗组件end -->
<!-- 转换弹窗组件start -->
<columnChoose
ref=
"insertOrdate"
:columnVisible
.
sync=
"columnVisible"
:saveOutputDialog=
"saveOutputDialog"
:doubleClickCell=
"doubleClickCell"
:getXmlVal=
"getXmlVal"
:insertOrUpdateFormSend=
"outPutFormData2"
></columnChoose>
<!-- 转换弹窗组件end -->
<!-- 执行转换开始 -->
<trans-graph
...
...
@@ -930,6 +953,8 @@
<!-- 数据浏览-->
<el-dialog
title=
"数据浏览"
...
...
@@ -1004,9 +1029,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
{
...
...
@@ -1062,6 +1094,7 @@ export default {
// 转换33start---------
outPutFormData15
:{},
//转换--字段选择
// 转换3end------------
outPutFormData16
:{},
//脚本--执行sql脚本
doubleClickCell
:{},
getField
:[],
transGraphVisible
:
false
,
//执行转换弹窗
...
...
@@ -1099,6 +1132,10 @@ export default {
// 流程弹窗组件start----------
switchVisible
:
false
,
// 流程弹窗组件end------------
// 脚本组件start-----
scriptVisible
:
false
,
// 脚本组件end-----
columnVisible
:
true
,
//转换--字段选择
// 输入模块
file
:
[],
...
...
@@ -1189,9 +1226,17 @@ export default {
successDialog
,
homeworkDialog
,
// 作业弹簧组件end----------------------
//
转换
弹窗组件start---------
//
流程
弹窗组件start---------
switchDialog
,
// 转换弹窗组件end-----------
// 流程弹窗组件end-----------
// 脚本弹窗组件---
sqlScriptDialog
,
// 脚本弹窗组件---
// 转换弹窗组件start---
columnChoose
,
// 转换弹窗组件end-----
},
//自定义指令 https://www.jb51.net/article/108047.htm
directives
:
{
...
...
@@ -2064,7 +2109,16 @@ previousField(){
this
.
$refs
.
switch
.
clickFun
(
this
.
graph
);
//向子组件传递画布
},
500
);
return
;
}
else
if
((
this
.
curFileType
==
"transformation"
&&
cell
.
ids
==
"step45"
)
||
cell
.
value
.
attributes
.
ctype
.
value
==
"ExecSQL"
){
//流程--Switch / Case
this
.
scriptVisible
=
!
this
.
scriptVisible
;
this
.
outPutFormData16
=
this
.
showDataFunc
();
setTimeout
(()
=>
{
this
.
$refs
.
script
.
clickFun
(
this
.
graph
);
//向子组件传递画布
},
500
);
return
;
}
});
...
...
src/views/script-dialog/sql-script.vue
0 → 100644
View file @
d6c7fb0a
<
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
View file @
d6c7fb0a
<
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
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment