From 64a23cdca24abd0a94fd92f727c3da10dfc117ee Mon Sep 17 00:00:00 2001 From: Amy0104 Date: Fri, 30 Sep 2022 14:15:40 +0800 Subject: [PATCH] [Improvement][UI] Set the `required` to be reactive in the task modal. (#12225) --- .../form/fields/custom-parameters.ts | 19 +++++++++++------ .../src/components/form/fields/get-field.ts | 7 +++---- .../components/form/fields/multi-condition.ts | 7 +++---- .../components/form/get-elements-by-json.ts | 5 ++--- .../src/components/form/index.tsx | 4 ++-- .../src/components/form/types.ts | 21 +++++++++++++++---- .../src/components/form/utils.ts | 8 +++---- .../components/node/fields/use-resources.ts | 2 +- .../security/alarm-instance-manage/detail.tsx | 4 ++-- .../security/alarm-instance-manage/types.ts | 10 ++++++--- .../alarm-instance-manage/use-form.ts | 6 +++--- 11 files changed, 57 insertions(+), 36 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 ( - + {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 { +interface IMeta extends Omit { elements?: IFormItem[] model: object + rules: IFormRules } +interface IFormItemRule extends Omit { + required?: boolean | Ref +} + +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 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/projects/task/components/node/fields/use-resources.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-resources.ts index a9c979d3cc..e4dd9f54ef 100644 --- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-resources.ts +++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-resources.ts @@ -24,7 +24,7 @@ import type { IJsonItem, IResource } from '../types' export function useResources( span: number | Ref = 24, - required = false, + required: boolean | Ref = false, limit: number | Ref = -1 ): IJsonItem { const { t } = useI18n() 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 459ddb9ccd..9702bc75b2 100644 --- a/dolphinscheduler-ui/src/views/security/alarm-instance-manage/detail.tsx +++ b/dolphinscheduler-ui/src/views/security/alarm-instance-manage/detail.tsx @@ -31,7 +31,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 { @@ -55,7 +55,7 @@ const DetailModal = defineComponent({ setup(props, ctx) { const { t } = useI18n() - const rules = ref({}) + const rules = ref({}) const elements = ref([]) 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 () => {