@qmlight/web-platform-components 1.0.0

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

@@ -0,0 +1,234 @@
+import React, { useRef, useState, useEffect } from 'react';
+import {
+  DcpButton,
+  DcpForm,
+  DcpModal,
+  Tabs,
+  QmSpace,
+  QmButton,
+  DcpTable,
+  QmTabs,
+} from 'dcp-design-react';
+import SearchAssistanceModel from '../../searchModal';
+import { Message } from '@/utils';
+import { createCustomGroups, getUsersByCustomGroup, updateCustomGroup } from '../../api/tabList';
+
+const CustomModal = ({ actionInfo, onClose, setAcitonInfo, mode }) => {
+  const [activeKey, setActiveKey] = useState('1');
+  const formRef = useRef<any>();
+  const [userList, setUserList] = useState<any>([]);
+  const [visible, setVisible] = useState(false);
+  const [fieldList, setfieldList] = useState<any>([]);
+  const [itemList, setItemList] = useState<any>([
+    {
+      label: '基本信息',
+      key: '1',
+    },
+    {
+      label: '成员',
+      key: '2',
+    },
+  ]);
+  const getItems = () => {
+    return [
+      {
+        type: 'INPUT',
+        label: '名称',
+        fieldName: 'title',
+        rules: [{ required: true }],
+      },
+      {
+        type: 'INPUT_NUMBER',
+        label: '排序',
+        fieldName: 'sortOrder',
+        rules: [{ required: true }],
+      },
+    ];
+  };
+  const getColumns = () => {
+    return [
+      {
+        title: '操作',
+        dataIndex: '__action__',
+        render: (_, record) => {
+          return (
+            <DcpButton
+              type="link"
+              onClick={() => {
+                // const list = userListData.current.filter((item) => item.id !== record.id);
+                setUserList((data) => data.filter((item) => item.id !== record.id));
+              }}
+            >
+              删除
+            </DcpButton>
+          );
+        },
+      },
+      {
+        title: '姓名',
+        dataIndex: 'title',
+      },
+      {
+        title: '分部',
+        dataIndex: 'orgName',
+      },
+      {
+        title: '部门',
+        dataIndex: 'deptName',
+      },
+      {
+        title: '岗位',
+        dataIndex: 'jobName',
+      },
+    ];
+  };
+  const [columns, setColumns] = useState<any[]>(getColumns());
+  const [items, setItems] = useState<any[]>(getItems());
+  const onSaveItem = async () => {
+    // eslint-disable-next-line no-unsafe-optional-chaining
+    const [err, data] = await formRef?.current?.GET_FORM_DATA();
+
+    if (err) {
+      return;
+    }
+    const field = {
+      ...data,
+      userIds: userList.map((item) => item.key),
+    };
+    const res = await (!data?.id
+      ? createCustomGroups(field)
+      : updateCustomGroup({ ...field, id: data.id }));
+    if (res.code === 200) {
+      Message('保存成功', 'success');
+      onClose(true);
+    }
+  };
+  const onModalDataChange = (data) => {
+    setUserList(data);
+    if (actionInfo.type === 'add') {
+      setItemList([
+        {
+          label: '基本信息',
+          key: '1',
+        },
+        {
+          label: '成员',
+          key: '2',
+        },
+      ]);
+      setActiveKey('2');
+    }
+  };
+  useEffect(() => {
+    if (actionInfo.type === 'edit') {
+      formRef.current?.SET_FIELDS_VALUE(actionInfo.data);
+    }
+    if (actionInfo.type === 'add') {
+      setItemList([
+        {
+          label: '基本信息',
+          key: '1',
+        },
+        {
+          label: '成员',
+          key: '2',
+          disabled: true,
+        },
+      ]);
+    }
+  }, [actionInfo]);
+  const getUserData = async () => {
+    const res = await getUsersByCustomGroup({ ids: [actionInfo.data.id] });
+    if (res.code === 200) {
+      setUserList(
+        res.data[0]?.userList.map((item) => {
+          return {
+            ...item,
+            title: item.userName,
+            value: item.id,
+            label: item.userName,
+          };
+        })
+      );
+    }
+  };
+  return (
+    <>
+      <div className="search-assistance-tabs">
+        <QmTabs
+          size="small"
+          activeKey={activeKey}
+          items={itemList}
+          onChange={(value) => {
+            if (value === '2' && actionInfo.type === 'edit') {
+              getUserData();
+            }
+            setActiveKey(value);
+          }}
+        />
+        <div className={'search-assistance-tabs-content'}>
+          <div style={{ display: activeKey === '1' ? 'block' : 'none', marginTop: 10 }}>
+            <DcpForm ref={formRef} cols={1} items={items} />
+          </div>
+          <div style={{ display: activeKey === '2' ? 'block' : 'none', marginTop: 10 }}>
+            <DcpTable
+              rowKey={'id'}
+              height={320}
+              webPagination
+              columns={columns}
+              dataSource={userList}
+            >
+              <QmButton type="primary" onClick={() => setVisible(true)}>
+                添加成员
+              </QmButton>
+            </DcpTable>
+          </div>
+        </div>
+      </div>
+      <QmSpace className="action-footer">
+        <QmButton type="primary" onClick={() => onSaveItem()}>
+          保存
+        </QmButton>
+        {actionInfo.type === 'add' ? (
+          <QmButton type="primary" onClick={() => setVisible(true)}>
+            添加成员
+          </QmButton>
+        ) : (
+          <></>
+        )}
+
+        <QmButton onClick={() => onClose()}>取消</QmButton>
+      </QmSpace>
+
+      <SearchAssistanceModel
+        data={userList}
+        mode={'multiple'}
+        items={[
+          {
+            label: '常用组',
+            key: '1',
+          },
+          // {
+          //   label: '同部门',
+          //   key: '2',
+          // },
+          // {
+          //   label: '我的下属',
+          //   key: '3',
+          // },
+          {
+            label: '组织结构',
+            key: '4',
+            type: 'customOrg',
+          },
+        ]}
+        type={'customOrg'}
+        onChange={onModalDataChange}
+        onClose={() => setVisible(false)}
+        visible={visible}
+        title={'人力资源'}
+      />
+    </>
+  );
+};
+export default CustomModal;

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

@@ -0,0 +1,245 @@
+import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
+import { DcpButton, DcpModal, DcpSearchTree } 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';
+
+const CustomOrg = (props) => {
+  const {
+    onDoubleClickChange,
+    targetKeys,
+    selectedKeys,
+    mode,
+    onItemSelect,
+    onValueChange,
+    onDataChange,
+  } = props;
+  const [dataSource, setData] = useState<any>([]);
+  const [itemKeys, setItemKeys] = useState<any[]>([]);
+  const [actionInfo, setAcitonInfo] = useState<any>({
+    type: 'add',
+    visible: false,
+  });
+  const [fetchParams, setFetchParams] = useState({});
+
+  const [moveKey, setMoveKey] = useState<string | null>(null);
+  const getData = async () => {
+    const res = await getAllCustomGroups({});
+    if (res.code === 200) {
+      const list = res.data.map((item) => {
+        return {
+          ...item,
+          key: item.id,
+          orgtype: 'customOrg',
+        };
+      });
+      setData(list);
+      onDataChange && onDataChange(list);
+    }
+  };
+  const getTreeData = async (params) => {
+    const res = await (params.id
+      ? getUsersByCustomGroup({ ids: [params.id] })
+      : getAllCustomGroups({}));
+    if (res.code === 200) {
+      if (params.id) {
+        return {
+          ...res,
+          data: res.data[0]?.userList.map((item) => {
+            return {
+              ...item,
+              isLeaf: true,
+              title: item.userName,
+            };
+          }),
+        };
+      } else {
+        return {
+          ...res,
+          data: res.data.map((item) => {
+            return {
+              ...item,
+              orgtype: 'customOrg',
+            };
+          }),
+        };
+      }
+    }
+    return res;
+  };
+
+  useEffect(() => {
+    if (mode === 'multiple') {
+      getData();
+    }
+    // onDataChange && onDataChange(dataSource);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  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.title });
+  };
+  const onItemAction = async (act, item) => {
+    if (act === 'edit') {
+      setAcitonInfo({
+        type: 'edit',
+        data: {
+          id: item.id,
+          title: item.title,
+          sortOrder: item.sortOrder,
+        },
+        visible: true,
+      });
+      return;
+    }
+    if (act === 'del') {
+      const res = await deleteCustomGroup({ id: item.id });
+      if (res.code === 200) {
+        Message('删除成功', 'success');
+        if (!mode) {
+          setFetchParams({});
+          return;
+        }
+        getData();
+      }
+    }
+  };
+
+  const onClose = () => {
+    setAcitonInfo({
+      type: 'add',
+      visible: false,
+    });
+    if (!mode) {
+      setFetchParams({});
+      return;
+    }
+    getData();
+  };
+  const actionHandle = (e, flag, info) => {
+    e.stopPropagation();
+    if (flag === 'edit') {
+      onItemAction('edit', info);
+      return;
+    }
+    if (flag === 'del') {
+      onItemAction('del', info);
+    }
+  };
+  return (
+    <div className="custom-org-page">
+      <div className="custom-org-page-extra">
+        <DcpButton
+          type="primary"
+          icon={<PlusOutlined />}
+          onClick={() => {
+            setAcitonInfo({
+              type: 'add',
+              visible: true,
+            });
+          }}
+        >
+          新建分组
+        </DcpButton>
+      </div>
+      {!mode && (
+        <div className="custom-org-page-tree">
+          <DcpSearchTree
+            showSearchBar={false}
+            filterable={false}
+            showCollapse={false}
+            asyncLoad={true}
+            value={itemKeys}
+            onSelectChange={(node: any) => {
+              if (!mode) {
+                if (!node.orgtype) {
+                  setItemKeys([node.id]);
+                  onValueChange && onValueChange({ ...node, value: node.id, title: node.title });
+                }
+              }
+            }}
+            fetch={{
+              api: getTreeData,
+              params: fetchParams,
+            }}
+            fieldsDefine={{
+              valueKey: 'id',
+              textKey: 'title',
+            }}
+            titleRender={(nodeData) => {
+              return nodeData.orgtype === 'customOrg' ? (
+                <div
+                  onMouseEnter={() => setMoveKey(nodeData.id)}
+                  onMouseLeave={() => setMoveKey(null)}
+                  className="title-item-field"
+                >
+                  <div>{nodeData.title}</div>
+                  <div
+                    className="item-action"
+                    style={{ display: moveKey === nodeData.id ? 'block' : 'none' }}
+                  >
+                    <EditOutlined
+                      onClick={(e) => actionHandle(e, 'edit', nodeData)}
+                      style={{ marginRight: 8, fontSize: 14 }}
+                    />
+                    <DeleteOutlined
+                      onClick={(e) => actionHandle(e, 'del', nodeData)}
+                      style={{ marginRight: 8, fontSize: 14 }}
+                    />
+                  </div>
+                </div>
+              ) : (
+                nodeData.title
+              );
+            }}
+          />
+        </div>
+      )}
+      {mode === 'multiple' && (
+        <div className="custom-org-page-list">
+          <TabList
+            onDoubleClickChange={onDoubleClickChange}
+            onItemSelect={itemSelect}
+            selectedKeys={itemKeys}
+            type={'edit'}
+            onItemAction={onItemAction}
+            dataSource={dataSource.filter((item) => !targetKeys.includes(item.id))}
+          />
+        </div>
+      )}
+      <DcpModal
+        width={800}
+        height={540}
+        title="分组"
+        visible={actionInfo.visible}
+        onClose={() => onClose()}
+        wrapClassName={'search-assistance-modal'}
+      >
+        <CustomModal
+          actionInfo={actionInfo}
+          onClose={onClose}
+          mode={mode}
+          setAcitonInfo={setAcitonInfo}
+        />
+      </DcpModal>
+    </div>
+  );
+};
+export default CustomOrg;

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

@@ -0,0 +1,27 @@
+.custom-org-page{
+  height: 100%;
+  &-extra{
+    text-align: right;
+    padding: 3px ;
+  }
+  &-tree{
+    height: calc(100% - 38px);
+    .title-item-field{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .item-action{
+      .anticon{
+        cursor: pointer;
+        margin-left: 8px;
+      }
+    }
+  }
+  &-list{
+    height: calc(100% - 38px);
+    &-field{
+
+    }
+  }
+}

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

@@ -0,0 +1,104 @@
+import React, { useState, useEffect, useRef } from 'react';
+import DropDownList from '../dropdownList';
+import TabList from '../tabList';
+import { getDeptUsers, updateRecentUser } from '../../api/tabList';
+import { getUserInfo } from '@/utils/cookies';
+import './style.less';
+import { DcpTabs } from 'dcp-design-react';
+const DeptPageIndex = (props) => {
+  const {
+    mode,
+    selectedKeys,
+    targetKeys,
+    onDataChange,
+    onValueChange,
+    onDoubleClickChange,
+    onItemSelect,
+  } = props;
+  const [dataSource, setDataSource] = useState<any[]>([]);
+  const [activeKey, setActiveKey] = useState('DEPUTY');
+  const [fetchParams, setFetchParams] = useState({
+    userId: getUserInfo().id,
+    displayType: 'DEPUTY',
+    orgTypeCode: '',
+  });
+  const items = [
+    {
+      label: '副职以上',
+      key: 'DEPUTY',
+    },
+    {
+      label: '总监以上',
+      key: 'DIRECTOR',
+    },
+    {
+      label: '全员',
+      key: 'ALL',
+    },
+  ];
+  const ondrownChange = (field) => {
+    setFetchParams((origin) => Object.assign({}, origin, { orgTypeCode: field.key }));
+  };
+  const getData = async (params) => {
+    const res = await getDeptUsers(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') {
+      const field = dataSource.filter((item) => value.includes(item.id));
+      updateRecentUserData(field);
+      onItemSelect && onItemSelect(value, checked);
+      return;
+    }
+    setItemKeys([value]);
+    const field = dataSource.find((item) => item.id === value);
+    updateRecentUserData([field]);
+    onValueChange && onValueChange({ ...field, value: field.id, label: field.userName });
+  };
+  const updateRecentUserData = (list) => {
+    updateRecentUser(list);
+  };
+  useEffect(() => {
+    if (fetchParams.orgTypeCode) {
+      getData(fetchParams);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchParams]);
+  return (
+    <div className="dept-page">
+      <DropDownList onDataChange={ondrownChange} />
+      <DcpTabs
+        items={items}
+        size="small"
+        defaultActiveKey="DEPUTY"
+        onChange={(value) => {
+          setActiveKey(value);
+          setFetchParams((origin) => Object.assign({}, origin, { displayType: value }));
+        }}
+      />
+      <TabList
+        onDoubleClickChange={onDoubleClickChange}
+        onItemSelect={itemSelect}
+        selectedKeys={itemKeys}
+        dataSource={dataSource.filter((item) => !targetKeys.includes(item.id))}
+      />
+    </div>
+  );
+};
+export default DeptPageIndex;

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

@@ -0,0 +1,9 @@
+.dept-page{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .tab-list-page{
+    flex: 1;
+    overflow-y: auto;
+  }
+}

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

@@ -0,0 +1,74 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Dropdown } from 'dcp-design-react';
+import { getOrgTypeList } from '../../api/treeData';
+import { ApartmentOutlined, DownOutlined } from '@/icons';
+import './style.less';
+type itemsType = {
+  key: string;
+  label: string;
+};
+const DropDownList = ({ onDataChange }) => {
+  const [items, setItems] = useState<itemsType[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const getOrgTypeListData = async () => {
+    const res = await getOrgTypeList({ currentPage: 1, pageSize: 50 });
+    if (res.code === 200) {
+      const list = res.data.list.map((item) => {
+        return {
+          key: item.code,
+          label: item.name,
+        };
+      });
+      setItems(list);
+      setSelectedKeys(list[0]?.key ? [list[0]?.key] : []);
+      onDataChange(list[0]);
+    }
+  };
+  const onDropDownChange = (value) => {
+    setSelectedKeys([value.key]);
+    const field = items.find((item) => item.key === value.key) || {};
+    onDataChange(field);
+  };
+  useEffect(() => {
+    getOrgTypeListData();
+    return () => {
+      setItems([]);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const valueRender = (keys, data) => {
+    if (!keys?.length) {
+      return '';
+    }
+    const field = data.find((item) => item.key === keys[0]);
+    if (!field) {
+      return '';
+    }
+    return field.label;
+  };
+  return (
+    <div className="search-dropdown-page">
+      <Dropdown
+        menu={{
+          items,
+          selectedKeys: selectedKeys,
+          onClick: (value) => onDropDownChange(value),
+        }}
+        overlayClassName={'search-dropdown-page-pro'}
+        placement="bottom"
+        trigger={['click']}
+        getPopupContainer={(triggerNode) => triggerNode}
+      >
+        <div className="search-dropdown-page-org">
+          <div>
+            <ApartmentOutlined /> <span>{valueRender(selectedKeys, items)}</span>
+          </div>
+          <div>
+            <DownOutlined />
+          </div>
+        </div>
+      </Dropdown>
+    </div>
+  );
+};
+export default DropDownList;