feature(web): 增加flink job id和alias输入框的联动

web/components/common.js

@@ -1927,39 +1927,81 @@ function filterableField(mapping, multiple = false) {
     }
 }
 
-function flinkJobIdTextInput(require = false) {
+function formReloadFlinkJobIdTextInputAndAliasTextInput(id) {
     return {
-        type: 'input-text',
+        onEvent: {
+            change: {
+                actions: [
+                    {
+                        actionType: 'reload',
+                        componentId: `flink-job-id-input-select-${id}`
+                    },
+                    {
+                        actionType: 'reload',
+                        componentId: `alias-input-select-${id}`
+                    }
+                ]
+            }
+        }
+    }
+}
+
+function flinkJobIdTextInput(id, require = false) {
+    return {
+        id: `flink-job-id-input-select-${id}`,
+        type: 'select',
         name: 'flinkJobId',
         label: 'Flink job id',
         placeholder: '通过 ID 搜索',
         clearable: true,
         required: require,
-        autoComplete: {
+        searchable: true,
+        source: {
             method: 'get',
-            url: '${base}/table/all_flink_job_id?key=$term',
+            url: '${base}/table/all_flink_job_id',
             data: {
                 alias: '${alias|default:undefined}'
             }
         },
+        /*onEvent: {
+            change: {
+                actions: [
+                    {
+                        actionType: 'reload',
+                        componentId: `alias-input-select-${id}`,
+                    },
+                ]
+            }
+        }*/
     }
 }
 
-function aliasTextInput(require = false) {
+function aliasTextInput(id, require = false) {
     return {
-        type: 'input-text',
+        id: `alias-input-select-${id}`,
+        type: 'select',
         name: 'alias',
         label: '别名',
         placeholder: '通过别名搜索',
         clearable: true,
         required: require,
-        creatable: false,
-        autoComplete: {
+        searchable: true,
+        source: {
             method: 'get',
-            url: '${base}/table/all_alias?key=$term',
+            url: '${base}/table/all_alias',
             data: {
                 flink_job_id: '${flinkJobId|default:undefined}'
             }
         },
+        /*onEvent: {
+            change: {
+                actions: [
+                    {
+                        actionType: 'reload',
+                        componentId: `flink-job-id-input-select-${id}`
+                    },
+                ]
+            }
+        }*/
     }
 }

web/components/table-tab.js

@@ -28,17 +28,18 @@ function tableTab() {
                         // interval: 10000,
                         filter: {
                             title: '表筛选',
+                            ...formReloadFlinkJobIdTextInputAndAliasTextInput("58d0da94-1b3c-4234-948d-482ae3425e70"),
                             body: [
                                 {
                                     type: 'group',
                                     body: [
                                         {
-                                            ...flinkJobIdTextInput(),
-                                            size: 'md',
+                                            ...flinkJobIdTextInput("58d0da94-1b3c-4234-948d-482ae3425e70"),
+                                            size: 'lg',
                                         },
                                         {
-                                            ...aliasTextInput(),
-                                            size: 'md',
+                                            ...aliasTextInput("58d0da94-1b3c-4234-948d-482ae3425e70"),
+                                            size: 'lg',
                                         },
                                     ]
                                 },

web/components/tool-tab.js

@@ -97,12 +97,13 @@ function toolTab() {
                         force: "${force === 'undefined' ? undefined : force|default:undefined}",
                     }
                 },
+                ...formReloadFlinkJobIdTextInputAndAliasTextInput("0fe6a96c-6b6e-4346-b18e-c631c2389f48"),
                 body: [
                     {
                         type: 'group',
                         body: [
-                            flinkJobIdTextInput(true),
-                            aliasTextInput(true),
+                            flinkJobIdTextInput("0fe6a96c-6b6e-4346-b18e-c631c2389f48", true),
+                            aliasTextInput("0fe6a96c-6b6e-4346-b18e-c631c2389f48", true),
                         ]
                     },
                     {