@cloud-app-dev/vidc 1.0.35 → 1.0.36

package/es/DynamicDeviceList/index.js

@@ -1,6 +1,6 @@
-import _DynamicList from "@cloud-app-dev/basic-components/es/DynamicList";
 import "antd/lib/checkbox/style";
 import _Checkbox from "antd/lib/checkbox";
+import _DynamicList from "@cloud-app-dev/basic-components/es/DynamicList";
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -26,6 +26,8 @@ import { __awaiter } from "tslib";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { queryDeviceList } from './utils';
 import DeviceIcon from '../DeviceIcon';
+import TreeTitle from '../TreeTitle';
+import CheckExt from './CheckExt';
 import "./index.css";
 var OFFSET = 0;
 var LIMIT = 30;
@@ -34,25 +36,73 @@ function DynamicDeviceList(_ref) {
   var _this = this;
 
   var onClick = _ref.onClick,
-      _ref$selectKeys = _ref.selectKeys,
-      selectKeys = _ref$selectKeys === void 0 ? [] : _ref$selectKeys,
-      onSelect = _ref.onSelect,
+      checkedKeys = _ref.checkedKeys,
+      defaultCheckedIds = _ref.defaultCheckedIds,
+      onChecked = _ref.onChecked,
       params = _ref.params,
-      renderItem = _ref.renderItem,
+      _renderItem = _ref.renderItem,
       _ref$itemHeight = _ref.itemHeight,
-      itemHeight = _ref$itemHeight === void 0 ? 40 : _ref$itemHeight;
+      itemHeight = _ref$itemHeight === void 0 ? 40 : _ref$itemHeight,
+      title = _ref.title,
+      onKeywordChange = _ref.onKeywordChange;
 
   var _useState = useState({
     offset: OFFSET,
     limit: LIMIT,
     list: [],
-    count: LIMIT
+    count: LIMIT,
+    checkedKeys: defaultCheckedIds || checkedKeys || []
   }),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1];
 
   var loadRef = useRef(false);
+  var listRef = useRef(null);
+  /**
+   * 列表选中处理
+   */
+
+  var onCheckedAction = useCallback(function (item) {
+    var ids = state.checkedKeys || [];
+    var id = item.cid;
+    var checked = !ids.includes(item.cid);
+
+    if (checked) {
+      ids.push(id);
+    } else {
+      ids = ids.filter(function (v) {
+        return v !== id;
+      });
+    }
+
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        checkedKeys: _toConsumableArray(ids)
+      });
+    });
+    onChecked && onChecked(ids, [item], checked);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [state.checkedKeys]);
+  var onSelectAll = useCallback(function () {
+    var ids = state.list.map(function (v) {
+      return v.cid;
+    });
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        checkedKeys: ids
+      });
+    });
+    onChecked && onChecked(ids, state.list, true);
+  }, [state.list]);
+  var onCancelAll = useCallback(function () {
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        checkedKeys: []
+      });
+    });
+    onChecked && onChecked([], [], false);
+  }, []);
   /**
    * @desc 参数变化列表需要重新初始化
    */
@@ -67,14 +117,14 @@ function DynamicDeviceList(_ref) {
       });
     });
     queryDeviceList(Object.assign({
-      offset: OFFSET,
+      offset: 0,
       limit: LIMIT
     }, data)).then(function (res) {
       setState(function (old) {
         return Object.assign(Object.assign({}, old), {
           list: res.data || [],
           count: res.totalCount,
-          offset: OFFSET,
+          offset: LIMIT,
           limit: LIMIT
         });
       });
@@ -102,7 +152,7 @@ function DynamicDeviceList(_ref) {
               return _context.abrupt("return", Promise.resolve());
 
             case 2:
-              offset = state.offset + LIMIT;
+              offset = state.offset;
               _context.next = 5;
               return queryDeviceList(Object.assign({
                 offset: offset,
@@ -111,7 +161,7 @@ function DynamicDeviceList(_ref) {
                 setState(function (old) {
                   return Object.assign(Object.assign({}, old), {
                     list: [].concat(_toConsumableArray(old.list), _toConsumableArray(res.data || [])),
-                    offset: offset
+                    offset: offset + LIMIT
                   });
                 });
               }).catch(console.error);
@@ -124,49 +174,50 @@ function DynamicDeviceList(_ref) {
       }, _callee);
     }));
   }, [state.offset, state.limit, params]);
-  /**
-   * @desc render列表函数
-   */
-
-  var render = useCallback(function (item, index) {
-    if (renderItem) {
-      return renderItem(item, index);
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: "device-item-box ".concat(selectKeys.includes(item.cid) ? 'device-item-selected' : '')
-    }, onSelect ? /*#__PURE__*/React.createElement(_Checkbox, {
-      className: "device-name device-checkbox-name",
-      checked: selectKeys.includes(item.cid),
-      value: item.cid,
-      onClick: function onClick() {
-        return onSelect(item);
-      }
-    }, /*#__PURE__*/React.createElement(DeviceIcon, {
-      type: item.deviceType,
-      status: item.deviceStatus
-    }), /*#__PURE__*/React.createElement("span", {
-      title: item.deviceName
-    }, item.deviceName)) : /*#__PURE__*/React.createElement("span", {
-      className: "device-name",
-      onClick: onClick ? function () {
-        return onClick(item);
-      } : undefined
-    }, /*#__PURE__*/React.createElement(DeviceIcon, {
-      type: item.deviceType,
-      status: item.deviceStatus
-    }), /*#__PURE__*/React.createElement("span", {
-      title: item.deviceName
-    }, item.deviceName)));
-  }, [selectKeys]);
   return /*#__PURE__*/React.createElement("div", {
     className: "zenview-c-dynamic-device-list-layout"
-  }, /*#__PURE__*/React.createElement(_DynamicList, {
+  }, /*#__PURE__*/React.createElement(TreeTitle, {
+    title: title,
+    onChange: onKeywordChange,
+    inputPlaceholder: "\u8BF7\u8F93\u5165\u8BBE\u5907\u540D\u79F0"
+  }), onChecked && /*#__PURE__*/React.createElement(CheckExt, {
+    count: state.count,
+    selectCount: state.checkedKeys.length,
+    onCancel: onCancelAll,
+    onCheck: onSelectAll
+  }), /*#__PURE__*/React.createElement(_DynamicList, {
     list: state.list,
     loadMore: loadNextPage,
     rowCount: state.count,
-    renderItem: render,
-    itemHeight: itemHeight
+    renderItem: function renderItem(item, index) {
+      return _renderItem ? _renderItem(item, index) : /*#__PURE__*/React.createElement("div", {
+        className: "device-item-box ".concat(state.checkedKeys.includes(item.cid) ? 'device-item-selected' : '')
+      }, onChecked ? /*#__PURE__*/React.createElement(_Checkbox, {
+        className: "device-name device-checkbox-name",
+        checked: state.checkedKeys.includes(item.cid),
+        value: item.cid,
+        onClick: function onClick() {
+          return onCheckedAction(item);
+        }
+      }, /*#__PURE__*/React.createElement(DeviceIcon, {
+        type: item.deviceType,
+        status: item.deviceStatus
+      }), /*#__PURE__*/React.createElement("span", {
+        title: item.deviceName
+      }, item.deviceName)) : /*#__PURE__*/React.createElement("span", {
+        className: "device-name",
+        onClick: onClick ? function () {
+          return onClick(item);
+        } : undefined
+      }, /*#__PURE__*/React.createElement(DeviceIcon, {
+        type: item.deviceType,
+        status: item.deviceStatus
+      }), /*#__PURE__*/React.createElement("span", {
+        title: item.deviceName
+      }, item.deviceName)));
+    },
+    itemHeight: itemHeight,
+    ref: listRef
   }));
 }
 

package/es/DynamicDeviceList/utils.d.ts

@@ -1,3 +1,2 @@
-import { HttpPageResult2 } from '../core';
-import { DeviceItemType } from './interface';
+import { DeviceItemType, HttpPageResult2 } from '../core';
 export declare function queryDeviceList(params?: any): Promise<HttpPageResult2<DeviceItemType>>;

package/es/OrgTree/index.js

@@ -145,12 +145,12 @@ var OrgTree = /*#__PURE__*/function (_React$Component) {
         selectedKeys: activeKey ? Array.isArray(activeKey) ? activeKey : [activeKey] : undefined,
         expandedKeys: expandedKeys,
         defaultExpandedKeys: treeData[0] ? [treeData[0].id] : undefined,
+        icon: function icon(node) {
+          return /*#__PURE__*/React.createElement(_IconFont, {
+            type: "".concat(node.id === treeData[0].id ? 'icon-S_Bar_Home' : 'icon-S_Photo_ListTree')
+          });
+        },
         treeNodeProps: {
-          treeNodeIcon: function treeNodeIcon(node) {
-            return /*#__PURE__*/React.createElement(_IconFont, {
-              type: "".concat(node.id === treeData[0].id ? 'icon-S_Bar_Home' : 'icon-S_Photo_ListTree')
-            });
-          },
           keyword: this.state.keyword,
           suffix: this.renderSuffix,
           treeNodeClass: treeNodeClass,

package/es/OrgUserTree/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { BaseTreeProps } from '@cloud-app-dev/basic-components/es/Tree';
 import { OrgItemType } from '@cloud-app-dev/basic-components/es/Store/org';
 import './index.less';
-interface IOrgUserTreeProps extends BaseTreeProps<OrgItemType> {
+interface IOrgUserTreeProps extends BaseTreeProps {
     expandedKeys?: Array<string>;
     title?: React.ReactNode;
     inputPlaceholder?: string;

package/es/OrgUserTree/index.js

@@ -64,7 +64,7 @@ function OrgUserTree(_a) {
       return v.organizationName.includes(state.keyword);
     });
     orgs.forEach(function (v) {
-      var ids = getParentListById(v.id).map(function (v) {
+      var ids = getParentListById(v.id, orgList).map(function (v) {
         return v.id;
       });
       keys = [].concat(keys, ids);
@@ -81,10 +81,10 @@ function OrgUserTree(_a) {
     });
   }, [state.keyword, orgList, treeData]);
   useEffect(function () {
-    var _a, _b;
+    var _a;
 
     if (onDefailtSelect && ((_a = treeData[0]) === null || _a === void 0 ? void 0 : _a.id)) {
-      onDefailtSelect((_b = treeData[0]) === null || _b === void 0 ? void 0 : _b.id);
+      onDefailtSelect(treeData[0].id);
     }
   }, [treeData]);
   return /*#__PURE__*/React.createElement(_CBox, {
@@ -111,16 +111,16 @@ function OrgUserTree(_a) {
     selectedKeys: activeKey ? Array.isArray(activeKey) ? activeKey : [activeKey] : undefined,
     expandedKeys: state.expandedKeys,
     defaultExpandedKeys: treeData[0] ? [treeData[0].id] : undefined,
+    icon: function icon(node) {
+      return /*#__PURE__*/React.createElement(_IconFont, {
+        type: "".concat(node.id === treeData[0].id ? 'icon-S_Bar_Home' : 'icon-S_Photo_ListTree')
+      });
+    },
     treeNodeProps: {
-      treeNodeIcon: function treeNodeIcon(node) {
-        return /*#__PURE__*/React.createElement(_IconFont, {
-          type: "".concat(node.id === treeData[0].id ? 'icon-S_Bar_Home' : 'icon-S_Photo_ListTree')
-        });
-      },
       keyword: state.keyword,
       suffix: treeNodeProps === null || treeNodeProps === void 0 ? void 0 : treeNodeProps.suffix,
-      treeNodeClass: treeNodeProps === null || treeNodeProps === void 0 ? void 0 : treeNodeProps.treeNodeClass,
-      nameKey: 'organizationName'
+      nameKey: 'organizationName',
+      key: 'id'
     }
   })));
 }

package/es/PlaceTree/demo.d.ts

@@ -0,0 +1,2 @@
+declare function App(): JSX.Element;
+export default App;

package/es/PlaceTree/demo.js

@@ -0,0 +1,20 @@
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
+import React from 'react';
+import BsTree from './index';
+
+function App() {
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: "cloudapp"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 20,
+      width: 300,
+      height: 400
+    }
+  }, /*#__PURE__*/React.createElement(BsTree, {
+    title: "\u884C\u653F\u533A\u5212"
+  })));
+}
+
+export default App;

package/es/PlaceTree/index.css

@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: column;
   border: 1px solid var(--bd-color);
+  margin-left: -1px;
 }
 .lm-c-place-tree .lm-c-tree-title-part {
   border-bottom: 1px solid var(--bd-color);

package/es/PlaceTree/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { BaseTreeProps } from '@cloud-app-dev/basic-components/es/Tree';
 import { PlaceItemType } from '@cloud-app-dev/basic-components/es/Store/place';
 import './index.less';
-export interface IPlaceTreeProps<T> extends BaseTreeProps<T> {
+export interface IPlaceTreeProps extends BaseTreeProps {
     className?: string;
     inputPlaceholder?: string;
     onKeywordChange?: (key: string) => void;
@@ -14,7 +14,7 @@ export interface IPlaceTreeProps<T> extends BaseTreeProps<T> {
     renderSuffix?: (item: PlaceItemType) => JSX.Element;
     showCount?: boolean;
 }
-declare function PlaceTree({ treeData, defaultExpandedKeys, activeKey, className, onKeywordChange, titleExt, title, inputPlaceholder, renderHeader, keyword, treeNodeProps, renderSuffix, showCount, ...props }: IPlaceTreeProps<PlaceItemType>): JSX.Element;
+declare function PlaceTree(params: IPlaceTreeProps): JSX.Element;
 declare namespace PlaceTree {
     var defaultProps: {
         title: string;

package/es/PlaceTree/index.js

@@ -25,25 +25,33 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { __rest } from "tslib";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import TreeTitle from '../TreeTitle';
 import { treeHelper } from '@cloud-app-dev/utils';
+import TreeTitle from '../TreeTitle';
 import "./index.css";
 
-function PlaceTree(_a) {
-  var treeData = _a.treeData,
+function PlaceTree(params) {
+  var _a = useMemo(function () {
+    return params;
+  }, [params]),
+      treeData = _a.treeData,
       defaultExpandedKeys = _a.defaultExpandedKeys,
       activeKey = _a.activeKey,
       className = _a.className,
       onKeywordChange = _a.onKeywordChange,
       titleExt = _a.titleExt,
-      title = _a.title,
-      inputPlaceholder = _a.inputPlaceholder,
-      renderHeader = _a.renderHeader,
-      keyword = _a.keyword,
-      treeNodeProps = _a.treeNodeProps,
-      renderSuffix = _a.renderSuffix,
-      showCount = _a.showCount,
-      props = __rest(_a, ["treeData", "defaultExpandedKeys", "activeKey", "className", "onKeywordChange", "titleExt", "title", "inputPlaceholder", "renderHeader", "keyword", "treeNodeProps", "renderSuffix", "showCount"]);
+      params1 = __rest(_a, ["treeData", "defaultExpandedKeys", "activeKey", "className", "onKeywordChange", "titleExt"]);
+
+  var _b = useMemo(function () {
+    return params1;
+  }, [params1]),
+      title = _b.title,
+      inputPlaceholder = _b.inputPlaceholder,
+      renderHeader = _b.renderHeader,
+      keyword = _b.keyword,
+      treeNodeProps = _b.treeNodeProps,
+      renderSuffix = _b.renderSuffix,
+      showCount = _b.showCount,
+      props = __rest(_b, ["title", "inputPlaceholder", "renderHeader", "keyword", "treeNodeProps", "renderSuffix", "showCount"]);
 
   var _useState = useState({
     expandedKeys: defaultExpandedKeys || undefined
@@ -60,9 +68,6 @@ function PlaceTree(_a) {
       expandedKeys: expandedKeys
     });
   }, []);
-  var renderPlaceSuffixFn = useCallback(function (node) {
-    return renderPlaceSuffix(node, showCount, renderSuffix);
-  }, [showCount, renderSuffix]);
   useEffect(function () {
     if (state.expandedKeys) {
       return;
@@ -131,18 +136,18 @@ function PlaceTree(_a) {
     onExpand: onExpand,
     selectedKeys: activeKey ? Array.isArray(activeKey) ? activeKey : [activeKey] : undefined,
     expandedKeys: state.expandedKeys || [],
+    icon: function icon(node) {
+      return /*#__PURE__*/React.createElement(_IconFont, {
+        type: "".concat(node.level >= 5 ? 'icon-S_Place_Place' : title ? 'icon-S_Photo_ListTree' : 'icon-S_Bar_Add')
+      });
+    },
     treeNodeProps: {
-      treeNodeIcon: function treeNodeIcon(node) {
-        return /*#__PURE__*/React.createElement(_IconFont, {
-          type: "".concat(node.level >= 5 ? 'icon-S_Place_Place' : title ? 'icon-S_Photo_ListTree' : 'icon-S_Bar_Add')
-        });
-      },
       key: 'areaCode',
       nameKey: 'areaName',
       keyword: keyword,
-      suffix: renderPlaceSuffixFn,
-      treeNodeClass: treeNodeProps === null || treeNodeProps === void 0 ? void 0 : treeNodeProps.treeNodeClass,
-      disableCheckbox: treeNodeProps === null || treeNodeProps === void 0 ? void 0 : treeNodeProps.disableCheckbox,
+      suffix: function suffix(node) {
+        return renderPlaceSuffix(node, showCount, renderSuffix);
+      },
       RenderTreeTitle: treeNodeProps === null || treeNodeProps === void 0 ? void 0 : treeNodeProps.RenderTreeTitle
     }
   })));

package/es/TreeMode/demo.d.ts

@@ -0,0 +1,2 @@
+declare function App(): JSX.Element;
+export default App;

package/es/TreeMode/demo.js

@@ -0,0 +1,30 @@
+import "antd/lib/config-provider/style";
+import _ConfigProvider from "antd/lib/config-provider";
+import React from 'react';
+import BsTree from './index';
+
+function App() {
+  return /*#__PURE__*/React.createElement(_ConfigProvider, {
+    prefixCls: "cloudapp"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 20,
+      height: 400,
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement(BsTree, {
+    title: "\u8BBE\u5907\u4E1A\u52A1\u6811",
+    mode: "Bz"
+  }), /*#__PURE__*/React.createElement(BsTree, {
+    title: "\u81EA\u5B9A\u4E49\u5206\u7EC4",
+    mode: "Custom"
+  }), /*#__PURE__*/React.createElement(BsTree, {
+    title: "\u884C\u653F\u533A\u5212",
+    mode: "Place"
+  }), /*#__PURE__*/React.createElement(BsTree, {
+    title: "\u7EC4\u7EC7\u673A\u6784",
+    mode: "Org"
+  })));
+}
+
+export default App;

package/es/TreeMode/index.css

@@ -0,0 +1,36 @@
+.bc-type-tree-layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--bd-color);
+  margin-left: -1px;
+}
+.bc-type-tree-layout .lm-c-tree-title-part {
+  border-bottom: 1px solid var(--bd-color);
+  background-color: var(--form-bg-light);
+}
+.bc-type-tree-layout > .lm-base-tree-component {
+  flex: 1;
+  overflow: auto;
+}
+.bc-type-tree-layout .lm-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper:hover:after,
+.bc-type-tree-layout .lm-base-tree-component .cloudapp-tree-treenode span.cloudapp-tree-node-content-wrapper.cloudapp-tree-node-selected:after {
+  left: 10px;
+  width: calc(100% - 10px);
+}
+.bc-type-tree-layout .cloudapp-tree {
+  height: 100%;
+  overflow: auto;
+}
+.bc-type-tree-layout .anticon {
+  font-size: var(--fs);
+}
+.bc-type-tree-layout .cloudapp-tree-title {
+  font-size: var(--fs-small);
+  flex: 1;
+}
+.bc-type-tree-layout .cloudapp-tree-title > span {
+  min-width: 100%;
+  display: inline-flex;
+  justify-content: space-between;
+}

package/es/TreeMode/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { BaseTreeProps } from '@cloud-app-dev/basic-components/es/Tree';
+import './index.less';
+interface IBsTreeProps extends BaseTreeProps {
+    title?: React.ReactNode;
+    inputPlaceholder?: string;
+    renderHeader?: () => JSX.Element;
+    /**
+     * @description 需要默认选中时触发 事件
+     */
+    onDefailtSelect?: (id?: string) => void;
+    mode?: 'Bz' | 'Custom' | 'Place' | 'Org';
+}
+declare function TreeMode({ title, className, renderHeader, inputPlaceholder, treeNodeProps, onDefailtSelect, mode, ...props }: IBsTreeProps): JSX.Element;
+declare namespace TreeMode {
+    var defaultProps: {
+        mode: string;
+        className: string;
+    };
+}
+export default TreeMode;