@zgfe/modules-attribution 1.0.5 → 1.1.0

package/{dist/esm/modules/leftPanel → es/modules/searchPanel}/components/globalAttribute.js

@@ -1,23 +1,21 @@
 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 _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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { BizConditionGroup, IconFont } from '@zgfe/business-lib';
+import { BizAttrConditionGroup, IconFont } from '@zgfe/business-lib';
 import React, { useEffect, useRef, useState } from 'react';
-import { classPrefix } from '..';
 var GlobalAttribute = function GlobalAttribute(props) {
+  var classPrefix = 'form-box';
   var max = props.max,
-    onChange = props.onChange;
-  // 组件ref
+    onChange = props.onChange,
+    setAttrGlobalCount = props.setAttrGlobalCount;
   var conditionRef = useRef(null);
-  // 条件个数
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     count = _useState2[0],
     setCount = _useState2[1];
-  // 是否初始化
   var _useState3 = useState(true),
     _useState4 = _slicedToArray(_useState3, 2),
     init = _useState4[0],
@@ -30,28 +28,30 @@ var GlobalAttribute = function GlobalAttribute(props) {
   }, []);
   useEffect(function () {
     if (init || props.eventIdList && props.eventIdList[0] === -100) return;
-    // 若值变为空，组件清空
     if (!props.value) {
       conditionRef.current.setValue(props.value);
     }
-  }, [props.eventIdList]);
-
-  // 添加属性
+  }, [props.eventIdList, props.value]);
   var onAdd = function onAdd() {
-    if (props.eventIdList[0] === -100) return;
+    if (props.eventIdList && props.eventIdList.length <= 0 || props.eventIdList[0] === -100) return;
     conditionRef.current.add();
   };
-  return /*#__PURE__*/React.createElement("div", null, props.eventIdList && props.eventIdList[0] === -100 ? '' : /*#__PURE__*/React.createElement(BizConditionGroup, {
+  useEffect(function () {
+    setAttrGlobalCount(count);
+  }, [count]);
+  return /*#__PURE__*/React.createElement("div", null, props.eventIdList && props.eventIdList[0] === -100 ? '' : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(count > 0 ? 'attr-box-show' : '')
+  }, /*#__PURE__*/React.createElement(BizAttrConditionGroup, {
     ref: conditionRef,
-    enableEventProp: true,
-    eventIdList: props.eventIdList,
     value: props.value,
-    enableDelete: true,
     onlyAnd: true,
+    enableEventProp: true,
+    enableDelete: true,
+    eventIdList: props.eventIdList,
     onChange: onChange,
     onConditionsCount: setCount
-  }), count < max && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classPrefix, "-add ").concat(props.eventIdList[0] === -100 ? 'disabled' : ''),
+  })), count < max && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-add ").concat(props.eventIdList && props.eventIdList.length <= 0 ? 'disabled' : ''),
     onClick: onAdd
   }, /*#__PURE__*/React.createElement(IconFont, {
     className: "".concat(classPrefix, "-add-icon"),

package/es/modules/searchPanel/components/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchPanelTypes } from '../types';
+declare const SearchContent: React.FC<SearchPanelTypes.PanelProp>;
+export default SearchContent;

package/es/modules/searchPanel/components/index.js

@@ -0,0 +1,21 @@
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+import React from 'react';
+import TargetEvent from './targetEvent';
+import AttributableEvents from './attributableEvents';
+var SearchContent = function SearchContent(props) {
+  var type = props.type;
+  if (type === 'targetFilters') {
+    return /*#__PURE__*/React.createElement(TargetEvent, _objectSpread({}, props));
+  } else if (type === 'sourceFilters') {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "search-panel-item"
+    }, /*#__PURE__*/React.createElement(AttributableEvents, _objectSpread({}, props)));
+  }
+  return /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u76F8\u5173\u7EC4\u4EF6");
+};
+SearchContent.defaultProps = {
+  eventIdList: []
+};
+export default SearchContent;

package/es/modules/searchPanel/components/targetEvent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchPanelTypes } from '../types';
+declare const TargetEvent: React.FC<SearchPanelTypes.PanelProp>;
+export default TargetEvent;

package/es/modules/searchPanel/components/targetEvent.js

@@ -0,0 +1,159 @@
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useRef, useState } from 'react';
+import { BizAttrConditionGroup, BizEventSelector, IconFont } from '@zgfe/business-lib';
+import { Select, Tooltip, message } from 'antd';
+var TargetEvent = function TargetEvent(props) {
+  var _targetData$event2;
+  var value = props.value,
+    setAttrTargetCount = props.setAttrTargetCount,
+    eventIdList = props.eventIdList;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    targetData = _useState2[0],
+    setTargetData = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    filters = _useState4[0],
+    setFilters = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    count = _useState6[0],
+    setCount = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isAdd = _useState8[0],
+    setIsAdd = _useState8[1];
+  var conditionRef = useRef(null);
+  var _useState9 = useState(-1),
+    _useState10 = _slicedToArray(_useState9, 2),
+    eventId = _useState10[0],
+    setEventId = _useState10[1];
+  var bizEventSelectorDefaultValue = {};
+  if (value && value.eventId && value.eventId != -100) {
+    bizEventSelectorDefaultValue = {
+      event: {
+        id: value.eventId,
+        name: value.eventName
+      }
+    };
+  }
+  useEffect(function () {
+    if (value) {
+      var _value$filters;
+      setTargetData({
+        event: {
+          id: value.eventId,
+          name: value.eventName
+        }
+      });
+      setFilters(value.filters);
+      if (eventIdList && eventIdList.length >= 0) {
+        setEventId(eventIdList[0]);
+      }
+      if ((_value$filters = value.filters) === null || _value$filters === void 0 ? void 0 : _value$filters.conditions) {
+        setCount(value.filters.conditions.length);
+      }
+    }
+  }, []);
+  var onChangeFilters = function onChangeFilters(data) {
+    setFilters(data);
+    onChangeHandle(targetData, data);
+  };
+  var onAdd = function onAdd() {
+    var _targetData$event;
+    if ((targetData === null || targetData === void 0 ? void 0 : (_targetData$event = targetData.event) === null || _targetData$event === void 0 ? void 0 : _targetData$event.id) === -100 && Object.keys(bizEventSelectorDefaultValue).length <= 0) {
+      message.error('请先选择目标事件');
+      return;
+    }
+    if (count >= 5) {
+      message.error('最多可添加5条属性筛选');
+      return;
+    }
+    setIsAdd(true);
+    setTimeout(function () {
+      conditionRef.current.add();
+    }, 0);
+  };
+  var onChangeTarget = function onChangeTarget(target) {
+    setTargetData(target);
+    if (target && target.event) {
+      var _target$event;
+      setEventId(target === null || target === void 0 ? void 0 : (_target$event = target.event) === null || _target$event === void 0 ? void 0 : _target$event.id);
+    }
+    setFilters(undefined);
+    setIsAdd(false);
+    setCount(0);
+    onChangeHandle(target, undefined);
+  };
+  useEffect(function () {
+    setAttrTargetCount(count);
+  }, [count]);
+  var onChangeHandle = function onChangeHandle(reason, filterData) {
+    if (props.onChange) {
+      var _reason$event;
+      if (!reason || !reason.event || !((_reason$event = reason.event) === null || _reason$event === void 0 ? void 0 : _reason$event.id)) return;
+      var event = reason.event;
+      var data = {
+        eventId: event === null || event === void 0 ? void 0 : event.id,
+        eventName: (event === null || event === void 0 ? void 0 : event.alias) || (event === null || event === void 0 ? void 0 : event.name),
+        filters: filterData
+      };
+      props.onChange(data);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "target-events-box"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "selector-content"
+  }, /*#__PURE__*/React.createElement(BizEventSelector, {
+    showAllEvent: false,
+    showBuiltInTarget: false,
+    popupContainer: false,
+    defaultSelectAble: false,
+    defaultValue: bizEventSelectorDefaultValue,
+    onChange: onChangeTarget,
+    selectList: eventIdList,
+    placeholder: "\u8BF7\u9009\u62E9\u4E8B\u4EF6"
+  }), /*#__PURE__*/React.createElement(Select, {
+    defaultValue: 1,
+    style: {
+      width: 88
+    },
+    options: [{
+      value: 1,
+      label: '总次数'
+    }],
+    suffixIcon: /*#__PURE__*/React.createElement(IconFont, {
+      type: "xiangxia",
+      style: {
+        color: '#021429'
+      }
+    })
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: '添加属性筛选'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    className: "".concat(count >= 5 || (targetData === null || targetData === void 0 ? void 0 : (_targetData$event2 = targetData.event) === null || _targetData$event2 === void 0 ? void 0 : _targetData$event2.id) === -100 && Object.keys(bizEventSelectorDefaultValue).length <= 0 ? 'disable' : ''),
+    type: "shaixuan",
+    onClick: function onClick() {
+      return onAdd();
+    }
+  }))), /*#__PURE__*/React.createElement("div", null, (filters || isAdd) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(count > 0 ? 'attr-box-show' : '')
+  }, /*#__PURE__*/React.createElement(BizAttrConditionGroup, {
+    ref: conditionRef,
+    value: undefined,
+    onlyAnd: true,
+    enableEventProp: true,
+    enableDelete: true,
+    eventIdList: [eventId],
+    onChange: onChangeFilters,
+    onConditionsCount: setCount
+  }))));
+};
+export default TargetEvent;

package/es/modules/searchPanel/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SearchPanelTypes } from './types';
+import './styles/index.less';
+export declare const classPrefix = "form-box";
+declare const SearchPanel: React.ForwardRefExoticComponent<SearchPanelTypes.Props & React.RefAttributes<any>>;
+export default SearchPanel;

package/es/modules/searchPanel/index.js

@@ -0,0 +1,398 @@
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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 = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useContext, useEffect, useState, useImperativeHandle } from 'react';
+import { IconFont, BizGlobalDataContext } from '@zgfe/business-lib';
+import { Button, Form, Skeleton, Tooltip, Checkbox, Select, InputNumber } from 'antd';
+import { initTarget } from '../../constants/initData';
+import SearchContent from './components/index';
+import GlobalAttribute from './components/globalAttribute';
+import './styles/index.less';
+import _ from 'lodash';
+import { targetChangeCallback, operableOrNotHandle } from './utils';
+import { searchFields, attributionTypeTooltips } from '../../constants/fields';
+import { AttributableContext } from '../../types';
+export var classPrefix = 'form-box';
+var SearchPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var defaultValue = props.defaultValue,
+    resetTime = props.resetTime;
+  var _useContext = useContext(AttributableContext),
+    buttonDisable = _useContext.buttonDisable,
+    setButtonDisable = _useContext.setButtonDisable,
+    searching = _useContext.searching;
+  var _useContext2 = useContext(BizGlobalDataContext),
+    eventGroupList = _useContext2.eventGroupList;
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    otherEvent = _useState2[0],
+    setOtherEvent = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    formData = _useState6[0],
+    setFormData = _useState6[1];
+  var _useState7 = useState([]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    eventIdList = _useState8[0],
+    setEventIdList = _useState8[1];
+  useEffect(function () {
+    if (formData) {
+      var targetData = targetChangeCallback(formData, eventIdList, eventGroupList);
+      form.setFieldsValue(targetData);
+    }
+  }, [eventIdList, formData]);
+  var _useState9 = useState(-1),
+    _useState10 = _slicedToArray(_useState9, 2),
+    windowCnt = _useState10[0],
+    setWindowCnt = _useState10[1];
+  var _useState11 = useState('day'),
+    _useState12 = _slicedToArray(_useState11, 2),
+    windowTypeUnit = _useState12[0],
+    setwindowTypeUnit = _useState12[1];
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    attrTargetCount = _useState14[0],
+    setAttrTargetCount = _useState14[1];
+  var _useState15 = useState({}),
+    _useState16 = _slicedToArray(_useState15, 2),
+    attrSourceCount = _useState16[0],
+    setAttrSourceCount = _useState16[1];
+  var _useState17 = useState({}),
+    _useState18 = _slicedToArray(_useState17, 2),
+    mincePropCount = _useState18[0],
+    setMincePropCount = _useState18[1];
+  var _useState19 = useState(0),
+    _useState20 = _slicedToArray(_useState19, 2),
+    attrGlobalCount = _useState20[0],
+    setAttrGlobalCount = _useState20[1];
+  var getSelectEventIdList = function getSelectEventIdList(data, type, eList) {
+    if (data[type]) {
+      data[type].forEach(function (target) {
+        if (target && target.eventId && target.eventId !== -100) {
+          eList.push(target.eventId);
+        }
+      });
+    }
+    return eList;
+  };
+  var setSelectEventIdList = function setSelectEventIdList(data) {
+    var eList = [];
+    getSelectEventIdList(data, 'targetFilters', eList);
+    getSelectEventIdList(data, 'sourceFilters', eList);
+    setEventIdList(eList);
+  };
+  var _useState21 = useState(false),
+    _useState22 = _slicedToArray(_useState21, 2),
+    reset = _useState22[0],
+    setReset = _useState22[1];
+  useEffect(function () {
+    if (defaultValue && reset !== null) {
+      var data = defaultValue;
+      if (reset) {
+        data = {
+          targetFilters: initTarget,
+          sourceFilters: initTarget
+        };
+        setReset(null);
+      }
+      setFormData(data);
+      setSelectEventIdList(data);
+      if (data.windowType !== undefined) {
+        setOtherEvent(data.otherEvent);
+        setWindowCnt(data.windowCnt);
+        setwindowTypeUnit(data.windowType);
+        data.windowCnt == -1 ? setWindowType(1) : setWindowType(2);
+      }
+      var _attrCount = {};
+      var _sourceCount = {};
+      data.sourceFilters.map(function (item) {
+        if (item.attributionSubdivision != undefined) {
+          _attrCount[item.eventId] = 1;
+        }
+        if (item.filters != undefined) {
+          _sourceCount[item.eventId] = item.filters.conditions.length;
+        }
+      });
+      setMincePropCount(_attrCount);
+      setAttrSourceCount(_sourceCount);
+    }
+    setLoading(false);
+  }, [reset]);
+  var onChange = function onChange(_changedValues, allValues) {
+    setFormData(allValues);
+    setSelectEventIdList(_.cloneDeep(allValues));
+  };
+  useEffect(function () {
+    if (formData) {
+      setButtonDisable(operableOrNotHandle(formData, attrSourceCount, attrTargetCount, mincePropCount, attrGlobalCount));
+    }
+  }, [formData, attrSourceCount, attrTargetCount, mincePropCount, attrGlobalCount]);
+  var onFinish = function onFinish(isFetchRequest) {
+    form.validateFields().then(function (res) {
+      res.otherEvent = otherEvent;
+      res.windowCnt = windowCnt;
+      res.windowType = windowType === 1 ? 'day' : windowTypeUnit;
+      props.onChange(res, isFetchRequest);
+    }).catch(function (e) {
+      console.log('表单检验失败', e);
+    });
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      onGetSearchData: function onGetSearchData() {
+        onFinish(false);
+      }
+    };
+  });
+  var otherEventChange = function otherEventChange(e) {
+    setOtherEvent(e.target.checked);
+  };
+  var onReset = function onReset() {
+    setButtonDisable(true);
+    setReset(true);
+    setTimeout(function () {
+      form.resetFields();
+      resetTime && resetTime();
+    }, 20);
+    setWindowType(1);
+    setOtherEvent(false);
+  };
+  var _useState23 = useState(1),
+    _useState24 = _slicedToArray(_useState23, 2),
+    windowType = _useState24[0],
+    setWindowType = _useState24[1];
+  var attributionTypeTooltip = function attributionTypeTooltip(type) {
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      overlayClassName: "attribution-type-tooltip ".concat(type === 2 || type === 3 ? 'attribution-type-tooltip-distance' : ''),
+      placement: "right",
+      getPopupContainer: function getPopupContainer() {
+        return document.getElementById('attribution-type');
+      },
+      title: attributionTypeTooltips[type].title
+    }, /*#__PURE__*/React.createElement("p", null, attributionTypeTooltips[type].text));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "".concat(classPrefix, "-bottom-form-title")
+  }, "\u9009\u62E9\u4E8B\u4EF6"), /*#__PURE__*/React.createElement(Skeleton, {
+    loading: loading,
+    active: true,
+    paragraph: {
+      rows: 4
+    }
+  }, /*#__PURE__*/React.createElement(Form, {
+    form: form,
+    layout: "vertical",
+    initialValues: formData,
+    onValuesChange: onChange
+  }, searchFields.map(function (item) {
+    if (item.type === 'globalFilters') {
+      return /*#__PURE__*/React.createElement(Form.Item, {
+        key: item.key,
+        className: "".concat(classPrefix, "-form-item")
+      }, /*#__PURE__*/React.createElement(Form.Item, {
+        className: "".concat(classPrefix, "-title global-attr")
+      }, item.label), /*#__PURE__*/React.createElement(Form.Item, {
+        className: "".concat(classPrefix, "-item"),
+        name: item.name
+      }, /*#__PURE__*/React.createElement(GlobalAttribute, {
+        max: item.max,
+        eventIdList: eventIdList,
+        setAttrGlobalCount: setAttrGlobalCount
+      })));
+    }
+    return /*#__PURE__*/React.createElement(Form.List, {
+      name: item.name,
+      key: item.key
+    }, function (fields, _ref, index) {
+      var add = _ref.add,
+        remove = _ref.remove;
+      return /*#__PURE__*/React.createElement(Form.Item, {
+        className: "".concat(classPrefix, "-form-item"),
+        key: "".concat(item.key, "-item-").concat(index)
+      }, /*#__PURE__*/React.createElement(Form.Item, {
+        className: "".concat(classPrefix, "-title")
+      }, item.required && /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: 'red'
+        }
+      }, "* "), item.label, /*#__PURE__*/React.createElement(Tooltip, {
+        placement: "right",
+        title: item.tips
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        type: "tishiicon"
+      }))), fields.map(function (field, index) {
+        return /*#__PURE__*/React.createElement(Form.Item, _objectSpread(_objectSpread({}, field), {}, {
+          key: field.key,
+          className: "".concat(classPrefix, "-item")
+        }), /*#__PURE__*/React.createElement(SearchContent, {
+          fieldsLength: fields.length,
+          type: item.type,
+          key: field.key,
+          eventIdList: eventIdList,
+          onDelete: function onDelete() {
+            return remove(index);
+          },
+          setAttrTargetCount: setAttrTargetCount,
+          setAttrSourceCount: setAttrSourceCount,
+          setMincePropCount: setMincePropCount,
+          attrSourceCount: attrSourceCount,
+          mincePropCount: mincePropCount,
+          formData: formData
+        }));
+      }), fields.length < item.max && /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-add"),
+        onClick: function onClick() {
+          return add();
+        }
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        className: "".concat(classPrefix, "-add-icon"),
+        type: "tianjia1"
+      }), item.addLabel));
+    });
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-otherEvent")
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: otherEvent,
+    onChange: otherEventChange
+  }, "\u4E5F\u8BA1\u7B97\u5176\u4ED6\u8F6C\u5316\u4E8B\u4EF6"), /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "right",
+    title: "\u5B8C\u6210\u76EE\u6807\u4E8B\u4EF6\u524D\u6CA1\u6709\u53D1\u751F\u4EFB\u4F55\u5F85\u5F52\u56E0\u4E8B\u4EF6\uFF0C\u5219\u6570\u636E\u8BB0\u4E3A\u5176\u4ED6\u8F6C\u5316\u4E8B\u4EF6"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "tishiicon"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    className: "".concat(classPrefix, "-bottom-form-title")
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'red'
+    }
+  }, "* "), "\u5F52\u56E0\u6A21\u578B"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-bottom-form"),
+    id: "attribution-type"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "p"
+  }, "\u5206\u6790\u6A21\u578B"), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "attributionType",
+    rules: [{
+      required: true,
+      message: '请选择分析模型'
+    }]
+  }, /*#__PURE__*/React.createElement(Select, {
+    className: "attribution-type",
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById('attribution-type');
+    },
+    placeholder: "\u8BF7\u9009\u62E9",
+    style: {
+      width: 208
+    },
+    suffixIcon: /*#__PURE__*/React.createElement(IconFont, {
+      type: "xiangxia",
+      style: {
+        color: '#021429'
+      }
+    }),
+    options: [{
+      value: 1,
+      label: attributionTypeTooltip(0)
+    }, {
+      value: 2,
+      label: attributionTypeTooltip(1)
+    }, {
+      value: 3,
+      label: attributionTypeTooltip(2)
+    }, {
+      value: 4,
+      label: attributionTypeTooltip(3)
+    }]
+  })), /*#__PURE__*/React.createElement("p", {
+    className: "p"
+  }, "\u5F52\u56E0\u7A97\u53E3\u671F", /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "right",
+    title: "\u8DDD\u79BB\u76EE\u6807\u4E8B\u4EF6\u7684\u8F6C\u5316\u65F6\u95F4\u8303\u56F4"
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "tishiicon"
+  }))), /*#__PURE__*/React.createElement(Select, {
+    className: "windowType",
+    value: windowType,
+    style: {
+      width: 208
+    },
+    suffixIcon: /*#__PURE__*/React.createElement(IconFont, {
+      type: "xiangxia",
+      style: {
+        color: '#021429'
+      }
+    }),
+    onChange: function onChange(e) {
+      setWindowType(e);
+      e === 1 ? setWindowCnt(-1) : setWindowCnt(1);
+    },
+    options: [{
+      value: 1,
+      label: '当天'
+    }, {
+      value: 2,
+      label: '自定义'
+    }]
+  }), windowType === 2 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputNumber, {
+    className: "windowCnt",
+    style: {
+      width: 80
+    },
+    value: windowCnt,
+    min: 1,
+    max: 365,
+    precision: 0,
+    onChange: function onChange(e) {
+      setWindowCnt(Number(e));
+    }
+  }), /*#__PURE__*/React.createElement(Select, {
+    value: windowTypeUnit,
+    style: {
+      width: 80
+    },
+    onChange: function onChange(e) {
+      return setwindowTypeUnit(e);
+    },
+    suffixIcon: /*#__PURE__*/React.createElement(IconFont, {
+      type: "xiangxia",
+      style: {
+        color: '#021429'
+      }
+    }),
+    options: [{
+      value: 'day',
+      label: '天'
+    }, {
+      value: 'hour',
+      label: '小时'
+    }]
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-search-button-box")
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: onReset
+  }, "\u91CD\u7F6E"), /*#__PURE__*/React.createElement(Button, {
+    className: "".concat(searching || buttonDisable ? 'disable' : ''),
+    disabled: searching || buttonDisable,
+    type: "primary",
+    onClick: function onClick() {
+      return onFinish(true);
+    }
+  }, "\u67E5\u8BE2")))));
+});
+export default SearchPanel;