in seatunnel-ui/src/views/task/synchronization-definition/dag/node-model.tsx [59:139]
setup(props, { expose }) {
const { t } = useI18n()
const { state, onInit, onSwitchTable, onUpdatedCheckedRowKeys } =
useNodeModel(props.type, props.transformType, props.predecessorsNodeId, props.schemaError, props.currentNodeId, props.refForm)
expose({
getOutputSchema: () => ({
allTableData: state.allTableData,
outputTableData: state.outputTableData,
inputTableData: state.inputTableData
}),
getSelectFields: () => ({
tableFields: state.selectedKeys,
all: state.selectedKeys.length === state.inputTableData.length
}),
setSelectFields: (selectedKeys: string[]) =>
(state.selectedKeys = selectedKeys),
initData: (info: any) => {
onInit(info)
}
})
return () => (
<NGrid xGap={6}>
<NGridItem
span={6}
class={styles['list-container']}
>
<NSpace vertical>
<h3>{t('project.synchronization_definition.table_name')}</h3>
<dl v-show={state.tables.length}>
{state.tables.map((table) => (
<dd
class={
table === state.currentTable ? styles['dd-active'] : ''
}
onClick={() => void onSwitchTable(table)}
>
<NEllipsis>{table}</NEllipsis>
</dd>
))}
</dl>
{state.tables.length === 0 && <NEmpty />}
</NSpace>
</NGridItem>
<NGridItem span={props.type === 'sink' ? 18 : 9}>
<NSpace vertical>
<h3>
{t('project.synchronization_definition.input_table_structure')}
</h3>
<NDataTable
size='small'
row-class-name={styles['adjust-th-height']}
columns={state.inputColumns}
data={state.inputTableData}
onUpdateCheckedRowKeys={onUpdatedCheckedRowKeys}
rowKey={(row) => row.name}
checkedRowKeys={state.selectedKeys}
scrollX={state.inputTableWidth}
/>
</NSpace>
</NGridItem>
{
props.type !== 'sink' && <NGridItem span={9}>
<NSpace vertical>
<h3>
{t('project.synchronization_definition.output_table_structure')}
</h3>
<NDataTable
size='small'
row-class-name={styles['adjust-th-height']}
columns={state.outputColumns}
data={state.outputTableData}
scrollX={state.outputTableWidth}
/>
</NSpace>
</NGridItem>
}
</NGrid>
)
}