@gingkoo/pandora-metabase 0.0.23 → 0.0.24

package/lib/es/index.js

@@ -1,20 +1,20 @@
 /**
- * @gingkoo/pandora-metabase v0.0.23
+ * @gingkoo/pandora-metabase v0.0.24
  */
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useContext, createContext, useState, useRef, useMemo, forwardRef, useImperativeHandle, useEffect } from 'react';
 import cx from 'classnames';
-import { Tooltip as Tooltip$1, Button as Button$1, Input as Input$1, Modal2, Toast } from '@gingkoo/pandora';
-import { DatePicker, Menu, Dropdown, Button, Input, Tooltip, InputNumber } from 'antd';
+import { Button, Tooltip, Input, Modal2, Toast } from '@gingkoo/pandora';
+import { DatePicker, Dropdown, Tooltip as Tooltip$1, InputNumber, Button as Button$1 } from 'antd';
 import { DownOutlined, LoadingOutlined } from '@ant-design/icons';
 import Styled from 'styled-components';
 import _$2 from 'underscore';
 import ReactDOM from 'react-dom';
 import ReactDOMServer from 'react-dom/server';
 import cloneDeep from 'lodash/cloneDeep';
+import { Repeat, RelatedWork, FfPlus, FfLine } from '@gingkoo/pandora-icons';
 import moment from 'dayjs';
-import { RelatedWork, Repeat, FfPlus, FfLine } from '@gingkoo/pandora-icons';
 import isEqual from 'lodash/isEqual';
 
 // 创建 Context
@@ -251,6 +251,7 @@ const useStore = () => {
     type: TypeEnum.data,
     table: {
       name: '',
+      id: '',
       alias: '',
       datasourceId: '',
       datasourceName: ''
@@ -272,7 +273,13 @@ const useStore = () => {
     node: null,
     content: null
   }); //弹窗
+  const [popupData2, setPopup2] = useState({
+    visible: false,
+    node: null,
+    content: null
+  }); //弹窗
   const [popupClosable, setClosable] = useState(defaultMetaList); //是否可关闭 如果弹框里面再弹框 则不可关闭
+  const [popupClosable2, setClosable2] = useState(defaultMetaList); //是否可关闭 如果弹框里面再弹框 则不可关闭
   // const [fetchDatasetFn, setFetchDatasetFn] = useState<(id: string) => Promise<any>>(
   //   async () => {},
   // ); //fn
@@ -385,6 +392,7 @@ const useStore = () => {
     metaKey += 1;
     if (type === TypeEnum.joinData) {
       let table1 = {
+        id: '',
         name: '',
         alias: '',
         datasourceId: '',
@@ -410,6 +418,7 @@ const useStore = () => {
         table1,
         table2: {
           name: '',
+          id: '',
           alias: '',
           datasourceId: '',
           datasourceName: '',
@@ -463,6 +472,7 @@ const useStore = () => {
         type: TypeEnum.permissionTable,
         table: {
           name: '',
+          id: '',
           alias: '',
           datasourceId: '',
           datasourceName: ''
@@ -540,8 +550,12 @@ const useStore = () => {
     setMeta,
     popupData,
     setPopup,
+    popupData2,
+    setPopup2,
     popupClosable,
     setClosable,
+    popupClosable2,
+    setClosable2,
     fetchDatasetFn: fetchDatasetFn.current,
     setFetchDatasetFn,
     fetchColumnsFn: fetchColumnsFn.current,
@@ -3869,6 +3883,7 @@ const SelectJoinColumn = ({
         let {
           alias: tableAlias,
           table,
+          tableId,
           columns,
           open,
           searchText,
@@ -3966,6 +3981,7 @@ const SelectJoinColumn = ({
                       return onGroup({
                         ...v,
                         table,
+                        tableId,
                         alias: tableAlias,
                         name,
                         database_type,
@@ -3977,6 +3993,7 @@ const SelectJoinColumn = ({
                     typeof onSelect === 'function' && onSelect({
                       ...v,
                       table,
+                      tableId,
                       alias: tableAlias,
                       name,
                       database_type,
@@ -4008,7 +4025,7 @@ const SelectJoinColumn = ({
   });
 };
 
-var css_248z$4 = ".filter-page {\n  min-width: 300px;\n}\n.filter-page .header {\n  margin-bottom: 0.5rem;\n  padding: 0.5rem;\n  display: flex;\n  align-items: center;\n  color: #949aab;\n  border-bottom: 1px solid #f0f0f0;\n}\n.filter-page .header .left-info {\n  padding: 0.5rem 0.5rem 0.5rem 0;\n  display: flex;\n  align-items: center;\n}\n.filter-page .header .left-info span {\n  font-weight: 900;\n  font-size: 16px;\n  color: #4c5773;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-family: 'Lato', sans-serif;\n}\n.filter-page .header .left-info span svg {\n  margin-right: 0.5rem;\n}\n.filter-page .header .left-info span:hover {\n  color: #509ee3;\n}\n.filter-page .header .right-info {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}\n.filter-page .content {\n  padding: 0.5rem;\n}\n.filter-page .content .w_300 {\n  width: 300px;\n}\n.filter-page .content .input {\n  border: 1px solid #f0f0f0;\n  font-size: 16px;\n  color: #4c5773;\n  border-radius: 4px;\n  transition: border 0.3s linear;\n  padding: 9px 20px;\n  width: 300px;\n  height: 46px;\n  outline: none;\n}\n.filter-page .content .input::placeholder {\n  color: #ccc;\n}\n.filter-page .content .input + .input {\n  margin-top: 10px;\n}\n.filter-page .content .input.inline {\n  display: inline-block;\n  flex: 1;\n  margin-right: 15px;\n  padding: 5px 20px;\n}\n.filter-page .footer {\n  padding: 0 0.5rem 0.5rem;\n  display: flex;\n  align-items: center;\n}\n.filter-page .footer .button--purple {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: white;\n  background-color: #7172ad;\n  border: 1px solid #7172ad;\n  padding: 6px 14px;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.filter-page .footer .button--purple.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.filter-page .footer .button--purple:hover {\n  color: white;\n  background-color: rgba(113, 114, 173, 0.88);\n  border-color: rgba(113, 114, 173, 0.88);\n}\n.operator-btn {\n  height: 38px !important;\n  padding: 8px !important;\n  text-align: left !important;\n  display: flex !important;\n  align-items: center !important;\n}\n.operator-btn > .anticon {\n  margin-left: auto !important;\n}\n";
+var css_248z$4 = ".filter-page {\n  min-width: 300px;\n}\n.filter-page .header {\n  margin-bottom: 0.5rem;\n  padding: 0.5rem;\n  display: flex;\n  align-items: center;\n  color: #949aab;\n  border-bottom: 1px solid #f0f0f0;\n}\n.filter-page .header .left-info {\n  padding: 0.5rem 0.5rem 0.5rem 0;\n  display: flex;\n  align-items: center;\n}\n.filter-page .header .left-info span {\n  font-weight: 900;\n  font-size: 16px;\n  color: #4c5773;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-family: 'Lato', sans-serif;\n}\n.filter-page .header .left-info span svg {\n  margin-right: 0.5rem;\n}\n.filter-page .header .left-info span:hover {\n  color: #509ee3;\n}\n.filter-page .header .right-info {\n  margin-left: auto;\n  display: flex;\n  align-items: center;\n}\n.filter-page .content {\n  padding: 0.5rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.filter-page .content_l {\n  flex: 1;\n}\n.filter-page .content .operator-icon {\n  font-size: 18px !important;\n}\n.filter-page .content .Sqb-TableName {\n  border: 2px solid transparent;\n  border-radius: 6px;\n  color: white;\n  background-color: #509ee3;\n  transition: background 300ms linear 0s;\n  box-sizing: border-box;\n  padding: 8px;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n}\n.filter-page .content .Sqb-TableName-input {\n  margin-bottom: 9px;\n  margin-right: 8px;\n  padding: 9px;\n}\n.filter-page .content .Sqb-TableName::selection {\n  color: #ffffff;\n  background-color: #d489ac;\n  text-shadow: none;\n}\n.filter-page .content .Sqb-TableName:hover {\n  background-color: rgba(80, 158, 227, 0.8);\n}\n.filter-page .content .Sqb-TableName.noClick {\n  cursor: default;\n}\n.filter-page .content .Sqb-TableName.noClick:hover {\n  background-color: #509ee3;\n}\n.filter-page .content .Sqb-TableName.notSelected {\n  border: 2px solid rgba(80, 158, 227, 0.25);\n  color: #509ee3;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.notSelected:hover {\n  border-color: rgba(80, 158, 227, 0.8);\n}\n.filter-page .content .Sqb-TableName.purple-name {\n  color: white;\n  background-color: #7172ad;\n}\n.filter-page .content .Sqb-TableName.purple-name:hover {\n  background-color: rgba(113, 114, 173, 0.8);\n}\n.filter-page .content .Sqb-TableName.purple-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.purple-name.notSelected {\n  border: 2px solid rgba(113, 114, 173, 0.25);\n  color: #7172ad;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.purple-name.notSelected:hover {\n  border-color: rgba(113, 114, 173, 0.8);\n}\n.filter-page .content .Sqb-TableName.gray-name {\n  color: white;\n  background-color: #93a1ab;\n}\n.filter-page .content .Sqb-TableName.gray-name:hover {\n  background-color: rgba(147, 161, 171, 0.8);\n}\n.filter-page .content .Sqb-TableName.gray-name svg.sort-arrow {\n  margin-right: 0.5rem;\n}\n.filter-page .content .Sqb-TableName.gray-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.green-name {\n  color: white;\n  background-color: #88bf4d;\n}\n.filter-page .content .Sqb-TableName.green-name:hover {\n  background-color: rgba(136, 191, 77, 0.8);\n}\n.filter-page .content .Sqb-TableName.green-name svg.closeIcon {\n  opacity: 0.6;\n  margin-left: 8px;\n}\n.filter-page .content .Sqb-TableName.green-name.notSelected {\n  border: 2px solid rgba(136, 191, 77, 0.25);\n  color: #88bf4d;\n  background-color: transparent;\n}\n.filter-page .content .Sqb-TableName.green-name.notSelected:hover {\n  border-color: rgba(136, 191, 77, 0.8);\n}\n.filter-page .content .w_300 {\n  width: 300px;\n}\n.filter-page .content .input {\n  border: 1px solid #f0f0f0;\n  font-size: 16px;\n  color: #4c5773;\n  border-radius: 4px;\n  transition: border 0.3s linear;\n  padding: 9px 20px;\n  height: 40px;\n  outline: none;\n}\n.filter-page .content .input::placeholder {\n  color: #ccc;\n}\n.filter-page .content .input + .input {\n  margin-top: 10px;\n}\n.filter-page .content .input.inline {\n  display: inline-block;\n  flex: 1;\n  margin-right: 15px;\n  padding: 5px 20px;\n}\n.filter-page .footer {\n  padding: 0 0.5rem 0.5rem;\n  display: flex;\n  align-items: center;\n}\n.filter-page .footer .button--purple {\n  margin-left: auto;\n  flex-shrink: 0;\n  color: white;\n  background-color: #7172ad;\n  border: 1px solid #7172ad;\n  padding: 6px 14px;\n  font-size: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  cursor: pointer;\n}\n.filter-page .footer .button--purple.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.filter-page .footer .button--purple:hover {\n  color: white;\n  background-color: rgba(113, 114, 173, 0.88);\n  border-color: rgba(113, 114, 173, 0.88);\n}\n.operator-btn {\n  height: 38px !important;\n  padding: 8px !important;\n  text-align: left !important;\n  display: flex !important;\n  align-items: center !important;\n}\n.operator-btn > .anticon {\n  margin-left: auto !important;\n}\n";
 styleInject(css_248z$4);
 
 const {
@@ -4029,9 +4046,15 @@ const SelectFilterColumn = ({
 }) => {
   const [curColumn, setCurColumn] = useState(value);
   const [condition, setCondition] = useState(value.condition);
+  const [isField, setIsField] = useState(value.isField || false);
   const [curVal, setVal] = useState(value.val);
+  const store = useStore$1();
+  let table2Selected = Boolean(curColumn.table2?.name);
   const disabled = useMemo(() => {
     if (!condition) return true;
+    if (curColumn.table2?.id && ~['是', '不是'].indexOf(condition)) {
+      return false;
+    }
     if (~['为空', '不为空', '是空的', '不是空的'].indexOf(condition)) {
       return false;
     } else if (~['前', '下一个', '介于之间'].indexOf(condition)) {
@@ -4042,11 +4065,11 @@ const SelectFilterColumn = ({
       return false;
     }
     return true;
-  }, [curVal, condition]);
+  }, [curVal, condition, curColumn]);
   useEffect(() => {
     didUpdate?.();
   }, [condition]);
-  function generateQuotes(val) {
+  function generateQuotes(val, curColumn) {
     let [firstVal = '', secondVal = ''] = val;
     let quotes = '';
     if (condition === '以...开始') {
@@ -4132,17 +4155,27 @@ const SelectFilterColumn = ({
         晚于: 'filter.laterThan',
         是空的: 'filter.isEmpty'
       }[condition]);
-      quotes = curColumn.name + ' ' + cond + ' ' + firstVal;
+      if (curColumn.table2?.id) {
+        const {
+          datasourceName,
+          name
+        } = curColumn.table2;
+        quotes = curColumn.name + ' ' + cond + ' ' + datasourceName + '.' + name;
+      } else {
+        quotes = curColumn.name + ' ' + cond + ' ' + firstVal;
+      }
     }
     return quotes;
   }
   function addFilter() {
     if (disabled) return void 0;
-    let quotes = generateQuotes(curVal);
+    let quotes = generateQuotes(curVal, curColumn);
     typeof onChange === 'function' && onChange({
       ...curColumn,
       val: curVal,
       // 选择结果 如果有两个 长度就为2
+      isField: isField,
+      //是否是选择字段
       condition,
       // 选择条件
       quotes,
@@ -4154,11 +4187,17 @@ const SelectFilterColumn = ({
     setCurColumn({
       table: '',
       // 表名
+      tableId: '',
+      // 表名
       alias: '',
       // 表的别名
       name: '',
       // 字段名
+      id: '',
+      // 字段名
       sql: '',
+      datasourceId: '',
+      datasourceName: '',
       database_type: '' // 字段类型
     });
     setCondition('');
@@ -4237,20 +4276,26 @@ const SelectFilterColumn = ({
       return jsx("div", {
         children: jsx(Dropdown, {
           trigger: ['click'],
-          overlay: jsxs(Menu, {
+          menu: {
+            items: [{
+              key: '天',
+              label: __('filter.day')
+            }, {
+              key: '周',
+              label: __('filter.week')
+            }, {
+              key: '月',
+              label: __('filter.month')
+            }, {
+              key: '年',
+              label: __('filter.year')
+            }],
             onClick: ({
               key
-            }) => setVal([key]),
-            children: [jsx(Menu.Item, {
-              children: __('filter.day')
-            }, '\u5929'), jsx(Menu.Item, {
-              children: __('filter.week')
-            }, '\u5468'), jsx(Menu.Item, {
-              children: __('filter.month')
-            }, '\u6708'), jsx(Menu.Item, {
-              children: __('filter.year')
-            }, '\u5E74')]
-          }),
+            }) => {
+              setVal([key]);
+            }
+          },
           children: jsxs(Button, {
             className: 'operator-btn',
             style: {
@@ -4274,28 +4319,34 @@ const SelectFilterColumn = ({
           }
         }), jsx(Dropdown, {
           trigger: ['click'],
-          overlay: jsxs(Menu, {
+          menu: {
+            items: [{
+              key: '分',
+              label: __('filter.minute')
+            }, {
+              key: '时',
+              label: __('filter.hour')
+            }, {
+              key: '天',
+              label: __('filter.day')
+            }, {
+              key: '周',
+              label: __('filter.week')
+            }, {
+              key: '月',
+              label: __('filter.month')
+            }, {
+              key: '年',
+              label: __('filter.year')
+            }],
             onClick: ({
               key
             }) => {
               let newVal = curVal.slice();
               newVal[1] = key;
               setVal(newVal);
-            },
-            children: [jsx(Menu.Item, {
-              children: __('filter.minute')
-            }, '\u5206'), jsx(Menu.Item, {
-              children: __('filter.hour')
-            }, '\u65F6'), jsx(Menu.Item, {
-              children: __('filter.day')
-            }, '\u5929'), jsx(Menu.Item, {
-              children: __('filter.week')
-            }, '\u5468'), jsx(Menu.Item, {
-              children: __('filter.month')
-            }, '\u6708'), jsx(Menu.Item, {
-              children: __('filter.year')
-            }, '\u5E74')]
-          }),
+            }
+          },
           children: jsxs(Button, {
             className: 'operator-btn',
             style: {
@@ -4339,42 +4390,67 @@ const SelectFilterColumn = ({
     }
     return null;
   }
+  const onRepeat = () => {
+    setIsField(!isField);
+    setVal([]);
+    setCurColumn({
+      ...curColumn,
+      table2: null
+    });
+  };
   const nextPage = !!curColumn.name;
+  const selectTable = e => {
+    store.setClosable(false);
+    store.setPopup2({
+      visible: true,
+      node: e.currentTarget,
+      content: jsx(SelectJoinColumn, {
+        data: [..._data],
+        value: value,
+        theme: ColumnsPopupThemeEnum.purple,
+        didUpdate: didUpdate,
+        onSelect: record => {
+          setCurColumn({
+            ...curColumn,
+            table2: record
+          });
+          store.setPopup2({
+            visible: false
+          });
+          store.setClosable(true);
+        }
+      })
+    });
+  };
   if (nextPage) {
     let {
       type,
       conditions
     } = getData(curColumn);
-    const menu = jsx(Menu, {
-      onClick: ({
-        key
-      }) => {
-        setDefaultVal(key);
-      },
-      children: conditions.map(v => {
-        return jsx(Menu.Item, {
-          children: __({
-            等于: 'filter.equal',
-            不等于: 'filter.notEqual',
-            大于: 'filter.greaterThan',
-            小于: 'filter.lessThan',
-            介于之间: 'filter.inBetween',
-            大于或等于: 'filter.greaterThanOrEqualTo',
-            小于或等于: 'filter.lessThanOrEqualTo',
-            为空: 'filter.empty',
-            不为空: 'filter.notEmpty',
-            是: 'filter.is',
-            不是: 'filter.isNo',
-            包含: 'filter.contain',
-            不包含: 'filter.notInclude',
-            '以...开始': 'filter.startWith',
-            '以...结束': 'filter.endWith',
-            早于: 'filter.earlierThan',
-            晚于: 'filter.laterThan',
-            是空的: 'filter.isEmpty'
-          }[v])
-        }, v);
-      })
+    const menu = conditions.map(v => {
+      return {
+        key: v,
+        label: __({
+          等于: 'filter.equal',
+          不等于: 'filter.notEqual',
+          大于: 'filter.greaterThan',
+          小于: 'filter.lessThan',
+          介于之间: 'filter.inBetween',
+          大于或等于: 'filter.greaterThanOrEqualTo',
+          小于或等于: 'filter.lessThanOrEqualTo',
+          为空: 'filter.empty',
+          不为空: 'filter.notEmpty',
+          是: 'filter.is',
+          不是: 'filter.isNo',
+          包含: 'filter.contain',
+          不包含: 'filter.notInclude',
+          '以...开始': 'filter.startWith',
+          '以...结束': 'filter.endWith',
+          早于: 'filter.earlierThan',
+          晚于: 'filter.laterThan',
+          是空的: 'filter.isEmpty'
+        }[v])
+      };
     });
     return jsxs("div", {
       className: 'filter-page',
@@ -4389,7 +4465,17 @@ const SelectFilterColumn = ({
         }), jsx("div", {
           className: 'right-info',
           children: jsx(Dropdown, {
-            overlay: menu,
+            menu: {
+              items: menu,
+              onClick: ({
+                key
+              }) => {
+                setDefaultVal(key);
+              }
+            },
+            // dropdownRender={() => {
+            //   return menu;
+            // }}
             trigger: ['click'],
             children: jsxs(Button, {
               className: 'operator-btn',
@@ -4419,9 +4505,27 @@ const SelectFilterColumn = ({
             })
           })
         })]
-      }), jsx("div", {
+      }), jsxs("div", {
         className: 'content',
-        children: renderFilter(type, condition)
+        children: [isField ? jsx("div", {
+          className: cx(`Sqb-TableName`, {
+            notSelected: !table2Selected
+          }),
+          onClick: selectTable,
+          children: table2Selected ? `${curColumn.table2?.datasourceName}.${curColumn.table2?.name}` : __('SqlQueryBuilder.pickTable')
+        }) : jsx("div", {
+          className: 'content_l',
+          children: renderFilter(type, condition)
+        }), ~['是', '不是'].indexOf(condition) ? jsx(Tooltip, {
+          title: __('SqlQueryBuilder.switch'),
+          children: jsx(Button, {
+            primary: true,
+            ghost: true,
+            className: 'ml-2 operator-icon',
+            icon: jsx(Repeat, {}),
+            onClick: onRepeat
+          })
+        }) : '']
       }), jsx("div", {
         className: 'footer',
         children: jsx("div", {
@@ -4633,7 +4737,7 @@ const SelectSummarize = ({
                   })
                 }), jsx("div", {
                   onClick: e => e.stopPropagation(),
-                  children: jsx(Tooltip, {
+                  children: jsx(Tooltip$1, {
                     placement: 'rightTop',
                     title: __(localeMap[v.tip]),
                     children: jsx("span", {
@@ -4752,6 +4856,7 @@ const SelectTable = ({
       datasourceId: '',
       datasourceName: '',
       name: '',
+      id: '',
       alias: ''
     });
   }
@@ -4780,6 +4885,7 @@ const SelectTable = ({
                     datasourceId: v.datasourceId,
                     datasourceName: v.datasourceName,
                     name: '',
+                    id: '',
                     alias: ''
                   });
                   getTables(v.datasourceId);
@@ -5258,7 +5364,7 @@ const NextDom = props => {
 const Header = props => {
   return jsxs("div", {
     className: `Sqb-item--text ${props.className || ''}`,
-    children: [props.title, props.onClose && jsx(Tooltip, {
+    children: [props.title, props.onClose && jsx(Tooltip$1, {
       placement: 'bottom',
       title: __('data.del'),
       children: jsx(CloseIcon2, {
@@ -5386,6 +5492,7 @@ const JoinData = props => {
   function selectTable(e) {
     let value = {
       name: meta.table2.name,
+      id: meta.table2.id,
       alias: meta.table2.alias,
       datasourceId: meta.table2.datasourceId,
       datasourceName: meta.table2.datasourceName
@@ -5433,6 +5540,7 @@ const JoinData = props => {
               name: tableName,
               alias,
               column: '',
+              column_id: '',
               datasourceId: data.datasourceId,
               datasourceName: data.datasourceName
             };
@@ -5476,9 +5584,13 @@ const JoinData = props => {
     let data = [];
     let value = {
       name: meta[type].column,
+      id: meta[type].column_id,
       table: meta[type].name,
+      tableId: meta[type].id,
       alias: meta[type].alias,
-      database_type: ''
+      database_type: '',
+      datasourceId: '',
+      datasourceName: ''
     };
     let {
       ExistAboveGroupBy,
@@ -5489,6 +5601,7 @@ const JoinData = props => {
       if (ExistAboveGroupBy) {
         let _data = {
           table: prevGroupBy.alias,
+          tableId: prevGroupBy.alias,
           alias: prevGroupBy.alias,
           datasourceId: '',
           datasourceName: '',
@@ -5525,6 +5638,7 @@ const JoinData = props => {
             return {
               alias: v.table2.alias,
               table: v.table2.name,
+              tableId: v.table2.id,
               datasourceId: v.table2.datasourceId,
               datasourceName: v.table2.datasourceName,
               columns: v.columns
@@ -5537,6 +5651,7 @@ const JoinData = props => {
             mo.push({
               alias: v.table.alias,
               table: v.table.name,
+              tableId: v.table.id,
               columns: v.columns,
               datasourceId: v.table.datasourceId,
               datasourceName: v.table.datasourceName
@@ -5545,6 +5660,7 @@ const JoinData = props => {
             mo.push({
               alias: v.table2.alias,
               table: v.table2.name,
+              tableId: v.table2.id,
               columns: v.columns,
               datasourceId: v.table2.datasourceId,
               datasourceName: v.table2.datasourceName
@@ -5557,6 +5673,7 @@ const JoinData = props => {
       data = [{
         alias: meta.table2.alias,
         table: meta.table2.name,
+        tableId: meta.table2.id,
         datasourceId: meta.table2.datasourceId,
         datasourceName: meta.table2.datasourceName,
         columns: meta.columns
@@ -5610,9 +5727,14 @@ const JoinData = props => {
     let table_type = type === ExpressionsEnum.LEFT ? FlagLocation.TABLE_1 : FlagLocation.TABLE_2;
     let value = {
       name: meta.expressions[_ind][type],
+      id: meta.expressions[_ind][`${type}_id`],
       table: meta[table_type].name,
+      tableId: meta[table_type].id,
       alias: meta[table_type].alias,
-      database_type: ''
+      database_type: '',
+      datasourceId: meta[table_type].datasourceId,
+      // 数据源id
+      datasourceName: meta[table_type].datasourceName // 数据源名
     };
     let data = [];
     let {
@@ -5624,6 +5746,7 @@ const JoinData = props => {
       if (ExistAboveGroupBy) {
         let _data = {
           table: prevGroupBy.alias,
+          tableId: prevGroupBy.alias,
           alias: prevGroupBy.alias,
           datasourceId: '',
           datasourceName: '',
@@ -5660,6 +5783,7 @@ const JoinData = props => {
             return {
               alias: v.table2.alias,
               table: v.table2.name,
+              tableId: v.table2.id,
               datasourceId: v.table2.datasourceId,
               datasourceName: v.table2.datasourceName,
               columns: v.columns
@@ -5672,6 +5796,7 @@ const JoinData = props => {
             mo.push({
               alias: v.table.alias,
               table: v.table.name,
+              tableId: v.table.id,
               columns: v.columns,
               datasourceId: v.table.datasourceId,
               datasourceName: v.table.datasourceName
@@ -5680,6 +5805,7 @@ const JoinData = props => {
             mo.push({
               alias: v.table2.alias,
               table: v.table2.name,
+              tableId: v.table2.id,
               columns: v.columns,
               datasourceId: v.table2.datasourceId,
               datasourceName: v.table2.datasourceName
@@ -5697,6 +5823,7 @@ const JoinData = props => {
       data = [{
         alias: meta.table2.alias,
         table: meta.table2.name,
+        tableId: meta.table2.id,
         datasourceId: meta.table2.datasourceId,
         datasourceName: meta.table2.datasourceName,
         columns: meta.columns
@@ -5800,8 +5927,11 @@ const JoinData = props => {
     newMeta[index].isSubquery = !newMeta[index].isSubquery;
     newMeta[index].table2 = {
       column: '',
+      column_id: '',
       name: '',
       // 表名
+      id: '',
+      // 表名
       alias: '',
       // 表别名
       datasourceName: '',
@@ -5861,9 +5991,9 @@ const JoinData = props => {
             }),
             onClick: selectTable,
             children: table2Selected ? `${meta.table2.datasourceName}.${meta.table2.name}` : __('SqlQueryBuilder.pickTable')
-          }), store._showSubquery && jsx(Tooltip$1, {
+          }), store._showSubquery && jsx(Tooltip, {
             title: __('SqlQueryBuilder.switchSubQuery'),
-            children: jsx(Button$1, {
+            children: jsx(Button, {
               disabled: meta.readonly,
               primary: meta.isSubquery,
               ghost: true,
@@ -5902,7 +6032,7 @@ const JoinData = props => {
               children: [jsx("span", {
                 className: 'ml-2 mr-4 text-gray-500',
                 children: v.operator
-              }), v.left_isString ? jsx(Input$1, {
+              }), v.left_isString ? jsx(Input, {
                 disabled: meta.readonly,
                 className: ':Sqb-TableName-input',
                 value: v.left_string,
@@ -5922,9 +6052,9 @@ const JoinData = props => {
                 "v-index": i,
                 onClick: selectMoreJoinColumn,
                 children: v.left_column ? v.left_column : __('SqlQueryBuilder.pickTable')
-              }), jsx(Tooltip$1, {
+              }), jsx(Tooltip, {
                 title: __('SqlQueryBuilder.switch'),
-                children: jsx(Button$1, {
+                children: jsx(Button, {
                   disabled: meta.readonly,
                   primary: true,
                   ghost: true,
@@ -5937,7 +6067,7 @@ const JoinData = props => {
               }), jsx("span", {
                 className: 'mr-2 text-gray-500',
                 children: "="
-              }), v.right_isString ? jsx(Input$1, {
+              }), v.right_isString ? jsx(Input, {
                 disabled: meta.readonly,
                 className: ':Sqb-TableName-input',
                 value: v.right_string,
@@ -5957,9 +6087,9 @@ const JoinData = props => {
                 "v-index": i,
                 onClick: selectMoreJoinColumn,
                 children: v.right_column ? v.right_column : __('SqlQueryBuilder.pickTable')
-              }), jsx(Tooltip$1, {
+              }), jsx(Tooltip, {
                 title: __('SqlQueryBuilder.switch'),
-                children: jsx(Button$1, {
+                children: jsx(Button, {
                   disabled: meta.readonly,
                   primary: true,
                   ghost: true,
@@ -5969,9 +6099,9 @@ const JoinData = props => {
                     onIsString('right_isString', i);
                   }
                 })
-              }), jsx(Tooltip$1, {
+              }), jsx(Tooltip, {
                 title: __('SqlQueryBuilder.add'),
-                children: jsx(Button$1, {
+                children: jsx(Button, {
                   disabled: meta.readonly,
                   primary: true,
                   ghost: true,
@@ -5994,9 +6124,9 @@ const JoinData = props => {
                     store.setMeta(newMeta);
                   }
                 })
-              }), meta.expressions.length > 0 && jsx(Tooltip$1, {
+              }), meta.expressions.length > 0 && jsx(Tooltip, {
                 title: __('SqlQueryBuilder.del'),
-                children: jsx(Button$1, {
+                children: jsx(Button, {
                   disabled: meta.readonly,
                   danger: true,
                   className: 'mr-2 operator-icon',
@@ -6010,9 +6140,9 @@ const JoinData = props => {
                 })
               })]
             }, i);
-          }), meta.table1.column_id && meta.table2.column_id && (meta.expressions?.length || 0) < 1 && jsx(Tooltip$1, {
+          }), meta.table1.column_id && meta.table2.column_id && (meta.expressions?.length || 0) < 1 && jsx(Tooltip, {
             title: __('SqlQueryBuilder.add'),
-            children: jsx(Button$1, {
+            children: jsx(Button, {
               disabled: meta.readonly,
               primary: true,
               ghost: true,
@@ -6201,11 +6331,16 @@ const Filter = props => {
       prevList,
       prevGroupBy
     } = getHelper(store.metaList, meta);
+    let newMeta = store.metaList.slice();
+    let mainTable = newMeta[0];
     let data;
     if (ExistAboveGroupBy) {
       let _data = {
         table: prevGroupBy.alias,
+        tableId: prevGroupBy.alias,
         alias: prevGroupBy.alias,
+        datasourceId: mainTable.table.datasourceId,
+        datasourceName: mainTable.table.datasourceName,
         columns: []
       };
       if (prevGroupBy?.group?.length) {
@@ -6247,7 +6382,10 @@ const Filter = props => {
           return {
             alias: v.table2.alias,
             table: v.table2.name,
-            columns: v.columns
+            tableId: v.table2.id,
+            columns: v.columns,
+            datasourceId: mainTable.table.datasourceId,
+            datasourceName: mainTable.table.datasourceName
           };
         }));
       }
@@ -6258,13 +6396,19 @@ const Filter = props => {
           return {
             alias: v.table.alias,
             table: v.table.name,
-            columns: v.columns
+            tableId: v.table.id,
+            columns: v.columns,
+            datasourceId: mainTable.table.datasourceId,
+            datasourceName: mainTable.table.datasourceName
           };
         } else if (v.type === TypeEnum.joinData) {
           return {
             alias: v.table2.alias,
             table: v.table2.name,
-            columns: v.columns
+            tableId: v.table2.id,
+            columns: v.columns,
+            datasourceId: mainTable.table.datasourceId,
+            datasourceName: mainTable.table.datasourceName
           };
         } else {
           return {
@@ -6298,17 +6442,24 @@ const Filter = props => {
     let value = {
       table: '',
       // 表名
+      tableId: '',
+      // 表名
       alias: '',
       // 表的别名
       name: '',
       // 字段名
+      id: '',
+      // 字段名
       database_type: '',
       // 字段类型
       condition: '',
       // 选择条件
       val: [],
       // 选择结果 如果有两个 长度就为2
-      quotes: '' // 前端显示用户看的文字
+      quotes: '',
+      // 前端显示用户看的文字
+      datasourceId: '',
+      datasourceName: ''
     };
     store.setPopup({
       visible: true,
@@ -6506,12 +6657,18 @@ const GroupBy = props => {
     let data = getColumns();
     let value = {
       table: '',
+      tableId: '',
       alias: '',
       name: '',
+      id: '',
       sql: '',
       database_type: '',
       condition: '',
-      quotes: ''
+      quotes: '',
+      datasourceId: '',
+      datasourceName: '',
+      column: '',
+      column_id: ''
     };
     store.setPopup({
       visible: true,
@@ -6596,6 +6753,7 @@ const SelectIndex = props => {
     if (ExistAboveGroupBy) {
       let _data = {
         table: prevGroupBy.alias,
+        tableId: prevGroupBy.alias,
         alias: prevGroupBy.alias,
         columns: []
       };
@@ -6701,12 +6859,18 @@ const SelectIndex = props => {
     let data = getColumns();
     let value = {
       table: '',
+      tableId: '',
       alias: '',
       name: '',
+      id: '',
       sql: '',
       database_type: '',
       condition: '',
-      quotes: ''
+      quotes: '',
+      datasourceId: '',
+      datasourceName: '',
+      column: '',
+      column_id: ''
     };
     store.setPopup({
       visible: true,
@@ -6830,6 +6994,7 @@ const Sort = props => {
     if (ExistAboveGroupBy) {
       let _data = {
         table: prevGroupBy.alias,
+        tableId: prevGroupBy.alias,
         alias: prevGroupBy.alias,
         columns: []
       };
@@ -6891,9 +7056,14 @@ const Sort = props => {
     let newMeta = store.metaList.slice();
     let value = {
       table: '',
+      tableId: '',
       alias: '',
       name: '',
-      database_type: ''
+      id: '',
+      database_type: '',
+      datasourceId: '',
+      // 数据源id
+      datasourceName: '' // 数据源名
     };
     let data = getColumns();
     // ② 过滤掉已经选择的 排序参数
@@ -7091,6 +7261,7 @@ const PermissionTable = props => {
     if (ExistAboveGroupBy) {
       let _data = {
         name: prevGroupBy.alias,
+        id: prevGroupBy.alias,
         alias: prevGroupBy.alias,
         datasourceId: '',
         datasourceName: ''
@@ -7102,6 +7273,7 @@ const PermissionTable = props => {
           return {
             alias: v.table2.alias,
             name: v.table2.name,
+            id: v.table2.id,
             datasourceId: v.table2.datasourceId,
             datasourceName: v.table2.datasourceName
           };
@@ -7113,6 +7285,7 @@ const PermissionTable = props => {
           mo.push({
             alias: v.table.alias,
             name: v.table.name,
+            id: v.table.id,
             datasourceId: v.table.datasourceId,
             datasourceName: v.table.datasourceName
           });
@@ -7120,6 +7293,7 @@ const PermissionTable = props => {
           mo.push({
             alias: v.table2.alias,
             name: v.table2.name,
+            id: v.table2.id,
             datasourceId: v.table2.datasourceId,
             datasourceName: v.table2.datasourceName
           });
@@ -7196,6 +7370,14 @@ const Metabase = props => {
     if (!visible) return null;
     return content;
   }, [store.popupData]);
+  const popupContent2 = useMemo(() => {
+    let {
+      visible,
+      content
+    } = store.popupData2;
+    if (!visible) return null;
+    return content;
+  }, [store.popupData2]);
   return (
     // @ts-ignore
     jsx(VisualBox, {
@@ -7216,7 +7398,7 @@ const Metabase = props => {
               meta: meta
             }, metaKey);
           })
-        }), !readonly && typeof onOk === 'function' ? jsx(Button, {
+        }), !readonly && typeof onOk === 'function' ? jsx(Button$1, {
           type: 'primary',
           className: `Sqb-btn`,
           icon: saveLoading ? jsx(LoadingOutlined, {}) : null,
@@ -7242,6 +7424,18 @@ const Metabase = props => {
             });
           },
           children: popupContent
+        }), popupContainer.current && jsx(Popup, {
+          container: popupContainer.current,
+          visible: store.popupData2.visible,
+          node: store.popupData2.node,
+          closable: store.popupClosable2,
+          hideVisible: () => {
+            store.setClosable(true);
+            store.setPopup2({
+              visible: false
+            });
+          },
+          children: popupContent2
         })]
       })
     })