Browse Source

[Feature][UI Next] Add custom parameters to form (#8271)

3.0.0/version-upgrade
Amy0104 3 years ago committed by GitHub
parent
commit
6be220129f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 86
      dolphinscheduler-ui-next/src/components/form/fields/custom-parameters.ts
  2. 61
      dolphinscheduler-ui-next/src/components/form/fields/get-field.ts
  3. 21
      dolphinscheduler-ui-next/src/components/form/fields/index.ts
  4. 29
      dolphinscheduler-ui-next/src/components/form/fields/input.ts
  5. 29
      dolphinscheduler-ui-next/src/components/form/fields/monaco-editor.ts
  6. 31
      dolphinscheduler-ui-next/src/components/form/fields/radio.ts
  7. 35
      dolphinscheduler-ui-next/src/components/form/get-elements-by-json.ts
  8. 5
      dolphinscheduler-ui-next/src/components/form/types.ts
  9. 4
      dolphinscheduler-ui-next/src/components/form/use-form.ts

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

@ -0,0 +1,86 @@
/*
* 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 { 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'
interface ICustomParameters extends Omit<IFieldParams, 'rules'> {
rules?: { [key: string]: FormItemRule }[]
}
export function renderCustomParameters(params: ICustomParameters) {
const { fields, field, children = [], rules = [] } = params
let defaultValue: { [field: string]: any } = {}
let ruleItem: { [key: string]: FormItemRule } = {}
children.forEach((child) => {
defaultValue[child.field] = child.value || null
if (child.validate) ruleItem[child.field] = formatValidate(child.validate)
})
const getChild = (item: object, i: number) =>
children.map((child: IJsonItem) => {
return h(
NFormItem,
{
showLabel: false,
path: `${field}[${i}].${child.field}`
},
() => getField(child, item)
)
})
const getChildren = () =>
fields[field].map((item: object, i: number) => {
return h(NSpace, { ':key': i }, () => [
...getChild(item, i),
h(
NButton,
{
tertiary: true,
circle: true,
type: 'error',
onClick: () => {
fields[field].splice(i, 1)
rules.splice(i, 1)
}
},
() => h(NIcon, { size: 24 }, () => h(DeleteOutlined))
)
])
})
return h(NSpace, null, () => [
...getChildren(),
h(
NButton,
{
tertiary: true,
circle: true,
type: 'info',
onClick: () => {
rules.push(ruleItem)
fields[field].push({ ...defaultValue })
console.log(rules)
}
},
() => h(NIcon, { size: 24 }, () => h(PlusCircleOutlined))
)
])
}

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

@ -0,0 +1,61 @@
/*
* 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 * as Field from './index'
import type { FormRules } from 'naive-ui'
import type { IJsonItem } from '../types'
const getField = (
item: IJsonItem,
fields: { [field: string]: any },
rules?: FormRules
) => {
const { type, props = {}, field, options, children } = item
// 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)
}
return Field.renderInput({ field, fields, props })
}
export default getField

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

@ -0,0 +1,21 @@
/*
* 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.
*/
export { renderInput } from './input'
export { renderRadio } from './radio'
export { renderEditor } from './monaco-editor'
export { renderCustomParameters } from './custom-parameters'

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

@ -0,0 +1,29 @@
/*
* 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 { NInput } from 'naive-ui'
import type { IFieldParams } from '../types'
export function renderInput(params: IFieldParams) {
const { props, fields, field } = params
return h(NInput, {
...props,
value: fields[field],
onUpdateValue: (value: string) => void (fields[field] = value)
})
}

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

@ -0,0 +1,29 @@
/*
* 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 Editor from '@/components/monaco-editor'
import type { IFieldParams } from '../types'
export function renderEditor(params: IFieldParams) {
const { props, fields, field } = params
return h(Editor, {
...props,
value: fields[field],
onUpdateValue: (value: string) => void (fields[field] = value)
})
}

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

@ -16,29 +16,16 @@
*/ */
import { h } from 'vue' import { h } from 'vue'
import { NInput, NRadio, NRadioGroup, NSpace } from 'naive-ui' import { NRadio, NRadioGroup, NSpace } from 'naive-ui'
import Editor from '@/components/monaco-editor' import type { IFieldParams, IOption } from '../types'
import type { IFieldParams } from './types'
// TODO Support other widgets later
// Input
export function renderInput(params: IFieldParams) {
const { props, fields, field } = params
return h(NInput, {
...props,
value: fields[field],
onUpdateValue: (value) => void (fields[field] = value)
})
}
// Radio && RadioGroup
export function renderRadio(params: IFieldParams) { export function renderRadio(params: IFieldParams) {
const { props, fields, field, options } = params const { props, fields, field, options } = params
if (!options || options.length === 0) { if (!options || options.length === 0) {
return h(NRadio, { return h(NRadio, {
...props, ...props,
value: fields[field], value: fields[field],
onUpdateChecked: (checked) => void (fields[field] = checked) onUpdateChecked: (checked: boolean) => void (fields[field] = checked)
}) })
} }
return h( return h(
@ -49,17 +36,7 @@ export function renderRadio(params: IFieldParams) {
}, },
() => () =>
h(NSpace, null, () => h(NSpace, null, () =>
options.map((option) => h(NRadio, option, () => option.label)) options.map((option: IOption) => h(NRadio, option, () => option.label))
) )
) )
} }
// Editor
export function renderEditor(params: IFieldParams) {
const { props, fields, field } = params
return h(Editor, {
...props,
value: fields[field],
onUpdateValue: (value) => void (fields[field] = value)
})
}

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

@ -15,8 +15,8 @@
* limitations under the License. * limitations under the License.
*/ */
import * as Field from './fields'
import { formatValidate } from './utils' import { formatValidate } from './utils'
import getField from './fields/get-field'
import type { FormRules } from 'naive-ui' import type { FormRules } from 'naive-ui'
import type { IJsonItem } from './types' import type { IJsonItem } from './types'
@ -28,36 +28,17 @@ export default function getElementByJson(
const initialValues: { [field: string]: any } = {} const initialValues: { [field: string]: any } = {}
const elements = [] const elements = []
const getElement = (item: IJsonItem) => {
const { type, props = {}, field, options } = item
// TODO Support other widgets later
if (type === 'radio') {
return Field.renderRadio({
field,
fields,
props,
options
})
}
if (type === 'editor') {
return Field.renderEditor({
field,
fields,
props
})
}
return Field.renderInput({ field, fields, props })
}
for (let item of json) { for (let item of json) {
fields[item.field] = item.value if (item.value) {
initialValues[item.field] = item.value fields[item.field] = item.value
initialValues[item.field] = item.value
}
if (item.validate) rules[item.field] = formatValidate(item.validate) if (item.validate) rules[item.field] = formatValidate(item.validate)
elements.push({ elements.push({
label: item.name, label: item.name,
path: item.field, path: !item.children ? item.field : '',
widget: () => getElement(item) showLabel: !!item.name,
widget: () => getField(item, fields, rules)
}) })
} }

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

@ -24,7 +24,7 @@ import type {
SelectOption SelectOption
} from 'naive-ui' } from 'naive-ui'
type IType = 'input' | 'radio' | 'editor' type IType = 'input' | 'radio' | 'editor' | 'custom-parameters'
type IOption = SelectOption type IOption = SelectOption
@ -42,6 +42,8 @@ interface IFieldParams {
props: object props: object
fields: { [field: string]: any } fields: { [field: string]: any }
options?: IOption[] options?: IOption[]
rules?: FormRules | { [key: string]: FormRules }
children?: IJsonItem[]
} }
interface IJsonItem { interface IJsonItem {
@ -53,6 +55,7 @@ interface IJsonItem {
validate?: FormItemRule validate?: FormItemRule
value?: any value?: any
options?: IOption[] options?: IOption[]
children?: IJsonItem[]
} }
export { export {

4
dolphinscheduler-ui-next/src/components/form/use-form.ts

@ -22,8 +22,8 @@ export function useForm() {
formRef: ref() formRef: ref()
}) })
const validate = () => { const validate = (...args: []) => {
state.formRef.validate() state.formRef.validate(...args)
} }
const setValues = (initialValues: { [field: string]: any }) => { const setValues = (initialValues: { [field: string]: any }) => {

Loading…
Cancel
Save