labring · zzjin · Jul 9, 2024 · Jul 2, 2024
diff --git a/frontend/providers/costcenter/public/locales/en/applist.json b/frontend/providers/costcenter/public/locales/en/applist.json
@@ -0,0 +1,10 @@
+{
+	"TERMINAL": "TERMINAL",
+	"JOB":"JOB",
+	"OTHER": "OTHER",
+	"OBJECT-STORAGE": "OBJECT-STORAGE",
+	"CLOUD-VM":"CLOUD-VM",
+	"DB": "DATABASE",
+	"APP": "APP",
+	"All APP": "ALL"
+}
diff --git a/frontend/providers/costcenter/public/locales/en/common.json b/frontend/providers/costcenter/public/locales/en/common.json
@@ -158,9 +158,11 @@
   "Remaining Quota": "remaining",
   "Receipts And Disbursements": "Receipts And Disbursements",
   "APP Name": "App name",
-  "All APP": "all",
   "APP Type": "App type",
   "Details": "Details",
+	"Transfer Type":"Transfer Type",
   "Handle": "Handle",
-  "currencyUnit": "Currency Unit"
+  "currencyUnit": "Currency Unit",
+	"Trader ID":"Trader"
+
 }
diff --git a/frontend/providers/costcenter/public/locales/zh/applist.json b/frontend/providers/costcenter/public/locales/zh/applist.json
@@ -0,0 +1,10 @@
+{
+	"TERMINAL": "终端",
+	"JOB":"任务",
+	"OTHER": "其他",
+	"OBJECT-STORAGE": "对象存储",
+	"CLOUD-VM":"云主机",
+	"DB": "数据库",
+	"APP": "应用",
+	"All APP": "所有应用"
+}
diff --git a/frontend/providers/costcenter/public/locales/zh/common.json b/frontend/providers/costcenter/public/locales/zh/common.json
@@ -158,9 +158,11 @@
   "Remaining Quota": "剩余",
   "Receipts And Disbursements": "收支",
   "APP Name": "应用名称",
-  "All APP": "所有应用",
+
   "APP Type": "应用类型",
+	"Transfer Type": "转账类型",
   "Details": "详情",
   "Handle": "操作",
-  "currencyUnit": "金额单位"
+  "currencyUnit": "金额单位",
+	"Trader ID": "交易用户"
 }
diff --git a/frontend/providers/costcenter/src/components/billing/AppMenu.tsx b/frontend/providers/costcenter/src/components/billing/AppMenu.tsx
@@ -30,7 +30,8 @@ export default function AppMenu({
   const { setAppType } = useBillingStore();
   const { isOpen, onClose, onOpen } = useDisclosure();
   const { t } = useTranslation();
-  const appList: string[] = [t('All APP'), ...(data?.data?.appList || [])];
+  const { t: appT } = useTranslation('applist');
+  const appList: string[] = ['All APP', ...(data?.data?.appList || [])].map((v) => appT(v));
   return (
     <Flex align={'center'} ml="28px" {...props}>
       <Popover onClose={onClose} onOpen={onOpen} isOpen={isOpen}>
@@ -91,9 +92,6 @@ export default function AppMenu({
                 setAppType(idx === 0 ? '' : appList[idx]);
                 onClose();
               }}
-              // _hover={{
-              //   bg: ''
-              // }}
             >
               {v}
             </Button>

diff --git a/frontend/providers/costcenter/src/components/billing/SwitchPage.tsx b/frontend/providers/costcenter/src/components/billing/SwitchPage.tsx
@@ -47,7 +47,9 @@ export default function SwitchPage({
   return (
     <Flex minW="370px" h="32px" align={'center'} mt={'20px'} {...props}>
       <Text>{t('Total')}:</Text>
-      <Flex w="40px">{totalItem}</Flex>
+      <Flex minW="40px" mr="5px">
+        {totalItem}
+      </Flex>
       <Flex gap={'8px'}>
         <Button
           {...switchStyle}

diff --git a/frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx b/frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx
@@ -1,6 +1,14 @@
 import useOverviewStore from '@/stores/overview';
 import { useContext, useEffect, useState } from 'react';
-import { BillingData, BillingSpec, BillingType } from '@/types';
+import {
+  ApiResp,
+  BillingData,
+  BillingSpec,
+  BillingType,
+  TransferBilling,
+  TransferBillingData,
+  TransferType
+} from '@/types';
 import { useQuery } from '@tanstack/react-query';
 import { formatISO } from 'date-fns';
 import request from '@/service/request';
@@ -17,7 +25,7 @@ import useBillingStore from '@/stores/billing';
 export default function TransferTabPanel() {
   const startTime = useOverviewStore((state) => state.startTime);
   const endTime = useOverviewStore((state) => state.endTime);
-  const [selectType, setType] = useState<BillingType>(BillingType.ALL);
+  const [selectType, setType] = useState<TransferType>(TransferType.ALL);
   const [orderID, setOrderID] = useState('');
   const [totalPage, setTotalPage] = useState(1);
   const [currentPage, setcurrentPage] = useState(1);
@@ -28,7 +36,7 @@ export default function TransferTabPanel() {
     setcurrentPage(1);
   }, [startTime, endTime, selectType, namespace]);
   const { data, isFetching, isSuccess } = useQuery(
-    ['billing', { currentPage, startTime, endTime, orderID, selectType, namespace }],
+    ['billing', { currentPage, startTime, endTime, orderID, selectType, namespace, pageSize }],
     () => {
       const spec = {
         page: currentPage,
@@ -38,25 +46,23 @@ export default function TransferTabPanel() {
         // startTime,
         endTime: formatISO(endTime, { representation: 'complete' }),
         // endTime,
-        namespace,
+        // orderID
         orderID
       };
-      return request<any, { data: BillingData }, { spec: BillingSpec }>('/api/billing', {
+      return request<any, ApiResp<TransferBillingData>>('/api/billing/transfer', {
         method: 'POST',
-        data: {
-          spec
-        }
+        data: spec
       });
     },
     {
       onSuccess(data) {
-        const totalPage = data.data.status.pageLength;
+        const totalPage = data.data?.totalPage || 0;
         if (totalPage === 0) {
           // 搜索时的bug
           setTotalPage(1);
           setTotalItem(1);
         } else {
-          setTotalItem(data.data.status.totalCount);
+          setTotalItem(data.data?.total || 0);
           setTotalPage(totalPage);
         }
         if (totalPage < currentPage) setcurrentPage(1);
@@ -65,7 +71,7 @@ export default function TransferTabPanel() {
     }
   );
   const { t } = useTranslation();
-  const tableResult = data?.data?.status?.item || [];
+  const tableResult = data?.data?.transfers || [];
   return (
     <TabPanel p="0" flex={1} display={'flex'} flexDirection={'column'}>
       <Flex alignItems={'center'} flexWrap={'wrap'}>
@@ -79,22 +85,13 @@ export default function TransferTabPanel() {
           <Text fontSize={'12px'} mr={'12px'} width={['60px', '60px', 'auto', 'auto']}>
             {t('Type')}
           </Text>
-          <TypeMenu
-            selectType={selectType}
-            setType={setType}
-            isDisabled={isFetching}
-            optional={[BillingType.ALL, BillingType.RECEIVE, BillingType.TRANSFER]}
-          />
+          <TypeMenu selectType={selectType} setType={setType} isDisabled={isFetching} />
         </Flex>
         <SearchBox isDisabled={isFetching} setOrderID={setOrderID} />
       </Flex>
       {isSuccess && tableResult.length > 0 ? (
         <>
-          <TransferBillingTable
-            data={tableResult.filter((x) =>
-              [BillingType.RECEIVE, BillingType.TRANSFER].includes(x.type)
-            )}
-          />
+          <TransferBillingTable data={tableResult} />
           <Flex justifyContent={'flex-end'}>
             <SwitchPage
               totalPage={totalPage}

diff --git a/frontend/providers/costcenter/src/components/billing/TypeMenu.tsx b/frontend/providers/costcenter/src/components/billing/TypeMenu.tsx
@@ -1,19 +1,17 @@
-import { LIST_TYPE } from '@/constants/billing';
-import { BillingType } from '@/types';
+import { TRANSFER_LIST_TYPE } from '@/constants/billing';
+import { TransferType } from '@/types';
 import { Button, Popover, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { Dispatch, SetStateAction } from 'react';
 
 export default function TypeMenu({
   isDisabled,
   selectType,
-  setType,
-  optional
+  setType
 }: {
-  optional: BillingType[];
   isDisabled: boolean;
-  selectType: BillingType;
-  setType: Dispatch<SetStateAction<BillingType>>;
+  selectType: TransferType;
+  setType: Dispatch<SetStateAction<TransferType>>;
 }) {
   const { isOpen, onClose, onOpen } = useDisclosure();
   const { t } = useTranslation();
@@ -41,7 +39,7 @@ export default function TypeMenu({
           }}
           borderRadius={'2px'}
         >
-          {t(LIST_TYPE[selectType + 1].title)}
+          {t(TRANSFER_LIST_TYPE[selectType].title)}
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -51,7 +49,7 @@ export default function TypeMenu({
         shadow={'0px 0px 1px 0px #798D9F40, 0px 2px 4px 0px #A1A7B340'}
         border={'none'}
       >
-        {LIST_TYPE.filter((x) => optional.includes(x.value)).map((v) => (
+        {TRANSFER_LIST_TYPE.map((v) => (
           <Button
             variant={'white-bg-icon'}
             key={v.value}

diff --git a/frontend/providers/costcenter/src/components/billing/billingTable.tsx b/frontend/providers/costcenter/src/components/billing/billingTable.tsx
@@ -1,7 +1,5 @@
 import { TableHeaderID } from '@/constants/billing';
-import { BillingItem, BillingType, RechargeBillingItem } from '@/types/billing';
-import lineDown from '@/assert/lineDown.svg';
-import lineUp from '@/assert/lineUp.svg';
+import { BillingItem, BillingType, RechargeBillingItem, TransferBilling } from '@/types/billing';
 import {
   Box,
   Flex,
@@ -32,7 +30,9 @@ import {
 } from '@tanstack/react-table';
 import { useMemo } from 'react';
 import Amount from '@/components/billing/AmountTableHeader';
-
+import useSessionStore from '@/stores/session';
+import lineUp from '@/assert/lineUp.svg';
+import lineDown from '@/assert/lineDown.svg';
 export function CommonBillingTable({
   data,
   isOverview = false,
@@ -172,13 +172,16 @@ export function CommonBillingTable({
   return <BaseTable table={table} {...styles} />;
 }
 
-export function TransferBillingTable({ data }: { data: BillingItem[] }) {
+export function TransferBillingTable({ data }: { data: TransferBilling[] }) {
   const { t } = useTranslation();
   const currency = useEnvStore((s) => s.currency);
+  const { session } = useSessionStore();
+  const user = session.user;
+
   const columns = useMemo(() => {
-    const columnHelper = createColumnHelper<BillingItem>();
+    const columnHelper = createColumnHelper<TransferBilling>();
     const customTh = (needCurrency?: boolean) =>
-      function CustomTh({ header }: HeaderContext<BillingItem, unknown>) {
+      function CustomTh({ header }: HeaderContext<TransferBilling, unknown>) {
         return (
           <Flex display={'flex'} alignItems={'center'}>
             <Text mr="4px">{t(header.id)}</Text>
@@ -191,44 +194,51 @@ export function TransferBillingTable({ data }: { data: BillingItem[] }) {
         );
       };
     return [
-      columnHelper.accessor((row) => row.order_id, {
+      columnHelper.accessor((row) => row.ID, {
         header: customTh(),
         id: TableHeaderID.OrderNumber,
-        enablePinning: true,
         cell(props) {
           const item = props.row.original;
           return (
             <Box>
               <Text color={'#24282C'} fontSize={'12px'}>
-                {item.order_id}
-              </Text>
-              <Text fontSize={'10px'} color={'#5A646E'}>
-                {item.namespace}
+                {item.ID}
               </Text>
             </Box>
           );
         }
       }),
-      columnHelper.accessor((row) => row.time, {
+      columnHelper.accessor((row) => row.CreatedAt, {
         header: customTh(),
         id: TableHeaderID.TransactionTime,
         enablePinning: true,
         cell(props) {
           return format(parseISO(props.cell.getValue()), 'MM-dd HH:mm');
         }
       }),
-      columnHelper.accessor((row) => row.appType, {
-        id: TableHeaderID.APPType,
+      columnHelper.accessor((row) => [row.FromUserID, row.ToUserID], {
         header: customTh(),
+        id: TableHeaderID.TraderID,
         cell(props) {
           const item = props.row.original;
+          const traderId = item.ToUserID === user.id ? item.FromUserID : item.ToUserID;
+          return traderId;
+        }
+      }),
+      columnHelper.accessor((row) => [row.ToUserID, row.FromUserID], {
+        id: TableHeaderID.TransferType,
+        header: customTh(),
+        cell(props) {
+          const item = props.row.original;
+          const billingType =
+            item.ToUserID === user.id ? BillingType.RECEIVE : BillingType.TRANSFER;
           return (
             <Flex align={'center'} width={'full'} height={'full'}>
               <Flex
                 px={'12px'}
                 py={'4px'}
                 minW={'max-content'}
-                {...(item.type === BillingType.RECEIVE
+                {...(billingType === BillingType.RECEIVE
                   ? {
                       bg: '#E6F6F6',
                       color: '#00A9A6'
@@ -242,43 +252,31 @@ export function TransferBillingTable({ data }: { data: BillingItem[] }) {
                 justify={'space-evenly'}
               >
                 <Img
-                  src={item.type === BillingType.TRANSFER ? lineDown.src : lineUp.src}
+                  src={billingType === BillingType.TRANSFER ? lineDown.src : lineUp.src}
                   w="13.14px"
                   mr={'6px'}
                 ></Img>
-                <Text>{item.type === BillingType.RECEIVE ? t('Recipient') : t('Transfer')}</Text>
+                <Text>{billingType === BillingType.RECEIVE ? t('Recipient') : t('Transfer')}</Text>
               </Flex>
             </Flex>
           );
         }
       }),
-      columnHelper.accessor((row) => row.amount, {
+      columnHelper.accessor((row) => row.Amount, {
         header: customTh(true),
         id: TableHeaderID.TotalAmount,
         cell(props) {
-          const original = props.row.original;
-          return <Amount total={true} type={original.type} amount={props.cell.getValue()} />;
-        }
-      }),
-      columnHelper.accessor((row) => row.namespace, {
-        id: TableHeaderID.Namespace,
-        header: customTh(),
-        cell(props) {
-          const item = props.cell.getValue();
-          return <span>{item}</span>;
+          const item = props.row.original;
+          const billingType =
+            item.ToUserID === user.id ? BillingType.RECEIVE : BillingType.TRANSFER;
+          return <Amount total={true} type={billingType} amount={props.cell.getValue()} />;
         }
       })
     ];
-  }, [useEnvStore.getState().gpuEnabled, t, currency]);
+  }, [useEnvStore.getState().gpuEnabled, t, currency, user]);
 
   const table = useReactTable({
     data,
-    state: {
-      columnPinning: {
-        left: [TableHeaderID.OrderNumber],
-        right: [TableHeaderID.Namespace]
-      }
-    },
     columns,
     getCoreRowModel: getCoreRowModel()
   });