This is an automated email from the ASF dual-hosted git repository.
chufenggao pushed a commit to branch 3.0.2-prepare
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/3.0.2-prepare by this push:
new 8c3c94218b [Improvement][UI] Set the `required` to be reactive in the
task modal. (#12225) (#12748)
8c3c94218b is described below
commit 8c3c94218b4d02ec61460619f3faea11fa9f7b8c
Author: Eric Gao <[email protected]>
AuthorDate: Mon Nov 7 11:33:25 2022 +0800
[Improvement][UI] Set the `required` to be reactive in the task modal.
(#12225) (#12748)
Co-authored-by: Amy0104 <[email protected]>
---
.../src/components/form/fields/custom-parameters.ts | 19 +++++++++++++------
.../src/components/form/fields/get-field.ts | 7 +++----
.../src/components/form/fields/multi-condition.ts | 7 +++----
.../src/components/form/get-elements-by-json.ts | 5 ++---
dolphinscheduler-ui/src/components/form/index.tsx | 4 ++--
dolphinscheduler-ui/src/components/form/types.ts | 21 +++++++++++++++++----
dolphinscheduler-ui/src/components/form/utils.ts | 8 ++++----
.../views/security/alarm-instance-manage/detail.tsx | 4 ++--
.../views/security/alarm-instance-manage/types.ts | 10 +++++++---
.../security/alarm-instance-manage/use-form.ts | 6 +++---
10 files changed, 56 insertions(+), 35 deletions(-)
diff --git
a/dolphinscheduler-ui/src/components/form/fields/custom-parameters.ts
b/dolphinscheduler-ui/src/components/form/fields/custom-parameters.ts
index fe38899318..49bb371b5f 100644
--- a/dolphinscheduler-ui/src/components/form/fields/custom-parameters.ts
+++ b/dolphinscheduler-ui/src/components/form/fields/custom-parameters.ts
@@ -17,12 +17,19 @@
import { defineComponent, h, unref, renderSlot } from 'vue'
import { useFormItem } from 'naive-ui/es/_mixins'
-import { NFormItemGi, NSpace, NButton, NGrid, NGridItem } from 'naive-ui'
+import {
+ NFormItemGi,
+ NSpace,
+ NButton,
+ NGrid,
+ NGridItem,
+ FormItemRule
+} from 'naive-ui'
import { isFunction } from 'lodash'
import { PlusOutlined, DeleteOutlined } from '@vicons/antd'
import getField from './get-field'
import { formatValidate } from '../utils'
-import type { IJsonItem, FormItemRule } from '../types'
+import type { IJsonItem, IFormItemRule } from '../types'
const CustomParameters = defineComponent({
name: 'CustomParameters',
@@ -66,11 +73,11 @@ const CustomParameters = defineComponent({
const getDefaultValue = (children: IJsonItem[]) => {
const defaultValue: { [field: string]: any } = {}
- const ruleItem: { [key: string]: FormItemRule[] | FormItemRule } = {}
+ const ruleItem: { [key: string]: IFormItemRule[] | IFormItemRule } = {}
const loop = (
children: IJsonItem[],
parent: { [field: string]: any },
- ruleParent: { [key: string]: FormItemRule[] | FormItemRule }
+ ruleParent: { [key: string]: IFormItemRule[] | IFormItemRule }
) => {
children.forEach((child) => {
const mergedChild = isFunction(child) ? child() : child
@@ -102,7 +109,7 @@ const getDefaultValue = (children: IJsonItem[]) => {
export function renderCustomParameters(
item: IJsonItem,
fields: { [field: string]: any },
- rules: { [key: string]: FormItemRule | FormItemRule[] }[]
+ rules: { [key: string]: IFormItemRule | IFormItemRule[] }[]
) {
const mergedItem = isFunction(item) ? item() : item
const { field, children = [] } = mergedItem
@@ -119,7 +126,7 @@ export function renderCustomParameters(
label: mergedChild.name,
span: unref(mergedChild.span),
class: mergedChild.class,
- rule: mergedChild.rule
+ rule: mergedChild.rule as FormItemRule
},
() => getField(mergedChild, item)
)
diff --git a/dolphinscheduler-ui/src/components/form/fields/get-field.ts
b/dolphinscheduler-ui/src/components/form/fields/get-field.ts
index 8508985ec9..87550b4647 100644
--- a/dolphinscheduler-ui/src/components/form/fields/get-field.ts
+++ b/dolphinscheduler-ui/src/components/form/fields/get-field.ts
@@ -16,8 +16,7 @@
*/
import * as Field from './index'
import { camelCase, upperFirst, isFunction } from 'lodash'
-import type { FormRules, FormItemRule } from 'naive-ui'
-import type { IJsonItem } from '../types'
+import type { IJsonItem, IFormRules, IFormItemRule } from '../types'
const TYPES = [
'input',
@@ -37,7 +36,7 @@ const TYPES = [
const getField = (
item: IJsonItem,
fields: { [field: string]: any },
- rules?: FormRules
+ rules?: IFormRules
) => {
const { type = 'input', widget, field } = isFunction(item) ? item() : item
if (!TYPES.includes(type)) return null
@@ -47,7 +46,7 @@ const getField = (
}
// TODO Support other widgets later
if (type === 'custom-parameters') {
- let fieldRules: { [key: string]: FormItemRule }[] = []
+ let fieldRules: { [key: string]: IFormItemRule }[] = []
if (rules && !rules[field]) fieldRules = rules[field] = []
// @ts-ignore
return Field[renderTypeName](item, fields, fieldRules)
diff --git a/dolphinscheduler-ui/src/components/form/fields/multi-condition.ts
b/dolphinscheduler-ui/src/components/form/fields/multi-condition.ts
index 2859b0e992..e55c080866 100644
--- a/dolphinscheduler-ui/src/components/form/fields/multi-condition.ts
+++ b/dolphinscheduler-ui/src/components/form/fields/multi-condition.ts
@@ -20,7 +20,7 @@ import { useFormItem } from 'naive-ui/es/_mixins'
import { NFormItemGi, NSpace, NButton, NGrid, NGridItem } from 'naive-ui'
import { PlusOutlined, DeleteOutlined } from '@vicons/antd'
import { isFunction } from 'lodash'
-import type { IJsonItem, FormItemRule } from '../types'
+import type { IJsonItem, IFormItemRule } from '../types'
import getField from '@/components/form/fields/get-field'
import { formatValidate } from '@/components/form/utils'
@@ -65,10 +65,9 @@ const MultiCondition = defineComponent({
export function renderMultiCondition(
item: IJsonItem,
- fields: { [field: string]: any },
- unused: { [key: string]: FormItemRule }[]
+ fields: { [field: string]: any }
) {
- const ruleItem: { [key: string]: FormItemRule } = {}
+ const ruleItem: { [key: string]: IFormItemRule } = {}
// the fields is the data of the task definition.
// the item is the options of this component in the form.
diff --git a/dolphinscheduler-ui/src/components/form/get-elements-by-json.ts
b/dolphinscheduler-ui/src/components/form/get-elements-by-json.ts
index 753bdb11e0..e1451cb0b4 100644
--- a/dolphinscheduler-ui/src/components/form/get-elements-by-json.ts
+++ b/dolphinscheduler-ui/src/components/form/get-elements-by-json.ts
@@ -19,14 +19,13 @@ import { toRef, Ref } from 'vue'
import { formatValidate } from './utils'
import getField from './fields/get-field'
import { omit, isFunction } from 'lodash'
-import type { FormRules } from 'naive-ui'
-import type { IFormItem, IJsonItem } from './types'
+import type { IFormItem, IJsonItem, IFormRules } from './types'
export default function getElementByJson(
json: IJsonItem[],
fields: { [field: string]: any }
) {
- const rules: FormRules = {}
+ const rules: IFormRules = {}
const initialValues: { [field: string]: any } = {}
const elements: IFormItem[] = []
for (const item of json) {
diff --git a/dolphinscheduler-ui/src/components/form/index.tsx
b/dolphinscheduler-ui/src/components/form/index.tsx
index 811569f87a..b4cead1440 100644
--- a/dolphinscheduler-ui/src/components/form/index.tsx
+++ b/dolphinscheduler-ui/src/components/form/index.tsx
@@ -16,7 +16,7 @@
*/
import { defineComponent, PropType, toRefs, h, unref } from 'vue'
-import { NSpin, NGrid, NForm, NFormItemGi } from 'naive-ui'
+import { NSpin, NGrid, NForm, NFormItemGi, FormRules } from 'naive-ui'
import { useForm } from './use-form'
import type { GridProps, IMeta } from './types'
@@ -50,7 +50,7 @@ const Form = defineComponent({
const { elements = [], ...restFormProps } = meta
return (
<NSpin show={loading}>
- <NForm {...restFormProps} ref='formRef'>
+ <NForm {...restFormProps} rules={meta.rules as FormRules}
ref='formRef'>
<NGrid {...layout}>
{elements.map((element) => {
const { span = 24, path, widget, ...formItemProps } = element
diff --git a/dolphinscheduler-ui/src/components/form/types.ts
b/dolphinscheduler-ui/src/components/form/types.ts
index dfc02c792e..a9d3812c69 100644
--- a/dolphinscheduler-ui/src/components/form/types.ts
+++ b/dolphinscheduler-ui/src/components/form/types.ts
@@ -45,18 +45,29 @@ interface IFormItem {
class?: string
}
-interface IMeta extends Omit<FormProps, 'model'> {
+interface IMeta extends Omit<FormProps, 'model' | 'rules'> {
elements?: IFormItem[]
model: object
+ rules: IFormRules
}
+interface IFormItemRule extends Omit<FormItemRule, 'required'> {
+ required?: boolean | Ref<boolean>
+}
+
+type IFormRules =
+ | {
+ [path: string]: IFormItemRule | IFormItemRule[]
+ }
+ | FormRules
+
interface IJsonItemParams {
field: string
name?: string
props?: any
title?: string
type?: IType
- validate?: FormItemRule
+ validate?: IFormItemRule
value?: any
options?: IOption[] | Ref<IOption[]>
children?: IJsonItem[]
@@ -65,7 +76,7 @@ interface IJsonItemParams {
widget?: any
class?: string
path?: string
- rule?: FormItemRule
+ rule?: IFormItemRule
}
type IJsonItemFn = (i?: number) => IJsonItemParams
@@ -81,5 +92,7 @@ export {
FormRules,
IFormItem,
GridProps,
- IJsonItemParams
+ IJsonItemParams,
+ IFormItemRule,
+ IFormRules
}
diff --git a/dolphinscheduler-ui/src/components/form/utils.ts
b/dolphinscheduler-ui/src/components/form/utils.ts
index fc41698afb..fc21c6c231 100644
--- a/dolphinscheduler-ui/src/components/form/utils.ts
+++ b/dolphinscheduler-ui/src/components/form/utils.ts
@@ -14,7 +14,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import type { FormRules, FormItemRule } from './types'
+import type { FormRules, IFormItemRule } from './types'
export function formatLabel(label?: string): string {
if (!label) return ''
@@ -23,11 +23,11 @@ export function formatLabel(label?: string): string {
}
export function formatValidate(
- validate?: FormItemRule | FormRules
-): FormItemRule {
+ validate?: IFormItemRule | FormRules
+): IFormItemRule {
if (!validate) return {}
if (Array.isArray(validate)) {
- validate.forEach((item: FormItemRule) => {
+ validate.forEach((item: IFormItemRule) => {
if (!item?.message) delete item.message
return item
})
diff --git
a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/detail.tsx
b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/detail.tsx
index 30ec47b4fc..ed33a3d636 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/detail.tsx
+++ b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/detail.tsx
@@ -24,7 +24,7 @@ import { useDetail } from './use-detail'
import Modal from '@/components/modal'
import Form from '@/components/form'
import getElementByJson from '@/components/form/get-elements-by-json'
-import type { IRecord, FormRules, IFormItem } from './types'
+import type { IRecord, IFormRules, IFormItem } from './types'
import type { PropType, Ref } from 'vue'
interface IElements extends Omit<Ref, 'value'> {
@@ -48,7 +48,7 @@ const DetailModal = defineComponent({
setup(props, ctx) {
const { t } = useI18n()
- const rules = ref<FormRules>({})
+ const rules = ref<IFormRules>({})
const elements = ref<IFormItem[]>([]) as IElements
const {
diff --git
a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/types.ts
b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/types.ts
index 12188f326d..6dd54959c5 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/types.ts
+++ b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/types.ts
@@ -17,8 +17,12 @@
import type { IPluginId } from '@/service/modules/ui-plugins/types'
import type { TableColumns } from 'naive-ui/es/data-table/src/interface'
-import type { IMeta, IJsonItem, IFormItem } from '@/components/form/types'
-import type { FormRules } from 'naive-ui'
+import type {
+ IMeta,
+ IJsonItem,
+ IFormItem,
+ IFormRules
+} from '@/components/form/types'
interface IRecord {
alertPluginName?: string
@@ -47,5 +51,5 @@ export {
IMeta,
IFormItem,
TableColumns,
- FormRules
+ IFormRules
}
diff --git
a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/use-form.ts
b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/use-form.ts
index 389973b3a0..959361c38e 100644
--- a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/use-form.ts
+++ b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/use-form.ts
@@ -24,7 +24,7 @@ import {
import type {
IPluginId,
IPlugin,
- FormRules,
+ IFormRules,
IMeta,
IJsonItem,
IRecord
@@ -60,13 +60,13 @@ export function useForm() {
pluginDefineId: {
trigger: ['blur', 'change'],
required: true,
- validator(validte, value) {
+ validator(unused: any, value: number) {
if (!value && value !== 0) {
return new Error(t('security.alarm_instance.select_plugin_tips'))
}
}
}
- } as FormRules
+ } as IFormRules
} as IMeta
const getUiPluginsByType = async () => {
