@qmlight/web-platform-components 1.0.3 → 1.0.6

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.QFC_BASE}/lowcode/getOuterCustomGroup`, 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

@@ -1,17 +1,18 @@
-import React, { useState, useEffect, useRef, useLayoutEffect } from "react";
-import { DcpButton, DcpModal, Collapse, Spin } from "dcp-design-react";
-import { PlusOutlined } from "@/icons";
+import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
+import { DcpButton, DcpModal, Collapse, Spin } from 'dcp-design-react';
+import { PlusOutlined } from '@/icons';
 import {
   getAllCustomGroups,
   createCustomGroups,
   deleteCustomGroup,
   getUsersByCustomGroup,
-} from "../../api/tabList";
-import TabList from "../tabList";
-import "./style.less";
-import { Message } from "@/utils";
-import CustomModal from "./customModal";
-import { EditOutlined, DeleteOutlined } from "@/icons";
+} from '../../api/tabList';
+import TabList from '../tabList';
+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,21 +23,23 @@ const CustomOrg = (props) => {
     onItemSelect,
     onValueChange,
     onDataChange,
+    onItemSelectAll,
   } = props;
   const [dataSource, setData] = useState<any>([]);
   const [itemKeys, setItemKeys] = useState<any[]>([]);
   const [actionInfo, setAcitonInfo] = useState<any>({
-    type: "add",
+    type: 'add',
     visible: false,
   });
   const [fetchParams, setFetchParams] = useState({});
+  const multipleTreeRef = useRef<any>();
 
   const [moveKey, setMoveKey] = useState<string | null>(null);
   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 [loaingChild, setLoadingChild] = useState('');
   const getData = async (flag?) => {
     setLoading(true);
     const res = await getAllCustomGroups({}).finally(() => {
@@ -47,21 +50,21 @@ const CustomOrg = (props) => {
         return {
           ...item,
           key: item.id,
-          orgtype: "customOrg",
+          orgtype: 'customOrg',
         };
       });
 
       if (mode) {
         userList.current = list;
-        setData(list);
+
         dataList.current = list;
+        setData(list);
         onDataChange && onDataChange(list);
         return;
       }
       if (flag) {
         dataList.current = list.map((item) => {
-          const field =
-            dataList.current.find((items) => items.id === item.id) || {};
+          const field = dataList.current.find((items) => items.id === item.id) || {};
           return {
             ...item,
             ...field,
@@ -70,6 +73,8 @@ const CustomOrg = (props) => {
         setData(dataList.current);
         return;
       } else {
+        setData(list);
+        dataList.current = list;
       }
 
       const firstId = list.find((_, index) => index === 0).id;
@@ -112,7 +117,10 @@ const CustomOrg = (props) => {
   };
 
   useEffect(() => {
-    getData();
+    if (mode !== 'multiple') {
+      getData();
+    }
+
     // onDataChange && onDataChange(dataSource);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -120,19 +128,18 @@ const CustomOrg = (props) => {
     setItemKeys(selectedKeys || []);
   }, [selectedKeys]);
   const itemSelect = (value, checked) => {
-    if (mode === "multiple") {
+    if (mode === 'multiple') {
       onItemSelect && onItemSelect(value, checked);
       return;
     }
     setItemKeys([value]);
     const field = userList.current.find((item) => item.id === value);
-    onValueChange &&
-      onValueChange({ ...field, value: field.id, label: field.title });
+    onValueChange && onValueChange({ ...field, value: field.id, label: field.title });
   };
   const onItemAction = async (act, item) => {
-    if (act === "edit") {
+    if (act === 'edit') {
       setAcitonInfo({
-        type: "edit",
+        type: 'edit',
         data: {
           id: item.id,
           title: item.title,
@@ -142,11 +149,13 @@ const CustomOrg = (props) => {
       });
       return;
     }
-    if (act === "del") {
+    if (act === 'del') {
       const res = await deleteCustomGroup({ id: item.id });
       if (res.code === 200) {
-        Message("删除成功", "success");
-
+        Message('删除成功', 'success');
+        if (mode === 'multiple') {
+          multipleTreeRef?.current?.onRefresh();
+        }
         getData(true);
       }
     }
@@ -154,23 +163,23 @@ const CustomOrg = (props) => {
 
   const onClose = (id?) => {
     setAcitonInfo({
-      type: "add",
+      type: 'add',
       visible: false,
     });
     if (!mode && id) {
       getUserData(id);
       return;
     }
-    getData(true);
+    multipleTreeRef?.current?.onRefresh(id);
   };
   const actionHandle = (e, flag, info) => {
     e.stopPropagation();
-    if (flag === "edit") {
-      onItemAction("edit", info);
+    if (flag === 'edit') {
+      onItemAction('edit', info);
       return;
     }
-    if (flag === "del") {
-      onItemAction("del", info);
+    if (flag === 'del') {
+      onItemAction('del', info);
     }
   };
 
@@ -183,7 +192,7 @@ const CustomOrg = (props) => {
             icon={<PlusOutlined />}
             onClick={() => {
               setAcitonInfo({
-                type: "add",
+                type: 'add',
                 visible: true,
               });
             }}
@@ -199,9 +208,7 @@ const CustomOrg = (props) => {
                 setActiveKeys(val);
                 if (val.length) {
                   const newId = val[val.length - 1];
-                  const userFlag = dataList.current.find(
-                    (item) => item.id === newId,
-                  )?.userList;
+                  const userFlag = dataList.current.find((item) => item.id === newId)?.userList;
                   if (!userFlag) {
                     getUserData(newId);
                   }
@@ -216,11 +223,11 @@ const CustomOrg = (props) => {
                     extra={
                       <div className="item-action">
                         <EditOutlined
-                          onClick={(e) => actionHandle(e, "edit", item)}
+                          onClick={(e) => actionHandle(e, 'edit', item)}
                           style={{ marginRight: 8, fontSize: 14 }}
                         />
                         <DeleteOutlined
-                          onClick={(e) => actionHandle(e, "del", item)}
+                          onClick={(e) => actionHandle(e, 'del', item)}
                           style={{ marginRight: 8, fontSize: 14 }}
                         />
                       </div>
@@ -231,9 +238,7 @@ const CustomOrg = (props) => {
                       onItemSelect={itemSelect}
                       selectedKeys={itemKeys}
                       // loading={item.id === loaingChild}
-                      dataSource={item.userList?.filter(
-                        (items) => !targetKeys.includes(items.id),
-                      )}
+                      dataSource={item.userList?.filter((items) => !targetKeys.includes(items.id))}
                     />
                   </Panel>
                 );
@@ -241,17 +246,20 @@ const CustomOrg = (props) => {
             </Collapse>
           </div>
         )}
-        {mode === "multiple" && (
+        {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,15 +270,24 @@ const CustomOrg = (props) => {
           visible={actionInfo.visible}
           onClose={() =>
             setAcitonInfo({
-              type: "add",
+              type: 'add',
               visible: false,
             })
           }
-          wrapClassName={"search-assistance-modal"}
+          wrapClassName={'search-assistance-modal'}
         >
           <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;
   }