setup()

in seatunnel-ui/src/views/virtual-tables/list/index.tsx [39:117]


  setup() {
    const { t } = useI18n()
    const router = useRouter()
    const { state: sourceState } = useSource(true)
    const { columns } = useColumns(
      (id: string, type: 'edit' | 'delete') => {
        if (type === 'edit') {
          router.push({ name: 'virtual-tables-editor', params: { id: id } })
        } else {
          onDelete(id)
        }
      }
    )
    const {
      state,
      onSearch,
      onDelete,
      onPageChange,
      onPageSizeChange
    } = useTable()

    return () => (
      <NSpace vertical>
        <NCard title={t('virtual_tables.virtual_tables')}>
          {{
            'header-extra': () => <NSpace>
              <NSelect
                v-model:value={state.params.pluginName}
                clearable
                placeholder={t('virtual_tables.source_type_tips')}
                options={
                 sourceState.types as Array<SelectGroupOption | SelectOption>
                }
                class={styles['type-width']}
              />
              <NInput
                v-model:value={state.params.datasourceName}
                clearable
                placeholder={t('virtual_tables.source_name_tips')}
              />
              <NButton type='primary' onClick={onSearch}>
                {t('virtual_tables.search')}
              </NButton>
              <NButton
                onClick={() => {
                  router.push({ name: 'virtual-tables-create' })
                }}
                type='success'
              >
                {t('virtual_tables.create')}
              </NButton>
            </NSpace>
          }}
        </NCard>
        <NCard>
          <NSpace vertical>
            <NDataTable
              columns={columns.value}
              data={state.list}
              loading={state.loading}
              striped
            />
            <NSpace justify='center'>
              <NPagination
                v-model:page={state.page}
                v-model:page-size={state.pageSize}
                item-count={state.itemCount}
                show-size-picker
                page-sizes={[10, 30, 50]}
                show-quick-jumper
                on-update:page={onPageChange}
                on-update:page-size={onPageSizeChange}
              />
            </NSpace>
          </NSpace>
        </NCard>
      </NSpace>
    )
  }