@zgfe/modules-dm 1.0.34-heyh.30 → 1.0.34-heyh.32

package/es/modules/dataCollection/components/eventGroupingDrawer.js

@@ -12,15 +12,16 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { BizGlobalDataContext, IconFont, BizLoading } from '@zgfe/business-lib';
 import { Input, Modal, message, Drawer, Popover, Checkbox, Select, Button } from 'antd';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import request from '../../../utils/ajax';
 import apis from '../../../constants/api';
-import { eventListHandle, groupListSort, eventCheckedAll, openChangeData, eventShowOrHiddenData, eventMoveData, getAppID, eventShow } from '../../../utils/index';
+import { eventListHandle, eventCheckedAll, openChangeData, eventShowOrHiddenData, eventMoveData, getAppID, eventShow } from '../../../utils/index';
 import React, { Fragment, useContext, useEffect, useState } from 'react';
 import _ from 'lodash';
-import SortableComponnet from './sortableComponnet';
+import EventItem from './eventItem';
 var requestMove = false;
 import { DmContext } from '../../../store';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import { arrayMoveImmutable } from 'array-move';
 var EventGroupingDrawer = function EventGroupingDrawer(props) {
   var classPrefix = 'event-grouping-drawer';
   var eventGroupingShow = props.eventGroupingShow,
@@ -36,18 +37,14 @@ var EventGroupingDrawer = function EventGroupingDrawer(props) {
     setGroupingData = _useState2[1];
   var _useContext2 = useContext(DmContext),
     state = _useContext2.state;
-  var _useState3 = useState(false),
+  var _useState3 = useState(''),
     _useState4 = _slicedToArray(_useState3, 2),
-    isDragDisabled = _useState4[0],
-    setIsDragDisabled = _useState4[1];
-  var _useState5 = useState(''),
+    searchData = _useState4[0],
+    setSearchData = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    searchData = _useState6[0],
-    setSearchData = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    loading = _useState8[0],
-    setLoading = _useState8[1];
+    loading = _useState6[0],
+    setLoading = _useState6[1];
   var queryList = function queryList() {
     setLoading(true);
     request(apis.queryCollectionEventList, {
@@ -60,8 +57,6 @@ var EventGroupingDrawer = function EventGroupingDrawer(props) {
     }).then(function (res) {
       if (res && res.data) {
         var _data = eventListHandle(res.data);
-        // setInitialData(_data);
-        // setGroupingData(eventShow(_.cloneDeep(_data), searchData));
         setGroupingData(_data);
       }
       setLoading(false);
@@ -84,28 +79,9 @@ var EventGroupingDrawer = function EventGroupingDrawer(props) {
   var openChange = function openChange(groupId) {
     setGroupingData(_.cloneDeep(openChangeData(groupId, groupingData)));
   };
-  // 拖拽之后改变对应数据
-  var onDragEnd = function onDragEnd(result) {
-    // console.log('拖拽之后改变对应数据: ', result);
-    // 分组移动
-    if (result.source.droppableId.indexOf('item') === -1) {
-      var ids = groupListSort(result, groupingData, setGroupingData);
-      request(apis.orderEventGroup, {
-        method: 'post',
-        data: {
-          appId: getAppID(currentApp),
-          ids: ids
-        }
-      }).then(function () {
-        // queryList();
-        refresh();
-      });
-    }
-    setIsDragDisabled(false);
-  };
   // 删除事件分组
   var groupDelete = function groupDelete(groupId) {
-    if (!authority[source === "virtual" ? 1700636179 : 1700636359]) {
+    if (!authority[source === 'virtual' ? 1700636179 : 1700636359]) {
       message.error('无操作权限');
       return;
     }
@@ -157,26 +133,26 @@ var EventGroupingDrawer = function EventGroupingDrawer(props) {
     }
   };
   // 移动
-  var _useState9 = useState(undefined),
+  var _useState7 = useState(undefined),
+    _useState8 = _slicedToArray(_useState7, 2),
+    eventMoveShow = _useState8[0],
+    setEventMoveShow = _useState8[1];
+  var _useState9 = useState(-1),
     _useState10 = _slicedToArray(_useState9, 2),
-    eventMoveShow = _useState10[0],
-    setEventMoveShow = _useState10[1];
-  var _useState11 = useState(-1),
+    eventMoveChangeId = _useState10[0],
+    setEventMoveChangeId = _useState10[1];
+  var _useState11 = useState([]),
     _useState12 = _slicedToArray(_useState11, 2),
-    eventMoveChangeId = _useState12[0],
-    setEventMoveChangeId = _useState12[1];
-  var _useState13 = useState([]),
+    eventMoveOption = _useState12[0],
+    setEventMoveOption = _useState12[1];
+  var _useState13 = useState(0),
     _useState14 = _slicedToArray(_useState13, 2),
-    eventMoveOption = _useState14[0],
-    setEventMoveOption = _useState14[1];
-  var _useState15 = useState(0),
+    eventMoveLength = _useState14[0],
+    setEventMoveLength = _useState14[1];
+  var _useState15 = useState(''),
     _useState16 = _slicedToArray(_useState15, 2),
-    eventMoveLength = _useState16[0],
-    setEventMoveLength = _useState16[1];
-  var _useState17 = useState(''),
-    _useState18 = _slicedToArray(_useState17, 2),
-    eventMoveIds = _useState18[0],
-    setEventMoveIds = _useState18[1];
+    eventMoveIds = _useState16[0],
+    setEventMoveIds = _useState16[1];
   var eventMove = function eventMove(groupId) {
     var data = eventMoveData(groupId, groupingData, setGroupingData);
     setEventMoveOption(data.groupingOption);
@@ -242,18 +218,18 @@ var EventGroupingDrawer = function EventGroupingDrawer(props) {
     }, "\u786E\u5B9A")));
   };
   // 创建分组 & 修改分组名
-  var _useState19 = useState(null),
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    createOrEditGrpup = _useState18[0],
+    setCreateOrEditGrpup = _useState18[1];
+  var _useState19 = useState(-1),
     _useState20 = _slicedToArray(_useState19, 2),
-    createOrEditGrpup = _useState20[0],
-    setCreateOrEditGrpup = _useState20[1];
-  var _useState21 = useState(-1),
+    grpupModalSelectGrpupId = _useState20[0],
+    setGrpupModalSelectGrpupId = _useState20[1];
+  var _useState21 = useState(''),
     _useState22 = _slicedToArray(_useState21, 2),
-    grpupModalSelectGrpupId = _useState22[0],
-    setGrpupModalSelectGrpupId = _useState22[1];
-  var _useState23 = useState(''),
-    _useState24 = _slicedToArray(_useState23, 2),
-    grpupNameInput = _useState24[0],
-    setGrpupNameInput = _useState24[1];
+    grpupNameInput = _useState22[0],
+    setGrpupNameInput = _useState22[1];
   var GrpupModalHandle = function GrpupModalHandle() {
     if (grpupNameInput === '') {
       message.error('请填写分组名');
@@ -290,6 +266,122 @@ var EventGroupingDrawer = function EventGroupingDrawer(props) {
     setGrpupModalSelectGrpupId(-1);
     setGrpupNameInput('');
   };
+  // 拖动手柄
+  var DragHandle = SortableHandle(function () {
+    return /*#__PURE__*/React.createElement(IconFont, {
+      type: "tuozhuai1"
+    });
+  });
+  // 需要拖动的元素的容器
+  var SortableItem = SortableElement(function (data) {
+    var _data$value = data.value,
+      item = _data$value.item,
+      index = _data$value.index;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-box"),
+      key: index
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-box-header")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "operate-left"
+    }, /*#__PURE__*/React.createElement("div", {
+      id: "create-or-edit-grpup-modal"
+    }, item.open && /*#__PURE__*/React.createElement(IconFont, {
+      type: "fangxiangxia",
+      onClick: function onClick() {
+        return openChange(item.groupId);
+      }
+    }), !item.open && /*#__PURE__*/React.createElement(IconFont, {
+      type: "fangxiangshang",
+      onClick: function onClick() {
+        return openChange(item.groupId);
+      }
+    }), /*#__PURE__*/React.createElement("div", null, item.groupName ? item.groupName : '未分组'), item.groupName && /*#__PURE__*/React.createElement(IconFont, {
+      type: "zhongmingming",
+      onClick: function onClick() {
+        if (!authority[source === 'virtual' ? 1700636172 : 1700636344]) {
+          message.error('无操作权限');
+          return;
+        }
+        setCreateOrEditGrpup('edit');
+        setGrpupNameInput(item.groupName ? item.groupName : '未分组');
+        setGrpupModalSelectGrpupId(item.groupId);
+      }
+    })), /*#__PURE__*/React.createElement("div", null, item.count, "\u4E2A\u6307\u6807")), /*#__PURE__*/React.createElement("div", {
+      className: "operate-right"
+    }, item.count > 0 && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: item.checked,
+      onChange: function onChange() {
+        return onChangeAll(item.groupId);
+      }
+    }, "\u5168\u9009"), /*#__PURE__*/React.createElement(Popover, {
+      overlayClassName: "move-popover ".concat(eventMoveLength ? 'show' : 'hidden'),
+      placement: "bottomRight",
+      open: eventMoveShow === item.groupId,
+      title: null,
+      content: moveContent
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(groupingData.length > 1 ? '' : 'not-operable'),
+      onClick: function onClick() {
+        if (groupingData.length > 1) {
+          eventMove(item.groupId);
+        }
+      }
+    }, "\u79FB\u52A8")), /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return eventShowOrHidden(0, item.groupId);
+      }
+    }, "\u663E\u793A"), /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return eventShowOrHidden(1, item.groupId);
+      }
+    }, "\u9690\u85CF")), item.groupName && /*#__PURE__*/React.createElement("span", {
+      onClick: function onClick() {
+        return groupDelete(item.groupId);
+      }
+    }, "\u5220\u9664"), /*#__PURE__*/React.createElement(DragHandle, null))), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-box-content ").concat(item.open ? 'open' : 'close')
+    }, /*#__PURE__*/React.createElement(EventItem, {
+      componnetData: item.eventList,
+      componnetIndex: index,
+      groupId: item.groupId,
+      groupingData: groupingData,
+      setGroupingData: setGroupingData,
+      searchData: searchData
+    })));
+  });
+  // 拖拽盒子容器
+  var SortableList = SortableContainer(function () {
+    return /*#__PURE__*/React.createElement("div", null, groupingData.map(function (item, index) {
+      return /*#__PURE__*/React.createElement(SortableItem, {
+        key: "item-".concat(index),
+        index: index,
+        value: {
+          item: item,
+          index: index
+        }
+      });
+    }));
+  });
+  var onSortEnd = function onSortEnd(data) {
+    var oldIndex = data.oldIndex,
+      newIndex = data.newIndex;
+    var _groupingData = arrayMoveImmutable(groupingData, oldIndex, newIndex);
+    setGroupingData(_.cloneDeep(_groupingData));
+    var ids = [];
+    _groupingData.map(function (item) {
+      ids.push(item.groupId);
+    });
+    request(apis.orderEventGroup, {
+      method: 'post',
+      data: {
+        appId: getAppID(currentApp),
+        ids: ids.join(',')
+      }
+    }).then(function () {
+      refresh();
+    });
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Drawer, {
     className: classPrefix,
     width: 700,
@@ -322,108 +414,17 @@ var EventGroupingDrawer = function EventGroupingDrawer(props) {
   }), /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     size: "small",
-    disabled: !authority[source === "virtual" ? 1700636137 : 1000002],
+    disabled: !authority[source === 'virtual' ? 1700636137 : 1000002],
     onClick: function onClick() {
       setCreateOrEditGrpup('create');
     }
-  }, "\u521B\u5EFA\u5206\u7EC4")), /*#__PURE__*/React.createElement(DragDropContext, {
-    onDragEnd: onDragEnd
-  }, groupingData.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(Droppable, {
-      droppableId: index.toString(),
-      key: index,
-      type: "person",
-      isDragDisabled: false,
-      direction: "vertical"
-    }, function (provided) {
-      return /*#__PURE__*/React.createElement("div", _objectSpread({
-        key: index,
-        ref: provided.innerRef
-      }, provided.droppableProps), /*#__PURE__*/React.createElement(Draggable, {
-        isDragDisabled: isDragDisabled,
-        key: item.groupId.toString(),
-        draggableId: item.groupId.toString(),
-        index: index
-      }, function (provided) {
-        return /*#__PURE__*/React.createElement("div", _objectSpread({
-          ref: provided.innerRef
-        }, provided.draggableProps), /*#__PURE__*/React.createElement("div", {
-          className: "".concat(classPrefix, "-box")
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "".concat(classPrefix, "-box-header")
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "operate-left"
-        }, /*#__PURE__*/React.createElement("div", {
-          id: "create-or-edit-grpup-modal"
-        }, item.open && /*#__PURE__*/React.createElement(IconFont, {
-          type: "fangxiangxia",
-          onClick: function onClick() {
-            return openChange(item.groupId);
-          }
-        }), !item.open && /*#__PURE__*/React.createElement(IconFont, {
-          type: "fangxiangshang",
-          onClick: function onClick() {
-            return openChange(item.groupId);
-          }
-        }), /*#__PURE__*/React.createElement("div", null, item.groupName ? item.groupName : '未分组'), item.groupName && /*#__PURE__*/React.createElement(IconFont, {
-          type: "zhongmingming",
-          onClick: function onClick() {
-            if (!authority[source === "virtual" ? 1700636172 : 1700636344]) {
-              message.error('无操作权限');
-              return;
-            }
-            setCreateOrEditGrpup('edit');
-            setGrpupNameInput(item.groupName ? item.groupName : '未分组');
-            setGrpupModalSelectGrpupId(item.groupId);
-          }
-        })), /*#__PURE__*/React.createElement("div", null, item.count, "\u4E2A\u6307\u6807")), /*#__PURE__*/React.createElement("div", {
-          className: "operate-right"
-        }, item.count > 0 && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
-          checked: item.checked,
-          onChange: function onChange() {
-            return onChangeAll(item.groupId);
-          }
-        }, "\u5168\u9009"), /*#__PURE__*/React.createElement(Popover, {
-          overlayClassName: "move-popover ".concat(eventMoveLength ? 'show' : 'hidden'),
-          placement: "bottomRight",
-          open: eventMoveShow === item.groupId,
-          title: null,
-          content: moveContent
-        }, /*#__PURE__*/React.createElement("span", {
-          className: "".concat(groupingData.length > 1 ? '' : 'not-operable'),
-          onClick: function onClick() {
-            if (groupingData.length > 1) {
-              eventMove(item.groupId);
-            }
-          }
-        }, "\u79FB\u52A8")), /*#__PURE__*/React.createElement("span", {
-          onClick: function onClick() {
-            return eventShowOrHidden(0, item.groupId);
-          }
-        }, "\u663E\u793A"), /*#__PURE__*/React.createElement("span", {
-          onClick: function onClick() {
-            return eventShowOrHidden(1, item.groupId);
-          }
-        }, "\u9690\u85CF")), item.groupName && /*#__PURE__*/React.createElement("span", {
-          onClick: function onClick() {
-            return groupDelete(item.groupId);
-          }
-        }, "\u5220\u9664"), /*#__PURE__*/React.createElement(IconFont, _objectSpread(_objectSpread({}, provided.dragHandleProps), {}, {
-          type: "tuozhuai1"
-        })))), /*#__PURE__*/React.createElement("div", {
-          className: "".concat(classPrefix, "-box-content ").concat(item.open ? 'open' : 'close')
-        }, /*#__PURE__*/React.createElement(SortableComponnet, {
-          componnetData: item.eventList,
-          componnetIndex: index,
-          groupId: item.groupId,
-          groupingData: groupingData,
-          setGroupingData: setGroupingData,
-          refresh: refresh,
-          searchData: searchData
-        }))));
-      }));
-    });
-  })))), /*#__PURE__*/React.createElement(Modal, {
+  }, "\u521B\u5EFA\u5206\u7EC4")), /*#__PURE__*/React.createElement(SortableList, {
+    distance: 5,
+    axis: 'xy',
+    helperClass: "".concat(classPrefix, "-sortablelist"),
+    onSortEnd: onSortEnd,
+    useDragHandle: true
+  }))), /*#__PURE__*/React.createElement(Modal, {
     wrapClassName: "create-or-edit-grpup-modal",
     title: "".concat(createOrEditGrpup === 'create' ? '创建分组' : '修改分组名'),
     bodyStyle: {

package/es/modules/dataCollection/components/eventItem.d.ts

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

package/es/modules/dataCollection/components/eventItem.js

@@ -0,0 +1,49 @@
+import { Checkbox, Tooltip } from 'antd';
+import React from 'react';
+import { eventChecked } from '../../../utils';
+import _ from 'lodash';
+var EventItem = function EventItem(props) {
+  var componnetData = props.componnetData,
+    componnetIndex = props.componnetIndex,
+    groupId = props.groupId,
+    groupingData = props.groupingData,
+    setGroupingData = props.setGroupingData,
+    searchData = props.searchData;
+  var SortableItem = function SortableItem(data) {
+    var item = data.item,
+      index = data.index;
+    var name = '';
+    if (searchData === '') {
+      name = item.alias_name ? item.alias_name : item.event_name;
+    } else {
+      name = item.alias_name ? "".concat(item.alias_name, "(").concat(item.event_name, ")") : item.event_name;
+    }
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: "".concat(item.owner === 'zg_vtl' ? '虚拟事件' : '元事件', " | ").concat(name),
+      key: index
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      className: "checkbox-item ".concat(item.event_hidden ? 'event-hidden' : '', " column-").concat(groupId),
+      checked: item.checked,
+      key: index,
+      onChange: function onChange() {
+        return onChangeItem(groupId, item.event_id);
+      }
+    }, name));
+  };
+  var onChangeItem = function onChangeItem(groupId, eventId) {
+    setGroupingData(_.cloneDeep(eventChecked(groupId, eventId, groupingData)));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    key: componnetIndex
+  }, componnetData.map(function (item, index) {
+    if (item.searchShow === 1) {
+      return SortableItem({
+        item: item,
+        index: index
+      });
+    } else {
+      return null;
+    }
+  }));
+};
+export default EventItem;

package/es/modules/dataCollection/components/{sortableComponnet.js → sortableComponnet copy.js }

@@ -63,7 +63,7 @@ var SortableComponnet = function SortableComponnet(props) {
       key: componnetIndex
     }, componnetData.map(function (item, index) {
       if (item.searchShow === 1) {
-        if (groupId !== -1 && searchData === "") {
+        if (groupId !== -1 && searchData === '') {
           return /*#__PURE__*/React.createElement(SortableItem, {
             key: "item-".concat(index),
             index: index,

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

@@ -516,7 +516,7 @@
           align-items: center;
           justify-content: start;
           > :nth-child(1) {
-            color: #9AA1A9;
+            color: #9aa1a9;
           }
           > :nth-child(2) {
             font-weight: 500;
@@ -536,6 +536,7 @@
         }
         .tuozhuai1 {
           font-size: 18px !important;
+          cursor: pointer;
         }
       }
     }
@@ -616,6 +617,10 @@
   }
 }
 
+.event-grouping-drawer-sortablelist {
+  z-index: 99999;
+}
+
 .group-delete-modal {
   .ant-modal-body {
     padding: 24px;
@@ -767,10 +772,6 @@
   }
 }
 
-.sortable-componnet-sortableList {
-  z-index: 9999;
-}
-
 .not-operable {
   color: #ccd0d4;
   cursor: not-allowed !important;

package/es/utils/index.d.ts

@@ -46,10 +46,6 @@ export declare const eventShow: (data: any, searchData: string) => any;
  * 指标分组管理：单个事件选中处理
  */
 export declare const eventChecked: (groupId: number, eventId: number, groupingData: any) => any;
-/**
- * 指标分组管理：分组排序
- */
-export declare const groupListSort: (result: any, groupingData: any, setGroupingData: Function) => any;
 export declare const getAppID: (currentApp: any) => any;
 export declare const nullToEmptyString: (data: any) => any;
 /**

package/es/utils/index.js

@@ -304,27 +304,6 @@ export var eventChecked = function eventChecked(groupId, eventId, groupingData)
   });
   return groupingData;
 };
-/**
- * 指标分组管理：分组排序
- */
-export var groupListSort = function groupListSort(result, groupingData, setGroupingData) {
-  var _result$destination, _result$destination2;
-  var sourceIndex = result.source.index;
-  var targetIndex = ((_result$destination = result.destination) === null || _result$destination === void 0 ? void 0 : _result$destination.index) ? (_result$destination2 = result.destination) === null || _result$destination2 === void 0 ? void 0 : _result$destination2.index : 0;
-  var ids = [];
-  var sourceItem = groupingData[sourceIndex];
-  delete groupingData[sourceIndex];
-  groupingData.splice(targetIndex, 0, sourceItem);
-  groupingData.map(function (item) {
-    ids.push(item.groupId);
-  });
-  var _groupingData = [];
-  groupingData.map(function (item) {
-    _groupingData.push(item);
-  });
-  setGroupingData(_groupingData);
-  return ids.join(',');
-};
 // 获取appId，为了解决之前遇到切换应用但是currentApp里面的appId不更新的问题
 export var getAppID = function getAppID(currentApp) {
   var href = window.location.href;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zgfe/modules-dm",
-  "version": "1.0.34-heyh.30",
+  "version": "1.0.34-heyh.32",
   "license": "ISC",
   "module": "es/index.js",
   "typings": "es/index.d.ts",
@@ -30,7 +30,6 @@
   "dependencies": {
     "array-move": "^4.0.0",
     "react": "^16.12.0 || ^17.0.0",
-    "react-beautiful-dnd": "^13.1.1",
     "react-sortable-hoc": "^2.0.0"
   },
   "devDependencies": {
@@ -52,7 +51,7 @@
     "umi-request": "^1.4.0",
     "yorkie": "^2.0.0"
   },
-  "gitHead": "a392cf77313b4c7a22c4e52c3dbb4c967353a53d",
+  "gitHead": "cfe4a63f7e2d58c69febec65e2573d99e0af49a7",
   "gitHooks": {
     "pre-commit": "lint-staged"
   }