@qmlight/web-platform-components 1.0.0

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

@@ -0,0 +1,211 @@
+import React, { useEffect, useState, useRef } from 'react';
+
+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';
+
+const { Search } = Input;
+import './style.less';
+
+const searchTransfer = ({ onSearch }) => {
+  return (
+    <div className="search-transfer-action">
+      <Search bordered={false} onSearch={onSearch} allowClear />
+    </div>
+  );
+};
+const searchLeft = ({ type, onSearch, value, onSearchChange }) => {
+  console.log(type);
+  return type !== 'dept' && type !== 'doc' && type !== 'customNode' ? (
+    <div className="search-transfer-action">
+      <Search
+        bordered={false}
+        value={value}
+        onChange={onSearchChange}
+        onSearch={(value) => onSearch({ name: value, type })}
+        allowClear
+      />
+    </div>
+  ) : (
+    <></>
+  );
+};
+const TransferIndex = ({
+  leftChildren,
+  data,
+  onValueChange,
+  onTabChange,
+  type,
+  params = {},
+  customData = [],
+}) => {
+  const [transferDataSource, setTransferDataSource] = useState<any[]>([]);
+  const [targetKeys, setTargetKeys] = useState<string[]>([]);
+  const typeValue = useRef<any>({});
+  const [searchValue, setSearchValue] = useState('');
+  const [leftValue, setLeftValue] = useState('');
+  useEffect(() => {
+    if (data) {
+      setTargetKeys(data.map((item) => item.id) || []);
+    }
+  }, [data]);
+  const getUserData = async (list) => {
+    const lists = transferDataSource
+      .filter((item) => list.includes(item.id) && item.orgtype)
+      .map((item) => item.id);
+    console.log(list);
+    console.log(transferDataSource);
+    let dataList: any[] = [];
+    if (lists.length && type === 'default') {
+      const res = await getUsersUnderOrg({
+        orgIdList: lists,
+        orgTypeCode: typeValue.current.key,
+      });
+      if (res.code === 200) {
+        dataList = lists.map((item, index) => {
+          const field = transferDataSource.find((items) => items.id === item) || {};
+          return {
+            ...field,
+            title: `${field.title}（${res.data.orgList[index].userCount || 0}）`,
+            userList: res.data.orgList[index].userList.map((items) => {
+              return {
+                ...items,
+                title: items.userName,
+                key: items.id,
+                deptName: items.departmentName,
+              };
+            }),
+            userCount: res.data.orgList[index].userCount,
+          };
+        });
+      }
+    }
+    if (lists.length && type === 'customOrg') {
+      const res = await getUsersByCustomGroup({ ids: lists });
+      if (res.code === 200) {
+        dataList = lists.map((item, index) => {
+          const field = transferDataSource.find((items) => items.id === item) || {};
+          return {
+            ...field,
+            title: `${field.title}（${res.data[index].userCount || 0}）`,
+            userList: res.data[index].userList.map((items) => {
+              return {
+                ...items,
+                title: items.userName,
+                key: items.id,
+                deptName: items.departmentName,
+              };
+            }),
+            userCount: res.data[index].userCount,
+          };
+        });
+      }
+    }
+    const newData = data;
+    list.forEach((item) => {
+      const field = transferDataSource.find((items) => items.id === item) || {};
+      const obj = dataList.find((items) => items.id === item);
+      const newField = data.find((items) => items.id === item);
+      if (!newField) {
+        newData.push(obj || field);
+      }
+    });
+
+    onValueChange && onValueChange(newData);
+  };
+  const onTypeChange = (value) => {
+    typeValue.current = value;
+  };
+  const onSearch = (type, value) => {
+    console.log(value);
+    if (type === 'left') {
+      onTabChange && onTabChange(value);
+      // setSearchValue(value);
+    }
+    if (type === 'right') {
+      // console.log(value);
+      setSearchValue(value);
+    }
+  };
+
+  const onDoubleClickChange = (item) => {
+    getUserData([item]);
+  };
+  const onDoubleClickRightChange = (item) => {
+    onValueChange && onValueChange(data.filter((items) => items.id !== item.id));
+  };
+  const onSearchChange = (e) => {
+    setLeftValue(e.target.value);
+  };
+  return (
+    <div className="transfer-index-page">
+      <div className="transfer-index-page-tree">
+        <Transfer
+          dataSource={transferDataSource}
+          showSelectAll={false}
+          targetKeys={targetKeys}
+          titles={[
+            searchLeft({
+              type,
+              onSearch: (value) => onSearch('left', value),
+              value: leftValue,
+              onSearchChange,
+            }),
+            searchTransfer({ onSearch: (value) => onSearch('right', value) }),
+          ]}
+          onChange={(keys, direction, moveKeys) => {
+            if (direction === 'right') {
+              getUserData(moveKeys);
+            }
+            if (direction === 'left') {
+              onValueChange && onValueChange(data.filter((item) => keys.includes(item.id)));
+            }
+          }}
+        >
+          {({ 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,
+              });
+            }
+            if (direction === 'right') {
+              return (
+                <SearchTransferRight
+                  onItemSelect={onItemSelect}
+                  selectedKeys={selectedKeys}
+                  onValueChange={onValueChange}
+                  onDoubleClickChange={onDoubleClickRightChange}
+                  items={
+                    data.filter((item) =>
+                      searchValue ? item.title?.indexOf(searchValue) > -1 : true
+                    ) || []
+                  }
+                  type={type}
+                />
+              );
+            }
+          }}
+        </Transfer>
+      </div>
+    </div>
+  );
+};
+export default TransferIndex;

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

@@ -0,0 +1,93 @@
+import React, { useRef } from 'react';
+import { List } from 'dcp-design-react';
+import { InteractionOutlined, FolderOutlined, CheckOutlined } from '@/icons';
+const AvaNode = ({ title }) => {
+  return <div className="tab-list-page-avatar">{title?.slice(-2)}</div>;
+};
+const SearchTransferRight = (props) => {
+  const {
+    items,
+    selectedKeys,
+    onItemSelect,
+    onValueChange,
+    type = 'default',
+    onDoubleClickChange,
+  } = props;
+  console.log(items);
+  const timer = useRef<any>(null);
+  const pushChange = (e, field) => {
+    e.stopPropagation();
+    const list = items.filter((item) => item.id !== field.id);
+    field?.userList?.forEach((item) => {
+      if (!list.find((items) => items.id === item.id)) {
+        list.push(item);
+      }
+    });
+    onValueChange && onValueChange(list);
+  };
+  return (
+    <div className="search-transfer-right-page tab-list-page">
+      <List
+        itemLayout="horizontal"
+        dataSource={items}
+        size="small"
+        renderItem={(item: any) => (
+          <List.Item
+            onClick={() => {
+              clearTimeout(timer.current);
+              timer.current = setTimeout(() => {
+                onItemSelect(item.key, !selectedKeys.includes(item.key));
+              }, 300);
+            }}
+            onDoubleClick={() => {
+              onDoubleClickChange(item);
+              clearTimeout(timer.current);
+            }}
+            className={selectedKeys.includes(item.key) ? 'tab-list-page-field-selected' : ''}
+          >
+            {type !== 'org' && ![0, 1, 2, 'customOrg'].includes(item.orgtype) ? (
+              <List.Item.Meta
+                avatar={<AvaNode title={item.title} />}
+                title={
+                  <div>
+                    <span>{item.title}</span> <span>{item.jobName}</span>
+                    {selectedKeys.includes(item.key) && (
+                      <>
+                        <span className="sanjiao"></span>
+                        <CheckOutlined />
+                      </>
+                    )}
+                  </div>
+                }
+                description={
+                  <div>
+                    <span>{item.orgName}</span> <span>{item.deptName}</span>
+                  </div>
+                }
+              />
+            ) : (
+              <div className="tab-list-page-org">
+                <div>
+                  <FolderOutlined /> {item.title}
+                  {selectedKeys.includes(item.key) && (
+                    <>
+                      <span className="sanjiao"></span>
+                      <CheckOutlined />
+                    </>
+                  )}
+                </div>
+
+                {type === 'default' || type == 'customOrg' ? (
+                  <InteractionOutlined onClick={(e) => pushChange(e, item)} />
+                ) : (
+                  <></>
+                )}
+              </div>
+            )}
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+};
+export default SearchTransferRight;

package/SearchAssistanceSelect/src/SearchAssistanceComponent/transfer/style.less

@@ -0,0 +1,69 @@
+.transfer-index-page{
+  height: 439px;
+  padding: 10px;
+  &-tree{
+    height: 100%;
+    .ant-transfer-list-header-selected{
+      display: none;
+    }
+  }
+  .ant-transfer-list{
+    position: relative;
+  }
+  .ant-transfer{
+    height: 100%;
+  }
+  .ant-transfer-list-header{
+    padding: 0px;
+  }
+  .ant-transfer-list-body-customize-wrapper{
+    height: 100%;
+
+  }
+  .search-transfer-action{
+    display: flex;
+    height: 38px;
+    &-diver{
+      height: 38px;
+      border-left: 1px solid #d9d9d9;
+
+
+    }
+    .ant-row{
+      width: 100%;
+      .ant-input-affix-wrapper{
+        border: 0;
+      }
+    }
+    .hight-search{
+      top: 38px!important;
+      padding:0px!important;
+     .tdy_popover{
+      padding: 5px 10px 60px 10px!important;
+      height: 368px;
+      overflow-y: auto;
+     }
+      .ant-row{
+        width: 100%;
+        .ant-input-affix-wrapper{
+          border:1px solid #d9d9d9;
+        }
+      }
+    }
+    .ant-btn-link{
+      height: 38px;
+    }
+    .ant-input-affix-wrapper{
+      height: 38px;
+    }
+    .ant-input-search > .ant-input-group > .ant-input-group-addon:last-child .ant-input-search-button{
+      height: 38px;
+      border: 0;
+    }
+  }
+
+}
+.search-transfer-right-page{
+  height: 100%;
+  overflow-y: auto;
+}