@qmlight/web-platform-components 1.0.0 → 1.0.2

package/SearchAssistanceSelect/src/SearchAssistanceComponent/component/customOrg/customModal.tsx

@@ -100,7 +100,7 @@ const CustomModal = ({ actionInfo, onClose, setAcitonInfo, mode }) => {
       : updateCustomGroup({ ...field, id: data.id }));
     if (res.code === 200) {
       Message('保存成功', 'success');
-      onClose(true);
+      onClose(data?.id);
     }
   };
   const onModalDataChange = (data) => {

package/SearchAssistanceSelect/src/SearchAssistanceComponent/component/customOrg/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
-import { DcpButton, DcpModal, DcpSearchTree } from 'dcp-design-react';
+import { DcpButton, DcpModal, Collapse, Spin } from 'dcp-design-react';
 import { PlusOutlined } from '@/icons';
 import {
   getAllCustomGroups,
@@ -12,7 +12,7 @@ import './style.less';
 import { Message } from '@/utils';
 import CustomModal from './customModal';
 import { EditOutlined, DeleteOutlined } from '@/icons';
-
+const { Panel } = Collapse;
 const CustomOrg = (props) => {
   const {
     onDoubleClickChange,
@@ -32,8 +32,16 @@ const CustomOrg = (props) => {
   const [fetchParams, setFetchParams] = useState({});
 
   const [moveKey, setMoveKey] = useState<string | null>(null);
-  const getData = async () => {
-    const res = await getAllCustomGroups({});
+  const [activeKeys, setActiveKeys] = useState<string[]>([]);
+  const userList = React.useRef<any[]>([]);
+  const dataList = React.useRef<any>([]);
+  const [loading, setLoading] = useState(false);
+  const [loaingChild, setLoadingChild] = useState('');
+  const getData = async (flag?) => {
+    setLoading(true);
+    const res = await getAllCustomGroups({}).finally(() => {
+      setLoading(false);
+    });
     if (res.code === 200) {
       const list = res.data.map((item) => {
         return {
@@ -42,45 +50,68 @@ const CustomOrg = (props) => {
           orgtype: 'customOrg',
         };
       });
-      setData(list);
-      onDataChange && onDataChange(list);
+
+      if (mode) {
+        userList.current = list;
+        onDataChange && onDataChange(list);
+        return;
+      }
+      if (flag) {
+        dataList.current = list.map((item) => {
+          const field = dataList.current.find((items) => items.id === item.id) || {};
+          return {
+            ...item,
+            ...field,
+          };
+        });
+        setData(dataList.current);
+        return;
+      } else {
+        setData(list);
+        dataList.current = list;
+      }
+
+      const firstId = list.find((_, index) => index === 0).id;
+
+      if (firstId) {
+        setActiveKeys([firstId]);
+        getUserData(firstId);
+      }
+
+      // onDataChange && onDataChange(list);
     }
   };
-  const getTreeData = async (params) => {
-    const res = await (params.id
-      ? getUsersByCustomGroup({ ids: [params.id] })
-      : getAllCustomGroups({}));
+  const getUserData = async (id) => {
+    setLoading(true);
+    const res = await getUsersByCustomGroup({ ids: [id] }).finally(() => {
+      setLoading(false);
+    });
+    const { data = [] } = res;
     if (res.code === 200) {
-      if (params.id) {
+      const newList = data[0]?.userList?.map((item) => {
         return {
-          ...res,
-          data: res.data[0]?.userList.map((item) => {
-            return {
-              ...item,
-              isLeaf: true,
-              title: item.userName,
-            };
-          }),
-        };
-      } else {
-        return {
-          ...res,
-          data: res.data.map((item) => {
-            return {
-              ...item,
-              orgtype: 'customOrg',
-            };
-          }),
+          ...item,
+          name: item.userName,
+          title: item.userName,
         };
-      }
+      });
+      userList.current = userList.current.concat(newList || []);
+      onDataChange && onDataChange(userList.current);
+      dataList.current = dataList.current.map((item) => {
+        if (item.id === id) {
+          return {
+            ...item,
+            userList: newList,
+          };
+        }
+        return item;
+      });
+      setData(dataList.current);
     }
-    return res;
   };
 
   useEffect(() => {
-    if (mode === 'multiple') {
-      getData();
-    }
+    getData();
     // onDataChange && onDataChange(dataSource);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -93,7 +124,7 @@ const CustomOrg = (props) => {
       return;
     }
     setItemKeys([value]);
-    const field = dataSource.find((item) => item.id === value);
+    const field = userList.current.find((item) => item.id === value);
     onValueChange && onValueChange({ ...field, value: field.id, label: field.title });
   };
   const onItemAction = async (act, item) => {
@@ -113,25 +144,22 @@ const CustomOrg = (props) => {
       const res = await deleteCustomGroup({ id: item.id });
       if (res.code === 200) {
         Message('删除成功', 'success');
-        if (!mode) {
-          setFetchParams({});
-          return;
-        }
-        getData();
+
+        getData(true);
       }
     }
   };
 
-  const onClose = () => {
+  const onClose = (id?) => {
     setAcitonInfo({
       type: 'add',
       visible: false,
     });
-    if (!mode) {
-      setFetchParams({});
+    if (!mode && id) {
+      getUserData(id);
       return;
     }
-    getData();
+    getData(true);
   };
   const actionHandle = (e, flag, info) => {
     e.stopPropagation();
@@ -143,102 +171,103 @@ const CustomOrg = (props) => {
       onItemAction('del', info);
     }
   };
+
   return (
     <div className="custom-org-page">
-      <div className="custom-org-page-extra">
-        <DcpButton
-          type="primary"
-          icon={<PlusOutlined />}
-          onClick={() => {
-            setAcitonInfo({
-              type: 'add',
-              visible: true,
-            });
-          }}
-        >
-          新建分组
-        </DcpButton>
-      </div>
-      {!mode && (
-        <div className="custom-org-page-tree">
-          <DcpSearchTree
-            showSearchBar={false}
-            filterable={false}
-            showCollapse={false}
-            asyncLoad={true}
-            value={itemKeys}
-            onSelectChange={(node: any) => {
-              if (!mode) {
-                if (!node.orgtype) {
-                  setItemKeys([node.id]);
-                  onValueChange && onValueChange({ ...node, value: node.id, title: node.title });
-                }
-              }
-            }}
-            fetch={{
-              api: getTreeData,
-              params: fetchParams,
-            }}
-            fieldsDefine={{
-              valueKey: 'id',
-              textKey: 'title',
+      <Spin spinning={loading}>
+        <div className="custom-org-page-extra">
+          <DcpButton
+            type="primary"
+            icon={<PlusOutlined />}
+            onClick={() => {
+              setAcitonInfo({
+                type: 'add',
+                visible: true,
+              });
             }}
-            titleRender={(nodeData) => {
-              return nodeData.orgtype === 'customOrg' ? (
-                <div
-                  onMouseEnter={() => setMoveKey(nodeData.id)}
-                  onMouseLeave={() => setMoveKey(null)}
-                  className="title-item-field"
-                >
-                  <div>{nodeData.title}</div>
-                  <div
-                    className="item-action"
-                    style={{ display: moveKey === nodeData.id ? 'block' : 'none' }}
+          >
+            新建分组
+          </DcpButton>
+        </div>
+        {!mode && (
+          <div className="custom-org-page-list">
+            <Collapse
+              activeKey={activeKeys}
+              onChange={(val: string[]) => {
+                setActiveKeys(val);
+                if (val.length) {
+                  const newId = val[val.length - 1];
+                  const userFlag = dataList.current.find((item) => item.id === newId)?.userList;
+                  if (!userFlag) {
+                    getUserData(newId);
+                  }
+                }
+              }}
+            >
+              {dataSource.map((item) => {
+                return (
+                  <Panel
+                    header={item.title}
+                    key={item.id}
+                    extra={
+                      <div className="item-action">
+                        <EditOutlined
+                          onClick={(e) => actionHandle(e, 'edit', item)}
+                          style={{ marginRight: 8, fontSize: 14 }}
+                        />
+                        <DeleteOutlined
+                          onClick={(e) => actionHandle(e, 'del', item)}
+                          style={{ marginRight: 8, fontSize: 14 }}
+                        />
+                      </div>
+                    }
                   >
-                    <EditOutlined
-                      onClick={(e) => actionHandle(e, 'edit', nodeData)}
-                      style={{ marginRight: 8, fontSize: 14 }}
-                    />
-                    <DeleteOutlined
-                      onClick={(e) => actionHandle(e, 'del', nodeData)}
-                      style={{ marginRight: 8, fontSize: 14 }}
+                    <TabList
+                      onDoubleClickChange={onDoubleClickChange}
+                      onItemSelect={itemSelect}
+                      selectedKeys={itemKeys}
+                      // loading={item.id === loaingChild}
+                      dataSource={item.userList?.filter((items) => !targetKeys.includes(items.id))}
                     />
-                  </div>
-                </div>
-              ) : (
-                nodeData.title
-              );
-            }}
-          />
-        </div>
-      )}
-      {mode === 'multiple' && (
-        <div className="custom-org-page-list">
-          <TabList
-            onDoubleClickChange={onDoubleClickChange}
-            onItemSelect={itemSelect}
-            selectedKeys={itemKeys}
-            type={'edit'}
-            onItemAction={onItemAction}
-            dataSource={dataSource.filter((item) => !targetKeys.includes(item.id))}
+                  </Panel>
+                );
+              })}
+            </Collapse>
+          </div>
+        )}
+        {mode === 'multiple' && (
+          <div className="custom-org-page-list">
+            <TabList
+              onDoubleClickChange={onDoubleClickChange}
+              onItemSelect={itemSelect}
+              selectedKeys={itemKeys}
+              type={'edit'}
+              onItemAction={onItemAction}
+              dataSource={dataSource.filter((item) => !targetKeys.includes(item.id))}
+            />
+          </div>
+        )}
+        <DcpModal
+          width={800}
+          height={540}
+          title="分组"
+          visible={actionInfo.visible}
+          onClose={() =>
+            setAcitonInfo({
+              type: 'add',
+              visible: false,
+            })
+          }
+          wrapClassName={'search-assistance-modal'}
+        >
+          <CustomModal
+            actionInfo={actionInfo}
+            onClose={onClose}
+            mode={mode}
+            setAcitonInfo={setAcitonInfo}
           />
-        </div>
-      )}
-      <DcpModal
-        width={800}
-        height={540}
-        title="分组"
-        visible={actionInfo.visible}
-        onClose={() => onClose()}
-        wrapClassName={'search-assistance-modal'}
-      >
-        <CustomModal
-          actionInfo={actionInfo}
-          onClose={onClose}
-          mode={mode}
-          setAcitonInfo={setAcitonInfo}
-        />
-      </DcpModal>
+        </DcpModal>
+      </Spin>
     </div>
   );
 };

package/SearchAssistanceSelect/src/SearchAssistanceComponent/component/customOrg/style.less

@@ -1,5 +1,14 @@
 .custom-org-page{
   height: 100%;
+  .ant-spin-nested-loading{
+    height: 100%;
+    .ant-spin-container{
+      height:100%;
+    }
+  }
+  .ant-collapse-content-box{
+    padding: 0px;
+  }
   &-extra{
     text-align: right;
     padding: 3px ;
@@ -20,8 +29,6 @@
   }
   &-list{
     height: calc(100% - 38px);
-    &-field{
-
-    }
+    overflow-y: auto;
   }
 }

package/SearchAssistanceSelect/src/SearchAssistanceComponent/component/recently/index.tsx

@@ -69,7 +69,7 @@ const RecentlyPageIndex = (props) => {
         onDoubleClickChange={onDoubleClickChange}
         onItemSelect={itemSelect}
         selectedKeys={itemKeys}
-        dataSource={dataSource.filter((item) => !targetKeys.includes(item.id))}
+        dataSource={dataSource.filter((item) => !targetKeys?.includes(item.id))}
       />
       {/* <Pagination
         simple

package/SearchAssistanceSelect/src/SearchAssistanceComponent/component/search/index.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
-import TabList from '../tabList';
-import { getUsersByConditions, getOrgsByConditions } from '../../api/tabList';
-import { Pagination } from 'dcp-design-react';
+import React, { useEffect, useRef, useState } from "react";
+import TabList from "../tabList";
+import { getUsersByConditions, getOrgsByConditions } from "../../api/tabList";
+import { Pagination } from "dcp-design-react";
 
 const SearchPageIndex = (props) => {
   const {
@@ -27,16 +27,17 @@ const SearchPageIndex = (props) => {
     setItemKeys(selectedKeys || []);
   }, [selectedKeys]);
   const itemSelect = (value, checked) => {
-    if (mode === 'multiple') {
+    if (mode === "multiple") {
       onItemSelect && onItemSelect(value, checked);
       return;
     }
     setItemKeys([value]);
     const field = dataSource.find((item) => item.id === value);
-    onValueChange && onValueChange({ ...field, value: field.id, label: field.userName });
+    onValueChange &&
+      onValueChange({ ...field, value: field.id, label: field.userName });
   };
   const fetchHandleApi = async (params) => {
-    if (type !== 'org') {
+    if (type !== "org") {
       return getUsersByConditions(params);
     }
     return getOrgsByConditions(params);
@@ -73,7 +74,9 @@ const SearchPageIndex = (props) => {
   };
   useEffect(() => {
     if (fetchParams.currentPage) {
-      getData(fetchParams);
+      if (fetchParams.name) {
+        getData({ ...fetchParams });
+      }
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/SearchAssistanceSelect/src/SearchAssistanceComponent/component/tabList/style.less

@@ -1,5 +1,5 @@
 .tab-list-page{
- padding: 0px 0px 0px 10px;
+//  padding: 0px 0px 0px 10px;
   .ant-list{
     // height: 378px;
     height: 100%;

package/SearchAssistanceSelect/src/SearchAssistanceComponent/searchTabs.tsx

@@ -50,6 +50,7 @@ const SearchTabs = (props) => {
   const { data, onClose, onDataChange, mode, items, customData } = props;
   const [itemsList, setItemsList] = useState(item);
   const [fetchParams, setFetchParams] = useState({});
+  const [value, setValue] = useState('');
 
   const [activeKey, setActiveKey] = useState('1');
   const prevActiveKey = useRef('1');
@@ -71,6 +72,7 @@ const SearchTabs = (props) => {
   }, [items]);
   const fetchHandle = (field) => {
     const { type, name } = field;
+    console.log(field);
     if (name === '') {
       setActiveKey(prevActiveKey.current);
       return;
@@ -80,6 +82,7 @@ const SearchTabs = (props) => {
         name,
         // orgIdList: params.orgIdList?.map((item) => item.value),
         // roleId: params.roleId?.value,
+        deleted: 0,
         orgTypeCode: 'def',
       };
       setActiveKey('5');
@@ -95,8 +98,12 @@ const SearchTabs = (props) => {
     }
   };
   const onSearch = (e) => {
+    if (e === '') {
+      setActiveKey(prevActiveKey.current);
+      return;
+    }
     setActiveKey('5');
-    setFetchParams({ name: e, orgTypeCode: 'def' });
+    setFetchParams({ name: e, orgTypeCode: 'def', deleted: 0 });
   };
   return (
     <div className="search-assistance-tabs">
@@ -113,38 +120,59 @@ const SearchTabs = (props) => {
           ) : (
             <Search
               // bordered={false}
-              // value={value}
-              // onChange={onSearchChange}
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
               onSearch={onSearch}
               allowClear
             />
           )
         }
       />
-      <div className={'search-assistance-tabs-content'}>
+      <div
+        className={'search-assistance-tabs-content'}
+        // style={{ display: activeKey !== '5' ? 'block' : 'none' }}
+      >
         {mode === 'multiple' ? (
           <TransferIndex
             data={data || []}
             customData={customData}
             leftChildren={
-              componentList[activeKey] ? React.cloneElement(componentList[activeKey]) : <></>
+              componentList[activeKey] ? (
+                React.cloneElement(componentList[prevActiveKey.current])
+              ) : (
+                <></>
+              )
             }
-            onValueChange={onValueChange}
+            activeKey={activeKey}
             onTabChange={tabSearchChange}
+            onValueChange={onValueChange}
             params={fetchParams}
             type={itemsList.find((item) => item.key === activeKey)?.type || 'default'}
           />
         ) : (
-          componentList[activeKey] &&
-          React.cloneElement(componentList[activeKey], {
-            mode,
-            selectedKeys: data?.value ? [data.value] : [],
-            onValueChange,
-            customData,
-            targetKeys: [],
-            params: fetchParams,
-            type: itemsList.find((item) => item.key === activeKey)?.type || 'default',
-          })
+          componentList[activeKey] && (
+            <>
+              {activeKey === '5' &&
+                React.cloneElement(<SearchPageIndex />, {
+                  mode,
+                  selectedKeys: data?.value ? [data.value] : [],
+                  onValueChange,
+                  customData,
+                  targetKeys: [],
+                  params: fetchParams,
+                  type: itemsList.find((item) => item.key === activeKey)?.type || 'default',
+                })}
+              {React.cloneElement(componentList[prevActiveKey.current], {
+                mode,
+                selectedKeys: data?.value ? [data.value] : [],
+                onValueChange,
+                customData,
+                targetKeys: [],
+                // params: params,
+                type: itemsList.find((item) => item.key === activeKey)?.type || 'default',
+              })}
+            </>
+          )
         )}
       </div>
     </div>

package/SearchAssistanceSelect/src/SearchAssistanceComponent/style.less

@@ -6,7 +6,8 @@
   flex: 1;
   max-height: 100%;
   &-content{
-    height:calc(100% - 50px)
+    height:calc(100% - 50px);
+    overflow: hidden;
   }
 
 }

package/SearchAssistanceSelect/src/SearchAssistanceComponent/transfer/index.tsx

@@ -4,7 +4,7 @@ import SearchTransferRight from './searchTransferRight';
 import { Input, Transfer } from 'dcp-design-react';
 import { getUsersUnderOrg } from '../api/treeData';
 import { getUsersByCustomGroup } from '../api/tabList';
-// import AdvancedSearch from '../AdvancedSearch';
+import SearchPageIndex from '../component/search';
 
 const { Search } = Input;
 import './style.less';
@@ -18,7 +18,7 @@ const searchTransfer = ({ onSearch }) => {
 };
 const searchLeft = ({ type, onSearch, value, onSearchChange }) => {
   console.log(type);
-  return type !== 'dept' && type !== 'doc' && type !== 'customNode' ? (
+  return type !== 'dept' && type !== 'doc' && type !== 'customNode' && type !== 'customOrg' ? (
     <div className="search-transfer-action">
       <Search
         bordered={false}
@@ -40,6 +40,7 @@ const TransferIndex = ({
   type,
   params = {},
   customData = [],
+  activeKey,
 }) => {
   const [transferDataSource, setTransferDataSource] = useState<any[]>([]);
   const [targetKeys, setTargetKeys] = useState<string[]>([]);
@@ -51,6 +52,11 @@ const TransferIndex = ({
       setTargetKeys(data.map((item) => item.id) || []);
     }
   }, [data]);
+  useEffect(() => {
+    if (activeKey !== '5') {
+      setLeftValue('');
+    }
+  }, [activeKey]);
   const getUserData = async (list) => {
     const lists = transferDataSource
       .filter((item) => list.includes(item.id) && item.orgtype)
@@ -166,25 +172,49 @@ const TransferIndex = ({
         >
           {({ direction, onItemSelect, selectedKeys, onItemSelectAll }) => {
             if (direction === 'left') {
-              return React.cloneElement(leftChildren, {
-                height: 300,
-                mode: 'multiple',
-                onDataChange: (data) => {
-                  console.log(123);
-                  console.log(data);
-                  setTransferDataSource(data);
-                },
-                onTypeChange: onTypeChange,
-                targetKeys: targetKeys,
-                onItemSelect: onItemSelect,
-                selectedKeys: selectedKeys,
-                onItemSelectAll: onItemSelectAll,
-                onDoubleClickChange: onDoubleClickChange,
-                data: data,
-                type: type,
-                params: params,
-                customData,
-              });
+              return (
+                <>
+                  {activeKey === '5' &&
+                    React.cloneElement(<SearchPageIndex />, {
+                      height: 300,
+                      mode: 'multiple',
+                      onDataChange: (data) => {
+                        console.log(123);
+                        console.log(data);
+                        setTransferDataSource(data);
+                      },
+                      onTypeChange: onTypeChange,
+                      targetKeys: targetKeys,
+                      onItemSelect: onItemSelect,
+                      selectedKeys: selectedKeys,
+                      onItemSelectAll: onItemSelectAll,
+                      onDoubleClickChange: onDoubleClickChange,
+                      data: data,
+                      type: type,
+                      params: params,
+                      customData,
+                    })}
+                  {React.cloneElement(leftChildren, {
+                    height: 300,
+                    mode: 'multiple',
+                    onDataChange: (data) => {
+                      console.log(123);
+                      console.log(data);
+                      setTransferDataSource(data);
+                    },
+                    onTypeChange: onTypeChange,
+                    targetKeys: targetKeys,
+                    onItemSelect: onItemSelect,
+                    selectedKeys: selectedKeys,
+                    onItemSelectAll: onItemSelectAll,
+                    onDoubleClickChange: onDoubleClickChange,
+                    data: data,
+                    type: type,
+                    params: params,
+                    customData,
+                  })}
+                </>
+              );
             }
             if (direction === 'right') {
               return (

package/SearchAssistanceSelect/src/SearchAssistanceComponent/treeData/index.tsx

@@ -125,7 +125,7 @@ const TreeData = (props) => {
           data: list,
         };
       } else {
-        const resPer: any = await (type === 'default'
+        const resPer: any = await (type === 'default' && field.hasChildren
           ? getOrgPerson({ id: params.id })
           : new Promise((resolve) => {
               resolve({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qmlight/web-platform-components",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "A platform components for React",
   "keywords": [
     "React",