@titaui/pc 1.7.87 → 1.7.91

package/src/components/user-selector/export-modules/group-selector/index.scss

@@ -0,0 +1,10 @@
+.persel-group-selector {
+  box-sizing: border-box;
+  width: 280px;
+  height: 382px;
+  z-index: 10000;
+
+  .persel-single-layout__selector {
+    height: 44px;
+  }
+}

package/src/components/user-selector/export-modules/group-selector/searched-panel.js

@@ -0,0 +1,37 @@
+import React, { useEffect, useState, useContext } from 'react';
+import ResultPart from '../../searched-panel/result-part';
+import Loading from '../../loading';
+
+import '../../searched-panel/index.scss';
+import './index.scss';
+
+export default props => {
+  const {
+    searchKey,
+    onNodeSelect,
+    selected,
+    searchGroups
+  } = props;
+
+  const [loading, setLoading] = useState(false);
+  const [group, setGroup] = useState();
+
+  useEffect(() => {
+    setLoading(true);
+    searchGroups(searchKey).then(groups => {
+      setGroup(groups);
+      setLoading(false);
+    })
+  }, [searchKey])
+
+  return <div className="persel-searched">
+    {loading ?
+      <Loading /> :
+      <ResultPart
+        treeData={group}
+        onSelect={onNodeSelect}
+        selected={selected}
+      />
+    }
+  </div>
+}

package/src/components/user-selector/export-modules/multiple-user-selector--bak/index.js

@@ -0,0 +1,157 @@
+import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
+import { CommonContext } from '../../context';
+import { OpenUserName, OpenDepartmentName, isWechat } from '../../../../utils/open-data';
+import MultiSelector from '../field-tree-selector/multiple-selector';
+import Popup from '../../../popup';
+import {getLocale} from '../../../../utils/getLocale';
+import classNames from 'classnames';
+
+import '../../index.scss';
+import './index.scss';
+
+export default forwardRef((props, ref) => {
+  const {
+    selector,
+    input = {},
+    trigger,
+    children,
+    onOk = () => { },
+    position = 'bottomRight',
+    selectNodes = {},
+    sourceFrom,
+    auth = false, // 数据权限
+    placeholder = getLocale('Mod_Pleaseselect'),
+    // className,
+    destroyPopupOnHide = true,
+    forceRender = false,
+    isGetRoot = false,
+    popupAlign = {
+      offset: [0, 0],
+      overflow: { adjustX: true, adjustY: true },
+      targetOffset: [0, 0],
+    }
+  } = props;
+
+  const [selected, setSelected] = useState([]);
+  const [selectedText, setSelectedText] = useState(placeholder);
+  const [jsxDomValues, setJsxDomValues] = useState();
+  const [visible, setVisible] = useState(false);
+
+  const setSelectedByProps = () => {
+    let selected = [];
+    let texts = [];
+    let jsxDomValues = [];
+    const { groups = [], departments = [], users = [] } = selectNodes;
+    (groups || []).forEach((data) => {
+      selected.push({
+        nodeType: "group",
+        id: data.id,
+        data,
+      });
+      texts.push(data.name);
+      jsxDomValues.push(<span>{data.name}</span>);
+    });
+    (departments || []).forEach((data) => {
+      selected.push({
+        nodeType: "depart",
+        id: data.id,
+        data,
+      });
+      texts.push(data.name);
+      jsxDomValues.push(<OpenDepartmentName id={data.id} name={data.name} />);
+    });
+    (users || []).forEach((data) => {
+      selected.push({
+        nodeType: "person",
+        id: data.userId,
+        data,
+      });
+      texts.push(data.name);
+      jsxDomValues.push(<OpenUserName id={data.userId} name={data.name} />);
+    });
+    setSelected(selected);
+    let text = texts.join("、");
+    if (!text) text = placeholder;
+    setSelectedText(text);
+    setJsxDomValues(jsxDomValues);
+  }
+
+  useEffect(() => {
+    setSelectedByProps()
+  }, [selectNodes])
+
+  useImperativeHandle(ref, () => ({
+    open: () => setVisible(true),
+    close: () => setVisible(false)
+  }))
+
+  const onOkHandler = selectNodes => {
+    setVisible(false);
+    setSelected(selectNodes);
+    const texts = [];
+    const users = [];
+    // 返回react组件形式的value，应用于企业微信
+    const jsxDomValues = [];
+    selectNodes.forEach(item => {
+      switch (item.nodeType) {
+        case 'person':
+          users.push(item.data);
+          texts.push(item.data.name);
+          jsxDomValues.push(<OpenUserName id={item.data.userId} name={item.data.name} />);
+          break;
+        default:
+          break;
+      }
+    });
+    const wechartOpts = {
+      'isWechat': isWechat(),
+      jsxDomValues
+    };
+    onOk({ users }, wechartOpts);
+    let text = texts.join('、');
+    if (!text) text = placeholder;
+    setSelectedText(text);
+    setJsxDomValues(jsxDomValues);
+  }
+
+  const onCancelHandler = () => {
+    setVisible(false);
+  }
+
+  return <CommonContext.Provider
+    value={{
+      sourceFrom,
+      auth,
+      isGetRoot
+    }}
+  >
+    <React.Fragment>
+      <Popup
+        popupVisible={visible}
+        popupPlacement={position}
+        onPopupVisibleChange={visible => {
+          setVisible(visible);
+        }}
+        forceRender={forceRender}
+        destroyPopupOnHide={destroyPopupOnHide}
+        popup={<MultiSelector
+          {...selector}
+          onCancel={onCancelHandler}
+          onOk={onOkHandler}
+          selected={selected}
+          disabledDepartSelect={true}
+          panes={{ 'depart': true, 'group': false }}
+        />}
+        popupAlign={popupAlign}>
+        {(children || trigger) ?
+          <span onClick={() => setVisible(true)}>{children || trigger}</span> :
+          <span className="persel-selector-field" style={input.style} onClick={() => setVisible(!visible)}>
+            <span className="persel-selector-field__text">
+              {isWechat() ? jsxDomValues : selectedText}
+            </span>
+            <span className="persel-selector-field__suffix"></span>
+          </span>}
+      </Popup>
+    </React.Fragment>
+  </CommonContext.Provider>
+})

package/src/components/user-selector/export-modules/multiple-user-selector--bak/index.scss

@@ -0,0 +1,46 @@
+
+.persel-selector-field {
+  display: inline-block;
+  min-width: 120px;
+  height: 36px;
+  line-height: 36px;
+  background: #FFFFFF;
+  border-radius: 3px;
+  border: 1px solid #E9ECF0;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(40, 121, 255);
+    border-color: rgb(40, 121, 255);
+    .persel-selector-field__text {
+      color: rgb(40, 121, 255);
+    }
+  }
+
+  &__text {
+    display: inline-block;
+    height: 18px;
+    width: calc(100% - 26px);
+    box-sizing: border-box;
+    font-size: 14px;
+    font-weight: 400;
+    color: #3F4755;
+    line-height: 20px;
+    vertical-align: top;
+    border: none;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__suffix {
+    float: right;
+    width: 15px;
+    height: 15px;
+    margin-left: 11px;
+    background: url(../../images/arrow.svg) transparent no-repeat 50% 50%;
+    vertical-align: super;
+  }
+}

package/src/components/user-selector/export-modules/single-selector/index.scss

@@ -0,0 +1,22 @@
+.perspm-depart-selector {
+  width: 100%;
+  height: 100%;
+  height: unset !important;
+
+  .perspm-depart__name {
+    max-width: calc(100% - 40px);
+  }
+  .perspm-tree .rc-tree-treenode {
+    padding-left: 20px;
+  }
+
+  .rc-tree-treenode-selected {
+    background: #f0f1f2;
+    &:hover {
+      background: #f0f1f2;
+    }
+    .perspm-tree__selector-depart {
+      display: none;
+    }
+  }
+}

package/src/components/user-selector/export-modules/single-selector/index.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from "react";
+import ChooseTree from "../../select-tree/choose-tree";
+import { TreeNodeContext, CommonContext } from '../../context';
+import { getTreeData } from "../../request-apis";
+import "./index.scss";
+
+export default (props) => {
+  const {
+    onSelect,
+    itemHeight = 46,
+    height = 500,
+    auth = false,
+    isGetRoot = true,
+    authType = "okr",
+    departOnly = false,
+    hideUserInfo = false
+  } = props;
+
+  const [defaultExpandedKeys] = useState(() => {
+    if (!auth) return [];
+    return ["-1"];
+  });
+
+  const [selected, setSelected] = useState(() => {
+    if (props.selected) return props.selected;
+  });
+
+  useEffect(() => {
+    setSelected(props.selected);
+  }, [props.selected]);
+
+  const onSelectHandler = (keys, node) => {
+    onSelect && onSelect(keys, node);
+    if (!props.selected) {
+      setSelected([{ id: node.node.id }]);
+    }
+  };
+
+  const onGetTreeData = () => {
+    return getTreeData("-1", {
+      departOnly,
+      isGetRoot,
+      auth,
+      authType,
+    });
+  };
+
+  const onLoadNodes = (nodeId) => {
+    return getTreeData(nodeId, {
+      isLoadNodes: true,
+      isGetRoot,
+      auth,
+      authType,
+      departOnly,
+    });
+  };
+
+  return <CommonContext.Provider value={{}}>
+    <div className="persel-box perspm-depart-selector">
+      <TreeNodeContext.Provider value={{ hideUserInfo }}>
+        <ChooseTree
+          onSelect={onSelectHandler}
+          multiple={false}
+          selected={selected}
+          isGetRoot={isGetRoot}
+          defaultExpandedKeys={defaultExpandedKeys}
+          getTreeData={onGetTreeData}
+          loadNodes={onLoadNodes}
+          itemHeight={itemHeight}
+          height={height}
+          asyncData={true}
+          virtual={true}
+        />
+      </TreeNodeContext.Provider>
+    </div>
+  </CommonContext.Provider>
+}

package/src/components/user-selector/images/arrow.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="6px" viewBox="0 0 6 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>下</title>
+    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选人-交互说明" transform="translate(-1009.000000, -1108.000000)" fill="#6F7886" fill-rule="nonzero">
+            <path d="M1012.46263,1113.47956 L1014.8652,1109.85528 C1015.0031,1109.64723 1015.02653,1109.36711 1014.92563,1109.13259 C1014.82473,1108.89806 1014.61698,1108.74977 1014.38966,1108.75 L1009.58528,1108.75 C1009.35805,1108.75 1009.15048,1108.89837 1009.0497,1109.13284 C1008.94892,1109.36732 1008.97239,1109.64731 1009.11024,1109.85528 L1011.51281,1113.47956 C1011.62585,1113.65 1011.80146,1113.75 1011.98772,1113.75 C1012.17398,1113.75 1012.34959,1113.65 1012.46263,1113.47956 L1012.46263,1113.47956 Z" id="下"></path>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/images/checked.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>对勾</title>
+    <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="v" transform="translate(-64.000000, -25.000000)" fill-rule="nonzero">
+            <g id="对勾" transform="translate(64.000000, 25.000000)">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="12" height="12"></rect>
+                <path d="M4.4345,9.96622222 C4.27138889,9.96622222 4.10872222,9.90577778 3.98472223,9.78444444 L0.245166668,6.13511111 C-0.00327778125,5.89244445 -0.00327778125,5.49955555 0.245166668,5.25688889 C0.493611105,5.01422222 0.896277773,5.01422222 1.14472222,5.25688889 L4.4345,8.46711111 L10.8487222,2.20888889 C11.0971667,1.96622222 11.4998333,1.96622222 11.7482778,2.20888889 C11.9967222,2.45111111 11.9967222,2.844 11.7482778,3.08666667 L4.88427778,9.78444444 C4.75983333,9.90577778 4.59716667,9.96622222 4.4345,9.96622222 L4.4345,9.96622222 Z" id="路径" fill="#BFC7D5"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/images/close-hover.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组 10</title>
+    <defs>
+        <filter id="filter-1">
+            <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 0 1.000000 0 0 0 1.000000 0"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选人-交互说明" transform="translate(-291.000000, -1609.000000)">
+            <g id="输入" transform="translate(100.000000, 1600.000000)">
+                <g id="编组-10" transform="translate(191.000000, 9.000000)">
+                    <circle id="椭圆形" fill="#F05E5E" cx="7.5" cy="7.5" r="7.5"></circle>
+                    <g id="icon-/-ctrl-/-close备份" transform="translate(3.000000, 3.000000)" filter="url(#filter-1)">
+                        <g>
+                            <path d="M4.47854842,3.92946834 L6.99761633,1.41040043 C7.07083964,1.33717712 7.18955807,1.33717712 7.26278137,1.41040043 L7.52794642,1.67556547 C7.60116972,1.74878878 7.60116972,1.86750721 7.52794642,1.94073052 L5.00887851,4.45979842 L7.52794642,6.97886633 C7.60116972,7.05208964 7.60116972,7.17080807 7.52794642,7.24403137 L7.26278137,7.50919642 C7.18955807,7.58241972 7.07083964,7.58241972 6.99761633,7.50919642 L4.47854842,4.99012851 L1.95948052,7.50919642 C1.88625721,7.58241972 1.76753878,7.58241972 1.69431547,7.50919642 L1.42915043,7.24403137 C1.35592712,7.17080807 1.35592712,7.05208964 1.42915043,6.97886633 L3.94821834,4.45979842 L1.42915043,1.94073052 C1.35592712,1.86750721 1.35592712,1.74878878 1.42915043,1.67556547 L1.69431547,1.41040043 C1.76753878,1.33717712 1.88625721,1.33717712 1.95948052,1.41040043 L4.47854842,3.92946834 L4.47854842,3.92946834 Z" id="路径" fill="#3F4755" fill-rule="nonzero"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/images/close-new.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>下拉题</title>
+    <g id="3、最新" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="初始页-交互说明" transform="translate(-668.000000, -800.000000)">
+            <g id="编组-2" transform="translate(512.000000, 331.000000)">
+                <g id="编组-13" transform="translate(0.000000, 429.000000)">
+                    <g id="三种展示O、KR、树状图" transform="translate(0.000000, 36.000000)">
+                        <g id="下拉题" transform="translate(156.000000, 4.000000)">
+                            <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="15.9688109" height="15.9688109"></rect>
+                            <path d="M8,0 C12.418278,0 16,3.581722 16,8 C16,12.418278 12.418278,16 8,16 C3.581722,16 0,12.418278 0,8 C0,3.581722 3.581722,0 8,0 Z M5.17720057,4.56711159 C5.09584135,4.48575236 4.96393197,4.48575236 4.88257275,4.56711159 L4.88257275,4.56711159 L4.58794492,4.86173941 C4.50658569,4.94309864 4.50658569,5.07500801 4.58794492,5.15636724 L4.58794492,5.15636724 L7.38690926,7.95533158 L4.58794492,10.7542959 C4.50658569,10.8356552 4.50658569,10.9675645 4.58794492,11.0489237 L4.58794492,11.0489237 L4.88257275,11.3435516 C4.96393197,11.4249108 5.09584135,11.4249108 5.17720057,11.3435516 L5.17720057,11.3435516 L7.97616491,8.54458723 L10.7751293,11.3435516 C10.8564885,11.4249108 10.9883979,11.4249108 11.0697571,11.3435516 L11.0697571,11.3435516 L11.3643849,11.0489237 C11.4457441,10.9675645 11.4457441,10.8356552 11.3643849,10.7542959 L11.3643849,10.7542959 L8.56542057,7.95533158 L11.3643849,5.15636724 C11.4457441,5.07500801 11.4457441,4.94309864 11.3643849,4.86173941 L11.3643849,4.86173941 L11.0697571,4.56711159 C10.9883979,4.48575236 10.8564885,4.48575236 10.7751293,4.56711159 L10.7751293,4.56711159 L7.97616491,7.36607593 Z" id="形状结合" fill="#BFC7D5"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/images/close.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>guanbi </title>
+    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选人-交互说明" transform="translate(-611.000000, -224.000000)" fill="#6F7886" fill-rule="nonzero">
+            <g id="编组-7" transform="translate(80.000000, 85.000000)">
+                <g id="下拉" transform="translate(0.000000, 31.000000)">
+                    <g id="编组-6" transform="translate(301.000000, 89.000000)">
+                        <g id="guanbi-" transform="translate(230.000000, 19.000000)">
+                            <path d="M5.88416667,5.00083333 L9.5675,1.3175 C9.81166667,1.07333333 9.81166667,0.6775 9.5675,0.433333333 C9.32333333,0.189166667 8.9275,0.189166667 8.68333333,0.433333333 L5,4.11666667 L1.31666667,0.433333333 C1.0725,0.189166667 0.676666667,0.189166667 0.4325,0.433333333 C0.188333333,0.6775 0.188333333,1.07333333 0.4325,1.3175 L4.11583333,5.00083333 L0.4325,8.68416667 C0.188333333,8.92833333 0.188333333,9.32416667 0.4325,9.56833333 C0.555,9.69 0.714166667,9.75 0.875,9.75 C1.03583333,9.75 1.195,9.69 1.31666667,9.5675 L5,5.885 L8.68333333,9.56833333 C8.805,9.69 8.965,9.75083333 9.125,9.75083333 C9.285,9.75083333 9.445,9.69083333 9.56666667,9.56833333 C9.81083333,9.32416667 9.81083333,8.92833333 9.56666667,8.68416667 L5.88416667,5.00083333 Z" id="路径"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/images/depart-icon-new.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>部门管理</title>
+    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选人-交互说明" transform="translate(-116.000000, -227.000000)" fill="#A4ACB9" fill-rule="nonzero">
+            <g id="部门状态" transform="translate(80.000000, 85.000000)">
+                <g id="下拉" transform="translate(0.000000, 31.000000)">
+                    <g id="部门管理" transform="translate(36.000000, 111.000000)">
+                        <path d="M3.2688,0.5 C3.58695256,0.50028008 3.89197223,0.626892015 4.11680001,0.851999994 L5.2488,1.9832 C5.32376443,2.05797516 5.42531803,2.0999775 5.53119999,2.09999999 L10.8,2.09999999 C11.4627417,2.09999999 12,2.63725829 12,3.29999999 L12,10.5 C12,11.1627417 11.4627417,11.7 10.8,11.7 L1.2,11.7 C0.5372583,11.7 0,11.1627417 0,10.5 L0,1.7 C0,1.0372583 0.5372583,0.5 1.2,0.5 L3.2688,0.5 Z M9.19999999,8.09999999 L5.19999999,8.09999999 L5.19999999,8.9 L9.19999999,8.9 L9.19999999,8.09999999 Z" id="形状结合"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/images/depart-icon.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>部门管理</title>
+    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选人-交互说明" transform="translate(-116.000000, -227.000000)" fill="#89919F" fill-rule="nonzero">
+            <g id="编组-7" transform="translate(80.000000, 85.000000)">
+                <g id="下拉" transform="translate(0.000000, 31.000000)">
+                    <g id="部门管理" transform="translate(36.000000, 111.000000)">
+                        <path d="M3.2688,2.23820962e-13 C3.58695256,0.00028007995 3.89197223,0.126892015 4.11680001,0.351999994 L5.2488,1.4832 C5.32376443,1.55797516 5.42531803,1.5999775 5.53119999,1.59999999 L10.8,1.59999999 C11.4627417,1.59999999 12,2.13725829 12,2.79999999 L12,10 C12,10.6627417 11.4627417,11.2 10.8,11.2 L1.2,11.2 C0.5372583,11.2 0,10.6627417 0,10 L0,1.2 C0,0.5372583 0.5372583,2.23820962e-13 1.2,2.23820962e-13 L3.2688,2.23820962e-13 Z M9.19999999,7.59999999 L5.19999999,7.59999999 L5.19999999,8.4 L9.19999999,8.4 L9.19999999,7.59999999 Z" id="形状结合"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/images/group-icon-new.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>标签</title>
+    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选人-交互说明" transform="translate(-100.000000, -778.000000)" fill="#A4ACB9" fill-rule="nonzero">
+            <g id="群组" transform="translate(80.000000, 638.000000)">
+                <g id="下拉" transform="translate(0.000000, 31.000000)">
+                    <g id="编组-14" transform="translate(20.000000, 99.000000)">
+                        <path d="M12,17.1102907 C12,16.8334102 11.9059474,16.595293 11.7123098,16.3848639 L6.04702627,10.7254269 C5.84785615,10.5260729 5.57123097,10.354407 5.23928076,10.2104292 C4.89626554,10.0664513 4.59197786,10 4.31535268,10 L1.01798063,10 C0.741355453,10 0.503457809,10.1052146 0.304287685,10.3045685 C0.10511756,10.5039225 0,10.7420397 0,11.0189202 L0,14.3082603 C0,14.5851408 0.0663900415,14.9007845 0.210235137,15.2330411 C0.354080232,15.5763729 0.514522822,15.8421781 0.724757958,16.0415321 L6.39004149,21.7120443 C6.58921162,21.9113983 6.82710926,22 7.10373444,22 C7.38035962,22 7.61825726,21.9058606 7.8284924,21.7120443 L11.7123098,17.8246424 C11.8948824,17.6252884 12,17.3871712 12,17.1102907 L12,17.1102907 L12,17.1102907 Z M4.46260348,14.2616521 C4.26343336,14.461006 4.02553571,14.5551454 3.74891054,14.5551454 C3.47228536,14.5551454 3.23438771,14.461006 3.03521759,14.2616521 C2.83604746,14.0622981 2.7419949,13.8241809 2.7419949,13.5473004 C2.7419949,13.2704199 2.83604746,13.0323027 3.03521759,12.8329488 C3.23438771,12.6335948 3.47228536,12.5394555 3.74891054,12.5394555 C4.02553571,12.5394555 4.26343336,12.6335948 4.46260348,12.8329488 C4.66177361,13.0323027 4.75029366,13.2704199 4.75029366,13.5473004 C4.76689117,13.8297185 4.66177361,14.0622981 4.46260348,14.2616521 L4.46260348,14.2616521 L4.46260348,14.2616521 Z" id="标签" transform="translate(6.000000, 16.000000) scale(-1, 1) translate(-6.000000, -16.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/images/group-icon.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>标签</title>
+    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选人-交互说明" transform="translate(-100.000000, -778.000000)" fill="#89919F" fill-rule="nonzero">
+            <g id="编组-7" transform="translate(80.000000, 638.000000)">
+                <g id="下拉" transform="translate(0.000000, 31.000000)">
+                    <g id="编组-14" transform="translate(20.000000, 99.000000)">
+                        <path d="M12,17.1102907 C12,16.8334102 11.9059474,16.595293 11.7123098,16.3848639 L6.04702627,10.7254269 C5.84785615,10.5260729 5.57123097,10.354407 5.23928076,10.2104292 C4.89626554,10.0664513 4.59197786,10 4.31535268,10 L1.01798063,10 C0.741355453,10 0.503457809,10.1052146 0.304287685,10.3045685 C0.10511756,10.5039225 0,10.7420397 0,11.0189202 L0,14.3082603 C0,14.5851408 0.0663900415,14.9007845 0.210235137,15.2330411 C0.354080232,15.5763729 0.514522822,15.8421781 0.724757958,16.0415321 L6.39004149,21.7120443 C6.58921162,21.9113983 6.82710926,22 7.10373444,22 C7.38035962,22 7.61825726,21.9058606 7.8284924,21.7120443 L11.7123098,17.8246424 C11.8948824,17.6252884 12,17.3871712 12,17.1102907 L12,17.1102907 L12,17.1102907 Z M4.46260348,14.2616521 C4.26343336,14.461006 4.02553571,14.5551454 3.74891054,14.5551454 C3.47228536,14.5551454 3.23438771,14.461006 3.03521759,14.2616521 C2.83604746,14.0622981 2.7419949,13.8241809 2.7419949,13.5473004 C2.7419949,13.2704199 2.83604746,13.0323027 3.03521759,12.8329488 C3.23438771,12.6335948 3.47228536,12.5394555 3.74891054,12.5394555 C4.02553571,12.5394555 4.26343336,12.6335948 4.46260348,12.8329488 C4.66177361,13.0323027 4.75029366,13.2704199 4.75029366,13.5473004 C4.76689117,13.8297185 4.66177361,14.0622981 4.46260348,14.2616521 L4.46260348,14.2616521 L4.46260348,14.2616521 Z" id="标签" transform="translate(6.000000, 16.000000) scale(-1, 1) translate(-6.000000, -16.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/images/search-hover.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>search</title>
+    <g id="4、表单\选择框\搜索" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="选人-交互说明" transform="translate(-1291.000000, -633.000000)" fill="#2879FF" fill-rule="nonzero">
+            <g id="search" transform="translate(1291.000000, 633.000000)">
+                <path d="M5.364698,0 C8.3275389,0 10.729396,2.3398891 10.729396,5.2262886 C10.729396,6.2817885 10.4082143,7.2642079 9.855869,8.0858512 C9.9378917,8.1166267 10.0146353,8.1651957 10.082055,8.2293195 L11.7959556,9.8594343 C12.0565651,10.1073037 12.0668931,10.5195073 11.8190237,10.7801169 C11.8115282,10.7879977 11.8038364,10.7956894 11.7959556,10.803185 C11.5180213,11.0675321 11.0816316,11.0675321 10.8036974,10.803185 L9.0897968,9.1730702 C9.0556479,9.1405908 9.0257964,9.1052897 9.0002601,9.0678778 C8.0458204,9.9275227 6.7681996,10.4525772 5.364698,10.4525772 C2.4018571,10.4525772 0,8.1126881 0,5.2262886 C0,2.3398891 2.4018571,0 5.364698,0 Z M5.364698,1.393677 C3.191948,1.393677 1.4305861,3.1095956 1.4305861,5.2262886 C1.4305861,7.3429816 3.191948,9.0589002 5.364698,9.0589002 C7.537448,9.0589002 9.2988098,7.3429816 9.2988098,5.2262886 C9.2988098,3.1095956 7.537448,1.393677 5.364698,1.393677 Z" id="Combined-Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/images/search.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Combined Shape</title>
+    <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="v" transform="translate(-44.000000, -25.000000)" fill="#BFC7D5" fill-rule="nonzero">
+            <path d="M49.364698,25 C52.3275389,25 54.729396,27.3398891 54.729396,30.2262886 C54.729396,31.2817885 54.4082143,32.2642079 53.855869,33.0858512 C53.9378917,33.1166267 54.0146353,33.1651957 54.082055,33.2293195 L55.7959556,34.8594343 C56.0565651,35.1073037 56.0668931,35.5195073 55.8190237,35.7801169 C55.8115282,35.7879977 55.8038364,35.7956894 55.7959556,35.803185 C55.5180213,36.0675321 55.0816316,36.0675321 54.8036974,35.803185 L53.0897968,34.1730702 C53.0556479,34.1405908 53.0257964,34.1052897 53.0002601,34.0678778 C52.0458204,34.9275227 50.7681996,35.4525772 49.364698,35.4525772 C46.4018571,35.4525772 44,33.1126881 44,30.2262886 C44,27.3398891 46.4018571,25 49.364698,25 Z M49.364698,26.393677 C47.191948,26.393677 45.4305861,28.1095956 45.4305861,30.2262886 C45.4305861,32.3429816 47.191948,34.0589002 49.364698,34.0589002 C51.537448,34.0589002 53.2988098,32.3429816 53.2988098,30.2262886 C53.2988098,28.1095956 51.537448,26.393677 49.364698,26.393677 Z" id="Combined-Shape"></path>
+        </g>
+    </g>
+</svg>

package/src/components/user-selector/index.js

@@ -0,0 +1,14 @@
+import FieldPersonSelectorComp from './export-modules/field-tree-selector';
+import GroupSelectorComp from './export-modules/group-selector'
+import DepartSearchSelectorComp from './export-modules/depart-search-selector';
+import DutiesSelectorComp from './export-modules/duties-selector';
+import SingleSelectorCmp from './export-modules/single-selector';
+
+
+
+FieldPersonSelectorComp.Single = SingleSelectorCmp
+FieldPersonSelectorComp.Group = GroupSelectorComp
+FieldPersonSelectorComp.Depart = DepartSearchSelectorComp
+FieldPersonSelectorComp.Duties = DutiesSelectorComp
+
+export default FieldPersonSelectorComp

package/src/components/user-selector/index.scss

@@ -0,0 +1,13 @@
+.persel-box {
+  z-index: 10000;
+
+  .rc-tree-list-holder {
+    overflow-x: hidden;
+  }
+  .rc-tree-node-content-wrapper {
+    width: 100%;
+  }
+  .rc-tree-title {
+    width: 100%;
+  }
+}

package/src/components/user-selector/interface.ts

@@ -0,0 +1,24 @@
+export interface Avatar {
+  big?: string;
+  color?: string;
+  hasAvatar: boolean;
+  large?: string;
+  medium?: string;
+  normal?: string;
+  original?: string;
+  small?: string;
+}
+
+export interface User {
+  avatar: Avatar;
+  departmentId: number;
+  departmentName: string;
+  email?: string;
+  hasSubordinates?: boolean;
+  jobState?: number;
+  managerId: number;
+  name: string;
+  postition?: string;
+  subType: number;
+  userId: number;
+}

package/src/components/user-selector/layout/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import './index.scss';
+
+export const SinglePersonalLayout = props => {
+  const { children = [], onePart } = props;
+  return <div className="persel-single-layout">
+    <div className="persel-single-layout__selector">{children[0]}</div>
+    <div className="persel-single-layout__content">{children[1]}</div>
+  </div>
+}

package/src/components/user-selector/layout/index.scss

@@ -0,0 +1,17 @@
+.persel-single-layout {
+  background: #ffffff;
+  box-shadow: 0px 4px 12px 0px rgba(127, 145, 180, 0.2);
+  border: 1px solid #f0f2f5;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding: 20px 20px 0 20px;
+  height: 100%;
+
+  &__selector {
+    height: calc(34px + 16px);
+  }
+
+  &__content {
+    height: calc(100% - 60px);
+  }
+}

package/src/components/user-selector/loading/index.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+
+export default () => {
+  return <div className="persel-loading">
+    <span></span>
+  </div>
+}