@gingkoo/pandora-metabase 1.0.14 → 1.0.16

package/lib/es/components/dialog/{select-filter → expression}/index.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 关联模块 选择表字段
  */
 import './index.less';
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Repeat, Function } from '@gingkoo/pandora-icons';
 import { Button, Tooltip, Input, Select, InputNumber, Dropdown, DatePicker } from '@gingkoo/pandora';
 import cx from 'classnames';
@@ -14,10 +14,10 @@ import { ChevronODown } from '@gingkoo/pandora-icons';
 import moment from 'dayjs';
 import { __, isEn } from '../../../locale';
 import { ColumnsPopupThemeEnum, SQL_COLUMN_TYPE, SQL_GROUP_TYPE } from '../../../store/enum';
-import { SummarizeAlias } from '../../../store/helper';
+import { AtomsTypeEnum } from '../../../store/types';
 import { NUMBER_GROUP, DATE_GROUP } from '../const';
 import SelectList from '../select-list';
-import { SelectJoinColumn } from '../index';
+import SelectColumnMultiple from '../select-column-multiple';
 import { LeftArrowIcon } from '../../icons';
 import { useStore } from '../../../hooks/use-provider';
 var RangePicker = DatePicker.RangePicker;
@@ -33,7 +33,7 @@ var typeList = [{
   label: SQL_COLUMN_TYPE.STRING
 }, {
   key: SQL_COLUMN_TYPE.FLOAT,
-  label: SQL_COLUMN_TYPE.FLOAT
+  label: 'NUMBER'
 }, {
   key: SQL_COLUMN_TYPE.DATE,
   label: SQL_COLUMN_TYPE.DATE
@@ -45,7 +45,7 @@ var typeList = [{
 //   };
 // });
 var SelectFilterColumn = function SelectFilterColumn(_ref) {
-  var _curColumn$table;
+  var _value$lhs;
   var _ref$data = _ref.data,
     data = _ref$data === void 0 ? [] : _ref$data,
     value = _ref.value,
@@ -61,67 +61,95 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     curColumn = _useState2[0],
     setCurColumn = _useState2[1];
-  var _useState3 = useState(value.condition),
+  var _useState3 = useState(value.condition || ''),
     _useState4 = _slicedToArray(_useState3, 2),
     condition = _useState4[0],
     setCondition = _useState4[1];
-  var _useState5 = useState(value.valType || 'string'),
+  var _useState5 = useState(value.rhs || []),
     _useState6 = _slicedToArray(_useState5, 2),
-    valType = _useState6[0],
-    setValType = _useState6[1];
-  var _useState7 = useState(value.val),
+    rhsVal = _useState6[0],
+    setRhsVal = _useState6[1];
+  // const [valType, setValType] = useState<'string' | 'constant' | 'field' | ''>(
+  //   value.valType || 'string',
+  // );
+  // const [constantName, setConstantName] = useState<string>(value.constantName || '');
+  var _useState7 = useState((value === null || value === void 0 ? void 0 : value.database_type) || SQL_COLUMN_TYPE.STRING),
     _useState8 = _slicedToArray(_useState7, 2),
-    curVal = _useState8[0],
-    setVal = _useState8[1];
-  var _useState9 = useState(value.constantName || ''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    constantName = _useState10[0],
-    setConstantName = _useState10[1];
-  var _useState11 = useState(value.database_type || SQL_COLUMN_TYPE.STRING),
-    _useState12 = _slicedToArray(_useState11, 2),
-    special_type = _useState12[0],
-    setSpecial_type = _useState12[1];
-  var _useState13 = useState(value.formula || {}),
-    _useState14 = _slicedToArray(_useState13, 2),
-    formula = _useState14[0],
-    setFormula = _useState14[1];
+    special_type = _useState8[0],
+    setSpecial_type = _useState8[1];
+  var _useState9 = useState(value.formula || {}),
+    _useState0 = _slicedToArray(_useState9, 2),
+    formula = _useState0[0],
+    setFormula = _useState0[1];
   var store = useStore();
-  var _useState15 = useState(false),
-    _useState16 = _slicedToArray(_useState15, 2),
-    popupVisible = _useState16[0],
-    setPopupVisible = _useState16[1];
-  var table2Selected = Boolean((_curColumn$table = curColumn.table2) === null || _curColumn$table === void 0 ? void 0 : _curColumn$table.name);
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    popupVisible = _useState10[0],
+    setPopupVisible = _useState10[1];
+  var _useState11 = useState((value === null || value === void 0 || (_value$lhs = value.lhs) === null || _value$lhs === void 0 ? void 0 : _value$lhs.length) > 0 || false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isNext = _useState12[0],
+    setIsNext = _useState12[1];
+  var table2Selected = Boolean(rhsVal && (rhsVal === null || rhsVal === void 0 ? void 0 : rhsVal.length) > 0);
   var disabled = useMemo(function () {
-    var _curColumn$table2;
     if (!condition) return true;
     if (~['无需结果'].indexOf(condition)) {
       return false;
     }
-    if ((_curColumn$table2 = curColumn.table2) !== null && _curColumn$table2 !== void 0 && _curColumn$table2.id && ~['等于', '不等于', '早于', '晚于'].indexOf(condition)) {
-      return false;
-    }
     if (~['为空', '不为空', '是空的', '不是空的'].indexOf(condition)) {
       return false;
-    } else if (~['前', '下一个', '介于之间'].indexOf(condition)) {
-      if (curVal[0] && curVal[1]) {
-        return false;
-      }
-    } else if (curVal.length && curVal.join(',')) {
-      return false;
     }
+    var isOk = rhsVal.every(function (v) {
+      if (v.type === AtomsTypeEnum.INPUT_STRING || v.type === AtomsTypeEnum.CONSTANT) {
+        return v.val;
+      }
+      if (v.type === AtomsTypeEnum.INPUT_STRING_LIST) {
+        return v.val.every(function (vv) {
+          return vv;
+        });
+      }
+      if (v.type === AtomsTypeEnum.FIELD) {
+        return v.fieldName;
+      }
+    });
+    return !isOk;
+    // console.log('🚀 ~ disabled ~ a:', a);
+    // if ((rhsVal[0] as AtomsString).val && ~['等于', '不等于', '早于', '晚于'].indexOf(condition)) {
+    //   return false;
+    // }
+    // if (~['为空', '不为空', '是空的', '不是空的'].indexOf(condition)) {
+    //   return false;
+    // }
+    // else if (~['前', '下一个', '介于之间'].indexOf(condition)) {
+    //   if ((rhsVal[0] as AtomsStringList).val[0] && (rhsVal[0] as AtomsStringList).val[1]) {
+    //     return false;
+    //   }
+    // } else if (rhsVal.length && (rhsVal as AtomsString[]).map((v) => v.val).join(',')) {
+    //   return false;
+    // }
     return true;
-  }, [curVal, condition, curColumn, isCustom]);
+  }, [rhsVal, condition, curColumn]);
   useEffect(function () {
     didUpdate === null || didUpdate === void 0 || didUpdate();
   }, [condition]);
-  var getQuotesName = function getQuotesName(name) {
+  var getAtomsQuotesName = function getAtomsQuotesName(items) {
+    var names = items.map(function (v) {
+      if ((v === null || v === void 0 ? void 0 : v.type) === AtomsTypeEnum.FIELD) {
+        return v.fieldName;
+      } else {
+        return v.val;
+      }
+    });
+    return names.join(' || ');
+  };
+  var getQuotesName = function getQuotesName(items) {
     var _formula$params, _formula$params2;
+    var names = getAtomsQuotesName(items);
     switch (formula.type) {
       case 'SUBSTR':
-        // let str = formula.params?.join(',');
-        return "SUBSTR(".concat(name, ",").concat(formula === null || formula === void 0 || (_formula$params = formula.params) === null || _formula$params === void 0 ? void 0 : _formula$params[1], ",").concat(formula === null || formula === void 0 || (_formula$params2 = formula.params) === null || _formula$params2 === void 0 ? void 0 : _formula$params2[2], ")");
+        return "SUBSTR(".concat(names, ",").concat(formula === null || formula === void 0 || (_formula$params = formula.params) === null || _formula$params === void 0 ? void 0 : _formula$params[1], ",").concat(formula === null || formula === void 0 || (_formula$params2 = formula.params) === null || _formula$params2 === void 0 ? void 0 : _formula$params2[2], ")");
       default:
-        return name;
+        return names;
     }
   };
   var getText = function getText(v) {
@@ -151,151 +179,147 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
     }[v];
   };
   function generateQuotes(val, curColumn) {
-    var _val = _slicedToArray(val, 2),
-      _val$ = _val[0],
-      firstVal = _val$ === void 0 ? '' : _val$,
-      _val$2 = _val[1],
-      secondVal = _val$2 === void 0 ? '' : _val$2;
+    var _val = val[0];
+    var firstVal = '',
+      secondVal = '';
+    if (_val.type === AtomsTypeEnum.INPUT_STRING) {
+      firstVal = _val.val;
+    }
+    if (_val.type === AtomsTypeEnum.INPUT_STRING_LIST) {
+      firstVal = _val.val[0] || '';
+      secondVal = _val.val[1] || '';
+    }
+    // let [first = { val: '', type: AtomsTypeEnum.INPUT }] = val as AtomsString[];
+    // let firstVal = first.val || '';
+    // let secondVal = second.val || '';
     var quotes = '';
     if (condition === '以...开始') {
       if (isEn) {
-        quotes = getQuotesName(curColumn.name) + ' ' + "startWith ".concat(firstVal);
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "startWith ".concat(firstVal);
       } else {
-        quotes = getQuotesName(curColumn.name) + ' ' + "\u4EE5 ".concat(firstVal, " \u5F00\u59CB");
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "\u4EE5 ".concat(firstVal, " \u5F00\u59CB");
       }
     } else if (condition === '不以...开始') {
       if (isEn) {
-        quotes = getQuotesName(curColumn.name) + ' ' + "not startWith ".concat(firstVal);
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "not startWith ".concat(firstVal);
       } else {
-        quotes = getQuotesName(curColumn.name) + ' ' + "\u4E0D\u4EE5 ".concat(firstVal, " \u5F00\u59CB");
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "\u4E0D\u4EE5 ".concat(firstVal, " \u5F00\u59CB");
       }
     } else if (condition === '以...结束') {
       if (isEn) {
-        quotes = getQuotesName(curColumn.name) + ' ' + "endWith ".concat(firstVal);
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "endWith ".concat(firstVal);
       } else {
-        quotes = getQuotesName(curColumn.name) + ' ' + "\u4EE5 ".concat(firstVal, " \u7ED3\u675F");
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "\u4EE5 ".concat(firstVal, " \u7ED3\u675F");
       }
     } else if (condition === '不以...结束') {
       if (isEn) {
-        quotes = getQuotesName(curColumn.name) + ' ' + "not endWith ".concat(firstVal);
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "not endWith ".concat(firstVal);
       } else {
-        quotes = getQuotesName(curColumn.name) + ' ' + "\u4E0D\u4EE5 ".concat(firstVal, " \u7ED3\u675F");
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "\u4E0D\u4EE5 ".concat(firstVal, " \u7ED3\u675F");
       }
     } else if (condition === '介于之间') {
       if (isEn) {
-        quotes = getQuotesName(curColumn.name) + ' ' + "Between ".concat(firstVal, " and ").concat(secondVal);
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "Between ".concat(firstVal, " and ").concat(secondVal);
       } else {
-        quotes = getQuotesName(curColumn.name) + ' ' + "\u4ECB\u4E8E".concat(firstVal, "\u548C").concat(secondVal, "\u4E4B\u95F4");
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "\u4ECB\u4E8E".concat(firstVal, "\u548C").concat(secondVal, "\u4E4B\u95F4");
       }
     } else if (condition === '前') {
       if (isEn) {
-        quotes = getQuotesName(curColumn.name) + ' ' + "previous ".concat(firstVal).concat(secondVal);
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "previous ".concat(firstVal).concat(secondVal);
       } else {
-        quotes = getQuotesName(curColumn.name) + ' ' + "\u4E0A\u4E00\u4E2A".concat(firstVal).concat(secondVal);
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "\u4E0A\u4E00\u4E2A".concat(firstVal).concat(secondVal);
       }
     } else if (condition === '下一个') {
       if (isEn) {
-        quotes = getQuotesName(curColumn.name) + ' ' + "next ".concat(firstVal).concat(secondVal);
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "next ".concat(firstVal).concat(secondVal);
       } else {
-        quotes = getQuotesName(curColumn.name) + ' ' + "\u4E0B\u4E00\u4E2A".concat(firstVal).concat(secondVal);
+        quotes = getQuotesName(curColumn.lhs) + ' ' + "\u4E0B\u4E00\u4E2A".concat(firstVal).concat(secondVal);
       }
     } else if (condition === '在') {
       if (isEn) {
-        quotes = getQuotesName(curColumn.name) + ' is ' + firstVal;
+        quotes = getQuotesName(curColumn.lhs) + ' is ' + firstVal;
       } else {
-        quotes = getQuotesName(curColumn.name) + ' 是 ' + firstVal;
+        quotes = getQuotesName(curColumn.lhs) + ' 是 ' + firstVal;
       }
     } else if (condition === '是空的') {
       if (isEn) {
-        quotes = getQuotesName(curColumn.name) + ' is empty';
+        quotes = getQuotesName(curColumn.lhs) + ' is empty';
       } else {
-        quotes = getQuotesName(curColumn.name) + ' 为空';
+        quotes = getQuotesName(curColumn.lhs) + ' 为空';
       }
     } else if (condition === '不是空的') {
       if (isEn) {
-        quotes = getQuotesName(curColumn.name) + ' not empty';
+        quotes = getQuotesName(curColumn.lhs) + ' not empty';
       } else {
-        quotes = getQuotesName(curColumn.name) + ' 不为空';
+        quotes = getQuotesName(curColumn.lhs) + ' 不为空';
       }
     } else if (condition === '当前') {
       if (firstVal === '天') {
         if (isEn) {
-          quotes = getQuotesName(curColumn.name) + ' ' + "today";
+          quotes = getQuotesName(curColumn.lhs) + ' ' + "today";
         } else {
-          quotes = getQuotesName(curColumn.name) + ' ' + "\u4ECA\u5929";
+          quotes = getQuotesName(curColumn.lhs) + ' ' + "\u4ECA\u5929";
         }
       } else {
         if (isEn) {
-          quotes = getQuotesName(curColumn.name) + ' ' + "this is ".concat(firstVal);
+          quotes = getQuotesName(curColumn.lhs) + ' ' + "this is ".concat(firstVal);
         } else {
-          quotes = getQuotesName(curColumn.name) + ' ' + "\u8FD9\u4E2A".concat(firstVal);
+          quotes = getQuotesName(curColumn.lhs) + ' ' + "\u8FD9\u4E2A".concat(firstVal);
         }
       }
     } else if (condition === 'In') {
       var cond = __('filter.within');
-      quotes = getQuotesName(curColumn.name) + ' ' + cond + ' ' + "(".concat(firstVal, ")");
+      quotes = getQuotesName(curColumn.lhs) + ' ' + cond + ' ' + "(".concat(firstVal, ")");
     } else if (condition === 'Not In') {
       var _cond = __('filter.withnotin');
-      quotes = getQuotesName(curColumn.name) + ' ' + _cond + ' ' + "(".concat(firstVal, ")");
+      quotes = getQuotesName(curColumn.lhs) + ' ' + _cond + ' ' + "(".concat(firstVal, ")");
     } else {
-      var _curColumn$table3;
       var _cond2 = __(getText(condition));
-      if ((_curColumn$table3 = curColumn.table2) !== null && _curColumn$table3 !== void 0 && _curColumn$table3.id) {
-        quotes = getQuotesName(curColumn.name) + ' ' + _cond2 + ' ' + curColumn.table2.name;
+      if (rhsVal !== null && rhsVal !== void 0 && rhsVal.length) {
+        quotes = getQuotesName(curColumn.lhs) + ' ' + _cond2 + ' ' + getQuotesName(rhsVal);
       } else {
-        quotes = getQuotesName(curColumn.name) + ' ' + _cond2 + ' ' + firstVal;
+        quotes = getQuotesName(curColumn.lhs) + ' ' + _cond2 + ' ' + firstVal;
       }
     }
     return quotes;
   }
   function addFilter() {
     if (disabled) return void 0;
-    var quotes = generateQuotes(curVal, curColumn);
+    var quotes = generateQuotes(rhsVal, curColumn);
     typeof onChange === 'function' && onChange(_objectSpread(_objectSpread({}, curColumn), {}, {
       formula: formula,
-      val: curVal,
-      // 选择结果 如果有两个 长度就为2
-      constantName: constantName,
-      //变量字段
-      valType: valType,
-      //是否是选择字段
+      rhs: rhsVal,
       condition: condition,
       // 选择条件
       quotes: quotes,
       // 前端显示用户看的文字
-      database_type: filterCustomType ? special_type : '',
-      // 自定义类型
-      groupSql: curColumn.alias === SummarizeAlias ? curColumn.sql : ''
+      database_type: filterCustomType ? special_type : '' // 自定义类型
+      // groupSql: curColumn.alias === SummarizeAlias ? curColumn.sql : '',
     }));
   }
   function goPrevPage() {
-    setCurColumn({
-      table: '',
-      // 表名
-      tableId: '',
-      // 表名
-      tableUuid: '',
-      // 表名
-      fieldAlias: '',
-      fieldUuid: '',
-      alias: '',
-      // 表的别名
-      name: '',
-      // 字段名
-      id: '',
-      // 字段名
-      sql: '',
-      datasourceId: '',
-      datasourceName: '',
-      database_type: '' // 字段类型
-    });
-    setCondition('');
-    setFormula({});
-    setVal([]);
+    // setCurColumn({
+    //   lhs: [],
+    //   rhs: [],
+    //   database_type: '', // 字段类型
+    //   condition: '', // 条件 聚合by过来的会有这个
+    //   quotes: '', // 展示用户看的 组装的文字
+    //   type: AtomsTypeEnum.EXPRESSION, // 连接类型
+    // });
+    setIsNext(false);
+    // setCondition('');
+    // setFormula({});
+    // setRhsVal([
+    //   {
+    //     val: '',
+    //     type: AtomsTypeEnum.INPUT,
+    //   },
+    // ]);
   }
   function getData(data) {
-    var database_type = data.database_type;
-    var columnType = filterCustomType ? special_type : database_type.toUpperCase();
+    var _data$database_type = data.database_type,
+      database_type = _data$database_type === void 0 ? '' : _data$database_type;
+    var columnType = filterCustomType ? special_type : database_type === null || database_type === void 0 ? void 0 : database_type.toUpperCase();
     var conditions = STRING_LIST;
     var type = SQL_GROUP_TYPE.STRING;
     if (NUMBER_GROUP.includes(columnType)) {
@@ -318,9 +342,16 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
     };
   }
   function renderFilter(type, conditionText) {
-    var _curVal = _slicedToArray(curVal, 2),
-      firstVal = _curVal[0],
-      secondVal = _curVal[1];
+    var _val = rhsVal[0];
+    var firstVal = '',
+      secondVal = '';
+    if (_val.type === AtomsTypeEnum.INPUT_STRING) {
+      firstVal = _val.val;
+    }
+    if (_val.type === AtomsTypeEnum.INPUT_STRING_LIST) {
+      firstVal = _val.val[0] || '';
+      secondVal = _val.val[1] || '';
+    }
     if (~['为空', '不为空', '是空的', '不是空的'].indexOf(conditionText)) {
       return null;
     } else if (conditionText === '介于之间') {
@@ -335,18 +366,18 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
             placeholder: __('filter.enterANumber'),
             value: firstVal || '',
             onInput: function onInput(e) {
-              var newVal = curVal.slice();
-              newVal[0] = e.target.value;
-              setVal(newVal);
+              var newVal = rhsVal.slice();
+              newVal[0].val[0] = e.target.value;
+              setRhsVal(newVal);
             }
           }), _jsx(Input, {
             className: 'input',
             placeholder: __('filter.enterANumber'),
             value: secondVal || '',
             onInput: function onInput(e) {
-              var newVal = curVal.slice();
-              newVal[1] = e.target.value;
-              setVal(newVal);
+              var newVal = rhsVal.slice();
+              newVal[0].val[1] = e.target.value;
+              setRhsVal(newVal);
             }
           })]
         });
@@ -363,7 +394,10 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
             value: firstVal ? [moment(firstVal !== null && firstVal !== void 0 ? firstVal : undefined), moment(secondVal !== null && secondVal !== void 0 ? secondVal : undefined)] : [],
             onChange: function onChange(val) {
               // @ts-ignore
-              val && setVal([moment(val[0]).format('YYYY-MM-DD HH:mm'), moment(val[1]).format('YYYY-MM-DD HH:mm')]);
+              val && setRhsVal([{
+                type: AtomsTypeEnum.INPUT_STRING_LIST,
+                val: [moment(val[0]).format('YYYY-MM-DD HH:mm'), moment(val[1]).format('YYYY-MM-DD HH:mm')]
+              }]);
             }
           })
         });
@@ -373,7 +407,10 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
         children: _jsx(Dropdown, {
           trigger: ['click'],
           onChange: function onChange(key) {
-            setVal([key]);
+            setRhsVal([{
+              type: AtomsTypeEnum.INPUT_STRING,
+              val: key
+            }]);
           },
           droplist: [{
             key: '天',
@@ -405,9 +442,10 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
           placeholder: __('filter.enterANumber'),
           value: firstVal || '',
           onInput: function onInput(e) {
-            var newVal = curVal.slice();
-            newVal[0] = e.target.value;
-            setVal(newVal);
+            var newVal = rhsVal.slice();
+            // (newVal as AtomsStringList[])[0].val[0] = e.target.value;
+            newVal[0].val = e.target.value;
+            setRhsVal(newVal);
           }
         }), _jsx(Dropdown, {
           trigger: ['click'],
@@ -431,9 +469,10 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
             label: __('filter.year')
           }],
           onChange: function onChange(key) {
-            var newVal = curVal.slice();
-            newVal[1] = key;
-            setVal(newVal);
+            var newVal = rhsVal.slice();
+            newVal[1].val = key;
+            // (newVal as AtomsStringList[])[0].val[1] = key;
+            setRhsVal(newVal);
           },
           children: _jsxs(Button, {
             className: 'operator-btn',
@@ -455,9 +494,19 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
           value: firstVal ? moment(firstVal) : '',
           onChange: function onChange(val) {
             if (val) {
-              setVal([moment(val).format('YYYY-MM-DD HH:mm')]);
+              setRhsVal([{
+                type: AtomsTypeEnum.INPUT_STRING,
+                val: moment(val).format('YYYY-MM-DD HH:mm')
+              }, {
+                type: AtomsTypeEnum.INPUT_STRING,
+                val: moment(val).format('YYYY-MM-DD HH:mm')
+              }]);
             } else {
-              setVal([]);
+              setRhsVal([{
+                val: '',
+                type: AtomsTypeEnum.INPUT_STRING
+              }]);
+              // setVal([]);
             }
           }
         })
@@ -473,9 +522,15 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
           value: firstVal ? moment(firstVal) : '',
           onChange: function onChange(val) {
             if (val) {
-              setVal([moment(val).format('YYYY-MM-DD HH:mm')]);
+              setRhsVal([{
+                type: AtomsTypeEnum.INPUT_STRING,
+                val: moment(val).format('YYYY-MM-DD HH:mm')
+              }]);
             } else {
-              setVal([]);
+              setRhsVal([{
+                val: '',
+                type: AtomsTypeEnum.INPUT_STRING
+              }]);
             }
           }
         })
@@ -490,7 +545,10 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
           multiple: true,
           value: options,
           onChange: function onChange(val) {
-            setVal([val.join(',')]);
+            setRhsVal([{
+              type: AtomsTypeEnum.INPUT_STRING,
+              val: val.join(',')
+            }]);
           },
           popupVisible: popupVisible,
           onBlur: function onBlur() {
@@ -514,9 +572,9 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
           placeholder: __('filter.pleaseEnter'),
           value: firstVal || '',
           onInput: function onInput(e) {
-            var newVal = curVal.slice();
-            newVal[0] = e.target.value;
-            setVal(newVal);
+            var newVal = rhsVal.slice();
+            newVal[0].val = e.target.value;
+            setRhsVal(newVal);
           }
         })
       });
@@ -531,25 +589,22 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
   // 选择变量
   var selectConstant = function selectConstant(e) {
     store.setClosable(false);
+    var node = e.currentTarget;
+    var _type = Number(node.getAttribute('v-type'));
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
       container: container,
       content: _jsx(SelectList, {
-        value: valType,
+        value: _type,
         list: store.constantList || [],
         onChange: function onChange(val) {
           closePopup2();
-          var curObj = store.constantList.filter(function (v) {
-            return v.value === val;
-          })[0];
-          var newVal = curVal.slice();
-          newVal[0] = val;
-          setVal(newVal);
-          setConstantName(curObj.label);
+          // let curObj = store.constantList.filter((v: any) => v.value === val)[0];
+          var newVal = rhsVal.slice();
+          newVal[0].val = val;
+          setRhsVal(newVal);
           store.setClosable(true);
-          // (newMeta[index] as MetaJoin).expressions[_ind][`${position}_type`] = type;
-          // store.setMeta(newMeta, groupIndex);
         }
       })
     });
@@ -561,48 +616,85 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
       node: e.currentTarget,
       container: container,
       content: _jsx(SelectList, {
-        value: valType,
+        value: '',
         list: [{
-          value: 'string',
+          value: AtomsTypeEnum.INPUT_STRING,
           label: __('SqlQueryBuilder.input')
         }, {
-          value: 'constant',
+          value: AtomsTypeEnum.CONSTANT,
           label: __('customColumn.constant')
         }, {
-          value: 'field',
+          value: AtomsTypeEnum.FIELD,
           label: __('SqlQueryBuilder.columns')
         }],
         onChange: function onChange(type) {
           closePopup2();
-          setConstantName('');
-          setValType(type);
-          setVal([]);
-          setCurColumn(_objectSpread(_objectSpread({}, curColumn), {}, {
-            table2: null
-          }));
+          if (type === AtomsTypeEnum.INPUT_STRING || type === AtomsTypeEnum.CONSTANT) {
+            setRhsVal([{
+              val: '',
+              type: type
+            }]);
+          }
+          if (type === AtomsTypeEnum.FIELD) {
+            setRhsVal([{
+              fieldName: '',
+              // 字段名
+              fieldNameZh: '',
+              // 字段中文名
+              fieldAlias: '',
+              // 别名
+              fieldUuid: '',
+              // uuid
+              fieldId: '',
+              // 字段id
+              // quotes?: string; // 字段展示的 不知道有没有用
+              tableName: '',
+              // 表名
+              tableNameZh: '',
+              tableId: '',
+              // 表名
+              tableAlias: '',
+              // 别名
+              tableUuid: '',
+              // 表唯一标识
+              datasourceName: '',
+              // 数据源名
+              datasourceId: '',
+              // 数据源id
+              type: AtomsTypeEnum.FIELD
+            }]);
+          }
           store.setClosable(true);
-          // (newMeta[index] as MetaJoin).expressions[_ind][`${position}_type`] = type;
-          // store.setMeta(newMeta, groupIndex);
         }
       })
     });
   };
-  var nextPage = !!curColumn.name;
   var selectTable = function selectTable(e) {
     store.setClosable(false);
+    var node = e.currentTarget;
+    var _index = Number(node.getAttribute('v-index'));
     store.setPopup2({
       visible: true,
       node: e.currentTarget,
       container: container,
-      content: _jsx(SelectJoinColumn, {
+      content: _jsx(SelectColumnMultiple, {
         data: _toConsumableArray(data),
-        value: value,
+        multiple: false,
+        value: rhsVal,
         theme: ColumnsPopupThemeEnum.purple,
         didUpdate: didUpdate,
-        onSelect: function onSelect(record) {
-          setCurColumn(_objectSpread(_objectSpread({}, curColumn), {}, {
-            table2: record
-          }));
+        showNextBtn: true,
+        nextBtnText: __('metabase.nextOk'),
+        onNextStep: function onNextStep() {
+          store.setPopup2({
+            visible: false
+          });
+        },
+        onSelect: function onSelect(fields, quotes) {
+          var newR = _toConsumableArray(rhsVal);
+          newR = fields;
+          // (newR[_index] as AtomsField).quotes = quotes;
+          setRhsVal(newR);
           store.setPopup2({
             visible: false
           });
@@ -611,10 +703,10 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
       })
     });
   };
-  if (nextPage) {
-    var _curColumn$table4;
+  if (isNext) {
+    // SQL_GROUP_TYPE
     var _getData = getData(curColumn),
-      type = _getData.type,
+      fieldType = _getData.type,
       conditions = _getData.conditions;
     var menu = conditions.map(function (v) {
       return {
@@ -625,7 +717,13 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
     var changeFormula = function changeFormula(val) {
       var params = [];
       if (val === 'SUBSTR') {
-        params[0] = curColumn.name;
+        var names = [];
+        curColumn.lhs.filter(function (v) {
+          return v.type === AtomsTypeEnum.FIELD;
+        }).map(function (v) {
+          names.push(v.fieldName);
+        });
+        params[0] = names.join(' || ');
       }
       setFormula({
         type: val,
@@ -659,12 +757,13 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
         })
       });
     };
-    var getName = function getName(name) {
+    var getName = function getName(items) {
       var _formula$params3, _formula$params4;
+      var names = getAtomsQuotesName(items);
       switch (formula.type) {
         case 'SUBSTR':
           return _jsxs("div", {
-            children: ["SUBSTR(", name, ",", _jsx(InputNumber, {
+            children: ["SUBSTR(", names, ",", _jsx(InputNumber, {
               className: 'left-info-formula-input',
               hideControl: true,
               placeholder: '',
@@ -694,7 +793,7 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
             }), ")"]
           });
         default:
-          return name;
+          return names;
       }
     };
     return _jsxs("div", {
@@ -706,7 +805,7 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
           children: [_jsxs("span", {
             className: 'span-name',
             onClick: goPrevPage,
-            children: [_jsx(LeftArrowIcon, {}), getName(curColumn.name)]
+            children: [_jsx(LeftArrowIcon, {}), getName(curColumn.lhs)]
           }), leftFormula()]
         }), _jsxs("div", {
           className: 'right-info',
@@ -714,7 +813,12 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
             trigger: ['click'],
             onChange: function onChange(key) {
               setCondition('');
-              setValType('string');
+              setCurColumn(_objectSpread(_objectSpread({}, curColumn), {}, {
+                rhs: [{
+                  val: '',
+                  type: AtomsTypeEnum.INPUT_STRING
+                }]
+              }));
               setTimeout(function () {
                 setSpecial_type(key);
               }, 0);
@@ -726,15 +830,12 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
                 width: 104,
                 marginRight: 8
               },
-              children: [special_type || __('filter.selectType'), _jsx(ChevronODown, {})]
+              children: [(special_type === SQL_COLUMN_TYPE.FLOAT ? 'NUMBER' : special_type) || __('filter.selectType'), _jsx(ChevronODown, {})]
             })
           }), _jsx(Dropdown, {
             trigger: ['click'],
             onChange: function onChange(key) {
-              setValType('string');
-              setCurColumn(_objectSpread(_objectSpread({}, curColumn), {}, {
-                table2: null
-              }));
+              setCurColumn(_objectSpread({}, curColumn));
               setDefaultVal(key);
             },
             droplist: menu,
@@ -749,21 +850,32 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
         })]
       }), _jsxs("div", {
         className: 'content',
-        children: [(valType === 'field' || !valType) && _jsx("div", {
-          className: cx("Sqb-TableName purple-name", {
-            notSelected: !table2Selected
-          }),
-          onClick: selectTable,
-          children: table2Selected ? "".concat((_curColumn$table4 = curColumn.table2) === null || _curColumn$table4 === void 0 ? void 0 : _curColumn$table4.name) : __('SqlQueryBuilder.pickTable')
-        }), valType === 'constant' && _jsx("div", {
-          className: cx("Sqb-TableName purple-name", {
-            notSelected: !curVal[0]
-          }),
-          onClick: selectConstant,
-          children: constantName ? "".concat(constantName) : __('SqlQueryBuilder.pickConstant')
-        }), valType === 'string' && _jsx("div", {
-          className: 'content_l',
-          children: renderFilter(type, condition)
+        children: [rhsVal === null || rhsVal === void 0 ? void 0 : rhsVal.map(function (v, i) {
+          if (v.type === AtomsTypeEnum.FIELD) {
+            return _jsx("div", {
+              className: cx("Sqb-TableName purple-name", {
+                notSelected: !v.fieldName
+              }),
+              "v-index": i,
+              onClick: selectTable,
+              children: v.fieldName || __('SqlQueryBuilder.pickTable')
+            }, i);
+          }
+          if (v.type === AtomsTypeEnum.CONSTANT) {
+            return _jsx("div", {
+              className: cx("Sqb-TableName purple-name", {
+                notSelected: !v.val
+              }),
+              "v-type": v.type,
+              onClick: selectConstant,
+              children: v.val ? "".concat(v.val) : __('SqlQueryBuilder.pickConstant')
+            }, i);
+          }
+          if (v.type === AtomsTypeEnum.INPUT_STRING || v.type === AtomsTypeEnum.INPUT_STRING_LIST) {
+            return _jsx(React.Fragment, {
+              children: renderFilter(fieldType, condition)
+            }, i);
+          }
         }), ~['等于', '不等于', '早于', '晚于'].indexOf(condition) ? _jsx(Tooltip, {
           title: __('SqlQueryBuilder.switch'),
           children: _jsx(Button, {
@@ -791,29 +903,54 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
   function setDefaultVal(_condition) {
     setCondition(_condition);
     if (~['前', '下一个'].indexOf(_condition)) {
-      setVal(['30', '天']);
+      setRhsVal([{
+        val: ['30', '天'],
+        type: AtomsTypeEnum.INPUT_STRING_LIST
+      }]);
+    } else if (~['介于之间'].indexOf(_condition)) {
+      setRhsVal([{
+        val: ['', ''],
+        type: AtomsTypeEnum.INPUT_STRING_LIST
+      }]);
     } else if (~['当前'].indexOf(_condition)) {
-      setVal(['天']);
+      setRhsVal([{
+        val: '天',
+        type: AtomsTypeEnum.INPUT_STRING
+      }]);
     } else if (~['早于', '晚于', '在'].indexOf(_condition)) {
-      setVal([moment().format('YYYY-MM-DD HH:mm')]);
+      setRhsVal([{
+        val: moment().format('YYYY-MM-DD HH:mm'),
+        type: AtomsTypeEnum.INPUT_STRING
+      }]);
     } else {
-      setVal([]);
+      setRhsVal([{
+        val: '',
+        type: AtomsTypeEnum.INPUT_STRING
+      }]);
     }
   }
   return _jsx("div", {
-    children: _jsx(SelectJoinColumn, {
+    children: _jsx(SelectColumnMultiple, {
       data: data,
-      value: value,
+      value: curColumn === null || curColumn === void 0 ? void 0 : curColumn.lhs,
       theme: ColumnsPopupThemeEnum.purple,
       didUpdate: didUpdate,
-      onSelect: function onSelect(record) {
-        setCurColumn(record);
+      showNextBtn: true,
+      onNextStep: function onNextStep() {
+        setIsNext(true);
+      },
+      onSelect: function onSelect(fields, quotes) {
+        // const { columns, ...other } = tableInfo;
+        setCurColumn(_objectSpread(_objectSpread({}, curColumn), {}, {
+          lhs: fields
+        }));
+        // setCurColumn(record);
         /**
          * 这里默认帮用户选好一部分数据
          * 不至于让用户每一个都自己选、
          * 比如说：条件字段 默认我们帮他选好第一个...
          */
-        var _getData2 = getData(record),
+        var _getData2 = getData(curColumn),
           conditions = _getData2.conditions;
         setDefaultVal(conditions[0]);
       }