@gingkoo/pandora-metabase 1.0.14 → 1.0.16

package/lib/es/components/modules/join-data.js

@@ -1,12 +1,12 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["subToolbar", "toolbar"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cx from 'classnames';
-import { Button, Tooltip, Input, Modal2, Modal, Toast } from '@gingkoo/pandora';
+import { Button, Tooltip, Input, Modal2, Modal, Toast, Dropdown, InputNumber } from '@gingkoo/pandora';
 import { FfPlus, FfLine, Repeat, RelatedWork } from '@gingkoo/pandora-icons';
 import Metabase from '../../index';
 import isEqual from 'lodash/isEqual';
@@ -15,6 +15,7 @@ import { uuidv4, getAlias } from '../../utils/helper';
 import { __ } from '../../locale';
 import { findIndex, getSubColumns } from '../../utils';
 import { TypeEnum, ColumnsPopupThemeEnum, JoinEnum, SQL_COLUMN_TYPE } from '../../store/enum';
+import { AtomsTypeEnum } from '../../store/types';
 import { SummarizeAlias } from '../../store/helper';
 import { getHelper, changeTableAlias } from '../../utils';
 import Wrapper from './components/Wrapper';
@@ -22,9 +23,10 @@ import NextDom from './components/meta-icon';
 import Header from './components/header';
 import SelectList from '../dialog/select-list';
 import { LeftJoinIcon, InnerJoinIcon } from '../icons';
-import { SelectTable, SelectJoin, SelectJoinColumnMultiple, SelectColumn } from '../dialog';
+import { SelectTable, SelectJoin, SelectColumnMultiple, SelectColumn, Expression, SelectPermissionTable } from '../dialog';
 import { useStore } from '../../hooks/use-provider';
 var PrevResult = 'Previous results';
+var operators = ['AND', 'OR', '(', ')', ',', '+', '-', '*', '/', '!=', '<=', '>=', '<', '>', '='];
 var FlagLocation;
 (function (FlagLocation) {
   FlagLocation["TABLE_1"] = "table1";
@@ -32,71 +34,146 @@ var FlagLocation;
 })(FlagLocation || (FlagLocation = {}));
 var ExpressionsEnum;
 (function (ExpressionsEnum) {
-  ExpressionsEnum["LEFT"] = "left";
-  ExpressionsEnum["RIGHT"] = "right";
+  ExpressionsEnum["LEFT"] = "lhs";
+  ExpressionsEnum["RIGHT"] = "rhs";
 })(ExpressionsEnum || (ExpressionsEnum = {}));
-var operatorList = ['等于'
-// '不等于',
-// '包含',
-// '不包含',
-// '为空',
-// '不为空',
-// '以...开始',
-// '以...结束',
-// '不以...开始',
-// '不以...结束',
-// 'In',
-// 'Not In',
-// '正则匹配',
-];
 var getText = function getText(v) {
-  return {
-    等于: 'filter.equal',
-    不等于: 'filter.notEqual',
-    大于: 'filter.greaterThan',
-    小于: 'filter.lessThan',
-    介于之间: 'filter.inBetween',
-    大于或等于: 'filter.greaterThanOrEqualTo',
-    小于或等于: 'filter.lessThanOrEqualTo',
-    为空: 'filter.empty',
-    不为空: 'filter.notEmpty',
-    包含: 'filter.contain',
-    不包含: 'filter.notInclude',
-    '以...开始': 'filter.startWith',
-    '以...结束': 'filter.endWith',
-    '不以...开始': 'filter.notStartWith',
-    '不以...结束': 'filter.notEndWith',
-    早于: 'filter.earlierThan',
-    晚于: 'filter.laterThan',
-    是空的: 'filter.isEmpty',
-    In: 'filter.within',
-    'Not In': 'filter.withnotin',
-    无需结果: 'filter.notresults',
-    正则匹配: 'filter.regularMatch'
-  }[v];
+  return _defineProperty(_defineProperty(_defineProperty({}, AtomsTypeEnum.JOIN_DEFAULT, 'joinData.default'), AtomsTypeEnum.EXPRESSION, 'joinData.expression'), AtomsTypeEnum.OPERATOR, 'customColumn.operator')[v];
 };
-var menu = operatorList.map(function (v) {
+var menuTypes = [{
+  key: AtomsTypeEnum.JOIN_DEFAULT,
+  label: __(getText(AtomsTypeEnum.JOIN_DEFAULT))
+}, {
+  key: AtomsTypeEnum.EXPRESSION,
+  label: __(getText(AtomsTypeEnum.EXPRESSION))
+}, {
+  key: AtomsTypeEnum.OPERATOR,
+  label: __(getText(AtomsTypeEnum.OPERATOR))
+}];
+var menuOperator = operators.map(function (v) {
   return {
     key: v,
-    label: __(getText(v))
+    label: v
   };
 });
 var JoinData = function JoinData(props) {
-  var _meta$subquery, _meta$subquery2, _meta$subquery3, _meta$table2, _meta$table3, _meta$table5, _meta$table6, _meta$table7, _meta$table8, _meta$table9, _meta$table10, _meta$table11, _meta$table12, _meta$expressions, _meta$expressions2;
+  var _meta$subquery, _meta$subquery2, _meta$subquery3, _meta$table2, _meta$table3, _meta$table5, _meta$table6, _meta$table7, _meta$table8, _meta$expressions, _meta$table9, _meta$table0, _meta$expressions2;
   var meta = props.meta,
     groupIndex = props.groupIndex;
   var store = useStore();
+  var filterCustomType = store.filterCustomType;
   var metaKey = meta.metaKey;
   var index = findIndex(store.metaList[groupIndex].list, meta);
   var table1Selected = Boolean(meta.table1.name);
   var table2Selected = Boolean(meta.table2.name);
   var subQuerySelected = Boolean((_meta$subquery = meta.subquery) === null || _meta$subquery === void 0 || (_meta$subquery = _meta$subquery[0]) === null || _meta$subquery === void 0 || (_meta$subquery = _meta$subquery.table) === null || _meta$subquery === void 0 ? void 0 : _meta$subquery.name);
-  var columnsSelected = meta.table1.fields.length > 0 && meta.table2.fields.length > 0;
+  var columnsSelected = meta.table1.id && meta.table2.id;
   // useEffect(() => {
   //   let newMetaList = store.metaList[groupIndex].list.slice();
   //   newMetaList[index] = setQuotes(meta);
   //   store.setMeta(newMetaList, groupIndex);
   // }, []);
+  // 获取表格列
+  var getTableColumns = function getTableColumns() {
+    var data = [];
+    var _getHelper = getHelper(store.metaList[groupIndex].list, meta),
+      ExistAboveGroupBy = _getHelper.ExistAboveGroupBy,
+      prevList = _getHelper.prevList,
+      prevGroupBy = _getHelper.prevGroupBy;
+    if (ExistAboveGroupBy) {
+      var _prevGroupBy$group, _prevGroupBy$by;
+      var _data = {
+        alias: prevGroupBy.alias,
+        id: prevGroupBy.alias,
+        tableUuid: prevGroupBy.tableUuid || uuidv4('table'),
+        name: prevGroupBy.alias,
+        name_zh: prevGroupBy.alias,
+        datasourceId: '',
+        datasourceName: '',
+        columns: []
+      };
+      if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$group = prevGroupBy.group) !== null && _prevGroupBy$group !== void 0 && _prevGroupBy$group.length) {
+        _data.columns = _data.columns.concat(prevGroupBy.group.map(function (v) {
+          return _objectSpread(_objectSpread({}, v), {}, {
+            name: v.name || v.quotes,
+            name_zh: v.name_zh || v.quotes,
+            id: v.id || v.fieldId,
+            database_type: (v === null || v === void 0 ? void 0 : v.database_type) || SQL_COLUMN_TYPE.FLOAT,
+            special_type: '',
+            sql: v.sql,
+            select: true
+          });
+        }));
+      }
+      if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$by = prevGroupBy.by) !== null && _prevGroupBy$by !== void 0 && _prevGroupBy$by.length) {
+        _data.columns = _data.columns.concat(prevGroupBy.by.map(function (v) {
+          return _objectSpread(_objectSpread({}, v), {}, {
+            name: v.name || v.quotes,
+            name_zh: v.name_zh || v.quotes,
+            id: v.id || v.fieldId,
+            database_type: (v === null || v === void 0 ? void 0 : v.database_type) || SQL_COLUMN_TYPE.FLOAT,
+            special_type: '',
+            sql: v.sql,
+            select: true
+          });
+        }));
+      }
+      data = [_data];
+      var joinData = prevList.filter(function (v) {
+        return v.type === TypeEnum.joinData;
+      }).filter(function (v) {
+        return v && v.table2.name;
+      });
+      if (joinData !== null && joinData !== void 0 && joinData.length) {
+        data = data.concat(joinData.map(function (v) {
+          return {
+            alias: v.table2.alias,
+            name: v.table2.name,
+            name_zh: v.table2.name_zh,
+            id: v.table2.id,
+            tableUuid: v.table2.tableUuid || uuidv4('table'),
+            datasourceId: v.table2.datasourceId,
+            datasourceName: v.table2.datasourceName,
+            columns: v.columns || []
+          };
+        }));
+      }
+    } else {
+      data = store.metaList[groupIndex].list.slice(0, index + 1).reduce(function (mo, v) {
+        if (v.type === TypeEnum.data) {
+          mo.push({
+            alias: v.table.alias,
+            name: v.table.name,
+            name_zh: v.table.name_zh,
+            id: v.table.id,
+            tableUuid: v.table.tableUuid || uuidv4('table'),
+            columns: v.columns,
+            datasourceId: v.table.datasourceId,
+            datasourceName: v.table.datasourceName
+          });
+        } else if (v.type === TypeEnum.joinData) {
+          mo.push({
+            alias: v.table2.alias,
+            name: v.table2.name,
+            name_zh: v.table2.name_zh,
+            id: v.table2.id,
+            tableUuid: v.table2.tableUuid || uuidv4('table'),
+            columns: v.columns,
+            datasourceId: v.table2.datasourceId,
+            datasourceName: v.table2.datasourceName
+          });
+        }
+        return mo;
+      }, []);
+    }
+    // 过滤为table1选中的表
+    var newMeta = store.metaList[groupIndex].list.slice();
+    data = data.filter(function (v) {
+      return newMeta[index][FlagLocation.TABLE_1].tableUuid == v.tableUuid || newMeta[index][FlagLocation.TABLE_2].tableUuid == v.tableUuid;
+    });
+    return data;
+  };
+  // 字段列表
   function selectColumns(e) {
     var columns = meta.columns;
     !meta.readonly && store.setPopup({
@@ -113,9 +190,143 @@ var JoinData = function JoinData(props) {
       })
     });
   }
+  function selectLeftTable(e) {
+    var node = e.currentTarget;
+    // let type: ExpressionsEnum = node.getAttribute('v-data');
+    var _ind = Number(node.getAttribute('v-index'));
+    var index = findIndex(store.metaList[groupIndex].list, meta);
+    var table_type = FlagLocation.TABLE_1;
+    var data = [];
+    var _getHelper2 = getHelper(store.metaList[groupIndex].list, meta),
+      ExistAboveGroupBy = _getHelper2.ExistAboveGroupBy,
+      prevList = _getHelper2.prevList,
+      prevGroupBy = _getHelper2.prevGroupBy;
+    if (ExistAboveGroupBy) {
+      var _prevGroupBy$group2, _prevGroupBy$by2;
+      var _data = {
+        alias: prevGroupBy.alias,
+        id: prevGroupBy.alias,
+        tableUuid: prevGroupBy.tableUuid || uuidv4('table'),
+        name: prevGroupBy.alias,
+        name_zh: prevGroupBy.alias,
+        datasourceId: '',
+        datasourceName: ''
+        // columns: [],
+      };
+      if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$group2 = prevGroupBy.group) !== null && _prevGroupBy$group2 !== void 0 && _prevGroupBy$group2.length) {
+        // _data.columns = _data.columns.concat(
+        //   prevGroupBy.group.map((v: MetaSummarize_Group) => {
+        //     return {
+        //       ...v,
+        //       name: v.name || v.quotes,
+        //       name_zh: v.name_zh || v.quotes,
+        //       id: v.id || v.fieldId,
+        //       database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
+        //       special_type: '',
+        //       sql: v.sql,
+        //       select: true,
+        //     };
+        //   }),
+        // );
+      }
+      if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$by2 = prevGroupBy.by) !== null && _prevGroupBy$by2 !== void 0 && _prevGroupBy$by2.length) {
+        // _data.columns = _data.columns.concat(
+        //   prevGroupBy.by.map((v: MetaSummarize_By) => {
+        //     return {
+        //       ...v,
+        //       name: v.name || v.quotes,
+        //       name_zh: v.name_zh || v.quotes,
+        //       id: v.id || v.fieldId,
+        //       database_type: v?.database_type || SQL_COLUMN_TYPE.FLOAT,
+        //       special_type: '',
+        //       sql: v.sql,
+        //       select: true,
+        //     };
+        //   }),
+        // );
+      }
+      data = [_data];
+      var joinData = prevList.filter(function (v) {
+        return v.type === TypeEnum.joinData;
+      }).filter(function (v) {
+        return v && v.table2.name;
+      });
+      if (joinData !== null && joinData !== void 0 && joinData.length) {
+        data = data.concat(joinData.map(function (v) {
+          return {
+            alias: v.table2.alias,
+            name: v.table2.name,
+            name_zh: v.table2.name_zh,
+            id: v.table2.id,
+            tableUuid: v.table2.tableUuid || uuidv4('table'),
+            datasourceId: v.table2.datasourceId,
+            datasourceName: v.table2.datasourceName,
+            columns: []
+          };
+        }));
+      }
+    } else {
+      data = store.metaList[groupIndex].list.slice(0, index).reduce(function (mo, v) {
+        if (v.type === TypeEnum.data) {
+          mo.push({
+            alias: v.table.alias,
+            name: v.table.name,
+            name_zh: v.table.name_zh,
+            id: v.table.id,
+            tableUuid: v.table.tableUuid || uuidv4('table'),
+            columns: [],
+            datasourceId: v.table.datasourceId,
+            datasourceName: v.table.datasourceName
+          });
+        } else if (v.type === TypeEnum.joinData) {
+          mo.push({
+            alias: v.table2.alias,
+            name: v.table2.name,
+            name_zh: v.table2.name_zh,
+            id: v.table2.id,
+            tableUuid: v.table2.tableUuid || uuidv4('table'),
+            columns: [],
+            datasourceId: v.table2.datasourceId,
+            datasourceName: v.table2.datasourceName
+          });
+        }
+        return mo;
+      }, []);
+    }
+    // // 过滤为table1选中的表
+    var newMeta = store.metaList[groupIndex].list.slice();
+    // if (((newMeta[index] as MetaJoin)[FlagLocation.TABLE_1] as MetaJoin_TalbeType).name) {
+    //   data = data.filter((v) => {
+    //     return (
+    //       ((newMeta[index] as MetaJoin)[FlagLocation.TABLE_1] as MetaJoin_TalbeType).name == v.table
+    //     );
+    //   });
+    // }
+    !meta.readonly && store.setPopup({
+      visible: true,
+      node: node,
+      content: _jsx(SelectPermissionTable, {
+        data: data,
+        value: newMeta[index][table_type],
+        onChange: function onChange(data) {
+          if (table_type === FlagLocation.TABLE_1) {
+            if (newMeta[index][table_type].datasourceId !== data.datasourceId || newMeta[index][table_type].name !== data.name) {
+              newMeta[index][table_type] = data;
+              initExpressions();
+            }
+          }
+          store.setMeta(newMeta, groupIndex);
+          store.setPopup({
+            visible: false
+          });
+        }
+      })
+    });
+  }
   function selectTable(e) {
     var value = {
       name: meta.table2.name,
+      name_zh: meta.table2.name_zh,
       id: meta.table2.id,
       alias: meta.table2.alias,
       datasourceId: meta.table2.datasourceId,
@@ -141,11 +352,10 @@ var JoinData = function JoinData(props) {
               fieldUuid: '',
               quotes: '',
               datasourceId: data.datasourceId,
-              datasourceName: data.datasourceName,
-              fields: []
+              datasourceName: data.datasourceName
             });
             newMeta[index].table2 = _table2;
-            newMeta[index].expressions = [];
+            initExpressions();
             store.fetchColumns(_table2, data.datasourceId, function (columns) {
               newMeta[index].columns = columns;
               // 关联表变了 下面模块全部删除
@@ -162,6 +372,72 @@ var JoinData = function JoinData(props) {
       })
     });
   }
+  function initExpressions() {
+    var _newMeta$index, _newMeta$index2;
+    var newMeta = store.metaList[groupIndex].list.slice();
+    if (newMeta[index].table1.name && newMeta[index].table2.name && !((_newMeta$index = newMeta[index]) !== null && _newMeta$index !== void 0 && _newMeta$index.expressions) || ((_newMeta$index2 = newMeta[index]) === null || _newMeta$index2 === void 0 || (_newMeta$index2 = _newMeta$index2.expressions) === null || _newMeta$index2 === void 0 ? void 0 : _newMeta$index2.length) < 1) {
+      newMeta[index].expressions = [{
+        lhs: [{
+          fieldName: '',
+          // 字段名
+          fieldNameZh: '',
+          // 字段中文名
+          fieldAlias: '',
+          // 别名
+          fieldUuid: '',
+          // uuid
+          fieldId: '',
+          // 字段id
+          // quotes?: string; // 字段展示的 不知道有没有用
+          tableName: '',
+          // 表名
+          tableNameZh: '',
+          tableId: '',
+          // 表名
+          tableAlias: '',
+          // 别名
+          tableUuid: '',
+          // 表唯一标识
+          datasourceName: '',
+          // 数据源名
+          datasourceId: '',
+          // 数据源id
+          type: AtomsTypeEnum.FIELD
+        }],
+        condition: '',
+        rhs: [{
+          fieldName: '',
+          // 字段名
+          fieldNameZh: '',
+          // 字段中文名
+          fieldAlias: '',
+          // 别名
+          fieldUuid: '',
+          // uuid
+          fieldId: '',
+          // 字段id
+          // quotes?: string; // 字段展示的 不知道有没有用
+          tableName: '',
+          // 表名
+          tableNameZh: '',
+          tableId: '',
+          // 表名
+          tableAlias: '',
+          // 别名
+          tableUuid: '',
+          // 表唯一标识
+          datasourceName: '',
+          // 数据源名
+          datasourceId: '',
+          // 数据源id
+          type: AtomsTypeEnum.FIELD
+        }],
+        // quotes: '',
+        type: AtomsTypeEnum.JOIN_DEFAULT
+      }];
+      store.setMeta(newMeta, groupIndex);
+    }
+  }
   function selectJoin(e) {
     var newMeta = store.metaList[groupIndex].list.slice();
     !meta.readonly && store.setPopup({
@@ -180,222 +456,36 @@ var JoinData = function JoinData(props) {
       })
     });
   }
-  function selectJoinColumn(e) {
-    var node = e.currentTarget;
-    var type = node.getAttribute('v-data');
-    var data = [];
-    var tableInfo = {
-      name: meta[type].quotes || meta[type].fieldAlias,
-      id: meta[type].fieldUuid,
-      quotes: meta[type].quotes,
-      fieldUuid: meta[type].fieldUuid || uuidv4('field'),
-      fieldAlias: meta[type].fieldAlias || '',
-      table: meta[type].name,
-      tableId: meta[type].id,
-      tableUuid: meta[type].tableUuid || uuidv4('table'),
-      alias: meta[type].alias,
-      database_type: '',
-      datasourceId: '',
-      datasourceName: ''
-    };
-    // let value: MetaJoin_Field[] = ;
-    var _getHelper = getHelper(store.metaList[groupIndex].list, meta),
-      ExistAboveGroupBy = _getHelper.ExistAboveGroupBy,
-      prevList = _getHelper.prevList,
-      prevGroupBy = _getHelper.prevGroupBy;
-    if (type === FlagLocation.TABLE_1) {
-      if (ExistAboveGroupBy) {
-        var _prevGroupBy$group, _prevGroupBy$by;
-        var _data = {
-          table: prevGroupBy.alias,
-          tableId: prevGroupBy.alias,
-          tableUuid: prevGroupBy.tableUuid || uuidv4('table'),
-          alias: prevGroupBy.alias,
-          datasourceId: '',
-          datasourceName: '',
-          columns: []
-        };
-        if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$group = prevGroupBy.group) !== null && _prevGroupBy$group !== void 0 && _prevGroupBy$group.length) {
-          _data.columns = _data.columns.concat(prevGroupBy.group.map(function (v) {
-            return _objectSpread(_objectSpread({}, v), {}, {
-              name: v.quotes,
-              database_type: (v === null || v === void 0 ? void 0 : v.database_type) || SQL_COLUMN_TYPE.FLOAT,
-              special_type: '',
-              sql: v.sql,
-              select: true
-            });
-          }));
-        }
-        if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$by = prevGroupBy.by) !== null && _prevGroupBy$by !== void 0 && _prevGroupBy$by.length) {
-          _data.columns = _data.columns.concat(prevGroupBy.by.map(function (v) {
-            return _objectSpread(_objectSpread({}, v), {}, {
-              name: v.quotes,
-              database_type: (v === null || v === void 0 ? void 0 : v.database_type) || SQL_COLUMN_TYPE.FLOAT,
-              special_type: '',
-              sql: v.sql,
-              select: true
-            });
-          }));
-        }
-        data = [_data];
-        var joinData = prevList.filter(function (v) {
-          return v.type === TypeEnum.joinData;
-        }).filter(function (v) {
-          return v && v.table2.name;
-        });
-        if (joinData.length) {
-          data = data.concat(joinData.map(function (v) {
-            return {
-              alias: v.table2.alias,
-              table: v.table2.name,
-              tableId: v.table2.id,
-              tableUuid: v.table2.tableUuid || uuidv4('table'),
-              datasourceId: v.table2.datasourceId,
-              datasourceName: v.table2.datasourceName,
-              columns: v.columns
-            };
-          }));
-        }
-      } else {
-        data = store.metaList[groupIndex].list.slice(0, index).reduce(function (mo, v) {
-          if (v.type === TypeEnum.data) {
-            mo.push({
-              alias: v.table.alias,
-              table: v.table.name,
-              tableId: v.table.id,
-              tableUuid: v.table.tableUuid || uuidv4('table'),
-              columns: v.columns,
-              datasourceId: v.table.datasourceId,
-              datasourceName: v.table.datasourceName
-            });
-          } else if (v.type === TypeEnum.joinData) {
-            mo.push({
-              alias: v.table2.alias,
-              table: v.table2.name,
-              tableId: v.table2.id,
-              tableUuid: v.table2.tableUuid || uuidv4('table'),
-              columns: v.columns,
-              datasourceId: v.table2.datasourceId,
-              datasourceName: v.table2.datasourceName
-            });
-          }
-          return mo;
-        }, []);
-      }
-    } else {
-      data = [{
-        alias: meta.table2.alias,
-        table: meta.table2.name,
-        tableId: meta.table2.id,
-        tableUuid: meta.table2.tableUuid || uuidv4('table'),
-        datasourceId: meta.table2.datasourceId,
-        datasourceName: meta.table2.datasourceName,
-        columns: meta.columns
-      }];
-    }
-    !meta.readonly && store.setPopup({
-      visible: true,
-      node: node,
-      content: _jsx(SelectJoinColumnMultiple, {
-        data: data,
-        tableInfo: tableInfo,
-        value: meta[type].fields || [],
-        theme: ColumnsPopupThemeEnum.skyBlue,
-        multiple: true,
-        onSelect: function onSelect(tableInfo, fields) {
-          var table = tableInfo.table,
-            alias = tableInfo.alias,
-            name = tableInfo.name,
-            sql = tableInfo.sql,
-            datasourceId = tableInfo.datasourceId,
-            datasourceName = tableInfo.datasourceName,
-            _tableInfo$id = tableInfo.id,
-            id = _tableInfo$id === void 0 ? '' : _tableInfo$id,
-            _tableInfo$fieldAlias = tableInfo.fieldAlias,
-            fieldAlias = _tableInfo$fieldAlias === void 0 ? '' : _tableInfo$fieldAlias,
-            _tableInfo$fieldUuid = tableInfo.fieldUuid,
-            fieldUuid = _tableInfo$fieldUuid === void 0 ? '' : _tableInfo$fieldUuid,
-            quotes = tableInfo.quotes,
-            tableUuid = tableInfo.tableUuid;
-          var newMeta = store.metaList[groupIndex].list.slice();
-          if (alias === SummarizeAlias) {
-            newMeta[index][type].fieldAlias = fieldAlias;
-            newMeta[index][type].fieldUuid = fieldUuid;
-            newMeta[index][type].quotes = quotes;
-            newMeta[index][type].fields = fields;
-          } else {
-            newMeta[index][type].fieldAlias = name;
-            newMeta[index][type].fieldUuid = id;
-            newMeta[index][type].quotes = name;
-            newMeta[index][type].fields = fields;
-          }
-          if (type === FlagLocation.TABLE_1) {
-            if (newMeta[index][type].alias !== alias) {
-              newMeta[index][type].alias = alias;
-              newMeta[index][type].name = table;
-              newMeta[index][type].tableUuid = tableUuid;
-              newMeta[index][type].datasourceId = datasourceId;
-              newMeta[index][type].datasourceName = datasourceName;
-              newMeta[index].expressions = [];
-              if (alias === SummarizeAlias) {
-                var _sql$split;
-                newMeta[index][type].groupSql = (sql === null || sql === void 0 || (_sql$split = sql.split(' AS ')) === null || _sql$split === void 0 ? void 0 : _sql$split[1]) || '';
-              }
-            }
-          }
-          store.setMeta(newMeta, groupIndex);
-          // store.setPopup({ visible: false });
-        }
-      })
-    });
-  }
   function selectMoreJoinColumn(e) {
     var node = e.currentTarget;
-    var type = node.getAttribute('v-data');
+    var _position = node.getAttribute('v-position');
     var _ind = Number(node.getAttribute('v-index'));
+    var _ind2 = Number(node.getAttribute('v-index2'));
     var index = findIndex(store.metaList[groupIndex].list, meta);
-    var table_type = type === ExpressionsEnum.LEFT ? FlagLocation.TABLE_1 : FlagLocation.TABLE_2;
-    var tableInfo = {
-      name: meta.expressions[_ind]["".concat(type, "_quotes")] || meta.expressions[_ind]["".concat(type, "_fieldAlias")],
-      id: meta.expressions[_ind]["".concat(type, "_fieldUuid")],
-      table: meta[table_type].name,
-      fieldUuid: meta[table_type].fieldUuid || uuidv4('field'),
-      fieldAlias: meta[table_type].fieldAlias || '',
-      tableId: meta[table_type].id,
-      tableUuid: meta[table_type].tableUuid || uuidv4('table'),
-      alias: meta[table_type].alias,
-      database_type: '',
-      datasourceId: meta[table_type].datasourceId,
-      // 数据源id
-      datasourceName: meta[table_type].datasourceName // 数据源名
-    };
-    // let value: MetaJoin_Field[] = [
-    //   {
-    //     fieldUuid: meta[table_type].fieldUuid || uuidv4('field'),
-    //     fieldAlias: meta[table_type].fieldAlias || '',
-    //   },
-    // ];
     var data = [];
-    var _getHelper2 = getHelper(store.metaList[groupIndex].list, meta),
-      ExistAboveGroupBy = _getHelper2.ExistAboveGroupBy,
-      prevList = _getHelper2.prevList,
-      prevGroupBy = _getHelper2.prevGroupBy;
-    if (type === ExpressionsEnum.LEFT) {
+    var _getHelper3 = getHelper(store.metaList[groupIndex].list, meta),
+      ExistAboveGroupBy = _getHelper3.ExistAboveGroupBy,
+      prevList = _getHelper3.prevList,
+      prevGroupBy = _getHelper3.prevGroupBy;
+    if (_position === ExpressionsEnum.LEFT) {
       if (ExistAboveGroupBy) {
-        var _prevGroupBy$group2, _prevGroupBy$by2;
+        var _prevGroupBy$group3, _prevGroupBy$by3;
         var _data = {
-          table: prevGroupBy.alias,
-          tableId: prevGroupBy.alias,
+          name: prevGroupBy.alias,
+          name_zh: prevGroupBy.alias,
+          id: prevGroupBy.alias,
           tableUuid: prevGroupBy.tableUuid || uuidv4('table'),
           alias: prevGroupBy.alias,
           datasourceId: '',
           datasourceName: '',
           columns: []
         };
-        if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$group2 = prevGroupBy.group) !== null && _prevGroupBy$group2 !== void 0 && _prevGroupBy$group2.length) {
+        if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$group3 = prevGroupBy.group) !== null && _prevGroupBy$group3 !== void 0 && _prevGroupBy$group3.length) {
           _data.columns = _data.columns.concat(prevGroupBy.group.map(function (v) {
             return _objectSpread(_objectSpread({}, v), {}, {
-              name: v.quotes,
+              name: v.name || v.quotes,
+              name_zh: v.name_zh || v.quotes,
+              id: v.id || v.fieldId,
               database_type: (v === null || v === void 0 ? void 0 : v.database_type) || SQL_COLUMN_TYPE.FLOAT,
               special_type: '',
               sql: v.sql,
@@ -403,10 +493,12 @@ var JoinData = function JoinData(props) {
             });
           }));
         }
-        if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$by2 = prevGroupBy.by) !== null && _prevGroupBy$by2 !== void 0 && _prevGroupBy$by2.length) {
+        if (prevGroupBy !== null && prevGroupBy !== void 0 && (_prevGroupBy$by3 = prevGroupBy.by) !== null && _prevGroupBy$by3 !== void 0 && _prevGroupBy$by3.length) {
           _data.columns = _data.columns.concat(prevGroupBy.by.map(function (v) {
             return _objectSpread(_objectSpread({}, v), {}, {
-              name: v.quotes,
+              name: v.name || v.quotes,
+              name_zh: v.name_zh || v.quotes,
+              id: v.id || v.fieldId,
               database_type: (v === null || v === void 0 ? void 0 : v.database_type) || SQL_COLUMN_TYPE.FLOAT,
               special_type: '',
               sql: v.sql,
@@ -420,12 +512,13 @@ var JoinData = function JoinData(props) {
         }).filter(function (v) {
           return v && v.table2.name;
         });
-        if (joinData.length) {
+        if (joinData !== null && joinData !== void 0 && joinData.length) {
           data = data.concat(joinData.map(function (v) {
             return {
               alias: v.table2.alias,
-              table: v.table2.name,
-              tableId: v.table2.id,
+              name: v.table2.name,
+              name_zh: v.table2.name_zh,
+              id: v.table2.id,
               tableUuid: v.table2.tableUuid || uuidv4('table'),
               datasourceId: v.table2.datasourceId,
               datasourceName: v.table2.datasourceName,
@@ -438,8 +531,9 @@ var JoinData = function JoinData(props) {
           if (v.type === TypeEnum.data) {
             mo.push({
               alias: v.table.alias,
-              table: v.table.name,
-              tableId: v.table.id,
+              name: v.table.name,
+              name_zh: v.table.name_zh,
+              id: v.table.id,
               tableUuid: v.table.tableUuid || uuidv4('table'),
               columns: v.columns,
               datasourceId: v.table.datasourceId,
@@ -448,8 +542,9 @@ var JoinData = function JoinData(props) {
           } else if (v.type === TypeEnum.joinData) {
             mo.push({
               alias: v.table2.alias,
-              table: v.table2.name,
-              tableId: v.table2.id,
+              name: v.table2.name,
+              name_zh: v.table2.name_zh,
+              id: v.table2.id,
               tableUuid: v.table2.tableUuid || uuidv4('table'),
               columns: v.columns,
               datasourceId: v.table2.datasourceId,
@@ -461,14 +556,17 @@ var JoinData = function JoinData(props) {
       }
       // 过滤为table1选中的表
       var newMeta = store.metaList[groupIndex].list.slice();
-      data = data.filter(function (v) {
-        return newMeta[index][FlagLocation.TABLE_1].name == v.table;
-      });
+      if (newMeta[index][FlagLocation.TABLE_1].name) {
+        data = data.filter(function (v) {
+          return newMeta[index][FlagLocation.TABLE_1].tableUuid == v.tableUuid;
+        });
+      }
     } else {
       data = [{
         alias: meta.table2.alias,
-        table: meta.table2.name,
-        tableId: meta.table2.id,
+        name: meta.table2.name,
+        name_zh: meta.table2.name_zh,
+        id: meta.table2.id,
         tableUuid: meta.table2.tableUuid || uuidv4('table'),
         datasourceId: meta.table2.datasourceId,
         datasourceName: meta.table2.datasourceName,
@@ -478,39 +576,46 @@ var JoinData = function JoinData(props) {
     !meta.readonly && store.setPopup({
       visible: true,
       node: node,
-      content: _jsx(SelectJoinColumnMultiple, {
+      content: _jsx(SelectColumnMultiple, {
         data: data,
-        tableInfo: tableInfo,
-        value: meta.expressions[_ind]["".concat(type, "_fields")] || [],
+        // tableInfo={tableInfo}
+        value: meta.expressions[_ind][_position],
         theme: ColumnsPopupThemeEnum.skyBlue,
-        onSelect: function onSelect(tableInfo, fields) {
-          var table = tableInfo.table,
-            alias = tableInfo.alias,
-            name = tableInfo.name,
-            sql = tableInfo.sql,
-            datasourceId = tableInfo.datasourceId,
-            datasourceName = tableInfo.datasourceName,
-            _tableInfo$id2 = tableInfo.id,
-            id = _tableInfo$id2 === void 0 ? '' : _tableInfo$id2,
-            fieldAlias = tableInfo.fieldAlias,
-            fieldUuid = tableInfo.fieldUuid,
-            _tableInfo$quotes = tableInfo.quotes,
-            quotes = _tableInfo$quotes === void 0 ? '' : _tableInfo$quotes;
+        onSelect: function onSelect(fields, quotes) {
           var newMeta = store.metaList[groupIndex].list.slice();
-          if (alias === SummarizeAlias) {
-            newMeta[index].expressions[_ind]["".concat(type, "_fieldAlias")] = fieldAlias;
-            newMeta[index].expressions[_ind]["".concat(type, "_fieldUuid")] = fieldUuid;
-            newMeta[index].expressions[_ind]["".concat(type, "_quotes")] = quotes;
-          } else {
-            newMeta[index].expressions[_ind]["".concat(type, "_fieldAlias")] = name;
-            newMeta[index].expressions[_ind]["".concat(type, "_fieldUuid")] = id;
-            newMeta[index].expressions[_ind]["".concat(type, "_quotes")] = name;
-          }
-          newMeta[index].expressions[_ind]["".concat(type, "_fields")] = fields;
-          // (newMeta[index] as MetaJoin).expressions[_ind][type] = name;
-          // (newMeta[index] as MetaJoin).expressions[_ind][`${type}_id`] = id;
+          newMeta[index].expressions[_ind][_position] = fields.length > 0 ? fields : [{
+            fieldName: '',
+            // 字段名
+            fieldNameZh: '',
+            // 字段中文名
+            fieldAlias: '',
+            // 别名
+            fieldUuid: '',
+            // uuid
+            fieldId: '',
+            // 字段id
+            // quotes?: string; // 字段展示的 不知道有没有用
+            tableName: '',
+            // 表名
+            tableNameZh: '',
+            tableId: '',
+            // 表名
+            tableAlias: '',
+            // 别名
+            tableUuid: '',
+            // 表唯一标识
+            datasourceName: '',
+            // 数据源名
+            datasourceId: '',
+            // 数据源id
+            type: AtomsTypeEnum.FIELD
+          }];
+          // (
+          //   ((newMeta[index] as MetaJoin).expressions[_ind] as AtomsExpression)[_position][
+          //     _ind2
+          //   ] as AtomsField
+          // ).quotes = quotes;
           store.setMeta(newMeta, groupIndex);
-          // store.setPopup({ visible: false });
         }
       })
     });
@@ -519,6 +624,7 @@ var JoinData = function JoinData(props) {
     var node = e.currentTarget;
     var _ind = Number(node.getAttribute('v-index'));
     var _position = node.getAttribute('v-position');
+    var _ind2 = Number(node.getAttribute('v-index2'));
     var _val = node.getAttribute('v-val');
     store.setPopup({
       visible: true,
@@ -533,8 +639,7 @@ var JoinData = function JoinData(props) {
           })[0];
           var index = findIndex(store.metaList[groupIndex].list, meta);
           var newMeta = store.metaList[groupIndex].list.slice();
-          newMeta[index].expressions[_ind]["".concat(_position, "_string")] = val;
-          newMeta[index].expressions[_ind]["".concat(_position, "_constant")] = curObj.label;
+          newMeta[index].expressions[_ind][_position][_ind2].val = curObj.value;
           store.setMeta(newMeta, groupIndex);
         }
       })
@@ -546,36 +651,90 @@ var JoinData = function JoinData(props) {
     });
   }
   // 修改输入框类型
-  function onChangeType(e, position, _ind) {
+  function onChangeType(e, _ref) {
+    var _ref$position = _ref.position,
+      position = _ref$position === void 0 ? 'rhs' : _ref$position,
+      _ind = _ref.index;
     var index = findIndex(store.metaList[groupIndex].list, meta);
     var newMeta = store.metaList[groupIndex].list.slice();
     store.setPopup({
       visible: true,
       node: e.currentTarget,
-      content: _jsx(SelectList, {
-        value: newMeta[index].expressions[_ind]["".concat(position, "_type")],
+      content: _jsx(SelectList
+      // value={(((newMeta[index] as MetaJoin).expressions[_ind] as AtomsExpression)[position])[`type`]}
+      , {
+        // value={(((newMeta[index] as MetaJoin).expressions[_ind] as AtomsExpression)[position])[`type`]}
         list: [{
-          value: 'string',
+          value: AtomsTypeEnum.INPUT_STRING,
           label: __('SqlQueryBuilder.input')
         }, {
-          value: 'constant',
+          value: AtomsTypeEnum.INPUT_NUMBER,
+          label: __('SqlQueryBuilder.numberInput')
+        }, {
+          value: AtomsTypeEnum.CONSTANT,
           label: __('customColumn.constant')
         }, {
-          value: '',
+          value: AtomsTypeEnum.FIELD,
           label: __('SqlQueryBuilder.columns')
         }],
         onChange: function onChange(type) {
           closePopup();
-          newMeta[index].expressions[_ind]["".concat(position, "_type")] = type;
+          if (type === AtomsTypeEnum.INPUT_STRING || type === AtomsTypeEnum.CONSTANT) {
+            newMeta[index].expressions[_ind][position] = [{
+              val: '',
+              type: type
+            }];
+          }
+          if (type === AtomsTypeEnum.INPUT_NUMBER) {
+            newMeta[index].expressions[_ind][position] = [{
+              val: 0,
+              type: type
+            }];
+          }
+          if (type === AtomsTypeEnum.FIELD) {
+            newMeta[index].expressions[_ind][position] = [{
+              fieldName: '',
+              // 字段名
+              fieldNameZh: '',
+              // 字段中文名
+              fieldAlias: '',
+              // 别名
+              fieldUuid: '',
+              // uuid
+              fieldId: '',
+              // 字段id
+              tableName: '',
+              // 表名
+              tableNameZh: '',
+              tableId: '',
+              // 表名
+              tableAlias: '',
+              // 别名
+              tableUuid: '',
+              // 表唯一标识
+              datasourceName: '',
+              // 数据源名
+              datasourceId: '',
+              // 数据源id
+              type: AtomsTypeEnum.FIELD
+            }];
+          }
           store.setMeta(newMeta, groupIndex);
         }
       })
     });
   }
-  function onChangeString(type, _ind, val) {
+  function onChangeString(val, _ref2) {
+    var _ref2$position = _ref2.position,
+      position = _ref2$position === void 0 ? 'rhs' : _ref2$position,
+      _ref2$index = _ref2.index1,
+      index1 = _ref2$index === void 0 ? 0 : _ref2$index,
+      _ref2$index2 = _ref2.index2,
+      index2 = _ref2$index2 === void 0 ? 0 : _ref2$index2;
+    // : 'rhs'
     var index = findIndex(store.metaList[groupIndex].list, meta);
     var newMeta = store.metaList[groupIndex].list.slice();
-    newMeta[index].expressions[_ind][type] = val;
+    newMeta[index].expressions[index1][position][index2].val = val;
     store.setMeta(newMeta, groupIndex);
   }
   // 子查询弹窗
@@ -610,15 +769,15 @@ var JoinData = function JoinData(props) {
               }
               newMeta[index].subquery = newList;
               newMeta[index].table2 = _objectSpread(_objectSpread({}, newList[0].table), {}, {
-                alias: newMeta[index].table2.alias || getAlias(newList[0].table.name, newMeta),
-                fields: []
+                alias: newMeta[index].table2.alias || getAlias(newList[0].table.name, newMeta)
+                // fields: [],
               });
               var items = getSubColumns(newList);
               var newColumns = items.flatMap(function (item) {
                 return item.columns;
               });
               newMeta[index].columns = newColumns;
-              newMeta[index].expressions = [];
+              initExpressions();
               // 关联表变了 下面模块全部删除
               newMeta = newMeta.filter(function (v, i) {
                 return i <= index;
@@ -643,10 +802,10 @@ var JoinData = function JoinData(props) {
     newMeta[index].isSubquery = !newMeta[index].isSubquery;
     newMeta[index].table2 = {
       quotes: '',
-      fieldAlias: '',
-      fieldUuid: '',
       name: '',
       // 表名
+      name_zh: '',
+      // 表名
       tableUuid: '',
       id: '',
       // 表名
@@ -654,11 +813,8 @@ var JoinData = function JoinData(props) {
       // 表别名
       datasourceName: '',
       // 数据源名
-      datasourceId: '',
-      // 数据源id
-      groupSql: '',
-      //如果table1 是结果集 那么这个字段 就有值，放结果集的别名
-      fields: []
+      datasourceId: '' // 数据源id
+      // groupSql: '', //如果table1 是结果集 那么这个字段 就有值，放结果集的别名
     };
     newMeta[index].expressions = [];
     newMeta[index].subquery = [];
@@ -678,22 +834,29 @@ var JoinData = function JoinData(props) {
       onOk: function () {
         var _onOk = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
           var _index, newMeta;
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
+          return _regeneratorRuntime.wrap(function (_context) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
                 if (alias) {
-                  _context.next = 5;
+                  _context.next = 1;
                   break;
                 }
                 Toast.warning(__('SqlQueryBuilder.aliasCannotEmpty'));
                 return _context.abrupt("return", false);
-              case 5:
+              case 1:
+                if (!(alias.length > 30)) {
+                  _context.next = 2;
+                  break;
+                }
+                Toast.warning('别名长度不能超过30');
+                return _context.abrupt("return", false);
+              case 2:
                 _index = findIndex(store.metaList[groupIndex].list, meta);
                 newMeta = store.metaList[groupIndex].list.slice();
                 newMeta[_index].table2.alias = alias;
                 newMeta = changeTableAlias(newMeta, newMeta[_index].table2);
                 store.setMeta(newMeta, groupIndex);
-              case 10:
+              case 3:
               case "end":
                 return _context.stop();
             }
@@ -707,18 +870,209 @@ var JoinData = function JoinData(props) {
       onCancel: function onCancel() {}
     });
   };
-  var onChangeOperator = function onChangeOperator(value) {
+  // 修改连接符
+  var changeOperator = function changeOperator(key, i) {
     var index = findIndex(store.metaList[groupIndex].list, meta);
     var newMeta = store.metaList[groupIndex].list.slice();
-    newMeta[index].comparison_operator = value;
+    newMeta[index].expressions[i].val = key;
     store.setMeta(newMeta, groupIndex);
   };
-  var onChangeExpressionsOperator = function onChangeExpressionsOperator(value, _ind) {
+  var changeExpression = function changeExpression(e, i) {
+    var data = getTableColumns();
     var index = findIndex(store.metaList[groupIndex].list, meta);
     var newMeta = store.metaList[groupIndex].list.slice();
-    newMeta[index].expressions[_ind].comparison_operator = value;
+    var value = newMeta[index].expressions[i];
+    store.setPopup({
+      visible: true,
+      node: e.currentTarget,
+      content: _jsx(Expression, {
+        filterCustomType: filterCustomType,
+        data: data,
+        value: value,
+        onChange: function onChange(data) {
+          newMeta[index].expressions.splice(i, 1, data);
+          store.setMeta(newMeta, groupIndex);
+          closePopup();
+        }
+      })
+    });
+  };
+  // 添加表达式
+  var addExpression = function addExpression(type) {
+    var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+    var index = findIndex(store.metaList[groupIndex].list, meta);
+    var newMeta = store.metaList[groupIndex].list.slice();
+    var item = null;
+    if (type === AtomsTypeEnum.JOIN_DEFAULT) {
+      item = {
+        lhs: [{
+          fieldName: '',
+          // 字段名
+          fieldNameZh: '',
+          // 字段中文名
+          fieldAlias: '',
+          // 别名
+          fieldUuid: '',
+          // uuid
+          fieldId: '',
+          // 字段id
+          // quotes?: string; // 字段展示的 不知道有没有用
+          tableName: '',
+          // 表名
+          tableNameZh: '',
+          tableId: '',
+          // 表名
+          tableAlias: '',
+          // 别名
+          tableUuid: '',
+          // 表唯一标识
+          datasourceName: '',
+          // 数据源名
+          datasourceId: '',
+          // 数据源id
+          type: AtomsTypeEnum.FIELD
+        }],
+        condition: '',
+        rhs: [{
+          fieldName: '',
+          // 字段名
+          fieldNameZh: '',
+          // 字段中文名
+          fieldAlias: '',
+          // 别名
+          fieldUuid: '',
+          // uuid
+          fieldId: '',
+          // 字段id
+          // quotes?: string; // 字段展示的 不知道有没有用
+          tableName: '',
+          // 表名
+          tableNameZh: '',
+          tableId: '',
+          // 表名
+          tableAlias: '',
+          // 别名
+          tableUuid: '',
+          // 表唯一标识
+          datasourceName: '',
+          // 数据源名
+          datasourceId: '',
+          // 数据源id
+          type: AtomsTypeEnum.FIELD
+        }],
+        // quotes: '',
+        type: type
+      };
+      store.setMeta(newMeta, groupIndex);
+    }
+    if (type === AtomsTypeEnum.OPERATOR) {
+      item = {
+        val: 'AND',
+        type: type
+      };
+    }
+    if (type === AtomsTypeEnum.EXPRESSION) {
+      item = {
+        lhs: [],
+        condition: '',
+        rhs: [],
+        quotes: '',
+        type: type
+      };
+    }
+    if (!item) {
+      return;
+    }
+    if (i >= 0) {
+      newMeta[index].expressions.splice(i + 1, 0, item);
+    } else {
+      newMeta[index].expressions.push(item);
+    }
     store.setMeta(newMeta, groupIndex);
   };
+  var getTable1Name = function getTable1Name() {
+    if (meta.table1.name) {
+      if (meta.table1.name === SummarizeAlias) {
+        return PrevResult;
+      } else {
+        return "".concat(meta.table1.datasourceName, ".").concat(meta.table1.name);
+      }
+    } else {
+      return '';
+    }
+  };
+  var renderItem = function renderItem(items, type, i) {
+    var _items$;
+    if ((items === null || items === void 0 || (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.type) === AtomsTypeEnum.FIELD) {
+      var _items$2, _items$3;
+      return _jsx("div", {
+        className: cx("Sqb-TableName", {
+          notSelected: !((_items$2 = items[0]) !== null && _items$2 !== void 0 && _items$2.fieldName)
+        }),
+        "v-position": type,
+        "v-index": i,
+        "v-index2": index,
+        onClick: selectMoreJoinColumn,
+        children: (_items$3 = items[0]) !== null && _items$3 !== void 0 && _items$3.fieldName ? items.map(function (field) {
+          return field.fieldName;
+        }).join(' || ') : __('SqlQueryBuilder.pickTable')
+      }, type + i);
+    } else {
+      return items.map(function (item, index) {
+        if (item.type === AtomsTypeEnum.INPUT_NUMBER) {
+          return _jsx(InputNumber, {
+            disabled: meta.readonly,
+            className: ':Sqb-TableName-input',
+            value: item.val,
+            placeholder: __('SqlQueryBuilder.pleaseEnter'),
+            style: {
+              width: '180px'
+            },
+            size: 'large',
+            onChange: function onChange(val) {
+              onChangeString(val, {
+                position: type,
+                index1: i,
+                index2: index
+              });
+            }
+          }, index);
+        }
+        if (item.type === AtomsTypeEnum.INPUT_STRING) {
+          return _jsx(Input, {
+            disabled: meta.readonly,
+            className: ':Sqb-TableName-input',
+            value: item.val,
+            placeholder: __('SqlQueryBuilder.pleaseEnter'),
+            style: {
+              width: '180px'
+            },
+            size: 'large',
+            onChange: function onChange(val) {
+              onChangeString(val, {
+                position: type,
+                index1: i,
+                index2: index
+              });
+            }
+          }, index);
+        }
+        if (item.type === AtomsTypeEnum.CONSTANT) {
+          return _jsx("div", {
+            className: cx("Sqb-TableName", {
+              notSelected: !item.val
+            }),
+            "v-position": type,
+            "v-index": i,
+            "v-index2": index,
+            "v-val": item.val,
+            onClick: selectConstant,
+            children: item.val ? item.val : __('SqlQueryBuilder.pickConstant')
+          }, index);
+        }
+      });
+    }
+  };
   return _jsx(Wrapper, {
     className: cx("Sqb-item"),
     children: _jsxs("div", {
@@ -733,8 +1087,11 @@ var JoinData = function JoinData(props) {
         children: _jsxs("div", {
           className: cx("Sqb-NotebookCell"),
           children: [_jsx("div", {
-            className: cx("Sqb-TableName noClick"),
-            children: !table1Selected || meta.table1.name === SummarizeAlias ? PrevResult : "".concat(meta.table1.datasourceName, ".").concat(meta.table1.name)
+            className: cx("Sqb-TableName", {
+              notSelected: !table1Selected
+            }),
+            onClick: selectLeftTable,
+            children: getTable1Name() || __('SqlQueryBuilder.pickTable')
           }), _jsx("div", {
             onClick: selectJoin,
             children: meta.joinType === JoinEnum.left ? _jsx(LeftJoinIcon, {
@@ -808,210 +1165,191 @@ var JoinData = function JoinData(props) {
               icon: _jsx(RelatedWork, {}),
               onClick: switchSubQuery
             })
-          }), table2Selected && _jsxs("div", {
-            className: cx("Sqb-where"),
-            children: [_jsx("span", {
-              className: 'ml-2 mr-4 text-gray-500',
-              children: "on"
-            }), _jsx("div", {
-              className: cx("Sqb-TableName", {
-                notSelected: meta.table1.fields.length < 1
-              }),
-              "v-data": FlagLocation.TABLE_1,
-              onClick: selectJoinColumn,
-              children: ((_meta$table7 = meta.table1) === null || _meta$table7 === void 0 || (_meta$table7 = _meta$table7.fields) === null || _meta$table7 === void 0 ? void 0 : _meta$table7.length) > 0 ? (_meta$table8 = meta.table1) === null || _meta$table8 === void 0 ? void 0 : _meta$table8.fields.map(function (v) {
-                return v.quotes;
-              }).join(' || ') : __('SqlQueryBuilder.pickTable')
-            }), _jsx("span", {
-              className: 'mr-2 text-gray-500',
-              children: "="
-            }), _jsx("div", {
-              className: cx("Sqb-TableName", {
-                notSelected: meta.table2.fields.length < 1
-              }),
-              "v-data": FlagLocation.TABLE_2,
-              onClick: selectJoinColumn,
-              children: ((_meta$table9 = meta.table2) === null || _meta$table9 === void 0 || (_meta$table9 = _meta$table9.fields) === null || _meta$table9 === void 0 ? void 0 : _meta$table9.length) > 0 ? (_meta$table10 = meta.table2) === null || _meta$table10 === void 0 ? void 0 : _meta$table10.fields.map(function (v) {
-                return v.quotes;
-              }).join(' || ') : __('SqlQueryBuilder.pickTable')
-            })]
-          }), ((_meta$table11 = meta.table1) === null || _meta$table11 === void 0 || (_meta$table11 = _meta$table11.fields) === null || _meta$table11 === void 0 ? void 0 : _meta$table11.length) > 0 && ((_meta$table12 = meta.table2) === null || _meta$table12 === void 0 || (_meta$table12 = _meta$table12.fields) === null || _meta$table12 === void 0 ? void 0 : _meta$table12.length) > 0 && ((_meta$expressions = meta.expressions) === null || _meta$expressions === void 0 ? void 0 : _meta$expressions.map(function (v, i) {
-            var _v$left_fields, _v$right_fields;
-            return _jsxs("div", {
-              className: cx("Sqb-where block"),
-              children: [_jsx("span", {
-                className: 'ml-2 mr-4 text-gray-500',
-                children: v.operator
-              }), v.left_type === 'string' && _jsx(Input, {
-                disabled: meta.readonly,
-                className: ':Sqb-TableName-input',
-                value: v.left_string,
-                placeholder: __('SqlQueryBuilder.pleaseEnter'),
-                style: {
-                  width: '180px'
-                },
-                size: 'large',
-                onChange: function onChange(val) {
-                  onChangeString('left_string', i, val);
-                }
-              }), v.left_type === 'constant' && _jsx("div", {
-                className: cx("Sqb-TableName", {
-                  notSelected: !v.left_string
-                }),
-                "v-position": 'left',
-                "v-index": i,
-                "v-val": v.left_string,
-                onClick: selectConstant,
-                children: v.left_constant ? v.left_constant : __('SqlQueryBuilder.pickConstant')
-              }), (!v.left_type || v.left_type === 'field') && _jsx("div", {
-                className: cx("Sqb-TableName", {
-                  notSelected: v.left_fields.length < 1
-                }),
-                "v-data": ExpressionsEnum.LEFT,
-                "v-index": i,
-                onClick: selectMoreJoinColumn,
-                children: (v === null || v === void 0 || (_v$left_fields = v.left_fields) === null || _v$left_fields === void 0 ? void 0 : _v$left_fields.length) > 0 ? v.left_fields.map(function (v) {
-                  return v.quotes;
-                }).join(' || ') : __('SqlQueryBuilder.pickTable')
-              }), _jsx(Tooltip, {
-                title: __('SqlQueryBuilder.switch'),
-                children: _jsx(Button, {
-                  disabled: meta.readonly,
-                  primary: true,
-                  ghost: true,
-                  className: 'mr-2 operator-icon',
-                  icon: _jsx(Repeat, {}),
-                  onClick: function onClick(e) {
-                    onChangeType(e, 'left', i);
-                  }
-                })
-              }), _jsx("span", {
-                className: 'mr-2 text-gray-500',
-                children: "="
-              }), v.right_type === 'string' && _jsx(Input, {
-                disabled: meta.readonly,
-                className: ':Sqb-TableName-input',
-                value: v.right_string,
-                placeholder: __('SqlQueryBuilder.pleaseEnter'),
-                style: {
-                  width: '180px'
-                },
-                size: 'large',
-                onChange: function onChange(val) {
-                  onChangeString('right_string', i, val);
-                }
-              }), v.right_type === 'constant' && _jsx("div", {
-                className: cx("Sqb-TableName", {
-                  notSelected: !v.right_string
-                }),
-                "v-position": 'right',
-                "v-index": i,
-                "v-val": v.right_string,
-                onClick: selectConstant,
-                children: v.right_constant ? v.right_constant : __('SqlQueryBuilder.pickConstant')
-              }), (!v.right_type || v.right_type === 'field') && _jsx("div", {
-                className: cx("Sqb-TableName", {
-                  notSelected: v.right_fields.length < 1
-                }),
-                "v-data": ExpressionsEnum.RIGHT,
-                "v-index": i,
-                onClick: selectMoreJoinColumn,
-                children: (v === null || v === void 0 || (_v$right_fields = v.right_fields) === null || _v$right_fields === void 0 ? void 0 : _v$right_fields.length) > 0 ? v.right_fields.map(function (v) {
-                  return v.quotes;
-                }).join(' || ') : __('SqlQueryBuilder.pickTable')
-              }), _jsx(Tooltip, {
-                title: __('SqlQueryBuilder.switch'),
-                children: _jsx(Button, {
-                  disabled: meta.readonly,
-                  primary: true,
-                  ghost: true,
-                  className: 'mr-2 operator-icon',
-                  icon: _jsx(Repeat, {}),
+          }), ((_meta$table7 = meta.table2) === null || _meta$table7 === void 0 ? void 0 : _meta$table7.name) && ((_meta$table8 = meta.table1) === null || _meta$table8 === void 0 ? void 0 : _meta$table8.name) && ((_meta$expressions = meta.expressions) === null || _meta$expressions === void 0 ? void 0 : _meta$expressions.map(function (v, i) {
+            if (v.type === AtomsTypeEnum.JOIN_DEFAULT) {
+              return _jsxs("div", {
+                className: cx("Sqb-where block"),
+                children: [i == 0 && _jsx("span", {
+                  className: 'ml-2 mr-4 text-gray-500',
+                  children: "on"
+                }), renderItem(v.lhs, ExpressionsEnum.LEFT, i), _jsx(Tooltip, {
+                  title: __('SqlQueryBuilder.switch'),
+                  children: _jsx(Button, {
+                    disabled: meta.readonly,
+                    primary: true,
+                    ghost: true,
+                    className: 'mr-2 operator-icon',
+                    icon: _jsx(Repeat, {}),
+                    onClick: function onClick(e) {
+                      onChangeType(e, {
+                        position: ExpressionsEnum.LEFT,
+                        index: i
+                      });
+                    }
+                  })
+                }), _jsx("span", {
+                  className: 'mr-2 text-gray-500',
+                  children: "="
+                }), renderItem(v.rhs, ExpressionsEnum.RIGHT, i), _jsx(Tooltip, {
+                  title: __('SqlQueryBuilder.switch'),
+                  children: _jsx(Button, {
+                    disabled: meta.readonly,
+                    primary: true,
+                    ghost: true,
+                    className: 'mr-2 operator-icon',
+                    icon: _jsx(Repeat, {}),
+                    onClick: function onClick(e) {
+                      onChangeType(e, {
+                        position: ExpressionsEnum.RIGHT,
+                        index: i
+                      });
+                    }
+                  })
+                }), _jsx(Tooltip, {
+                  title: __('SqlQueryBuilder.add'),
+                  children: _jsx(Dropdown, {
+                    trigger: ['click'],
+                    onChange: function onChange(key) {
+                      addExpression(key, i);
+                    },
+                    droplist: menuTypes,
+                    children: _jsx(Button, {
+                      disabled: meta.readonly,
+                      primary: true,
+                      ghost: true,
+                      className: 'mr-2 operator-icon',
+                      icon: _jsx(FfPlus, {})
+                    })
+                  })
+                }), _jsx(Tooltip, {
+                  title: __('SqlQueryBuilder.del'),
+                  children: _jsx(Button, {
+                    disabled: meta.readonly,
+                    danger: true,
+                    className: 'mr-2 operator-icon',
+                    icon: _jsx(FfLine, {}),
+                    onClick: function onClick() {
+                      var index = findIndex(store.metaList[groupIndex].list, meta);
+                      var newMeta = store.metaList[groupIndex].list.slice();
+                      newMeta[index].expressions.splice(i, 1);
+                      store.setMeta(newMeta, groupIndex);
+                    }
+                  })
+                })]
+              }, i);
+            }
+            if (v.type === AtomsTypeEnum.OPERATOR) {
+              return _jsxs("div", {
+                className: cx("Sqb-where block"),
+                children: [i == 0 && _jsx("span", {
+                  className: 'ml-2 mr-4 text-gray-500',
+                  children: "on"
+                }), _jsx(Dropdown, {
+                  trigger: ['click'],
+                  onChange: function onChange(key) {
+                    changeOperator(key, i);
+                  },
+                  droplist: menuOperator,
+                  children: _jsx(Button, {
+                    className: 'ml-2 mr-4 text-gray-500',
+                    type: 'link',
+                    children: v.val
+                  })
+                }), _jsx(Tooltip, {
+                  title: __('SqlQueryBuilder.add'),
+                  children: _jsx(Dropdown, {
+                    trigger: ['click'],
+                    onChange: function onChange(key) {
+                      addExpression(key, i);
+                    },
+                    droplist: menuTypes,
+                    children: _jsx(Button, {
+                      disabled: meta.readonly,
+                      primary: true,
+                      ghost: true,
+                      className: 'mr-2 operator-icon',
+                      icon: _jsx(FfPlus, {})
+                    })
+                  })
+                }), _jsx(Tooltip, {
+                  title: __('SqlQueryBuilder.del'),
+                  children: _jsx(Button, {
+                    disabled: meta.readonly,
+                    danger: true,
+                    className: 'mr-2 operator-icon',
+                    icon: _jsx(FfLine, {}),
+                    onClick: function onClick() {
+                      var index = findIndex(store.metaList[groupIndex].list, meta);
+                      var newMeta = store.metaList[groupIndex].list.slice();
+                      newMeta[index].expressions.splice(i, 1);
+                      store.setMeta(newMeta, groupIndex);
+                    }
+                  })
+                })]
+              }, i);
+            }
+            if (v.type === AtomsTypeEnum.EXPRESSION) {
+              return _jsxs("div", {
+                className: cx("Sqb-where block"),
+                children: [i == 0 && _jsx("span", {
+                  className: 'ml-2 mr-4 text-gray-500',
+                  children: "on"
+                }), _jsx("div", {
+                  className: cx("Sqb-TableName purple-name", {
+                    notSelected: !v.quotes
+                  }),
                   onClick: function onClick(e) {
-                    onChangeType(e, 'right', i);
-                  }
-                })
-              }), _jsx(Tooltip, {
-                title: __('SqlQueryBuilder.add'),
-                children: _jsx(Button, {
-                  disabled: meta.readonly,
-                  primary: true,
-                  ghost: true,
-                  className: 'mr-2 operator-icon',
-                  icon: _jsx(FfPlus, {}),
-                  onClick: function onClick() {
-                    var index = findIndex(store.metaList[groupIndex].list, meta);
-                    var newMeta = store.metaList[groupIndex].list.slice();
-                    newMeta[index].expressions.splice(i + 1, 0, {
-                      operator: 'and',
-                      comparison_operator: '等于',
-                      left_fieldAlias: '',
-                      left_fieldUuid: '',
-                      left_quotes: '',
-                      left_string: '',
-                      left_type: 'field',
-                      left_constant: '',
-                      left_fields: [],
-                      right_fieldAlias: '',
-                      right_fieldUuid: '',
-                      right_quotes: '',
-                      right_string: '',
-                      // right_isString: false,
-                      right_type: 'field',
-                      right_constant: '',
-                      right_fields: []
-                    });
-                    store.setMeta(newMeta, groupIndex);
-                  }
-                })
-              }), meta.expressions.length > 0 && _jsx(Tooltip, {
-                title: __('SqlQueryBuilder.del'),
-                children: _jsx(Button, {
-                  disabled: meta.readonly,
-                  danger: true,
-                  className: 'mr-2 operator-icon',
-                  icon: _jsx(FfLine, {}),
-                  onClick: function onClick() {
-                    var index = findIndex(store.metaList[groupIndex].list, meta);
-                    var newMeta = store.metaList[groupIndex].list.slice();
-                    newMeta[index].expressions.splice(i, 1);
-                    store.setMeta(newMeta, groupIndex);
-                  }
-                })
-              })]
-            }, i);
-          })), meta.table1.fields.length > 0 && meta.table2.fields.length > 0 && (((_meta$expressions2 = meta.expressions) === null || _meta$expressions2 === void 0 ? void 0 : _meta$expressions2.length) || 0) < 1 && _jsx(Tooltip, {
+                    return changeExpression(e, i);
+                  },
+                  children: v.quotes || __('joinData.selectExpression')
+                }, i), _jsx(Tooltip, {
+                  title: __('SqlQueryBuilder.add'),
+                  children: _jsx(Dropdown, {
+                    trigger: ['click'],
+                    onChange: function onChange(key) {
+                      addExpression(key, i);
+                    },
+                    droplist: menuTypes,
+                    children: _jsx(Button, {
+                      disabled: meta.readonly,
+                      primary: true,
+                      ghost: true,
+                      className: 'mr-2 operator-icon',
+                      icon: _jsx(FfPlus, {})
+                    })
+                  })
+                }), _jsx(Tooltip, {
+                  title: __('SqlQueryBuilder.del'),
+                  children: _jsx(Button, {
+                    disabled: meta.readonly,
+                    danger: true,
+                    className: 'mr-2 operator-icon',
+                    icon: _jsx(FfLine, {}),
+                    onClick: function onClick() {
+                      var index = findIndex(store.metaList[groupIndex].list, meta);
+                      var newMeta = store.metaList[groupIndex].list.slice();
+                      newMeta[index].expressions.splice(i, 1);
+                      store.setMeta(newMeta, groupIndex);
+                    }
+                  })
+                })]
+              }, i);
+            }
+          })), ((_meta$table9 = meta.table2) === null || _meta$table9 === void 0 ? void 0 : _meta$table9.name) && ((_meta$table0 = meta.table1) === null || _meta$table0 === void 0 ? void 0 : _meta$table0.name) && (((_meta$expressions2 = meta.expressions) === null || _meta$expressions2 === void 0 ? void 0 : _meta$expressions2.length) || 0) < 1 && _jsx(Tooltip, {
             title: __('SqlQueryBuilder.add'),
-            children: _jsx(Button, {
-              disabled: meta.readonly,
-              primary: true,
-              ghost: true,
-              className: 'mr-2 operator-icon',
-              icon: _jsx(FfPlus, {}),
-              onClick: function onClick() {
-                var index = findIndex(store.metaList[groupIndex].list, meta);
-                var newMeta = store.metaList[groupIndex].list.slice();
-                newMeta[index].expressions = [{
-                  operator: 'and',
-                  comparison_operator: '等于',
-                  left_fieldAlias: '',
-                  left_fieldUuid: '',
-                  left_quotes: '',
-                  left_fields: [],
-                  left_string: '',
-                  left_type: 'field',
-                  left_constant: '',
-                  right_fieldAlias: '',
-                  right_fieldUuid: '',
-                  right_quotes: '',
-                  right_string: '',
-                  // right_isString: false,
-                  right_constant: '',
-                  right_type: 'field',
-                  right_fields: []
-                }];
-                store.setMeta(newMeta, groupIndex);
-              }
+            children: _jsx(Dropdown, {
+              trigger: ['click'],
+              onChange: function onChange(key) {
+                addExpression(key);
+              },
+              droplist: menuTypes,
+              children: _jsx(Button, {
+                disabled: meta.readonly,
+                primary: true,
+                ghost: true,
+                className: 'mr-2 operator-icon',
+                icon: _jsx(FfPlus, {})
+              })
             })
           }), columnsSelected && store.showFields && _jsx("div", {
             className: "Sqb-TableColumns",