@gingkoo/pandora-metabase 1.0.22 → 1.0.24

package/lib/cjs/components/dialog/custom-editor/index.js

@@ -12,6 +12,7 @@ var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 require("./index.less");
 var _formulaList = _interopRequireDefault(require("../formula-list"));
+var _utils = require("../formula-list/utils");
 var _locale = require("../../../locale");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _pandora = require("@gingkoo/pandora");
@@ -36,7 +37,7 @@ var CaseEditor = function CaseEditor(props) {
   var ref = (0, _react.useRef)(null);
   // 提交按钮是否可用
   var usable = (0, _react.useMemo)(function () {
-    return Array.from(caseList).length > 0 && name;
+    return (0, _utils.isOk)(caseList) && name;
   }, [caseList, name]);
   // 取消
   var _onClose = function _onClose() {
@@ -78,7 +79,6 @@ var CaseEditor = function CaseEditor(props) {
               })
             })]
           }), (0, _jsxRuntime.jsx)(_formulaList["default"], {
-            isCustom: true,
             value: caseList,
             data: data,
             ref: ref,

package/lib/cjs/components/dialog/expression/index.js

@@ -629,7 +629,7 @@ var SelectFilterColumn = function SelectFilterColumn(_ref) {
         value: '',
         list: [{
           value: _types.AtomsTypeEnum.INPUT_STRING,
-          label: (0, _locale.__)('SqlQueryBuilder.input')
+          label: (0, _locale.__)('customColumn.input')
         }, {
           value: _types.AtomsTypeEnum.CONSTANT,
           label: (0, _locale.__)('customColumn.constant')

package/lib/cjs/components/dialog/formula/index.d.ts

@@ -0,0 +1,10 @@
+import './index.less';
+import { AtomsFormula } from '../../../store/types';
+interface PropsType {
+    value: AtomsFormula;
+    data: any;
+    onOk: Function;
+    onCancel: Function;
+}
+declare const CaseEditor: (props: PropsType) => import("react/jsx-runtime").JSX.Element;
+export default CaseEditor;

package/lib/cjs/components/dialog/formula/index.js

@@ -0,0 +1,242 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.less");
+var _formulaList = _interopRequireDefault(require("../formula-list"));
+var _icons = require("../../icons");
+var _utils = require("../formula-list/utils");
+var _locale = require("../../../locale");
+var _utils2 = require("./utils");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _types = require("../../../store/types");
+var _pandora = require("@gingkoo/pandora");
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _useProvider = require("../../../hooks/use-provider");
+var _templateObject; // import { OptionsTypeEnum, customTypes, otherList, operatorList, functionList } from './enum';
+var VisualBox = _styledComponents["default"].div.attrs({
+  className: 'visual-box'
+})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+var CaseEditor = function CaseEditor(props) {
+  var _store$formulaTemplat, _fun$args;
+  var store = (0, _useProvider.useStore)();
+  var value = props.value,
+    data = props.data,
+    onOk = props.onOk,
+    onCancel = props.onCancel;
+  var _useState = (0, _react.useState)(value),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    fun = _useState2[0],
+    setFun = _useState2[1];
+  var _useState3 = (0, _react.useState)((0, _utils2.getObjTem)(store.formulaTemplates)),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    formulaList = _useState4[0],
+    setFunctionList = _useState4[1];
+  var _useState5 = (0, _react.useState)({
+      canAdd: true,
+      canDel: true
+    }),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    formulaOpr = _useState6[0],
+    setFormulaOpr = _useState6[1];
+  (0, _react.useEffect)(function () {
+    setFormulaOpr((0, _utils2.getParamActions)(fun.args, fun.arity));
+  }, [fun]);
+  var ref = (0, _react.useRef)(null);
+  // EXPRESSION = 'expression', // 表达式
+  // // FUNCTION = 'function', // 函数
+  // INPUT_STRING = 'inputString', // 字符串输入框
+  // INPUT_STRING_LIST = 'inputStringList', // 字符串输入框
+  // INPUT_NUMBER_LIST = 'inputNumberList', // 数字输入框
+  // INPUT_NUMBER = 'inputNumber', // 数字输入框
+  // CONSTANT = 'constant', //  常量
+  // OPERATOR = 'operator', // 运算符
+  // UNKNOWN = 'unknown', //未选具体类型
+  // FORMULA = 'FORMULA',
+  // COLLECTION = 'collection',
+  // 提交按钮是否可用
+  var usable = (0, _react.useMemo)(function () {
+    return fun.name && (0, _utils.isOk)(fun.args);
+  }, [fun]);
+  // 取消
+  var _onClose = function _onClose() {
+    onCancel === null || onCancel === void 0 || onCancel();
+  };
+  // 确定
+  var _onOk = function _onOk() {
+    typeof onOk === 'function' && (onOk === null || onOk === void 0 ? void 0 : onOk(fun));
+  };
+  // 选择公式名
+  var handleFunName = function handleFunName(name) {
+    var _formulaList$name;
+    formulaList === null || formulaList === void 0 || formulaList[name].args;
+    setFun((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, fun), {}, {
+      args: (0, _utils2.getTemArgs)(formulaList === null || formulaList === void 0 ? void 0 : formulaList[name].args),
+      arity: formulaList === null || formulaList === void 0 || (_formulaList$name = formulaList[name]) === null || _formulaList$name === void 0 ? void 0 : _formulaList$name.arity,
+      name: name
+    }));
+  };
+  var addParams = function addParams(index) {
+    var _args = (0, _cloneDeep["default"])(fun.args);
+    var tem = (0, _utils2.getTemArgs)(formulaList === null || formulaList === void 0 ? void 0 : formulaList[fun.name].args)[index + 1] || {
+      type: _types.AtomsTypeEnum.COLLECTION,
+      list: []
+    };
+    _args.splice(index + 1, 0, tem);
+    setFun((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, fun), {}, {
+      args: _args
+    }));
+  };
+  var delParams = function delParams(index) {
+    var _args = (0, _cloneDeep["default"])(fun.args);
+    _args.splice(index, 1);
+    setFun((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, fun), {}, {
+      args: _args
+    }));
+  };
+  return (0, _jsxRuntime.jsxs)("div", {
+    className: 'function-box',
+    ref: ref,
+    children: [(0, _jsxRuntime.jsx)(VisualBox, {
+      children: (0, _jsxRuntime.jsx)("div", {
+        className: "Sqb-item Sqb-case-editor mb-2 mt-2",
+        children: (0, _jsxRuntime.jsxs)("div", {
+          className: "Sqb-item--content",
+          children: [(0, _jsxRuntime.jsxs)("div", {
+            className: 'Sqb-NotebookCell-header',
+            children: [(0, _jsxRuntime.jsx)("div", {
+              className: "mb-2 font-bold uppercase tracking-wider",
+              style: {
+                fontSize: 12,
+                color: '#949aab'
+              },
+              children: "\u8BF7\u5148\u9009\u62E9\u516C\u5F0F\uFF0C\u5207\u6362\u516C\u5F0F\u65F6\u4F1A\u91CD\u7F6E\u53C2\u6570"
+            }), (0, _jsxRuntime.jsx)("div", {
+              className: 'Sqb-NotebookCell formula-name',
+              children: (0, _jsxRuntime.jsx)(_pandora.Select, {
+                triggerProps: {
+                  clickToClose: true
+                },
+                value: fun.name,
+                triggerElement: function triggerElement(value) {
+                  return (0, _jsxRuntime.jsx)("div", {
+                    className: (0, _classnames["default"])("Sqb-TableName Sqb-TableName-OPERATOR", {
+                      notSelected: !fun.name
+                    }),
+                    children: fun.name ? fun.name : (0, _locale.__)('customColumn.selectFormula')
+                  });
+                },
+                onChange: function onChange(val) {
+                  handleFunName(val);
+                },
+                children: (_store$formulaTemplat = store.formulaTemplates) === null || _store$formulaTemplat === void 0 ? void 0 : _store$formulaTemplat.map(function (option, index) {
+                  return (0, _jsxRuntime.jsx)(_pandora.Select.Option, {
+                    value: option.name,
+                    children: option.name
+                  }, index);
+                })
+              })
+            }), fun.name && (0, _jsxRuntime.jsxs)("div", {
+              className: "mb-2 font-bold uppercase tracking-wider",
+              style: {
+                fontSize: 12,
+                color: '#949aab'
+              },
+              children: [(0, _jsxRuntime.jsxs)("p", {
+                children: ["\u63CF\u8FF0\uFF1A", formulaList[fun.name].description]
+              }), (0, _jsxRuntime.jsxs)("p", {
+                children: ["\u6848\u4F8B\uFF1A", formulaList[fun.name].example]
+              })]
+            })]
+          }), fun === null || fun === void 0 || (_fun$args = fun.args) === null || _fun$args === void 0 ? void 0 : _fun$args.map(function (v, i) {
+            if (v.type === _types.AtomsTypeEnum.COLLECTION) {
+              var _formulaList$fun$name;
+              return (0, _jsxRuntime.jsxs)("div", {
+                className: 'Sqb-item-formula-args',
+                children: [(0, _jsxRuntime.jsxs)("div", {
+                  className: 'Sqb-item-formula',
+                  children: [(0, _jsxRuntime.jsxs)("div", {
+                    className: "mb-2 font-bold uppercase tracking-wider",
+                    style: {
+                      fontSize: 12,
+                      color: '#949aab'
+                    },
+                    children: ["\u53C2\u6570", i + 1, ":"]
+                  }), (0, _jsxRuntime.jsx)(_formulaList["default"], {
+                    check: (formulaList === null || formulaList === void 0 || (_formulaList$fun$name = formulaList[fun.name]) === null || _formulaList$fun$name === void 0 || (_formulaList$fun$name = _formulaList$fun$name.args) === null || _formulaList$fun$name === void 0 || (_formulaList$fun$name = _formulaList$fun$name[i]) === null || _formulaList$fun$name === void 0 ? void 0 : _formulaList$fun$name.check) || '',
+                    value: v.list,
+                    data: data,
+                    ref: ref,
+                    onChange: function onChange(data, _quotes) {
+                      var _args = (0, _cloneDeep["default"])(fun.args);
+                      _args[i].list = data;
+                      _args[i].quotes = _quotes || '';
+                      var quotes = _args.map(function (v) {
+                        return v.quotes;
+                      }).join(' , ');
+                      setFun((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, fun), {}, {
+                        quotes: fun.name + ' ( ' + quotes + ' ) ',
+                        args: _args
+                      }));
+                    }
+                  })]
+                }), (0, _jsxRuntime.jsxs)("div", {
+                  className: 'Sqb-item-opr',
+                  children: [(0, _jsxRuntime.jsx)(_pandora.Button, {
+                    primary: true,
+                    disabled: !formulaOpr.canAdd,
+                    shape: 'square',
+                    icon: (0, _jsxRuntime.jsx)(_icons.AddIcon, {}),
+                    onClick: function onClick() {
+                      addParams(i);
+                    }
+                  }), (0, _jsxRuntime.jsx)(_pandora.Button, {
+                    primary: true,
+                    level: 'danger',
+                    shape: 'square',
+                    icon: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {}),
+                    disabled: !formulaOpr.canDel,
+                    onClick: function onClick() {
+                      delParams(i);
+                    }
+                  })]
+                })]
+              }, i);
+            }
+          })]
+        })
+      })
+    }), (0, _jsxRuntime.jsx)("div", {
+      className: "btns p-4",
+      children: (0, _jsxRuntime.jsxs)("div", {
+        style: {
+          marginLeft: 'auto'
+        },
+        children: [(0, _jsxRuntime.jsx)("button", {
+          className: "btn",
+          onClick: function onClick() {
+            return _onClose();
+          },
+          children: (0, _locale.__)('customColumn.cancel')
+        }), (0, _jsxRuntime.jsx)("button", {
+          className: (0, _classnames["default"])("btn ml-4", {
+            usable: usable
+          }),
+          disabled: !usable,
+          onClick: _onOk,
+          children: (0, _locale.__)('customColumn.complete')
+        })]
+      })
+    })]
+  });
+};
+var _default = exports["default"] = CaseEditor;

package/lib/cjs/components/dialog/formula/index.less

@@ -0,0 +1,81 @@
+.function-box {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  .visual-box {
+    flex: 1;
+  }
+
+  .Sqb-case-editor {
+    padding: 20px 20px 50px;
+    .Sqb-item--content {
+      width: 100%;
+      height: 100%;
+      .Sqb-item-formula-args {
+        display: flex;
+        align-items: center;
+        margin: 20px 0;
+        .Sqb-item-formula {
+          flex: 1;
+        }
+        .Sqb-item-opr {
+          display: flex;
+          gap: 10px;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+
+  .btns {
+    flex-direction: row;
+    align-items: center;
+    display: flex;
+    border-top: 1px solid #f0f0f0;
+    // position: absolute;
+    width: 100%;
+    bottom: 0;
+    z-index: 3;
+    background-color: #fff;
+    .btn {
+      padding: 0.75rem 1rem;
+
+      display: inline-block;
+      box-sizing: border-box;
+      text-decoration: none;
+      background: transparent;
+      border: 1px solid rgb(228, 228, 228);
+      color: #4c5773;
+      cursor: pointer;
+      text-decoration: none;
+      font-weight: bold;
+      font-family: 'Lato', sans-serif;
+      border-radius: 6px;
+
+      outline: none;
+
+      &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+      &:not(:disabled):hover {
+        color: #509ee3;
+        border-color: rgb(214, 214, 214);
+        background: #f9fbfc;
+        transition: all 200ms linear;
+      }
+
+      &.usable {
+        color: #ffffff;
+        background: #509ee3;
+        border: 1px solid #509ee3;
+        &:hover {
+          color: #ffffff;
+          border-color: #509ee3;
+          background-color: rgba(80, 158, 227, 0.88);
+        }
+      }
+    }
+  }
+}

package/lib/cjs/components/dialog/formula/utils.d.ts

@@ -0,0 +1,7 @@
+import { Arity, AtomsItem, AtomsCollection } from '../../../store/types';
+export declare const getObjTem: (arr: any[]) => any;
+export declare const getTemArgs: (temArgs: any[]) => AtomsCollection[];
+export declare function getParamActions(params: AtomsItem[], arity?: Arity): {
+    canAdd: boolean;
+    canDel: boolean;
+};

package/lib/cjs/components/dialog/formula/utils.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getObjTem = void 0;
+exports.getParamActions = getParamActions;
+exports.getTemArgs = void 0;
+var _types = require("../../../store/types");
+var _utils = require("../formula-list/utils");
+var getObjTem = exports.getObjTem = function getObjTem(arr) {
+  var obj = {};
+  arr === null || arr === void 0 || arr.map(function (v) {
+    if (v.name) {
+      obj[v.name] = v;
+    }
+  });
+  return obj;
+};
+var getTemArgs = exports.getTemArgs = function getTemArgs(temArgs) {
+  return (temArgs === null || temArgs === void 0 ? void 0 : temArgs.map(function (v) {
+    return {
+      type: _types.AtomsTypeEnum.COLLECTION,
+      quotes: '',
+      list: [(0, _utils.getTemplateItem)(v.type)]
+    };
+  })) || [];
+};
+function getParamActions(params, arity) {
+  var len = (params === null || params === void 0 ? void 0 : params.length) || 0;
+  if (!arity) {
+    return {
+      canAdd: true,
+      canDel: true
+    };
+  }
+  var effectiveMin = 'min' in arity ? arity.min : 'exact' in arity ? arity.exact : 0;
+  var effectiveMax = 'max' in arity ? arity.max : 'exact' in arity ? arity.exact // ← 这里！不能是 Infinity
+  : Infinity;
+  return {
+    canAdd: len < effectiveMax,
+    // 小于 max 才能加
+    canDel: len > effectiveMin // 大于 min 才能删
+  };
+}

package/lib/cjs/components/dialog/formula-list/index.d.ts

@@ -6,8 +6,8 @@ interface PropsType {
     value: AtomsItem[];
     data: any;
     exitData?: any;
-    isCustom?: boolean;
-    onChange?: Function;
+    onChange?: (atoms: AtomsItem[], quotes?: string) => void;
+    check?: string;
 }
 declare const FormulaList: React.ForwardRefExoticComponent<PropsType & React.RefAttributes<unknown>>;
 export default FormulaList;

package/lib/cjs/components/dialog/formula-list/index.js

@@ -15,16 +15,15 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _index = _interopRequireDefault(require("../../../index"));
 var _locale = require("../../../locale");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _utils = require("./utils");
-var _enum = require("./enum");
 var _types = require("../../../store/types");
-var _enum2 = require("../../../store/enum");
+var _enum = require("../../../store/enum");
 var _pandora = require("@gingkoo/pandora");
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-var _helper = require("../../../store/helper");
-var _utils2 = require("../../../utils");
+var _utils = require("../../../utils");
+var _formula = _interopRequireDefault(require("../formula"));
 var _icons = require("../../icons");
 var _dialog = require("../../dialog");
+var _utils2 = require("./utils");
 var _selectList = _interopRequireDefault(require("../../dialog/select-list"));
 var _arrow = _interopRequireDefault(require("./arrow.svg"));
 var _useProvider = require("../../../hooks/use-provider");
@@ -32,29 +31,32 @@ var _excluded = ["notExistsToolbar", "toolbar"]; // import './index.less';
 var FormulaList = (0, _react.forwardRef)(function (props, ref) {
   var value = props.value,
     data = props.data,
-    isCustom = props.isCustom,
     exitData = props.exitData,
     onChange = props.onChange,
     _props$customTypes = props.customTypes,
-    _customTypes = _props$customTypes === void 0 ? _enum.customTypes : _props$customTypes,
+    _customTypes = _props$customTypes === void 0 ? _utils2.customTypes : _props$customTypes,
     _props$operatorList = props.operatorList,
-    _operatorList = _props$operatorList === void 0 ? _enum.operatorList : _props$operatorList;
-  var _useState = (0, _react.useState)(value || []),
+    _operatorList = _props$operatorList === void 0 ? _utils2.operatorList : _props$operatorList,
+    check = props.check;
+  var caseList = value || [];
+  var setCaseList = function setCaseList(data) {
+    var quotes = data.map(function (v, i) {
+      if (v !== null && v !== void 0 && v.quotes) {
+        return v === null || v === void 0 ? void 0 : v.quotes;
+      } else if (v !== null && v !== void 0 && v.fieldName) {
+        return v === null || v === void 0 ? void 0 : v.fieldName;
+      } else {
+        return v.val;
+      }
+    }).join(' ');
+    onChange === null || onChange === void 0 || onChange(data, quotes);
+  };
+  var _useState = (0, _react.useState)(-1),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    caseList = _useState2[0],
-    setCaseList = _useState2[1];
-  // useEffect(() => {
-  //   setCaseList(value);
-  // }, [value]);
-  var _useState3 = (0, _react.useState)(-1),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    ind = _useState4[0],
-    setInd = _useState4[1];
+    ind = _useState2[0],
+    setInd = _useState2[1];
   var store = (0, _useProvider.useStore)();
   var filterCustomType = store.filterCustomType;
-  (0, _react.useEffect)(function () {
-    onChange === null || onChange === void 0 || onChange(caseList);
-  }, [caseList]);
   function closePopup() {
     store.setPopup({
       visible: false
@@ -70,7 +72,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
         data: data,
         multiple: false,
         value: [val],
-        theme: _enum2.ColumnsPopupThemeEnum.skyBlue,
+        theme: _enum.ColumnsPopupThemeEnum.skyBlue,
         onSelect: function onSelect(fields, quotes) {
           var _caseList = caseList.slice();
           _caseList[i] = fields[0];
@@ -85,7 +87,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
     var _caseList = caseList.slice();
     var oldType = _caseList[i].val;
     _caseList[i].val = val;
-    _caseList = (0, _utils.getTemplate)(oldType, val, _caseList, i);
+    _caseList = (0, _utils2.insertTemplateAt)(oldType, val, _caseList, i);
     setCaseList(_caseList);
   };
   // 表达式
@@ -119,7 +121,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
   // 添加
   var addOperator = function addOperator(type, index, position) {
     var _caseList = caseList.slice() || [];
-    var temItem = (0, _helper.getTemItem)(type);
+    var temItem = (0, _utils2.getTemplateItem)(type);
     if (position === 'add') {
       _caseList.push(temItem);
     } else if (position === 'before') {
@@ -165,7 +167,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
               }
               var expression = {
                 notExists: (0, _cloneDeep["default"])(newList),
-                quotes: (0, _utils2.buildSqlQuery)(newList, caseList[i].type),
+                quotes: (0, _utils.buildSqlQuery)(newList, caseList[i].type),
                 type: caseList[i].type
               };
               caseList[i] = expression;
@@ -201,6 +203,33 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       })
     });
   }
+  // 函数弹窗
+  var showFunction = function showFunction(e, i) {
+    var _value = caseList[i];
+    var o = _pandora.Modal2.openModal({
+      title: (0, _locale.__)('customColumn.formula'),
+      transparentMask: true,
+      content: (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: (0, _jsxRuntime.jsx)(_useProvider.Provider, {
+          value: store,
+          children: (0, _jsxRuntime.jsx)(_formula["default"], {
+            data: data,
+            value: _value,
+            onCancel: function onCancel() {
+              o.close();
+            },
+            onOk: function onOk(data) {
+              var _caseList = caseList.slice();
+              _caseList[i] = data;
+              setCaseList(_caseList);
+              o.close();
+            }
+          })
+        })
+      }),
+      onClose: function onClose() {}
+    });
+  };
   // 分段
   var itemDom = function itemDom(v, index) {
     var type = v.type;
@@ -318,14 +347,22 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
       });
     } else if (type === _types.AtomsTypeEnum.CONSTANT) {
       //常量
-      return (0, _jsxRuntime.jsx)("div", {
+      return (0, _jsxRuntime.jsxs)("div", {
         className: (0, _classnames["default"])("Sqb-TableName", {
           notSelected: !v.val
         }),
         "v-index": index,
         "v-val": v.val,
         onClick: selectConstant,
-        children: v.val ? v.val : (0, _locale.__)('SqlQueryBuilder.pickConstant')
+        children: [v.val ? v.val : (0, _locale.__)('SqlQueryBuilder.pickConstant'), (0, _jsxRuntime.jsx)("span", {
+          style: {
+            fontSize: 0
+          },
+          onClick: function onClick(e) {
+            return handleDel(e, index);
+          },
+          children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {})
+        })]
       }, index);
     } else if (type === _types.AtomsTypeEnum.EXPRESSION) {
       // 表达式
@@ -336,7 +373,7 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
         onClick: function onClick(e) {
           return handleExpression(e, index, v);
         },
-        children: [!v.quotes && (0, _locale.__)('customColumn.selectExpression'), v.quotes, (0, _jsxRuntime.jsx)("span", {
+        children: [v.quotes ? v.quotes : (0, _locale.__)('customColumn.selectExpression'), (0, _jsxRuntime.jsx)("span", {
           style: {
             fontSize: 0
           },
@@ -346,6 +383,23 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
           children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {})
         })]
       });
+    } else if (type === _types.AtomsTypeEnum.FORMULA) {
+      // 公式
+      return (0, _jsxRuntime.jsxs)("div", {
+        className: "Sqb-TableName gray-name",
+        onClick: function onClick(e) {
+          return showFunction(e, index);
+        },
+        children: [v.quotes ? v.quotes : (0, _locale.__)('customColumn.selectFormula'), (0, _jsxRuntime.jsx)("span", {
+          style: {
+            fontSize: 0
+          },
+          onClick: function onClick(e) {
+            return handleDel(e, index);
+          },
+          children: (0, _jsxRuntime.jsx)(_icons.CloseIcon, {})
+        })]
+      }, index);
     } else {
       return (0, _jsxRuntime.jsx)(_pandora.Select, {
         triggerProps: {
@@ -488,7 +542,11 @@ var FormulaList = (0, _react.forwardRef)(function (props, ref) {
         })
       })]
     }), (0, _jsxRuntime.jsxs)("p", {
-      className: 'Sqb-NotebookCell-preview',
+      className: "mb-2 font-bold uppercase tracking-wider",
+      style: {
+        fontSize: 12,
+        color: '#949aab'
+      },
       children: ["\u9884\u89C8\uFF1A", caseList.map(function (v, i) {
         if (v !== null && v !== void 0 && v.quotes) {
           return v === null || v === void 0 ? void 0 : v.quotes;

package/lib/cjs/components/dialog/formula-list/utils.d.ts

@@ -1,3 +1,4 @@
+import { AtomsTypeEnum, AtomsItem } from '../../../store/types';
 /**
  *
  * @param type 当前选择的类型
@@ -5,4 +6,16 @@
  * @param index 需要讲模版插入的位置
  * @returns
  */
-export declare const getTemplate: (oldType: string, type: string, list: any[], index: number) => any[];
+export declare const insertTemplateAt: (oldType: string, type: string, list: any[], index: number) => any[];
+export declare const operatorList: string[];
+export declare const customTypes: ({
+    value: AtomsTypeEnum;
+    label: any;
+    children?: undefined;
+} | {
+    value: AtomsTypeEnum;
+    label: any;
+    children: string[];
+})[];
+export declare const getTemplateItem: (type: AtomsTypeEnum) => AtomsItem;
+export declare const isOk: (rhsVal: AtomsItem[]) => boolean;