@zgfe/modules-dm 1.0.33 → 1.0.34-heyh.11

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

@@ -0,0 +1,388 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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 _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, groupDeleteData, eventShowOrHiddenData, eventMoveData, getAppID } from '../../../utils/index';
+import React, { Fragment, useContext, useEffect, useState } from 'react';
+import _ from 'lodash';
+import SortableComponnet from './sortableComponnet';
+var EventGroupingDrawer = function EventGroupingDrawer(props) {
+  var classPrefix = 'event-grouping-drawer';
+  var eventGroupingShow = props.eventGroupingShow,
+    setEventGroupingShow = props.setEventGroupingShow,
+    refresh = props.refresh;
+  var _useContext = useContext(BizGlobalDataContext),
+    currentApp = _useContext.currentApp;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    groupingData = _useState2[0],
+    setGroupingData = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDragDisabled = _useState4[0],
+    setIsDragDisabled = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    setLoading = _useState6[1];
+  var queryList = function queryList() {
+    setLoading(true);
+    request(apis.queryCollectionEventList, {
+      method: 'post',
+      data: {
+        appId: getAppID(currentApp),
+        platform: 0,
+        isAll: true
+      }
+    }).then(function (res) {
+      if (res && res.data) {
+        eventListHandle(res.data);
+        setGroupingData(res.data);
+      }
+      setLoading(false);
+    });
+  };
+  useEffect(function () {
+    if (eventGroupingShow) queryList();
+  }, [eventGroupingShow]);
+  var onChangeAll = function onChangeAll(groupId) {
+    setGroupingData(_.cloneDeep(eventCheckedAll(groupId, groupingData)));
+  };
+  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
+        }
+      });
+    }
+    setIsDragDisabled(false);
+  };
+  // 删除事件分组
+  var groupDelete = function groupDelete(groupId) {
+    Modal.confirm({
+      centered: true,
+      title: '提示',
+      content: '是否确认删除？',
+      className: 'group-delete-modal',
+      icon: /*#__PURE__*/React.createElement(IconFont, {
+        type: "tishi1"
+      }),
+      okText: '确认',
+      cancelText: '取消',
+      maskClosable: false,
+      onOk: function onOk() {
+        request(apis.deleteEventGroup, {
+          method: 'post',
+          data: {
+            appId: getAppID(currentApp),
+            eventGroupId: groupId
+          }
+        }).then(function (res) {
+          if (res) {
+            message.success('删除成功');
+            groupDeleteData(groupId, groupingData, setGroupingData);
+          }
+        });
+      }
+    });
+  };
+  // 显示或隐藏
+  var eventShowOrHidden = function eventShowOrHidden(type, groupId) {
+    var ids = eventShowOrHiddenData(type, groupId, groupingData, setGroupingData);
+    if (ids !== '') {
+      request(apis.hiddenEvent, {
+        method: 'post',
+        data: {
+          appId: getAppID(currentApp),
+          hidden: type,
+          ids: ids
+        }
+      });
+    }
+  };
+  // 移动
+  var _useState7 = useState(undefined),
+    _useState8 = _slicedToArray(_useState7, 2),
+    eventMoveShow = _useState8[0],
+    setEventMoveShow = _useState8[1];
+  var _useState9 = useState(-1),
+    _useState10 = _slicedToArray(_useState9, 2),
+    eventMoveChangeId = _useState10[0],
+    setEventMoveChangeId = _useState10[1];
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    eventMoveOption = _useState12[0],
+    setEventMoveOption = _useState12[1];
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    eventMoveLength = _useState14[0],
+    setEventMoveLength = _useState14[1];
+  var _useState15 = useState(''),
+    _useState16 = _slicedToArray(_useState15, 2),
+    eventMoveIds = _useState16[0],
+    setEventMoveIds = _useState16[1];
+  var eventMove = function eventMove(groupId) {
+    var data = eventMoveData(groupId, groupingData, setGroupingData);
+    setEventMoveOption(data.groupingOption);
+    setEventMoveLength(data.length);
+    setEventMoveIds(data.ids);
+    if (data.length > 0) {
+      setEventMoveShow(groupId);
+      setEventMoveChangeId(data.groupingOption[0].value);
+    } else {
+      setEventMoveShow(undefined);
+    }
+  };
+  var eventMoveChange = function eventMoveChange() {
+    request(apis.operateGroupRelations, {
+      method: 'post',
+      data: {
+        appId: getAppID(currentApp),
+        platform: 0,
+        hasPublicAttrView: true,
+        eventIds: eventMoveIds,
+        eventGroupId: eventMoveChangeId,
+        oldEventGroupId: eventMoveShow
+      }
+    }).then(function (res) {
+      if (res.code == '00') {
+        queryList();
+      }
+    }).finally(function () {
+      setEventMoveShow(undefined);
+    });
+  };
+  var moveContent = function moveContent() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "move-content"
+    }, /*#__PURE__*/React.createElement("div", null, "\u5C06", eventMoveLength, "\u4E2A\u6307\u6807\u79FB\u52A8\u5230\u4EE5\u4E0B\u5206\u7EC4"), /*#__PURE__*/React.createElement("div", null, "\u9009\u62E9\u5206\u7EC4", ' ', /*#__PURE__*/React.createElement(Select, {
+      defaultValue: eventMoveOption[0].value,
+      style: {
+        width: 120
+      },
+      onChange: function onChange(id) {
+        setEventMoveChangeId(id);
+      },
+      options: eventMoveOption
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      type: "text",
+      size: "small",
+      onClick: function onClick() {
+        return setEventMoveShow(false);
+      }
+    }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      size: "small",
+      onClick: eventMoveChange
+    }, "\u786E\u5B9A")));
+  };
+  // 创建分组 & 修改分组名
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    createOrEditGrpup = _useState18[0],
+    setCreateOrEditGrpup = _useState18[1];
+  var _useState19 = useState(-1),
+    _useState20 = _slicedToArray(_useState19, 2),
+    grpupModalSelectGrpupId = _useState20[0],
+    setGrpupModalSelectGrpupId = _useState20[1];
+  var _useState21 = useState(''),
+    _useState22 = _slicedToArray(_useState21, 2),
+    grpupNameInput = _useState22[0],
+    setGrpupNameInput = _useState22[1];
+  var GrpupModalHandle = function GrpupModalHandle() {
+    if (grpupNameInput === '') {
+      message.error('请填写分组名');
+      return;
+    }
+    var _data = {};
+    if (createOrEditGrpup === 'edit') {
+      _data.eventGroupId = grpupModalSelectGrpupId;
+    }
+    request(apis.upsertEventGroup, {
+      method: 'post',
+      data: _objectSpread(_objectSpread({
+        eventGroupName: grpupNameInput,
+        appId: getAppID(currentApp)
+      }, _data), {}, {
+        platform: 0
+      })
+    }).then(function (res) {
+      if ((res === null || res === void 0 ? void 0 : res.code) == '01') {
+        message.error('事件组名称已存在');
+      }
+      if ((res === null || res === void 0 ? void 0 : res.code) == '00') {
+        message.success("".concat(createOrEditGrpup === 'create' ? '创建' : '编辑', "'\u6210\u529F'"));
+        queryList();
+        GrpupModalClose();
+      }
+    });
+  };
+  var GrpupModalClose = function GrpupModalClose() {
+    setCreateOrEditGrpup(null);
+    setGrpupModalSelectGrpupId(-1);
+    setGrpupNameInput('');
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Drawer, {
+    className: classPrefix,
+    width: 700,
+    title: /*#__PURE__*/React.createElement("div", null, "\u4E8B\u4EF6\u5206\u7EC4\u7BA1\u7406", /*#__PURE__*/React.createElement("span", null, "\u7EDF\u4E00\u7BA1\u7406\u57CB\u70B9\u4E8B\u4EF6\u548C\u865A\u62DF\u4E8B\u4EF6\u4E1A\u52A1\u5206\u7EC4\uFF0C\u652F\u6301\u5BF9\u4E8B\u4EF6\u8C03\u6574\u6392\u5E8F\u548C\u9690\u85CF")),
+    placement: "right",
+    onClose: function onClose() {
+      setEventGroupingShow(false);
+      setEventMoveShow(undefined);
+      refresh();
+    },
+    destroyOnClose: true,
+    open: eventGroupingShow,
+    extra: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      type: "primary",
+      size: "small",
+      onClick: function onClick() {
+        setCreateOrEditGrpup('create');
+      }
+    }, "\u521B\u5EFA\u5206\u7EC4"), /*#__PURE__*/React.createElement(IconFont, {
+      type: "qingchu",
+      onClick: function onClick() {
+        setEventGroupingShow(false);
+        setEventMoveShow(undefined);
+      }
+    }))
+  }, /*#__PURE__*/React.createElement(BizLoading, {
+    spinning: loading
+  }, /*#__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 : '未分组'), /*#__PURE__*/React.createElement(IconFont, {
+          type: "zhongmingming",
+          onClick: function onClick() {
+            setCreateOrEditGrpup('edit');
+            setGrpupNameInput(item.groupName ? item.groupName : '未分组');
+            setGrpupModalSelectGrpupId(item.groupId);
+          }
+        })), /*#__PURE__*/React.createElement("div", null, item.eventList.length, "\u4E2A\u6307\u6807")), /*#__PURE__*/React.createElement("div", {
+          className: "operate-right"
+        }, item.eventList.length > 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")), /*#__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
+        }))));
+      }));
+    });
+  })))), /*#__PURE__*/React.createElement(Modal, {
+    wrapClassName: "create-or-edit-grpup-modal",
+    title: "".concat(createOrEditGrpup === 'create' ? '创建分组' : '修改分组名'),
+    bodyStyle: {
+      padding: '0 24px 24px 24px'
+    },
+    destroyOnClose: true,
+    open: createOrEditGrpup === null ? false : true,
+    getContainer: function getContainer() {
+      return document.getElementById("create-or-edit-grpup-modal");
+    },
+    onOk: GrpupModalHandle,
+    onCancel: GrpupModalClose
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "\u8BF7\u8F93\u5165\u5206\u7EC4\u540D",
+    value: grpupNameInput,
+    maxLength: 20,
+    onChange: function onChange(e) {
+      return setGrpupNameInput(e.currentTarget.value);
+    }
+  })));
+};
+export default EventGroupingDrawer;

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

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

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

@@ -0,0 +1,210 @@
+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."); }
+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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { IconFont, BizSearchInput } from '@zgfe/business-lib';
+import { Select, Modal, Dropdown, Checkbox, message } from 'antd';
+import { useEffect } from 'react';
+import React, { useState } from 'react';
+var SelectAttributes = function SelectAttributes(props) {
+  var classPrefix = 'select-attributes';
+  var selectAttributesShow = props.selectAttributesShow,
+    setSelectAttributesShow = props.setSelectAttributesShow,
+    selectAttributesData = props.selectAttributesData,
+    selectAttributesHandle = props.selectAttributesHandle;
+  // 下拉菜单是否显示
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  // select选项
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    options = _useState4[0],
+    setOptions = _useState4[1];
+  // select选中项
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectValue = _useState6[0],
+    setSelectValue = _useState6[1];
+  // 当前选中的事件id
+  var _useState7 = useState(-999),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectEventId = _useState8[0],
+    setSelectEventId = _useState8[1];
+  // 搜索属性名称
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    searchValue = _useState10[0],
+    setSearchValue = _useState10[1];
+  // 属性展示列表（属性名称，搜索过滤使用）
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray(_useState11, 2),
+    attrShowList = _useState12[0],
+    setAttrShowList = _useState12[1];
+  // 属性展示列表 - 原数据（属性名称，搜索过滤使用）
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    attrShowListOriginalData = _useState14[0],
+    setAttrShowListOriginalData = _useState14[1];
+  useEffect(function () {
+    if (!selectAttributesShow) return;
+    var _options = [];
+    var _selectValue = [];
+    var _attrShowList = [];
+    selectAttributesData[0].attrList.map(function (item) {
+      _options.push({
+        label: item.label,
+        value: item.label,
+        ofEventId: item.ofEventId
+      });
+      _attrShowList.push(item.label);
+      if (_selectValue.length < 100) {
+        _selectValue.push(item.label);
+      }
+    });
+    setOptions(_options);
+    setSelectValue(_selectValue);
+    setAttrShowList(_attrShowList);
+    setAttrShowListOriginalData(_attrShowList);
+  }, [selectAttributesData, selectAttributesShow]);
+  // 下拉菜单显示隐藏改变
+  var onVisibleChange = function onVisibleChange(show) {
+    setVisible(show);
+    setSearchValue('');
+  };
+  // 保存
+  var handleOk = function handleOk() {
+    if (selectValue.length > 100) {
+      message.error('最多可选择100个属性');
+    } else {
+      selectAttributesHandle(selectValue);
+      setSelectAttributesShow(false);
+    }
+  };
+  // 取消
+  var handleCancel = function handleCancel() {
+    setSelectAttributesShow(false);
+  };
+  // select选中的数据变化
+  var handleSelectChange = function handleSelectChange(data) {
+    setSelectValue(data);
+  };
+  // 左侧事件id变化
+  var onSelectEventIdChange = function onSelectEventIdChange(id) {
+    setSelectEventId(id);
+  };
+  // 右侧事件属性变化
+  var onSelectAttributesChange = function onSelectAttributesChange(label) {
+    if (selectValue.indexOf(label) !== -1) {
+      setSelectValue(selectValue.filter(function (_label) {
+        return _label !== label;
+      }));
+    } else {
+      setSelectValue([].concat(_toConsumableArray(selectValue), [label]));
+    }
+  };
+  useEffect(function () {
+    if (searchValue) {
+      var _attrShowList = [];
+      attrShowListOriginalData.map(function (name) {
+        if (name.indexOf(searchValue) !== -1) {
+          _attrShowList.push(name);
+        }
+      });
+      setAttrShowList(_attrShowList);
+    } else {
+      setAttrShowList(attrShowListOriginalData);
+    }
+  }, [searchValue]);
+  // 渲染属性列表
+  var selectAttributesRender = function selectAttributesRender() {
+    return selectAttributesData.map(function (item) {
+      if (item.id === selectEventId) {
+        return item.attrList.map(function (_item) {
+          return attrShowList.indexOf(_item.label) !== -1 ? /*#__PURE__*/React.createElement("div", {
+            className: "".concat(selectValue.indexOf(_item.id) !== -1 ? 'active' : ''),
+            key: _item.id
+          }, /*#__PURE__*/React.createElement(Checkbox, {
+            checked: selectValue.indexOf(_item.label) !== -1,
+            onChange: function onChange() {
+              return onSelectAttributesChange(_item.label);
+            }
+          }, _item.label)) : null;
+        });
+      }
+    });
+  };
+  return /*#__PURE__*/React.createElement(Modal, {
+    title: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconFont, {
+      type: "tishi1"
+    }), "\u63D0\u793A", /*#__PURE__*/React.createElement(IconFont, {
+      type: "qingchu",
+      onClick: handleCancel
+    })),
+    wrapClassName: "".concat(classPrefix, "-modal-box"),
+    closeIcon: null,
+    open: selectAttributesShow,
+    onOk: handleOk,
+    onCancel: handleCancel
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    dropdownRender: function dropdownRender() {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-box")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-box-left")
+      }, selectAttributesData.map(function (item) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: item.id,
+          className: "".concat(selectEventId === item.id ? 'active' : ''),
+          onClick: function onClick() {
+            return onSelectEventIdChange(item.id);
+          }
+        }, /*#__PURE__*/React.createElement("span", null, item.name), /*#__PURE__*/React.createElement("span", null, item.attrList.length));
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-box-right")
+      }, /*#__PURE__*/React.createElement(BizSearchInput, {
+        className: "".concat(classPrefix, "-search"),
+        onChange: function onChange(val) {
+          return setSearchValue(val);
+        },
+        placeholder: "\u641C\u7D22\u5C5E\u6027"
+      }), /*#__PURE__*/React.createElement("div", null, selectAttributesRender())));
+    },
+    trigger: ['click'],
+    overlayStyle: {
+      minWidth: 0,
+      paddingLeft: 8
+    },
+    open: visible,
+    onOpenChange: onVisibleChange,
+    getPopupContainer: props.popupContainer ? function () {
+      return document.getElementById("".concat(classPrefix, "-select"));
+    } : undefined,
+    destroyPopupOnHide: props.defaultSelectAble
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-select"),
+    id: "".concat(classPrefix, "-select")
+  }, /*#__PURE__*/React.createElement(Select, {
+    mode: "tags",
+    maxTagCount: 3,
+    maxTagTextLength: 5,
+    style: {
+      width: '100%'
+    },
+    placeholder: "Please select",
+    getPopupContainer: function getPopupContainer() {
+      return document.getElementById("".concat(classPrefix, "-select"));
+    },
+    value: selectValue,
+    onChange: handleSelectChange,
+    options: options
+  }))));
+};
+export default SelectAttributes;

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

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