From 9fff2afe59075d19d6d0afecc1dc8213896bea20 Mon Sep 17 00:00:00 2001 From: Amy0104 <97265214+Amy0104@users.noreply.github.com> Date: Sun, 6 Feb 2022 13:54:02 +0800 Subject: [PATCH] [Feature][UI Next] Add switch,select and input-number to form (#8287) --- .../form/fields/custom-parameters.ts | 15 ++++--- .../src/components/form/fields/get-field.ts | 41 +++++-------------- .../src/components/form/fields/index.ts | 3 ++ .../components/form/fields/input-number.ts | 33 +++++++++++++++ .../src/components/form/fields/input.ts | 6 +-- .../components/form/fields/monaco-editor.ts | 9 ++-- .../src/components/form/fields/radio.ts | 6 +-- .../src/components/form/fields/select.ts | 33 +++++++++++++++ .../src/components/form/fields/switch.ts | 32 +++++++++++++++ .../components/form/get-elements-by-json.ts | 19 +++++---- .../src/components/form/index.tsx | 19 ++++----- .../src/components/form/types.ts | 21 ++++------ 12 files changed, 158 insertions(+), 79 deletions(-) create mode 100644 dolphinscheduler-ui-next/src/components/form/fields/input-number.ts create mode 100644 dolphinscheduler-ui-next/src/components/form/fields/select.ts create mode 100644 dolphinscheduler-ui-next/src/components/form/fields/switch.ts 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 a224fd2843..40b2901489 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 { - 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 f0fe77993c..cffa65cdde 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 5c01ec8717..75b71a46f9 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/input-number.ts b/dolphinscheduler-ui-next/src/components/form/fields/input-number.ts new file mode 100644 index 0000000000..be05f5c5a6 --- /dev/null +++ b/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) + }) +} diff --git a/dolphinscheduler-ui-next/src/components/form/fields/input.ts b/dolphinscheduler-ui-next/src/components/form/fields/input.ts index 50f38c0417..2f1cc88acc 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 d51f5f05c2..6597b5d422 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 821bb89903..6e8c391fca 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/select.ts b/dolphinscheduler-ui-next/src/components/form/fields/select.ts new file mode 100644 index 0000000000..595aeb0f01 --- /dev/null +++ b/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 + }) +} diff --git a/dolphinscheduler-ui-next/src/components/form/fields/switch.ts b/dolphinscheduler-ui-next/src/components/form/fields/switch.ts new file mode 100644 index 0000000000..a1c363a83f --- /dev/null +++ b/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) + }) +} 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 a5911c4db9..d2df03195b 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 f3151418ab..12e77e0be1 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 ( - {elements && - elements.map((element) => { - const { span = 24, path, widget, ...formItemProps } = element - return ( - - {h(widget)} - - ) - })} + {elements.map((element) => { + const { span = 24, path, widget, ...formItemProps } = element + return ( + + {h(widget)} + + ) + })} diff --git a/dolphinscheduler-ui-next/src/components/form/types.ts b/dolphinscheduler-ui-next/src/components/form/types.ts index de2074393c..26e928c4b3 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 { 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 }