@qmlight/web-platform-components 1.0.0

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

@@ -0,0 +1,19 @@
+.search-dropdown-page{
+  &-pro{
+    .ant-dropdown-menu{
+      max-height: 300px;
+      overflow-y: auto;
+    }
+  }
+  &-org{
+    display: flex;
+    justify-content: space-between;
+    padding: 0px 10px;
+    height: 37px;
+    width: 100%;
+    align-items: center;
+    background-color: #fafafa;
+    border-bottom: 1px solid #e7e7e7;
+    font-size: 12px;
+  }
+}

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

@@ -0,0 +1,86 @@
+import React, { useEffect, useRef, useState } from 'react';
+import TabList from '../tabList';
+import { recentUserPage } from '../../api/tabList';
+import { Pagination } from 'dcp-design-react';
+
+const RecentlyPageIndex = (props) => {
+  const {
+    mode,
+    selectedKeys,
+    targetKeys,
+    onDataChange,
+    onValueChange,
+    onItemSelect,
+    onDoubleClickChange,
+  } = 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>({
+    currentPage: 1,
+    pageSize: 10,
+  });
+  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);
+  };
+  const getData = async (params) => {
+    const res = await recentUserPage(params);
+    if (res.code === 200) {
+      const list = res?.data?.map((item) => {
+        return {
+          ...item,
+          key: item.id,
+          title: item.name,
+          // deptName: item.departmentName,
+        };
+      });
+      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(() => {
+    getData({});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <div className="recetly-page-index search-page-list">
+      <TabList
+        onDoubleClickChange={onDoubleClickChange}
+        onItemSelect={itemSelect}
+        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 RecentlyPageIndex;

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

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from "react";
+import TabList from "../tabList";
+import { getRoleList } from "../../api/tabList";
+import { getUserInfo } from "@/utils/cookies";
+
+const RoleListPage = (props) => {
+  const {
+    mode,
+    selectedKeys,
+    targetKeys,
+    onDataChange,
+    onValueChange,
+    onItemSelect,
+    params = {},
+  } = props;
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  useEffect(() => {
+    getData({ loginUserId: getUserInfo().id, ...params });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params]);
+  const getData = async (params) => {
+    const res = await getRoleList(params);
+    if (res.code === 200) {
+      const list = res.data.map((item) => {
+        return {
+          ...item,
+          key: item.id,
+          title: item.name,
+        };
+      });
+      setDataSource(list || []);
+      onDataChange && onDataChange(list);
+    }
+  };
+
+  const [itemKeys, setItemKeys] = useState<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 });
+  };
+
+  return (
+    <div className="dept-page">
+      <TabList
+        onItemSelect={itemSelect}
+        selectedKeys={itemKeys}
+        dataSource={dataSource.filter((item) => !targetKeys.includes(item.id))}
+      />
+    </div>
+  );
+};
+export default RoleListPage;

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

@@ -0,0 +1,109 @@
+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 {
+    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,
+          key: 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, ...params });
+  }, [params]);
+  // 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 SearchPageIndex;

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

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from 'react';
+import DropDownList from '../dropdownList';
+import TabList from '../tabList';
+import { getMySubordinates } from '../../api/tabList';
+import { getUserInfo } from '@/utils/cookies';
+
+const SubordinateIndex = (props) => {
+  const {
+    mode,
+    selectedKeys,
+    targetKeys,
+    onDataChange,
+    onValueChange,
+    onDoubleClickChange,
+    onItemSelect,
+  } = props;
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const ondrownChange = (field) => {
+    getData({ userId: getUserInfo().id, orgTypeCode: field.key });
+  };
+  const getData = async (params) => {
+    const res = await getMySubordinates(params);
+    if (res.code === 200) {
+      const list =
+        res.data?.map((item) => {
+          return {
+            ...item,
+            key: item.id,
+            title: item.userName,
+            deptName: item.departmentName,
+          };
+        }) || [];
+      setDataSource(list || []);
+      onDataChange && onDataChange(list);
+    }
+  };
+
+  const [itemKeys, setItemKeys] = useState<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 });
+  };
+
+  return (
+    <div className="dept-page">
+      <DropDownList onDataChange={ondrownChange} />
+      <TabList
+        onDoubleClickChange={onDoubleClickChange}
+        onItemSelect={itemSelect}
+        selectedKeys={itemKeys}
+        dataSource={dataSource.filter((item) => !targetKeys.includes(item.id))}
+      />
+    </div>
+  );
+};
+export default SubordinateIndex;

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

@@ -0,0 +1,99 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { List } from 'dcp-design-react';
+import { CheckOutlined, EditOutlined, DeleteOutlined } from '@/icons';
+import './style.less';
+const AvaNode = ({ title }) => {
+  return <div className="tab-list-page-avatar">{title?.slice(-2)}</div>;
+};
+const TabList = (props) => {
+  const {
+    dataSource,
+    selectedKeys,
+    onItemSelect,
+    onDoubleClickChange,
+    type = 'default',
+    onItemAction,
+    loading = false,
+  } = props;
+  const [dataList, setDataList] = useState<any[]>([]);
+  const timer = useRef<any>(null);
+  useEffect(() => {
+    setDataList(dataSource || []);
+  }, [dataSource]);
+  const actionHandle = (e, flag, info) => {
+    e.stopPropagation();
+    if (flag === 'edit') {
+      onItemAction && onItemAction('edit', info);
+      return;
+    }
+    if (flag === 'del') {
+      onItemAction && onItemAction('del', info);
+    }
+  };
+  return (
+    <div className="tab-list-page">
+      <List
+        itemLayout="horizontal"
+        dataSource={dataList}
+        loading={loading}
+        size="small"
+        renderItem={(item) => (
+          <List.Item
+            onClick={() => {
+              clearTimeout(timer.current);
+              timer.current = setTimeout(() => {
+                onItemSelect(item.id, !selectedKeys.includes(item.id));
+              }, 300);
+            }}
+            onDoubleClick={() => {
+              clearTimeout(timer.current);
+              onDoubleClickChange(item.id);
+            }}
+            className={selectedKeys.includes(item.id) ? 'tab-list-page-field-selected' : ''}
+          >
+            <List.Item.Meta
+              avatar={<AvaNode title={item.title} />}
+              title={
+                <>
+                  <div>
+                    <span>{item.title}</span> <span>{item.jobName}</span>
+                  </div>
+                  {selectedKeys.includes(item.id) && (
+                    <>
+                      <span className="sanjiao"></span>
+                      <CheckOutlined />
+                    </>
+                  )}
+                  {type === 'edit' ? (
+                    <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>
+                  ) : (
+                    <></>
+                  )}
+                </>
+              }
+              description={
+                item.orgName ? (
+                  <div>
+                    <span>{item.orgName}</span> <span>{item.departmentName}</span>
+                  </div>
+                ) : (
+                  <></>
+                )
+              }
+            />
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+};
+export default TabList;

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

@@ -0,0 +1,86 @@
+.tab-list-page{
+ padding: 0px 0px 0px 10px;
+  .ant-list{
+    // height: 378px;
+    height: 100%;
+    overflow-y: auto;
+  }
+  &-org{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .ant-list-sm .ant-list-item{
+    position: relative;
+    .ant-list-item-meta-title{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .item-action{
+        .anticon{
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  &-field-selected{
+    background-color:#eaf8fe;
+    .sanjiao{
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 0;
+      width: 0;
+      border-top: 21px solid #0b93da;
+      border-left: 22px solid transparent;
+    }
+    .anticon-check{
+      position: absolute;
+      font-size: 12px;
+      color: #fff;
+      top: 0;
+      right: 1px
+    }
+  }
+  .ant-list-item:hover{
+    cursor: pointer;
+    background-color:#eaf8fe;
+  }
+  &-avatar{
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background:rgb(85, 177, 249) ;
+    color: rgb(255, 255, 255);
+    text-align: center;
+    line-height: 30px;
+    font-size: 12px;
+  }
+  .ant-list-sm .ant-list-item{
+    padding: 6px;
+  }
+  .ant-list-item-meta{
+    align-items: center;
+  }
+  .ant-list-item-meta-title{
+    font-size: 12px;
+  }
+  .ant-list-item-meta-description{
+    font-size: 12px;
+  }
+
+}
+.search-page-list{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .tab-list-page{
+    flex: 1;
+    overflow-y: auto;
+  }
+  .ant-pagination{
+    text-align: center;
+    font-size: 12px;
+  }
+}