You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by ke...@apache.org on 2022/02/06 05:54:11 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next] Add switch, select and input-number to form (#8287)
This is an automated email from the ASF dual-hosted git repository.
kezhenxu94 pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 9fff2af [Feature][UI Next] Add switch,select and input-number to form (#8287)
9fff2af is described below
commit 9fff2afe59075d19d6d0afecc1dc8213896bea20
Author: Amy0104 <97...@users.noreply.github.com>
AuthorDate: Sun Feb 6 13:54:02 2022 +0800
[Feature][UI Next] Add switch,select and input-number to form (#8287)
---
.../components/form/fields/custom-parameters.ts | 15 ++++----
.../src/components/form/fields/get-field.ts | 41 ++++++----------------
.../src/components/form/fields/index.ts | 3 ++
.../fields/{monaco-editor.ts => input-number.ts} | 16 +++++----
.../src/components/form/fields/input.ts | 6 ++--
.../src/components/form/fields/monaco-editor.ts | 9 +++--
.../src/components/form/fields/radio.ts | 6 ++--
.../form/fields/{monaco-editor.ts => select.ts} | 16 +++++----
.../form/fields/{monaco-editor.ts => switch.ts} | 13 ++++---
.../src/components/form/get-elements-by-json.ts | 19 +++++-----
.../src/components/form/index.tsx | 19 +++++-----
.../src/components/form/types.ts | 21 +++++------
12 files changed, 88 insertions(+), 96 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts b/dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts
index a224fd2..40b2901 100644
--- a/dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts
+++ b/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'> {
- rules?: { [key: string]: FormItemRule }[]
-}
-
-export function renderCustomParameters(params: ICustomParameters) {
- const { fields, field, children = [], rules = [] } = params
+export function renderCustomParameters(
+ item: IJsonItem,
+ fields: { [field: string]: any },
+ rules: { [key: string]: FormItemRule }[]
+) {
+ 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))
diff --git a/dolphinscheduler-ui-next/src/components/form/fields/get-field.ts b/dolphinscheduler-ui-next/src/components/form/fields/get-field.ts
index f0fe779..cffa65c 100644
--- a/dolphinscheduler-ui-next/src/components/form/fields/get-field.ts
+++ b/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 = {
- field,
- fields,
- children,
- props,
- rules: []
- }
- if (rules) {
- params.rules = rules[field] = []
- }
- return Field.renderCustomParameters(params)
+ let fieldRules: { [key: string]: FormItemRule }[] = []
+ if (rules && !rules[item.field]) fieldRules = rules[item.field] = []
+ // @ts-ignore
+ return Field[renderTypeName](item, fields, fieldRules)
}
-
- return Field.renderInput({ field, fields, props })
+ // @ts-ignore
+ return Field[renderTypeName](item, fields)
}
export default getField
diff --git a/dolphinscheduler-ui-next/src/components/form/fields/index.ts b/dolphinscheduler-ui-next/src/components/form/fields/index.ts
index 5c01ec8..75b71a4 100644
--- a/dolphinscheduler-ui-next/src/components/form/fields/index.ts
+++ b/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'
diff --git a/dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts b/dolphinscheduler-ui-next/src/components/form/fields/input-number.ts
similarity index 74%
copy from dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts
copy to dolphinscheduler-ui-next/src/components/form/fields/input-number.ts
index d51f5f0..be05f5c 100644
--- a/dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts
+++ b/dolphinscheduler-ui-next/src/components/form/fields/input-number.ts
@@ -16,14 +16,18 @@
*/
import { h } from 'vue'
-import Editor from '@/components/monaco-editor'
-import type { IFieldParams } from '../types'
+import { NInputNumber } from 'naive-ui'
+import type { IJsonItem } from '../types'
-export function renderEditor(params: IFieldParams) {
- const { props, fields, field } = params
- return h(Editor, {
+export function renderInputNumber(
+ item: IJsonItem,
+ fields: { [field: string]: any }
+) {
+ const { props, field } = item
+
+ return h(NInputNumber, {
...props,
value: fields[field],
- onUpdateValue: (value: string) => void (fields[field] = value)
+ onUpdateValue: (value) => void (fields[field] = value)
})
}
diff --git a/dolphinscheduler-ui-next/src/components/form/fields/input.ts b/dolphinscheduler-ui-next/src/components/form/fields/input.ts
index 50f38c0..2f1cc88 100644
--- a/dolphinscheduler-ui-next/src/components/form/fields/input.ts
+++ b/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) {
- const { props, fields, field } = params
+export function renderInput(item: IJsonItem, fields: { [field: string]: any }) {
+ const { props, field } = item
return h(NInput, {
...props,
value: fields[field],
diff --git a/dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts b/dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts
index d51f5f0..6597b5d 100644
--- a/dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts
+++ b/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) {
- const { props, fields, field } = params
+export function renderEditor(
+ item: IJsonItem,
+ fields: { [field: string]: any }
+) {
+ const { props, field } = item
return h(Editor, {
...props,
value: fields[field],
diff --git a/dolphinscheduler-ui-next/src/components/form/fields/radio.ts b/dolphinscheduler-ui-next/src/components/form/fields/radio.ts
index 821bb89..6e8c391 100644
--- a/dolphinscheduler-ui-next/src/components/form/fields/radio.ts
+++ b/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) {
- const { props, fields, field, options } = params
+export function renderRadio(item: IJsonItem, fields: { [field: string]: any }) {
+ const { props, field, options } = item
if (!options || options.length === 0) {
return h(NRadio, {
...props,
diff --git a/dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts b/dolphinscheduler-ui-next/src/components/form/fields/select.ts
similarity index 74%
copy from dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts
copy to dolphinscheduler-ui-next/src/components/form/fields/select.ts
index d51f5f0..595aeb0 100644
--- a/dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts
+++ b/dolphinscheduler-ui-next/src/components/form/fields/select.ts
@@ -16,14 +16,18 @@
*/
import { h } from 'vue'
-import Editor from '@/components/monaco-editor'
-import type { IFieldParams } from '../types'
+import { NSelect } from 'naive-ui'
+import type { IJsonItem } from '../types'
-export function renderEditor(params: IFieldParams) {
- const { props, fields, field } = params
- return h(Editor, {
+export function renderSelect(
+ item: IJsonItem,
+ fields: { [field: string]: any }
+) {
+ const { props, field, options = [] } = item
+ return h(NSelect, {
...props,
value: fields[field],
- onUpdateValue: (value: string) => void (fields[field] = value)
+ onUpdateValue: (value) => void (fields[field] = value),
+ options
})
}
diff --git a/dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts b/dolphinscheduler-ui-next/src/components/form/fields/switch.ts
similarity index 81%
copy from dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts
copy to dolphinscheduler-ui-next/src/components/form/fields/switch.ts
index d51f5f0..a1c363a 100644
--- a/dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts
+++ b/dolphinscheduler-ui-next/src/components/form/fields/switch.ts
@@ -16,12 +16,15 @@
*/
import { h } from 'vue'
-import Editor from '@/components/monaco-editor'
-import type { IFieldParams } from '../types'
+import { NSwitch } from 'naive-ui'
+import type { IJsonItem } from '../types'
-export function renderEditor(params: IFieldParams) {
- const { props, fields, field } = params
- return h(Editor, {
+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)
diff --git a/dolphinscheduler-ui-next/src/components/form/get-elements-by-json.ts b/dolphinscheduler-ui-next/src/components/form/get-elements-by-json.ts
index a5911c4..d2df031 100644
--- a/dolphinscheduler-ui-next/src/components/form/get-elements-by-json.ts
+++ b/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) {
- fields[item.field] = item.value
- initialValues[item.field] = item.value
+ const { name, value, field, children, validate, ...rest } = item
+ if (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,
- path: !item.children ? item.field : '',
- showLabel: !!item.name,
+ showLabel: !!name,
+ ...omit(rest, ['type', 'props', 'options']),
+ label: name,
+ path: !children ? field : '',
widget: () => getField(item, fields, rules)
})
}
-
return { rules, elements, initialValues }
}
diff --git a/dolphinscheduler-ui-next/src/components/form/index.tsx b/dolphinscheduler-ui-next/src/components/form/index.tsx
index f315141..12e77e0 100644
--- a/dolphinscheduler-ui-next/src/components/form/index.tsx
+++ b/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) => {
- const { span = 24, path, widget, ...formItemProps } = element
- return (
- <NFormItemGi {...formItemProps} span={span} path={path}>
- {h(widget)}
- </NFormItemGi>
- )
- })}
+ {elements.map((element) => {
+ const { span = 24, path, widget, ...formItemProps } = element
+ return (
+ <NFormItemGi {...formItemProps} span={span} path={path}>
+ {h(widget)}
+ </NFormItemGi>
+ )
+ })}
</NGrid>
</NForm>
</NSpin>
diff --git a/dolphinscheduler-ui-next/src/components/form/types.ts b/dolphinscheduler-ui-next/src/components/form/types.ts
index de20743..26e928c 100644
--- a/dolphinscheduler-ui-next/src/components/form/types.ts
+++ b/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,
- IFieldParams
+ GridProps
}