feat(mis-web): 初始化的用户管理新增前端搜索 (#1144)

当初始化导入用户较多时，想找到对应用户进行设置会很困难，所以加入搜索功能

![image](https://github.com/PKUHPC/SCOW/assets/140392039/e9e33fe5-3cd8-43a9-8bb4-c35bb5d003a7)

.changeset/brave-spiders-build.md

@@ -0,0 +1,5 @@
+---
+"@scow/mis-web": patch
+---
+
+初始化的用户管理新增前端搜索

apps/mis-web/src/i18n/en.ts

@@ -426,6 +426,7 @@ export default {
         + "and set a user as ",
         initAdmin: "Initial Administrator",
         set: " who serves as both a tenant administrator and a platform administrator.",
+        idOrName: "User ID or Name",
       },
     },
     job: {

apps/mis-web/src/i18n/zh_cn.ts

@@ -426,6 +426,7 @@ export default {
 
         initAdmin:"初始管理员",
         set:"指同时为租户管理员和平台管理员的用户。",
+        idOrName: "用户ID或姓名",
       },
     },
     job:{

apps/mis-web/src/pageComponents/init/InitUsersAndAccountsTable.tsx

@@ -14,15 +14,19 @@ import { FormLayout } from "@scow/lib-web/build/layouts/FormLayout";
 import { DEFAULT_PAGE_SIZE } from "@scow/lib-web/build/utils/pagination";
 import { Account } from "@scow/protos/build/server/account";
 import { AccountAffiliation, User } from "@scow/protos/build/server/user";
-import { Table, Tabs, Typography } from "antd";
-import { useEffect } from "react";
+import { Button, Form, Input, Table, Tabs, Typography } from "antd";
+import { useEffect, useMemo, useState } from "react";
 import { useAsync } from "react-async";
 import { api } from "src/apis";
+import { FilterFormContainer } from "src/components/FilterFormContainer";
 import { PlatformRoleSelector } from "src/components/PlatformRoleSelector";
 import { TenantRoleSelector } from "src/components/TenantRoleSelector";
 import { prefix, useI18nTranslateToString } from "src/i18n";
 import { UserRole } from "src/models/User";
 
+interface UserTableFilterForm {
+  idOrName: string | undefined;
+}
 
 interface DataTableProps<T> {
   data: T[] | undefined;
@@ -37,48 +41,83 @@ const UserTable: React.FC<DataTableProps<User>> = ({ data, loading, reload }) =>
 
   const t = useI18nTranslateToString();
 
+  const [ query, setQuery ] = useState<UserTableFilterForm>(() => {
+    return { idOrName: undefined };
+  });
+
+  const [form] = Form.useForm<UserTableFilterForm>();
+
   const UserRoleI18nTexts = {
     [UserRole.USER]: t("userRoles.user"),
     [UserRole.OWNER]: t("userRoles.owner"),
     [UserRole.ADMIN]: t("userRoles.admin"),
   };
 
+  const filterData = useMemo(() => {
+    const idOrName = query.idOrName;
+    if (idOrName === undefined) return data;
+
+    return data?.filter((user) =>
+      user.userId.includes(idOrName) || user.name.toLowerCase().includes(idOrName.toLowerCase()),
+    );
+  }, [data, query.idOrName]);
+
   return (
-    <Table
-      loading={loading}
-      dataSource={data}
-      scroll={{ x: true }}
-      bordered
-      rowKey="userId"
-    >
-      <Table.Column<User> dataIndex="userId" title={t(pCommon("userId"))} />
-      <Table.Column<User> dataIndex="name" title={t(pCommon("name"))} />
-      <Table.Column<User>
-        dataIndex="platformRoles"
-        title={t(p("platformRole"))}
-        width={200}
-        render={(_, r) => (
-          <PlatformRoleSelector roles={r.platformRoles} userId={r.userId} reload={reload} />
-        )}
-      />
-      <Table.Column<User>
-        dataIndex="tenantRoles"
-        title={t(p("tenantRole"))}
-        width={200}
-        render={(_, r) => (
-          <TenantRoleSelector roles={r.tenantRoles} userId={r.userId} reload={reload} />
-        )}
-      />
-      <Table.Column
-        dataIndex="accountAffiliations"
-        title={t(p("accountAffiliation"))}
-        render={(accounts: AccountAffiliation[]) => accounts
-          .map((x) =>
-            x.accountName +
-              (x.role !== UserRole.USER ? `(${UserRoleI18nTexts[x.role]})` : ""),
-          ).join(", ")}
-      />
-    </Table>
+    <div>
+      <FilterFormContainer style={{ display: "flex", justifyContent: "space-between" }}>
+        <Form<UserTableFilterForm>
+          layout="inline"
+          form={form}
+          initialValues={query}
+          onFinish={async () => {
+            const { idOrName } = await form.validateFields();
+            setQuery({ idOrName: idOrName === "" ? undefined : idOrName });
+          }}
+        >
+          <Form.Item label={t(p("idOrName"))} name="idOrName">
+            <Input />
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit">{t(pCommon("search"))}</Button>
+          </Form.Item>
+        </Form>
+      </FilterFormContainer>
+      <Table
+        loading={loading}
+        dataSource={filterData}
+        scroll={{ x: true }}
+        bordered
+        rowKey="userId"
+      >
+        <Table.Column<User> dataIndex="userId" title={t(pCommon("userId"))} />
+        <Table.Column<User> dataIndex="name" title={t(pCommon("name"))} />
+        <Table.Column<User>
+          dataIndex="platformRoles"
+          title={t(p("platformRole"))}
+          width={200}
+          render={(_, r) => (
+            <PlatformRoleSelector roles={r.platformRoles} userId={r.userId} reload={reload} />
+          )}
+        />
+        <Table.Column<User>
+          dataIndex="tenantRoles"
+          title={t(p("tenantRole"))}
+          width={200}
+          render={(_, r) => (
+            <TenantRoleSelector roles={r.tenantRoles} userId={r.userId} reload={reload} />
+          )}
+        />
+        <Table.Column
+          dataIndex="accountAffiliations"
+          title={t(p("accountAffiliation"))}
+          render={(accounts: AccountAffiliation[]) => accounts
+            .map((x) =>
+              x.accountName +
+                (x.role !== UserRole.USER ? `(${UserRoleI18nTexts[x.role]})` : ""),
+            ).join(", ")}
+        />
+      </Table>
+    </div>
   );
 };