setup()

in seatunnel-ui/src/views/task/synchronization-definition/dag/toolbar/task-setting-modal.tsx [36:110]
71 lines of code
3 McCabe index (conditional complexity)

  setup(props, ctx) {
    const { t } = useI18n()
    const { state, settingFormRef, handleValidate, settingInit } =
      useTaskSettingModal(ctx)

    const onCancelModel = () => {
      ctx.emit('cancelModal')
    }

    const onConfirmModel = () => {
      handleValidate()
    }

    watch(
      () => props.show,
      () => {
        props.show && settingInit()
      }
    )

    return () => (
      <Modal
        title={t('project.synchronization_definition.setting')}
        show={props.show}
        onCancel={onCancelModel}
        onConfirm={onConfirmModel}
        confirmLoading={state.saving}
      >
        <NSpin show={state.loading}>
          <NForm model={state.model} rules={state.rules} ref={settingFormRef}>
            <NFormItem
              label={t('project.synchronization_definition.task_name')}
              path='taskName'
            >
              <NInput
                v-model={[state.model.taskName, 'value']}
                placeholder={t(
                  'project.synchronization_definition.task_name_placeholder'
                )}
                clearable
              />
            </NFormItem>
            <NFormItem
              label={t('project.synchronization_definition.description')}
              path='description'
            >
              <NInput
                v-model={[state.model.description, 'value']}
                placeholder={t(
                  'project.synchronization_definition.description_placeholder'
                )}
                clearable
              />
            </NFormItem>
            <NFormItem
              label={t('project.synchronization_definition.engine')}
              path='engine'
            >
              <NSelect
                v-model={[state.model.engine, 'value']}
                options={[{ value: 'SeaTunnel', label: 'SeaTunnel' }]}
              />
            </NFormItem>
            {state.formStructure.length > 0 && (
              <DynamicFormItem
                model={state.model}
                formStructure={state.formStructure}
                name={state.formName}
              />
            )}
          </NForm>
        </NSpin>
      </Modal>
    )
  }