From 0141aa511b6077fca610d6964b4727bfabeda52a Mon Sep 17 00:00:00 2001 From: Amy0104 Date: Mon, 1 Aug 2022 14:56:19 +0800 Subject: [PATCH] [Fix][UI] Fix datax task data instance replay error. (#11222) --- .../components/node/fields/use-datasource.ts | 35 ++-- .../task/components/node/fields/use-datax.ts | 185 ++---------------- .../projects/workflow/definition/use-table.ts | 2 +- 3 files changed, 32 insertions(+), 190 deletions(-) diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-datasource.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-datasource.ts index 7d9b02a467..0c804dcba5 100644 --- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-datasource.ts +++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-datasource.ts @@ -15,7 +15,7 @@ * limitations under the License. */ -import { ref, onMounted, nextTick } from 'vue' +import { ref, onMounted, nextTick, Ref } from 'vue' import { useI18n } from 'vue-i18n' import { queryDataSourceList } from '@/service/modules/data-source' import { indexOf, find } from 'lodash' @@ -24,8 +24,12 @@ import type { TypeReq } from '@/service/modules/data-source/types' export function useDatasource( model: { [field: string]: any }, - supportedDatasourceType?: string[], - field?: string + params: { + supportedDatasourceType?: string[] + typeField?: string + sourceField?: string + span?: Ref | number + } = {} ): IJsonItem[] { const { t } = useI18n() @@ -91,8 +95,8 @@ export function useDatasource( if (item.disabled) { return false } - if (supportedDatasourceType) { - return indexOf(supportedDatasourceType, item.code) !== -1 + if (params.supportedDatasourceType) { + return indexOf(params.supportedDatasourceType, item.code) !== -1 } return true }) @@ -100,17 +104,18 @@ export function useDatasource( } const refreshOptions = async () => { - const params = { type: model.type } as TypeReq - const res = await queryDataSourceList(params) + const parameters = { type: model[params.typeField || 'type'] } as TypeReq + const res = await queryDataSourceList(parameters) datasourceOptions.value = res.map((item: any) => ({ label: item.name, value: item.id })) - if (!res.length && model.datasource) model.datasource = null - if (res.length && model.datasource) { - const item = find(res, { id: model.datasource }) + const sourceField = params.sourceField || 'datasource' + if (!res.length && model[sourceField]) model[sourceField] = null + if (res.length && model[sourceField]) { + const item = find(res, { id: model[sourceField] }) if (!item) { - model.datasource = null + model[sourceField] = null } } } @@ -127,8 +132,8 @@ export function useDatasource( return [ { type: 'select', - field: field ? field : 'type', - span: 12, + field: params.typeField || 'type', + span: params.span || 12, name: t('project.node.datasource_type'), props: { 'on-update:value': onChange @@ -141,8 +146,8 @@ export function useDatasource( }, { type: 'select', - field: field || 'datasource', - span: 12, + field: params.sourceField || 'datasource', + span: params.span || 12, name: t('project.node.datasource_instances'), options: datasourceOptions, validate: { diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-datax.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-datax.ts index 866b60f2cc..2176761e2f 100644 --- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-datax.ts +++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-datax.ts @@ -16,65 +16,11 @@ */ import { ref, onMounted, watch } from 'vue' import { useI18n } from 'vue-i18n' +import { useCustomParams, useDatasource } from '.' import type { IJsonItem } from '../types' -import { find } from 'lodash' -import { TypeReq } from '@/service/modules/data-source/types' -import { queryDataSourceList } from '@/service/modules/data-source' -import {useCustomParams} from "." export function useDataX(model: { [field: string]: any }): IJsonItem[] { const { t } = useI18n() - - const datasourceTypes = [ - { - id: 0, - code: 'MYSQL', - disabled: false - }, - { - id: 1, - code: 'POSTGRESQL', - disabled: false - }, - { - id: 2, - code: 'HIVE', - disabled: true - }, - { - id: 3, - code: 'SPARK', - disabled: true - }, - { - id: 4, - code: 'CLICKHOUSE', - disabled: false - }, - { - id: 5, - code: 'ORACLE', - disabled: false - }, - { - id: 6, - code: 'SQLSERVER', - disabled: false - }, - { - id: 7, - code: 'DB2', - disabled: true - }, - { - id: 8, - code: 'PRESTO', - disabled: true - } - ] - const datasourceTypeOptions = ref([] as any) - const datasourceOptions = ref([] as any) - const destinationDatasourceOptions = ref([] as any) const jobSpeedByteOptions: any[] = [ { label: `0(${t('project.node.unlimited')})`, @@ -149,53 +95,6 @@ export function useDataX(model: { [field: string]: any }): IJsonItem[] { value: 4 } ] - const loading = ref(false) - - const getDatasourceTypes = async () => { - if (loading.value) return - loading.value = true - datasourceTypeOptions.value = datasourceTypes - .filter((item) => !item.disabled) - .map((item) => ({ label: item.code, value: item.code })) - loading.value = false - } - - const getDatasourceInstances = async () => { - const params = { type: model.dsType } as TypeReq - const res = await queryDataSourceList(params) - datasourceOptions.value = [] - res.map((item: any) => { - datasourceOptions.value.push({ label: item.name, value: String(item.id) }) - }) - if (datasourceOptions.value && model.dataSource) { - const item = find(datasourceOptions.value, { - value: String(model.dataSource) - }) - if (!item) { - model.dataSource = null - } - } - } - - const getDestinationDatasourceInstances = async () => { - const params = { type: model.dtType } as TypeReq - const res = await queryDataSourceList(params) - destinationDatasourceOptions.value = [] - res.map((item: any) => { - destinationDatasourceOptions.value.push({ - label: item.name, - value: String(item.id) - }) - }) - if (destinationDatasourceOptions.value && model.dataTarget) { - const item = find(destinationDatasourceOptions.value, { - value: String(model.dataTarget) - }) - if (!item) { - model.dataTarget = null - } - } - } const sqlEditorSpan = ref(24) const jsonEditorSpan = ref(0) @@ -226,22 +125,8 @@ export function useDataX(model: { [field: string]: any }): IJsonItem[] { } onMounted(() => { - getDatasourceTypes() - getDatasourceInstances() - getDestinationDatasourceInstances() initConstants() }) - - const onSourceTypeChange = (type: string) => { - model.dsType = type - getDatasourceInstances() - } - - const onDestinationTypeChange = (type: string) => { - model.dtType = type - getDestinationDatasourceInstances() - } - watch( () => model.customConfig, () => { @@ -255,35 +140,11 @@ export function useDataX(model: { [field: string]: any }): IJsonItem[] { field: 'customConfig', name: t('project.node.datax_custom_template') }, - { - type: 'select', - field: 'dsType', - span: datasourceSpan, - name: t('project.node.datasource_type'), - props: { - loading: loading, - 'on-update:value': onSourceTypeChange - }, - options: datasourceTypeOptions, - validate: { - trigger: ['input', 'blur'], - required: true - } - }, - { - type: 'select', - field: 'dataSource', - span: datasourceSpan, - name: t('project.node.datasource_instances'), - props: { - loading: loading - }, - options: datasourceOptions, - validate: { - trigger: ['input', 'blur'], - required: true - } - }, + ...useDatasource(model, { + typeField: 'dsType', + sourceField: 'dataSource', + span: datasourceSpan + }), { type: 'editor', field: 'sql', @@ -306,35 +167,11 @@ export function useDataX(model: { [field: string]: any }): IJsonItem[] { message: t('project.node.sql_empty_tips') } }, - { - type: 'select', - field: 'dtType', - name: t('project.node.datax_target_datasource_type'), - span: destinationDatasourceSpan, - props: { - loading: loading, - 'on-update:value': onDestinationTypeChange - }, - options: datasourceTypeOptions, - validate: { - trigger: ['input', 'blur'], - required: true - } - }, - { - type: 'select', - field: 'dataTarget', - name: t('project.node.datax_target_database'), - span: destinationDatasourceSpan, - props: { - loading: loading - }, - options: destinationDatasourceOptions, - validate: { - trigger: ['input', 'blur'], - required: true - } - }, + ...useDatasource(model, { + typeField: 'dtType', + sourceField: 'dataTarget', + span: destinationDatasourceSpan + }), { type: 'input', field: 'targetTable', diff --git a/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts b/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts index 9510427b5e..0587646621 100644 --- a/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts +++ b/dolphinscheduler-ui/src/views/projects/workflow/definition/use-table.ts @@ -185,7 +185,7 @@ export function useTable() { { title: t('project.workflow.operation'), key: 'operation', - ...COLUMN_WIDTH_CONFIG['operation'](8.5), + ...COLUMN_WIDTH_CONFIG['operation'](10), render: (row) => h(TableAction, { row,