first commit

webapp/packages/supersonic-fe/src/components/SelectTMEPerson/index.less

@@ -0,0 +1,9 @@
+.userAvatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+
+.userText {
+  margin-left: 10px;
+}

webapp/packages/supersonic-fe/src/components/SelectTMEPerson/index.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import type { FC } from 'react';
+import { Select, message } from 'antd';
+import type { UserItem } from './service';
+import { getAllUser } from './service';
+
+import styles from './index.less';
+import { useFetchDataEffect } from '@/utils/curd';
+import TMEAvatar from '../TMEAvatar';
+
+interface Props {
+  value?: string[];
+  placeholder?: string;
+  isMultiple?: boolean;
+  onChange?: (owners: string | string[]) => void;
+}
+
+const SelectTMEPerson: FC<Props> = ({ placeholder, value, isMultiple = true, onChange }) => {
+  const [userList, setUserList] = useState<UserItem[]>([]);
+
+  useFetchDataEffect(
+    {
+      fetcher: async () => {
+        const res = await getAllUser();
+        if (res.code !== 200) {
+          message.error(res.msg);
+          throw new Error(res.msg);
+        }
+        return res.data || [];
+      },
+      updater: (list) => {
+        const users = list.map((item: UserItem) => {
+          const { enName, chName, name } = item;
+          return {
+            ...item,
+            enName: enName || name,
+            chName: chName || name,
+          };
+        });
+        setUserList(users);
+      },
+      cleanup: () => {
+        setUserList([]);
+      },
+    },
+    [],
+  );
+
+  return (
+    <Select
+      value={value}
+      placeholder={placeholder ?? '请选择用户名'}
+      mode={isMultiple ? 'multiple' : undefined}
+      allowClear
+      showSearch
+      onChange={onChange}
+    >
+      {userList.map((item) => {
+        return (
+          <Select.Option key={item.enName} value={item.enName}>
+            <TMEAvatar size="small" staffName={item.enName} />
+            <span className={styles.userText}>{item.displayName}</span>
+          </Select.Option>
+        );
+      })}
+    </Select>
+  );
+};
+
+export default SelectTMEPerson;

webapp/packages/supersonic-fe/src/components/SelectTMEPerson/service.ts

@@ -0,0 +1,19 @@
+import request from 'umi-request';
+
+export type UserItem = {
+  enName?: string;
+  displayName: string;
+  chName?: string;
+  name?: string;
+  email: string;
+};
+export type GetAllUserRes = Result<UserItem[]>;
+
+// 获取所有用户
+export async function getAllUser(): Promise<GetAllUserRes> {
+  const { APP_TARGET } = process.env;
+  if (APP_TARGET === 'inner') {
+    return request.get('/api/oa/user/all');
+  }
+  return request.get(`${process.env.AUTH_API_BASE_URL}user/getUserList`);
+}