@zgfe/modules-dm 1.0.2-dm.9 → 1.0.2-y.1

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

@@ -11,10 +11,11 @@ interface PropsType {
         event_attrs: [];
         event_id: number;
         event_name: string;
+        owner?: string;
     };
     isOpen: number;
     queryPlanData: queryPlanType;
-    setEventAttrListShow?: Function;
+    Refresh?: Function;
 }
 declare const CollectionAttributeList: React.FC<PropsType>;
 export default CollectionAttributeList;

package/es/modules/dataCollection/collectionAttributeList.js

@@ -22,6 +22,8 @@ import React, { useEffect, useState, useContext } from 'react';
 import './styles/index.less';
 import request from '../../utils/ajax';
 import apis from '../../constants/api';
+import { DmContext } from '../../store';
+import { getAppID } from '../../utils';
 
 var CollectionAttributeList = function CollectionAttributeList(props) {
   var classPrefix = 'attr-list';
@@ -38,10 +40,18 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
       loading = _useState2[0],
-      setLoading = _useState2[1]; // 判断是否在方案中： 处理表格class添加异常样式 | 处理表格行异常信息展示, true异常
+      setLoading = _useState2[1];
+
+  var _useContext2 = useContext(DmContext),
+      state = _useContext2.state; // 判断是否在方案中： 处理表格class添加异常样式 | 处理表格行异常信息展示, true异常
 
 
   var rowRenderHandle = function rowRenderHandle(name) {
+    if (source == 'event' && eventAttrsData.owner == 'zg_abp') {
+      // 内置事件属性
+      return false;
+    }
+
     if (source == 'user') {
       var _queryPlanData$unexpe;
 
@@ -71,7 +81,7 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
     request(apis.getUserPropMeta, {
       method: 'post',
       params: {
-        app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        app_id: getAppID(currentApp),
         platform: 0
       }
     }).then(function (res) {
@@ -89,6 +99,7 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
   };
 
   useEffect(function () {
+    // console.log('eventAttrsData', eventAttrsData);
     if (source == 'user') {
       queryUserPropMeta();
     } else {
@@ -101,7 +112,7 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
       setUserAttrData(_temp);
       setLoading(false);
     }
-  }, [source]); // 复制属性名称
+  }, [source, eventAttrsData]); // 复制属性名称
 
   var copyAttrName = function copyAttrName(name) {
     navigator.clipboard.writeText(name);
@@ -127,12 +138,18 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
     request(source == 'event' ? apis.updateEventAttr : apis.updateUserAttr, {
       method: 'post',
       params: (_params = {
-        app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        app_id: getAppID(currentApp),
         attr_id: source == 'event' ? record.attr_id : record.id
       }, _defineProperty(_params, type, value), _defineProperty(_params, "event_id", source == 'event' ? eventAttrsData === null || eventAttrsData === void 0 ? void 0 : eventAttrsData.event_id : null), _params)
     }).then(function (res) {
       if (res) {
         message.success('修改成功');
+
+        if (source == 'user') {
+          queryUserPropMeta();
+        }
+
+        state.updateEventMetas && state.updateEventMetas(); // 更新store
       }
     }).catch(function (err) {
       message.error('修改失败');
@@ -171,15 +188,38 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
     dataIndex: 'alias_name',
     width: 180,
     render: function render(text, record, index) {
-      return /*#__PURE__*/React.createElement(Input, {
-        className: "alias_name",
-        placeholder: "\u7F16\u8F91\u522B\u540D",
-        defaultValue: record.alias_name,
-        onFocus: aliasFocus,
-        onBlur: function onBlur(e) {
-          attrChangeHandle(e.currentTarget.value, record, 'alias_name');
-        }
-      });
+      if (!record.alias_name) {
+        return /*#__PURE__*/React.createElement(Input, {
+          className: "alias_name",
+          placeholder: "\u7F16\u8F91\u522B\u540D",
+          disabled: isDemo,
+          defaultValue: record.alias_name,
+          onFocus: aliasFocus,
+          onBlur: function onBlur(e) {
+            attrChangeHandle(e.currentTarget.value, record, 'alias_name');
+          }
+        });
+      } else {
+        return /*#__PURE__*/React.createElement(Popover, {
+          content: /*#__PURE__*/React.createElement("div", {
+            style: {
+              width: '200px',
+              wordBreak: 'break-all'
+            }
+          }, record.alias_name),
+          trigger: "hover",
+          placement: "top"
+        }, /*#__PURE__*/React.createElement(Input, {
+          className: "alias_name",
+          placeholder: "\u7F16\u8F91\u522B\u540D",
+          disabled: isDemo,
+          defaultValue: record.alias_name,
+          onFocus: aliasFocus,
+          onBlur: function onBlur(e) {
+            attrChangeHandle(e.currentTarget.value, record, 'alias_name');
+          }
+        }));
+      }
     }
   }, {
     title: '属性值别名',
@@ -189,6 +229,11 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, !rowRenderHandle(record.name) && /*#__PURE__*/React.createElement("span", {
         className: "attr_alias_name",
         onClick: function onClick() {
+          if (isDemo) {
+            message.error('demo环境，无法编辑');
+            return;
+          }
+
           setattrId(source == 'event' ? record.attr_id : record.id);
           setAttrAliasNameShow(true);
         }
@@ -209,6 +254,7 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
         style: {
           width: '100%'
         },
+        disabled: isDemo,
         onChange: function onChange(e) {
           return attrChangeHandle(e, record, 'type');
         },
@@ -234,6 +280,7 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
         style: {
           width: '100%'
         },
+        disabled: isDemo,
         onChange: function onChange(e) {
           return attrChangeHandle(e, record, 'hidden');
         },
@@ -261,6 +308,7 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
         style: {
           width: '100%'
         },
+        disabled: isDemo,
         onChange: function onChange(e) {
           return attrChangeHandle(e, record, 'encryption_type');
         },
@@ -315,7 +363,7 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
       var data = new FormData();
       data.append('upload', file);
       data.append('attr_id', attrId);
-      data.append('app_id', currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId);
+      data.append('app_id', getAppID(currentApp));
       source == 'event' ? data.append('event_id', eventAttrsData === null || eventAttrsData === void 0 ? void 0 : eventAttrsData.event_id) : null;
       request(apis.propUpload, {
         method: 'post',
@@ -348,7 +396,7 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
     request(apis.addPropDict, {
       method: 'post',
       params: {
-        app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        app_id: getAppID(currentApp),
         attr_id: attrId,
         batch_id: batchId,
         event_id: source == 'event' ? eventAttrsData === null || eventAttrsData === void 0 ? void 0 : eventAttrsData.event_id : null,
@@ -370,7 +418,7 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
     request(apis.queryPropDict, {
       method: 'post',
       params: {
-        app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        app_id: getAppID(currentApp),
         attr_id: attrId,
         event_id: source == 'event' ? eventAttrsData === null || eventAttrsData === void 0 ? void 0 : eventAttrsData.event_id : null
       }
@@ -388,14 +436,7 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
   }, [attrId]);
   return /*#__PURE__*/React.createElement("div", {
     className: classPrefix
-  }, source == 'event' && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(classPrefix, "-back"),
-    onClick: function onClick() {
-      return props.setEventAttrListShow(false);
-    }
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "fanhuiicon"
-  }), "\u8FD4\u56DE"), /*#__PURE__*/React.createElement(Table, {
+  }, /*#__PURE__*/React.createElement(Table, {
     className: "".concat(classPrefix, "-table"),
     columns: columns,
     rowKey: "name",
@@ -407,7 +448,6 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
       return rowRenderHandle(record.name) ? 'error-row' : '';
     },
     dataSource: userAttrData,
-    bordered: true,
     pagination: false
   }), /*#__PURE__*/React.createElement(Modal, {
     title: "\u5C5E\u6027\u503C\u522B\u540D",
@@ -420,7 +460,6 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "button-box"
   }, /*#__PURE__*/React.createElement(Upload, _objectSpread({}, uploadProps), /*#__PURE__*/React.createElement(Button, {
-    type: "primary",
     size: "small",
     icon: /*#__PURE__*/React.createElement(IconFont, {
       type: "daochu1"
@@ -429,7 +468,6 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
     icon: /*#__PURE__*/React.createElement(IconFont, {
       type: "xiazai1"
     }),
-    type: "primary",
     size: "small",
     onClick: function onClick() {
       return window.location.href = "/analysis/api/utm/template?fileName=".concat(source == 'user' ? '用户' : '事件', "\u5C5E\u6027\u503C\u6A21\u677F.xlsx");
@@ -445,7 +483,6 @@ var CollectionAttributeList = function CollectionAttributeList(props) {
     },
     columns: attrColumns,
     dataSource: attrExcelData,
-    bordered: true,
     pagination: false
   })));
 };

package/es/modules/dataCollection/collectionEventList.js

@@ -1,3 +1,11 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 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."); }
@@ -11,12 +19,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 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 { Input, Button, Select, Modal, message, Drawer, Pagination } 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 _ from 'lodash';
+import { getAppID } from '../../utils';
 import CollectionAttributeList from './collectionAttributeList';
 
 var CollectionEventList = function CollectionEventList(props) {
@@ -70,7 +80,7 @@ var CollectionEventList = function CollectionEventList(props) {
     return _markTypeFlag;
   };
 
-  var dataFinish = function dataFinish(data) {
+  var dataFinish = function dataFinish(data, refreshFlag) {
     var _tempArr = [];
     var _tempGroupOptions = [{
       value: -999,
@@ -113,22 +123,32 @@ var CollectionEventList = function CollectionEventList(props) {
     setTotal(_tempTotal);
     setTotalBasics(_tempTotal);
     setgroupOptions(_tempGroupOptions);
-    setTableHandleData(_tempArr);
+
+    if (!refreshFlag) {
+      setPageNumber(1);
+      setTableHandleData(_tempArr);
+    }
+
     setTableHandleDataBasics(_tempArr);
     setLoading(false);
+  }; // 刷新数据
+
+
+  var refreshHandle = function refreshHandle() {
+    queryList(true);
   };
 
-  var queryList = function queryList() {
+  var queryList = function queryList(refreshFlag) {
     request(apis.queryCollectionEventList, {
       method: 'post',
       params: {
-        app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        app_id: getAppID(currentApp),
         platform: 0,
         is_all: true
       }
     }).then(function (res) {
       if (!res) throw new Error();
-      dataFinish(res.data);
+      dataFinish(res.data, refreshFlag);
     }).catch(function (err) {
       console.error('查询列表失败', err);
     }).finally(function () {});
@@ -165,7 +185,7 @@ var CollectionEventList = function CollectionEventList(props) {
       method: 'post',
       data: {
         eventGroupName: eventNameInput,
-        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        appId: getAppID(currentApp),
         platform: 0
       }
     }).then(function (res) {
@@ -200,74 +220,253 @@ var CollectionEventList = function CollectionEventList(props) {
 
   var markTypeFilter = function markTypeFilter(markActive) {
     filterHandlePublic(!markActive, 'mark_type');
-  }; // 处理各种筛选数据
+  };
 
+  var _useState17 = useState([]),
+      _useState18 = _slicedToArray(_useState17, 2),
+      filterTypeData = _useState18[0],
+      setfilterTypeData = _useState18[1];
 
-  var filterHandlePublic = function filterHandlePublic(filterFlag, type, value) {
-    if (filterFlag) {
-      // 取消筛选
-      setTotal(totalBasics);
-      setTableHandleData(tableHandleDataBasics);
-    } else {
-      // 执行筛选
-      var _tableHandleData = [];
-      var _total = 0,
-          totalFlag = false; // 判断不同type的筛选条件
+  var _useState19 = useState([]),
+      _useState20 = _slicedToArray(_useState19, 2),
+      groupData = _useState20[0],
+      setGroupData = _useState20[1]; // 分组数据操作条
 
-      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;
+  useEffect(function () {
+    // console.log('filterTypeData', filterTypeData);
+    // 判断不同type的筛选条件
+    var _judgeFun = function _judgeFun(item, filterItem) {
+      switch (filterItem.type) {
+        case 'mark_type':
+          return item.mark_type == 1;
 
-          case 'groupId':
-            return item._groupId == value || item.groupId == value;
+        case 'event_name':
+          return item.event_name.indexOf(filterItem.value) != -1;
 
-          case 'event_hidden':
-            return item.event_hidden == value || item.groupId != undefined;
+        case 'groupId':
+          return item._groupId == filterItem.value || item.groupId == filterItem.value;
 
-          case 'is_stop':
-            return item.is_stop == value || item.groupId != undefined;
+        case 'event_hidden':
+          return item.event_hidden == filterItem.value || item.groupId != undefined;
+
+        case 'is_stop':
+          return item.is_stop == filterItem.value || item.groupId != undefined;
+      }
+    };
+
+    var _groupData = [];
+    var clearEmptyGroupFlag = false; // 多条件同时筛选
+
+    var _tableHandleData = [];
+    tableHandleDataBasics.map(function (item) {
+      if (item.groupId != undefined) {
+        _groupData.push(item);
+      }
+
+      var falg = true;
+      filterTypeData.map(function (filterItem) {
+        if (!_judgeFun(item, filterItem)) {
+          falg = false;
+          if (filterItem.type == 'event_hidden' || filterItem.type == 'is_stop') clearEmptyGroupFlag = true;
         }
-      };
+      });
+      falg && _tableHandleData.push(item);
+    });
+    setGroupData(_groupData);
+    var total = 0;
+
+    _tableHandleData.map(function (item) {
+      if (item._groupId != undefined) {
+        total++;
+      }
+    });
+
+    setTotal(total); // 过滤空组 , event_hidden 和 is_stop，触发
 
-      tableHandleDataBasics.map(function (item) {
-        if (_judgeFun(item)) {
-          _tableHandleData.push(item);
+    var clearEmptyGroup = function clearEmptyGroup(data) {
+      var _data = _.cloneDeep(data);
 
-          if (type == 'mark_type' || type == 'event_hidden' || type == 'is_stop') {
-            totalFlag = true;
-            item.groupId == undefined ? _total++ : null;
+      _.remove(_data, function (item) {
+        var flag = false;
+        data.map(function (item2) {
+          if (item.groupId && item.groupId == item2._groupId) {
+            flag = true;
           }
-        }
-      }); // 不同type的total设置
+        }); // console.log(item, flag);
+
+        return item.groupId != undefined && !flag;
+      });
+
+      return _data;
+    }; // console.log('_tableHandleData_tableHandleData', _tableHandleData);
+
 
-      setTotal(totalFlag ? _total : type == 'groupId' ? _tableHandleData.length - 1 : _tableHandleData.length);
+    setPageNumber(1);
+
+    if (!clearEmptyGroupFlag) {
       setTableHandleData(_tableHandleData);
+    } else {
+      setTableHandleData(clearEmptyGroup(_tableHandleData));
+    }
+  }, [filterTypeData, tableHandleDataBasics]); // 是否已包含筛选type
+
+  var filterHas = function filterHas(type) {
+    var flag = false;
+    filterTypeData.map(function (item) {
+      if (item.type == type) {
+        flag = true;
+      }
+    });
+    return flag;
+  }; // 处理各种筛选数据
+
+
+  var filterHandlePublic = function filterHandlePublic(filterFlag, type, value) {
+    if (filterFlag) {
+      // 取消筛选
+      var data = _.cloneDeep(filterTypeData);
+
+      _.remove(data, function (x) {
+        return x.type == type;
+      });
+
+      setfilterTypeData(data);
+    } else {
+      if (!filterHas(type)) {
+        setfilterTypeData([].concat(_toConsumableArray(filterTypeData), [{
+          type: type,
+          value: value
+        }]));
+      } else {
+        setfilterTypeData(filterTypeData.map(function (item) {
+          if (item.type == type) {
+            item.value = value;
+          }
+
+          return item;
+        }));
+      }
     }
   };
 
-  var _useState17 = useState(false),
-      _useState18 = _slicedToArray(_useState17, 2),
-      eventAttrListShow = _useState18[0],
-      setEventAttrListShow = _useState18[1];
+  var _useState21 = useState(false),
+      _useState22 = _slicedToArray(_useState21, 2),
+      eventAttrListShow = _useState22[0],
+      setEventAttrListShow = _useState22[1];
 
-  var _useState19 = useState(),
-      _useState20 = _slicedToArray(_useState19, 2),
-      eventAttrsData = _useState20[0],
-      setEventAttrsData = _useState20[1];
+  var _useState23 = useState(),
+      _useState24 = _slicedToArray(_useState23, 2),
+      eventAttrsData = _useState24[0],
+      setEventAttrsData = _useState24[1];
 
   var eventAttrDataHandle = function eventAttrDataHandle(data) {
     setEventAttrsData(data);
     setEventAttrListShow(true);
   };
 
+  var _useState25 = useState(1),
+      _useState26 = _slicedToArray(_useState25, 2),
+      pageNumber = _useState26[0],
+      setPageNumber = _useState26[1];
+
+  var _useState27 = useState(0),
+      _useState28 = _slicedToArray(_useState27, 2),
+      pageNumberIng = _useState28[0],
+      setpageNumberIng = _useState28[1];
+
+  var _useState29 = useState(10),
+      _useState30 = _slicedToArray(_useState29, 2),
+      pageSize = _useState30[0],
+      setPageSize = _useState30[1];
+
+  var _useState31 = useState([]),
+      _useState32 = _slicedToArray(_useState31, 2),
+      tableRenderData = _useState32[0],
+      setTableRenderData = _useState32[1]; // useEffect(() => {
+  //   console.log('tableHandleData', tableHandleData);
+  //   if (tableHandleData.length <= 0) { //待完善，收藏为空会有显示问题
+  //     return;
+  //   }
+  //   if (pageNumber == pageNumberIng) {
+  //     return;
+  //   }
+  //   let paginationData: DataType[][] = [];
+  //   let arr: DataType[] = [];
+  //   let count = 0;
+  //   tableHandleData.map((item) => {
+  //     if (item._groupId != undefined) {
+  //       count++;
+  //     }
+  //     arr.push(item);
+  //     if (count == pageSize) {
+  //       paginationData.push(arr);
+  //       count = 0;
+  //       arr = [];
+  //     }
+  //   });
+  //   if (count != 0) {
+  //     paginationData.push(arr);
+  //     count = 0;
+  //     arr = [];
+  //   }
+  //   console.log('paginationData', tableRenderData, paginationData[pageNumber - 1]);
+  //   setTableRenderData([...tableRenderData, ...paginationData[pageNumber - 1]]);
+  //   setpageNumberIng(pageNumber);
+  // }, [pageNumber, pageNumberIng, tableHandleData]);
+
+
+  useEffect(function () {
+    setPageNumber(1);
+  }, [tableHandleData]);
+  useEffect(function () {
+    var paginationData = [];
+    var arr = [];
+    var count = 0;
+    tableHandleData.map(function (item) {
+      if (item._groupId != undefined) {
+        count++;
+      }
+
+      arr.push(item);
+
+      if (count == pageSize) {
+        paginationData.push(arr);
+        count = 0;
+        arr = [];
+      }
+    });
+
+    if (arr.length > 0) {
+      paginationData.push(arr);
+      count = 0;
+      arr = [];
+    }
+
+    var _renderData = paginationData[pageNumber - 1]; // console.log('_renderData', pageNumber, pageSize, tableHandleData, _renderData);
+
+    if (_renderData && _renderData.length > 0 && _renderData[0].groupId == undefined) {
+      groupData.map(function (item) {
+        if (item.groupId == _renderData[0]._groupId) {
+          _renderData.unshift(item);
+        }
+      });
+    }
+
+    setTableRenderData(_renderData);
+  }, [pageNumber, pageSize, tableHandleData]); // 分页处理
+
+  var onPaginationChange = function onPaginationChange(pageNumber, pageSize) {
+    setPageNumber(pageNumber);
+    setPageSize(pageSize);
+  }; // const pageSizeChange = (pageNumber: number) => {
+  //   console.log('---pageSize---', pageNumber);
+  //   setPageNumber(pageNumber);
+  // };
+
+
   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, {
@@ -288,6 +487,7 @@ var CollectionEventList = function CollectionEventList(props) {
     className: "top-button",
     type: "primary",
     shape: "round",
+    disabled: isDemo,
     icon: /*#__PURE__*/React.createElement(IconFont, {
       style: {
         marginRight: '5px'
@@ -299,22 +499,44 @@ var CollectionEventList = function CollectionEventList(props) {
     }
   }, "\u521B\u5EFA\u4E8B\u4EF6\u5206\u7EC4")), /*#__PURE__*/React.createElement(TablePlus, {
     loading: loading,
-    tableHandleData: tableHandleData,
-    Refresh: queryList,
+    tableHandleData: tableRenderData,
+    Refresh: refreshHandle,
     eventActiveFilter: eventActiveFilter,
     markTypeFilter: markTypeFilter,
     isOpen: props.isOpen,
     queryPlanData: props.queryPlanData,
-    eventAttrDataHandle: eventAttrDataHandle
-  })), eventAttrListShow && /*#__PURE__*/React.createElement(CollectionAttributeList, {
+    eventAttrDataHandle: eventAttrDataHandle,
+    // pageSizeChange={pageSizeChange}
+    total: total,
+    groupData: groupData
+  }), /*#__PURE__*/React.createElement(Pagination, {
+    style: {
+      textAlign: 'right'
+    },
+    showQuickJumper: true,
+    defaultCurrent: 1,
+    current: pageNumber,
+    total: total,
+    onChange: onPaginationChange
+  }), /*#__PURE__*/React.createElement(Drawer, {
+    className: "".concat(classPrefix, "-drawer"),
+    width: '70%',
+    placement: "right",
+    destroyOnClose: true,
+    onClose: function onClose() {
+      return setEventAttrListShow(false);
+    },
+    visible: eventAttrListShow
+  }, /*#__PURE__*/React.createElement(CollectionAttributeList, {
     isOpen: props.isOpen,
     queryPlanData: props.queryPlanData,
     eventAttrsData: eventAttrsData,
-    source: "event",
-    setEventAttrListShow: setEventAttrListShow
-  }), /*#__PURE__*/React.createElement(Modal, {
+    source: "event"
+  })), /*#__PURE__*/React.createElement(Modal, {
     title: "\u521B\u5EFA\u5206\u7EC4",
+    className: "creact-group",
     destroyOnClose: true,
+    getContainer: false,
     visible: eventNameShow,
     onOk: createEventGroup,
     onCancel: function onCancel() {