setup()

in seatunnel-ui/src/views/virtual-tables/step-two-form.tsx [30:114]


  setup(props, { expose }) {
    const { t } = useI18n()
    const stepTwoFormRef = ref()

    const state = reactive({
      rules: {},
      formStructure: [] as StructureItem[],
      locales: {} as any,
      formName: 'step-two-form',
      detailForm: {} as { [key: string]: string },
      config: [] as { key: string; value: string; label: string }[]
    })

    const getFormItems = async (pluginName: string, datasourceName: string) => {
      if (!pluginName || !datasourceName) return false
      const result = await getDynamicConfig({
        pluginName,
        datasourceName
      })
      try {
        const res = JSON.parse(result)

        state.locales = res.locales
        Object.assign(state.detailForm, useFormField(res.forms))
        Object.assign(
          state.rules,
          useFormValidate(res.forms, state.detailForm, t)
        )
        state.formStructure = useFormStructure(
          res.apis ? useFormRequest(res.apis, res.forms) : res.forms
        ) as any

        state.formStructure = res.forms.map((item: any) => ({
          ...item,
          span: 8
        }))
        return true
      } catch (err) {
        return false
      }
    }

    const getValues = async () => {
      await stepTwoFormRef.value.validate()
      return state.formStructure.map((item) => {
        return {
          label: item.label,
          key: item.field,
          value: state.detailForm[item.field]
        }
      })
    }

    const setValues = (values: { [key: string]: string }) => {
      Object.assign(state.detailForm, values)
    }

    expose({
      validate: async () => {
        await stepTwoFormRef.value.validate()
      },
      getFormItems,
      getValues,
      setValues
    })

    return () => (
      <NForm
        rules={state.rules}
        ref={stepTwoFormRef}
        require-mark-placement='left'
        model={state.detailForm}
        labelWidth={100}
      >
        {state.formStructure.length > 0 && (
          <DynamicFormItem
            model={state.detailForm}
            formStructure={state.formStructure}
            name={state.formName}
            locales={state.locales}
          />
        )}
      </NForm>
    )
  }