setup()

in seatunnel-ui/src/views/virtual-tables/step-two-table.tsx [53:175]


  setup(props, { emit }) {
    const { t } = useI18n()
    const inputRef = ref()
    const fieldTypeRef = ref()
    const onUpdateValue = (field: keyof any, value: any) => {
      emit('updateValue', field, value)
    }
    onMounted(() => {
      inputRef.value.focus()
    })
    return () => (
      <tr>
        <td>
          <NFormItem
            showLabel={false}
            feedback={
              props.row.fieldName ? '' : t('virtual_tables.field_name_tips')
            }
            validation-status={props.row.fieldName ? '' : 'error'}
          >
            <NInput
              autofocus
              value={props.row.fieldName}
              clearable
              onUpdateValue={(value) => void onUpdateValue('fieldName', value)}
              ref={inputRef}
            />
          </NFormItem>
        </td>
        <td>
          <NFormItem showLabel={false} v-show={props.row.isEdit}>
            <NSelect
              ref={fieldTypeRef}
              value={props.row.fieldType}
              options={props.fieldTypes.map((item) => ({
                label: item,
                value: item
              }))}
              filterable
              onUpdateValue={(value) => void onUpdateValue('fieldType', value)}
            />
          </NFormItem>
        </td>
        <td>
          <NFormItem showLabel={false}>
            <NSelect
              value={props.row.nullable as number}
              options={[
                { value: 1, label: t('virtual_tables.yes') },
                { value: 0, label: t('virtual_tables.no') }
              ]}
              onUpdateValue={(value) => void onUpdateValue('nullable', value)}
            />
          </NFormItem>
        </td>
        <td>
          <NFormItem showLabel={false}>
            <NSelect
              value={props.row.primaryKey as number}
              options={[
                { value: 1, label: t('virtual_tables.yes') },
                { value: 0, label: t('virtual_tables.no') }
              ]}
              onUpdateValue={(value) => void onUpdateValue('primaryKey', value)}
            />
          </NFormItem>
        </td>
        <td>
          <NFormItem showLabel={false}>
            <NInput
              value={props.row.fieldComment}
              clearable
              onUpdateValue={(value) =>
                void onUpdateValue('fieldComment', value)
              }
            />
          </NFormItem>
        </td>
        <td>
          <NFormItem showLabel={false}>
            <NInput
              value={props.row.defaultValue}
              clearable
              onUpdateValue={(value) =>
                void onUpdateValue('defaultValue', value)
              }
            />
          </NFormItem>
        </td>
        {!props.plain && (
          <td>
            <NFormItem showLabel={false}>
              <NSpace align='start'>
                <NButton
                  size='small'
                  onClick={() => void onUpdateValue('isEdit', false)}
                >
                  {t('virtual_tables.cancel')}
                </NButton>
                <NButton
                  type='primary'
                  size='small'
                  onClick={() => {
                    if (!props.row.fieldName) {
                      inputRef.value.focus()
                      return
                    }
                    if (!props.row.fieldType) {
                      fieldTypeRef.value.focus()
                      return
                    }
                    onUpdateValue('isEdit', false)
                  }}
                >
                  {t('virtual_tables.confirm')}
                </NButton>
              </NSpace>
            </NFormItem>
          </td>
        )}
      </tr>
    )
  }