[Feature][UI Next] Add switch,select and input-number to form (#8287)

dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts

@@ -20,14 +20,14 @@ import { NFormItem, NSpace, NButton, NIcon } from 'naive-ui'
 import { PlusCircleOutlined, DeleteOutlined } from '@vicons/antd'
 import getField from './get-field'
 import { formatValidate } from '../utils'
-import type { IFieldParams, IJsonItem, FormItemRule } from '../types'
+import type { IJsonItem, FormItemRule } from '../types'
 
-interface ICustomParameters extends Omit<IFieldParams, 'rules'> {
+export function renderCustomParameters(
-  rules?: { [key: string]: FormItemRule }[]
+  item: IJsonItem,
-}
+  fields: { [field: string]: any },
-
+  rules: { [key: string]: FormItemRule }[]
-export function renderCustomParameters(params: ICustomParameters) {
+) {
-  const { fields, field, children = [], rules = [] } = params
+  const { field, children = [] } = item
   let defaultValue: { [field: string]: any } = {}
   let ruleItem: { [key: string]: FormItemRule } = {}
   children.forEach((child) => {
@@ -77,7 +77,6 @@ export function renderCustomParameters(params: ICustomParameters) {
         onClick: () => {
           rules.push(ruleItem)
           fields[field].push({ ...defaultValue })
-          console.log(rules)
         }
       },
       () => h(NIcon, { size: 24 }, () => h(PlusCircleOutlined))

dolphinscheduler-ui-next/src/components/form/fields/get-field.ts

@@ -15,7 +15,8 @@
  * limitations under the License.
  */
 import * as Field from './index'
-import type { FormRules } from 'naive-ui'
+import { camelCase, upperFirst } from 'lodash'
+import type { FormRules, FormItemRule } from 'naive-ui'
 import type { IJsonItem } from '../types'
 
 const getField = (
@@ -23,39 +24,17 @@ const getField = (
   fields: { [field: string]: any },
   rules?: FormRules
 ) => {
-  const { type, props = {}, field, options, children } = item
+  const { type = 'input' } = item
+  const renderTypeName = `render${upperFirst(camelCase(type))}`
   // TODO Support other widgets later
-  if (type === 'radio') {
-    return Field.renderRadio({
-      field,
-      fields,
-      props,
-      options
-    })
-  }
-  if (type === 'editor') {
-    return Field.renderEditor({
-      field,
-      fields,
-      props
-    })
-  }
-
   if (type === 'custom-parameters') {
-    const params = {
+    let fieldRules: { [key: string]: FormItemRule }[] = []
-      field,
+    if (rules && !rules[item.field]) fieldRules = rules[item.field] = []
-      fields,
+    // @ts-ignore
-      children,
+    return Field[renderTypeName](item, fields, fieldRules)
-      props,
-      rules: []
-    }
-    if (rules) {
-      params.rules = rules[field] = []
-    }
-    return Field.renderCustomParameters(params)
   }
-
+  // @ts-ignore
-  return Field.renderInput({ field, fields, props })
+  return Field[renderTypeName](item, fields)
 }
 
 export default getField

dolphinscheduler-ui-next/src/components/form/fields/index.ts

@@ -19,3 +19,6 @@ export { renderInput } from './input'
 export { renderRadio } from './radio'
 export { renderEditor } from './monaco-editor'
 export { renderCustomParameters } from './custom-parameters'
+export { renderSwitch } from './switch'
+export { renderInputNumber } from './input-number'
+export { renderSelect } from './select'

dolphinscheduler-ui-next/src/components/form/fields/input-number.ts

@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { h } from 'vue'
+import { NInputNumber } from 'naive-ui'
+import type { IJsonItem } from '../types'
+
+export function renderInputNumber(
+  item: IJsonItem,
+  fields: { [field: string]: any }
+) {
+  const { props, field } = item
+
+  return h(NInputNumber, {
+    ...props,
+    value: fields[field],
+    onUpdateValue: (value) => void (fields[field] = value)
+  })
+}

dolphinscheduler-ui-next/src/components/form/fields/input.ts

@@ -17,10 +17,10 @@
 
 import { h } from 'vue'
 import { NInput } from 'naive-ui'
-import type { IFieldParams } from '../types'
+import type { IJsonItem } from '../types'
 
-export function renderInput(params: IFieldParams) {
+export function renderInput(item: IJsonItem, fields: { [field: string]: any }) {
-  const { props, fields, field } = params
+  const { props, field } = item
   return h(NInput, {
     ...props,
     value: fields[field],

dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts

@@ -17,10 +17,13 @@
 
 import { h } from 'vue'
 import Editor from '@/components/monaco-editor'
-import type { IFieldParams } from '../types'
+import type { IJsonItem } from '../types'
 
-export function renderEditor(params: IFieldParams) {
+export function renderEditor(
-  const { props, fields, field } = params
+  item: IJsonItem,
+  fields: { [field: string]: any }
+) {
+  const { props, field } = item
   return h(Editor, {
     ...props,
     value: fields[field],

dolphinscheduler-ui-next/src/components/form/fields/radio.ts

@@ -17,10 +17,10 @@
 
 import { h } from 'vue'
 import { NRadio, NRadioGroup, NSpace } from 'naive-ui'
-import type { IFieldParams, IOption } from '../types'
+import type { IJsonItem, IOption } from '../types'
 
-export function renderRadio(params: IFieldParams) {
+export function renderRadio(item: IJsonItem, fields: { [field: string]: any }) {
-  const { props, fields, field, options } = params
+  const { props, field, options } = item
   if (!options || options.length === 0) {
     return h(NRadio, {
       ...props,

dolphinscheduler-ui-next/src/components/form/fields/select.ts

@@ -0,0 +1,33 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { h } from 'vue'
+import { NSelect } from 'naive-ui'
+import type { IJsonItem } from '../types'
+
+export function renderSelect(
+  item: IJsonItem,
+  fields: { [field: string]: any }
+) {
+  const { props, field, options = [] } = item
+  return h(NSelect, {
+    ...props,
+    value: fields[field],
+    onUpdateValue: (value) => void (fields[field] = value),
+    options
+  })
+}

dolphinscheduler-ui-next/src/components/form/fields/switch.ts

@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { h } from 'vue'
+import { NSwitch } from 'naive-ui'
+import type { IJsonItem } from '../types'
+
+export function renderSwitch(
+  item: IJsonItem,
+  fields: { [field: string]: any }
+) {
+  const { props, field } = item
+  return h(NSwitch, {
+    ...props,
+    value: fields[field],
+    onUpdateValue: (value: string) => void (fields[field] = value)
+  })
+}

dolphinscheduler-ui-next/src/components/form/get-elements-by-json.ts

@@ -17,6 +17,7 @@
 
 import { formatValidate } from './utils'
 import getField from './fields/get-field'
+import { omit } from 'lodash'
 import type { FormRules } from 'naive-ui'
 import type { IJsonItem } from './types'
 
@@ -27,20 +28,20 @@ export default function getElementByJson(
   const rules: FormRules = {}
   const initialValues: { [field: string]: any } = {}
   const elements = []
-
   for (let item of json) {
-    if (item.value) {
+    const { name, value, field, children, validate, ...rest } = item
-      fields[item.field] = item.value
+    if (value) {
-      initialValues[item.field] = item.value
+      fields[field] = value
+      initialValues[field] = value
     }
-    if (item.validate) rules[item.field] = formatValidate(item.validate)
+    if (validate) rules[field] = formatValidate(validate)
     elements.push({
-      label: item.name,
+      showLabel: !!name,
-      path: !item.children ? item.field : '',
+      ...omit(rest, ['type', 'props', 'options']),
-      showLabel: !!item.name,
+      label: name,
+      path: !children ? field : '',
       widget: () => getField(item, fields, rules)
     })
   }
-
   return { rules, elements, initialValues }
 }

dolphinscheduler-ui-next/src/components/form/index.tsx

@@ -47,20 +47,19 @@ const Form = defineComponent({
   },
   render(props: { meta: IMeta; layout?: GridProps; loading?: boolean }) {
     const { loading, layout, meta } = props
-    const { elements, ...restFormProps } = meta
+    const { elements = [], ...restFormProps } = meta
     return (
       <NSpin show={loading}>
         <NForm {...restFormProps} ref='formRef'>
           <NGrid {...layout}>
-            {elements &&
+            {elements.map((element) => {
-              elements.map((element) => {
+              const { span = 24, path, widget, ...formItemProps } = element
-                const { span = 24, path, widget, ...formItemProps } = element
+              return (
-                return (
+                <NFormItemGi {...formItemProps} span={span} path={path}>
-                  <NFormItemGi {...formItemProps} span={span} path={path}>
+                  {h(widget)}
-                    {h(widget)}
+                </NFormItemGi>
-                  </NFormItemGi>
+              )
-                )
+            })}
-              })}
           </NGrid>
         </NForm>
       </NSpin>

dolphinscheduler-ui-next/src/components/form/types.ts

@@ -24,7 +24,14 @@ import type {
   SelectOption
 } from 'naive-ui'
 
-type IType = 'input' | 'radio' | 'editor' | 'custom-parameters'
+type IType =
+  | 'input'
+  | 'radio'
+  | 'editor'
+  | 'custom-parameters'
+  | 'switch'
+  | 'input-number'
+  | 'select'
 
 type IOption = SelectOption
 
@@ -37,15 +44,6 @@ interface IMeta extends Omit<FormProps, 'model'> {
   model: object
 }
 
-interface IFieldParams {
-  field: string
-  props: object
-  fields: { [field: string]: any }
-  options?: IOption[]
-  rules?: FormRules | { [key: string]: FormRules }
-  children?: IJsonItem[]
-}
-
 interface IJsonItem {
   field: string
   name?: string
@@ -66,6 +64,5 @@ export {
   FormItemRule,
   FormRules,
   IFormItem,
-  GridProps,
+  GridProps
-  IFieldParams
 }