@zat-design/sisyphus-react 3.0.16-beta.2 → 3.1.4

package/es/ProTreeModal/index.js

@@ -1,38 +1,78 @@
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+import "antd/es/checkbox/style";
+import _Checkbox from "antd/es/checkbox";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import "antd/es/message/style";
 import _message from "antd/es/message";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import "antd/es/input/style";
-import _Input from "antd/es/input";
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef } from 'react';
 import { useDeepCompareEffect, useSetState, useRequest as useRequestFunc } from 'ahooks';
-import { ProDrawerForm, useProConfig } from 'zat-design-pro-component';
 import { cloneDeep, isFunction } from 'lodash';
-import { Trigger, ListView, TreeView } from './components';
-import { getFlatTreeData, filterCheckedNodes, getChildrenKeys, findTreeNodeByKey } from './utils';
+import { ReactSVG } from 'react-svg';
+import classNames from 'classnames';
+import { ProDrawerForm, useProConfig } from '../index';
+import { Trigger, ListView, TreeView, Cascader } from './components';
+import { getFlatTreeData, filterCheckedNodes, getChildrenKeys, findTreeNodeByKey, getAllKeys, transformMessage } from './utils';
+import searchSVG from '../assets/input-search.svg';
 import './style/index.less';
-var Search = _Input.Search;
+var LIST = 'LIST';
+var TREE = 'TREE';
+export var CASCADER = 'CASCADER';
 var ProTreeModal = function ProTreeModal(props) {
+  var _props$otherProps, _props$otherProps2;
   var _useProConfig = useProConfig('ProEnum'),
     _useProConfig$dics = _useProConfig.dics,
     dics = _useProConfig$dics === void 0 ? {} : _useProConfig$dics;
-  var value = props.value,
+  var listRef = useRef();
+  var open = props.open,
+    value = props.value,
     onChange = props.onChange,
     dataSource = props.dataSource,
     trigger = props.trigger,
     _props$mode = props.mode,
-    mode = _props$mode === void 0 ? 'list' : _props$mode,
+    mode = _props$mode === void 0 ? 'tree' : _props$mode,
     enumCode = props.code,
     _props$title = props.title,
     title = _props$title === void 0 ? '请选择' : _props$title,
     useRequest = props.useRequest,
+    allValue = props.allValue,
     _props$showCodeName = props.showCodeName,
     showCodeName = _props$showCodeName === void 0 ? false : _props$showCodeName,
+    _props$checkStrictly = props.checkStrictly,
+    checkStrictly = _props$checkStrictly === void 0 ? false : _props$checkStrictly,
+    tags = props.tags,
+    placeholder = props.placeholder,
+    _props$labelInValue = props.labelInValue,
+    labelInValue = _props$labelInValue === void 0 ? false : _props$labelInValue,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    min = props.min,
+    max = props.max,
+    draggable = props.draggable,
+    span = props.span,
+    _props$fieldNames = props.fieldNames,
+    fieldNames = _props$fieldNames === void 0 ? {
+      label: 'label',
+      value: 'value',
+      children: 'children'
+    } : _props$fieldNames,
     _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? !!props.isView || !!props.disabled : _props$disabled,
-    transformResponse = props.transformResponse;
+    disabled = _props$disabled === void 0 ? props.disabled || (props === null || props === void 0 ? void 0 : (_props$otherProps = props.otherProps) === null || _props$otherProps === void 0 ? void 0 : _props$otherProps.isView) || false : _props$disabled,
+    _props$isView = props.isView,
+    isView = _props$isView === void 0 ? (props === null || props === void 0 ? void 0 : (_props$otherProps2 = props.otherProps) === null || _props$otherProps2 === void 0 ? void 0 : _props$otherProps2.isView) || false : _props$isView,
+    transformResponse = props.transformResponse,
+    optionRender = props.optionRender,
+    openChange = props.openChange,
+    maxMessage = props.maxMessage;
+  var modeType = mode.toUpperCase();
+  var fieldNameLabel = fieldNames.label;
+  var fieldNameValue = fieldNames.value;
   var _useSetState = useSetState({
       open: false,
       checkedValues: [],
@@ -40,7 +80,9 @@ var ProTreeModal = function ProTreeModal(props) {
       treeViewData: [],
       originalTreeData: [],
       flatTreeData: [],
-      searchStr: ''
+      searchStr: '',
+      checkAll: false,
+      allKeys: []
     }),
     _useSetState2 = _slicedToArray(_useSetState, 2),
     state = _useSetState2[0],
@@ -48,28 +90,23 @@ var ProTreeModal = function ProTreeModal(props) {
   var fetchFunction = useRequestFunc(useRequest === null || useRequest === void 0 ? void 0 : useRequest.service, _objectSpread({
     manual: true,
     onSuccess: function onSuccess(res) {
+      var _res$status = res.status,
+        status = _res$status === void 0 ? 200 : _res$status,
+        msg = res.message;
+      var responseData = res === null || res === void 0 ? void 0 : res.data;
       if (transformResponse && typeof transformResponse === 'function') {
-        var responseData = transformResponse(res);
-        setState({
-          treeData: responseData,
-          originalTreeData: responseData,
-          flatTreeData: getFlatTreeData(responseData)
-        });
-      } else {
-        var _res$status = res.status,
-          status = _res$status === void 0 ? 200 : _res$status,
-          msg = res.message,
-          data = res.data;
-        if (status !== 200) {
-          _message.error(msg);
-          return;
-        }
-        setState({
-          treeData: data,
-          originalTreeData: data,
-          flatTreeData: getFlatTreeData(data)
-        });
+        responseData = transformResponse(res);
+      }
+      if (status !== 200) {
+        _message.error(msg);
+        return;
       }
+      setState({
+        treeData: responseData,
+        originalTreeData: responseData,
+        flatTreeData: getFlatTreeData(responseData, fieldNames, modeType),
+        allKeys: getAllKeys(responseData, fieldNames)
+      });
     },
     debounceWait: 300
   }, useRequest === null || useRequest === void 0 ? void 0 : useRequest.options));
@@ -78,7 +115,8 @@ var ProTreeModal = function ProTreeModal(props) {
       setState({
         treeData: dataSource,
         originalTreeData: cloneDeep(dataSource),
-        flatTreeData: getFlatTreeData(dataSource)
+        flatTreeData: getFlatTreeData(dataSource, fieldNames),
+        allKeys: getAllKeys(dataSource, fieldNames)
       });
     } else if (enumCode) {
       var dictEnum = dics[enumCode] || [];
@@ -94,7 +132,8 @@ var ProTreeModal = function ProTreeModal(props) {
       setState({
         treeData: dictEnum,
         originalTreeData: cloneDeep(dictEnum),
-        flatTreeData: getFlatTreeData(dictEnum)
+        flatTreeData: getFlatTreeData(dictEnum, fieldNames),
+        allKeys: getAllKeys(dictEnum, fieldNames)
       });
     }
   }, [dataSource, enumCode]);
@@ -116,23 +155,112 @@ var ProTreeModal = function ProTreeModal(props) {
   }, [useRequest === null || useRequest === void 0 ? void 0 : useRequest.options]);
   useEffect(function () {
     setState({
-      checkedValues: value || []
+      open: open
     });
-  }, [value]);
+  }, [open]);
+  useEffect(function () {
+    if (value) {
+      var checkedValues = [];
+      var treeData = state.treeData,
+        allKeys = state.allKeys,
+        originalTreeData = state.originalTreeData;
+      var treeViewData = [];
+      if (allValue && typeof value === 'string') {
+        if (modeType === LIST) {
+          checkedValues = treeData.map(function (item) {
+            return item[fieldNameValue];
+          }) || [];
+        } else if (modeType === TREE) {
+          checkedValues = allKeys;
+        }
+      } else {
+        if (!Array.isArray(value)) {
+          console.error('Please pass in the array');
+          return;
+        }
+        // 开启 labelInValue [{ label:xx, value: ""}] 形式、需要取出来 value
+        if (labelInValue) {
+          var isObjectArray = value.every(function (element) {
+            return _typeof(element) === 'object' && element !== null;
+          });
+          if (!isObjectArray) {
+            console.error('Please enter an array object');
+            checkedValues = [];
+          }
+          checkedValues = value.map(function (item) {
+            return item[fieldNameValue];
+          });
+        } else {
+          checkedValues = value;
+        }
+      }
+      treeViewData = filterCheckedNodes(originalTreeData, checkedValues, '', fieldNames);
+      setState({
+        checkedValues: checkedValues,
+        checkAll: checkedValues.length === allKeys.length,
+        treeViewData: treeViewData
+      });
+    }
+  }, [value, state.allKeys]);
   var handleClick = function handleClick() {
     setState({
       open: true
     });
+    openChange === null || openChange === void 0 ? void 0 : openChange(true);
   };
-  var handleClearValue = function handleClearValue() {};
   /**
    * close Drawer and onChange(values)
    */
   var handleFinish = function handleFinish() {
-    onChange && onChange(state.checkedValues);
+    // 全选的时候返回 allValue 标记即可
+    if (allValue !== undefined && state.checkAll && !draggable) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(allValue);
+    } else if (draggable && span) {
+      var _listRef$current;
+      // 开启 draggable 使用拖拽后的顺序
+      var checkedList = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.onChange();
+      onChange(checkedList);
+    } else {
+      var values = [];
+      if (labelInValue) {
+        state.checkedValues.forEach(function (val) {
+          var option = state.flatTreeData.find(function (item) {
+            return item[fieldNameValue] === val;
+          });
+          option && values.push(option);
+        });
+      } else {
+        values = state.checkedValues;
+      }
+      if (min) {
+        if (values.length < min) {
+          _message.error("\u6700\u5C11\u9009\u62E9".concat(min, "\u4E2A"));
+          return;
+        }
+      }
+      onChange === null || onChange === void 0 ? void 0 : onChange(values);
+    }
     setState({
       open: false
     });
+    openChange === null || openChange === void 0 ? void 0 : openChange(false);
+  };
+  /**
+   * clear all checked
+   */
+  var handleClearAll = function handleClearAll() {
+    var _state$flatTreeData$f;
+    // 处理 ProTable 场景下 disabled 的不需要被清理
+    var _checkedValues = span ? (_state$flatTreeData$f = state.flatTreeData.filter(function (item) {
+      return item.disabled;
+    })) === null || _state$flatTreeData$f === void 0 ? void 0 : _state$flatTreeData$f.map(function (item) {
+      return item[fieldNameValue];
+    }) : [];
+    setState({
+      checkedValues: _checkedValues,
+      treeViewData: [],
+      checkAll: false
+    });
   };
   /**
    * Drawer close
@@ -141,39 +269,81 @@ var ProTreeModal = function ProTreeModal(props) {
     setState({
       open: false
     });
+    openChange === null || openChange === void 0 ? void 0 : openChange(false);
   };
   /**
-   * checkbox/tree selected change values
+   * checkbox/list selected change values
    * @param values
    */
-  var handleOnChange = function handleOnChange(e, code) {
+  var handleListCheckChange = function handleListCheckChange(e, code) {
     var checkedValues = _toConsumableArray(state.checkedValues);
     var checked = e.target.checked;
     if (!checked) {
       checkedValues = checkedValues.filter(function (value) {
         return value !== code;
       });
+    } else if (draggable && span) {
+      // 固定在右侧的情况
+      var fixedOption = state.flatTreeData.find(function (item) {
+        return item.fixed === 'right';
+      }) || {};
+      var fixedIdx = checkedValues.findIndex(function (value) {
+        return value === fixedOption[fieldNameValue];
+      });
+      if (fixedIdx >= 0) {
+        checkedValues.splice(fixedIdx, 0, code);
+      } else {
+        checkedValues.push(code);
+      }
     } else {
       checkedValues.push(code);
     }
+    if (max && checkedValues.length > max) {
+      _message.error(maxMessage ? transformMessage({
+        max: max
+      }, maxMessage) : "\u6700\u591A\u9009\u62E9".concat(max, "\u4E2A"));
+      return;
+    }
+    setState({
+      checkedValues: checkedValues,
+      checkAll: checkedValues.length === state.flatTreeData.length
+    });
+  };
+  var handleDragEndChange = function handleDragEndChange(checkedValues) {
     setState({
       checkedValues: checkedValues
     });
   };
   var onCheck = function onCheck(checkedKeys, info) {
     var checkedValues = _toConsumableArray(state.checkedValues);
+    var originalTreeData = state.originalTreeData;
     // 此时应该取消掉自身并包含它所有的子集
-    if (!info.checked) {
-      checkedValues = checkedValues.filter(function (key) {
-        return key !== info.node.key && !info.halfCheckedKeys.includes(key);
-      });
-      // 把所有的子节点也要取消
+    if (!info.checked && !checkStrictly) {
+      // 1. 取消自身
+      // 2. 把所有的子节点也要取消
       var childrenkeys = [];
-      getChildrenKeys(info.node, childrenkeys);
+      getChildrenKeys(info.node, childrenkeys, fieldNames, 'treeCheck');
       checkedValues = checkedValues.filter(function (key) {
         return !childrenkeys.includes(key);
       });
+      // 3. 取消父节点
+      var parentNodes = findTreeNodeByKey(originalTreeData, info.node.key, fieldNames);
+      var parentKeys = parentNodes.reduce(function (prev, curr) {
+        return prev.concat(curr[fieldNameValue]);
+      }, []);
+      checkedValues = checkedValues.filter(function (key) {
+        return !parentKeys.includes(key);
+      });
     } else {
+      // checkStrictly 模式下取 checkedKeys.checked 或者自身的 key
+      if (checkStrictly) {
+        if (!info.checked) {
+          checkedValues = checkedValues.filter(function (key) {
+            return key !== info.node.key;
+          });
+        }
+        checkedKeys = checkedKeys.checked || [];
+      }
       checkedKeys.forEach(function (key) {
         var exist = checkedValues.includes(key);
         if (info.checked && !exist) {
@@ -182,11 +352,24 @@ var ProTreeModal = function ProTreeModal(props) {
       });
     }
     // 根据选中的筛选出 viewTreeData
-    var originalTreeData = state.originalTreeData;
-    var treeViewData = filterCheckedNodes(originalTreeData, checkedValues);
+    var treeViewData = [];
+    if (!checkStrictly) {
+      treeViewData = filterCheckedNodes(originalTreeData, checkedValues, '', fieldNames);
+    } else {
+      treeViewData = state.flatTreeData.filter(function (item) {
+        return checkedValues.includes(item[fieldNameValue]);
+      });
+    }
+    if (max && checkedValues.length > max) {
+      _message.error(maxMessage ? transformMessage({
+        max: max
+      }, maxMessage) : "\u6700\u591A\u9009\u62E9".concat(max, "\u4E2A"));
+      return;
+    }
     setState({
       checkedValues: checkedValues,
-      treeViewData: treeViewData
+      treeViewData: treeViewData,
+      checkAll: state.allKeys.length === checkedValues.length
     });
   };
   /**
@@ -197,7 +380,8 @@ var ProTreeModal = function ProTreeModal(props) {
     setState({
       checkedValues: state.checkedValues.filter(function (value) {
         return value !== fileNameValue;
-      })
+      }),
+      checkAll: false
     });
   };
   /**
@@ -207,47 +391,55 @@ var ProTreeModal = function ProTreeModal(props) {
    */
   var treeFilterClose = function treeFilterClose(fileNamekey, node) {
     var checkedValues = _toConsumableArray(state.checkedValues);
+    var treeViewData = [];
     var originalTreeData = state.originalTreeData;
-    // 1. 取消自身
-    // checkedValues = checkedValues.filter((key) => key !== fileNamekey);
-    // 2. 把所有的子节点也要取消
-    var childrenkeys = [];
-    getChildrenKeys(node, childrenkeys);
-    checkedValues = checkedValues.filter(function (key) {
-      return !childrenkeys.includes(key);
-    });
-    // 3. 取消父节点
-    var parentNodes = findTreeNodeByKey(originalTreeData, fileNamekey);
-    var parentKeys = parentNodes.reduce(function (prev, curr) {
-      return prev.concat(curr.key);
-    }, []);
-    checkedValues = checkedValues.filter(function (key) {
-      return !parentKeys.includes(key);
-    });
-    // 根据选中的筛选出 viewTreeData
-    var treeViewData = filterCheckedNodes(originalTreeData, checkedValues);
+    if (checkStrictly) {
+      checkedValues = checkedValues.filter(function (key) {
+        return key !== fileNamekey;
+      });
+      // handleFilterClose
+      treeViewData = state.flatTreeData.filter(function (item) {
+        return checkedValues.includes(item[fieldNameValue]);
+      });
+    } else {
+      // 1. 取消自身
+      checkedValues = checkedValues.filter(function (key) {
+        return key !== fileNamekey;
+      });
+      // 2. 把所有的子节点也要取消
+      var childrenkeys = [];
+      getChildrenKeys(node, childrenkeys, fieldNames, 'treeClose');
+      checkedValues = checkedValues.filter(function (key) {
+        return !childrenkeys.includes(key);
+      });
+      // 3. 取消父节点
+      var parentNodes = findTreeNodeByKey(originalTreeData, fileNamekey, fieldNames);
+      var parentKeys = parentNodes.reduce(function (prev, curr) {
+        return prev.concat(curr[fieldNames.value]);
+      }, []);
+      checkedValues = checkedValues.filter(function (key) {
+        return !parentKeys.includes(key);
+      });
+      // 根据选中的筛选出 viewTreeData
+      treeViewData = filterCheckedNodes(originalTreeData, checkedValues, '', fieldNames);
+    }
     setState({
       checkedValues: checkedValues,
-      treeViewData: treeViewData
-    });
-  };
-  /**
-   * clear all checked
-   */
-  var handleClearAll = function handleClearAll() {
-    setState({
-      checkedValues: [],
-      treeViewData: []
+      treeViewData: treeViewData,
+      checkAll: false
     });
   };
-  var onSearch = function onSearch(str) {
-    if (mode === 'list') {
-      var data = state.originalTreeData.filter(function (item) {
-        return item.title.includes(str);
+  var onSearch = function onSearch(e) {
+    var str = e.target.value;
+    if (modeType === LIST || modeType === CASCADER) {
+      var isCASCADER = modeType === CASCADER;
+      var data = state.flatTreeData.filter(function (item) {
+        var title = isCASCADER ? item === null || item === void 0 ? void 0 : item.title : item[fieldNameLabel];
+        return title.includes(str);
       });
       setState({
         searchStr: str,
-        treeData: data
+        treeData: !str ? state.originalTreeData : data
       });
     } else {
       setState({
@@ -260,74 +452,249 @@ var ProTreeModal = function ProTreeModal(props) {
    * default example and you can customize trigger={<Button>打开</Button>}
    * @returns
    */
-  var renderTrigger = function renderTrigger() {
+  var TriggerComponent = useMemo(function () {
     if (trigger && /*#__PURE__*/React.isValidElement(trigger)) {
-      return /*#__PURE__*/React.createElement("div", {
-        onClick: handleClick
-      }, trigger);
+      return _jsx("div", {
+        onClick: handleClick,
+        children: trigger
+      });
     }
-    return /*#__PURE__*/React.createElement(Trigger, {
+    return _jsx(Trigger, {
       checkedValues: state.checkedValues,
       value: value,
       handleClick: handleClick,
-      handleClearAll: handleClearAll
+      handleClearAll: handleClearAll,
+      checkAll: state.checkAll,
+      triggerStyle: style,
+      disabled: disabled,
+      isView: isView
+    });
+  }, [state.checkedValues, state.checkAll, style, disabled, isView]);
+  /**
+   * 全选操作
+   */
+  var handleAllCheck = function handleAllCheck(e) {
+    var checked = e.target.checked;
+    var checkedValues = [];
+    var treeViewData = [];
+    if (modeType === LIST || modeType === CASCADER) {
+      if (checked) {
+        checkedValues = state.flatTreeData.map(function (item) {
+          return item[fieldNameValue];
+        });
+      } else if (!checked && span) {
+        // ProTable 场景下 disabled 不取消掉
+        checkedValues = state.flatTreeData.filter(function (item) {
+          return item.disabled;
+        }).map(function (item) {
+          return item[fieldNameValue];
+        });
+      } else if (!checked) {
+        checkedValues = [];
+      }
+    } else if (modeType === TREE) {
+      checkedValues = checked ? state.allKeys : [];
+      if (checkStrictly) {
+        treeViewData = _toConsumableArray(state.flatTreeData);
+      } else {
+        treeViewData = filterCheckedNodes(state.originalTreeData, checkedValues, '', fieldNames);
+      }
+    }
+    if (max && checkedValues.length > max) {
+      _message.error(maxMessage ? transformMessage({
+        max: max
+      }, maxMessage) : "\u6700\u591A\u9009\u62E9".concat(max, "\u4E2A"));
+      return;
+    }
+    setState({
+      checkedValues: checkedValues,
+      checkAll: checked,
+      treeViewData: treeViewData
     });
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "pro-tree-modal"
-  }, renderTrigger(), /*#__PURE__*/React.createElement(ProDrawerForm, {
-    onOk: handleFinish,
-    onCancel: handleClose,
-    open: state.open,
-    title: title,
-    showType: "Modal"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "pro-tree-modal-content"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "pro-tree-modal-box"
-  }, /*#__PURE__*/React.createElement(Search, {
-    disabled: disabled,
-    allowClear: true,
-    className: "pro-tree-modal-search",
-    onSearch: onSearch
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "pro-tree-modal-tree-warp"
-  }, mode === 'list' ? /*#__PURE__*/React.createElement(ListView, {
-    treeData: state.treeData,
-    checkedValues: state.checkedValues,
-    handleOnChange: handleOnChange,
-    searchStr: state.searchStr,
-    showCodeName: showCodeName,
-    disabled: disabled
-  }) : /*#__PURE__*/React.createElement(TreeView, {
-    treeData: state.treeData,
-    originalTreeData: state.originalTreeData,
-    flatTreeData: state.flatTreeData,
-    checkedValues: state.checkedValues,
-    onCheck: onCheck,
-    searchStr: state.searchStr,
-    showCodeName: showCodeName,
-    disabled: disabled
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "pro-tree-modal-box"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "pro-tree-modal-box-header"
-  }, /*#__PURE__*/React.createElement("span", null, "\u5DF2\u9009 (", state.checkedValues.length, ") "), /*#__PURE__*/React.createElement("a", {
-    onClick: handleClearAll
-  }, "\u6E05\u7A7A\u5168\u90E8")), /*#__PURE__*/React.createElement("div", {
-    className: "pro-tree-modal-tree-warp"
-  }, mode === 'list' ? /*#__PURE__*/React.createElement(ListView, {
-    mode: "view",
-    showCodeName: showCodeName,
-    treeData: state.originalTreeData.filter(function (item) {
-      return state.checkedValues.includes(item.value);
-    }),
-    handleFilterClose: handleFilterClose
-  }) : /*#__PURE__*/React.createElement(TreeView, {
-    mode: "view",
-    showCodeName: showCodeName,
-    treeData: state.treeViewData,
-    handleFilterClose: treeFilterClose
-  }))))));
+  /**
+   * 左侧容器、分为三种 list、tree、Cascader
+   * @returns
+   */
+  var renderContainer = function renderContainer() {
+    if (state.treeData.length === 0 && state.searchStr) {
+      return _jsx("div", {
+        className: "pro-tree-modal-no-checks",
+        children: "\u8BF6\u5440\uFF0C\u6CA1\u6709\u627E\u5230\u60A8\u8981\u67E5\u8BE2\u7684\u5185\u5BB9"
+      });
+    }
+    switch (modeType) {
+      case LIST:
+        return _jsx(ListView, {
+          treeData: state.treeData,
+          optionRender: optionRender,
+          checkedValues: state.checkedValues,
+          handleOnChange: handleListCheckChange,
+          searchStr: state.searchStr,
+          showCodeName: showCodeName,
+          disabled: disabled || isView,
+          fieldNames: fieldNames,
+          span: span
+        });
+      case TREE:
+        return _jsx(TreeView, {
+          treeData: state.treeData,
+          originalTreeData: state.originalTreeData,
+          flatTreeData: state.flatTreeData,
+          checkedValues: state.checkedValues,
+          onCheck: onCheck,
+          optionRender: optionRender,
+          searchStr: state.searchStr,
+          showCodeName: showCodeName,
+          disabled: disabled || isView,
+          checkStrictly: checkStrictly,
+          tags: tags,
+          fieldNames: fieldNames
+        });
+      case CASCADER:
+        if (state.searchStr && state.treeData.length) {
+          return _jsx(ListView, {
+            treeData: state.treeData,
+            modeType: CASCADER,
+            optionRender: optionRender,
+            checkedValues: state.checkedValues,
+            handleOnChange: handleListCheckChange,
+            searchStr: state.searchStr,
+            showCodeName: showCodeName,
+            disabled: disabled || isView,
+            fieldNames: fieldNames
+          });
+        }
+        return _jsx(Cascader, {
+          dataSource: state.treeData,
+          fieldNames: fieldNames,
+          checkedValues: state.checkedValues,
+          searchStr: state.searchStr,
+          showCodeName: showCodeName,
+          handleOnChange: handleListCheckChange,
+          optionRender: optionRender
+        });
+      default:
+        break;
+    }
+  };
+  var listTreeData = useMemo(function () {
+    var checkListOptions = [];
+    state.checkedValues.forEach(function (key) {
+      var option = state.flatTreeData.find(function (item) {
+        return item[fieldNameValue] === key;
+      });
+      if (option) {
+        checkListOptions.push(option);
+      }
+    });
+    return checkListOptions;
+  }, [state.checkedValues, state.flatTreeData]);
+  /**
+   * 勾选后的右侧展示
+   * @returns
+   */
+  var renderView = function renderView() {
+    if (state.checkedValues.length === 0) {
+      return _jsx("div", {
+        className: "pro-tree-modal-no-checks",
+        children: "\u6682\u65E0\u5DF2\u9009"
+      });
+    }
+    switch (modeType) {
+      case LIST:
+      case CASCADER:
+        return _jsx(ListView, {
+          mode: "view",
+          showCodeName: showCodeName,
+          treeData: listTreeData,
+          fieldNames: fieldNames,
+          disabled: disabled || isView,
+          draggable: draggable,
+          flatTreeData: state.flatTreeData,
+          span: span,
+          ref: listRef,
+          optionRender: optionRender,
+          handleFilterClose: handleFilterClose,
+          handleDragEndChange: handleDragEndChange
+        });
+      case TREE:
+        return _jsx(TreeView, {
+          mode: "view",
+          checkStrictly: checkStrictly,
+          showCodeName: showCodeName,
+          treeData: checkStrictly ? listTreeData : state.treeViewData,
+          tags: tags,
+          fieldNames: fieldNames,
+          disabled: disabled || isView,
+          draggable: draggable,
+          min: min,
+          max: max,
+          ref: listRef,
+          handleFilterClose: treeFilterClose,
+          optionRender: optionRender,
+          handleDragEndChange: handleDragEndChange
+        });
+      default:
+        break;
+    }
+  };
+  return _jsx(_Fragment, {
+    children: _jsxs("div", {
+      className: "pro-tree-modal",
+      children: [open === undefined ? TriggerComponent : null, _jsx(ProDrawerForm, {
+        onOk: handleFinish,
+        onCancel: handleClose,
+        okDisabled: disabled,
+        open: state.open,
+        title: title,
+        showType: "Modal",
+        className: "pro-tree-modal-container",
+        extraLeft: allValue !== undefined ? _jsx(_Checkbox, {
+          checked: state.checkAll,
+          disabled: disabled,
+          onChange: handleAllCheck,
+          children: "\u5168\u9009"
+        }) : null,
+        children: _jsxs("div", {
+          className: "pro-tree-modal-content",
+          children: [_jsxs("div", {
+            className: classNames('pro-tree-modal-box', modeType === CASCADER || modeType === LIST && span ? 'pro-tree-modal-cascader-box' : ''),
+            children: [_jsx(_Input, {
+              disabled: disabled,
+              allowClear: true,
+              value: state.searchStr,
+              placeholder: placeholder || '请输入',
+              className: "pro-tree-modal-search",
+              onChange: onSearch,
+              prefix: _jsx(ReactSVG, {
+                className: "viewSvg",
+                src: searchSVG
+              })
+            }), _jsx("div", {
+              className: "pro-tree-modal-tree-warp",
+              children: renderContainer()
+            })]
+          }), _jsxs("div", {
+            className: classNames('pro-tree-modal-box', modeType === CASCADER || modeType === LIST && span ? 'pro-tree-modal-cascader-box-view' : ''),
+            children: [_jsxs("div", {
+              className: "pro-tree-modal-box-header",
+              children: [_jsxs("span", {
+                children: ["\u5DF2\u9009 (", state.checkedValues.length, "/", max || state.flatTreeData.length, ")"]
+              }), _jsx(_Button, {
+                disabled: disabled,
+                type: "link",
+                onClick: handleClearAll,
+                children: "\u6E05\u7A7A\u5168\u90E8"
+              })]
+            }), _jsx("div", {
+              className: "pro-tree-modal-tree-warp  pro-transfer-right",
+              children: renderView()
+            })]
+          })]
+        })
+      })]
+    })
+  });
 };
 export default ProTreeModal;