setup()

in seatunnel-ui/src/views/task/synchronization-definition/dag/node-setting.tsx [49:132]
76 lines of code
4 McCabe index (conditional complexity)

  setup(props, ctx) {
    const { t } = useI18n()
    const {
      state,
      configurationFormRef,
      modelRef,
      onSave,
      handleTab,
      handleChangeTable
    } = useNodeSettingModal(props, ctx)

    const cancelModal = () => {
      state.tab = 'configuration'
      state.width = '60%'
      ctx.emit('cancelModal', props.show)
    }

    watch(
      () => props.show,
      async () => {
        await nextTick()

        if (props.show && configurationFormRef.value) {
          await configurationFormRef.value.setValues(props.nodeInfo)
        }
        if (props.show && modelRef.value) {
          modelRef.value.setSelectFields(
            props.nodeInfo.selectTableFields?.tableFields || []
          )
        }
      }
    )

    return () => (
      <NDrawer show={props.show} width={state.width} zIndex={1000}>
        <NDrawerContent>
          {{
            default: () => (
              <NTabs onUpdateValue={handleTab} value={state.tab}>
                <NTabPane
                  name='configuration'
                  tab={t('project.synchronization_definition.configuration')}
                  displayDirective='show'
                >
                  <ConfigurationForm
                    nodeType={props.nodeInfo.type}
                    nodeId={props.nodeInfo.pluginId}
                    transformType={props.nodeInfo.connectorType}
                    ref={configurationFormRef}
                    onTableNameChange={handleChangeTable}
                  />
                </NTabPane>
                <NTabPane
                  name='model'
                  tab={t('project.synchronization_definition.model')}
                  displayDirective='show'
                >
                  <NodeModeModal
                    ref={modelRef}
                    type={props.nodeInfo.type}
                    transformType={props.nodeInfo.connectorType}
                    predecessorsNodeId={props.nodeInfo.predecessorsNodeId}
                    currentNodeId={props.nodeInfo.pluginId}
                    schemaError={props.nodeInfo.schemaError}
                    refForm={configurationFormRef}
                  />
                </NTabPane>
              </NTabs>
            ),
            footer: () => (
              <NSpace>
                <NButton onClick={cancelModal}>
                  {t('project.synchronization_definition.cancel')}
                </NButton>
                <NButton onClick={onSave} type='primary'>
                  {t('project.synchronization_definition.confirm')}
                </NButton>
              </NSpace>
            )
          }}
        </NDrawerContent>
      </NDrawer>
    )
  }