From 80d7f2927a360ca321477958a5a9647eb09b7467 Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Tue, 20 Sep 2022 11:19:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BD=E9=99=85=E5=8C=96=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=20=E5=90=88=E5=B9=B6=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/en.js                       |  12 +-
 frontend/src/lang/tw.js                       | 172 ++--
 frontend/src/lang/zh.js                       |   6 +-
 .../component/MarketPreview.vue               |   6 +-
 .../src/views/system/datasource/DsAppForm.vue | 860 ++++++++++++++++
 .../src/views/system/datasource/DsForm.vue    | 947 ++++++++----------
 6 files changed, 1352 insertions(+), 651 deletions(-)
 create mode 100644 frontend/src/views/system/datasource/DsAppForm.vue

diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 269e52af98..cd9db96d02 100644
--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@@ -473,12 +473,12 @@ export default {
     new_folder: 'New Folder',
     search_fields: 'Search Fields',
     show_rows: 'Show Rows',
-    display: 'display',
-    that_s_ok: 'row',
+    display: 'Display',
+    row: 'Row',
     restricted_objects: 'Restricted Objects',
     select_data_source: 'Select Data Source',
     by_table_name: 'Search by table name',
-    run_a_query: 'run a query',
+    run_a_query: 'Run a query',
     running_results: 'Running results',
     parameter_type: 'Parameter Type',
     run_failed: 'Run failed',
@@ -497,11 +497,11 @@ export default {
     name_already_exists: 'Folder name already exists',
     data_preview: 'Data preview',
     original_name: 'Original Name',
-    database: 'database',
+    database: 'Database',
     selected: 'Selected:',
-    zhang_biao: 'Zhang Biao',
+    table: 'Table',
     no_dataset_click: 'No dataset, click',
-    newly_build: 'newly build',
+    create: 'Create',
     new_folder_first: 'Please create a new folder first',
     on_the_left: 'Please select a dataset on the left',
     expression_syntax_error: 'Field expression syntax error',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index b02b2688c1..078c88b4b6 100644
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@@ -31,7 +31,7 @@ export default {
     },
     table: {
       ok: '確定',
-      custom_table_fields: '自定義錶格字段',
+      custom_table_fields: '自定義表格字段',
       custom_table_fields_desc: '固定字段不在選擇範圍'
     },
     steps: {
@@ -54,7 +54,7 @@ export default {
     tinymce: '富文本編輯器',
     markdown: 'Markdown',
     jsonEditor: 'JSON 編輯器',
-    dndList: '列錶拖拽',
+    dndList: '列表拖拽',
     splitPane: 'Splitpane',
     avatarUpload: '頭像上傳',
     dropzone: 'Dropzone',
@@ -65,10 +65,10 @@ export default {
     dragDialog: '拖拽 Dialog',
     dragSelect: '拖拽 Select',
     dragKanban: '可拖拽看闆',
-    charts: '圖錶',
-    keyboardChart: '鍵盤圖錶',
+    charts: '圖表',
+    keyboardChart: '鍵盤圖表',
     lineChart: '摺線圖',
-    mixChart: '混合圖錶',
+    mixChart: '混合圖表',
     example: '綜合實例',
     nested: '路由嵌套',
     menu1: '菜單1',
@@ -84,10 +84,10 @@ export default {
     inlineEditTable: 'Table 內編輯',
     complexTable: '綜合 Table',
     tab: 'Tab',
-    form: '錶單',
+    form: '表單',
     createArticle: '創建文章',
     editArticle: '編輯文章',
-    articleList: '文章列錶',
+    articleList: '文章列表',
     errorPages: '錯誤頁面',
     page401: '401',
     page404: '404',
@@ -95,7 +95,7 @@ export default {
     excel: 'Excel',
     exportExcel: '導出 Excel',
     selectExcel: '導出 已選擇項',
-    mergeHeader: '導出 多級錶頭',
+    mergeHeader: '導出 多級表頭',
     uploadExcel: '上傳 Excel',
     zip: 'Zip',
     pdf: 'PDF',
@@ -403,7 +403,7 @@ export default {
     hour: '小時',
     minute: '分鐘',
     day: '天',
-    by_task_name: '通過任務名稱蒐索',
+    by_task_name: '通過任務名稱搜索',
     delete_this_task: '確定删除該任務嗎？',
     all_read_successfully: '全部已讀成功全部已读成功',
     message_receiving_management: '消息接收管理',
@@ -434,7 +434,7 @@ export default {
     read_message: '已讀消息',
     all_messages: '全部消息',
     message_list: '消息清單',
-    by_plugin_name: '通過挿件名稱蒐索',
+    by_plugin_name: '通過挿件名稱搜索',
     unable_to_uninstall: '內寘挿件，無法卸載',
     free: '免費',
     cost: '費用',
@@ -443,8 +443,8 @@ export default {
     installation_time: '安裝時間'
   },
   table: {
-    dynamicTips1: '固定錶頭, 按照錶頭順序排序',
-    dynamicTips2: '不固定錶頭, 按照點擊順序排序',
+    dynamicTips1: '固定表頭, 按照表頭順序排序',
+    dynamicTips2: '不固定表頭, 按照點擊順序排序',
     dragTips1: '默認順序',
     dragTips2: '拖拽後順序',
     title: '標題',
@@ -469,15 +469,15 @@ export default {
     confirm: '確 定'
   },
   deDataset: {
-    search_by_name: '通過名稱蒐索',
+    search_by_name: '通過名稱搜索',
     new_folder: '新建資料夾',
-    search_fields: '蒐索欄位',
+    search_fields: '搜索欄位',
     show_rows: '顯示行數',
     display: '顯示',
-    that_s_ok: '行',
+    row: '行',
     restricted_objects: '受限對象',
     select_data_source: '選擇資料來源',
-    by_table_name: '通過錶名稱蒐索',
+    by_table_name: '通過表名稱搜索',
     run_a_query: '運行査詢',
     running_results: '運行結果',
     parameter_type: '參數類型',
@@ -499,18 +499,18 @@ export default {
     original_name: '原始名稱',
     database: '資料庫',
     selected: '已選：',
-    zhang_biao: '張錶',
+    table: '表',
     no_dataset_click: '暫無數据集，點擊',
-    newly_build: '新建',
+    create: '新建',
     new_folder_first: '請先新建資料夾',
     on_the_left: '請在左側選擇數据集',
     expression_syntax_error: '欄位運算式語法錯誤',
-    create_dashboard: '創建儀錶板',
+    create_dashboard: '創建儀表板',
     cannot_be_empty: 'SQL不能為空',
     to_run_query: '點擊運行査詢',
     the_running_results: '即可查看運行結果',
     data_reference: '數據參攷',
-    want_to_replace: '替換可能會影響自定義數据集、關聯數据集、儀錶板等，是否替換？',
+    want_to_replace: '替換可能會影響自定義數据集、關聯數据集、儀表板等，是否替換？',
     replace_the_data: '確定替換數據嗎？',
     append_successfully: '追加成功',
     already_exists: '數据集名稱已存在',
@@ -878,7 +878,7 @@ export default {
     table_borders: '表格邊框',
     subject_name: '主題名稱',
     template_name: '模版名稱',
-    search_keywords: '蒐索關鍵字',
+    search_keywords: '搜索關鍵字',
     delete_this_topic: '確定删除該主題嗎？',
     network_error: '網絡錯誤',
     to_overwrite_them: '當前分類存在相同名稱模版，是否覆蓋？',
@@ -892,7 +892,7 @@ export default {
     edit_template: '編輯模版',
     edit_classification: '編輯分類',
     classification_name: '分類名稱',
-    by_event_details: '通過事件詳情蒐索',
+    by_event_details: '通過事件詳情搜索',
     password_input_error: '原始密碼輸入錯誤'
   },
   chart: {
@@ -929,7 +929,7 @@ export default {
     add_db_table: '添加數據庫數據集',
     add_api_table: '添加API數據集',
     pls_slc_data_source: '請選擇數據源',
-    table: '錶',
+    table: '表',
     edit: '編輯',
     create_view: '創建試圖',
     data_preview: '數據預覽',
@@ -937,7 +937,7 @@ export default {
     quota: '指標',
     title: '標題',
     show: '顯示',
-    chart_type: '圖錶類型',
+    chart_type: '圖表類型',
     shape_attr: '圖形屬性',
     module_style: '組件樣式',
     result_filter: '過濾器',
@@ -1064,19 +1064,19 @@ export default {
     belong_group: '所屬分組',
     select_group: '選擇分組',
     name_can_not_empty: '名稱不能爲空',
-    template_can_not_empty: '請選擇儀錶版',
+    template_can_not_empty: '請選擇儀表版',
     custom_count: '記錄數',
-    table_title_fontsize: '錶頭字體大小',
-    table_item_fontsize: '錶格字體大小',
-    table_header_bg: '錶頭背景',
-    table_item_bg: '錶格背景',
+    table_title_fontsize: '表頭字體大小',
+    table_item_fontsize: '表格字體大小',
+    table_header_bg: '表頭背景',
+    table_item_bg: '表格背景',
     table_header_font_color: '表頭字體',
     table_item_font_color: '表格字體',
     stripe: '斑馬紋',
     start_angle: '起始角度',
     end_angle: '結束角度',
     style_priority: '樣式優先級',
-    dashboard: '儀錶闆',
+    dashboard: '儀表闆',
     dimension_color: '名稱顔色',
     quota_color: '值顔色',
     dimension_font_size: '名稱字體大小',
@@ -1090,8 +1090,8 @@ export default {
     filter_condition: '過濾條件',
     filter_field_can_null: '過濾字段必填',
     preview_100_data: '預覽前100條記錄',
-    chart_table_normal: '彙總錶',
-    chart_table_info: '明細錶',
+    chart_table_normal: '彙總表',
+    chart_table_info: '明細表',
     chart_card: '指標卡',
     chart_bar: '基礎柱狀圖',
     chart_bar_stack: '堆疊柱狀圖',
@@ -1103,7 +1103,7 @@ export default {
     chart_pie_rose: '南丁格爾玫瑰圖',
     chart_funnel: '漏鬥圖',
     chart_radar: '雷達圖',
-    chart_gauge: '儀錶盤',
+    chart_gauge: '儀表盤',
     chart_map: '地圖',
     dateStyle: '日期顯示',
     datePattern: '日期格式',
@@ -1119,8 +1119,8 @@ export default {
     chart_show_error: '無法正常顯示',
     chart_error_tips: '如有疑問請聯繫管理員',
     title_cannot_empty: '標題不能爲空',
-    table_title_height: '錶頭行高',
-    table_item_height: '錶格行高',
+    table_title_height: '表頭行高',
+    table_item_height: '表格行高',
     axis_show: '軸線顯示',
     axis_color: '軸線顔色',
     axis_width: '軸線寬度',
@@ -1205,7 +1205,7 @@ export default {
     axis_value_max: '最大值',
     axis_value_split: '間隔',
     axis_auto: '自動',
-    table_info_switch: '明細錶切換將清空維度',
+    table_info_switch: '明細表切換將清空維度',
     drag_block_value_axis_main: '主軸值',
     drag_block_value_axis_ext: '副軸值',
     yAxis_main: '主縱軸',
@@ -1240,7 +1240,7 @@ export default {
     drag_block_word_cloud_size: '詞大小',
     splitCount_less_100: '刻度數範圍0-100',
     change_chart_type: '更改類型',
-    chart_type_table: '錶格',
+    chart_type_table: '表格',
     chart_type_quota: '指標',
     chart_type_trend: '趨勢',
     chart_type_compare: '比較',
@@ -1429,11 +1429,11 @@ export default {
     sql_data: 'SQL 數據集',
     excel_data: 'Excel 數據集',
     custom_data: '自定義數據集',
-    pls_slc_tbl_left: '請從左側選擇錶',
+    pls_slc_tbl_left: '請從左側選擇表',
     add_db_table: '添加數據庫數據集',
     add_api_table: '添加API數據集',
     pls_slc_data_source: '請選擇數據源',
-    table: '錶',
+    table: '表',
     edit: '編輯',
     create_view: '創建視圖',
     data_preview: '數據預覽',
@@ -1468,7 +1468,7 @@ export default {
     execute_rate: '執行頻率',
     execute_once: '立即執行',
     simple_cron: '簡單重複',
-    cron_config: '錶達式設定',
+    cron_config: '表達式設定',
     no_limit: '無限製',
     set_end_time: '設定結束時間',
     operate: '操作',
@@ -1500,21 +1500,21 @@ export default {
     preview_total: '共',
     pls_input_less_5: '請輸入5位以內的正整數',
     field_edit: '編輯字段',
-    table_already_add_to: '該錶已添加至',
+    table_already_add_to: '該表已添加至',
     uploading: '上傳中...',
     add_union: '新建關聯',
     union_setting: '關聯設置',
     pls_slc_union_field: '請選擇關聯字段',
-    pls_slc_union_table: '請選擇關聯錶',
-    source_table: '關聯錶',
+    pls_slc_union_table: '請選擇關聯表',
+    source_table: '關聯表',
     source_field: '關聯字段',
-    target_table: '被關聯錶',
+    target_table: '被關聯表',
     target_field: '被關聯字段',
     union_relation: '關聯關繫',
     pls_setting_union_success: '請正確設置關聯關繫',
     invalid_dataset: 'Kettle未運行，無效數據集',
     check_all: '全選',
-    can_not_union_self: '被關聯錶不能與關聯錶相同',
+    can_not_union_self: '被關聯表不能與關聯表相同',
     float: '小數',
     edit_custom_table: '編輯自定義數據集',
     edit_field: '編輯字段',
@@ -1534,7 +1534,7 @@ export default {
     task_edit_title: '編輯任務',
     sync_latter: '稍後同步',
     task: {
-      list: '任務列錶',
+      list: '任務列表',
       record: '執行記錄',
       create: '新建任務',
       name: '任務名稱',
@@ -1550,7 +1550,7 @@ export default {
       pending: '暫停',
       confirm_exec: '手動觸發執行？',
       change_success: '狀態切換成功',
-      excel_replace_msg: '可能會影響計算欄位、自定義數據集、關聯數據集、儀錶板等，確認替換？',
+      excel_replace_msg: '可能會影響計算欄位、自定義數據集、關聯數據集、儀表板等，確認替換？',
       effect_ext_field: '會影響計算欄位'
     },
     field_group_type: '分類',
@@ -1564,7 +1564,7 @@ export default {
     d_q_trans: '維度/指標轉換',
     add_calc_field: '新建計算字段',
     input_name: '請輸入名稱',
-    field_exp: '字段錶達式',
+    field_exp: '字段表達式',
     data_type: '數據類型',
     click_ref_field: '點擊引用字段',
     click_ref_function: '點擊引用函數',
@@ -1575,7 +1575,7 @@ export default {
     ple_select_excel: '請選擇要導入的 Excel',
     merge: '合並',
     no_merge: '不合並',
-    merge_msg: '數據錶中存在字段一致的情況，是否合並到一個數據集中?',
+    merge_msg: '數據表中存在字段一致的情況，是否合並到一個數據集中?',
     merge_title: '合並數據',
     field_name_less_50: '字段名不能超過50個字符',
     excel_info_1: '1、文件終不能存在合併單元格；',
@@ -1772,10 +1772,10 @@ export default {
     on_the_left: '請在左側選擇驅動',
     no_data_table: '暫無資料表',
     on_the_left: '請在左側選擇資料來源',
-    table_name: '錶名稱',
+    table_name: '表名稱',
     create_dataset: '創建數据集',
     field_description: '欄位描述',
-    table_description: '錶描述',
+    table_description: '表描述',
     relational_database: '關係型數據庫',
     non_relational_database: '非關係型數據庫',
     all: '所有',
@@ -1887,9 +1887,9 @@ export default {
     over_time: '有效期',
     link_expire: '鏈接已過期！',
     link_share: '鏈接分享',
-    link_share_desc: '開啓鏈接後，任何人可通過此鏈接訪問儀錶闆。',
+    link_share_desc: '開啓鏈接後，任何人可通過此鏈接訪問儀表闆。',
     share: '分享',
-    remove_share_confirm: '確認取消當前儀錶闆所有分享？',
+    remove_share_confirm: '確認取消當前儀表闆所有分享？',
     share_in: '分享給我',
     share_out: '我分享的',
     who_share: '分享人',
@@ -1898,12 +1898,12 @@ export default {
     org: '組織',
     role: '角色',
     user: '用戶',
-    datalist: '視圖列錶',
+    datalist: '視圖列表',
     group: '目錄',
-    panel: '儀錶闆',
-    panel_list: '儀錶闆',
+    panel: '儀表闆',
+    panel_list: '儀表闆',
     groupAdd: '新建目錄',
-    panelAdd: '新建儀錶闆',
+    panelAdd: '新建儀表闆',
     delete: '刪除',
     move_to: '移動到',
     rename: '重命名',
@@ -1925,8 +1925,8 @@ export default {
     add_category: '添加分類',
     add_app_category: '添加应用分類',
     filter_keywords: '輸入關鍵字進行過濾',
-    dashboard_theme: '儀錶闆主題',
-    table: '錶格',
+    dashboard_theme: '儀表闆主題',
+    table: '表格',
     gap: '有間隙',
     no_gap: '無間隙',
     component_gap: '組件間隙',
@@ -1934,10 +1934,10 @@ export default {
     minute: '分鐘',
     second: '秒',
     photo: '圖片',
-    default_panel: '默認儀錶闆',
+    default_panel: '默認儀表闆',
     create_public_links: '創建公共鏈接',
     to_default: '另存爲默認',
-    to_default_panel: '另存爲默認儀錶闆',
+    to_default_panel: '另存爲默認儀表闆',
     store: '收藏',
     save_to_panel: '保存爲模闆',
     export_to_panel: '導出爲模闆',
@@ -1947,7 +1947,7 @@ export default {
     preview: '預覽',
     fullscreen_preview: '全屏預覽',
     new_tab_preview: '新Tab頁預覽',
-    select_panel_from_left: '請從左側選擇儀錶闆',
+    select_panel_from_left: '請從左側選擇儀表闆',
     template_name: '模闆名稱',
     template: '模闆',
     category: '分類',
@@ -1959,9 +1959,9 @@ export default {
     belong_to_category: '所屬類別',
     pls_select_belong_to_category: '請選擇所屬類別',
     template_name_cannot_be_empty: '模闆名稱不能爲空',
-    select_by_table: '按錶選擇',
-    data_list: '數據列錶',
-    component_list: '組件列錶',
+    select_by_table: '按表選擇',
+    data_list: '數據列表',
+    component_list: '組件列表',
     custom_scope: '控製範圍',
     binding_parameters: '參數',
     multiple_choice: '多選',
@@ -1978,7 +1978,7 @@ export default {
     insert_picture: '插入圖片',
     redo: '重做',
     undo: '撤銷',
-    panelNull: '這是個空的儀錶闆，可以通過編輯來豐富內容',
+    panelNull: '這是個空的儀表闆，可以通過編輯來豐富內容',
     copy: '複製',
     paste: '黏貼',
     cut: '剪切',
@@ -2024,12 +2024,12 @@ export default {
     select_component: '請選擇組件',
     other_module: '其他',
     content: '內容',
-    default_panel_name: '默認儀錶闆名稱',
-    source_panel_name: '原儀錶闆名稱',
+    default_panel_name: '默認儀表闆名稱',
+    source_panel_name: '原儀表闆名稱',
     content_style: '內容樣式',
     canvas_self_adaption: '自適應畫佈區域',
-    panel_save_tips: '儀錶闆已變動，是否保存？',
-    panel_save_warn_tips: '如果未保存，妳對儀錶闆做的變更將會丟失！',
+    panel_save_tips: '儀表闆已變動，是否保存？',
+    panel_save_warn_tips: '如果未保存，妳對儀表闆做的變更將會丟失！',
     do_not_save: '不保存',
     save: '保存',
     drill: '下鑽',
@@ -2056,7 +2056,7 @@ export default {
     new_window: '新窗口',
     now_window: '當前窗口',
     hyperLinks: '目標地址',
-    link_open_tips: '儀錶闆非編輯狀態可打開鏈接',
+    link_open_tips: '儀表闆非編輯狀態可打開鏈接',
     data_loading: '數據準備中...',
     export_loading: '導出中...',
     export_pdf: '導出PDF',
@@ -2067,8 +2067,8 @@ export default {
     open_model: '打開方式',
     link_type: '鏈接類型',
     link_outer: '外部鏈接',
-    link_panel: '儀錶闆',
-    select_jump_panel: '選擇關聯的儀錶闆',
+    link_panel: '儀表闆',
+    select_jump_panel: '選擇關聯的儀表闆',
     link_view: '聯動視圖',
     link_view_field: '聯動視圖字段',
     add_jump_field: '追加跳轉聯動依賴字段',
@@ -2088,11 +2088,11 @@ export default {
     video_add_tips: '請點擊添加配置視頻信息...',
     web_add_tips: '請點擊添加網頁信息...',
     panel_view_result_show: '視圖結果',
-    panel_view_result_tips: '選擇儀錶闆會覆蓋視圖的結果展示數量，取值範圍1~10000',
+    panel_view_result_tips: '選擇儀表闆會覆蓋視圖的結果展示數量，取值範圍1~10000',
     timeout_refresh: '請求超時，稍後刷新...',
     mobile_layout: '移動端佈局',
     component_hidden: '隱藏的組件',
-    public_link_tips: '當前是公共鏈接模式，目標儀錶闆未設置公共鏈接，無法跳轉',
+    public_link_tips: '當前是公共鏈接模式，目標儀表闆未設置公共鏈接，無法跳轉',
     input_title: '請輸入標題',
     show_title: '標題',
     default_settings: '默認值設置',
@@ -2173,7 +2173,7 @@ export default {
     linkAuth: '數據源',
     datasetAuth: '數據集',
     chartAuth: '視圖',
-    panelAuth: '儀錶闆',
+    panelAuth: '儀表闆',
     menuAuth: '菜單和操作',
     deptHead: '所有組織',
     roleHead: '所有角色',
@@ -2181,7 +2181,7 @@ export default {
     linkAuthHead: '所有數據源',
     datasetAuthHead: '所有數據集',
     chartAuthHead: '所有視圖',
-    panelAuthHead: '所有儀錶闆',
+    panelAuthHead: '所有儀表闆',
     menuAuthHead: '所有菜單和操作',
     view: '查看',
     use: '使用',
@@ -2289,7 +2289,7 @@ export default {
     web_msg: '站內消息通知',
     show_more: '查看更多',
     all_type: '全部類型',
-    panel_type: '儀錶闆分享',
+    panel_type: '儀表闆分享',
     dataset_type: '數據集同步',
     content: '消息內容',
     sned_time: '提交時間',
@@ -2300,8 +2300,8 @@ export default {
     please_select: '請至少選擇一條消息',
     mark_success: '標記已讀成功',
     receive_manage: '接收管理',
-    i18n_msg_type_panel_share: '儀錶闆分享',
-    i18n_msg_type_panel_share_cacnel: '儀錶闆取消分享',
+    i18n_msg_type_panel_share: '儀表闆分享',
+    i18n_msg_type_panel_share_cacnel: '儀表闆取消分享',
     i18n_msg_type_dataset_sync: '數據集同步',
     i18n_msg_type_dataset_sync_success: '數據集同步成功',
     i18n_msg_type_dataset_sync_faild: '數據集同步失敗',
@@ -2355,11 +2355,11 @@ export default {
     placeholder: '請選擇'
   },
   detextgridselect: {
-    label: '文本列錶',
+    label: '文本列表',
     placeholder: '請選擇'
   },
   denumbergridselect: {
-    label: '數字列錶',
+    label: '數字列表',
     placeholder: '請選擇'
   },
   dedaterange: {
@@ -2390,8 +2390,8 @@ export default {
     open_mode: '展示風格',
     m_default: '簡單風格',
     m_elec: '電子時鐘',
-    m_simple: '簡單錶盤',
-    m_complex: '複雜錶盤',
+    m_simple: '簡單表盤',
+    m_complex: '複雜表盤',
     select_openMode: '請選擇展示風格',
     select_time_format: '請選擇時間各式',
     select_date_format: '請選擇日期格式'
@@ -2419,7 +2419,7 @@ export default {
   },
   emailtask: {
     title: '報告主題',
-    panel: '儀錶闆',
+    panel: '儀表闆',
     content: '報告正文',
     recipients: '收件人',
     recisetting: '接受設置',
@@ -2431,7 +2431,7 @@ export default {
     default: '默認',
     custom: '自定義',
     rate_type: '發送p頻率',
-    cron_exp: 'cron錶達式',
+    cron_exp: 'cron表達式',
     exec_time: '執行時間',
     start_time: '開始時間',
     end_time: '結束時間',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 2091cf6000..cfe0b029cf 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -474,7 +474,7 @@ export default {
     search_fields: '搜索字段',
     show_rows: '显示行数',
     display: '显示',
-    that_s_ok: '行',
+    row: '行',
     restricted_objects: '受限对象',
     select_data_source: '选择数据源',
     by_table_name: '通过表名称搜索',
@@ -499,9 +499,9 @@ export default {
     original_name: '原始名称',
     database: '数据库',
     selected: '已选：',
-    zhang_biao: '张表',
+    table: '张表',
     no_dataset_click: '暂无数据集，点击',
-    newly_build: '新建',
+    create: '新建',
     new_folder_first: '请先新建文件夹',
     on_the_left: '请在左侧选择数据集',
     expression_syntax_error: '字段表达式语法错误',
diff --git a/frontend/src/views/panel/appTemplateMarket/component/MarketPreview.vue b/frontend/src/views/panel/appTemplateMarket/component/MarketPreview.vue
index 1bd14b1720..610e237754 100644
--- a/frontend/src/views/panel/appTemplateMarket/component/MarketPreview.vue
+++ b/frontend/src/views/panel/appTemplateMarket/component/MarketPreview.vue
@@ -49,7 +49,7 @@
       :destroy-on-close="true"
     >
       <el-row class="ds-from-main">
-        <DsForm :params="dsParams" v-if="applyNewVisible" :t-data="this.tData" :ds-types="dsTypes" :opt-type="'appApply'" :attach-params="attachParams"></DsForm>
+        <DsAppForm :params="dsParams" v-if="applyNewVisible" :t-data="this.tData" :ds-types="dsTypes" :opt-type="'appApply'" :attach-params="attachParams"></DsAppForm>
       </el-row>
     </el-dialog>
   </el-row>
@@ -62,11 +62,11 @@ import { DEFAULT_COMMON_CANVAS_STYLE_STRING } from '@/views/panel/panel'
 import TemplateMarketPreviewItem from '@/views/panel/appTemplateMarket/component/TemplateMarketPreviewItem'
 import AppTemplateLog from "@/views/panel/appTemplateMarket/log";
 import {listDatasourceType} from "@/api/system/datasource";
-import DsForm from "@/views/system/datasource/DsForm";
+import DsAppForm from "@/views/system/datasource/DsAppForm";
 
 export default {
   name: 'MarketPreview',
-  components: {DsForm, AppTemplateLog, TemplateMarketPreviewItem },
+  components: {DsAppForm, AppTemplateLog, TemplateMarketPreviewItem },
   props: {
     previewId: {
       type: String,
diff --git a/frontend/src/views/system/datasource/DsAppForm.vue b/frontend/src/views/system/datasource/DsAppForm.vue
new file mode 100644
index 0000000000..49dc9ff906
--- /dev/null
+++ b/frontend/src/views/system/datasource/DsAppForm.vue
@@ -0,0 +1,860 @@
+<template>
+  <layout-content :header="headName">
+    <template v-if="!optType" v-slot:header>
+      <el-icon name="back" class="back-button" @click.native="backToList" />
+      {{
+        params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('datasource.show_info') : formType == 'add' ? $t('datasource.create') : $t('datasource.modify')
+      }}
+    </template>
+    <template v-if="optType==='appApply'">
+      <span>模板信息</span>
+    </template>
+    <div v-if="optType==='appApply'">
+      <el-form
+        ref="attachParamsForm"
+        :model="attachForm"
+        :rules="rule"
+        size="small"
+        label-width="180px"
+        label-position="right"
+      >
+        <el-form-item :label="'仪表板位置'" prop="panelId">
+            <treeselect
+              v-model="attachForm.panelId"
+              :clearable="false"
+              :options="panelGroupList"
+              :normalizer="normalizer"
+              :placeholder="$t('chart.select_group')"
+              :no-children-text="$t('commons.treeselect.no_children_text')"
+              :no-options-text="$t('commons.treeselect.no_options_text')"
+              :no-results-text="$t('commons.treeselect.no_results_text')"
+            />
+        </el-form-item>
+        <el-form-item :label="'仪表板名称'" prop="panelName">
+          <el-input v-model="attachForm.panelName" />
+        </el-form-item>
+        <el-form-item :label="'数据集位置'" prop="desc">
+          <treeselect
+            v-model="attachForm.datasetGroupId"
+            :clearable="false"
+            :options="datasetGroupList"
+            :normalizer="normalizer"
+            :placeholder="$t('chart.select_group')"
+            :no-children-text="$t('commons.treeselect.no_children_text')"
+            :no-options-text="$t('commons.treeselect.no_options_text')"
+            :no-results-text="$t('commons.treeselect.no_results_text')"
+          />
+        </el-form-item>
+        <el-form-item :label="'数据集分组名称'" prop="datasetGroupName">
+          <el-input v-model="attachForm.datasetGroupName" />
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <template v-if="optType==='appApply'">
+      <span>数据源信息</span>
+    </template>
+    <div>
+      <el-form
+        ref="dsForm"
+        :model="form"
+        :rules="rule"
+        size="small"
+        :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit"
+        label-width="180px"
+        label-position="right"
+      >
+        <el-form-item :label="$t('commons.name')" prop="name">
+          <el-input v-model="form.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item :label="$t('commons.description')" prop="desc">
+          <el-input v-model="form.desc" autocomplete="off" />
+        </el-form-item>
+        <el-form-item :label="$t('datasource.type')" prop="type">
+          <el-select
+            v-model="form.type"
+            :placeholder="$t('datasource.please_choose_type')"
+            class="select-width"
+            style="width: 100%"
+            :disabled="formType=='modify' || (formType==='add' && params && !!params.type)"
+            filterable
+            @change="changeType()"
+          >
+            <el-option
+              v-for="item in dsTypes"
+              :key="item.type"
+              :label="item.name"
+              :value="item.type"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item v-if="datasourceType.isJdbc" :label="$t('driver.driver')">
+          <el-select
+            v-model="form.configuration.customDriver"
+            :placeholder="$t('driver.please_choose_driver')"
+            class="select-width"
+            style="width: 100%"
+            filterable
+          >
+            <el-option
+              v-for="item in driverList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+              :disabled="!item.driverClass"
+            />
+          </el-select>
+        </el-form-item>
+
+        <ds-configuration v-if="!datasourceType.isPlugin" ref="dsConfig" :datasource-type="datasourceType" :form="form" :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit" />
+        <plugin-com v-if="datasourceType.isPlugin" ref="pluginDsConfig" :component-name="datasourceType.type" :obj="{form, disabled }" />
+
+      </el-form>
+
+      <div v-if="canEdit" slot="footer" class="dialog-footer">
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          @click="validaDatasource"
+        >{{ $t('commons.validate') }}
+        </el-button>
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          type="primary"
+          @click="save"
+        >{{ $t('commons.save') }}
+        </el-button>
+      </div>
+      <div v-else slot="footer" class="dialog-footer">
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          @click="validaDatasource"
+        >{{ $t('commons.validate') }}
+        </el-button>
+        <el-button
+          v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
+          type="primary"
+          @click="changeEdit"
+        >{{ $t('commons.edit') }}
+        </el-button>
+      </div>
+    </div>
+  </layout-content>
+</template>
+
+<script>
+import LayoutContent from '@/components/business/LayoutContent'
+import {
+  addDs,
+  editDs,
+  getSchema,
+  validateDs,
+  validateDsById,
+  checkApiDatasource,
+  listDriverByType
+} from '@/api/system/datasource'
+import { $confirm } from '@/utils/message'
+import i18n from '@/lang/index'
+import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
+import DsConfiguration from '@/views/system/datasource/DsConfiguration'
+import PluginCom from '@/views/system/plugin/PluginCom'
+import {groupTree,appApply} from "@/api/panel/panel";
+import { dsGroupTree } from '@/api/dataset/dataset'
+import { deepCopy } from '@/components/canvas/utils/utils'
+export default {
+  name: 'DsForm',
+  components: {
+    DsConfiguration,
+    LayoutContent,
+    ApiHttpRequestForm,
+    PluginCom
+  },
+  props: {
+    params: {
+      type: Object,
+      default: null
+    },
+    tData: {
+      type: Array,
+      default: null
+    },
+    dsTypes: {
+      type: Array,
+      default: null
+    },
+    attachParams: {
+      type: Object,
+      default: null
+    },
+    optType:{
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      disabled: false,
+      attachRule: {
+        datasetGroupId: [{ required: true, message: i18n.t('chart.select_group'), trigger: 'blur' }],
+        panelId: [{ required: true, message: i18n.t('chart.select_group'), trigger: 'blur' }]
+      },
+      panelGroupList: [],
+      datasetGroupList: [],
+      attachForm:{
+        appTemplateId:'',
+        panelId:'',
+        panelName:'',
+        datasetGroupId:'0',
+        datasetGroupName: ''
+      },
+      form: {
+        configuration: {
+          initialPoolSize: 5,
+          extraParams: '',
+          minPoolSize: 5,
+          maxPoolSize: 50,
+          maxIdleTime: 30,
+          acquireIncrement: 5,
+          idleConnectionTestPeriod: 5,
+          connectTimeout: 5,
+          customDriver: 'default',
+          queryTimeout: 30
+        },
+        apiConfiguration: []
+      },
+      datasourceType: {},
+      rule: {
+        name: [{ required: true, message: i18n.t('datasource.input_name'), trigger: 'blur' },
+          { min: 2, max: 25, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur' }],
+        desc: [{ min: 2, max: 50, message: i18n.t('datasource.input_limit_2_50'), trigger: 'blur' }],
+        type: [{ required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur' }],
+        'configuration.dataBase': [{
+          required: true,
+          message: i18n.t('datasource.please_input_data_base'),
+          trigger: 'blur'
+        }],
+        'configuration.connectionType': [{
+          required: true,
+          message: i18n.t('datasource.please_select_oracle_type'),
+          trigger: 'blur'
+        }],
+        'configuration.username': [{
+          required: true,
+          message: i18n.t('datasource.please_input_user_name'),
+          trigger: 'blur'
+        }],
+        'configuration.password': [{
+          required: true,
+          message: i18n.t('datasource.please_input_password'),
+          trigger: 'blur'
+        }],
+        'configuration.host': [{ required: true, message: i18n.t('datasource.please_input_host'), trigger: 'blur' }],
+        'configuration.url': [{ required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur' }],
+        'configuration.port': [{ required: true, message: i18n.t('datasource.please_input_port'), trigger: 'blur' }],
+        'configuration.initialPoolSize': [{
+          required: true,
+          message: i18n.t('datasource.please_input_initial_pool_size'),
+          trigger: 'blur'
+        }],
+        'configuration.minPoolSize': [{
+          required: true,
+          message: i18n.t('datasource.please_input_min_pool_size'),
+          trigger: 'blur'
+        }],
+        'configuration.maxPoolSize': [{
+          required: true,
+          message: i18n.t('datasource.please_input_max_pool_size'),
+          trigger: 'blur'
+        }],
+        'configuration.maxIdleTime': [{
+          required: true,
+          message: i18n.t('datasource.please_input_max_idle_time'),
+          trigger: 'blur'
+        }],
+        'configuration.acquireIncrement': [{
+          required: true,
+          message: i18n.t('datasource.please_input_acquire_increment'),
+          trigger: 'blur'
+        }],
+        'configuration.connectTimeout': [{
+          required: true,
+          message: i18n.t('datasource.please_input_connect_timeout'),
+          trigger: 'blur'
+        }],
+        'url': [{ required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur' }],
+        'dataPath': [{ required: true, message: i18n.t('datasource.please_input_dataPath'), trigger: 'blur' }]
+      },
+      schemas: [],
+      canEdit: false,
+      originConfiguration: {},
+      edit_api_item: false,
+      add_api_item: true,
+      active: 0,
+      defaultApiItem: {
+        name: '',
+        url: '',
+        method: 'GET',
+        request: {
+          headers: [{}],
+          body: {
+            'type': '',
+            'raw': '',
+            'kvs': []
+          }
+        },
+        fields: []
+      },
+      apiItem: {
+        status: '',
+        name: '',
+        url: '',
+        method: 'GET',
+        dataPath: '',
+        request: {
+          headers: [],
+          body: {
+            'type': '',
+            'raw': '',
+            'kvs': []
+          },
+          authManager: {}
+        },
+        fields: []
+      },
+      reqOptions: [{ id: 'GET', label: 'GET' }, { id: 'POST', label: 'POST' }],
+      loading: false,
+      responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
+      api_table_title: '',
+      api_step2_active_name: 'first',
+      fieldTypes: [
+        { label: this.$t('dataset.text'), value: 0 },
+        { label: this.$t('dataset.time'), value: 1 },
+        { label: this.$t('dataset.value'), value: 2 },
+        { label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3 },
+        { label: this.$t('dataset.location'), value: 5 }
+      ],
+      height: 500,
+      disabledNext: false,
+      driverList: []
+    }
+  },
+  computed: {
+    headName() {
+      if(this.optType==='appApply'){
+        return ''
+      }else if(this.formType==='add'){
+        return this.$t('datasource.create')
+      }else{
+        return this.$t('datasource.modify')
+      }
+    }
+  },
+  created() {
+    if (this.params && this.params.id) {
+      const row = this.params
+      this.edit(row)
+      this.changeType(true)
+    } else {
+      this.create()
+      if (this.params && this.params.type) {
+        this.setType()
+        this.changeType()
+      }
+    }
+    this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
+  },
+  mounted() {
+    if(this.optType==='appApply'){
+      this.getPanelGroupTree()
+      this.getDatasetGroupTree()
+      this.attachForm.appTemplateId = this.attachParams.appTemplateId
+      this.attachForm.panelName = this.attachParams.name
+      this.attachForm.datasetGroupName = this.attachParams.name
+    }
+  },
+  methods: {
+    normalizer(node) {
+      // 去掉children=null的属性
+      if (node.children === null || node.children === 'null') {
+        delete node.children
+      }
+    },
+    getDatasetGroupTree() {
+      dsGroupTree({nodeType: 'group',}).then(res => {
+        this.datasetGroupList = [{
+          id: '0',
+          name: this.$t('dataset.dataset_group'),
+          label: this.$t('dataset.dataset_group'),
+          pid: '0',
+          privileges: 'grant,manage,use',
+          type: 'group',
+          children: res.data
+        }]
+      })
+    },
+    getPanelGroupTree() {
+      groupTree({ nodeType: 'folder' }).then(res => {
+        this.panelGroupList = res.data
+        if(this.panelGroupList && this.panelGroupList.length>0){
+          this.attachForm.panelId =this.panelGroupList[0].id
+        }
+      })
+    },
+    setType() {
+      this.form.type = this.params.type
+      this.form.configuration = {
+        initialPoolSize: 5,
+        extraParams: '',
+        minPoolSize: 5,
+        maxPoolSize: 50,
+        maxIdleTime: 30,
+        acquireIncrement: 5,
+        idleConnectionTestPeriod: 5,
+        connectTimeout: 5,
+        customDriver: 'default',
+        queryTimeout: 30
+      }
+    },
+    changeEdit() {
+      this.canEdit = true
+      this.formType = 'modify'
+      this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
+    },
+    create() {
+      this.formType = 'add'
+      this.canEdit = true
+      this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
+    },
+    edit(row) {
+      this.formType = 'modify'
+      this.form = JSON.parse(JSON.stringify(row))
+      if (row.type === 'api') {
+        this.originConfiguration = JSON.parse(JSON.stringify(this.form.apiConfiguration))
+        this.originConfiguration.forEach(item => {
+          delete item.status
+        })
+        this.originConfiguration = JSON.stringify(this.originConfiguration)
+      } else {
+        this.form.configuration = JSON.parse(this.form.configuration)
+        this.originConfiguration = JSON.stringify(this.form.configuration)
+      }
+      this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
+    },
+    reset() {
+      this.$refs.dsForm.resetFields()
+    },
+    save() {
+      if (!this.form.configuration.schema && (this.form.type === 'oracle' || this.form.type === 'sqlServer' || this.form.type === 'pg' || this.form.type === 'redshift' || this.form.type === 'db2')) {
+        this.$message.error(i18n.t('datasource.please_choose_schema'))
+        return
+      }
+      if (this.form.type !== 'es' && this.form.type !== 'api' && this.form.configuration.port <= 0) {
+        this.$message.error(i18n.t('datasource.port_no_less_then_0'))
+        return
+      }
+      if (this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0) {
+        this.$message.error(i18n.t('datasource.no_less_then_0'))
+        return
+      }
+      let repeat = false
+      const repeatDsName = []
+      if(!this.datasourceType.isPlugin){
+        this.tData.forEach(item => {
+          if (item.id === this.form.type) {
+            item.children.forEach(child => {
+              if (this.formType === 'modify' && child.id === this.form.id) {
+                return
+              }
+              const configuration = JSON.parse(child.configuration)
+              if (!configuration) {
+                return
+              }
+              switch (this.form.type) {
+                case 'mysql':
+                case 'TiDB':
+                case 'StarRocks':
+                case 'hive':
+                case 'mariadb':
+                case 'ds_doris':
+                case 'ck':
+                case 'mongo':
+                case 'mariadb':
+                case 'impala':
+                  if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port) {
+                    repeat = true
+                    repeatDsName.push(child.name)
+                  }
+                  break
+                case 'pg':
+                case 'sqlServer':
+                case 'redshift':
+                case 'oracle':
+                case 'db2':
+                  if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port && configuration.schema == this.form.configuration.schema) {
+                    repeatDsName.push(child.name)
+                    repeat = true
+                  }
+                  break
+                case 'es':
+                  if (configuration.url == this.form.configuration.url) {
+                    repeatDsName.push(child.name)
+                    repeat = true
+                  }
+                  break
+                default:
+                  break
+              }
+            })
+          }
+        })
+      }else {
+       if( this.datasourceType.isJdbc){
+         this.tData.forEach(item => {
+           if (item.id === this.form.type) {
+             item.children.forEach(child => {
+               if (this.formType === 'modify' && child.id === this.form.id) {
+                 return
+               }
+               const configuration = JSON.parse(child.configuration)
+               if (!configuration) {
+                 return
+               }
+               if(configuration.schema != null){
+                 if (configuration.schema == this.form.configuration.schema  && configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port) {
+                   repeat = true
+                   repeatDsName.push(child.name)
+                 }
+               }else {
+                 if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port) {
+                   repeat = true
+                   repeatDsName.push(child.name)
+                 }
+               }
+             })
+           }
+         })
+       }
+      }
+      let status = null
+      if (this.datasourceType.isPlugin) {
+        status = this.$refs['pluginDsConfig'].callPluginInner({ methodName: 'validate' })
+      } else {
+        this.$refs['dsConfig'].$refs['DsConfig'].validate(valid => {
+          status = valid
+        })
+      }
+      if (!status) {
+        return
+      }
+      if(this.optType==='appApply'){
+        this.$refs.attachParamsForm.validate(valid => {
+            if (!valid) {
+              return false
+            }
+          }
+        )
+      }
+      this.$refs.dsForm.validate(valid => {
+        if (!valid) {
+          return false
+        }
+        const method = this.formType === 'add' ? addDs : editDs
+        const form = JSON.parse(JSON.stringify(this.form))
+        if (form.type === 'api') {
+          if (this.form.apiConfiguration.length < 1) {
+            this.$message.error(i18n.t('datasource.api_table_not_empty'))
+            return
+          }
+          form.apiConfiguration.forEach(item => {
+            delete item.status
+          })
+          form.configuration = JSON.stringify(form.apiConfiguration)
+        } else {
+          form.configuration = JSON.stringify(form.configuration)
+        }
+        if(this.optType==='appApply'){
+          const appApplyForm = {
+            ...this.attachForm,
+            datasourceList:[deepCopy(form)]
+          }
+          appApply(appApplyForm).then(res => {
+            this.$success(i18n.t('commons.save_success'))
+            this.$router.push({ name: 'panel', params: res.data })
+          })
+          return
+        }
+        if (this.formType === 'modify' && this.originConfiguration !== form.configuration) {
+          if (repeat) {
+            $confirm(i18n.t('datasource.repeat_datasource_msg') + '[' + repeatDsName.join(',') + '], ' + i18n.t('datasource.confirm_save'), () => {
+              $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
+                this.method(method, form)
+              })
+            })
+          } else {
+            $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
+              this.method(method, form)
+            })
+          }
+          return
+        }
+        if (repeat) {
+          $confirm(i18n.t('datasource.repeat_datasource_msg') + '[' + repeatDsName.join(',') + '], ' + i18n.t('datasource.confirm_save'), () => {
+            this.method(method, form)
+          })
+        } else {
+          this.method(method, form)
+        }
+      })
+    },
+    method(method, form) {
+      method(form).then(res => {
+        this.$success(i18n.t('commons.save_success'))
+        this.refreshType(form)
+        this.backToList()
+      })
+    },
+    getSchema() {
+      this.$refs.dsForm.validate(valid => {
+        if (valid) {
+          const data = JSON.parse(JSON.stringify(this.form))
+          data.configuration = JSON.stringify(data.configuration)
+          getSchema(data).then(res => {
+            this.schemas = res.data
+            this.$success(i18n.t('commons.success'))
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    validaDatasource() {
+      if (!this.form.configuration.schema && this.form.type === 'oracle') {
+        this.$message.error(i18n.t('datasource.please_choose_schema'))
+        return
+      }
+      if (this.form.type !== 'es' && this.form.type !== 'api' && this.form.configuration.port <= 0) {
+        this.$message.error(i18n.t('datasource.port_no_less_then_0'))
+        return
+      }
+      let status = null
+      if (this.datasourceType.isPlugin) {
+        status = this.$refs['pluginDsConfig'].callPluginInner({ methodName: 'validate' })
+      } else {
+        this.$refs['dsConfig'].$refs['DsConfig'].validate(valid => {
+          status = valid
+          if (!valid) {
+            return
+          }
+        })
+      }
+      if (!status) {
+        return
+      }
+      this.$refs.dsForm.validate(valid => {
+        if (valid) {
+          const data = JSON.parse(JSON.stringify(this.form))
+          if (data.type === 'api') {
+            data.configuration = JSON.stringify(data.apiConfiguration)
+          } else {
+            data.configuration = JSON.stringify(data.configuration)
+          }
+          if (data.showModel === 'show' && !this.canEdit) {
+            validateDsById(data.id).then(res => {
+              if (res.success) {
+                this.$success(i18n.t('datasource.validate_success'))
+              } else {
+                if (res.message.length < 2500) {
+                  this.$error(res.message)
+                } else {
+                  this.$error(res.message.substring(0, 2500) + '......')
+                }
+              }
+              this.refreshType(data)
+            })
+          } else {
+            validateDs(data).then(res => {
+              if (res.success) {
+                this.$success(i18n.t('datasource.validate_success'))
+              } else {
+                if (data.type === 'api') {
+                  this.form.apiConfiguration = res.data.apiConfiguration
+                }
+                if (res.message.length < 2500) {
+                  this.$error(res.message)
+                } else {
+                  this.$error(res.message.substring(0, 2500) + '......')
+                }
+              }
+            }).catch(res => {
+              this.$error(res.message)
+            })
+          }
+        } else {
+          return false
+        }
+      })
+    },
+    changeType(init) {
+      for (let i = 0; i < this.dsTypes.length; i++) {
+        if (this.dsTypes[i].type === this.form.type) {
+          if (this.form.type !== 'api' && !init) {
+            this.form.configuration.extraParams = this.dsTypes[i].extraParams
+            this.form.configuration.customDriver = 'default'
+          }
+          this.datasourceType = this.dsTypes[i]
+          if (this.datasourceType.isJdbc) {
+            listDriverByType(this.datasourceType.type).then(res => {
+              this.driverList = []
+              this.driverList.push({ id: 'default', name: 'Default', driverClass: 'Default' })
+              this.driverList = this.driverList.concat(res.data)
+            })
+          }
+        }
+      }
+    },
+    backToList() {
+      this.$emit('switch-component', {})
+    },
+    refreshType(form) {
+      this.$emit('refresh-type', form)
+    },
+    next() {
+      if (this.active === 1) {
+        let hasRepeatName = false
+        if (this.add_api_item) {
+          this.form.apiConfiguration.forEach(item => {
+            if (item.name === this.apiItem.name) {
+              hasRepeatName = true
+            }
+          })
+        } else {
+          const index = this.form.apiConfiguration.indexOf(this.apiItem)
+          for (let i = 0; i < this.form.apiConfiguration.length; i++) {
+            if (i !== index && this.form.apiConfiguration[i].name === this.apiItem.name) {
+              hasRepeatName = true
+            }
+          }
+        }
+        if (hasRepeatName) {
+          this.$message.error(i18n.t('datasource.has_repeat_name'))
+          return
+        }
+        this.$refs.apiItem.validate(valid => {
+          if (valid) {
+            const data = JSON.parse(JSON.stringify(this.apiItem))
+            data.request = JSON.stringify(data.request)
+            this.loading = true
+            this.disabledNext = true
+            checkApiDatasource(data).then(res => {
+              this.loading = false
+              this.disabledNext = false
+              this.apiItem.status = 'Success'
+              this.$success(i18n.t('commons.success'))
+              this.active++
+              this.apiItem.fields = res.data.fields
+              this.$refs.plxTable.reloadData(res.data.datas)
+            }).catch(res => {
+              this.loading = false
+              this.disabledNext = false
+            })
+          } else {
+            this.apiItem.fields = []
+            return false
+          }
+        })
+      }
+    },
+    before() {
+      this.active--
+    },
+    closeEditItem() {
+      this.active = 0
+      this.edit_api_item = false
+    },
+    saveItem() {
+      this.active = 0
+      this.edit_api_item = false
+      if (this.add_api_item) {
+        this.form.apiConfiguration.push(this.apiItem)
+      }
+    },
+    addApiItem(item) {
+      this.$nextTick(() => {
+        this.$refs.apiItem.clearValidate()
+      })
+      if (item) {
+        this.add_api_item = false
+        this.api_table_title = this.$t('datasource.edit_api_table')
+        this.apiItem = item
+      } else {
+        this.add_api_item = true
+        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem))
+        this.api_table_title = this.$t('datasource.add_api_table')
+      }
+      this.active = 1
+      this.edit_api_item = true
+    },
+    deleteItem(item) {
+      this.form.apiConfiguration.splice(this.form.apiConfiguration.indexOf(item), 1)
+    },
+    validateApi(item) {
+      if (undefined) {
+      } else {
+        this.$refs.apiItem.validate(valid => {
+          if (valid) {
+            const data = JSON.parse(JSON.stringify(this.apiItem))
+            data.request = JSON.stringify(data.request)
+            this.loading = true
+            checkApiDatasource(data).then(res => {
+              this.loading = false
+              this.$success(i18n.t('commons.success'))
+              this.apiItem.fields = res.data.fields
+              this.$refs.plxTable.reloadData(res.data.datas)
+            }).catch(res => {
+              this.loading = false
+            })
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    handleClick(tab, event) {
+    }
+  }
+}
+</script>
+<style scoped>
+/* .el-input {
+  width: 300px;
+}
+.el-select {
+  width: 300px;
+} */
+.ms-http-input {
+  width: 500px;
+  margin-top: 5px;
+}
+.tip {
+  padding: 3px 5px;
+  font-size: 16px;
+  border-radius: 0;
+  border-left: 4px solid #409EFF;
+  margin: 5px 5px 10px 5px;
+}
+.el-select ::v-deep input {
+  padding-right: 10px;
+}
+.el-select ::v-deep .el-input__suffix {
+  right: 0;
+}
+.dialog-css ::v-deep .el-dialog__header {
+  padding: 10px 20px 0px;
+}
+.dialog-css ::v-deep .el-dialog__body {
+  padding: 10px 20px 10px;
+}
+.dialog-footer ::v-deep .el-dialog__footer {
+  padding: 10px 10px 10px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/datasource/DsForm.vue b/frontend/src/views/system/datasource/DsForm.vue
index 949c5d8c79..d6225c3e21 100644
--- a/frontend/src/views/system/datasource/DsForm.vue
+++ b/frontend/src/views/system/datasource/DsForm.vue
@@ -7,18 +7,18 @@
           params &&
           params.id &&
           params.showModel &&
-          params.showModel === 'show' &&
+          params.showModel === "show" &&
           !canEdit
-            ? $t('datasource.show_info')
-            : formType == 'add'
-            ? $t('datasource.create')
-            : $t('datasource.modify')
+            ? $t("datasource.show_info")
+            : formType == "add"
+            ? $t("datasource.create")
+            : $t("datasource.modify")
         }}
       </span>
       <div class="apply">
         <template v-if="canEdit">
           <deBtn secondary @click="backToList"
-            >{{ $t('commons.cancel') }}
+            >{{ $t("commons.cancel") }}
           </deBtn>
           <deBtn
             secondary
@@ -27,7 +27,7 @@
               hasDataPermission('manage', params.privileges)
             "
             @click="validaDatasource"
-            >{{ $t('commons.validate') }}
+            >{{ $t("commons.validate") }}
           </deBtn>
           <deBtn
             v-if="
@@ -36,7 +36,7 @@
             "
             type="primary"
             @click="save"
-            >{{ $t('commons.save') }}
+            >{{ $t("commons.save") }}
           </deBtn>
         </template>
         <template v-else>
@@ -47,7 +47,7 @@
                 : hasDataPermission('manage', params.privileges)
             "
             @click="validaDatasource"
-            >{{ $t('commons.validate') }}
+            >{{ $t("commons.validate") }}
           </deBtn>
           <deBtn
             v-if="
@@ -56,7 +56,7 @@
             "
             type="primary"
             @click="changeEdit"
-            >{{ $t('commons.edit') }}
+            >{{ $t("commons.edit") }}
           </deBtn>
         </template>
       </div>
@@ -64,54 +64,6 @@
     <div class="de-ds-cont">
       <div class="de-ds-inner">
         <div class="w600">
-          <template v-if="optType === 'appApply'">
-            <span>模板信息</span>
-          </template>
-          <div v-if="optType === 'appApply'">
-            <el-form
-              ref="attachParamsForm"
-              :model="attachForm"
-              :rules="rule"
-              size="small"
-              label-width="180px"
-              label-position="right"
-            >
-              <el-form-item :label="'仪表板位置'" prop="panelId">
-                <treeselect
-                  v-model="attachForm.panelId"
-                  :clearable="false"
-                  :options="panelGroupList"
-                  :normalizer="normalizer"
-                  :placeholder="$t('chart.select_group')"
-                  :no-children-text="$t('commons.treeselect.no_children_text')"
-                  :no-options-text="$t('commons.treeselect.no_options_text')"
-                  :no-results-text="$t('commons.treeselect.no_results_text')"
-                />
-              </el-form-item>
-              <el-form-item :label="'仪表板名称'" prop="panelName">
-                <el-input v-model="attachForm.panelName" />
-              </el-form-item>
-              <el-form-item :label="'数据集位置'" prop="desc">
-                <treeselect
-                  v-model="attachForm.datasetGroupId"
-                  :clearable="false"
-                  :options="datasetGroupList"
-                  :normalizer="normalizer"
-                  :placeholder="$t('chart.select_group')"
-                  :no-children-text="$t('commons.treeselect.no_children_text')"
-                  :no-options-text="$t('commons.treeselect.no_options_text')"
-                  :no-results-text="$t('commons.treeselect.no_results_text')"
-                />
-              </el-form-item>
-              <el-form-item :label="'数据集分组名称'" prop="datasetGroupName">
-                <el-input v-model="attachForm.datasetGroupName" />
-              </el-form-item>
-            </el-form>
-          </div>
-
-          <template v-if="optType === 'appApply'">
-            <span>数据源信息</span>
-          </template>
           <el-form
             ref="dsForm"
             :model="form"
@@ -190,6 +142,7 @@
 </template>
 
 <script>
+import LayoutContent from "@/components/business/LayoutContent";
 import {
   addDs,
   editDs,
@@ -197,208 +150,180 @@ import {
   validateDs,
   validateDsById,
   checkApiDatasource,
-  listDriverByType
-} from '@/api/system/datasource'
-import { $confirm } from '@/utils/message'
-import i18n from '@/lang/index'
-import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
-import DsConfiguration from '@/views/system/datasource/DsConfiguration'
-import PluginCom from '@/views/system/plugin/PluginCom'
-import { listDatasourceType, listDatasource } from '@/api/system/datasource'
-import deTextarea from '@/components/deCustomCm/deTextarea.vue'
-import msgCfm from '@/components/msgCfm'
-import { groupTree, appApply } from '@/api/panel/panel'
-import { dsGroupTree } from '@/api/dataset/dataset'
-import { deepCopy } from '@/components/canvas/utils/utils'
-
+  listDriverByType,
+} from "@/api/system/datasource";
+import { $confirm } from "@/utils/message";
+import i18n from "@/lang/index";
+import ApiHttpRequestForm from "@/views/system/datasource/ApiHttpRequestForm";
+import DsConfiguration from "@/views/system/datasource/DsConfiguration";
+import PluginCom from "@/views/system/plugin/PluginCom";
+import { listDatasourceType, listDatasource } from "@/api/system/datasource";
+import deTextarea from "@/components/deCustomCm/deTextarea.vue";
+import msgCfm from "@/components/msgCfm";
 export default {
-  name: 'DsForm',
+  name: "DsForm",
   mixins: [msgCfm],
   components: {
     DsConfiguration,
+    LayoutContent,
     ApiHttpRequestForm,
     PluginCom,
-    deTextarea
+    deTextarea,
   },
   data() {
     return {
       disabled: false,
-      attachRule: {
-        datasetGroupId: [
-          {
-            required: true,
-            message: i18n.t('chart.select_group'),
-            trigger: 'blur'
-          }
-        ],
-        panelId: [
-          {
-            required: true,
-            message: i18n.t('chart.select_group'),
-            trigger: 'blur'
-          }
-        ]
-      },
-      panelGroupList: [],
-      datasetGroupList: [],
-      attachForm: {
-        appTemplateId: '',
-        panelId: '',
-        panelName: '',
-        datasetGroupId: '0',
-        datasetGroupName: ''
-      },
       form: {
         configuration: {
           initialPoolSize: 5,
-          extraParams: '',
+          extraParams: "",
           minPoolSize: 5,
           maxPoolSize: 50,
           maxIdleTime: 30,
           acquireIncrement: 5,
           idleConnectionTestPeriod: 5,
           connectTimeout: 5,
-          customDriver: 'default',
+          customDriver: "default",
           queryTimeout: 30,
-          host: ''
+          host: "",
         },
-        apiConfiguration: []
+        apiConfiguration: [],
       },
       datasourceType: {},
       rule: {
         name: [
           {
             required: true,
-            message: i18n.t('datasource.input_name'),
-            trigger: 'blur'
+            message: i18n.t("datasource.input_name"),
+            trigger: "blur",
           },
           {
             min: 2,
             max: 25,
-            message: i18n.t('datasource.input_limit_2_25', [2, 25]),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.input_limit_2_25", [2, 25]),
+            trigger: "blur",
+          },
         ],
         desc: [
           {
             min: 2,
             max: 50,
-            message: i18n.t('datasource.input_limit_2_50'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.input_limit_2_50"),
+            trigger: "blur",
+          },
         ],
         type: [
           {
             required: true,
-            message: i18n.t('datasource.please_choose_type'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_choose_type"),
+            trigger: "blur",
+          },
         ],
-        'configuration.dataBase': [
+        "configuration.dataBase": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_data_base'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_data_base"),
+            trigger: "blur",
+          },
         ],
-        'configuration.connectionType': [
+        "configuration.connectionType": [
           {
             required: true,
-            message: i18n.t('datasource.please_select_oracle_type'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_select_oracle_type"),
+            trigger: "blur",
+          },
         ],
-        'configuration.username': [
+        "configuration.username": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_user_name'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_user_name"),
+            trigger: "blur",
+          },
         ],
-        'configuration.password': [
+        "configuration.password": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_password'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_password"),
+            trigger: "blur",
+          },
         ],
-        'configuration.host': [
+        "configuration.host": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_host'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_host"),
+            trigger: "blur",
+          },
         ],
-        'configuration.url': [
+        "configuration.url": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_url'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_url"),
+            trigger: "blur",
+          },
         ],
-        'configuration.port': [
+        "configuration.port": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_port'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_port"),
+            trigger: "blur",
+          },
         ],
-        'configuration.initialPoolSize': [
+        "configuration.initialPoolSize": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_initial_pool_size'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_initial_pool_size"),
+            trigger: "blur",
+          },
         ],
-        'configuration.minPoolSize': [
+        "configuration.minPoolSize": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_min_pool_size'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_min_pool_size"),
+            trigger: "blur",
+          },
         ],
-        'configuration.maxPoolSize': [
+        "configuration.maxPoolSize": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_max_pool_size'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_max_pool_size"),
+            trigger: "blur",
+          },
         ],
-        'configuration.maxIdleTime': [
+        "configuration.maxIdleTime": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_max_idle_time'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_max_idle_time"),
+            trigger: "blur",
+          },
         ],
-        'configuration.acquireIncrement': [
+        "configuration.acquireIncrement": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_acquire_increment'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_acquire_increment"),
+            trigger: "blur",
+          },
         ],
-        'configuration.connectTimeout': [
+        "configuration.connectTimeout": [
           {
             required: true,
-            message: i18n.t('datasource.please_input_connect_timeout'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_connect_timeout"),
+            trigger: "blur",
+          },
         ],
         url: [
           {
             required: true,
-            message: i18n.t('datasource.please_input_url'),
-            trigger: 'blur'
-          }
+            message: i18n.t("datasource.please_input_url"),
+            trigger: "blur",
+          },
         ],
         dataPath: [
           {
             required: true,
-            message: i18n.t('datasource.please_input_dataPath'),
-            trigger: 'blur'
-          }
-        ]
+            message: i18n.t("datasource.please_input_dataPath"),
+            trigger: "blur",
+          },
+        ],
       },
       schemas: [],
       canEdit: false,
@@ -407,293 +332,236 @@ export default {
       add_api_item: true,
       active: 0,
       defaultApiItem: {
-        name: '',
-        url: '',
-        method: 'GET',
+        name: "",
+        url: "",
+        method: "GET",
         request: {
           headers: [{}],
           body: {
-            type: '',
-            raw: '',
-            kvs: []
-          }
+            type: "",
+            raw: "",
+            kvs: [],
+          },
         },
-        fields: []
+        fields: [],
       },
       apiItem: {
-        status: '',
-        name: '',
-        url: '',
-        method: 'GET',
-        dataPath: '',
+        status: "",
+        name: "",
+        url: "",
+        method: "GET",
+        dataPath: "",
         request: {
           headers: [],
           body: {
-            type: '',
-            raw: '',
-            kvs: []
+            type: "",
+            raw: "",
+            kvs: [],
           },
-          authManager: {}
+          authManager: {},
         },
-        fields: []
+        fields: [],
       },
       reqOptions: [
-        { id: 'GET', label: 'GET' },
-        { id: 'POST', label: 'POST' }
+        { id: "GET", label: "GET" },
+        { id: "POST", label: "POST" },
       ],
       loading: false,
-      responseData: { type: 'HTTP', responseResult: {}, subRequestResults: [] },
-      api_table_title: '',
-      api_step2_active_name: 'first',
+      responseData: { type: "HTTP", responseResult: {}, subRequestResults: [] },
+      api_table_title: "",
+      api_step2_active_name: "first",
       fieldTypes: [
-        { label: this.$t('dataset.text'), value: 0 },
-        { label: this.$t('dataset.time'), value: 1 },
-        { label: this.$t('dataset.value'), value: 2 },
+        { label: this.$t("dataset.text"), value: 0 },
+        { label: this.$t("dataset.time"), value: 1 },
+        { label: this.$t("dataset.value"), value: 2 },
         {
           label:
-            this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')',
-          value: 3
+            this.$t("dataset.value") + "(" + this.$t("dataset.float") + ")",
+          value: 3,
         },
-        { label: this.$t('dataset.location'), value: 5 }
+        { label: this.$t("dataset.location"), value: 5 },
       ],
       height: 500,
       disabledNext: false,
       driverList: [],
       tData: [],
       dsTypes: [],
-      msgNodeId: '',
+      msgNodeId: "",
       params: {},
-      formType: 'add'
-    }
-  },
-
-  computed: {
-    headName() {
-      if (this.optType === 'appApply') {
-        return ''
-      } else if (this.formType === 'add') {
-        return this.$t('datasource.create')
-      } else {
-        return this.$t('datasource.modify')
-      }
-    }
+      formType: "add",
+    };
   },
   async created() {
-    await this.datasourceTypes()
-    this.queryTreeDatas()
-    const { id, showModel, msgNodeId, type } = this.$route.params
-    this.params = this.$route.params
+    await this.datasourceTypes();
+    this.queryTreeDatas();
+    const { id, showModel, msgNodeId, type } = this.$route.params;
+    this.params = this.$route.params;
     if (id) {
-      this.edit(this.params)
-      this.changeType(true)
+      this.edit(this.params);
+      this.changeType(true);
     } else {
-      this.canEdit = true
-      this.disabled = false
+      this.canEdit = true;
+      this.disabled = false;
       if (type) {
-        this.setType()
-        this.changeType()
+        this.setType();
+        this.changeType();
       }
     }
-    this.disabled = Boolean(id) && showModel === 'show' && !this.canEdit
-  },
-  mounted() {
-    if (this.optType === 'appApply') {
-      this.getPanelGroupTree()
-      this.getDatasetGroupTree()
-      this.attachForm.appTemplateId = this.attachParams.appTemplateId
-      this.attachForm.panelName = this.attachParams.name
-      this.attachForm.datasetGroupName = this.attachParams.name
-    }
+    this.disabled = Boolean(id) && showModel === "show" && !this.canEdit;
   },
   methods: {
     datasourceTypes() {
       return listDatasourceType().then((res) => {
-        this.dsTypes = res.data || []
-      })
+        this.dsTypes = res.data || [];
+      });
     },
     queryTreeDatas() {
       listDatasource().then((res) => {
-        this.tData = this.buildTree(res.data)
-      })
+        this.tData = this.buildTree(res.data);
+      });
     },
     buildTree(array) {
-      const types = {}
-      const newArr = []
+      const types = {};
+      const newArr = [];
       for (let index = 0; index < array.length; index++) {
-        const element = array[index]
+        const element = array[index];
         if (this.msgNodeId) {
           if (element.id === this.msgNodeId) {
-            element.msgNode = true
+            element.msgNode = true;
           }
         }
         if (!(element.type in types)) {
-          types[element.type] = []
+          types[element.type] = [];
           // newArr.push(...element, ...{ children: types[element.type] })
           newArr.push({
             id: element.type,
             name: element.typeDesc,
-            type: 'folder',
-            children: types[element.type]
-          })
+            type: "folder",
+            children: types[element.type],
+          });
         }
-        types[element.type].push(element)
+        types[element.type].push(element);
         // newArr.children.push({ id: element.id, label: element.name })
       }
-      return newArr
-      this.disabled =
-        this.params &&
-        this.params.id &&
-        this.params.showModel &&
-        this.params.showModel === 'show' &&
-        !this.canEdit
-    },
-    normalizer(node) {
-      // 去掉children=null的属性
-      if (node.children === null || node.children === 'null') {
-        delete node.children
-      }
-    },
-    getDatasetGroupTree() {
-      dsGroupTree({ nodeType: 'group' }).then((res) => {
-        this.datasetGroupList = [
-          {
-            id: '0',
-            name: this.$t('dataset.dataset_group'),
-            label: this.$t('dataset.dataset_group'),
-            pid: '0',
-            privileges: 'grant,manage,use',
-            type: 'group',
-            children: res.data
-          }
-        ]
-      })
-    },
-    getPanelGroupTree() {
-      groupTree({ nodeType: 'folder' }).then((res) => {
-        this.panelGroupList = res.data
-        if (this.panelGroupList && this.panelGroupList.length > 0) {
-          this.attachForm.panelId = this.panelGroupList[0].id
-        }
-      })
+      return newArr;
     },
     setType() {
-      this.form.type = this.params.type
+      this.form.type = this.params.type;
       this.form.configuration = {
         initialPoolSize: 5,
-        extraParams: '',
+        extraParams: "",
         minPoolSize: 5,
         maxPoolSize: 50,
         maxIdleTime: 30,
         acquireIncrement: 5,
         idleConnectionTestPeriod: 5,
         connectTimeout: 5,
-        customDriver: 'default',
-        queryTimeout: 30
-      }
+        customDriver: "default",
+        queryTimeout: 30,
+      };
     },
     changeEdit() {
-      this.canEdit = true
-      this.formType = 'modify'
+      this.canEdit = true;
+      this.formType = "modify";
       this.disabled =
         this.params &&
         this.params.id &&
         this.params.showModel &&
-        this.params.showModel === 'show' &&
-        !this.canEdit
+        this.params.showModel === "show" &&
+        !this.canEdit;
     },
     edit(row) {
-      this.formType = 'modify'
-      this.form = JSON.parse(JSON.stringify(row))
-      if (row.type === 'api') {
+      this.formType = "modify";
+      this.form = JSON.parse(JSON.stringify(row));
+      if (row.type === "api") {
         this.originConfiguration = JSON.parse(
           JSON.stringify(this.form.apiConfiguration)
-        )
+        );
         this.originConfiguration.forEach((item) => {
-          delete item.status
-        })
-        this.originConfiguration = JSON.stringify(this.originConfiguration)
+          delete item.status;
+        });
+        this.originConfiguration = JSON.stringify(this.originConfiguration);
       } else {
-        this.form.configuration = JSON.parse(this.form.configuration)
-        this.originConfiguration = JSON.stringify(this.form.configuration)
+        this.form.configuration = JSON.parse(this.form.configuration);
+        this.originConfiguration = JSON.stringify(this.form.configuration);
       }
-
       this.disabled =
         this.params &&
         this.params.id &&
         this.params.showModel &&
-        this.params.showModel === 'show' &&
-        !this.canEdit
+        this.params.showModel === "show" &&
+        !this.canEdit;
     },
     reset() {
-      this.$refs.dsForm.resetFields()
+      this.$refs.dsForm.resetFields();
     },
     save() {
       if (
         !this.form.configuration.schema &&
-        (this.form.type === 'oracle' ||
-          this.form.type === 'sqlServer' ||
-          this.form.type === 'pg' ||
-          this.form.type === 'redshift' ||
-          this.form.type === 'db2')
+        (this.form.type === "oracle" ||
+          this.form.type === "sqlServer" ||
+          this.form.type === "pg" ||
+          this.form.type === "redshift" ||
+          this.form.type === "db2")
       ) {
-        this.$message.error(i18n.t('datasource.please_choose_schema'))
-        return
+        this.$message.error(i18n.t("datasource.please_choose_schema"));
+        return;
       }
       if (
-        this.form.type !== 'es' &&
-        this.form.type !== 'api' &&
+        this.form.type !== "es" &&
+        this.form.type !== "api" &&
         this.form.configuration.port <= 0
       ) {
-        this.$message.error(i18n.t('datasource.port_no_less_then_0'))
-        return
+        this.$message.error(i18n.t("datasource.port_no_less_then_0"));
+        return;
       }
       if (
         this.form.configuration.initialPoolSize < 0 ||
         this.form.configuration.minPoolSize < 0 ||
         this.form.configuration.maxPoolSize < 0
       ) {
-        this.$message.error(i18n.t('datasource.no_less_then_0'))
-        return
+        this.$message.error(i18n.t("datasource.no_less_then_0"));
+        return;
       }
-      let repeat = false
-      const repeatDsName = []
+      let repeat = false;
+      const repeatDsName = [];
       if (!this.datasourceType.isPlugin) {
         this.tData.forEach((item) => {
           if (item.id === this.form.type) {
             item.children.forEach((child) => {
-              if (this.formType === 'modify' && child.id === this.form.id) {
-                return
+              if (this.formType === "modify" && child.id === this.form.id) {
+                return;
               }
-              const configuration = JSON.parse(child.configuration)
+              const configuration = JSON.parse(child.configuration);
               if (!configuration) {
-                return
+                return;
               }
               switch (this.form.type) {
-                case 'mysql':
-                case 'TiDB':
-                case 'StarRocks':
-                case 'hive':
-                case 'mariadb':
-                case 'ds_doris':
-                case 'ck':
-                case 'mongo':
-                case 'mariadb':
-                case 'impala':
+                case "mysql":
+                case "TiDB":
+                case "StarRocks":
+                case "hive":
+                case "mariadb":
+                case "ds_doris":
+                case "ck":
+                case "mongo":
+                case "mariadb":
+                case "impala":
                   if (
                     configuration.host == this.form.configuration.host &&
                     configuration.dataBase ==
                       this.form.configuration.dataBase &&
                     configuration.port == this.form.configuration.port
                   ) {
-                    repeat = true
-                    repeatDsName.push(child.name)
+                    repeat = true;
+                    repeatDsName.push(child.name);
                   }
-                  break
-                case 'pg':
-                case 'sqlServer':
-                case 'redshift':
-                case 'oracle':
-                case 'db2':
+                  break;
+                case "pg":
+                case "sqlServer":
+                case "redshift":
+                case "oracle":
+                case "db2":
                   if (
                     configuration.host == this.form.configuration.host &&
                     configuration.dataBase ==
@@ -701,33 +569,33 @@ export default {
                     configuration.port == this.form.configuration.port &&
                     configuration.schema == this.form.configuration.schema
                   ) {
-                    repeatDsName.push(child.name)
-                    repeat = true
+                    repeatDsName.push(child.name);
+                    repeat = true;
                   }
-                  break
-                case 'es':
+                  break;
+                case "es":
                   if (configuration.url == this.form.configuration.url) {
-                    repeatDsName.push(child.name)
-                    repeat = true
+                    repeatDsName.push(child.name);
+                    repeat = true;
                   }
-                  break
+                  break;
                 default:
-                  break
+                  break;
               }
-            })
+            });
           }
-        })
+        });
       } else {
         if (this.datasourceType.isJdbc) {
           this.tData.forEach((item) => {
             if (item.id === this.form.type) {
               item.children.forEach((child) => {
-                if (this.formType === 'modify' && child.id === this.form.id) {
-                  return
+                if (this.formType === "modify" && child.id === this.form.id) {
+                  return;
                 }
-                const configuration = JSON.parse(child.configuration)
+                const configuration = JSON.parse(child.configuration);
                 if (!configuration) {
-                  return
+                  return;
                 }
                 if (configuration.schema != null) {
                   if (
@@ -737,8 +605,8 @@ export default {
                       this.form.configuration.dataBase &&
                     configuration.port == this.form.configuration.port
                   ) {
-                    repeat = true
-                    repeatDsName.push(child.name)
+                    repeat = true;
+                    repeatDsName.push(child.name);
                   }
                 } else {
                   if (
@@ -747,359 +615,335 @@ export default {
                       this.form.configuration.dataBase &&
                     configuration.port == this.form.configuration.port
                   ) {
-                    repeat = true
-                    repeatDsName.push(child.name)
+                    repeat = true;
+                    repeatDsName.push(child.name);
                   }
                 }
-              })
+              });
             }
-          })
+          });
         }
       }
-
-      let status = null
+      let status = null;
       if (this.datasourceType.isPlugin) {
-        status = this.$refs['pluginDsConfig'].callPluginInner({
-          methodName: 'validate'
-        })
+        status = this.$refs["pluginDsConfig"].callPluginInner({
+          methodName: "validate",
+        });
       } else {
-        this.$refs['dsConfig'].$refs['DsConfig'].validate((valid) => {
-          status = valid
-        })
+        this.$refs["dsConfig"].$refs["DsConfig"].validate((valid) => {
+          status = valid;
+        });
       }
       if (!status) {
-        return
+        return;
       }
-
       this.$refs.dsForm.validate((valid) => {
-        if (this.optType === 'appApply') {
-          this.$refs.attachParamsForm.validate((valid) => {
-            if (!valid) {
-              return false
-            }
-          })
-        }
-
         if (!valid) {
-          return false
+          return false;
         }
-        const method = this.formType === 'add' ? addDs : editDs
-        const form = JSON.parse(JSON.stringify(this.form))
-        if (form.type === 'api') {
+        const method = this.formType === "add" ? addDs : editDs;
+        const form = JSON.parse(JSON.stringify(this.form));
+        if (form.type === "api") {
           if (this.form.apiConfiguration.length < 1) {
-            this.$message.error(i18n.t('datasource.api_table_not_empty'))
-            return
+            this.$message.error(i18n.t("datasource.api_table_not_empty"));
+            return;
           }
           form.apiConfiguration.forEach((item) => {
-            delete item.status
-          })
-          form.configuration = JSON.stringify(form.apiConfiguration)
+            delete item.status;
+          });
+          form.configuration = JSON.stringify(form.apiConfiguration);
         } else {
-          form.configuration = JSON.stringify(form.configuration)
+          form.configuration = JSON.stringify(form.configuration);
         }
-
-        if (this.optType === 'appApply') {
-          const appApplyForm = {
-            ...this.attachForm,
-            datasourceList: [deepCopy(form)]
-          }
-          appApply(appApplyForm).then((res) => {
-            this.$success(i18n.t('commons.save_success'))
-            this.$router.push({ name: 'panel', params: res.data })
-          })
-          return
-        }
-
         if (
-          this.formType === 'modify' &&
+          this.formType === "modify" &&
           this.originConfiguration !== form.configuration
         ) {
           if (repeat) {
             $confirm(
-              i18n.t('datasource.repeat_datasource_msg') +
-                '[' +
-                repeatDsName.join(',') +
-                '], ' +
-                i18n.t('datasource.confirm_save'),
+              i18n.t("datasource.repeat_datasource_msg") +
+                "[" +
+                repeatDsName.join(",") +
+                "], " +
+                i18n.t("datasource.confirm_save"),
               () => {
-                $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
-                  this.method(method, form)
-                })
+                $confirm(i18n.t("datasource.edit_datasource_msg"), () => {
+                  this.method(method, form);
+                });
               }
-            )
+            );
           } else {
-            $confirm(i18n.t('datasource.edit_datasource_msg'), () => {
-              this.method(method, form)
-            })
+            $confirm(i18n.t("datasource.edit_datasource_msg"), () => {
+              this.method(method, form);
+            });
           }
-          return
+          return;
         }
         if (repeat) {
           $confirm(
-            i18n.t('datasource.repeat_datasource_msg') +
-              '[' +
-              repeatDsName.join(',') +
-              '], ' +
-              i18n.t('datasource.confirm_save'),
+            i18n.t("datasource.repeat_datasource_msg") +
+              "[" +
+              repeatDsName.join(",") +
+              "], " +
+              i18n.t("datasource.confirm_save"),
             () => {
-              this.method(method, form)
+              this.method(method, form);
             }
-          )
+          );
         } else {
-          this.method(method, form)
+          this.method(method, form);
         }
-      })
+      });
     },
     method(method, form) {
       method(form).then((res) => {
-        this.$success(i18n.t('commons.save_success'))
-        this.refreshType(form)
-        this.backToList()
-      })
+        this.$success(i18n.t("commons.save_success"));
+        this.refreshType(form);
+        this.backToList();
+      });
     },
     getSchema() {
       this.$refs.dsForm.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form))
-          data.configuration = JSON.stringify(data.configuration)
+          const data = JSON.parse(JSON.stringify(this.form));
+          data.configuration = JSON.stringify(data.configuration);
           getSchema(data).then((res) => {
-            this.schemas = res.data
-            this.openMessageSuccess('commons.success')
-          })
+            this.schemas = res.data;
+            this.openMessageSuccess("commons.success");
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
     validaDatasource() {
-      if (!this.form.configuration.schema && this.form.type === 'oracle') {
-        this.openMessageSuccess('datasource.please_choose_schema', 'error')
-        return
+      if (!this.form.configuration.schema && this.form.type === "oracle") {
+        this.openMessageSuccess("datasource.please_choose_schema","error");
+        return;
       }
       if (
-        this.form.type !== 'es' &&
-        this.form.type !== 'api' &&
+        this.form.type !== "es" &&
+        this.form.type !== "api" &&
         this.form.configuration.port <= 0
       ) {
-        this.openMessageSuccess('datasource.port_no_less_then_0', 'error')
-        return
+        this.openMessageSuccess("datasource.port_no_less_then_0","error");
+        return;
       }
-      let status = null
+      let status = null;
       if (this.datasourceType.isPlugin) {
-        status = this.$refs['pluginDsConfig'].callPluginInner({
-          methodName: 'validate'
-        })
+        status = this.$refs["pluginDsConfig"].callPluginInner({
+          methodName: "validate",
+        });
       } else {
-        this.$refs['dsConfig'].$refs['DsConfig'].validate((valid) => {
-          status = valid
+        this.$refs["dsConfig"].$refs["DsConfig"].validate((valid) => {
+          status = valid;
           if (!valid) {
-            return
+            return;
           }
-        })
+        });
       }
       if (!status) {
-        return
+        return;
       }
       this.$refs.dsForm.validate((valid) => {
         if (valid) {
-          const data = JSON.parse(JSON.stringify(this.form))
-          if (data.type === 'api') {
-            data.configuration = JSON.stringify(data.apiConfiguration)
+          const data = JSON.parse(JSON.stringify(this.form));
+          if (data.type === "api") {
+            data.configuration = JSON.stringify(data.apiConfiguration);
           } else {
-            data.configuration = JSON.stringify(data.configuration)
+            data.configuration = JSON.stringify(data.configuration);
           }
-          if (data.showModel === 'show' && !this.canEdit) {
+          if (data.showModel === "show" && !this.canEdit) {
             validateDsById(data.id).then((res) => {
               if (res.success) {
-                this.openMessageSuccess('datasource.validate_success')
+                this.openMessageSuccess("datasource.validate_success");
               } else {
                 if (res.message.length < 2500) {
-                  this.openMessageSuccess(res.message, 'error')
+                  this.openMessageSuccess(res.message,"error");
                 } else {
                   this.openMessageSuccess(
-                    res.message.substring(0, 2500) + '......',
-                    'danger'
-                  )
+                    res.message.substring(0, 2500) + "......",
+                    "danger"
+                  );
                 }
               }
-              this.refreshType(data)
-            })
+              this.refreshType(data);
+            });
           } else {
             validateDs(data)
               .then((res) => {
                 if (res.success) {
-                  this.$success(i18n.t('datasource.validate_success'))
+                  this.$success(i18n.t("datasource.validate_success"));
                 } else {
-                  if (data.type === 'api') {
-                    this.form.apiConfiguration = res.data.apiConfiguration
+                  if (data.type === "api") {
+                    this.form.apiConfiguration = res.data.apiConfiguration;
                   }
                   if (res.message.length < 2500) {
-                    this.openMessageSuccess(res.message, 'error')
+                    this.openMessageSuccess(res.message,"error");
                   } else {
                     this.openMessageSuccess(
-                      res.message.substring(0, 2500) + '......',
-                      'danger'
-                    )
+                      res.message.substring(0, 2500) + "......",
+                      "danger"
+                    );
                   }
                 }
               })
               .catch((res) => {
-                this.openMessageSuccess(res.message, 'error')
-              })
+                this.openMessageSuccess(res.message,"error");
+              });
           }
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
     changeType(init) {
       for (let i = 0; i < this.dsTypes.length; i++) {
         if (this.dsTypes[i].type === this.form.type) {
-          if (this.form.type !== 'api' && !init) {
-            this.form.configuration.extraParams = this.dsTypes[i].extraParams
-            this.form.configuration.customDriver = 'default'
+          if (this.form.type !== "api" && !init) {
+            this.form.configuration.extraParams = this.dsTypes[i].extraParams;
+            this.form.configuration.customDriver = "default";
           }
-          this.datasourceType = this.dsTypes[i]
+          this.datasourceType = this.dsTypes[i];
           if (this.datasourceType.isJdbc) {
             listDriverByType(this.datasourceType.type).then((res) => {
-              this.driverList = []
+              this.driverList = [];
               this.driverList.push({
-                id: 'default',
-                name: 'Default',
-                driverClass: 'Default'
-              })
-              this.driverList = this.driverList.concat(res.data)
-            })
+                id: "default",
+                name: "Default",
+                driverClass: "Default",
+              });
+              this.driverList = this.driverList.concat(res.data);
+            });
           }
         }
       }
     },
     backToList() {
-      this.$router.push('/datasource/index')
+      this.$router.push("/datasource/index");
     },
     refreshType(form) {
-      this.$emit('refresh-type', form)
+      this.$emit("refresh-type", form);
     },
     next() {
       if (this.active === 1) {
-        let hasRepeatName = false
+        let hasRepeatName = false;
         if (this.add_api_item) {
           this.form.apiConfiguration.forEach((item) => {
             if (item.name === this.apiItem.name) {
-              hasRepeatName = true
+              hasRepeatName = true;
             }
-          })
+          });
         } else {
-          const index = this.form.apiConfiguration.indexOf(this.apiItem)
+          const index = this.form.apiConfiguration.indexOf(this.apiItem);
           for (let i = 0; i < this.form.apiConfiguration.length; i++) {
             if (
               i !== index &&
               this.form.apiConfiguration[i].name === this.apiItem.name
             ) {
-              hasRepeatName = true
+              hasRepeatName = true;
             }
           }
         }
         if (hasRepeatName) {
-          this.$message.error(i18n.t('datasource.has_repeat_name'))
-          return
+          this.$message.error(i18n.t("datasource.has_repeat_name"));
+          return;
         }
         this.$refs.apiItem.validate((valid) => {
           if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem))
-            data.request = JSON.stringify(data.request)
-            this.loading = true
-            this.disabledNext = true
+            const data = JSON.parse(JSON.stringify(this.apiItem));
+            data.request = JSON.stringify(data.request);
+            this.loading = true;
+            this.disabledNext = true;
             checkApiDatasource(data)
               .then((res) => {
-                this.loading = false
-                this.disabledNext = false
-                this.apiItem.status = 'Success'
-                this.$success(i18n.t('commons.success'))
-                this.active++
-                this.apiItem.fields = res.data.fields
-                this.$refs.plxTable.reloadData(res.data.datas)
+                this.loading = false;
+                this.disabledNext = false;
+                this.apiItem.status = "Success";
+                this.$success(i18n.t("commons.success"));
+                this.active++;
+                this.apiItem.fields = res.data.fields;
+                this.$refs.plxTable.reloadData(res.data.datas);
               })
               .catch((res) => {
-                this.loading = false
-                this.disabledNext = false
-              })
+                this.loading = false;
+                this.disabledNext = false;
+              });
           } else {
-            this.apiItem.fields = []
-            return false
+            this.apiItem.fields = [];
+            return false;
           }
-        })
+        });
       }
     },
     before() {
-      this.active--
+      this.active--;
     },
     closeEditItem() {
-      this.active = 0
-      this.edit_api_item = false
+      this.active = 0;
+      this.edit_api_item = false;
     },
     saveItem() {
-      this.active = 0
-      this.edit_api_item = false
+      this.active = 0;
+      this.edit_api_item = false;
       if (this.add_api_item) {
-        this.form.apiConfiguration.push(this.apiItem)
+        this.form.apiConfiguration.push(this.apiItem);
       }
     },
     addApiItem(item) {
       this.$nextTick(() => {
-        this.$refs.apiItem.clearValidate()
-      })
+        this.$refs.apiItem.clearValidate();
+      });
       if (item) {
-        this.add_api_item = false
-        this.api_table_title = this.$t('datasource.edit_api_table')
-        this.apiItem = item
+        this.add_api_item = false;
+        this.api_table_title = this.$t("datasource.edit_api_table");
+        this.apiItem = item;
       } else {
-        this.add_api_item = true
-        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem))
-        this.api_table_title = this.$t('datasource.add_api_table')
+        this.add_api_item = true;
+        this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem));
+        this.api_table_title = this.$t("datasource.add_api_table");
       }
-      this.active = 1
-      this.edit_api_item = true
+      this.active = 1;
+      this.edit_api_item = true;
     },
     deleteItem(item) {
       this.form.apiConfiguration.splice(
         this.form.apiConfiguration.indexOf(item),
         1
-      )
+      );
     },
     validateApi(item) {
       if (undefined) {
       } else {
         this.$refs.apiItem.validate((valid) => {
           if (valid) {
-            const data = JSON.parse(JSON.stringify(this.apiItem))
-            data.request = JSON.stringify(data.request)
-            this.loading = true
+            const data = JSON.parse(JSON.stringify(this.apiItem));
+            data.request = JSON.stringify(data.request);
+            this.loading = true;
             checkApiDatasource(data)
               .then((res) => {
-                this.loading = false
-                this.$success(i18n.t('commons.success'))
-                this.apiItem.fields = res.data.fields
-                this.$refs.plxTable.reloadData(res.data.datas)
+                this.loading = false;
+                this.$success(i18n.t("commons.success"));
+                this.apiItem.fields = res.data.fields;
+                this.$refs.plxTable.reloadData(res.data.datas);
               })
               .catch((res) => {
-                this.loading = false
-              })
+                this.loading = false;
+              });
           } else {
-            return false
+            return false;
           }
-        })
+        });
       }
     },
-    handleClick(tab, event) {}
-  }
-}
+    handleClick(tab, event) {},
+  },
+};
 </script>
 <style lang="scss" scoped>
 .de-ds-form {
   width: 100vw;
   height: 100vh;
-
   .de-ds-top {
     display: flex;
     align-items: center;
@@ -1108,19 +952,17 @@ export default {
     padding: 12px 24px;
     box-shadow: 0px 2px 4px rgba(31, 35, 41, 0.08);
     .name {
-      font-family: 'PingFang SC';
+      font-family: "PingFang SC";
       font-style: normal;
       font-weight: 500;
       font-size: 16px;
       line-height: 24px;
       color: var(--deTextPrimary, #1f2329);
     }
-
     i {
       cursor: pointer;
     }
   }
-
   .de-ds-cont {
     display: flex;
     width: 100%;
@@ -1136,7 +978,6 @@ export default {
       justify-content: center;
       overflow-y: auto;
     }
-
     .w600 {
       width: 600px;
       height: 100%;
@@ -1144,4 +985,4 @@ export default {
     }
   }
 }
-</style>
+</style>
\ No newline at end of file