@qmlight/web-platform-components 1.0.0

package/SearchAssistanceSelect/src/SearchAssistanceComponent/index.tsx

@@ -0,0 +1,298 @@
+import React, { useState, useMemo, useRef, useEffect } from 'react';
+import { Select, Spin, Tooltip } from 'dcp-design-react';
+import { SearchOutlined, CloseCircleFilled } from '@/icons';
+import debounce from 'lodash-es/debounce';
+import './style.less';
+import SearchAssistanceModel from './searchModal';
+import isEmpty from 'lodash-es/isEmpty';
+import { getUsersByConditions } from './api/tabList';
+const debounceTimeout = 800;
+type SeachProps = {
+  value?: any;
+  fetchOptions: (search: any) => Promise<any>;
+  onChange?: (a) => void;
+  mode?: 'multiple' | 'tags' | undefined;
+  params?: any;
+  items?: itemsProps[];
+  $$form?: any;
+  option?: any;
+  modalVisible?: boolean;
+  type: string | undefined;
+  title?: string;
+  customData?: any[];
+};
+type itemsProps = {
+  label: string;
+  key: string;
+  type?: string;
+};
+const { Option } = Select;
+const SearchAssistanceSelectSelect: React.FC<SeachProps> = ({
+  fetchOptions = getUsersByConditions,
+  onChange: onValueChange,
+  value: data,
+  mode,
+  params,
+  items,
+  option,
+  $$form,
+  modalVisible = false,
+  type,
+  title,
+  customData = [],
+}) => {
+  const [value, setValue] = useState<any>(mode ? [] : undefined);
+  const [options, setOptions] = useState<any[]>([]);
+  const [fetching, setFetching] = useState(false);
+  const fetchRef = useRef(0);
+  const [visible, setVisible] = useState<boolean>(false);
+  const dataValue = useRef<any>(mode ? [] : {});
+  const [status, setStatus] = useState(false);
+  const pages = useRef<any>(0);
+  const currentPage = useRef<number>(1);
+  const [loading, setLoading] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+  const searchData = useRef([]);
+  useEffect(() => {
+    setValue(data);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+  useEffect(() => {
+    setVisible(modalVisible);
+  }, [modalVisible]);
+  const debounceFetcher = useMemo(() => {
+    const loadOptions = async (info) => {
+      fetchRef.current += 1;
+      const fetchId = fetchRef.current;
+      setFetching(true);
+      if (currentPage.current === 1) {
+        setOptions([]);
+      }
+      let parm: any = { ...info };
+      // if (params) {
+      //   parm = {
+      //     ...parm,
+      //     ...params,
+      //   };
+      // }
+      if (type === 'org') {
+        parm = {
+          ...parm,
+          currentPage: currentPage.current,
+          pageSize: 20,
+        };
+      }
+      const res = await fetchOptions(parm);
+      if (fetchId !== fetchRef.current) {
+        // for fetch callback order
+        return;
+      }
+      if (res.code === 200) {
+        if (type === 'org') {
+          const list = res.data.list.map((item) => {
+            return {
+              ...item,
+              label: item.name,
+              value: item.id,
+              orgName: item.parentOrgName,
+            };
+          });
+          searchData.current = currentPage.current === 1 ? list : searchData.current.concat(list);
+          setOptions(searchData.current);
+          setLoading(false);
+          pages.current = res.data.total;
+          setFetching(false);
+          return;
+        } else {
+          setOptions(
+            res.data.map((item) => {
+              return {
+                ...item,
+                label: item.userName || item.name,
+                value: item.id,
+                deptName: item.departmentName,
+              };
+            })
+          );
+          setLoading(false);
+          setFetching(false);
+        }
+      }
+    };
+
+    return debounce(loadOptions, debounceTimeout);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchOptions, debounceTimeout]);
+  const onModalDataChange = (value) => {
+    dataValue.current = value;
+    onDataChange && onDataChange(value);
+    setValue(value);
+  };
+  const onDataChange = (value) => {
+    onValueChange && onValueChange(value);
+    option?.onChange && option.onChange(value);
+  };
+  console.log(items);
+  return (
+    <div className="search-select-page">
+      <Select
+        // mode="tags"
+        mode={mode}
+        size="middle"
+        showSearch
+        showArrow
+        getPopupContainer={(trigger) => trigger}
+        searchValue={searchValue}
+        disabled={option?.readOnly || option?.disabled || $$form?.props?.formType === 'onlyShow'}
+        onPopupScroll={(event: any) => {
+          if (type !== 'org') {
+            return;
+          }
+          const nodeClient = event.target?.firstChild?.clientHeight || 0;
+          const scrollHeight = event.target.scrollTop;
+          if (
+            nodeClient - scrollHeight - 256 < 10 &&
+            currentPage.current * 20 <= pages.current &&
+            !loading
+          ) {
+            setLoading(true);
+            currentPage.current++;
+            debounceFetcher({ name: searchValue });
+          }
+          // console.log(event.target.scrollTop);
+        }}
+        dropdownRender={(menu) => {
+          return (
+            <>
+              {menu}
+              {loading ? <Spin tip="加载中..." /> : <></>}
+            </>
+          );
+        }}
+        suffixIcon={
+          <>
+            {/* {!isEmpty(value) && (
+              <CloseCircleFilled
+                className={`${!status ? 'search-clear' : 'active-search-clear'}`}
+                onClick={() => {
+                  // setStatus(false);
+                  if (!mode) {
+                    dataValue.current = {};
+                    setValue(dataValue.current);
+                    return;
+                  }
+                  dataValue.current = [];
+                  onDataChange && onDataChange(dataValue.current);
+                  setValue(dataValue.current);
+                }}
+              />
+            )} */}
+            <SearchOutlined
+              onClick={(e) => {
+                e.stopPropagation();
+                if (
+                  option?.readOnly ||
+                  option?.disabled ||
+                  $$form?.props?.formType === 'onlyShow'
+                ) {
+                  return;
+                }
+                setVisible(true);
+              }}
+            />
+          </>
+        }
+        labelInValue
+        filterOption={false}
+        // onChange={(values) => {
+        //   console.log(dataValue.current);
+        //   setStatus(!isEmpty(values));
+        // }}
+        // options={options}
+        value={isEmpty(value) ? (mode ? [] : undefined) : value}
+        loading={fetching}
+        onSelect={(value: any) => {
+          const field = options.find((item) => item.value === value?.value);
+          if (!mode) {
+            dataValue.current = field;
+            onDataChange && onDataChange(dataValue.current);
+            setValue(dataValue.current);
+            return;
+          }
+          const oldField = dataValue.current.find((item) => item.value === value.value);
+          if (!oldField && field) {
+            dataValue.current = dataValue.current.concat([field]);
+            onDataChange && onDataChange(dataValue.current);
+            setValue(dataValue.current);
+          }
+        }}
+        onDeselect={(value: any) => {
+          if (!mode) {
+            dataValue.current = {};
+            setValue(dataValue.current);
+            return;
+          }
+          dataValue.current = dataValue.current.filter((item) => item.value !== value.value);
+          onDataChange && onDataChange(dataValue.current);
+          setValue(dataValue.current);
+        }}
+        onFocus={() => {
+          setStatus(true);
+        }}
+        onBlur={() => {
+          setStatus(false);
+        }}
+        notFoundContent={fetching ? <Spin size="small" /> : null}
+        onSearch={(value) => {
+          if (type === 'doc' || type === 'customNode') {
+            return;
+          }
+          if (type === 'org') {
+            currentPage.current = 1;
+          }
+          setSearchValue(value);
+
+          debounceFetcher({ name: value });
+        }}
+      >
+        {options.map((item) => {
+          return (
+            <Option key={item.value} value={item.value} label={item.label}>
+              <Tooltip
+                placement="right"
+                title={
+                  <div>
+                    {item.userName
+                      ? `${item.label}|${item.jobName || 'DEFAULT'}|${item.orgName}|${
+                          item.deptName
+                        }`
+                      : type === 'org'
+                      ? `${item.label}|${item.orgName}
+                        `
+                      : item.label}
+                  </div>
+                }
+              >
+                <div>{item.label}</div>
+              </Tooltip>
+            </Option>
+          );
+        })}
+      </Select>
+
+      <SearchAssistanceModel
+        data={value}
+        mode={mode}
+        items={items}
+        type={type}
+        onChange={onModalDataChange}
+        onClose={() => setVisible(false)}
+        visible={visible}
+        title={title || '人力资源'}
+        customData={customData}
+      />
+    </div>
+  );
+};
+SearchAssistanceSelectSelect.displayName = 'SearchAssistanceSelectSelect';
+export default SearchAssistanceSelectSelect;

package/SearchAssistanceSelect/src/SearchAssistanceComponent/searchModal.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import { DcpModal, QmButton, QmSpace } from 'dcp-design-react';
+import SearchTabs from './searchTabs';
+import { cloneDeep } from '@/utils';
+import isEmpty from 'lodash-es/isEmpty';
+
+type ModalProps = {
+  visible: boolean;
+  title: string;
+  data: any;
+  onChange?: (a) => void;
+  onClose: () => void;
+  mode?: string | boolean | undefined;
+  items?: itemsProps[];
+  type: string | undefined;
+  customData?: any[];
+};
+type itemsProps = {
+  label: string;
+  key: string;
+  type?: string;
+};
+const SearchAssistanceModel: React.FC<ModalProps> = (props) => {
+  const { title, visible, onClose, data, mode, onChange, items, type, customData = [] } = props;
+  const [newData, setNewData] = useState<any>(mode ? [] : {});
+
+  const onDataChange = (value) => {
+    setNewData(cloneDeep(value));
+    if (!mode) {
+      onChange && onChange({ ...value, value: value.id, label: value.title });
+      onClose();
+    }
+  };
+  useEffect(() => {
+    if (isEmpty(data)) {
+      return;
+    }
+    if (mode === 'multiple') {
+      setNewData(
+        data.map((item) => {
+          return {
+            ...item,
+            title: item.label || item.text || item.title,
+            key: item.value,
+            id: item.value,
+          };
+        }) || []
+      );
+    } else {
+      setNewData({
+        ...data,
+        title: data.label || data.text || data.title,
+        key: data.value,
+        id: data.value,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data]);
+  return (
+    <DcpModal
+      width={800}
+      height={540}
+      onClose={onClose}
+      bodyStyle={{
+        padding: 0,
+      }}
+      title={title}
+      visible={visible}
+      showFullScreen={false}
+      wrapClassName={'search-assistance-modal'}
+    >
+      <SearchTabs
+        data={newData}
+        items={items}
+        mode={mode}
+        onClose={onClose}
+        onDataChange={onDataChange}
+        customData={customData}
+        type={type}
+      />
+      {mode === 'multiple' ? (
+        <QmSpace className="action-footer">
+          <QmButton
+            type="primary"
+            onClick={() => {
+              onChange &&
+                onChange(
+                  newData.map((item) => {
+                    return {
+                      ...item,
+                      value: item.id,
+                      label: item.title,
+                    };
+                  })
+                );
+              onClose();
+            }}
+          >
+            确定{`（${newData.length}）`}
+          </QmButton>
+          <QmButton onClick={() => onClose()}>取消</QmButton>
+        </QmSpace>
+      ) : (
+        <></>
+      )}
+    </DcpModal>
+  );
+};
+export default SearchAssistanceModel;

package/SearchAssistanceSelect/src/SearchAssistanceComponent/searchTabs.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { QmTabs, Input } from 'dcp-design-react';
+import TreeData from './treeData';
+import TransferIndex from './transfer';
+import DeptPageIndex from './component/dept';
+import SubordinateIndex from './component/subordinate';
+import RecentlyPageIndex from './component/recently';
+import SearchPageIndex from './component/search';
+import AdvancedSearch from './AdvancedSearch';
+import RoleListPage from './component/roleList';
+import CustomOrg from './component/customOrg';
+import CustomNode from './component/customNode';
+import './style.less';
+const { Search } = Input;
+const componentList = {
+  '1': <RecentlyPageIndex />,
+  '2': <DeptPageIndex />,
+  '3': <SubordinateIndex />,
+  '4': <TreeData />,
+  '5': <SearchPageIndex />,
+  '6': <RoleListPage />,
+  '7': <CustomOrg />,
+  '8': <CustomNode />,
+};
+const item = [
+  {
+    label: '常用组',
+    key: '1',
+  },
+  // {
+  //   label: '同部门',
+  //   key: '2',
+  // },
+  // {
+  //   label: '我的下属',
+  //   key: '3',
+  // },
+  {
+    label: '组织结构',
+    key: '4',
+    type: 'default',
+  },
+  {
+    label: '自定义组',
+    key: '7',
+    type: 'customOrg',
+  },
+];
+const SearchTabs = (props) => {
+  const { data, onClose, onDataChange, mode, items, customData } = props;
+  const [itemsList, setItemsList] = useState(item);
+  const [fetchParams, setFetchParams] = useState({});
+
+  const [activeKey, setActiveKey] = useState('1');
+  const prevActiveKey = useRef('1');
+  const onValueChange = (value) => {
+    onDataChange && onDataChange(value);
+  };
+  const tabChange = (value) => {
+    setActiveKey(value);
+    prevActiveKey.current = value;
+  };
+  const tabSearchChange = (params) => {
+    fetchHandle(params);
+  };
+  useEffect(() => {
+    if (items?.length) {
+      setActiveKey(items[0]?.key);
+      setItemsList(items);
+    }
+  }, [items]);
+  const fetchHandle = (field) => {
+    const { type, name } = field;
+    if (name === '') {
+      setActiveKey(prevActiveKey.current);
+      return;
+    }
+    if (type === 'default') {
+      const data = {
+        name,
+        // orgIdList: params.orgIdList?.map((item) => item.value),
+        // roleId: params.roleId?.value,
+        orgTypeCode: 'def',
+      };
+      setActiveKey('5');
+      setFetchParams(data);
+    }
+    if (type === 'role') {
+      setFetchParams({ name });
+    }
+    if (type === 'org') {
+      setFetchParams({
+        name,
+      });
+    }
+  };
+  const onSearch = (e) => {
+    setActiveKey('5');
+    setFetchParams({ name: e, orgTypeCode: 'def' });
+  };
+  return (
+    <div className="search-assistance-tabs">
+      <QmTabs
+        size="small"
+        activeKey={activeKey}
+        items={itemsList}
+        onChange={tabChange}
+        tabBarExtraContent={
+          mode ||
+          (itemsList.find((item) => item.key === activeKey)?.type === 'org' && activeKey === '4') ||
+          activeKey === '8' ? (
+            <></>
+          ) : (
+            <Search
+              // bordered={false}
+              // value={value}
+              // onChange={onSearchChange}
+              onSearch={onSearch}
+              allowClear
+            />
+          )
+        }
+      />
+      <div className={'search-assistance-tabs-content'}>
+        {mode === 'multiple' ? (
+          <TransferIndex
+            data={data || []}
+            customData={customData}
+            leftChildren={
+              componentList[activeKey] ? React.cloneElement(componentList[activeKey]) : <></>
+            }
+            onValueChange={onValueChange}
+            onTabChange={tabSearchChange}
+            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',
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+export default SearchTabs;

package/SearchAssistanceSelect/src/SearchAssistanceComponent/style.less

@@ -0,0 +1,41 @@
+.search-assistance-tabs{
+  .qm-tabs .ant-tabs-nav{
+    padding: 10px 10px 0px 10px;
+    margin-bottom: 0px;
+  }
+  flex: 1;
+  max-height: 100%;
+  &-content{
+    height:calc(100% - 50px)
+  }
+
+}
+.search-select-page{
+  .ant-select-dropdown > div:first-child{
+    height: 100%;
+    .ant-spin-spinning{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .ant-breadcrumb-link{
+      cursor: pointer;
+    }
+  }
+}
+
+.search-assistance-modal{
+  .ant-modal-body{
+    display: flex;
+    flex-direction: column;
+  }
+
+  .action-footer{
+    padding: 10px;
+    border-top: 1px solid #f0f0f0;
+    justify-content: end;
+
+  }
+}