feat(mis): 账户白名单、账户消费记录下都支持以用户ID和姓名搜索 (#1195)

# 做了什么： ![image](https://github.com/PKUHPC/SCOW/assets/72734623/c66fe0d6-8b1c-4ec7-889d-66af36afd3e1) 支持以用户名和用ID搜索 _ ![image](https://github.com/PKUHPC/SCOW/assets/72734623/972c6651-6d2c-4494-9409-dd21cf2a5489) 支持用户名和用户ID搜索
PKUHPC · Apr 12, 2024 · 93be965 · 93be965
1 parent 81ec3ec
commit 93be965
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 12 deletions.
diff --git a/.changeset/eleven-garlics-prove.md b/.changeset/eleven-garlics-prove.md
@@ -0,0 +1,5 @@
+---
+"@scow/mis-web": patch
+---
+
+账户白名单、账户消费记录下都支持以用户 ID 和姓名搜索
diff --git a/apps/mis-web/src/i18n/en.ts b/apps/mis-web/src/i18n/en.ts
@@ -27,6 +27,7 @@ export default {
     tenantRole: "User Role",
     user: "User",
     userId: "User ID",
+    ownerIdOrName:"ownerId Or Name",
     userName: "Username",
     userFullName:"User Name",
     import: "Import",
@@ -399,6 +400,7 @@ export default {
       chargeTable: {
         time: "Deduction Date",
         amount: "Deduction Amount",
+        ownerIdOrName:"ownerId Or Name",
       },
     },
     init: {
@@ -603,6 +605,7 @@ export default {
         whiteList: "Whitelist Count",
         debtSum: "Total Debt in Whitelist",
         joinTime: "Join Time",
+        ownerIdOrName: "Owner ID or Name",
         operatorId: "Operator",
         confirmRemoveWhite: "Confirm removing the account from the whitelist?",
         confirmRemoveWhiteText1: "Confirm removing the account ",

diff --git a/apps/mis-web/src/i18n/zh_cn.ts b/apps/mis-web/src/i18n/zh_cn.ts
@@ -28,6 +28,7 @@ export default {
     user:"用户",
     userId:"用户ID",
     userName:"用户名",
+    ownerIdOrName:"用户ID或姓名",
     userFullName:"用户姓名",
     import:"导入",
     fresh:"刷新",
@@ -399,6 +400,7 @@ export default {
       chargeTable:{
         time:"扣费日期",
         amount:"扣费金额",
+        ownerIdOrName:"用户ID或姓名",
       },
     },
     init:{
@@ -603,6 +605,7 @@ export default {
         whiteList:"白名单数量",
         debtSum:"白名单欠费合计",
         joinTime:"加入时间",
+        ownerIdOrName:"用户ID或姓名",
         operatorId:"操作人",
         confirmRemoveWhite:"确认将账户移除白名单？",
         confirmRemoveWhiteText1:"确认要将账户",

diff --git a/apps/mis-web/src/pageComponents/finance/ChargeTable.tsx b/apps/mis-web/src/pageComponents/finance/ChargeTable.tsx
@@ -31,6 +31,7 @@ import { formatMetadataDisplay } from "src/utils/metadata";
 
 import { AccountSelector } from "./AccountSelector";
 
+// ChargeTable 组件的 Props 接口
 interface Props {
   accountName?: string;
   showAccountName: boolean;
@@ -39,18 +40,22 @@ interface Props {
   searchType?: SearchType;
 }
 
+// 过滤充值记录的表单接口
 interface FilterForm {
   name?: string;
   time: [dayjs.Dayjs, dayjs.Dayjs];
   type?: string;
   userIds?: string;
 }
 
+// 当前时间的 dayjs 对象
 const now = dayjs();
 
+// 国际化函数
 const p = prefix("pageComp.finance.chargeTable.");
 const pCommon = prefix("common.");
 
+// 将用户 ID 字符串转换为数组的函数
 const convertUserIdArray = (userIds: string | undefined) => {
   return userIds ? userIds.split(",").map((id) => id.trim()) : [];
 };
@@ -74,8 +79,9 @@ export const ChargeTable: React.FC<Props> = ({
       time: [now.subtract(1, "week").startOf("day"), now.endOf("day")],
       type: undefined,
       userIds: undefined,
-    });
+    });// 查询对象
 
+  // 过滤后的充值类型数组
   const filteredTypes = [...publicConfig.CHARGE_TYPE_LIST, CHARGE_TYPE_OTHERS];
 
   // 在账户管理下切换不同账户消费记录页面时
@@ -96,18 +102,25 @@ export const ChargeTable: React.FC<Props> = ({
     setSelectedAccountName(accountName);
   }, [accountName]);
 
+  // 异步获取充值记录的函数
   const recordsPromiseFn = useCallback(async () => {
-    return await api.getCharges({ query: {
+    const getChargesInfo = await api.getCharges({ query: {
       accountName: query.name,
       startTime: query.time[0].clone().startOf("day").toISOString(),
       endTime: query.time[1].clone().endOf("day").toISOString(),
       type: query.type,
-      userIds: convertUserIdArray(query.userIds),
       isPlatformRecords,
       searchType,
       page: pageInfo.page,
       pageSize: pageInfo.pageSize,
     } });
+    // 对返回数据进行过滤，筛选出符合搜索结果的userID或userName
+    if (query.userIds) {
+      getChargesInfo.results = getChargesInfo.results.filter((v) => {
+        return v.userId == query.userIds || v.userName == query.userIds;
+      });
+    }
+    return getChargesInfo;
   }, [query, pageInfo]);
 
   const totalResultPromiseFn = useCallback(async () => {
@@ -124,6 +137,7 @@ export const ChargeTable: React.FC<Props> = ({
     });
   }, [query]);
 
+  // 使用异步 hook 获取充值记录和总数
   const { data: recordsData, isLoading: isRecordsLoading } = useAsync({
     promiseFn: recordsPromiseFn,
   });
@@ -132,7 +146,7 @@ export const ChargeTable: React.FC<Props> = ({
     promiseFn: totalResultPromiseFn,
   });
 
-
+  // 处理充值记录导出的函数
   const handleExport = async (columns: string[]) => {
     const totalCount = totalResultData?.totalCount ?? 0;
     if (totalCount > MAX_EXPORT_COUNT) {
@@ -157,6 +171,7 @@ export const ChargeTable: React.FC<Props> = ({
     }
   };
 
+  // 导出按钮的选项
   const exportOptions = useMemo(() => {
     const common = [
       { label: t(pCommon("user")), value: "userId" },
@@ -201,8 +216,8 @@ export const ChargeTable: React.FC<Props> = ({
                 </Form.Item>
               )
             }
-            <Form.Item label={t("common.user")} name="userIds">
-              <Input style={{ width: 180 }} placeholder={t("common.userId")} />
+            <Form.Item label={t("common.ownerIdOrName")} name="userIds">
+              <Input style={{ width: 180 }} placeholder={t("common.ownerIdOrName")} />
             </Form.Item>
             <Form.Item label={t(pCommon("time"))} name="time">
               <DatePicker.RangePicker allowClear={false} presets={getDefaultPresets(languageId)} />
@@ -225,12 +240,12 @@ export const ChargeTable: React.FC<Props> = ({
             </Form.Item>
             <Form.Item label={t("common.total")}>
               <strong>
-                {totalResultData ? totalResultData.totalCount : 0}
+                {recordsData ? recordsData.results.length : 0}
               </strong>
             </Form.Item>
             <Form.Item label={t(pCommon("sum"))}>
               <strong>
-                {totalResultData ? totalResultData.totalAmount.toFixed(3) : 0}
+                {recordsData ? recordsData.results.reduce(((a, b) => a + b.amount), 0) : 0}
               </strong>
             </Form.Item>
             <Form.Item>
@@ -254,7 +269,7 @@ export const ChargeTable: React.FC<Props> = ({
             current: pageInfo.page,
             pageSize: pageInfo.pageSize,
             defaultPageSize: DEFAULT_PAGE_SIZE,
-            total: totalResultData?.totalCount,
+            total: recordsData ? recordsData.results.length : 0,
             onChange: (page, pageSize) => {
               // 页码切换时让页面显示的值为上一次query的查询条件
               form.setFieldsValue({

diff --git a/apps/mis-web/src/pageComponents/tenant/AccountWhitelistTable.tsx b/apps/mis-web/src/pageComponents/tenant/AccountWhitelistTable.tsx
@@ -34,32 +34,55 @@ interface Props {
   reload: () => void;
 }
 
+// 过滤表单的结构
 interface FilterForm {
   accountName: string | undefined;
+  ownerIdOrName: string | undefined;
 }
+
 const p = prefix("pageComp.tenant.accountWhitelistTable.");
 const pCommon = prefix("common.");
 
 export const AccountWhitelistTable: React.FC<Props> = ({
   data, isLoading, reload,
 }) => {
 
+  // 获取国际化翻译函数
   const t = useI18nTranslateToString();
 
   const { message, modal } = App.useApp();
 
   const [form] = Form.useForm<FilterForm>();
+
+  // 创建过滤表单
   const [query, setQuery] = useState<FilterForm>({
     accountName: undefined,
+    ownerIdOrName: undefined,
   });
   const [currentPageNum, setCurrentPageNum] = useState<number>(1);
   const [currentSortInfo, setCurrentSortInfo] =
     useState<{ field: string | null | undefined, order: SortOrder }>({ field: null, order: null });
 
-  const filteredData = useMemo(() => data ? data.results.filter((x) => (
-    (!query.accountName || x.accountName.includes(query.accountName))
-  )) : undefined, [data, query]);
+  // 对数据进行过滤
+  const filteredData = useMemo(() => {
+
+    if (!data) return undefined;
+
+    const filtered = data.results.filter((x) => {
+      const dataMatchedAccount =
+          !query.accountName || x.accountName.includes(query.accountName);
+
+      const dataMatchedOwner =
+          !query.ownerIdOrName || x.ownerId.includes(query.ownerIdOrName) || x.ownerName.includes(query.ownerIdOrName);
 
+      return dataMatchedAccount && dataMatchedOwner;
+    });
+
+    return filtered;
+
+  }, [data, query]);
+
+  // 获取欠费总数
   const getTotalDebtAmount =
     (data: Static<typeof GetWhitelistedAccountsSchema["responses"]["200"]> | undefined): number => {
       const sum = data?.results.filter((acct) => !acct.balance?.positive)
@@ -70,6 +93,7 @@ export const AccountWhitelistTable: React.FC<Props> = ({
       return sum ? Math.abs(sum) : 0;
     };
 
+  // 处理表格变化事件
   const handleTableChange = (_, __, sortInfo) => {
     setCurrentSortInfo({ field: sortInfo.field, order: sortInfo.order });
   };
@@ -90,12 +114,16 @@ export const AccountWhitelistTable: React.FC<Props> = ({
           <Form.Item label={t(pCommon("account"))} name="accountName">
             <Input />
           </Form.Item>
+          <Form.Item label={t(p("ownerIdOrName"))} name="ownerIdOrName">
+            <Input />
+          </Form.Item>
           <Form.Item>
             <Button type="primary" htmlType="submit">{t(pCommon("search"))}</Button>
           </Form.Item>
         </Form>
       </FilterFormContainer>
       <>
+        {/* 名单表格 */}
         <TableTitle justify="flex-start">
           {
             data ? (