setup()

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


  setup(props) {
    const { t } = useI18n()
    const listRef = toRef(props, 'list')
    return () => (
      <NTable striped class={styles['step-two-table']}>
        <thead>
          <th>
            <NText type='error'>*</NText>
            {t('virtual_tables.field_name')}
          </th>
          <th class={styles['table-cell-center']}>
            <NText type='error'>*</NText>
            {t('virtual_tables.field_type')}
          </th>
          <th class={styles['table-cell-center']}>
            <NText type='error'>*</NText>
            {t('virtual_tables.is_null')}
          </th>
          <th class={styles['table-cell-center']}>
            <NText type='error'>*</NText>
            {t('virtual_tables.is_primary_key')}
          </th>
          <th>{t('virtual_tables.description')}</th>
          <th>{t('virtual_tables.default_value')}</th>
          {!props.plain && <th>{t('virtual_tables.operation')}</th>}
        </thead>
        <tbody>
          {listRef.value.map((row, index) =>
            row.isEdit && !props.plain ? (
              <EditRow
                key={row.key}
                row={row}
                plain={props.plain}
                fieldTypes={props.fieldTypes}
                onUpdateValue={(
                  field: keyof any,
                  value: any
                ) => {
                  // @ts-ignore
                  listRef.value[index][field] = value
                }}
                class={styles[row.isEdit ? 'edit-row' : 'plain-row']}
              />
            ) : (
              <tr>
                <td>
                  <span>{row.fieldName}</span>
                </td>
                <td class={styles['table-cell-center']}>
                  <span>{row.fieldType}</span>
                </td>
                <td class={styles['table-cell-center']}>
                  <span>
                    {row.nullable
                      ? t('virtual_tables.yes')
                      : t('virtual_tables.no')}
                  </span>
                </td>
                <td class={styles['table-cell-center']}>
                  <span>
                    {row.primaryKey
                      ? t('virtual_tables.yes')
                      : t('virtual_tables.no')}
                  </span>
                </td>
                <td>
                  <span>{row.fieldComment}</span>
                </td>
                <td>
                  <span>{row.defaultValue}</span>
                </td>
                {!props.plain && (
                  <td>
                    <NSpace align='start'>
                      <NTooltip>
                        {{
                          trigger: () => (
                            <NButton
                              type='primary'
                              circle
                              size='small'
                              onClick={() => {
                                listRef.value[index]['isEdit'] = true
                              }}
                            >
                              <NIcon>
                                <EditOutlined />
                              </NIcon>
                            </NButton>
                          ),
                          default: () => t('virtual_tables.edit')
                        }}
                      </NTooltip>
                      <NTooltip>
                        {{
                          trigger: () => (
                            <NPopconfirm
                              onPositiveClick={() => {
                                listRef.value.splice(index, 1)
                              }}
                            >
                              {{
                                trigger: () => (
                                  <NButton type='error' circle size='small'>
                                    <NIcon>
                                      <DeleteOutlined />
                                    </NIcon>
                                  </NButton>
                                ),
                                default: () => t('virtual_tables.delete_confirm')
                              }}
                            </NPopconfirm>
                          ),
                          default: () => t('virtual_tables.delete')
                        }}
                      </NTooltip>
                    </NSpace>
                  </td>
                )}
              </tr>
            )
          )}
          <tr v-show={!listRef.value.length}>
            <td colspan={6}>
              <NEmpty />
            </td>
          </tr>
        </tbody>
      </NTable>
    )
  }