@qmlight/web-platform-components 1.0.2 → 1.0.5

package/SearchAssistanceSelect/src/SearchAssistanceComponent/api/server.js

@@ -12,4 +12,5 @@ export default {
   QFC_PUBLIC: `${prefix}/dcp-base-public`,
   QFC_AUTH: `${prefix}/dcp-base-auth`,
   GWGL_SERVICE: `/gwgl-service`,
+  FT_FLOAT: `${prefix}/ft-oa-service`,
 };

package/SearchAssistanceSelect/src/SearchAssistanceComponent/api/tabList/index.js

@@ -11,7 +11,7 @@ export const getOrgsByConditions = (params) => {
   return axios.post(`${SERVER.QFC_BASE}/lowcode/getOrgsByConditions`, params);
 };
 export const recentUserPage = (params) => {
-  return axios.post(`${SERVER.QFC_BASE}/custom/getCommonGroup`, params);
+  return axios.post(`${SERVER.FT_FLOAT}/customGroup/getCustomGroup`, params);
 };
 
 export const getUsersByConditions = (params) => {

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

@@ -0,0 +1,325 @@
+import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
+import { message, QmSearchTree } from 'dcp-design-react';
+import {
+  getAllCustomGroups,
+  createCustomGroups,
+  deleteCustomGroup,
+  getUsersByCustomGroup,
+} from '../../api/tabList';
+import isEmpty from 'lodash-es/isEmpty';
+import { UserOutlined, FolderOutlined, EditOutlined, DeleteOutlined } from '@/icons';
+import './style.less';
+
+const MultipleTree = React.forwardRef((props: any, ref) => {
+  const {
+    mode,
+    onDataChange,
+    selectedKeys = [],
+    targetKeys = [],
+    onItemSelectAll,
+    onValueChange,
+    type = 'default',
+    onDoubleClickChange,
+    actionHandle,
+  } = props;
+  const [fetchParams, setFetchParams] = useState<any>({});
+  const treeData = useRef<any[]>([]);
+  const searchTreeRef = useRef<any>();
+  const [itemKeys, setItemKeys] = useState<any[]>([]);
+  const timer = useRef<any>(null);
+  useEffect(() => {
+    if (selectedKeys) {
+      const treeList = getTreeList(treeData.current, []);
+      const newList = treeList
+        .filter((item) => selectedKeys.includes(item.id))
+        .map((item) => item.newId);
+      setItemKeys(newList || []);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedKeys]);
+  const onRefreshChange = (id?) => {
+    if (id) {
+      setFetchParams({ newId: id, refesh: true });
+      return;
+    }
+    setFetchParams({});
+  };
+  useImperativeHandle(ref, () => {
+    return {
+      onRefresh: onRefreshChange,
+    };
+  });
+  const updateTreeData = (list, key, children) =>
+    list.map((node) => {
+      if (node.id === key) {
+        return {
+          ...node,
+          children,
+        };
+      }
+      if (node.children) {
+        return {
+          ...node,
+          children: updateTreeData(node.children, key, children),
+        };
+      }
+      return node;
+    });
+  const getNodeData = (data, id, field) => {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].id === id) {
+        return data[i];
+      }
+      if (!isEmpty(data[i].children)) {
+        return getNodeData(data[i].children, id, field);
+      }
+    }
+    return field;
+  };
+  const getIsLeft = (a1, a2) => {
+    if (type === 'default' || type === 'customOrg') {
+      return !a1;
+    }
+    return !a2;
+  };
+  const getCheckAble = (item) => {
+    if (type === 'default' || type === 'org') {
+      return !(targetKeys.includes(item.id) || targetKeys.includes(item.parentId));
+    }
+    if (type === 'customOrg') {
+      return (
+        !item.orgtype &&
+        item.orgtype !== 0 &&
+        !(targetKeys.includes(item.id) || targetKeys.includes(item.parentId))
+      );
+    }
+    if (type === 'doc') {
+      return !(targetKeys.includes(item.id) || targetKeys.includes(item.parentId));
+    }
+    return (
+      item.orgtype === 2 &&
+      !(
+        targetKeys.includes(item.id) ||
+        targetKeys.includes(item.parentId) ||
+        targetKeys.includes(`${item.parentId}_${item.id}`)
+      )
+    );
+  };
+
+  const getData = async (params) => {
+    params.id = params.newId;
+    const treeList = getTreeList(treeData.current, []);
+    const field = treeList.find((item) => item.id === params['id']) || {
+      hasChildren: true,
+    };
+    const { newId, refesh, ...newParams } = params;
+    const res = await (!params?.id
+      ? getAllCustomGroups({})
+      : getUsersByCustomGroup({ ids: [params.id] }));
+    if (res.code === 200) {
+      if (!params['id']) {
+        // const list = getNodeData(res.data, !hasChildren);
+        const list = res.data.map((item) => {
+          return {
+            ...item,
+            checkable: getCheckAble(item),
+            name: item.title,
+            newId: item.id,
+            orgtype: 2,
+            isLeaf: false,
+          };
+        });
+        console.log(list);
+        treeData.current = list;
+        const treeList = getTreeList(list, []);
+        onDataChange &&
+          onDataChange(
+            treeList.map((item) => {
+              return {
+                ...item,
+                key: item.id,
+                title: item.name,
+              };
+            })
+          );
+
+        return {
+          ...res,
+          data: list,
+        };
+      } else {
+        const { userList } = res.data[0] || {};
+        const list = userList.map((item) => {
+          return {
+            ...item,
+            isLeaf: true,
+            id: item.loginName,
+            parentId: params.id,
+            newId: `${params.id}_${item.loginName}`,
+            name: item.userName,
+            checkable: getCheckAble({ ...item, id: item.loginName }),
+          };
+        });
+
+        treeData.current = updateTreeData(treeData.current, params.id, list);
+        const treeList = getTreeList(treeData.current, []);
+        onDataChange &&
+          onDataChange(
+            treeList.map((item) => {
+              return {
+                ...item,
+                key: item.id,
+                title: item.name,
+              };
+            })
+          );
+        if (refesh) {
+          return {
+            ...res,
+            data: treeData.current,
+          };
+        }
+        return {
+          ...res,
+          data: list,
+        };
+      }
+    }
+    onRefreshChange(false);
+    return res;
+  };
+  const getTreeList = (treeData, list) => {
+    treeData.forEach((item) => {
+      list.push(item);
+      if (item.children) {
+        getTreeList(item.children, list);
+      }
+    });
+    return list;
+  };
+
+  const onItemChange = async (node) => {
+    if (node.length > 0) {
+      onItemSelectAll(
+        node.map((item) => item.id),
+        true
+      );
+      if (selectedKeys.length) {
+        return;
+      }
+    } else {
+      onItemSelectAll(selectedKeys, false);
+    }
+  };
+  useEffect(() => {
+    if (searchTreeRef.current) {
+      const treeList = getTreeList(treeData.current, []);
+      treeList.forEach((item) => {
+        if (item.orgtype === 0) {
+          searchTreeRef.current.UPDATE_RECORD(item.id, {
+            checkable: false,
+          });
+        } else {
+          searchTreeRef.current.UPDATE_RECORD(item.newId, {
+            checkable: getCheckAble(item),
+          });
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetKeys]);
+
+  return (
+    <div className="search-tree-page">
+      {/* {type !== 'doc' && <DropDownList onDataChange={onDropDataChange} />} */}
+
+      <div className="search-tree-page-content">
+        <QmSearchTree
+          ref={searchTreeRef}
+          filterable={false}
+          showCollapse={false}
+          asyncLoad={true}
+          multiple={mode === 'multiple'}
+          fetch={{
+            api: getData,
+            params: fetchParams,
+          }}
+          // checkStrictly={true}
+          value={itemKeys}
+          checkStrategy={'SHOW_CHILD'}
+          onCheckChange={(node: any) => {
+            clearTimeout(timer.current);
+            timer.current = setTimeout(async () => {
+              await onItemSelectAll(selectedKeys, false);
+              onItemChange(node);
+            }, 300);
+          }}
+          onSelectChange={(node: any) => {
+            if (!mode) {
+              if (
+                (!node?.orgtype && node.orgtype !== 0) ||
+                (type === 'org' && node.orgtype !== 0)
+              ) {
+                setItemKeys([node.id]);
+                onValueChange && onValueChange({ ...node, value: node.id, title: node.name });
+              }
+            }
+          }}
+          titleRender={(node) => {
+            return node.orgtype === 2 ? (
+              <span
+                className="tree-header-multip"
+                onDoubleClick={(e) => {
+                  if (!node?.checkable) {
+                    return;
+                  }
+                  clearTimeout(timer.current);
+                  if (!targetKeys?.includes(node.id)) {
+                    onDoubleClickChange(node.id);
+                  }
+                }}
+              >
+                <span>
+                  <FolderOutlined /> {node.name}
+                </span>
+                <div className="item-action">
+                  <EditOutlined
+                    onClick={(e) => actionHandle(e, 'edit', node)}
+                    style={{ marginRight: 8, fontSize: 14 }}
+                  />
+                  <DeleteOutlined
+                    onClick={(e) => actionHandle(e, 'del', node)}
+                    style={{ marginRight: 8, fontSize: 14 }}
+                  />
+                </div>
+              </span>
+            ) : (
+              <span
+                onDoubleClick={(e) => {
+                  if (!node?.checkable) {
+                    return;
+                  }
+                  clearTimeout(timer.current);
+                  if (!targetKeys?.includes(node.id)) {
+                    onDoubleClickChange(node.id);
+                  }
+                }}
+              >
+                <UserOutlined /> {node.name}
+              </span>
+            );
+          }}
+          fieldsDefine={{
+            valueKey: 'newId',
+            textKey: 'name',
+          }}
+          showSearchBar={false}
+          // dataSource={treeData}
+        />
+      </div>
+    </div>
+  );
+});
+MultipleTree.displayName = 'MultipleTree';
+export default MultipleTree;

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

@@ -93,7 +93,7 @@ const CustomModal = ({ actionInfo, onClose, setAcitonInfo, mode }) => {
     }
     const field = {
       ...data,
-      userIds: userList.map((item) => item.key),
+      userIds: userList.map((item) => item.oldId || item.key),
     };
     const res = await (!data?.id
       ? createCustomGroups(field)
@@ -197,7 +197,7 @@ const CustomModal = ({ actionInfo, onClose, setAcitonInfo, mode }) => {
           <></>
         )}
 
-        <QmButton onClick={() => onClose()}>取消</QmButton>
+        <QmButton onClick={() => onClose('noRefesh')}>取消</QmButton>
       </QmSpace>
 
       <SearchAssistanceModel
@@ -219,7 +219,6 @@ const CustomModal = ({ actionInfo, onClose, setAcitonInfo, mode }) => {
           {
             label: '组织结构',
             key: '4',
-            type: 'customOrg',
           },
         ]}
         type={'customOrg'}

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

@@ -12,6 +12,7 @@ import './style.less';
 import { Message } from '@/utils';
 import CustomModal from './customModal';
 import { EditOutlined, DeleteOutlined } from '@/icons';
+import MultipleTree from './MultipleTree';
 const { Panel } = Collapse;
 const CustomOrg = (props) => {
   const {
@@ -22,6 +23,7 @@ const CustomOrg = (props) => {
     onItemSelect,
     onValueChange,
     onDataChange,
+    onItemSelectAll,
   } = props;
   const [dataSource, setData] = useState<any>([]);
   const [itemKeys, setItemKeys] = useState<any[]>([]);
@@ -30,6 +32,7 @@ const CustomOrg = (props) => {
     visible: false,
   });
   const [fetchParams, setFetchParams] = useState({});
+  const multipleTreeRef = useRef<any>();
 
   const [moveKey, setMoveKey] = useState<string | null>(null);
   const [activeKeys, setActiveKeys] = useState<string[]>([]);
@@ -53,6 +56,9 @@ const CustomOrg = (props) => {
 
       if (mode) {
         userList.current = list;
+
+        dataList.current = list;
+        setData(list);
         onDataChange && onDataChange(list);
         return;
       }
@@ -111,7 +117,10 @@ const CustomOrg = (props) => {
   };
 
   useEffect(() => {
-    getData();
+    if (mode !== 'multiple') {
+      getData();
+    }
+
     // onDataChange && onDataChange(dataSource);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -144,7 +153,9 @@ const CustomOrg = (props) => {
       const res = await deleteCustomGroup({ id: item.id });
       if (res.code === 200) {
         Message('删除成功', 'success');
-
+        if (mode === 'multiple') {
+          multipleTreeRef?.current?.onRefresh();
+        }
         getData(true);
       }
     }
@@ -159,7 +170,7 @@ const CustomOrg = (props) => {
       getUserData(id);
       return;
     }
-    getData(true);
+    multipleTreeRef?.current?.onRefresh(id);
   };
   const actionHandle = (e, flag, info) => {
     e.stopPropagation();
@@ -237,13 +248,18 @@ const CustomOrg = (props) => {
         )}
         {mode === 'multiple' && (
           <div className="custom-org-page-list">
-            <TabList
+            <MultipleTree
               onDoubleClickChange={onDoubleClickChange}
-              onItemSelect={itemSelect}
-              selectedKeys={itemKeys}
-              type={'edit'}
-              onItemAction={onItemAction}
-              dataSource={dataSource.filter((item) => !targetKeys.includes(item.id))}
+              targetKeys={targetKeys}
+              selectedKeys={selectedKeys}
+              mode={'multiple'}
+              onItemSelect={onItemSelect}
+              onValueChange={onValueChange}
+              onDataChange={onDataChange}
+              onItemSelectAll={onItemSelectAll}
+              type="default"
+              ref={multipleTreeRef}
+              actionHandle={actionHandle}
             />
           </div>
         )}
@@ -262,7 +278,16 @@ const CustomOrg = (props) => {
         >
           <CustomModal
             actionInfo={actionInfo}
-            onClose={onClose}
+            onClose={(flag) => {
+              if (flag === 'noRefesh') {
+                setAcitonInfo({
+                  type: 'add',
+                  visible: false,
+                });
+                return;
+              }
+              onClose(flag);
+            }}
             mode={mode}
             setAcitonInfo={setAcitonInfo}
           />

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

@@ -6,6 +6,17 @@
       height:100%;
     }
   }
+  .ant-tree .ant-tree-treenode{
+    width: 100%;
+  }
+  .ant-tree .ant-tree-node-content-wrapper{
+    display: inline-block;
+    flex: 1;
+  }
+  .tree-header-multip{
+    display: flex;
+    justify-content: space-between;
+  }
   .ant-collapse-content-box{
     padding: 0px;
   }

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

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef, useState } from 'react';
+import TabList from '../tabList';
+import { getUsersByConditions, getOrgsByConditions } from '../../api/tabList';
+import { Pagination } from 'dcp-design-react';
+
+const OrgPageIndex = (props) => {
+  const {
+    mode,
+    selectedKeys,
+    targetKeys,
+    onDataChange,
+    onValueChange,
+    onItemSelect,
+    searchValue,
+    params = {},
+    onDoubleClickChange,
+    type,
+  } = props;
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [itemKeys, setItemKeys] = useState<any[]>([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [fetchParams, setFetchParams] = useState<any>({});
+  const [loading, setLoading] = useState<boolean>(false);
+  const dataList = useRef<any[]>([]);
+  useEffect(() => {
+    setItemKeys(selectedKeys || []);
+  }, [selectedKeys]);
+  const itemSelect = (value, checked) => {
+    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 });
+  };
+  const fetchHandleApi = async (params) => {
+    if (type !== 'org') {
+      return getUsersByConditions(params);
+    }
+    return getOrgsByConditions(params);
+  };
+  const getData = async (params) => {
+    setLoading(true);
+    const res = await fetchHandleApi(params).finally(() => {
+      setLoading(false);
+    });
+
+    if (res.code === 200) {
+      const data = res.data?.records || res.data?.list;
+      const list = data.map((item) => {
+        return {
+          ...item,
+          id: item.loginName || item.id,
+          key: item.loginName || item.id,
+          oldId: item.id,
+          title: item.userName || item.name,
+
+          // deptName: item.departmentName | item.parentOrgName,
+        };
+      });
+      setDataSource(list || []);
+      list.forEach((item) => {
+        if (!dataList.current.find((items) => items.id === item.id)) {
+          dataList.current.push(item);
+        }
+      });
+      onDataChange && onDataChange(dataList.current);
+      setTotal(res.data.total);
+    }
+  };
+  const pageChange = (page, pageSize) => {
+    setPage(page);
+    setFetchParams({ ...fetchParams, currentPage: page });
+  };
+  useEffect(() => {
+    if (fetchParams.currentPage) {
+      getData({ ...fetchParams });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchParams]);
+  useEffect(() => {
+    setFetchParams({ pageSize: 10, currentPage: 1 });
+  }, []);
+  // const ondrownChange = (field) => {
+  //   setFetchParams({ pageSize: 10, currentPage: 1, orgTypeCode: field.key });
+  // };
+  return (
+    <div className="recetly-page-index search-page-list">
+      {/* <DropDownList onDataChange={ondrownChange} /> */}
+      <TabList
+        onItemSelect={itemSelect}
+        loading={loading}
+        onDoubleClickChange={onDoubleClickChange}
+        selectedKeys={itemKeys}
+        dataSource={dataSource.filter((item) => !targetKeys.includes(item.id))}
+      />
+      <Pagination
+        simple
+        size="small"
+        current={page}
+        defaultCurrent={1}
+        showTotal={(total) => `共 ${total} 条`}
+        total={total}
+        onChange={pageChange}
+      />
+    </div>
+  );
+};
+export default OrgPageIndex;