@zgfe/modules-attribution 1.0.1-alpha.0

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

@@ -0,0 +1,149 @@
+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 _ from 'lodash';
+import { Select, Tooltip, message } from 'antd';
+var TargetEvent = function TargetEvent(props) {
+  var value = props.value,
+    verify = props.verify,
+    setAttrTargetCount = props.setAttrTargetCount,
+    showOverview = props.showOverview;
+  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];
+  useEffect(function () {
+    if (value) {
+      var _value$filters;
+      console.log(123);
+      setFilters(value.filters);
+      if ((_value$filters = value.filters) === null || _value$filters === void 0 ? void 0 : _value$filters.conditions) {
+        setCount(value.filters.conditions.length);
+      }
+    }
+  }, []);
+  useEffect(function () {
+    console.log('verify', verify);
+  }, [verify]);
+  var onChangeFilters = function onChangeFilters(data) {
+    console.log('归因事件-2', data);
+    setFilters(data);
+    onChangeHandle(targetData, data);
+  };
+  var onAdd = function onAdd() {
+    if (targetData === undefined) {
+      message.error('请先选择目标事件');
+      return;
+    }
+    if (count >= 5) {
+      message.error('最多可添加5条属性筛选');
+      return;
+    }
+    setIsAdd(true);
+    setTimeout(function () {
+      conditionRef.current.add();
+    }, 0);
+  };
+  var onChangeTarget = function onChangeTarget(target) {
+    var _target$event;
+    console.log('目标事件变更', target);
+    setTargetData(target);
+    setEventId(target === null || target === void 0 ? void 0 : (_target$event = target.event) === null || _target$event === void 0 ? void 0 : _target$event.id);
+    var filterData = _.cloneDeep(filters);
+    onChangeHandle(target, filterData);
+  };
+  useEffect(function () {
+    console.log(1111111111, targetData);
+  }, [targetData]);
+  useEffect(function () {
+    console.log('判断提交按钮是否可点击-123', count);
+    setAttrTargetCount(count);
+    setTimeout(function () {
+      onChangeHandle(targetData, filters);
+    }, 0);
+  }, [count]);
+  var onChangeHandle = function onChangeHandle(reason, filterData) {
+    console.log('变动了', 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("div", {
+    className: "".concat(verify && targetData === undefined ? 'verify-error' : '')
+  }, /*#__PURE__*/React.createElement(BizEventSelector, {
+    showBuiltInTarget: true,
+    showAllEvent: showOverview,
+    popupContainer: false,
+    defaultSelectAble: false,
+    onChange: onChangeTarget
+  })), /*#__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 === undefined ? 'disable' : ''),
+    type: "shaixuan",
+    onClick: function onClick() {
+      return onAdd();
+    }
+  }))), verify && targetData === undefined && /*#__PURE__*/React.createElement("div", {
+    className: "error-tips"
+  }, "\u8BF7\u9009\u62E9\u76EE\u6807\u4E8B\u4EF6"), /*#__PURE__*/React.createElement("div", null, (filters || isAdd) && /*#__PURE__*/React.createElement(BizAttrConditionGroup, {
+    ref: conditionRef,
+    value: filters,
+    enableEventProp: true,
+    enableDelete: true,
+    eventIdList: [eventId],
+    onChange: onChangeFilters,
+    onConditionsCount: setCount
+  })));
+};
+export default TargetEvent;

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

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

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

@@ -0,0 +1,28 @@
+import { DemoWrapper } from '@zgfe/business-lib';
+import React from 'react';
+import SearchPanel from '..';
+var defaultValue = {
+  targets: [{
+    type: 'event',
+    alias: '事件概览',
+    eventId: -100,
+    eventName: '事件概览',
+    eventGroupId: 0,
+    analysisDimension: {
+      analysisIndex: 'number'
+    }
+  }],
+  userGroup: [0]
+};
+export default (function () {
+  var onChange = function onChange(data) {
+    console.log(data);
+  };
+  return /*#__PURE__*/React.createElement(DemoWrapper, {
+    needMeta: true,
+    defaultApp: 177
+  }, /*#__PURE__*/React.createElement(SearchPanel, {
+    defaultValue: defaultValue,
+    onChange: onChange
+  }));
+});

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 = "mi-left-form";
+declare const SearchPanel: React.FC<SearchPanelTypes.Props>;
+export default SearchPanel;

package/es/modules/searchPanel/index.js

@@ -0,0 +1,316 @@
+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 } from 'react';
+import { IconFont, BizGlobalDataContext } from '@zgfe/business-lib';
+import { Button, Form, Skeleton, Tooltip, Checkbox, Select, InputNumber } from 'antd';
+import SearchContent from './components';
+import GlobalAttribute from './components/globalAttribute';
+import './styles/index.less';
+import _ from 'lodash';
+import { targetChangeCallback, submitButtonDisableHandle, removeEmptyValue, verifyHandle } from './utils';
+import { initTarget } from '../../constants/initData';
+import { searchFields } from '../../constants/fields';
+import { AttributableContext } from '../../types';
+export var classPrefix = 'mi-left-form';
+var SearchPanel = function SearchPanel(props) {
+  var defaultValue = props.defaultValue;
+  var _useContext = useContext(AttributableContext),
+    buttonDisable = _useContext.buttonDisable,
+    setButtonDisable = _useContext.setButtonDisable;
+  console.log('defaultValue', defaultValue);
+  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([-100]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    eventIdList = _useState8[0],
+    setEventIdList = _useState8[1];
+  var _useContext2 = useContext(BizGlobalDataContext),
+    eventGroupList = _useContext2.eventGroupList;
+  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(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    attrSourceCount = _useState16[0],
+    setAttrSourceCount = _useState16[1];
+  useEffect(function () {
+    if (defaultValue) {
+      var data = defaultValue;
+      console.log('初始化', data);
+      setFormData(data);
+      var eList = [];
+      defaultValue.targetFilters.forEach(function (target) {
+        if (target && target.eventId) {
+          eList.push(target.eventId);
+        }
+      });
+      setEventIdList(eList);
+    }
+    setLoading(false);
+  }, []);
+  var onChange = function onChange(_changedValues, allValues) {
+    console.log(666, allValues);
+    var data = _.cloneDeep(allValues);
+    if (_changedValues.targetFilters) {
+      var eList = [];
+      if (allValues.targetFilters.length) {
+        allValues.targetFilters.forEach(function (target) {
+          if (target && target.eventId) {
+            eList.push(target.eventId);
+          }
+        });
+      } else {
+        data.targetFilters = initTarget;
+        eList = [-100];
+      }
+      console.log('999', eList);
+      setEventIdList(eList);
+      var targetData = targetChangeCallback(data, eList, eventGroupList);
+      form.setFieldsValue(targetData);
+    }
+    setButtonDisable(submitButtonDisableHandle(allValues, attrSourceCount, attrTargetCount));
+  };
+  var attrChange = function attrChange(e) {
+    var reason = form.getFieldValue('reason');
+    console.log('细分属性变化：', e, reason);
+  };
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray(_useState17, 2),
+    verify = _useState18[0],
+    setVerify = _useState18[1];
+  var onFinish = function onFinish() {
+    setVerify(true);
+    form.validateFields().then(function (res) {
+      if (verifyHandle(res)) {
+        console.log('表单检验通过', res);
+        res.otherEvent = otherEvent;
+        res.windowCnt = windowCnt;
+        res.windowType = windowType === 1 ? 'day' : windowTypeUnit;
+        var finalData = removeEmptyValue(res);
+        console.log(123123, finalData);
+        props.onChange(finalData);
+      }
+    }).catch(function (e) {
+      console.log('表单检验失败', e);
+    });
+  };
+  var otherEventChange = function otherEventChange(e) {
+    setOtherEvent(e.target.checked);
+  };
+  var onReset = function onReset() {
+    setButtonDisable(true);
+    form.resetFields();
+    setVerify(false);
+    setWindowType(1);
+  };
+  var _useState19 = useState(1),
+    _useState20 = _slicedToArray(_useState19, 2),
+    windowType = _useState20[0],
+    setWindowType = _useState20[1];
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__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
+      }, /*#__PURE__*/React.createElement(Form.Item, {
+        className: "".concat(classPrefix, "-title")
+      }, item.label), /*#__PURE__*/React.createElement(Form.Item, {
+        className: "".concat(classPrefix, "-item"),
+        name: item.name
+      }, /*#__PURE__*/React.createElement(GlobalAttribute, {
+        max: item.max,
+        eventIdList: eventIdList
+      })));
+    }
+    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, {
+        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: "left",
+        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, {
+          type: item.type,
+          key: field.key,
+          attrChange: attrChange,
+          enableDelete: fields.length > 1,
+          eventIdList: eventIdList,
+          allValues: formData,
+          verify: verify,
+          onDelete: function onDelete() {
+            return remove(index);
+          },
+          setAttrTargetCount: setAttrTargetCount,
+          setAttrSourceCount: setAttrSourceCount
+        }));
+      }), 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, {
+    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")
+  }, /*#__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: "attributionType",
+    placeholder: "\u8BF7\u9009\u62E9",
+    style: {
+      width: 208
+    },
+    options: [{
+      value: 1,
+      label: '首次触点归因'
+    }, {
+      value: 2,
+      label: '末次触点归因'
+    }, {
+      value: 3,
+      label: '线性归因'
+    }, {
+      value: 4,
+      label: '位置归因'
+    }]
+  })), /*#__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
+    },
+    onChange: function onChange(e) {
+      return setWindowType(e);
+    },
+    options: [{
+      value: 1,
+      label: '当天'
+    }, {
+      value: 2,
+      label: '自定义'
+    }]
+  }), windowType === 2 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputNumber, {
+    className: "windowCnt",
+    style: {
+      width: 80
+    },
+    defaultValue: 1,
+    onChange: function onChange(e) {
+      return setWindowCnt(e);
+    }
+  }), /*#__PURE__*/React.createElement(Select, {
+    defaultValue: "day",
+    style: {
+      width: 80
+    },
+    onChange: function onChange(e) {
+      return setwindowTypeUnit(e);
+    },
+    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(buttonDisable ? 'disable' : ''),
+    disabled: buttonDisable,
+    type: "primary",
+    onClick: onFinish
+  }, "\u63D0\u4EA4")))));
+};
+export default SearchPanel;