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>
)
}