@zgfe/business-lib 1.1.66 → 1.1.67-beta.3

package/es/formulaTarget/components/formulaItem/index.js

@@ -0,0 +1,190 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { classPrefix } from '../formula';
+import { getDimension, getFilters, isDisable, judgeHaveFilter, validator } from '../formula/util';
+import { BizGlobalDataContext, IconFont } from '../../..';
+import SelectHandle from '../../../select/handle';
+import { Dropdown } from 'antd';
+import FormulaPanel from '../panel';
+import _ from 'lodash';
+import { itemDefaultData } from './data';
+import { BizValidatorContext } from '../../../context';
+var FormulaItem = function FormulaItem(props) {
+  var _useState = useState(props.value),
+    _useState2 = _slicedToArray(_useState, 2),
+    formulaValue = _useState2[0],
+    setFormulaValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    disableLeft = _useState4[0],
+    setDisableLeft = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    disableRight = _useState6[0],
+    setDisableRight = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    label = _useState8[0],
+    setLabel = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    haveFilter = _useState10[0],
+    setHaveFilter = _useState10[1];
+  var _useState11 = useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    dimension = _useState12[0],
+    setDimension = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    isValidate = _useState14[0],
+    setIsValidate = _useState14[1];
+  var _useContext = useContext(BizGlobalDataContext),
+    eventGroupList = _useContext.eventGroupList;
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    open = _useState16[0],
+    setOpen = _useState16[1];
+  var panelRef = useRef(null);
+  var handleRef = useRef(null);
+  useEffect(function () {
+    setDisableLeft(isDisable(props.id, props.index, props.brackets, 'left'));
+    setDisableRight(isDisable(props.id, props.index, props.brackets, 'right'));
+  }, [props.brackets]);
+  useEffect(function () {
+    window.addEventListener('click', handleClick);
+    return function () {
+      window.removeEventListener('click', handleClick);
+    };
+  }, [open, formulaValue]);
+  useEffect(function () {
+    var condition = formulaValue === null || formulaValue === void 0 ? void 0 : formulaValue.condition;
+    setLabel((condition === null || condition === void 0 ? void 0 : condition.eventName) || (formulaValue === null || formulaValue === void 0 ? void 0 : formulaValue.condition));
+    if ((condition === null || condition === void 0 ? void 0 : condition.type) === 'event') {
+      setDimension(getDimension(condition.analysisDimension, condition.eventId, eventGroupList));
+      setHaveFilter(judgeHaveFilter(condition.filters));
+    } else if ((condition === null || condition === void 0 ? void 0 : condition.type) === 'whole') {
+      setHaveFilter(judgeHaveFilter(condition.filters));
+      setDimension('');
+    } else {
+      setDimension('');
+      setHaveFilter(false);
+    }
+    props.onChange && props.onChange(formulaValue);
+  }, [formulaValue]);
+  var handleClick = function handleClick(e) {
+    var _handleRef$current, _panelRef$current;
+    var handleClicked = (_handleRef$current = handleRef.current) === null || _handleRef$current === void 0 ? void 0 : _handleRef$current.contains(e.target);
+    var clicked = (_panelRef$current = panelRef.current) === null || _panelRef$current === void 0 ? void 0 : _panelRef$current.contains(e.target);
+    if (!open || clicked || handleClicked) return;
+    var isDropdown = false;
+    var dropdownList = document.getElementsByClassName('ant-dropdown');
+    var len = dropdownList.length;
+    for (var i = 0; i < len; i++) {
+      if (dropdownList[i].contains(e.target)) {
+        isDropdown = true;
+        break;
+      }
+    }
+    if (!isDropdown) {
+      var _formulaValue$conditi;
+      if (!(formulaValue === null || formulaValue === void 0 ? void 0 : formulaValue.condition)) {
+        setOpen(false);
+        return;
+      }
+      var type = ((_formulaValue$conditi = formulaValue.condition) === null || _formulaValue$conditi === void 0 ? void 0 : _formulaValue$conditi.type) || 'constant';
+      var validateData = validator(type, formulaValue.condition);
+      if (!validateData.isOk) {
+        setIsValidate(true);
+      } else {
+        setOpen(false);
+      }
+    }
+  };
+  var onClickBracket = function onClickBracket(position) {
+    var flag = position === 'left' ? disableLeft : disableRight;
+    if (flag) return;
+    setFormulaValue(function (value) {
+      var newValue = _.cloneDeep(value) || itemDefaultData;
+      newValue[position] = !newValue[position];
+      return newValue;
+    });
+  };
+  var onChange = function onChange(data) {
+    setFormulaValue(function (value) {
+      var newValue = _.cloneDeep(value) || itemDefaultData;
+      newValue.condition = _.cloneDeep(data);
+      return newValue;
+    });
+    setIsValidate(false);
+  };
+  var onClickHandle = function onClickHandle() {
+    if (open) {
+      setFormulaValue(function (value) {
+        var _newValue$condition;
+        var newValue = _.cloneDeep(value) || itemDefaultData;
+        if (newValue.condition && ((_newValue$condition = newValue.condition) === null || _newValue$condition === void 0 ? void 0 : _newValue$condition.filters)) {
+          newValue.condition.filters = getFilters(newValue.condition.filters);
+        }
+        return newValue;
+      });
+    }
+    setTimeout(function () {
+      setOpen(function (open) {
+        return !open;
+      });
+    }, 0);
+  };
+  return /*#__PURE__*/React.createElement(BizValidatorContext.Provider, {
+    value: {
+      isValidate: isValidate,
+      setValidate: function setValidate(data) {
+        return setIsValidate(!!data);
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-target")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-option ").concat((formulaValue === null || formulaValue === void 0 ? void 0 : formulaValue.left) ? 'active' : '').concat(disableLeft ? ' disabled' : ''),
+    onClick: function onClick() {
+      return onClickBracket('left');
+    }
+  }, "("), /*#__PURE__*/React.createElement(Dropdown, {
+    dropdownRender: function dropdownRender() {
+      return /*#__PURE__*/React.createElement(FormulaPanel, {
+        ref: panelRef,
+        value: formulaValue === null || formulaValue === void 0 ? void 0 : formulaValue.condition,
+        onChange: onChange,
+        onDelete: props.onDelete,
+        onSubmit: function onSubmit() {
+          return setOpen(false);
+        }
+      });
+    },
+    trigger: ['click'],
+    open: open,
+    destroyPopupOnHide: true
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: handleRef,
+    className: "".concat(classPrefix, "-target-handle"),
+    onClick: onClickHandle
+  }, /*#__PURE__*/React.createElement(SelectHandle, {
+    border: false,
+    label: label
+  }, /*#__PURE__*/React.createElement("span", null, label), haveFilter ? /*#__PURE__*/React.createElement(IconFont, {
+    className: "".concat(classPrefix, "-target-handle-icon"),
+    type: "a-shaixuan2"
+  }) : null, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(classPrefix, "-target-handle-name")
+  }, dimension)))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-option ").concat((formulaValue === null || formulaValue === void 0 ? void 0 : formulaValue.right) ? 'active' : '').concat(disableRight ? ' disabled' : ''),
+    onClick: function onClick() {
+      return onClickBracket('right');
+    }
+  }, ")")));
+};
+export default FormulaItem;

package/es/formulaTarget/components/formulaItem/types.d.ts

@@ -0,0 +1,10 @@
+import { FormulaContainerTypes } from '../formula/types';
+export interface FormulaItemProps {
+    value: FormulaContainerTypes.Item;
+    id: string;
+    index: number;
+    brackets: (null | FormulaContainerTypes.Bracket)[];
+    onChange?: (data: FormulaContainerTypes.Item) => void;
+    onDelete?: () => void;
+    onSubmit?: () => void;
+}

package/es/formulaTarget/components/formulaItem/types.js

@@ -0,0 +1 @@
+export {};

package/es/formulaTarget/components/panel/data.d.ts

@@ -0,0 +1,8 @@
+import { AttrConditionTypes } from '../../..';
+import { AnalysisEvent, EventGroup } from '../../../attributeSelector/types';
+export declare const leftMenu: {
+    name: string;
+    value: string;
+}[];
+export declare const filterData: AttrConditionTypes.GroupValue;
+export declare const getEventList: (eventGroupList?: EventGroup[]) => AnalysisEvent[];

package/es/formulaTarget/components/panel/data.js

@@ -0,0 +1,32 @@
+export var leftMenu = [{
+  name: '事件',
+  value: 'event'
+}, {
+  name: '整体',
+  value: 'whole'
+}, {
+  name: '常数',
+  value: 'constant'
+}];
+export var filterData = {
+  relation: 'and',
+  conditions: []
+};
+export var getEventList = function getEventList(eventGroupList) {
+  var list = [];
+  var listObj = {};
+  var markList = [];
+  eventGroupList === null || eventGroupList === void 0 ? void 0 : eventGroupList.forEach(function (group) {
+    group.eventList.forEach(function (item) {
+      if (!listObj[item.id]) {
+        if (item.marked) {
+          markList.push(item);
+        } else {
+          list.push(item);
+        }
+        listObj[item.id] = 1;
+      }
+    });
+  });
+  return [].concat(markList, list);
+};

package/es/formulaTarget/components/panel/demo.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/es/formulaTarget/components/panel/demo.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import FormulaPanel from '.';
+import BizGlobalDataContext from '../../../context';
+import { convertAttributeData } from '../../..';
+import eventData from '../../../mock/event';
+import envData from '../../../mock/env';
+import userData from '../../../mock/user';
+import { OperateTypes } from '../../../attrConditions/types';
+export default (function () {
+  var store = convertAttributeData({
+    eventList: eventData,
+    userPropList: userData,
+    envPropList: envData
+  });
+  var defaultValue = {
+    type: 'event',
+    eventId: 24143013,
+    eventName: '小程序-付款成功',
+    alias: '小程序-付款成功',
+    isBuiltIn: false,
+    analysisDimension: {
+      analysisIndex: 'number'
+    },
+    filters: {
+      relation: 'and',
+      conditions: [{
+        attrId: 30183422,
+        propCategory: 'eventProp',
+        type: 1,
+        operator: OperateTypes.Equal,
+        values: ['111'],
+        dimensionSub: 'event_attr',
+        label: '_编号',
+        attrName: '_编号'
+      }]
+    }
+  };
+  var onChange = function onChange(data) {
+    console.log('onChange:', data);
+  };
+  var onDelete = function onDelete() {
+    console.log('onDelete------');
+  };
+  var onSubmit = function onSubmit() {
+    console.log('onSubmit------');
+  };
+  return /*#__PURE__*/React.createElement(BizGlobalDataContext.Provider, {
+    value: {
+      eventGroupList: store.eventGroupList,
+      userPropList: store.userPropList,
+      eventEnvList: store.envPropList
+    }
+  }, /*#__PURE__*/React.createElement(FormulaPanel, {
+    value: defaultValue,
+    onChange: onChange,
+    onDelete: onDelete,
+    onSubmit: onSubmit
+  }));
+});

package/es/formulaTarget/components/panel/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.less';
+import { FormulaPanelProps } from './types';
+export declare const classPrefix = "formula-panel";
+declare const FormulaPanel: React.ForwardRefExoticComponent<FormulaPanelProps & React.RefAttributes<any>>;
+export default FormulaPanel;

package/es/formulaTarget/components/panel/index.js

@@ -0,0 +1,162 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useContext, useEffect, useState } from 'react';
+import './index.less';
+import { Button, InputNumber, Spin } from 'antd';
+import { getEventList, leftMenu } from './data';
+import { BizGlobalDataContext, BizSearchInput } from '../../..';
+import { BuiltinIndicators } from '../../../constants/common';
+import { InfiniteScrollList } from '../../../eventSelector/listPanel';
+import PanelItem from './item';
+import { validator } from '../formula/util';
+import { BizValidatorContext } from '../../../context';
+export var classPrefix = 'formula-panel';
+var FormulaPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useContext = useContext(BizGlobalDataContext),
+    eventGroupList = _useContext.eventGroupList;
+  var _useState = useState('event'),
+    _useState2 = _slicedToArray(_useState, 2),
+    type = _useState2[0],
+    setType = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    allList = _useState6[0],
+    setAllList = _useState6[1];
+  var _useState7 = useState(true),
+    _useState8 = _slicedToArray(_useState7, 2),
+    loading = _useState8[0],
+    setLoading = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    currentValue = _useState10[0],
+    setCurrentValue = _useState10[1];
+  var scrollableId = 'scrollableFormula' + Math.random();
+  var _useState11 = useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    validateData = _useState12[0],
+    setValidateData = _useState12[1];
+  var _useContext2 = useContext(BizValidatorContext),
+    setValidate = _useContext2.setValidate;
+  useEffect(function () {
+    setAllList({
+      event: getEventList(eventGroupList),
+      whole: BuiltinIndicators.eventList
+    });
+    setCurrentValue(props.value);
+    setType(props.value ? props.value.type ? props.value.type : 'constant' : 'event');
+    setTimeout(function () {
+      setLoading(false);
+    }, 0);
+  }, []);
+  useEffect(function () {
+    props.onChange && props.onChange(currentValue);
+  }, [currentValue]);
+  var onClickMenu = function onClickMenu(data) {
+    setType(data);
+  };
+  var onClick = function onClick(data) {
+    setValidateData('');
+    setCurrentValue({
+      type: type,
+      eventId: data.id,
+      eventName: data.alias || data.name,
+      alias: data.alias || data.name,
+      isBuiltIn: data.isBuiltIn,
+      analysisDimension: {
+        analysisIndex: 'number'
+      }
+    });
+  };
+  var onChangeFilter = function onChangeFilter(dimension, filters) {
+    setCurrentValue(function (value) {
+      return _objectSpread(_objectSpread({}, value), {}, {
+        analysisDimension: _objectSpread({}, dimension),
+        filters: filters
+      });
+    });
+  };
+  var onChangeConstant = function onChangeConstant(data) {
+    setCurrentValue(String(data));
+    if (data) setValidateData('');
+  };
+  var onSubmit = function onSubmit() {
+    var conditionType = currentValue && currentValue.type ? currentValue.type : type;
+    var data = validator(conditionType, currentValue);
+    console.log('submit:', data, conditionType, currentValue);
+    if (!data.isOk) {
+      setValidateData(data.msg);
+      setValidate && setValidate(true);
+      return;
+    }
+    props.onSubmit && props.onSubmit();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix,
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-content")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-left")
+  }, leftMenu.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-left-item").concat(item.value === type ? ' active' : ''),
+      key: item.value,
+      onClick: function onClick() {
+        return onClickMenu(item.value);
+      }
+    }, item.name);
+  })), currentValue && currentValue.eventId && currentValue.type === type ? /*#__PURE__*/React.createElement(PanelItem, {
+    value: currentValue,
+    onBack: function onBack() {
+      return setCurrentValue(null);
+    },
+    onChange: onChangeFilter
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-right")
+  }, type === 'event' && allList[type] && allList[type].length ? /*#__PURE__*/React.createElement(BizSearchInput, {
+    className: "".concat(classPrefix, "-right-search"),
+    onChange: setSearchValue
+  }) : null, type === 'constant' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputNumber, {
+    className: "".concat(classPrefix, "-right-number"),
+    value: typeof currentValue === 'string' || typeof currentValue === 'number' ? Number(currentValue) : undefined,
+    min: 0,
+    max: 99999,
+    status: validateData ? 'error' : '',
+    onChange: onChangeConstant
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-error")
+  }, validateData)) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-right-list"),
+    id: scrollableId
+  }, loading ? /*#__PURE__*/React.createElement(Spin, null) : allList[type].length ? /*#__PURE__*/React.createElement(InfiniteScrollList, {
+    scrollableTarget: scrollableId,
+    searchEventList: allList[type],
+    searchValue: searchValue,
+    groupId: type,
+    currentId: currentValue === null || currentValue === void 0 ? void 0 : currentValue.eventId,
+    onClick: onClick
+  }) : '暂无数据'))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-footer")
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "text",
+    onClick: props.onDelete
+  }, "\u5220\u9664"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: onSubmit
+  }, "\u786E\u5B9A")));
+});
+export default FormulaPanel;

package/es/formulaTarget/components/panel/index.less

@@ -0,0 +1,131 @@
+@import '../../../assets/styles/inner.less';
+
+.formula-panel {
+  .__select-panel();
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  min-width: 328px;
+  height: 368px;
+  padding: 0;
+  background: #fff;
+
+  &-content {
+    display: flex;
+    height: 320px;
+  }
+
+  &-left {
+    width: 76px;
+    height: 100%;
+    padding: 8px;
+    border-right: 1px solid #ecedf0;
+    &-item {
+      .__select-option();
+    }
+  }
+
+  &-right {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    padding: 12px 8px;
+
+    &-search {
+      width: 100%;
+      margin-bottom: 12px;
+    }
+
+    &-list {
+      max-height: calc(100% - 44px);
+      // flex: 1;
+
+      overflow: auto;
+    }
+    &-item {
+      .__select-option();
+    }
+
+    &-number {
+      min-width: 184px;
+      background-color: @background-color-base;
+      border: 1px solid @background-color-base;
+      border-radius: @border-radius-small;
+      &:hover,
+      &.ant-input-number-focused {
+        background-color: #fff;
+        border-color: @primary-color;
+      }
+    }
+  }
+
+  &-detail {
+    width: 100%;
+    height: 100%;
+
+    &-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 48px;
+      padding: 0 12px;
+      border-bottom: 1px solid #f2f3f4;
+      &-left {
+        display: flex;
+        align-items: center;
+        &-icon {
+          margin-right: 10px;
+          color: @text-color-secondary;
+          font-size: 16px !important;
+          line-height: 16px;
+          cursor: pointer;
+        }
+      }
+
+      &-right {
+        display: flex;
+        align-items: center;
+        margin-left: 16px;
+        color: #9aa1a9;
+        cursor: pointer;
+        .bsicon {
+          margin-right: 8px;
+          font-size: 16px !important;
+        }
+
+        &:hover {
+          color: @primary-color;
+        }
+      }
+    }
+
+    &-content {
+      display: flex;
+      flex-direction: column;
+      max-height: calc(100% - 48px);
+      padding: 12px;
+      overflow: auto;
+
+      .biz-attr-condition:not(:last-child) {
+        margin-bottom: 12px;
+      }
+    }
+  }
+
+  &-footer {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    padding: 8px 16px;
+    border-top: 1px solid #ecedf0;
+
+    .ant-btn:not(:last-child) {
+      margin-right: 16px;
+    }
+  }
+
+  &-error {
+    color: @error-color;
+  }
+}

package/es/formulaTarget/components/panel/item.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './index.less';
+import { PanelItemProps } from './types';
+declare const PanelItem: React.FC<PanelItemProps>;
+export default PanelItem;