[Improvement][UI] Set the `required` to be reactive in the task modal. (#12225) (#12748)

Co-authored-by: Amy0104 <amywang0104@163.com>

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

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)

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.

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) {

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

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
 }

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

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 {

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
 }

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 () => {