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

package/lib/ProTreeModal/propsType.d.ts

@@ -1,26 +1,83 @@
-import { ReactNode } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 import { Service, Options } from 'ahooks/lib/useRequest/src/types';
+import { ProFormOtherProps } from '../ProForm/propsType';
+export interface TreeDataProps {
+    label: string;
+    value: string;
+    children?: TreeDataProps[];
+    /** 禁用不可操作 */
+    disabled?: boolean;
+    /** 处理固定场景 */
+    fixed?: 'left' | 'right';
+    checkable?: boolean;
+    [key: string]: any;
+}
+export type AllValueType = string | number;
+export interface ProTreeModalAction {
+    onChange: () => AllValueType[];
+}
+export interface FieldNamesType {
+    label: string;
+    value: string;
+    children?: string;
+}
 export interface ProTreeModalProps {
-    value?: string[];
-    open: boolean;
-    mode?: 'tree' | 'list';
-    isView?: string;
+    /** value */
+    value?: AllValueType | string[];
+    /** 默认  label、value、children */
+    fieldNames?: FieldNamesType;
+    /** 自定义控制 modal、此时没有 trigger */
+    open?: boolean;
+    /** 列表时候一行放几个 */
+    span?: number;
+    /** 展示类型、默认list 列表展示形式 */
+    mode?: 'tree' | 'list' | 'Cascader' | 'Tree' | 'List';
+    /** 开启后、提交给后端 [{ label:xx, value: ""}] 形式  */
+    labelInValue?: boolean;
+    /** 查看模式、同 disabled 一样 */
+    isView?: boolean;
+    /** 使用ProEnum 的数据源 */
     code?: string;
-    trigger: string | ReactNode;
+    /** 触发弹框展开的容器 */
+    trigger?: string | ReactNode;
+    /** 是否展示 code-label 形式 */
     showCodeName?: boolean;
-    dataSource: any[];
+    /** 静态数据源 */
+    dataSource?: TreeDataProps[];
+    /** 最小选择个数 */
+    min?: number;
+    /** 最大选择个数 */
+    max?: number;
+    /** 超过最大数量的提示信息 */
+    maxMessage?: string;
+    /** 当为列表时可开启右侧拖动 */
+    draggable?: boolean;
+    /** 禁用 */
     disabled?: boolean;
-    readOnly?: boolean;
+    /** 弹框的 title */
     title?: string | ReactNode;
+    /** 全选的标识给后端 */
+    allValue?: string | number;
+    /** 提示语 */
+    placeholder?: string;
+    /** 父子节点选中状态不再关联 */
     checkStrictly?: boolean;
-    onChange?: (values: string[]) => void;
-    /** 自定义展示 */
-    optionRender: (item: any) => string | ReactNode;
-    /** 对后台返回数据进行格式化 */
-    transformResponse?: (data: any) => any[];
+    /** trigger 样式设置 */
+    style?: CSSProperties;
+    /** tags 集合 */
+    tags?: string[];
+    otherProps?: ProFormOtherProps;
     /** 远程请求接口 */
     useRequest?: {
-        service: Service<any, any>;
+        service?: Service<any, any>;
         options?: Options<any, any>;
     };
+    /** value 的回调 */
+    onChange?: (values: AllValueType[] | AllValueType) => void;
+    /** 自定义展示 */
+    optionRender?: (item: any, searchStr: string) => string | ReactNode;
+    /** 对后台返回数据进行格式化 */
+    transformResponse?: (data: any) => TreeDataProps[];
+    /** 弹框打开/关闭回调 */
+    openChange?: (open: boolean) => void;
 }

package/lib/ProTreeModal/style/index.less

@@ -1,94 +1,167 @@
-.pro-modal .ant-modal-body {
-  max-height: 100%;
+.pro-tree-modal-container .ant-modal-content .ant-modal-body {
+  max-height: 498px;
 }
+
 .pro-tree-modal {
-  .ant-input-group-wrapper {
-    .ant-input-suffix {
-      display: none;
-    }
-    &:hover .ant-input-suffix {
-      display: block;
-    }
-  }
   &-placeholder {
     color: #939499;
   }
+
   &-content {
-    display: flex;
+    display       : flex;
     flex-direction: row;
-    height: 482px;
+    height        : 482px;
+    margin-bottom : var(--zaui-space-size-md, 16px);
 
     .ant-tree-checkbox {
       margin-top: 2px;
     }
+
     .ant-tree-switcher {
-      width: 20px;
-      line-height: 20px;
+      width      : var(--zaui-font-size-xxl, 20px);
+      line-height: var(--zaui-font-size-xxl, 20px);
     }
 
     .ant-tree-treenode {
-      width: 100%;
-      padding: 0;
-      padding-bottom: 12px;
-      color: var(--zaui-text);
-      font-size: var(--zaui-font-size);
-      font-family: PingFangSC-Regular, PingFang SC;
-      line-height: 20px;
+      width         : 100%;
+      padding       : 0;
+      padding-bottom: var(--zaui-font-size-sm, 12px);
+      color         : var(--zaui-text);
+      font-size     : var(--zaui-font-size, 14px);
+      font-family   : PingFangSC-Regular, PingFang SC;
+      line-height   : var(--zaui-font-size-xxl, 20px);
     }
+
     .ant-tree-node-content-wrapper {
-      min-height: 20px;
-      line-height: 20px;
+      min-height : var(--zaui-font-size-xxl, 20px);
+      line-height: var(--zaui-font-size-xxl, 20px);
     }
 
     .ant-tree-node-content-wrapper {
       width: 100%;
     }
   }
+
   &-box {
-    width: 456px;
-    height: 100%;
-    overflow-y: auto;
-    color: var(--zaui-text);
-    font-size: var(--zaui-font-size);
-    font-family: PingFangSC-Regular, PingFang SC;
-    line-height: 20px;
-    border: 1px solid #e6e6e6;
-    border-radius: 5px;
+    display       : flex;
+    flex-direction: column;
+    width         : 456px;
+    height        : 100%;
+    color         : var(--zaui-text);
+    font-size     : var(--zaui-font-size, 14px);
+    font-family   : PingFangSC-Regular, PingFang SC;
+    line-height   : var(--zaui-font-size-xxl, 20px);
+    border        : 1px solid #e6e6e6;
+    border-radius : var(--zaui-border-radius, 4px);
+
     &:first-child {
-      margin-right: var(--zaui-space-size-md);
+      margin-right: var(--zaui-space-size-md, 16px);
     }
+
+    .viewSvg>div {
+      display: flex;
+    }
+
+    /* 修改滚动条样式 */
+    ::-webkit-scrollbar {
+      width : 0;
+      height: 0;
+    }
+  }
+
+  &-cascader-box {
+    width: 592px;
+  }
+
+  &-cascader-box-view {
+    width: 320px;
   }
 
   &-search {
-    padding: var(--zaui-space-size-sm);
-    padding-bottom: 0;
+    width : auto;
+    margin: var(--zaui-space-size-sm, 8px) var(--zaui-space-size-md, 16px) 0;
   }
+
+  &-cascader-flex {
+    display       : flex;
+    flex-direction: row;
+    height        : 100%;
+    overflow      : hidden;
+  }
+
+  &-cascader-warp {
+    display       : flex;
+    flex-direction: column;
+    width         : 350px;
+    margin-left   : var(--zaui-space-size-md, 16px);
+    overflow      : auto;
+
+    &:first-child {
+      width       : 192px;
+      margin-left : 0;
+      border-right: 1px solid #e6e6e6;
+    }
+  }
+
   &-box-header {
-    display: flex;
-    align-items: center;
+    display        : flex;
+    align-items    : center;
     justify-content: space-between;
-    height: 40px;
-    padding: 0 12px;
-    background: #fafafa;
-    span {
+    height         : 40px;
+    padding        : 0 var(--zaui-space-size-md, 16px);
+    background     : #fafafa;
+
+    &:first-child {
       color: #616161;
     }
+
+    .ant-btn-link {
+      padding: 0;
+    }
   }
 
   &-tree-warp {
-    margin: var(--zaui-space-size-md);
+    flex       : 1;
+    margin     : 0 var(--zaui-space-size-md, 16px);
+    padding-top: var(--zaui-space-size-sm, 8px);
+    overflow-y : auto;
   }
+
   &-checkbox-content {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+    display        : flex;
+    flex-direction : row;
+    align-items    : center;
     justify-content: space-between;
-    margin-bottom: 12px;
-    line-height: 20px;
-    cursor: pointer;
+    margin-bottom  : var(--zaui-font-size-sm, 12px);
+    line-height    : var(--zaui-font-size-xxl, 20px);
+    cursor         : pointer;
+
     &-look {
       color: #333;
     }
+
+    &-drag {
+      display: flex;
+    }
+  }
+
+  &-cascader-content {
+    margin-bottom: 0;
+    padding      : 6px;
+  }
+
+  &-check-cascader-content {
+    color     : var(--zaui-brand);
+    background: rgba(0, 106, 255, 0.1);
+  }
+
+  &-isView {
+    display    : flex;
+    align-items: center;
+
+    .viewSvg {
+      margin-left: var(--zaui-space-size-sm, 8px);
+    }
   }
 
   &-tree-content {
@@ -98,8 +171,116 @@
   &-search-value {
     color: var(--zaui-brand);
   }
+
   &-checkbox-close {
-    padding-left: var(--zaui-space-size-sm);
-    font-size: 12px;
+    padding-left: var(--zaui-space-size-sm, 8px);
+    font-size   : var(--zaui-font-size-sm, 12px);
+  }
+
+  &-tree-node {
+    display       : flex;
+    flex-direction: row;
+
+    &:last-child {
+      flex: 1;
+    }
+  }
+
+  &-tree-node-tag {
+    display        : flex;
+    align-items    : center;
+    justify-content: center;
+    height         : var(--zaui-font-size-xxl, 20px);
+    margin-right   : var(--zaui-space-size-sm, 8px);
+    padding        : 0 var(--zaui-space-size-xs);
+    font-weight    : 400;
+    font-family    : PingFangSC-Regular, PingFang SC;
+    line-height    : var(--zaui-font-size-lg-title);
+    white-space    : nowrap;
+    border-radius  : var(--zaui-border-radius-card);
+
+    span {
+      font-size  : var(--zaui-font-size-sm, 12px);
+      line-height: var(--zaui-font-size-xxl, 20px);
+      text-align : center;
+      transform  : scale(0.83, 0.83);
+    }
+  }
+}
+
+.pro-tree-modal-no-checks {
+  display        : flex;
+  align-items    : center;
+  justify-content: center;
+  height         : 100%;
+  color          : #939599;
+  font-weight    : 400;
+  font-size      : var(--zaui-font-size, 14px);
+  font-family    : PingFangSC-Regular, PingFang SC;
+}
+
+.pro-transfer-right {
+  .checked-item {
+    margin: var(--zaui-space-size-sm, 8px) 0;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    .ant-tag {
+      display        : flex;
+      align-items    : center;
+      justify-content: space-between;
+      width          : 100%;
+      height         : var(--zaui-space-size-lg, 32px);
+      padding        : 2px var(--zaui-space-size-sm, 8px);
+      color          : var(--zaui-text, #343434);
+      font-size      : var(--zaui-font-size, 14px);
+      background     : #f2f2f2;
+      border         : none;
+      border-radius  : var(--zaui-border-radius, 4px);
+
+      .drag-icon {
+        height      : var(--zaui-font-size-xxl, 20px);
+        margin-right: var(--zaui-space-size-xs, 4px);
+        cursor      : move;
+      }
+
+      .pro-tooltip {
+        flex     : 1;
+        max-width: calc(100% - 42px);
+      }
+
+      .disabled-icon {
+        height      : var(--zaui-font-size-xxl, 20px);
+        margin-right: var(--zaui-space-size-xs, 4px);
+      }
+
+      .anticon-close {
+        margin   : 0;
+        color    : #999;
+        font-size: var(--zaui-font-size-sm, 12px);
+      }
+    }
+
+    &.dragable {
+      .anticon-close {
+        position: relative;
+        left    : -4px;
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      .pro-tooltip,
+      .anticon {
+        cursor: not-allowed;
+      }
+
+      .anticon {
+        pointer-events: none;
+      }
+    }
   }
 }

package/lib/ProTreeModal/utils.d.ts

@@ -1,26 +1,38 @@
-export declare function getFlatTreeData(originalTreeData: any[]): any[];
-export declare const getParentKey: (key: string, tree: any[]) => string;
-interface TreeNode {
-    title: string;
-    key: string;
-    children?: TreeNode[];
-}
-export declare function findTreeNodeByKey(treeData: TreeNode[], key: string): TreeNode[];
+import { FieldNamesType, TreeDataProps } from './propsType';
+/**
+ * 树转成铺平的数组
+ * @param originalTreeData
+ * @returns
+ */
+export declare function getFlatTreeData(originalTreeData: TreeDataProps[], fieldNames: FieldNamesType, modeType?: string): any[];
+/**
+ * 获取 tree 所有的 keys 集合
+ * @param data
+ * @param fieldNames
+ * @returns
+ */
+export declare function getAllKeys(data: TreeDataProps[], fieldNames: FieldNamesType): string[];
+/**
+ * 获取展开的key
+ * @param key
+ * @param tree
+ * @param fieldNames
+ * @returns
+ */
+export declare const getParentKey: (key: string, tree: TreeDataProps[], fieldNames: FieldNamesType) => string;
+export declare function findTreeNodeByKey(treeData: TreeDataProps[], key: string, fieldNames: FieldNamesType): TreeDataProps[];
 /**
  * 根据所选的 checkedKeys 筛选出展示的 treeData
  * @param data
  * @param checkedKeys
  * @returns
  */
-export declare function filterCheckedNodes(data: any, checkedKeys: any): any[];
+export declare function filterCheckedNodes(data: any, checkedKeys: any, searchStr: string, fieldNames: FieldNamesType): any[];
 /**
  * 获取 tree 当前选中节点下的所有子节点的 keys
  * @param node
  * @param childrenKeys
  * @returns
  */
-export declare function getChildrenKeys<T extends {
-    key: string;
-    children?: T[];
-}>(node: T, childrenKeys: string[]): string[];
-export {};
+export declare function getChildrenKeys(node: TreeDataProps, childrenKeys: string[], fieldNames: FieldNamesType, type: 'treeClose' | 'treeCheck'): void;
+export declare const transformMessage: (obj: any, message: string) => string;

package/lib/ProTreeModal/utils.js

@@ -6,58 +6,94 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.filterCheckedNodes = filterCheckedNodes;
 exports.findTreeNodeByKey = findTreeNodeByKey;
+exports.getAllKeys = getAllKeys;
 exports.getChildrenKeys = getChildrenKeys;
 exports.getFlatTreeData = getFlatTreeData;
-exports.getParentKey = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+exports.transformMessage = exports.getParentKey = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _ = require(".");
 /* eslint-disable no-restricted-syntax */
-function getFlatTreeData(originalTreeData) {
+
+/**
+ * 树转成铺平的数组
+ * @param originalTreeData
+ * @returns
+ */
+function getFlatTreeData(originalTreeData, fieldNames) {
+  var modeType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
   var dataList = [];
+  var isCASCADER = modeType === _.CASCADER;
+  function loop(data) {
+    var parTitle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    data.forEach(function (item) {
+      var node = (0, _objectSpread4.default)({}, item);
+      delete node[fieldNames.children];
+      var title = isCASCADER ? "".concat(parTitle ? "".concat(parTitle, "-") : '').concat(node[fieldNames.label]) : node[fieldNames.label];
+      dataList.push((0, _objectSpread4.default)((0, _objectSpread4.default)({}, node), {}, {
+        title: title
+      }));
+      if (item[fieldNames.children]) {
+        loop(item[fieldNames.children], title);
+      }
+    });
+  }
+  loop(originalTreeData, '');
+  return dataList;
+}
+/**
+ * 获取 tree 所有的 keys 集合
+ * @param data
+ * @param fieldNames
+ * @returns
+ */
+function getAllKeys(data, fieldNames) {
+  var keys = [];
   function loop(data) {
     for (var i = 0; i < data.length; i++) {
       var node = data[i];
-      var value = node.value,
-        key = node.key,
-        title = node.title;
-      dataList.push({
-        key: key || value,
-        title: title
-      });
-      if (node.children) {
-        loop(node.children);
+      keys.push(node[fieldNames.value]);
+      if (node[fieldNames.children]) {
+        loop(node[fieldNames.children]);
       }
     }
   }
-  loop(originalTreeData);
-  return dataList;
+  loop(data);
+  return keys;
 }
-var getParentKey = function getParentKey(key, tree) {
+/**
+ * 获取展开的key
+ * @param key
+ * @param tree
+ * @param fieldNames
+ * @returns
+ */
+var getParentKey = exports.getParentKey = function getParentKey(key, tree, fieldNames) {
   var parentKey;
   for (var i = 0; i < tree.length; i++) {
     var node = tree[i];
-    if (node.children) {
-      if (node.children.some(function (item) {
-        return item.key === key;
+    if (node[fieldNames.children]) {
+      if (node[fieldNames.children].some(function (item) {
+        return item[fieldNames.value] === key;
       })) {
-        parentKey = node.key;
-      } else if (getParentKey(key, node.children)) {
-        parentKey = getParentKey(key, node.children);
+        parentKey = node[fieldNames.value];
+      } else if (getParentKey(key, node[fieldNames.children], fieldNames)) {
+        parentKey = getParentKey(key, node[fieldNames.children], fieldNames);
       }
     }
   }
   return parentKey;
 };
-exports.getParentKey = getParentKey;
-function findTreeNodeByKey(treeData, key) {
+function findTreeNodeByKey(treeData, key, fieldNames) {
   var result = [];
   var traverse = function traverse(node, parents) {
-    if (node.key === key) {
+    if (node[fieldNames.value] === key) {
       result.push.apply(result, [node].concat((0, _toConsumableArray2.default)(parents)));
       return true;
     }
-    var children = node.children || [];
+    var children = node[fieldNames.children] || [];
     var _iterator = (0, _createForOfIteratorHelper2.default)(children),
       _step;
     try {
@@ -95,21 +131,28 @@ function findTreeNodeByKey(treeData, key) {
  * @returns
  */
 function filterCheckedNodes(data, checkedKeys) {
+  var searchStr = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var fieldNames = arguments.length > 3 ? arguments[3] : undefined;
   var result = [];
   var traverse = function traverse(node) {
-    var _node$children2;
-    if (checkedKeys.includes(node.key)) {
-      var _node$children;
-      var _children = ((_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.map(traverse).filter(Boolean)) || [];
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, node), {}, {
-        children: _children
+    var _node$fieldNames$chil3;
+    var title = node[fieldNames.value] + node[fieldNames.label];
+    if (!searchStr) {
+      if (checkedKeys.includes(node[fieldNames.value])) {
+        var _node$fieldNames$chil;
+        var _children = (node === null || node === void 0 ? void 0 : (_node$fieldNames$chil = node[fieldNames.children]) === null || _node$fieldNames$chil === void 0 ? void 0 : _node$fieldNames$chil.map(traverse).filter(Boolean)) || [];
+        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, node), {}, (0, _defineProperty2.default)({}, fieldNames.children, _children));
+      }
+    } else if (title.indexOf(searchStr) > -1) {
+      var _node$fieldNames$chil2;
+      var _children2 = ((_node$fieldNames$chil2 = node[fieldNames.children]) === null || _node$fieldNames$chil2 === void 0 ? void 0 : _node$fieldNames$chil2.map(traverse).filter(Boolean)) || [];
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, node), {}, {
+        children: _children2
       });
     }
-    var children = (_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.map(traverse).filter(Boolean);
+    var children = (_node$fieldNames$chil3 = node[fieldNames.children]) === null || _node$fieldNames$chil3 === void 0 ? void 0 : _node$fieldNames$chil3.map(traverse).filter(Boolean);
     if (children && children.length > 0) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, node), {}, {
-        children: children
-      });
+      return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, node), {}, (0, _defineProperty2.default)({}, fieldNames.children, children));
     }
     return null;
   };
@@ -137,12 +180,33 @@ function filterCheckedNodes(data, checkedKeys) {
  * @param childrenKeys
  * @returns
  */
-function getChildrenKeys(node, childrenKeys) {
-  node.children.forEach(function (item) {
-    childrenKeys.push(item.key);
-    if (item.children && item.children.length > 0) {
-      getChildrenKeys(item, childrenKeys);
-    }
+function getChildrenKeys(node, childrenKeys, fieldNames, type) {
+  // 当为 tree 触发 onChck 此时就是 key 为 children
+  if (type === 'treeCheck') {
+    var _node$children;
+    node === null || node === void 0 ? void 0 : (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.forEach(function (item) {
+      childrenKeys.push(item.key);
+      if (item.children && item.children.length > 0) {
+        getChildrenKeys(item, childrenKeys, fieldNames, type);
+      }
+    });
+  } else {
+    var _node$fieldNames$chil4;
+    // 这个时候的值为我们的值
+    node === null || node === void 0 ? void 0 : (_node$fieldNames$chil4 = node[fieldNames.children]) === null || _node$fieldNames$chil4 === void 0 ? void 0 : _node$fieldNames$chil4.forEach(function (item) {
+      childrenKeys.push(item[fieldNames.value]);
+      if (item[fieldNames.children] && item[fieldNames.children].length > 0) {
+        getChildrenKeys(item, childrenKeys, fieldNames, type);
+      }
+    });
+  }
+}
+// 提示信息替换
+var transformMessage = exports.transformMessage = function transformMessage(obj, message) {
+  var keys = Object.keys(obj);
+  var _message = message;
+  keys.forEach(function (key) {
+    _message = message.replaceAll("{".concat(key, "}"), obj[key]);
   });
-  return childrenKeys;
-}
+  return _message;
+};