Browse Source

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

3.0.0/version-upgrade
Amy0104 3 years ago committed by GitHub
parent
commit
9fff2afe59
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 15
      dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts
  2. 41
      dolphinscheduler-ui-next/src/components/form/fields/get-field.ts
  3. 3
      dolphinscheduler-ui-next/src/components/form/fields/index.ts
  4. 33
      dolphinscheduler-ui-next/src/components/form/fields/input-number.ts
  5. 6
      dolphinscheduler-ui-next/src/components/form/fields/input.ts
  6. 9
      dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts
  7. 6
      dolphinscheduler-ui-next/src/components/form/fields/radio.ts
  8. 33
      dolphinscheduler-ui-next/src/components/form/fields/select.ts
  9. 32
      dolphinscheduler-ui-next/src/components/form/fields/switch.ts
  10. 19
      dolphinscheduler-ui-next/src/components/form/get-elements-by-json.ts
  11. 19
      dolphinscheduler-ui-next/src/components/form/index.tsx
  12. 21
      dolphinscheduler-ui-next/src/components/form/types.ts

15
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 { PlusCircleOutlined, DeleteOutlined } from '@vicons/antd'
import getField from './get-field' import getField from './get-field'
import { formatValidate } from '../utils' 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 defaultValue: { [field: string]: any } = {}
let ruleItem: { [key: string]: FormItemRule } = {} let ruleItem: { [key: string]: FormItemRule } = {}
children.forEach((child) => { children.forEach((child) => {
@ -77,7 +77,6 @@ export function renderCustomParameters(params: ICustomParameters) {
onClick: () => { onClick: () => {
rules.push(ruleItem) rules.push(ruleItem)
fields[field].push({ ...defaultValue }) fields[field].push({ ...defaultValue })
console.log(rules)
} }
}, },
() => h(NIcon, { size: 24 }, () => h(PlusCircleOutlined)) () => h(NIcon, { size: 24 }, () => h(PlusCircleOutlined))

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

@ -15,7 +15,8 @@
* limitations under the License. * limitations under the License.
*/ */
import * as Field from './index' 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' import type { IJsonItem } from '../types'
const getField = ( const getField = (
@ -23,39 +24,17 @@ const getField = (
fields: { [field: string]: any }, fields: { [field: string]: any },
rules?: FormRules rules?: FormRules
) => { ) => {
const { type, props = {}, field, options, children } = item const { type = 'input' } = item
const renderTypeName = `render${upperFirst(camelCase(type))}`
// TODO Support other widgets later // 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') { 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 export default getField

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

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

33
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)
})
}

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

@ -17,10 +17,10 @@
import { h } from 'vue' import { h } from 'vue'
import { NInput } from 'naive-ui' 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, { return h(NInput, {
...props, ...props,
value: fields[field], value: fields[field],

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

@ -17,10 +17,13 @@
import { h } from 'vue' import { h } from 'vue'
import Editor from '@/components/monaco-editor' 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, { return h(Editor, {
...props, ...props,
value: fields[field], value: fields[field],

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

@ -17,10 +17,10 @@
import { h } from 'vue' import { h } from 'vue'
import { NRadio, NRadioGroup, NSpace } from 'naive-ui' 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) { if (!options || options.length === 0) {
return h(NRadio, { return h(NRadio, {
...props, ...props,

33
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
})
}

32
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)
})
}

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

@ -17,6 +17,7 @@
import { formatValidate } from './utils' import { formatValidate } from './utils'
import getField from './fields/get-field' import getField from './fields/get-field'
import { omit } from 'lodash'
import type { FormRules } from 'naive-ui' import type { FormRules } from 'naive-ui'
import type { IJsonItem } from './types' import type { IJsonItem } from './types'
@ -27,20 +28,20 @@ export default function getElementByJson(
const rules: FormRules = {} const rules: FormRules = {}
const initialValues: { [field: string]: any } = {} const initialValues: { [field: string]: any } = {}
const elements = [] const elements = []
for (let item of json) { 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({ 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) widget: () => getField(item, fields, rules)
}) })
} }
return { rules, elements, initialValues } return { rules, elements, initialValues }
} }

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

@ -47,20 +47,19 @@ const Form = defineComponent({
}, },
render(props: { meta: IMeta; layout?: GridProps; loading?: boolean }) { render(props: { meta: IMeta; layout?: GridProps; loading?: boolean }) {
const { loading, layout, meta } = props const { loading, layout, meta } = props
const { elements, ...restFormProps } = meta const { elements = [], ...restFormProps } = meta
return ( return (
<NSpin show={loading}> <NSpin show={loading}>
<NForm {...restFormProps} ref='formRef'> <NForm {...restFormProps} ref='formRef'>
<NGrid {...layout}> <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> </NGrid>
</NForm> </NForm>
</NSpin> </NSpin>

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

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

Loading…
Cancel
Save