@titaui/pc 1.9.48 → 1.9.49

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

@@ -1,15 +1,16 @@
-import React, { useState, forwardRef, useImperativeHandle, useEffect } from 'react';
-import ChooseTree from '../../select-tree/choose-tree';
-import Popup from '../../../popup';
-import { TreeNodeContext } from '../../context';
-import { CommonContext } from '../../context';
-import Loading from '../../loading';
-import { SinglePersonalLayout } from '../../layout';
-import SelectorInput from '../../../selector-input';
-import { getDuties,searchDuties } from '../../request-apis';
+import React, {
+  useState, forwardRef, useImperativeHandle, useEffect,
+} from "react";
+import ChooseTree from "../../select-tree/choose-tree";
+import Popup from "../../../popup";
+import { TreeNodeContext, CommonContext } from "../../context";
+import Loading from "../../loading";
+import { SinglePersonalLayout } from "../../layout";
+import SelectorInput from "../../../selector-input";
+import { getDuties, searchDuties } from "../../request-apis";
 
-import '../../index.scss';
-import './index.scss';
+import "../../index.scss";
+import "./index.scss";
 
 // const preCls = 'perspm-duties-selector';
 
@@ -31,41 +32,36 @@ export default forwardRef((props: Props, ref) => {
     itemHeight = 46,
     height = 220,
     trigger,
-    position = 'center',
+    position = "center",
     forceRender,
     destroyPopupOnHide = true,
     onPopupVisibleChange,
-    children
+    children,
   } = props;
 
   const [visible, setVisible] = useState(false);
-  const [searchKey, setSearchKey] = useState('');
+  const [searchKey, setSearchKey] = useState("");
   const [loading, setLoading] = useState(false);
-  const [dutiesData,setDutiesData] = useState([])
+  const [dutiesData, setDutiesData] = useState([]);
 
-    // 获取数据的API
-  const searchTreeData = () => {
-
-    return searchDuties({
-      searchKey,
-    }).then(res => {
-      if(!!res.Code){
-        let data = res.Data.map(it => {
-          return {
-            'key': `${it.code}`,
-            'id': `${it.id}`,
-            'pid': `-1`,
-            'nodeType': 'duties',
-            'isLeaf': true,
-            'data': { ...it }
-          };
-        })
-        setDutiesData(data)
-      }
-    }).catch(err=>{
-      console.log(err)
-    });
-  }
+  // 获取数据的API
+  const searchTreeData = () => searchDuties({
+    searchKey,
+  }).then((res) => {
+    if (res.Code) {
+      const data = res.Data.map((it) => ({
+        key: `${it.code}`,
+        id: `${it.id}`,
+        pid: "-1",
+        nodeType: "duties",
+        isLeaf: true,
+        data: { ...it },
+      }));
+      setDutiesData(data);
+    }
+  }).catch((err) => {
+    console.log(err);
+  });
 
   useEffect(() => {
     if (!searchKey) return;
@@ -73,87 +69,84 @@ export default forwardRef((props: Props, ref) => {
     searchTreeData().then(() => setLoading(false));
   }, [searchKey]);
 
-  const onGetTreeData = () => {
-    return getDuties().then(duties => {
-      return duties.Data.map(it => {
-        return {
-          'key': `${it.code}`,
-          'id': `${it.id}`,
-          'pid': `-1`,
-          'nodeType': 'duties',
-          'isLeaf': true,
-          'data': { ...it }
-        };
-      })
-    })
-  }
+  const onGetTreeData = () => getDuties().then((duties) => duties.Data.map((it) => ({
+    key: `${it.code}`,
+    id: `${it.id}`,
+    pid: "-1",
+    nodeType: "duties",
+    isLeaf: true,
+    data: { ...it },
+  })));
 
   useImperativeHandle(ref, () => ({
     open: () => setVisible(true),
-    close: () => setVisible(false)
-  }))
+    close: () => setVisible(false),
+  }));
 
   const onSelectHandler = (keys, node) => {
     onSelect && onSelect(keys, node);
     setVisible(false);
-  }
+  };
 
-  const onSearchChangeHandler = val => {
+  const onSearchChangeHandler = (val) => {
     setSearchKey(val);
   };
 
-
-  const popup = <div>
+  const popup = (
+    <div>
       <SinglePersonalLayout>
         <SelectorInput onChange={onSearchChangeHandler} />
-        {!!searchKey ? (
+        {searchKey ? (
           loading ? (
             <Loading />
           ) : (
-          <div>
-            <TreeNodeContext.Provider value={{}}>
-            <ChooseTree
-              multiple={false}
-              treeData={dutiesData}
-              asyncData={false}
-              onSelect={onSelectHandler}
-              virtual={true}
-              height={height}
-              switcherIcon=""
-            />
-          </TreeNodeContext.Provider>
-          </div>
+            <div>
+              <TreeNodeContext.Provider value={{}}>
+                <ChooseTree
+                  multiple={false}
+                  treeData={dutiesData}
+                  asyncData={false}
+                  onSelect={onSelectHandler}
+                  virtual
+                  height={height}
+                  switcherIcon=""
+                />
+              </TreeNodeContext.Provider>
+            </div>
           )
         ) : (
           <TreeNodeContext.Provider value={{}}>
             <ChooseTree
               onSelect={onSelectHandler}
-              asyncData={true}
+              asyncData
               multiple={false}
               getTreeData={onGetTreeData}
               itemHeight={itemHeight}
               height={height}
-              virtual={true}
+              virtual
               switcherIcon=""
             />
           </TreeNodeContext.Provider>
         )}
       </SinglePersonalLayout>
-  </div>;
+    </div>
+  );
 
-  return <CommonContext.Provider value={{}}>
-    <Popup
-      popup={popup}
-      popupVisible={visible}
-      popupPlacement={position}
-      forceRender={forceRender}
-      destroyPopupOnHide={destroyPopupOnHide}
-      onPopupVisibleChange={visible => {
-        setVisible(visible);
-        onPopupVisibleChange && onPopupVisibleChange(visible);
-      }}
-    >
-      {children || trigger}
-    </Popup>
-  </CommonContext.Provider>
-})
+  return (
+    <CommonContext.Provider value={{}}>
+      <Popup
+        popup={popup}
+        popupVisible={visible}
+        popupPlacement={position}
+        forceRender={forceRender}
+        destroyPopupOnHide={destroyPopupOnHide}
+        onPopupVisibleChange={(visible) => {
+          setVisible(visible);
+          onPopupVisibleChange && onPopupVisibleChange(visible);
+        }}
+      >
+        {children || trigger}
+      </Popup>
+    </CommonContext.Provider>
+  );
+});

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

@@ -5,13 +5,13 @@ import React, {
   useEffect,
 } from "react";
 import { CommonContext } from "../../context";
-import { getTreeData } from '../../request-apis';
+import { getTreeData } from "../../request-apis";
 import {
   OpenUserName,
   OpenDepartmentName,
   isWechat,
 } from "../../../../utils/open-data";
-import SelectorGenerater from './selector-generater';
+import SelectorGenerater from "./selector-generater";
 import Popup from "../../../popup";
 import { User } from "../../interface";
 import { getLocale } from "../../../../utils/getLocale";
@@ -92,7 +92,7 @@ export default forwardRef((props: PropsInterface, ref) => {
     sourceFrom,
     departOnly,
     auth = false, // 数据权限
-    placeholder = getLocale('Mod_Pleaseselect'),
+    placeholder = getLocale("Mod_Pleaseselect"),
     authType,
     getDepartRoot,
     destroyPopupOnHide = true,
@@ -110,21 +110,21 @@ export default forwardRef((props: PropsInterface, ref) => {
       offset: [0, 0],
       overflow: { adjustX: true, adjustY: true },
       targetOffset: [0, 0],
-    }
+    },
   } = props;
 
   const [selected, setSelected] = useState<SelectNode[]>([]);
-  const [selectedText, setSelectedText] = useState('');
+  const [selectedText, setSelectedText] = useState("");
   const [jsxDomValues, setJsxDomValues] = useState<JSX.Element[]>();
   const [visible, setVisible] = useState(false);
 
   const setSelectedByProps = () => {
-    let selected: SelectNode[] = [];
-    let texts: string[] = [];
-    let jsxDomValues: JSX.Element[] = [];
-    const groups = selectNodes.groups;
-    const departments = selectNodes.departments;
-    const users = selectNodes.users;
+    const selected: SelectNode[] = [];
+    const texts: string[] = [];
+    const jsxDomValues: JSX.Element[] = [];
+    const { groups } = selectNodes;
+    const { departments } = selectNodes;
+    const { users } = selectNodes;
     (groups || []).forEach((data) => {
       selected.push({
         nodeType: "group",
@@ -146,13 +146,13 @@ export default forwardRef((props: PropsInterface, ref) => {
     (users || []).forEach((data) => {
       selected.push({
         nodeType: "person",
-        id: data.userId + "",
+        id: `${data.userId}`,
         data,
       });
       texts.push(data.name);
       jsxDomValues.push(<OpenUserName id={data.userId} name={data.name} />);
     });
-    let text = texts.join("、");
+    const text = texts.join("、");
     // if (!text) text = placeholder;
     setSelectedText(text);
     setJsxDomValues(jsxDomValues);
@@ -166,22 +166,22 @@ export default forwardRef((props: PropsInterface, ref) => {
   // 如果需要或许tree的顶级部门节点，则独立调用接口取出数据
   useEffect(() => {
     if (getDepartRoot) {
-      getTreeData('-1', {
+      getTreeData("-1", {
         departOnly, auth, isGetRoot, sourceFrom,
-      }).then(departs => {
+      }).then((departs) => {
         let rootNode;
         for (let i = 0; i < departs.length; i++) {
-          let it = departs[i];
-          if (it.id == '-1') {
+          const it = departs[i];
+          if (it.id == "-1") {
             rootNode = it;
             break;
           }
           if (!rootNode) rootNode = departs[0];
         }
         getDepartRoot(rootNode);
-      })
+      });
     }
-  }, [])
+  }, []);
 
   useImperativeHandle(ref, () => ({
     open: () => setVisible(true),
@@ -192,9 +192,9 @@ export default forwardRef((props: PropsInterface, ref) => {
     setVisible(false);
     setSelected(selectNodes);
     const texts: string[] = [];
-    const users: User[] = [],
-      groups: any[] = [],
-      departments: any[] = [];
+    const users: User[] = [];
+    const groups: any[] = [];
+    const departments: any[] = [];
     // 返回react组件形式的value，应用于企业微信
     const jsxDomValues: JSX.Element[] = [];
 
@@ -204,7 +204,7 @@ export default forwardRef((props: PropsInterface, ref) => {
           users.push(item.data);
           texts.push(item.data.name);
           jsxDomValues.push(
-            <OpenUserName id={item.data.userId} name={item.data.name} />
+            <OpenUserName id={item.data.userId} name={item.data.name} />,
           );
           break;
         case "depart":
@@ -214,7 +214,7 @@ export default forwardRef((props: PropsInterface, ref) => {
             <OpenDepartmentName
               id={item.data.departmentId}
               name={item.data.departmentName}
-            />
+            />,
           );
           break;
         case "group":
@@ -235,7 +235,7 @@ export default forwardRef((props: PropsInterface, ref) => {
     } else {
       onSelect(selectNodes, wechartOpts, e);
     }
-    let text = texts.join("、");
+    const text = texts.join("、");
     // if (!text) text = placeholder;
     setSelectedText(text);
     setJsxDomValues(jsxDomValues);
@@ -246,14 +246,16 @@ export default forwardRef((props: PropsInterface, ref) => {
     onCancel && onCancel();
   };
 
-  const popup = <SelectorGenerater
-    multiple={multiple}
-    onCancel={onCancelHandler}
-    onOk={onOkHandler}
-    selected={selected}
-    onSelect={onOkHandler}
-    showSearchInput={showSearchInput}
-  />
+  const popup = (
+    <SelectorGenerater
+      multiple={multiple}
+      onCancel={onCancelHandler}
+      onOk={onOkHandler}
+      selected={selected}
+      onSelect={onOkHandler}
+      showSearchInput={showSearchInput}
+    />
+  );
 
   return (
     <CommonContext.Provider
@@ -266,10 +268,10 @@ export default forwardRef((props: PropsInterface, ref) => {
         disabledDepartSelect,
         panes,
         searchWord,
-        searchedPanes
+        searchedPanes,
       }}
     >
-      <React.Fragment>
+      <>
         {/* @ts-ignore */}
         <Popup
           popup={popup}
@@ -280,7 +282,7 @@ export default forwardRef((props: PropsInterface, ref) => {
           extraClass={popClass}
           getPopupContainer={getPopupContainer}
           popupAlign={popupAlign}
-          onPopupVisibleChange={visible => {
+          onPopupVisibleChange={(visible) => {
             setVisible(visible);
             onPopupVisibleChange && onPopupVisibleChange(visible);
           }}
@@ -293,16 +295,15 @@ export default forwardRef((props: PropsInterface, ref) => {
               onClick={() => setVisible(!visible)}
             >
               <span className="persel-selector-field__text">
-                {isWechat() ?
-                  jsxDomValues :
-                  (selectedText ? selectedText : <span className="persel-selector-field__text-holder">{placeholder}</span>)
-                }
+                {isWechat()
+                  ? jsxDomValues
+                  : (selectedText || <span className="persel-selector-field__text-holder">{placeholder}</span>)}
               </span>
-              <span className="persel-selector-field__suffix"></span>
+              <span className="persel-selector-field__suffix" />
             </span>
           )}
         </Popup>
-      </React.Fragment>
+      </>
     </CommonContext.Provider>
   );
 });

package/src/components/user-selector/export-modules/field-tree-selector/multiple-selector/index.tsx

@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import classNames from 'classnames';
-import ActionBtns from '../../../action-btns';
-import SelectedPanel from '../../../selected-panel';
-import SingleSelector from '../single-selector';
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import ActionBtns from "../../../action-btns";
+import SelectedPanel from "../../../selected-panel";
+import SingleSelector from "../single-selector";
 
-import '../../../index.scss';
-import './index.scss';
+import "../../../index.scss";
+import "./index.scss";
 
-const preCls = 'perspm-multiple-selector';
+const preCls = "perspm-multiple-selector";
 
-export default props => {
+export default function (props) {
   const {
     onCancel = () => { },
     onOk = () => { },
@@ -23,42 +23,44 @@ export default props => {
   }, [props.selected]);
 
   const onTreeNodeSelectHander = (_, info) => {
-    const nodeIsSelected = !!(selected || []).filter(it => it.id == info.node.id).length;
+    const nodeIsSelected = !!(selected || []).filter((it) => it.id == info.node.id).length;
     if (nodeIsSelected) return;
     delete info.node.children;
     info.node.isLeaf = true; // 选中的部门或群组不显示Open
     setSelected([
       ...(selected || []),
-      info.node
+      info.node,
     ]);
-  }
+  };
 
-  const onOkHandler = e => {
+  const onOkHandler = (e) => {
     onOk(selected, e);
-  }
+  };
 
-  const wrapperClickHandler = e => {
+  const wrapperClickHandler = (e) => {
     e.stopPropagation();
-  }
+  };
 
-  return <div
-    className={classNames(preCls)}
-    onClick={wrapperClickHandler}
-  >
-    <div className={classNames(`${preCls}__box`)}>
+  return (
+    <div
+      className={classNames(preCls)}
+      onClick={wrapperClickHandler}
+    >
+      <div className={classNames(`${preCls}__box`)}>
 
-      <div className={classNames(`${preCls}__box-inner`)}>
-        <div className={classNames(`${preCls}__box-inner-left`)}>
-          <SingleSelector onSelectPure={onTreeNodeSelectHander} showSearchInput={true} />
+        <div className={classNames(`${preCls}__box-inner`)}>
+          <div className={classNames(`${preCls}__box-inner-left`)}>
+            <SingleSelector onSelectPure={onTreeNodeSelectHander} showSearchInput />
+          </div>
+          <div className={classNames(`${preCls}__box-inner-right`)}>
+            <SelectedPanel selected={selected} setSelected={setSelected} />
+          </div>
         </div>
-        <div className={classNames(`${preCls}__box-inner-right`)}>
-          <SelectedPanel selected={selected} setSelected={setSelected} />
-        </div>
-      </div>
 
-      <div className={classNames(`${preCls}__box-footer`)}>
-        <ActionBtns onCancel={onCancel} onOk={onOkHandler} />
+        <div className={classNames(`${preCls}__box-footer`)}>
+          <ActionBtns onCancel={onCancel} onOk={onOkHandler} />
+        </div>
       </div>
     </div>
-  </div>
-};
+  );
+}

package/src/components/user-selector/export-modules/field-tree-selector/selector-generater.tsx

@@ -1,29 +1,32 @@
-import React, { } from 'react';
-import classNames from 'classnames';
-import SingleSelector from './single-selector';
-import MultipleWarpper from './multiple-selector';
+import React, { } from "react";
+import classNames from "classnames";
+import SingleSelector from "./single-selector";
+import MultipleWarpper from "./multiple-selector";
 
-import './index.scss';
+import "./index.scss";
 
-const preCls = 'perspm-selector-generater';
+const preCls = "perspm-selector-generater";
 
 interface Props {
   multiple: boolean;
 }
 
-export default (props: Props) => {
+export default function (props: Props) {
   const {
     multiple,
     ...restProps
   } = props;
 
-  return <div className={classNames('persel-box', preCls, {
-    [`${preCls}--multiple`]: multiple,
-    [`${preCls}--single`]: !multiple
-  })}>
-    <div className={classNames(`${preCls}__box`)}>
-      {!multiple && <SingleSelector {...restProps} />}
-      {multiple && <MultipleWarpper {...restProps} />}
+  return (
+    <div className={classNames("persel-box", preCls, {
+      [`${preCls}--multiple`]: multiple,
+      [`${preCls}--single`]: !multiple,
+    })}
+    >
+      <div className={classNames(`${preCls}__box`)}>
+        {!multiple && <SingleSelector {...restProps} />}
+        {multiple && <MultipleWarpper {...restProps} />}
+      </div>
     </div>
-  </div>
+  );
 }