@zgfe/modules-dm 1.0.1

package/es/modules/dataCollection/collectionEventList.js

@@ -0,0 +1,317 @@
+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 { BizGlobalDataContext, IconFont } from '@zgfe/business-lib';
+import { Input, Button, Select, Modal, message } from 'antd';
+import request from '../../utils/ajax';
+import apis from '../../constants/api';
+import React, { useEffect, useState, useContext } from 'react';
+import './styles/index.less';
+import TablePlus from './tablePlus';
+import CollectionAttributeList from './collectionAttributeList';
+
+var CollectionEventList = function CollectionEventList(props) {
+  var classPrefix = 'event-list';
+
+  var _useContext = useContext(BizGlobalDataContext),
+      currentApp = _useContext.currentApp,
+      isDemo = _useContext.isDemo;
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      total = _useState2[0],
+      setTotal = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      totalBasics = _useState4[0],
+      setTotalBasics = _useState4[1]; // 加载中
+
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      loading = _useState6[0],
+      setLoading = _useState6[1]; // 渲染数据
+
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      tableHandleData = _useState8[0],
+      setTableHandleData = _useState8[1]; // 原数据
+
+
+  var _useState9 = useState([]),
+      _useState10 = _slicedToArray(_useState9, 2),
+      tableHandleDataBasics = _useState10[0],
+      setTableHandleDataBasics = _useState10[1]; // 分组select数据
+
+
+  var _useState11 = useState([]),
+      _useState12 = _slicedToArray(_useState11, 2),
+      groupOptions = _useState12[0],
+      setgroupOptions = _useState12[1]; // 分组元素有任意一个收藏，筛选收藏时保留分组标题
+
+
+  var markTypeHandle = function markTypeHandle(item) {
+    var _markTypeFlag = 0;
+    item.eventList.map(function (_item) {
+      _item.mark_type == 1 ? _markTypeFlag = 1 : null;
+    });
+    return _markTypeFlag;
+  };
+
+  var dataFinish = function dataFinish(data) {
+    var _tempArr = [];
+    var _tempGroupOptions = [{
+      value: -999,
+      label: '所有分组'
+    }];
+    var _tempTotal = 0;
+    data.map(function (item, index) {
+      _tempArr.push({
+        key: index,
+        groupId: item.groupId,
+        groupName: item.groupName,
+        event_name: '',
+        alias_name: '',
+        insert_time: '',
+        last_insert_time: '',
+        event_hidden: 0,
+        is_stop: 0,
+        event_attrs: [],
+        event_id: index,
+        is_delete: 0,
+        mark_type: markTypeHandle(item)
+      });
+
+      _tempGroupOptions.push({
+        value: item.groupId,
+        label: item.groupName == null ? '未分组' : item.groupName
+      });
+
+      item.eventList.map(function (_item, _index) {
+        _item._groupId = item.groupId;
+        _item.key = index + '-' + _index;
+
+        if (_item.is_delete == 0) {
+          _tempArr.push(_item);
+
+          _tempTotal++;
+        }
+      });
+    });
+    setTotal(_tempTotal);
+    setTotalBasics(_tempTotal);
+    setgroupOptions(_tempGroupOptions);
+    setTableHandleData(_tempArr);
+    setTableHandleDataBasics(_tempArr);
+    setLoading(false);
+  };
+
+  var queryList = function queryList() {
+    request(apis.queryCollectionEventList, {
+      method: 'post',
+      params: {
+        app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        platform: 0,
+        is_all: true
+      }
+    }).then(function (res) {
+      if (!res) throw new Error();
+      dataFinish(res.data);
+    }).catch(function (err) {
+      console.error('查询列表失败', err);
+    }).finally(function () {});
+  }; // 初始化列表
+
+
+  useEffect(function () {
+    queryList();
+  }, []); // 控制修改分组名弹框 显示隐藏
+
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      eventNameShow = _useState14[0],
+      setEventNameShow = _useState14[1];
+
+  var _useState15 = useState(''),
+      _useState16 = _slicedToArray(_useState15, 2),
+      eventNameInput = _useState16[0],
+      setEventNameInput = _useState16[1]; // 创建事件分组
+
+
+  var createEventGroup = function createEventGroup() {
+    request(apis.upsertEventGroup, {
+      method: 'post',
+      data: {
+        eventGroupName: eventNameInput,
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        platform: 0
+      }
+    }).then(function (res) {
+      if (res) {
+        message.success('创建成功');
+        setEventNameShow(false);
+        queryList();
+      }
+    }).catch(function (err) {
+      message.success('创建失败');
+    }).finally(function () {});
+  }; // 筛选：显示状态 | 采集状态
+
+
+  var eventActiveFilter = function eventActiveFilter(e, type) {
+    filterHandlePublic(e == -1, type, e);
+  }; // 筛选分组
+
+
+  var handleSelectChange = function handleSelectChange(e) {
+    filterHandlePublic(e == -999, 'groupId', e);
+  }; // 筛选事件
+
+
+  var eventNameChange = function eventNameChange(e) {
+    var _value = e.currentTarget.value;
+    filterHandlePublic(_value == '', 'event_name', _value);
+  }; // 筛选收藏
+
+
+  var markTypeFilter = function markTypeFilter(markActive) {
+    filterHandlePublic(!markActive, 'mark_type');
+  }; // 处理各种筛选数据
+
+
+  var filterHandlePublic = function filterHandlePublic(filterFlag, type, value) {
+    if (filterFlag) {
+      // 取消筛选
+      setTotal(totalBasics);
+      setTableHandleData(tableHandleDataBasics);
+    } else {
+      // 执行筛选
+      var _tableHandleData = [];
+      var _total = 0,
+          totalFlag = false; // 判断不同type的筛选条件
+
+      var _judgeFun = function _judgeFun(item) {
+        switch (type) {
+          case 'mark_type':
+            return item.mark_type == 1;
+
+          case 'event_name':
+            return item.event_name.indexOf(value) != -1;
+
+          case 'groupId':
+            return item._groupId == value || item.groupId == value;
+
+          case 'event_hidden':
+            return item.event_hidden == value || item.groupId != undefined;
+
+          case 'is_stop':
+            return item.is_stop == value || item.groupId != undefined;
+        }
+      };
+
+      tableHandleDataBasics.map(function (item) {
+        if (_judgeFun(item)) {
+          _tableHandleData.push(item);
+
+          if (type == 'mark_type' || type == 'event_hidden' || type == 'is_stop') {
+            totalFlag = true;
+            item.groupId == undefined ? _total++ : null;
+          }
+        }
+      }); // 不同type的total设置
+
+      setTotal(totalFlag ? _total : type == 'groupId' ? _tableHandleData.length - 1 : _tableHandleData.length);
+      setTableHandleData(_tableHandleData);
+    }
+  };
+
+  var _useState17 = useState(false),
+      _useState18 = _slicedToArray(_useState17, 2),
+      eventAttrListShow = _useState18[0],
+      setEventAttrListShow = _useState18[1];
+
+  var _useState19 = useState(),
+      _useState20 = _slicedToArray(_useState19, 2),
+      eventAttrsData = _useState20[0],
+      setEventAttrsData = _useState20[1];
+
+  var eventAttrDataHandle = function eventAttrDataHandle(data) {
+    setEventAttrsData(data);
+    setEventAttrListShow(true);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement("div", {
+    className: eventAttrListShow ? 'hidden-box' : ''
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-top-box")
+  }, groupOptions.length > 0 && /*#__PURE__*/React.createElement(Select, {
+    defaultValue: -999,
+    className: "top-select",
+    onChange: handleSelectChange,
+    options: groupOptions
+  }), /*#__PURE__*/React.createElement(Input, {
+    className: "top-input",
+    onChange: eventNameChange,
+    placeholder: "\u641C\u7D22\u4E8B\u4EF6\u540D\u79F0",
+    prefix: /*#__PURE__*/React.createElement(IconFont, {
+      type: "sousuo"
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "top-total"
+  }, "\u5171", /*#__PURE__*/React.createElement("span", null, total), "\u6761"), /*#__PURE__*/React.createElement(Button, {
+    className: "top-button",
+    type: "primary",
+    shape: "round",
+    icon: /*#__PURE__*/React.createElement(IconFont, {
+      style: {
+        marginRight: '5px'
+      },
+      type: "tianjia"
+    }),
+    onClick: function onClick() {
+      return setEventNameShow(true);
+    }
+  }, "\u521B\u5EFA\u4E8B\u4EF6\u5206\u7EC4")), /*#__PURE__*/React.createElement(TablePlus, {
+    loading: loading,
+    tableHandleData: tableHandleData,
+    Refresh: queryList,
+    eventActiveFilter: eventActiveFilter,
+    markTypeFilter: markTypeFilter,
+    isOpen: props.isOpen,
+    queryPlanData: props.queryPlanData,
+    eventAttrDataHandle: eventAttrDataHandle
+  })), eventAttrListShow && /*#__PURE__*/React.createElement(CollectionAttributeList, {
+    isOpen: props.isOpen,
+    queryPlanData: props.queryPlanData,
+    eventAttrsData: eventAttrsData,
+    source: "event",
+    setEventAttrListShow: setEventAttrListShow
+  }), /*#__PURE__*/React.createElement(Modal, {
+    title: "\u521B\u5EFA\u5206\u7EC4",
+    visible: eventNameShow,
+    onOk: createEventGroup,
+    onCancel: function onCancel() {
+      return setEventNameShow(false);
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "\u8BF7\u8F93\u5165\u5206\u7EC4\u540D",
+    onChange: function onChange(e) {
+      return setEventNameInput(e.currentTarget.value);
+    }
+  })));
+};
+
+export default CollectionEventList;

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DataCollection } from '@zgfe/modules-dm';
+import DemoWrapper from '../../../components/demo';
+export default (function () {
+  return /*#__PURE__*/React.createElement(DemoWrapper, null, /*#__PURE__*/React.createElement(DataCollection, null));
+});

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const DataCollection: React.FC;
+export default DataCollection;

package/es/modules/dataCollection/index.js

@@ -0,0 +1,97 @@
+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 { BizGlobalDataContext } from '@zgfe/business-lib';
+import { Tabs } from 'antd';
+import React, { useState, useContext, useEffect } from 'react';
+import request from '../../utils/ajax';
+import apis from '../../constants/api';
+import EventList from './collectionEventList';
+import UserAttributeList from './collectionAttributeList';
+
+var DataCollection = function DataCollection(props) {
+  var classPrefix = 'data-collection';
+
+  var _useContext = useContext(BizGlobalDataContext),
+      currentApp = _useContext.currentApp,
+      isDemo = _useContext.isDemo;
+
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      listTab = _useState2[0],
+      setListTab = _useState2[1];
+
+  var tabsChange = function tabsChange(activeKey) {
+    setListTab(Number(activeKey));
+  }; // 判断埋点方案开关是否打开
+
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var queryControlSwitch = function queryControlSwitch() {
+    request(apis.queryControlSwitch, {
+      method: 'get',
+      params: {
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
+      }
+    }).then(function (res) {
+      setIsOpen(res.data.isOpen);
+    });
+  }; // 不在方案中的数据
+
+
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      queryPlanData = _useState6[0],
+      setqueryPlanData = _useState6[1];
+
+  var queryPlan = function queryPlan() {
+    request(apis.queryPlan, {
+      method: 'post',
+      data: {
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
+      }
+    }).then(function (res) {
+      setqueryPlanData(res.data);
+    });
+  }; // 初始化数据
+
+
+  useEffect(function () {
+    queryControlSwitch();
+    queryPlan();
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    defaultActiveKey: "1",
+    onChange: tabsChange
+  }, /*#__PURE__*/React.createElement(Tabs.TabPane, {
+    tab: "\u4E8B\u4EF6\u5217\u8868",
+    key: "1"
+  }), /*#__PURE__*/React.createElement(Tabs.TabPane, {
+    tab: "\u7528\u6237\u5C5E\u6027\u5217\u8868",
+    key: "2"
+  })), listTab == 1 && /*#__PURE__*/React.createElement(EventList, {
+    isOpen: isOpen,
+    queryPlanData: queryPlanData
+  }), listTab == 2 && /*#__PURE__*/React.createElement(UserAttributeList, {
+    isOpen: isOpen,
+    queryPlanData: queryPlanData,
+    source: "user"
+  }));
+};
+
+export default DataCollection;

package/es/modules/dataCollection/styles/index.less

@@ -0,0 +1,249 @@
+@import '~@zgfe/business-lib/es/assets/styles/inner.less';
+.data-collection {
+  position: relative;
+  width: calc(100% - 264px);
+  height: 100%;
+  margin-top: 16px;
+  padding: 24px;
+  background: #fff;
+  .loading {
+    position: fixed;
+    top: 70%;
+    left: 55%;
+  }
+  .attr-list,
+  .event-list {
+    position: relative;
+    min-height: 550px;
+    &-back {
+      margin-bottom: 10px;
+      cursor: pointer;
+      user-select: none;
+    }
+    .hidden-box {
+      display: none;
+    }
+    .error-row {
+      color: #fb5547;
+    }
+    .fuzhi {
+      display: none;
+      margin-left: 10px;
+      color: #666;
+      font-size: 16px !important;
+      &:hover {
+        color: @primary-color;
+      }
+    }
+  }
+  .event-list {
+    &-top-box {
+      position: relative;
+      display: flex;
+      margin-bottom: 17px;
+      .top-select {
+        width: 264px;
+        margin-right: 12px;
+      }
+      .top-input {
+        width: 264px;
+        margin-right: 12px;
+        .ant-input-prefix {
+          margin-right: 20px;
+          transform: scale(1.5);
+        }
+      }
+      .top-total {
+        line-height: 32px;
+        span {
+          color: @primary-color;
+        }
+      }
+      .top-button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        line-height: 100%;
+      }
+    }
+    .table-plus {
+      &-table {
+        .ant-table {
+          .ant-table-tbody {
+            // height: 500px;
+          }
+          table {
+            border-collapse: collapse;
+          }
+        }
+        .ant-table-cell-row-hover {
+          .bsicon {
+            display: inline-block !important;
+          }
+        }
+        .alias_name {
+          border: none;
+        }
+        .ant-input:focus,
+        .ant-input-focused {
+          background-color: #fff !important;
+          border-bottom: 1px solid @primary-color;
+          border-radius: 0 !important;
+          box-shadow: none !important;
+        }
+        .group-row {
+          border-top: 12px solid #f5f5f5;
+          td {
+            padding: 6px 16px;
+          }
+          :last-child {
+            padding: 0;
+          }
+          td:not(:first-child, :last-child) > * {
+            display: none;
+          }
+        }
+        .group-box {
+          display: flex;
+          width: 500px;
+          line-height: 30px;
+          .ant-input {
+            width: 150px;
+            border: none;
+          }
+          .bsicon {
+            margin-right: 4px;
+            font-size: 18px !important;
+          }
+          .group-text {
+            display: -webkit-box;
+            width: 120px;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+          }
+          .group-handle {
+            margin-left: 30px;
+            cursor: pointer;
+            user-select: none;
+          }
+        }
+        .edit-del {
+          .bsicon {
+            margin-left: 15px;
+            font-size: 16px !important;
+            cursor: pointer;
+          }
+          :first-child:hover {
+            color: @primary-color;
+          }
+          :last-child:hover {
+            color: red;
+          }
+        }
+        .event_attrs {
+          .bsicon {
+            margin-left: 12px;
+            font-size: 16px !important;
+            &:hover {
+              color: @primary-color;
+            }
+          }
+        }
+        .event_name {
+          display: flex;
+          .event_name-text {
+            display: -webkit-box;
+            width: 120px;
+            overflow: hidden;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 1;
+          }
+          .copy-text {
+            display: none;
+            margin-left: 10px;
+            font-size: 16px !important;
+          }
+          .copy-text:hover {
+            color: @primary-color;
+          }
+          .collect-icon,
+          .collect-icon-active {
+            margin: 0 4px;
+            font-size: 16px !important;
+          }
+          .collect-icon {
+            color: #999;
+            opacity: 0;
+          }
+          .collect-icon:hover {
+            color: #f2d074;
+          }
+          .collect-icon-active {
+            color: #fd9f41;
+          }
+          .ant-checkbox-wrapper {
+            align-items: center;
+            margin-top: -6px;
+          }
+        }
+        .ant-table-row:hover {
+          .collect-icon {
+            opacity: 1;
+          }
+          .copy-text {
+            display: block;
+          }
+        }
+        .set {
+          color: @primary-color;
+          text-align: center;
+          cursor: pointer;
+          user-select: none;
+        }
+      }
+    }
+  }
+  .attr-list {
+    .attr-name {
+      display: flex;
+      .attr-name-text {
+        display: -webkit-box;
+        width: 120px;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+      }
+      .tishiicon {
+        margin-right: 6px;
+      }
+      &:hover {
+        .fuzhi {
+          display: inline-block;
+        }
+      }
+    }
+    .attr_alias_name {
+      cursor: pointer;
+      user-select: none;
+      &:hover {
+        color: @primary-color;
+      }
+    }
+    .button-box {
+      display: flex;
+      margin-bottom: 10px;
+      .ant-btn {
+        margin-right: 20px;
+      }
+      .bsicon {
+        margin-right: 6px;
+      }
+    }
+    .clearData {
+      text-align: right;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+}