[Fix][UI] Fix datax task data instance replay error. (#11222)

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: {

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',

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,