From d85ea8f62f2e1717413d49b6a8da48d27a4b07a1 Mon Sep 17 00:00:00 2001
From: Chris Ho <realhezean@gmail.com>
Date: Fri, 29 Jul 2022 17:49:33 +0800
Subject: [PATCH] [Improvement][UI] Unified local parameters UI (#11190)

---
 .../node/fields/use-custom-params.ts          | 170 +++++++-----------
 1 file changed, 63 insertions(+), 107 deletions(-)

diff --git a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-custom-params.ts b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-custom-params.ts
index 6adac53b30..fb9d098d45 100644
--- a/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-custom-params.ts
+++ b/dolphinscheduler-ui/src/views/projects/task/components/node/fields/use-custom-params.ts
@@ -33,120 +33,76 @@ export function useCustomParams({
 }): IJsonItem[] {
   const { t } = useI18n()
 
-  if (isSimple) {
-    return [
-      {
-        type: 'custom-parameters',
-        field: field,
-        name: t(`project.node.${name}`),
-        class: 'btn-custom-parameters',
-        span,
-        children: [
-          {
-            type: 'input',
-            field: 'prop',
-            span: 10,
-            class: 'input-param-key',
-            props: {
-              placeholder: t('project.node.prop_tips'),
-              maxLength: 256
-            },
-            validate: {
-              trigger: ['input', 'blur'],
-              required: true,
-              validator(validate: any, value: string) {
-                if (!value) {
-                  return new Error(t('project.node.prop_tips'))
-                }
-
-                const sameItems = model[field].filter(
-                  (item: { prop: string }) => item.prop === value
-                )
-
-                if (sameItems.length > 1) {
-                  return new Error(t('project.node.prop_repeat'))
-                }
-              }
-            }
+  return [
+    {
+      type: 'custom-parameters',
+      field: field,
+      name: t(`project.node.${name}`),
+      class: 'btn-custom-parameters',
+      span,
+      children: [
+        {
+          type: 'input',
+          field: 'prop',
+          span: 6,
+          class: 'input-param-key',
+          props: {
+            placeholder: t('project.node.prop_tips'),
+            maxLength: 256
           },
-          {
-            type: 'input',
-            field: 'value',
-            span: 10,
-            class: 'input-param-value',
-            props: {
-              placeholder: t('project.node.value_tips'),
-              maxLength: 256
-            }
-          }
-        ]
-      }
-    ]
-  } else {
-    return [
-      {
-        type: 'custom-parameters',
-        field: field,
-        name: t(`project.node.${name}`),
-        class: 'btn-custom-parameters',
-        span,
-        children: [
-          {
-            type: 'input',
-            field: 'prop',
-            span: 6,
-            class: 'input-param-key',
-            props: {
-              placeholder: t('project.node.prop_tips'),
-              maxLength: 256
-            },
-            validate: {
-              trigger: ['input', 'blur'],
-              required: true,
-              validator(validate: any, value: string) {
-                if (!value) {
-                  return new Error(t('project.node.prop_tips'))
-                }
+          validate: {
+            trigger: ['input', 'blur'],
+            required: true,
+            validator(validate: any, value: string) {
+              if (!value) {
+                return new Error(t('project.node.prop_tips'))
+              }
 
-                const sameItems = model[field].filter(
-                  (item: { prop: string }) => item.prop === value
-                )
+              const sameItems = model[field].filter(
+                (item: { prop: string }) => item.prop === value
+              )
 
-                if (sameItems.length > 1) {
-                  return new Error(t('project.node.prop_repeat'))
-                }
+              if (sameItems.length > 1) {
+                return new Error(t('project.node.prop_repeat'))
               }
             }
-          },
-          {
-            type: 'select',
-            field: 'direct',
-            span: 4,
-            options: DIRECT_LIST,
-            value: 'IN'
-          },
-          {
-            type: 'select',
-            field: 'type',
-            span: 6,
-            options: TYPE_LIST,
-            value: 'VARCHAR'
-          },
-          {
-            type: 'input',
-            field: 'value',
-            span: 6,
-            class: 'input-param-value',
-            props: {
-              placeholder: t('project.node.value_tips'),
-              maxLength: 256
-            }
           }
-        ]
-      }
-    ]
-  }
+        },
+        {
+          type: 'select',
+          field: 'direct',
+          span: 4,
+          options: DIRECT_LIST,
+          value: 'IN',
+          props: {
+            disabled: isSimple
+          }
+        },
+        {
+          type: 'select',
+          field: 'type',
+          span: 6,
+          options: TYPE_LIST,
+          value: 'VARCHAR',
+          props: {
+            disabled: isSimple
+          }
+        },
+        {
+          type: 'input',
+          field: 'value',
+          span: 6,
+          class: 'input-param-value',
+          props: {
+            placeholder: t('project.node.value_tips'),
+            maxLength: 256
+          }
+        }
+      ]
+    }
+  ]
 }
+
 export const TYPE_LIST = [
   {
     value: 'VARCHAR',