Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
B
bigDataSystem
Project
Project
Details
Activity
Releases
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
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
张伯涛
bigDataSystem
Commits
4f02a2a4
Commit
4f02a2a4
authored
Nov 27, 2024
by
罗林杰
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改数据库到数据库配置页面
parent
db2df508
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
492 additions
and
490 deletions
+492
-490
data.ts
src/views/realTimeSync/dataBaseToDataBase/data.ts
+56
-1
dataBaseData.ts
src/views/realTimeSync/dataBaseToDataBase/dataBaseData.ts
+156
-0
getMetadataModal.vue
...iews/realTimeSync/dataBaseToDataBase/getMetadataModal.vue
+114
-0
optionPage.vue
src/views/realTimeSync/dataBaseToDataBase/optionPage.vue
+166
-489
No files found.
src/views/realTimeSync/dataBaseToDataBase/data.ts
View file @
4f02a2a4
import
{
BasicColumn
,
FormSchema
}
from
"@/components/Table"
;
import
{
BasicColumn
,
FormSchema
}
from
'@/components/Table'
;
export
const
columns
:
BasicColumn
[]
=
[
{
...
...
@@ -268,3 +268,58 @@ export const mappingRuleConfigurationColumns: BasicColumn[] = [
slots
:
{
customRender
:
'executionSequence'
},
},
];
export
const
dataDirectionColumns
:
BasicColumn
[]
=
[
{
title
:
'源库'
,
dataIndex
:
'dataBaseSource'
,
width
:
120
,
},
{
title
:
'目标库'
,
dataIndex
:
'dataBaseDirection'
,
width
:
120
,
},
];
export
const
getMetadataColumns
:
BasicColumn
[]
=
[
{
title
:
'数据库'
,
dataIndex
:
'dataBase'
,
width
:
80
,
},
{
title
:
'表名'
,
dataIndex
:
'tableName'
,
width
:
120
,
},
];
export
const
tableDetailColumns
:
BasicColumn
[]
=
[
{
title
:
'列名'
,
dataIndex
:
'name'
,
width
:
80
,
},
{
title
:
'详情'
,
dataIndex
:
'detail'
,
width
:
120
,
},
];
export
const
tableDetailFormSchema
:
FormSchema
[]
=
[
{
field
:
'tableName'
,
label
:
''
,
component
:
'Select'
,
defaultValue
:
'1'
,
componentProps
:
{
showArrow
:
true
,
mode
:
'multiple'
,
options
:
[
{
label
:
'id'
,
value
:
'1'
},
{
label
:
'name'
,
value
:
'2'
},
{
label
:
'age'
,
value
:
'3'
},
{
label
:
'address'
,
value
:
'4'
},
],
},
colProps
:
{
lg
:
12
,
md
:
12
},
},
];
src/views/realTimeSync/dataBaseToDataBase/dataBaseData.ts
View file @
4f02a2a4
...
...
@@ -838,3 +838,159 @@ export const tableTreeData = [
sql
:
'SELECT * FROM supplier_info'
,
// 假设 supplier_info 表没有在 isCustomSQLTableList 中定义字段
},
];
export
const
dataDirectionData
:
any
[]
=
[
{
dataBaseSource
:
'0a5ca1a6fd364a05961918cd97b4241d_01'
,
children
:
[
{
dataBaseSource
:
'fbs 1 flashsyncA stable3.flashsync stable2'
,
dataBaseDirection
:
'fbs 1 flashsyncA stable3.flashsync stable2'
,
},
{
dataBaseSource
:
'fbs 1 flashsyncA stable3.flashsync stable2'
,
dataBaseDirection
:
'fbs 1 flashsyncA stable3.flashsync stable2'
,
},
{
dataBaseSource
:
'fbs 1 flashsyncA stable3.flashsync stable2'
,
dataBaseDirection
:
'fbs 1 flashsyncA stable3.flashsync stable2'
,
},
],
dataBaseDirection
:
'0a5ca1a6fd364a05961918cd97b4241d_01'
,
},
{
dataBaseSource
:
'0a5ca1a6fd364a05961918cd97b4241d_02'
,
children
:
[
{
dataBaseSource
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
dataBaseDirection
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
},
{
dataBaseSource
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
dataBaseDirection
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
},
{
dataBaseSource
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
dataBaseDirection
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
},
],
dataBaseDirection
:
'0a5ca1a6fd364a05961918cd97b4241d_02'
,
},
{
dataBaseSource
:
'0a5ca1a6fd364a05961918cd97b4241d_03'
,
children
:
[
{
dataBaseSource
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
dataBaseDirection
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
},
{
dataBaseSource
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
dataBaseDirection
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
},
{
dataBaseSource
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
dataBaseDirection
:
'fbs_1_flashsyncA_stable3.flashsync_stable2'
,
},
],
dataBaseDirection
:
'0a5ca1a6fd364a05961918cd97b4241d_03'
,
},
];
export
const
getMetadataTableList
=
[
{
dataBase
:
'bm_datasource1'
,
businessId
:
'12'
,
children
:
[
{
tableName
:
'bm_datasource'
,
businessId
:
'0'
,
},
{
tableName
:
'user_info'
,
businessId
:
'1'
,
},
{
tableName
:
'customer_details'
,
businessId
:
'2'
,
},
],
},
{
dataBase
:
'bm_datasource2'
,
businessId
:
'13'
,
children
:
[
{
tableName
:
'order_history'
,
businessId
:
'3'
,
},
{
tableName
:
'product_inventory'
,
businessId
:
'4'
,
},
{
tableName
:
'transaction_logs'
,
businessId
:
'5'
,
},
{
tableName
:
'employee_records'
,
businessId
:
'6'
,
},
],
},
{
dataBase
:
'bm_datasourc3'
,
businessId
:
'14'
,
children
:
[
{
tableName
:
'payment_details'
,
businessId
:
'7'
,
},
{
tableName
:
'shipping_addresses'
,
businessId
:
'8'
,
},
],
},
{
dataBase
:
'bm_datasource4'
,
businessId
:
'15'
,
children
:
[
{
tableName
:
'invoice_data'
,
businessId
:
'9'
,
},
{
tableName
:
'customer_feedback'
,
businessId
:
'10'
,
},
{
tableName
:
'supplier_info'
,
businessId
:
'11'
,
},
],
},
];
export
const
tableDetailData
=
[
{
name
:
'id'
,
detail
:
'INT(11,0)'
,
},
{
name
:
'name'
,
detail
:
'VARCHAR(255,0)'
,
},
{
name
:
'age'
,
detail
:
'INT(11,0)'
,
},
{
name
:
'gender'
,
detail
:
'VARCHAR(255,0)'
,
},
{
name
:
'address'
,
detail
:
'VARCHAR(255,0)'
,
},
{
name
:
'phone'
,
detail
:
'VARCHAR(255,0)'
,
},
];
src/views/realTimeSync/dataBaseToDataBase/getMetadataModal.vue
0 → 100644
View file @
4f02a2a4
<
template
>
<BasicModal
width=
"35%"
v-bind=
"$attrs"
@
register=
"registerModal"
title=
"获取元数据"
@
ok=
"handleSubmit"
>
<div
style=
"display: flex; justify-content: space-between"
>
<a-input-search
style=
"width: 220px"
/>
</div>
<BasicTable
@
register=
"registerTable"
/>
</BasicModal>
</
template
>
<
script
lang=
"ts"
setup
>
import
{
ref
}
from
'vue'
;
import
{
BasicTable
,
useTable
}
from
'@/components/Table'
;
import
{
BasicModal
,
useModalInner
}
from
'@/components/Modal'
;
import
{
getMetadataTableList
}
from
'./dataBaseData'
;
import
{
getMetadataColumns
}
from
'./data'
;
import
{
useMessage
}
from
'@/hooks/web/useMessage'
;
const
emit
=
defineEmits
([
'success'
,
'register'
]);
const
unfold
=
ref
(
false
);
let
startId
=
ref
();
const
{
createMessage
}
=
useMessage
();
let
endId
=
ref
();
let
getMetadataTable
=
ref
(
getMetadataTableList
);
const
[
registerTable
,
{
reload
,
getDataSource
,
getRowSelection
,
setSelectedRowKeys
}]
=
useTable
({
api
:
async
()
=>
{
const
response
=
{
pageNu
:
'1'
,
pageSize
:
'5'
,
pages
:
'1'
,
total
:
getMetadataTable
.
value
.
length
,
code
:
''
,
message
:
''
,
data
:
getMetadataTable
.
value
,
};
return
{
...
response
};
},
scroll
:
{
y
:
500
},
rowKey
:
'businessId'
,
rowSelection
:
true
,
columns
:
getMetadataColumns
,
showTableSetting
:
false
,
striped
:
false
,
showIndexColumn
:
false
,
bordered
:
false
,
});
//初始化弹框
const
[
registerModal
,
{
closeModal
}]
=
useModalInner
(
async
()
=>
{});
function
handleClick
()
{
unfold
.
value
=
!
unfold
.
value
;
}
/**确定按钮*/
async
function
handleSubmit
()
{
createMessage
.
success
(
'获取元数据成功'
);
closeModal
();
}
function
handleSelect
()
{
const
selectedRowKeys
=
getRowSelection
().
selectedRowKeys
;
const
ids
=
ref
([...
selectedRowKeys
]);
const
dataIds
=
ref
(
getDataSource
());
if
(
startId
.
value
&&
endId
.
value
)
{
for
(
let
i
=
startId
.
value
-
1
;
i
<=
endId
.
value
-
1
&&
i
<
getDataSource
().
length
;
i
++
)
{
const
businessId
=
dataIds
.
value
[
i
].
businessId
;
if
(
!
ids
.
value
.
includes
(
businessId
))
{
ids
.
value
.
push
(
businessId
);
}
}
}
setSelectedRowKeys
(
ids
.
value
);
}
function
handleResetInputs
()
{
const
selectedRowKeys
=
getRowSelection
().
selectedRowKeys
;
const
ids
=
ref
([...
selectedRowKeys
]);
const
dataIds
=
ref
(
getDataSource
());
if
(
startId
.
value
&&
endId
.
value
)
{
const
startIndex
=
startId
.
value
-
1
;
const
endIndex
=
endId
.
value
-
1
;
// 过滤掉与 i 相等的值
const
filteredIds
=
ids
.
value
.
filter
((
id
)
=>
{
for
(
let
i
=
startIndex
;
i
<=
endIndex
&&
i
<
getDataSource
().
length
;
i
++
)
{
if
(
dataIds
.
value
[
i
].
businessId
===
id
)
{
return
false
;
}
}
return
true
;
});
// // 清空 startId 和 endId
// startId.value = null;
// endId.value = null;
setSelectedRowKeys
(
filteredIds
);
}
}
</
script
>
<
style
scoped
lang=
"scss"
>
.getMetadataInput
{
width
:
120px
;
}
</
style
>
src/views/realTimeSync/dataBaseToDataBase/optionPage.vue
View file @
4f02a2a4
...
...
@@ -19,11 +19,7 @@
<div
class=
"buttonGroup"
>
<a-button
type=
"primary"
@
click=
"handleOperation"
>
跳转运维
</a-button>
<a-button
type=
"primary"
@
click=
"handleSave"
>
保存
</a-button>
<a-button
type=
"primary"
@
click=
"handleDebug"
>
调试
</a-button>
<a-button
type=
"primary"
@
click=
"handleRun"
>
运行
</a-button>
<a-button
type=
"primary"
@
click=
"handlePublish"
>
发布
</a-button>
<a-button
type=
"primary"
@
click=
"handleGobalDeply"
>
全局配置
</a-button>
<a-button
type=
"primary"
@
click=
"handleParameterConfiguration"
>
参数配置
</a-button>
<a-button
type=
"primary"
@
click=
"handleVersionManagement"
>
版本管理
</a-button>
</div>
</div>
...
...
@@ -83,92 +79,45 @@
<div
style=
"display: flex"
>
<BasicForm
@
register=
"registerSourceSideConfigurationForm"
style=
"width: 30%"
>
<
template
#
getMetadata
>
<a-button
@
click=
"handleGetMetadata"
type=
"primary"
>
获取元数据
</a-button>
<a-button
@
click=
"handleGetMetadata
('get')
"
type=
"primary"
>
获取元数据
</a-button>
</
template
>
</BasicForm>
<div
style=
"width: 20%; padding: 0 5px 5px"
>
<BasicTree
toolbar
search
v-if=
"!metadataAcquisitionModeFlag"
:checkable=
"true"
:actionList=
"actionList"
:treeData=
"tableTreeData"
v-model:checkedKeys=
"myCheckedKeys"
@
select=
"handleSelect"
>
<
template
#
headerTitle
>
表名
<a
v-if=
"myCheckedKeys.length > 0"
@
click=
"handleDeplys"
style=
"margin-left: 2px"
>
批量配置
</a
>
<a
v-else
style=
"color: grey; margin-left: 2px"
>
批量配置
</a>
</
template
>
</BasicTree>
<div
v-else
>
<div
style=
"display: flex; justify-content: space-between"
>
<strong>
自定义查询SQL
</strong>
<a-button
type=
"primary"
style=
"margin-right: 5px"
@
click=
"handleParsingSQL"
>
解析SQL
</a-button
>
</div>
<CodeEditor
v-model:value=
"sql"
style=
"height: 100%"
/>
</div>
</div>
<BasicForm
@
register=
"registerLoadingStrategyForm"
style=
"width: 50%"
>
<
template
#
quantityBasedAlert
>
<Alert
show-icon
style=
"font-size: 12px"
message=
"基于数量的加载策略,要求在进行数据加载时,源端的表不要发生数据变更,否则可能会出现数据加载异常。"
type=
"info"
/>
</
template
>
<
template
#
conditionBasedAlert
>
<
template
#
analysisAlter1
>
<Alert
show-icon
message=
"
基于条件的加载策略,要求选中的切分列的数据分布均匀,否则会出现数据倾斜,影响数据加载性能,其中切分的类型推荐使用数值型或时间类型,不支持字符串类型的字段作为切分列,否则也会丢数
。"
type=
"
info
"
message=
"
该模式需要在Oracle服务器上部署agent,并启动额外程序,详细请见操作手册
。"
type=
"
warning
"
style=
"font-size: 12px"
/>
</
template
>
<
template
#
isCustomSQLAlert
>
<
template
#
analysisAlter2
>
<Alert
show-icon
message=
"
自定义SQL模式下,只支持查询SQL,且无论是新增还是修改SQL都需要点击解析SQL对字段更新
。"
message=
"
该模式必须购买OGG License,且需要手动创建Xstream进程,详细请见操作手册
。"
type=
"warning"
style=
"font-size: 12px"
/>
</
template
>
<
template
#
parsingSQL
>
<a-button
type=
"primary"
@
click=
"handleParsingSQL"
>
解析SQL
</a-button>
</
template
>
<
template
#
isCustomSQLTable
>
<BasicTable
@
register=
"registerIsCustomSQLTable"
/>
</
template
>
<
template
#
isBatchCustomSQLTable
>
<BasicTable
@
register=
"registerIsBatchCustomSQLTable"
/>
</
template
>
<
template
#
notCustomSQLTable
>
<BasicTable
@
register=
"registerNotCustomSQLTable"
>
<template
#
bodyCell=
"
{ column, record }">
<template
v-if=
"column.key === 'action'"
>
<TableAction
:actions=
"[
{
label: '删除',
onClick: handleDelete.bind(null, record),
},
]"
/>
</
template
>
</template>
<
template
#
dataConversion=
"{ record }"
>
<Icon
icon=
"tdesign:edit-2"
@
click=
"handleConversion(record)"
/>
</
template
>
</BasicTable>
<
template
#
previewMetadata
>
<a-button
@
click=
"handleGetMetadata('preview')"
type=
"primary"
>
预览
</a-button>
</
template
>
</BasicForm>
<div
v-if=
"tableDetail"
style=
"width: 40%; padding: 0 5px 5px"
>
<div
class=
"title"
>
已获取元数据
</div>
<div
style=
"display: flex; justify-content: space-between"
>
<a-input-search
style=
"width: 220px"
/>
</div>
<BasicTable
@
register=
"registerDataSourceTable"
/>
</div>
<div
v-if=
"tableDetail"
style=
"width: 40%; padding: 0 5px 5px"
>
<div
class=
"title"
>
唯一键
</div>
<Alert
show-icon
message=
"优先自动选择主键,用户修改请确保数据唯一性。"
type=
"info"
style=
"font-size: 12px"
/>
<BasicTable
@
register=
"registerTableDetailTable"
/>
</div>
</div>
</TabPane>
<TabPane
v-if=
"tabKey === '1'"
key=
"2"
tab=
"过滤规则"
>
...
...
@@ -262,337 +211,201 @@
<!-- </BasicTable>-->
</TabPane>
<TabPane
v-if=
"tabKey === '5'"
key=
"10"
tab=
"数据流向"
>
<Img
src=
"src/assets/images/dataDirection.png"
style=
"width: 1800px"
/>
<Img
src=
"src/assets/images/dataDirection.png"
style=
"width: 1800px"
/>
</TabPane>
<TabPane
v-if=
"tabKey === '5'"
key=
"11"
tab=
"表映射关系"
>
<!-- <BasicTable>-->
<!-- </BasicTable>-->
<!-- <BasicTable>-->
<!-- </BasicTable>-->
<BasicTable
@
register=
"registerDataDirectionTable"
/>
</TabPane>
</Tabs>
</div>
<GetMetadataModal
@
register=
"registerGetMetadataModal"
/>
<DeplysModal
@
register=
"registerDeplysModal"
/>
<AddDataConversionRuleModal
@
register=
"registerAddRuleModal"
/>
<DataOptionsModal
@
register=
"registerDataOptionsModal"
/>
<GlobalOptionsModal
@
register=
"registerGlobalOptionsModal"
/>
<SaveModal
@
register=
"registerSaveModal"
/>
<VersionManageModal
@
register=
"registerVersionManageModal"
/>
<RunOptionsModal
@
register=
"registerRunOptionsModal"
/>
</PageWrapper>
</template>
<
script
lang=
"ts"
setup
>
import
{
Tabs
,
TabPane
,
Alert
,
Modal
}
from
'ant-design-vue'
;
import
{
h
,
ref
,
onMounted
}
from
'vue'
;
import
{
BasicTree
}
from
'@/components/Tree'
;
import
{
ref
,
onMounted
}
from
'vue'
;
import
{
BasicForm
,
FormSchema
,
useForm
}
from
'@/components/Form'
;
import
{
isCustomSQLColumns
,
notCustomSQLColumns
,
mappingRuleConfigurationColumns
}
from
'./data'
;
import
{
mappingRuleConfigurationColumns
,
dataDirectionColumns
,
getMetadataColumns
,
tableDetailColumns
,
tableDetailFormSchema
,
}
from
'./data'
;
import
Icon
from
'@/components/Icon/Icon.vue'
;
import
{
useMessage
}
from
'@/hooks/web/useMessage'
;
import
{
PageWrapper
}
from
'@/components/Page'
;
import
{
useRoute
}
from
'vue-router'
;
import
{
isCustomSQLTableList
,
isBatchCustomSQLTableList
,
notCustomSQLTableList
,
mappingRuleConfigurationTableList
,
tableTreeData
,
dataDirectionData
,
getMetadataTableList
,
tableDetailData
,
}
from
'./dataBaseData'
;
import
{
router
}
from
'@/router'
;
import
{
DeleteOutlined
}
from
'@ant-design/icons-vue'
;
import
{
BasicTable
,
useTable
,
TableAction
}
from
'@/components/Table'
;
import
{
useModal
}
from
'@/components/Modal'
;
import
GetMetadataModal
from
'@/views/dataIntegration/dataLoading/dataEntryLake/getMetadataModal.vue'
;
import
DeplysModal
from
'@/views/dataIntegration/dataLoading/dataEntryLake/DeplysModal.vue'
;
import
CodeEditor
from
'@/components/CodeEditor/src/CodeEditor.vue'
;
import
GetMetadataModal
from
'./getMetadataModal.vue'
;
import
AddDataConversionRuleModal
from
'@/views/dataIntegration/dataLoading/dataEntryLake/addDataConversionRuleModal.vue'
;
import
DataOptionsModal
from
'@/views/dataIntegration/dataLoading/dataEntryLake/dataOptionsModal.vue'
;
import
GlobalOptionsModal
from
'@/views/dataIntegration/dataLoading/dataEntryLake/globalOptionsModal.vue'
;
import
SaveModal
from
'@/views/dataIntegration/dataLoading/dataEntryLake/saveModal.vue'
;
import
VersionManageModal
from
'@/views/dataIntegration/dataLoading/dataEntryLake/versionManageModal.vue'
;
import
RunOptionsModal
from
'@/views/dataIntegration/dataLoading/dataEntryLake/runOptionsModal.vue'
;
const
emit
=
defineEmits
([
'success'
,
'register'
]);
const
{
createMessage
,
createConfirm
}
=
useMessage
();
const
route
=
useRoute
();
const
myCheckedKeys
=
ref
([]);
let
isCustomSQLTable
=
ref
(
isCustomSQLTableList
);
let
isBatchCustomSQLTable
=
ref
(
isBatchCustomSQLTableList
);
let
notCustomSQLTable
=
ref
(
notCustomSQLTableList
);
let
mappingRuleConfigurationTable
=
ref
(
mappingRuleConfigurationTableList
);
let
sql
=
ref
(
'SELECT * FROM user_info,customer_details,order_history,product_inventory'
);
let
metadataAcquisitionModeFlag
=
ref
();
let
customSQLFlag
=
ref
();
let
isParsingSQL
=
ref
(
false
);
let
loadType
=
ref
(
'全量数据加载'
);
const
selectKey
=
ref
(
'0'
);
const
tabKey
=
ref
(
'1'
);
let
getMetadataTable
=
ref
(
getMetadataTableList
);
const
tableDetail
=
ref
(
false
);
const
sourceSideConfigurationFormSchema
:
FormSchema
[]
=
[
{
field
:
'loadType'
,
label
:
'加载方式'
,
component
:
'RadioGroup'
,
defaultValue
:
'全量数据加载'
,
componentProps
:
({
formModel
})
=>
({
onChange
:
()
=>
{
loadType
.
value
=
formModel
.
loadType
;
},
options
:
[
{
label
:
'全量数据加载'
,
value
:
'全量数据加载'
},
{
label
:
'增量数据加载'
,
value
:
'增量数据加载'
},
],
}),
},
{
field
:
'metadataAcquisitionMode'
,
label
:
'元数据获取方式'
,
component
:
'RadioGroup'
,
defaultValue
:
'从JDBC获取元数据'
,
componentProps
:
({
formModel
,
formActionType
})
=>
({
onChange
:
()
=>
{
isParsingSQL
.
value
=
false
;
metadataAcquisitionModeFlag
.
value
=
formModel
.
metadataAcquisitionMode
===
'自定义SQL'
;
const
flag
=
!
metadataAcquisitionModeFlag
.
value
;
updateSchema
([{
field
:
'filterCondition'
,
ifShow
:
flag
&&
customSQLFlag
.
value
}]);
updateSchema
([{
field
:
'notCustomSQLTable'
,
ifShow
:
flag
&&
customSQLFlag
.
value
}]);
updateSchema
([{
field
:
'customSQL'
,
ifShow
:
flag
}]);
updateSchema
([{
field
:
'querySQL'
,
ifShow
:
flag
&&
!
customSQLFlag
.
value
}]);
updateSchema
([{
field
:
'parsingSQL'
,
ifShow
:
flag
&&
!
customSQLFlag
.
value
}]);
updateSchema
([{
field
:
'isCustomSQLAlert'
,
ifShow
:
flag
&&
!
customSQLFlag
.
value
}]);
updateSchema
([
{
field
:
'isCustomSQLTable'
,
ifShow
:
flag
&&
!
customSQLFlag
.
value
&&
isParsingSQL
.
value
,
},
]);
updateSchema
([{
field
:
'sourceDataTableName'
,
ifShow
:
!
flag
}]);
updateSchema
([{
field
:
'isBatchCustomSQLTable'
,
ifShow
:
!
flag
&&
isParsingSQL
.
value
}]);
formActionType
.
updateSchema
([{
field
:
'dataBase'
,
ifShow
:
flag
}]);
formActionType
.
updateSchema
([{
field
:
'metadataType'
,
ifShow
:
flag
}]);
formActionType
.
updateSchema
([{
field
:
'getMetadata'
,
ifShow
:
flag
}]);
},
options
:
[
{
label
:
'从JDBC获取元数据'
,
value
:
'从JDBC获取元数据'
},
{
label
:
'自定义SQL'
,
value
:
'自定义SQL'
},
{
label
:
'导入元数据文件'
,
value
:
'导入元数据文件'
},
],
}),
},
{
field
:
'dataSource'
,
label
:
'数据源'
,
field
:
'sourceType'
,
label
:
'源端类型'
,
component
:
'Select'
,
required
:
true
,
defaultValue
:
'KunOB数据源'
,
componentProps
:
{
placeholder
:
'请选择
数据源
'
,
placeholder
:
'请选择
源端类型
'
,
options
:
[
{
label
:
'
KunOB数据源'
,
value
:
'KunOB数据源
'
},
{
label
:
'
MongoDB数据源'
,
value
:
'MongoDB数据源
'
},
{
label
:
'
AmazonS3'
,
value
:
'AmazonS
3'
},
{
label
:
'
MYSQL'
,
value
:
'1
'
},
{
label
:
'
ORACLE'
,
value
:
'2
'
},
{
label
:
'
KUNDB'
,
value
:
'
3'
},
],
},
},
{
field
:
'dataBase'
,
label
:
'数据库'
,
component
:
'Cascader'
,
required
:
true
,
field
:
'analysisType'
,
label
:
' '
,
component
:
'Select'
,
componentProps
:
{
placeholder
:
'请选择数据源'
,
displayRender
:
({
labels
})
=>
{
return
labels
[
labels
.
length
-
1
];
},
options
:
[
{
value
:
'数据库对象资源'
,
label
:
'数据库对象资源'
,
children
:
[
{
value
:
'数据中台工作区01'
,
label
:
'数据中台工作区01'
,
children
:
[
{
value
:
'ArgoDB_Dev01'
,
label
:
'ArgoDB_Dev01'
,
},
{
value
:
'ArgoDB_Dev02'
,
label
:
'ArgoDB_Dev02'
,
},
{
value
:
'GbaseDB_Dev01'
,
label
:
'GbaseDB_Dev01'
,
},
],
},
],
},
{
label
:
'本地解析'
,
value
:
'1'
},
{
label
:
'Xstream'
,
value
:
'2'
},
],
},
ifShow
:
({
model
})
=>
model
.
sourceType
===
'2'
,
},
{
field
:
'metadataType'
,
label
:
'元数据类型'
,
component
:
'Input'
,
required
:
true
,
componentProps
:
{
placeholder
:
'以,分隔输入元数据类型'
,
},
},
{
field
:
'getMetadata'
,
field
:
'version'
,
label
:
' '
,
slot
:
'getMetadata'
,
},
{
field
:
'maximumNumberOfDatabaseConnections'
,
label
:
'源库最大连接数'
,
component
:
'Input'
,
component
:
'Select'
,
componentProps
:
{
placeholder
:
'请输入源库最大连接数'
,
options
:
[
{
label
:
'高可用版本'
,
value
:
'1'
},
{
label
:
'分布式版本'
,
value
:
'2'
},
],
},
ifShow
:
({
model
})
=>
model
.
sourceType
===
'3'
,
},
];
const
LoadingStrategyFormSchema
:
FormSchema
[]
=
[
{
field
:
'loadingStrategy'
,
label
:
'加载策略'
,
component
:
'RadioGroup'
,
defaultValue
:
'基于数量'
,
componentProps
:
({
formModel
,
formActionType
})
=>
({
onChange
:
()
=>
{
const
flag
=
formModel
.
loadingStrategy
===
'基于数量'
;
formActionType
.
updateSchema
([{
field
:
'quantityBasedAlert'
,
ifShow
:
flag
}]);
formActionType
.
updateSchema
([{
field
:
'conditionBasedAlert'
,
ifShow
:
!
flag
}]);
formActionType
.
updateSchema
([{
field
:
'cutDivision'
,
ifShow
:
!
flag
}]);
},
options
:
[
{
label
:
'基于数量'
,
value
:
'基于数量'
},
{
label
:
'基于条件'
,
value
:
'基于条件'
},
],
}),
field
:
'analysisAlter1'
,
label
:
''
,
slot
:
'analysisAlter1'
,
ifShow
:
({
model
})
=>
model
.
sourceType
===
'2'
&&
model
.
analysisType
===
'1'
,
},
{
field
:
'quantityBasedAlert'
,
slot
:
'quantityBasedAlert'
,
field
:
'analysisAlter1'
,
label
:
''
,
slot
:
'analysisAlter1'
,
ifShow
:
({
model
})
=>
model
.
sourceType
===
'2'
&&
model
.
analysisType
===
'2'
,
},
{
field
:
'conditionBasedAlert'
,
slot
:
'conditionBasedAlert'
,
ifShow
:
false
,
field
:
'RpcIp1'
,
label
:
'Rpc地址'
,
component
:
'Input'
,
ifShow
:
({
model
})
=>
model
.
sourceType
===
'2'
&&
model
.
analysisType
===
'1'
,
},
{
field
:
'
cutDivision
'
,
label
:
'
切分列
'
,
field
:
'
RpcIp2
'
,
label
:
'
Rpc地址
'
,
component
:
'Input'
,
colProps
:
{
lg
:
11
,
md
:
11
},
componentProps
:
{
placeholder
:
''
,
},
ifShow
:
false
,
required
:
true
,
ifShow
:
({
model
})
=>
model
.
sourceType
===
'3'
&&
model
.
version
===
'2'
,
},
{
field
:
'divide'
,
component
:
'Divider'
,
field
:
'mysqlServer'
,
label
:
'MYSQL server'
,
component
:
'Input'
,
ifShow
:
({
model
})
=>
model
.
sourceType
===
'3'
&&
model
.
version
===
'1'
,
},
{
field
:
'customSQL'
,
label
:
'自定义SQL'
,
component
:
'RadioGroup'
,
defaultValue
:
'否'
,
field
:
'dataSource'
,
label
:
'数据源'
,
component
:
'Select'
,
required
:
true
,
componentProps
:
({
formModel
,
formActionType
})
=>
({
onChange
:
()
=>
{
isParsingSQL
.
value
=
false
;
customSQLFlag
.
value
=
formModel
.
customSQL
===
'否'
;
formActionType
.
updateSchema
([{
field
:
'filterCondition'
,
ifShow
:
customSQLFlag
.
value
}]);
formActionType
.
updateSchema
([
{
field
:
'notCustomSQLTable'
,
ifShow
:
customSQLFlag
.
value
},
]);
formActionType
.
updateSchema
([{
field
:
'querySQL'
,
ifShow
:
!
customSQLFlag
.
value
}]);
formActionType
.
updateSchema
([{
field
:
'parsingSQL'
,
ifShow
:
!
customSQLFlag
.
value
}]);
formActionType
.
updateSchema
([
{
field
:
'isCustomSQLAlert'
,
ifShow
:
!
customSQLFlag
.
value
},
]);
formActionType
.
updateSchema
([
{
field
:
'isCustomSQLTable'
,
ifShow
:
!
customSQLFlag
.
value
&&
isParsingSQL
.
value
},
]);
},
componentProps
:
{
placeholder
:
'请选择数据源'
,
options
:
[
{
label
:
'是'
,
value
:
'是'
},
{
label
:
'否'
,
value
:
'否'
},
{
label
:
'KunOB数据源'
,
value
:
'1'
},
{
label
:
'MongoDB数据源'
,
value
:
'2'
},
{
label
:
'AmazonS3'
,
value
:
'3'
},
],
}
)
,
},
},
{
field
:
'
filterCondition
'
,
label
:
'
过滤条件
'
,
component
:
'
InputTextArea
'
,
field
:
'
dataBase
'
,
label
:
'
数据库
'
,
component
:
'
Select
'
,
componentProps
:
{
placeholder
:
'请输入'
,
mode
:
'multiple'
,
placeholder
:
'请选择数据源'
,
options
:
[
{
label
:
'KunOBDB'
,
value
:
'1'
},
{
label
:
'MongoDB'
,
value
:
'2'
},
{
label
:
'AmazonS3DB'
,
value
:
'3'
},
],
},
},
{
field
:
'notCustomSQLTable'
,
slot
:
'notCustomSQLTable'
,
field
:
'xstreaName'
,
label
:
'xstream服务名称'
,
component
:
'Input'
,
ifShow
:
({
model
})
=>
model
.
sourceType
===
'2'
&&
model
.
analysisType
===
'2'
,
},
{
field
:
'querySQL'
,
label
:
'查询SQL'
,
component
:
'InputTextArea'
,
field
:
'loadType'
,
label
:
'数据表获取方式'
,
component
:
'RadioGroup'
,
defaultValue
:
'1'
,
componentProps
:
{
placeholder
:
'请输入'
,
options
:
[
{
label
:
'直接选表'
,
value
:
'1'
},
{
label
:
'规则过滤'
,
value
:
'2'
},
],
},
ifShow
:
false
,
},
{
field
:
'parsingSQL'
,
label
:
' '
,
slot
:
'parsingSQL'
,
ifShow
:
false
,
},
{
field
:
'isCustomSQLAlert'
,
slot
:
'isCustomSQLAlert'
,
ifShow
:
false
,
field
:
'include'
,
label
:
'包含'
,
component
:
'InputTextArea'
,
ifShow
:
({
model
})
=>
model
.
loadType
===
'2'
,
},
{
field
:
'isCustomSQLTable'
,
slot
:
'isCustomSQLTable'
,
ifShow
:
isParsingSQL
.
value
,
field
:
'exclude'
,
label
:
'排除'
,
component
:
'InputTextArea'
,
ifShow
:
({
model
})
=>
model
.
loadType
===
'2'
,
},
{
field
:
'sourceDataTableName'
,
label
:
'源端数据表名'
,
component
:
'Input'
,
colProps
:
{
lg
:
11
,
md
:
11
},
componentProps
:
{
placeholder
:
''
,
},
ifShow
:
false
,
field
:
'getMetadata'
,
label
:
' '
,
slot
:
'getMetadata'
,
ifShow
:
({
model
})
=>
model
.
loadType
===
'1'
,
},
{
field
:
'isBatchCustomSQLTable'
,
slot
:
'isBatchCustomSQLTable'
,
ifShow
:
isParsingSQL
.
value
,
field
:
'previewMetadata'
,
label
:
' '
,
slot
:
'previewMetadata'
,
ifShow
:
({
model
})
=>
model
.
loadType
===
'2'
,
},
];
const
[
registerGetMetadataModal
,
{
openModal
:
openGetMetadataModal
}]
=
useModal
();
const
[
registerDeplysModal
,
{
openModal
:
openDeplysModal
}]
=
useModal
();
const
[
registerAddRuleModal
,
{
openModal
:
openAddRuleModal
}]
=
useModal
();
const
[
registerDataOptionsModal
,
{
openModal
:
openDataOptionsModal
}]
=
useModal
();
const
[
registerGlobalOptionsModal
,
{
openModal
:
openGlobalOptionsModal
}]
=
useModal
();
const
[
registerSaveModal
,
{
openModal
:
openSaveModal
}]
=
useModal
();
const
[
registerVersionManageModal
,
{
openModal
:
openVersionManageModal
}]
=
useModal
();
const
[
registerRunOptionsModal
,
{
openModal
:
openRunOptionsModal
}]
=
useModal
();
const
[
registerSourceSideConfigurationForm
,
...
...
@@ -612,192 +425,103 @@
},
});
const
[
registerLoadingStrategyForm
,
{
updateSchema
,
setFieldsValue
}]
=
useForm
({
labelWidth
:
180
,
labelAlign
:
'left'
,
baseColProps
:
{
lg
:
24
,
md
:
24
},
schemas
:
LoadingStrategyFormSchema
,
showActionButtonGroup
:
false
,
actionColOptions
:
{
span
:
23
,
},
});
const
[
registerIsCustomSQLTable
,
{
reload
:
isCustomSQLTableReload
}]
=
useTable
({
const
[
registerMappingRuleConfigurationTable
,
{
getRowSelection
}]
=
useTable
({
api
:
async
()
=>
{
isCustomSQLTable
.
value
=
isCustomSQLTableList
.
filter
((
item
)
=>
{
return
item
.
ownershipTableId
[
0
]
===
selectKey
.
value
;
});
const
response
=
{
pageNu
:
'1'
,
pageSize
:
'5'
,
pages
:
'1'
,
total
:
isCustomSQL
Table
.
value
.
length
,
total
:
mappingRuleConfiguration
Table
.
value
.
length
,
code
:
''
,
message
:
''
,
data
:
isCustomSQL
Table
.
value
,
data
:
mappingRuleConfiguration
Table
.
value
,
};
return
{
...
response
};
},
scroll
:
{
y
:
300
},
rowKey
:
'businessId'
,
columns
:
isCustomSQL
Columns
,
columns
:
mappingRuleConfiguration
Columns
,
showTableSetting
:
false
,
showIndexColumn
:
false
,
rowSelection
:
true
,
bordered
:
false
,
actionColumn
:
{
width
:
100
,
title
:
'操作'
,
dataIndex
:
'action'
,
// slots: { customRender: 'action' },
},
});
const
[
registerIsBatchCustomSQLTable
]
=
useTable
({
api
:
async
()
=>
{
const
response
=
{
pageNu
:
'1'
,
pageSize
:
'5'
,
pages
:
'1'
,
total
:
isBatchCustomSQLTable
.
value
.
length
,
code
:
''
,
message
:
''
,
data
:
isBatchCustomSQLTable
.
value
,
};
return
{
...
response
};
},
scroll
:
{
y
:
300
},
rowKey
:
'businessId'
,
columns
:
isCustomSQLColumns
,
showTableSetting
:
false
,
const
[
registerDataDirectionTable
]
=
useTable
({
dataSource
:
dataDirectionData
,
columns
:
dataDirectionColumns
,
pagination
:
true
,
showIndexColumn
:
false
,
bordered
:
false
,
scroll
:
{
y
:
500
}
,
});
const
[
register
NotCustomSQLTable
,
{
reload
:
notCustomSQLTableReload
}
]
=
useTable
({
const
[
register
DataSourceTable
]
=
useTable
({
api
:
async
()
=>
{
notCustomSQLTable
.
value
=
notCustomSQLTableList
.
filter
(
(
item
)
=>
item
.
ownershipTableId
[
0
]
===
selectKey
.
value
,
);
const
response
=
{
pageNu
:
'1'
,
pageSize
:
'5'
,
pages
:
'1'
,
total
:
notCustomSQL
Table
.
value
.
length
,
total
:
getMetadata
Table
.
value
.
length
,
code
:
''
,
message
:
''
,
data
:
notCustomSQL
Table
.
value
,
data
:
getMetadata
Table
.
value
,
};
return
{
...
response
};
},
scroll
:
{
y
:
300
},
rowKey
:
'businessId'
,
columns
:
notCustomSQLColumns
,
rowSelection
:
true
,
columns
:
getMetadataColumns
,
showTableSetting
:
false
,
striped
:
false
,
showIndexColumn
:
false
,
bordered
:
false
,
handleSearchInfoFn
(
info
)
{
// console.log('handleSearchInfoFn', info);
return
info
;
},
actionColumn
:
{
width
:
60
,
title
:
'操作'
,
dataIndex
:
'action'
,
// slots: { customRender: 'action' },
},
});
const
[
registerMappingRuleConfigurationTable
,
{
getRowSelection
}]
=
useTable
({
const
[
registerTableDetailTable
]
=
useTable
({
api
:
async
()
=>
{
const
response
=
{
pageNu
:
'1'
,
pageSize
:
'5'
,
pages
:
'1'
,
total
:
mappingRuleConfigurationTable
.
value
.
length
,
total
:
tableDetailData
.
length
,
code
:
''
,
message
:
''
,
data
:
mappingRuleConfigurationTable
.
value
,
data
:
tableDetailData
,
};
return
{
...
response
};
},
formConfig
:
{
labelWidth
:
120
,
showActionButtonGroup
:
false
,
schemas
:
tableDetailFormSchema
,
},
useSearchForm
:
true
,
scroll
:
{
y
:
300
},
rowKey
:
'businessId'
,
columns
:
mappingRuleConfigurationColumns
,
columns
:
tableDetailColumns
,
showTableSetting
:
false
,
striped
:
false
,
showIndexColumn
:
false
,
rowSelection
:
true
,
bordered
:
false
,
actionColumn
:
{
width
:
100
,
title
:
'操作'
,
dataIndex
:
'action'
,
// slots: { customRender: 'action' },
},
});
const
actionList
=
[
{
//删除
render
:
()
=>
{
return
h
(
DeleteOutlined
,
{
class
:
'ml-2'
,
onClick
:
()
=>
{
handleDeleteTable
();
},
});
},
},
];
onMounted
(()
=>
{
setFieldsValue
({
sourceDataTableName
:
'user_info,customer_details,order_history,product_inventory'
,
});
});
// 删除节点
const
handleDeleteTable
=
()
=>
{
Modal
.
confirm
({
title
:
'确认删除'
,
content
:
'确定要删除此表吗?'
,
okText
:
'确认'
,
cancelText
:
'取消'
,
onOk
()
{
createMessage
.
success
(
'删除成功!'
);
},
onCancel
()
{
console
.
log
(
'取消删除'
);
createMessage
.
info
(
'取消删除'
);
},
});
};
function
handleGetMetadata
(
type
)
{
tableDetail
.
value
=
true
;
if
(
type
===
'get'
)
{
openGetMetadataModal
(
true
);
}
}
onMounted
(()
=>
{});
function
handleChangeTab
(
key
)
{
tabKey
.
value
=
key
;
}
function
handleDelete
()
{
Modal
.
confirm
({
title
:
'确认删除'
,
content
:
'确认删除选中字段吗?'
,
okText
:
'确认'
,
cancelText
:
'取消'
,
onOk
()
{
createMessage
.
success
(
'删除成功!'
);
},
onCancel
()
{
console
.
log
(
'取消删除'
);
createMessage
.
info
(
'取消删除'
);
},
});
}
function
handleSelect
(
keys
)
{
isParsingSQL
.
value
=
false
;
console
.
log
(
'keys'
,
getFieldsValue
());
selectKey
.
value
=
keys
.
toString
();
const
querySQL
=
tableTreeData
.
filter
((
item
)
=>
item
.
key
===
keys
.
toString
())[
0
].
sql
;
setFieldsValue
({
querySQL
:
querySQL
});
isCustomSQLTableReload
();
notCustomSQLTableReload
();
// emit('select', keys[0]);
}
function
goBack
()
{
router
.
back
();
}
...
...
@@ -824,45 +548,14 @@
});
}
function
handleDeplys
()
{
console
.
log
(
'myCheckedKeys'
,
myCheckedKeys
.
value
);
openDeplysModal
(
true
,
{
loadType
,
myCheckedKeys
,
});
}
function
handleGetMetadata
()
{
openGetMetadataModal
(
true
);
}
function
handleAddRule
()
{
openAddRuleModal
();
}
function
handleParameterConfiguration
()
{
openDataOptionsModal
(
true
,
{
title
:
'数据加载参数配置'
,
});
}
function
handleGobalDeply
()
{
openGlobalOptionsModal
(
true
,
{
title
:
'数据加载全局配置'
,
});
}
function
handleVersionManagement
()
{
openVersionManageModal
(
true
,
{
title
:
'数据加载版本管理'
,
});
}
function
handleRun
()
{
openRunOptionsModal
(
true
,
{
title
:
'参数列表'
,
});
}
function
handleConversion
(
record
)
{
createMessage
.
success
(
'数据转换成功'
+
record
.
fieldType
);
}
function
handleEdit
(
record
)
{
createMessage
.
success
(
'编辑:'
+
record
);
...
...
@@ -906,22 +599,6 @@
];
}
}
function
handleParsingSQL
()
{
isParsingSQL
.
value
=
true
;
updateSchema
([
{
field
:
'isCustomSQLTable'
,
ifShow
:
!
metadataAcquisitionModeFlag
.
value
&&
!
customSQLFlag
.
value
&&
isParsingSQL
.
value
,
},
]);
updateSchema
([
{
field
:
'isBatchCustomSQLTable'
,
ifShow
:
metadataAcquisitionModeFlag
.
value
&&
isParsingSQL
.
value
,
},
]);
}
</
script
>
<
style
lang=
"scss"
scoped
>
.content-padding
{
...
...
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