init
This commit is contained in:
Jane
9
src/views/dts/json-build-batch/busReader.js
Normal file
9
src/views/dts/json-build-batch/busReader.js
Normal file
@@ -0,0 +1,9 @@
|
||||
// 公共的组件，来做为中间传达的工具
|
||||
import Vue from 'vue'
|
||||
export default new Vue({
|
||||
data() {
|
||||
return {
|
||||
dataSourceId: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
9
src/views/dts/json-build-batch/busWriter.js
Normal file
9
src/views/dts/json-build-batch/busWriter.js
Normal file
@@ -0,0 +1,9 @@
|
||||
// 公共的组件，来做为中间传达的工具
|
||||
import Vue from 'vue'
|
||||
export default new Vue({
|
||||
data() {
|
||||
return {
|
||||
dataSourceId: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
76
src/views/dts/json-build-batch/components/tableMapper.vue
Normal file
76
src/views/dts/json-build-batch/components/tableMapper.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form label-position="left" label-width="80px" :model="readerForm">
|
||||
<el-form-item label="源端表">
|
||||
<el-checkbox
|
||||
v-model="readerForm.lcheckAll"
|
||||
:indeterminate="readerForm.isIndeterminate"
|
||||
@change="lHandleCheckAllChange"
|
||||
>全选</el-checkbox>
|
||||
<div style="margin: 15px 0;" />
|
||||
<el-checkbox-group v-model="readerForm.ltables" @change="lHandleCheckedChange">
|
||||
<el-checkbox v-for="c in fromTablesList" :key="c" :label="c">{{ c }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="目标表">
|
||||
<el-checkbox
|
||||
v-model="readerForm.rcheckAll"
|
||||
:indeterminate="readerForm.isIndeterminate"
|
||||
@change="rHandleCheckAllChange"
|
||||
>全选</el-checkbox>
|
||||
<div style="margin: 20px 0;" />
|
||||
<el-checkbox-group v-model="readerForm.rtables" @change="rHandleCheckedChange">
|
||||
<el-checkbox v-for="c in toTablesList" :key="c" :label="c">{{ c }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TableMapper',
|
||||
data() {
|
||||
return {
|
||||
mapperJson: {},
|
||||
fromTablesList: [],
|
||||
toTablesList: [],
|
||||
readerForm: {
|
||||
ltables: [],
|
||||
rtables: [],
|
||||
lcheckAll: false,
|
||||
rcheckAll: false,
|
||||
isIndeterminate: true
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
lHandleCheckAllChange(val) {
|
||||
this.readerForm.ltables = val ? this.fromTablesList : []
|
||||
this.readerForm.isIndeterminate = false
|
||||
},
|
||||
rHandleCheckAllChange(val) {
|
||||
this.readerForm.rtables = val ? this.toTablesList : []
|
||||
this.readerForm.isIndeterminate = false
|
||||
},
|
||||
lHandleCheckedChange(value) {
|
||||
const checkedCount = value.length
|
||||
this.readerForm.checkAll = checkedCount === this.fromTablesList.length
|
||||
this.readerForm.isIndeterminate = checkedCount > 0 && checkedCount < this.fromTablesList.length
|
||||
},
|
||||
rHandleCheckedChange(value) {
|
||||
const checkedCount = value.length
|
||||
this.readerForm.checkAll = checkedCount === this.toTablesList.length
|
||||
this.readerForm.isIndeterminate = checkedCount > 0 && checkedCount < this.toTablesList.length
|
||||
},
|
||||
getLTables() {
|
||||
return this.readerForm.ltables
|
||||
},
|
||||
getRTables() {
|
||||
return this.readerForm.rtables
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
250
src/views/dts/json-build-batch/index.vue
Normal file
250
src/views/dts/json-build-batch/index.vue
Normal file
@@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div class="build-container">
|
||||
<el-steps :active="active" finish-status="success">
|
||||
<el-step title="步骤 1" description="构建reader">1</el-step>
|
||||
<el-step title="步骤 2" description="构建writer">2</el-step>
|
||||
<el-step title="步骤 3" description="表映射">3</el-step>
|
||||
<el-step title="步骤 4" description="批量创建">4</el-step>
|
||||
</el-steps>
|
||||
|
||||
<div v-show="active===1" class="step1">
|
||||
<Reader ref="reader" />
|
||||
</div>
|
||||
<div v-show="active===2" class="step2">
|
||||
<Writer ref="writer" />
|
||||
</div>
|
||||
<div v-show="active===3" class="step3">
|
||||
<Mapper ref="mapper" />
|
||||
</div>
|
||||
<div v-show="active===4" class="step4">
|
||||
<el-button type="primary" @click="handleJobTemplateSelectDrawer">{{ jobTemplate ? jobTemplate : "1.选择模板" }}</el-button>
|
||||
<el-button type="primary" @click="createJob">2.批量创建任务</el-button>
|
||||
(步骤：选择模板->批量创建任务)
|
||||
<el-drawer
|
||||
ref="jobTemplateSelectDrawer"
|
||||
title="选择模板"
|
||||
:visible.sync="jobTemplateSelectDrawer"
|
||||
direction="rtl"
|
||||
size="50%"
|
||||
>
|
||||
<el-table
|
||||
v-loading="listLoading"
|
||||
:data="list"
|
||||
element-loading-text="Loading"
|
||||
border
|
||||
fit
|
||||
highlight-current-row
|
||||
destroy-on-close="true"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<el-table-column align="center" label="任务ID" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.id }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="任务描述" align="center">
|
||||
<template slot-scope="scope">{{ scope.row.jobDesc }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="所属项目" align="center">
|
||||
<template slot-scope="scope">{{ scope.row.jobProject }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Cron" align="center">
|
||||
<template slot-scope="scope"><span>{{ scope.row.jobCron }}</span></template>
|
||||
</el-table-column>
|
||||
<el-table-column label="路由策略" align="center">
|
||||
<template slot-scope="scope"> {{ routeStrategies.find(t => t.value === scope.row.executorRouteStrategy).label }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<pagination v-show="total>0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size" @pagination="fetchData" />
|
||||
</el-drawer>
|
||||
<div style="margin-bottom: 20px;" />
|
||||
</div>
|
||||
|
||||
<el-button :disabled="active===1" style="margin-top: 12px;" @click="last">上一步</el-button>
|
||||
<el-button v-show="active!==4" type="primary" style="margin-top: 12px;margin-bottom: 12px;" @click="next">下一步</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as jobTemplate from '@/api/dts/datax-job-template'
|
||||
import * as job from '@/api/dts/datax-job-info'
|
||||
import Pagination from '@/components/Pagination'
|
||||
import Reader from './reader'
|
||||
import Writer from './writer'
|
||||
import clip from '@/utils/clipboard'
|
||||
import Mapper from './mapper'
|
||||
|
||||
export default {
|
||||
name: 'JsonBuild',
|
||||
components: { Reader, Writer, Pagination, Mapper },
|
||||
data() {
|
||||
return {
|
||||
configJson: '',
|
||||
active: 1,
|
||||
jobTemplate: '',
|
||||
jobTemplateSelectDrawer: false,
|
||||
list: null,
|
||||
currentRow: null,
|
||||
listLoading: true,
|
||||
total: 0,
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
jobGroup: 0,
|
||||
triggerStatus: -1,
|
||||
jobDesc: '',
|
||||
executorHandler: '',
|
||||
userId: 0
|
||||
},
|
||||
blockStrategies: [
|
||||
{ value: 'SERIAL_EXECUTION', label: '单机串行' },
|
||||
{ value: 'DISCARD_LATER', label: '丢弃后续调度' },
|
||||
{ value: 'COVER_EARLY', label: '覆盖之前调度' }
|
||||
],
|
||||
routeStrategies: [
|
||||
{ value: 'FIRST', label: '第一个' },
|
||||
{ value: 'LAST', label: '最后一个' },
|
||||
{ value: 'ROUND', label: '轮询' },
|
||||
{ value: 'RANDOM', label: '随机' },
|
||||
{ value: 'CONSISTENT_HASH', label: '一致性HASH' },
|
||||
{ value: 'LEAST_FREQUENTLY_USED', label: '最不经常使用' },
|
||||
{ value: 'LEAST_RECENTLY_USED', label: '最近最久未使用' },
|
||||
{ value: 'FAILOVER', label: '故障转移' },
|
||||
{ value: 'BUSYOVER', label: '忙碌转移' }
|
||||
// { value: 'SHARDING_BROADCAST', label: '分片广播' }
|
||||
],
|
||||
triggerNextTimes: '',
|
||||
registerNode: [],
|
||||
jobJson: '',
|
||||
temp: {
|
||||
id: undefined,
|
||||
jobGroup: '',
|
||||
jobCron: '',
|
||||
jobDesc: '',
|
||||
executorRouteStrategy: '',
|
||||
executorBlockStrategy: '',
|
||||
childJobId: '',
|
||||
executorFailRetryCount: '',
|
||||
alarmEmail: '',
|
||||
executorTimeout: '',
|
||||
userId: 0,
|
||||
jobConfigId: '',
|
||||
executorHandler: 'executorJobHandler',
|
||||
glueType: 'BEAN',
|
||||
jobJson: '',
|
||||
executorParam: '',
|
||||
replaceParam: '',
|
||||
jvmParam: '',
|
||||
incStartTime: '',
|
||||
templateId: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.getJdbcDs()
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
const fromTableList = this.$refs.reader.getData().tables
|
||||
const toTableList = this.$refs.writer.getData().tables
|
||||
// const fromTableName = this.$refs.reader.getData().tableName
|
||||
// 第一步 reader 判断是否已选字段
|
||||
if (this.active === 1) {
|
||||
// 实现第一步骤读取的表和字段直接带到第二步骤
|
||||
// this.$refs.writer.sendTableNameAndColumns(fromTableName, fromColumnList)
|
||||
// 取子组件的数据
|
||||
// console.info(this.$refs.reader.getData())
|
||||
this.active++
|
||||
} else {
|
||||
// 将第一步和第二步得到的字段名字发送到第三步
|
||||
if (this.active === 2) {
|
||||
this.$refs.mapper.sendTables(fromTableList, toTableList)
|
||||
}
|
||||
if (this.active !== 4) {
|
||||
this.active++
|
||||
}
|
||||
}
|
||||
},
|
||||
last() {
|
||||
if (this.active > 1) {
|
||||
this.active--
|
||||
}
|
||||
},
|
||||
// Create job
|
||||
createJob() {
|
||||
const readerData = this.$refs.reader.getData()
|
||||
const writeData = this.$refs.writer.getData()
|
||||
const readerTables = this.$refs.mapper.getLTables()
|
||||
const writerTables = this.$refs.mapper.getRTables()
|
||||
const rdbmsReader = {
|
||||
readerSplitPk: readerData.splitPk
|
||||
}
|
||||
const rdbmsWriter = {}
|
||||
const obj = {
|
||||
readerDatasourceId: readerData.datasourceId,
|
||||
readerTables: readerTables,
|
||||
writerDatasourceId: writeData.datasourceId,
|
||||
writerTables: writerTables,
|
||||
rdbmsReader: rdbmsReader,
|
||||
rdbmsWriter: rdbmsWriter,
|
||||
templateId: this.temp.templateId
|
||||
}
|
||||
// 调api
|
||||
job.batchAddJob(obj).then(response => {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'Created Successfully',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
// 切回第一步
|
||||
this.active = 1
|
||||
})
|
||||
},
|
||||
handleCopy(text, event) {
|
||||
clip(this.configJson, event)
|
||||
this.$message({
|
||||
message: 'copy success',
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
handleJobTemplateSelectDrawer() {
|
||||
this.jobTemplateSelectDrawer = !this.jobTemplateSelectDrawer
|
||||
if (this.jobTemplateSelectDrawer) {
|
||||
this.fetchData()
|
||||
this.getExecutor()
|
||||
}
|
||||
},
|
||||
getReaderData() {
|
||||
return this.$refs.reader.getData()
|
||||
},
|
||||
getExecutor() {
|
||||
jobTemplate.getExecutorList().then(response => {
|
||||
const { content } = response
|
||||
this.executorList = content
|
||||
})
|
||||
},
|
||||
fetchData() {
|
||||
this.listLoading = true
|
||||
jobTemplate.getList(this.listQuery).then(response => {
|
||||
const { content } = response
|
||||
this.total = content.recordsTotal
|
||||
this.list = content.data
|
||||
this.listLoading = false
|
||||
})
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.temp = Object.assign({}, val)
|
||||
this.temp.id = undefined
|
||||
this.temp.jobDesc = this.getReaderData().tableName
|
||||
this.$refs.jobTemplateSelectDrawer.closeDrawer()
|
||||
this.jobTemplate = val.id + '(' + val.jobDesc + ')'
|
||||
this.temp.templateId = val.id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
24
src/views/dts/json-build-batch/mapper.vue
Normal file
24
src/views/dts/json-build-batch/mapper.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<TableMapper ref="mapper" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TableMapper from './components/tableMapper'
|
||||
export default {
|
||||
name: 'Mapper',
|
||||
components: { TableMapper },
|
||||
methods: {
|
||||
sendTables(fromTablesList, toTablesList) {
|
||||
this.$refs.mapper.fromTablesList = fromTablesList
|
||||
this.$refs.mapper.toTablesList = toTablesList
|
||||
},
|
||||
getLTables() {
|
||||
return this.$refs.mapper.getLTables()
|
||||
},
|
||||
getRTables() {
|
||||
return this.$refs.mapper.getRTables()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
27
src/views/dts/json-build-batch/reader.vue
Normal file
27
src/views/dts/json-build-batch/reader.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<TableReader ref="tablereader" @selectDataSource="showDataSource" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableReader from './reader/tableReader'
|
||||
export default {
|
||||
name: 'Reader',
|
||||
components: { TableReader },
|
||||
data() {
|
||||
return {
|
||||
dataSource: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
return this.$refs.tablereader.getData()
|
||||
},
|
||||
showDataSource(data) {
|
||||
this.dataSource = data
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
170
src/views/dts/json-build-batch/reader/tableReader.vue
Normal file
170
src/views/dts/json-build-batch/reader/tableReader.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form label-position="right" label-width="120px" :model="readerForm" :rules="rules">
|
||||
<el-form-item label="数据库源：" prop="datasourceId">
|
||||
<el-select v-model="readerForm.datasourceId" filterable style="width: 300px" @change="rDsChange">
|
||||
<el-option
|
||||
v-for="item in rDsList"
|
||||
:key="item.id"
|
||||
:label="item.datasourceName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="dataSource==='postgresql' || dataSource==='oracle' ||dataSource==='sqlserver' ||dataSource==='hana'" label="Schema：">
|
||||
<el-select v-model="readerForm.tableSchema" filterable style="width: 300px" @change="schemaChange">
|
||||
<el-option
|
||||
v-for="item in schemaList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="切分字段：">
|
||||
<el-input v-model="readerForm.splitPk" placeholder="切分主键" style="width: 13%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库表名：">
|
||||
<el-checkbox
|
||||
v-model="readerForm.checkAll"
|
||||
:indeterminate="readerForm.isIndeterminate"
|
||||
@change="rHandleCheckAllChange"
|
||||
>全选
|
||||
</el-checkbox>
|
||||
<div style="margin: 15px 0;" />
|
||||
<el-checkbox-group v-model="readerForm.tables" @change="rHandleCheckedChange">
|
||||
<el-checkbox v-for="c in rTbList" :key="c" :label="c">{{ c }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as dsQueryApi from '@/api/dts/metadata-query'
|
||||
import { list as jdbcDsList } from '@/api/dts/datax-jdbcDatasource'
|
||||
import Bus from '../busReader'
|
||||
|
||||
export default {
|
||||
name: 'TableReader',
|
||||
data() {
|
||||
return {
|
||||
jdbcDsQuery: {
|
||||
current: 1,
|
||||
size: 200,
|
||||
ascs: 'datasource_name'
|
||||
},
|
||||
rDsList: [],
|
||||
rTbList: [],
|
||||
schemaList: [],
|
||||
loading: false,
|
||||
active: 1,
|
||||
customFields: '',
|
||||
customType: '',
|
||||
customValue: '',
|
||||
dataSource: '',
|
||||
readerForm: {
|
||||
datasourceId: undefined,
|
||||
tables: [],
|
||||
checkAll: false,
|
||||
isIndeterminate: true,
|
||||
splitPk: '',
|
||||
tableSchema: ''
|
||||
},
|
||||
rules: {
|
||||
datasourceId: [{ required: true, message: 'this is required', trigger: 'change' }],
|
||||
tableName: [{ required: true, message: 'this is required', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'readerForm.datasourceId': function(oldVal, newVal) {
|
||||
if (this.dataSource === 'postgresql' || this.dataSource === 'oracle' || this.dataSource === 'sqlserver' || this.dataSource === 'hana') {
|
||||
this.getSchema()
|
||||
} else {
|
||||
this.getTables('reader')
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getJdbcDs()
|
||||
},
|
||||
methods: {
|
||||
// 获取可用数据源
|
||||
getJdbcDs() {
|
||||
this.loading = true
|
||||
jdbcDsList(this.jdbcDsQuery).then(response => {
|
||||
const { records } = response.data
|
||||
this.rDsList = records
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 获取表名
|
||||
getTables(type) {
|
||||
if (type === 'reader') {
|
||||
let obj = {}
|
||||
if (this.dataSource === 'postgresql' || this.dataSource === 'oracle' || this.dataSource === 'sqlserver' || this.dataSource === 'hana') {
|
||||
obj = {
|
||||
datasourceId: this.readerForm.datasourceId,
|
||||
tableSchema: this.readerForm.tableSchema
|
||||
}
|
||||
} else {
|
||||
obj = {
|
||||
datasourceId: this.readerForm.datasourceId
|
||||
}
|
||||
}
|
||||
// 组装
|
||||
dsQueryApi.getTables(obj).then(response => {
|
||||
if (response) {
|
||||
this.rTbList = response.data
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
getSchema() {
|
||||
const obj = {
|
||||
datasourceId: this.readerForm.datasourceId
|
||||
}
|
||||
dsQueryApi.getTableSchema(obj).then(response => {
|
||||
this.schemaList = response
|
||||
})
|
||||
},
|
||||
// schema 切换
|
||||
schemaChange(e) {
|
||||
this.readerForm.tableSchema = e
|
||||
// 获取可用表
|
||||
this.getTables('reader')
|
||||
},
|
||||
// reader 数据源切换
|
||||
rDsChange(e) {
|
||||
// 清空
|
||||
this.readerForm.tableName = ''
|
||||
this.readerForm.datasourceId = e
|
||||
this.rDsList.find((item) => {
|
||||
if (item.id === e) {
|
||||
this.dataSource = item.datasource
|
||||
}
|
||||
})
|
||||
Bus.dataSourceId = e
|
||||
this.$emit('selectDataSource', this.dataSource)
|
||||
// 获取可用表
|
||||
this.getTables('reader')
|
||||
},
|
||||
rHandleCheckAllChange(val) {
|
||||
this.readerForm.tables = val ? this.rTbList : []
|
||||
this.readerForm.isIndeterminate = false
|
||||
},
|
||||
rHandleCheckedChange(value) {
|
||||
const checkedCount = value.length
|
||||
this.readerForm.checkAll = checkedCount === this.rTbList.length
|
||||
this.readerForm.isIndeterminate = checkedCount > 0 && checkedCount < this.rTbList.length
|
||||
},
|
||||
getData() {
|
||||
if (Bus.dataSourceId) {
|
||||
this.readerForm.datasourceId = Bus.dataSourceId
|
||||
}
|
||||
return this.readerForm
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
38
src/views/dts/json-build-batch/writer.vue
Normal file
38
src/views/dts/json-build-batch/writer.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<TableWriter ref="tablewriter" @selectDataSource="showDataSource" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableWriter from './writer/tableWriter'
|
||||
|
||||
export default {
|
||||
name: 'Writer',
|
||||
components: { TableWriter },
|
||||
data() {
|
||||
return {
|
||||
dataSource: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
return this.$refs.tablewriter.getData()
|
||||
},
|
||||
getTableName() {
|
||||
return this.$refs.tablewriter.getTableName()
|
||||
},
|
||||
getReaderData() {
|
||||
return this.$parent.getReaderData()
|
||||
},
|
||||
showDataSource(data) {
|
||||
this.dataSource = data
|
||||
this.getData()
|
||||
},
|
||||
sendTableNameAndColumns(fromTableName, fromColumnList) {
|
||||
this.$refs.hivewriter.fromTableName = fromTableName
|
||||
this.$refs.hivewriter.fromColumnList = fromColumnList
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
181
src/views/dts/json-build-batch/writer/tableWriter.vue
Normal file
181
src/views/dts/json-build-batch/writer/tableWriter.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form label-position="right" label-width="150px" :model="writerForm" :rules="rules">
|
||||
<el-form-item label="数据库源：" prop="datasourceId">
|
||||
<el-select
|
||||
v-model="writerForm.datasourceId"
|
||||
filterable
|
||||
style="width: 300px;"
|
||||
@change="wDsChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in wDsList"
|
||||
:key="item.id"
|
||||
:label="item.datasourceName"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="dataSource==='postgresql' || dataSource==='oracle' ||dataSource==='sqlserver' ||dataSource==='hana'" label="Schema：">
|
||||
<el-select v-model="writerForm.tableSchema" filterable style="width: 300px" @change="schemaChange">
|
||||
<el-option
|
||||
v-for="item in schemaList"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div style="margin: 5px 0;" />
|
||||
<el-form-item label="数据库表名：">
|
||||
<el-checkbox v-model="writerForm.checkAll" :indeterminate="writerForm.isIndeterminate" @change="wHandleCheckAllChange">全选</el-checkbox>
|
||||
<div style="margin: 15px 0;" />
|
||||
<el-checkbox-group v-model="writerForm.tables" @change="wHandleCheckedChange">
|
||||
<el-checkbox v-for="c in wTbList" :key="c" :label="c">{{ c }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as dsQueryApi from '@/api/dts/metadata-query'
|
||||
import { list as jdbcDsList } from '@/api/dts/datax-jdbcDatasource'
|
||||
import Bus from '../busWriter'
|
||||
export default {
|
||||
name: 'TableWriter',
|
||||
data() {
|
||||
return {
|
||||
jdbcDsQuery: {
|
||||
current: 1,
|
||||
size: 200,
|
||||
ascs: 'datasource_name'
|
||||
},
|
||||
wDsList: [],
|
||||
schemaList: [],
|
||||
fromTableName: '',
|
||||
wTbList: [],
|
||||
dataSource: '',
|
||||
createTableName: '',
|
||||
writerForm: {
|
||||
datasourceId: undefined,
|
||||
tables: [],
|
||||
checkAll: false,
|
||||
isIndeterminate: true,
|
||||
tableSchema: ''
|
||||
},
|
||||
readerForm: this.getReaderData(),
|
||||
rules: {
|
||||
datasourceId: [{ required: true, message: 'this is required', trigger: 'change' }],
|
||||
tableName: [{ required: true, message: 'this is required', trigger: 'change' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'writerForm.datasourceId': function(oldVal, newVal) {
|
||||
if (this.dataSource === 'postgresql' || this.dataSource === 'oracle' || this.dataSource === 'sqlserver' || this.dataSource === 'hana') {
|
||||
this.getSchema()
|
||||
} else {
|
||||
this.getTables('writer')
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getJdbcDs()
|
||||
},
|
||||
methods: {
|
||||
// 获取可用数据源
|
||||
getJdbcDs() {
|
||||
this.loading = true
|
||||
jdbcDsList(this.jdbcDsQuery).then(response => {
|
||||
const { records } = response.data
|
||||
this.wDsList = records
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
// 获取表名
|
||||
getTables(type) {
|
||||
if (type === 'writer') {
|
||||
let obj = {}
|
||||
if (this.dataSource === 'postgresql' || this.dataSource === 'oracle' || this.dataSource === 'sqlserver' || this.dataSource === 'hana') {
|
||||
obj = {
|
||||
datasourceId: this.writerForm.datasourceId,
|
||||
tableSchema: this.writerForm.tableSchema
|
||||
}
|
||||
} else {
|
||||
obj = {
|
||||
datasourceId: this.writerForm.datasourceId
|
||||
}
|
||||
}
|
||||
// 组装
|
||||
dsQueryApi.getTables(obj).then(response => {
|
||||
this.wTbList = response.data
|
||||
})
|
||||
}
|
||||
},
|
||||
getSchema() {
|
||||
const obj = {
|
||||
datasourceId: this.writerForm.datasourceId
|
||||
}
|
||||
dsQueryApi.getTableSchema(obj).then(response => {
|
||||
this.schemaList = response
|
||||
})
|
||||
},
|
||||
// schema 切换
|
||||
schemaChange(e) {
|
||||
this.writerForm.tableSchema = e
|
||||
// 获取可用表
|
||||
this.getTables('writer')
|
||||
},
|
||||
wDsChange(e) {
|
||||
// 清空
|
||||
this.writerForm.tableName = ''
|
||||
this.writerForm.datasourceId = e
|
||||
this.wDsList.find((item) => {
|
||||
if (item.id === e) {
|
||||
this.dataSource = item.datasource
|
||||
}
|
||||
})
|
||||
Bus.dataSourceId = e
|
||||
this.$emit('selectDataSource', this.dataSource)
|
||||
// 获取可用表
|
||||
this.getTables()
|
||||
},
|
||||
wHandleCheckAllChange(val) {
|
||||
this.writerForm.tables = val ? this.wTbList : []
|
||||
this.writerForm.isIndeterminate = false
|
||||
},
|
||||
wHandleCheckedChange(value) {
|
||||
const checkedCount = value.length
|
||||
this.writerForm.checkAll = checkedCount === this.wTbList.length
|
||||
this.writerForm.isIndeterminate = checkedCount > 0 && checkedCount < this.wTbList.length
|
||||
},
|
||||
getData() {
|
||||
if (Bus.dataSourceId) {
|
||||
this.writerForm.datasourceId = Bus.dataSourceId
|
||||
}
|
||||
return this.writerForm
|
||||
},
|
||||
getReaderData() {
|
||||
return this.$parent.getReaderData()
|
||||
},
|
||||
getTableName() {
|
||||
return this.fromTableName
|
||||
},
|
||||
createTable() {
|
||||
const obj = {
|
||||
datasourceId: this.writerForm.datasourceId,
|
||||
tableName: this.createTableName
|
||||
}
|
||||
dsQueryApi.createTable(obj).then(response => {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'Create Table Successfully',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
}).catch(() => console.log('promise catch err'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user