first commit

2025-12-15 06:27:21 +00:00 · 2023-06-12 18:44:01 +08:00
commit dc4fc69b57
879 changed files with 573090 additions and 0 deletions
--- a/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlSide.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/SemanticModel/Datasource/components/SqlSide.tsx
@@ -0,0 +1,126 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Tabs } from 'antd';
+import SqlDetail from './SqlDetail';
+import type { SqlItem } from '../data';
+
+import styles from '../style.less';
+
+type Panes = {
+  title: string;
+  key: string;
+  type: 'add' | 'edit';
+  scriptId?: number;
+  sql?: string;
+  sqlInfo?: SqlItem;
+  isSave?: boolean; // 暂存提示保存
+};
+
+type TableRef = {
+  current?: {
+    fetchSqlList: () => void;
+    upDateActiveItem: (key: any) => void;
+  };
+};
+
+type Props = {
+  initialValues: any;
+  domainId: number;
+  onSubmitSuccess?: (dataSourceInfo: any) => void;
+};
+
+const { TabPane } = Tabs;
+const LIST_KEY = 'list';
+
+const SqlSide: React.FC<Props> = ({ initialValues, domainId, onSubmitSuccess }) => {
+  const defaultPanes: Panes[] = [
+    {
+      key: '数据源查询',
+      title: initialValues?.name || '数据源查询',
+      type: 'add',
+      isSave: true,
+    },
+  ];
+
+  const [activeKey, setActiveKey] = useState('数据源查询');
+  const [panes, setPanes] = useState<Panes[]>(defaultPanes);
+  const tableRef: TableRef = useRef();
+  const panesRef = useRef<Panes[]>(defaultPanes);
+
+  const [dataSourceItem, setDataSourceItem] = useState<any>(initialValues || {});
+
+  const updatePane = (list: Panes[]) => {
+    setPanes(list);
+    panesRef.current = list;
+  };
+
+  // 更新脚本内容
+  const updateTabSql = (sql: string, targetKey: string) => {
+    const newPanes = panesRef.current.slice();
+    const index = newPanes.findIndex((item) => item.key === targetKey);
+    const targetItem = newPanes[index];
+    newPanes.splice(index, 1, {
+      ...targetItem,
+      sql,
+      isSave: false,
+    });
+    updatePane(newPanes);
+  };
+
+  useEffect(() => {
+    if (initialValues) {
+      updateTabSql(initialValues?.datasourceDetail?.sqlQuery || '', '数据源查询');
+    }
+  }, [initialValues]);
+
+  const onChange = (key: string) => {
+    setActiveKey(key);
+    tableRef?.current?.upDateActiveItem(key);
+    if (key === LIST_KEY) {
+      tableRef?.current?.fetchSqlList();
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.outside}>
+        <Tabs
+          type="editable-card"
+          hideAdd={true}
+          activeKey={activeKey}
+          onChange={onChange}
+          className={styles.middleArea}
+        >
+          {panes.map((pane) => {
+            return (
+              <TabPane
+                tab={<div className={styles.paneName}>{pane.title}</div>}
+                closable={false}
+                key={pane.key}
+              >
+                <SqlDetail
+                  onSubmitSuccess={onSubmitSuccess}
+                  dataSourceItem={dataSourceItem}
+                  oprType={pane.type}
+                  domainId={domainId}
+                  onUpdateSql={(sql: string) => {
+                    updateTabSql(sql, pane.key);
+                  }}
+                  onJdbcSourceChange={(databaseId) => {
+                    setDataSourceItem({
+                      ...dataSourceItem,
+                      databaseId,
+                    });
+                  }}
+                  sql={pane.sql}
+                />
+              </TabPane>
+            );
+          })}
+        </Tabs>
+      </div>
+      {/* </SplitPane> */}
+    </>
+  );
+};
+
+export default SqlSide;