f

src/pages/member/Edit.jsx

@@ -1,17 +1,37 @@
 import { getTaMemberId } from "@/services/taMember";
 import { Card } from "antd";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useSearchParams } from "react-router-dom";
 import Page from "@/components/Page";
+import { ProTable } from '@ant-design/pro-components';
 import MemberInfo from "./components/MemberInfo";
 import MemberCardInfo from "./components/MemberCardInfo";
+import moment from "moment";
+import {
+  BILL_CONSUME,
+  BILL_REFUND,
+  BILL_RECHARGE,
+  BILL_WITHDRAW,
+} from "@/utils/biz";
+import { getTaOrder } from "@/services/taOrder";
+import { getSysUser } from "@/services/sysUser";
+import { queryTable, queryDict } from "@/utils/request";
 import "./index.less";
 // import Pages from "./components/Pages";
 export default (props) => {
+
+  const actionRef = React.useRef();
+
   const [params] = useSearchParams();
   const [activeTabKey, setActiveTabKey] = useState("tab1");
   const [memberList, setMemberList] = useState();
+  const [memberCardId, setMemberCardId] = useState();
   const id = params.get("id");
+  const tab = params.get("tab");
+
+  const TaOrderList = queryTable(getTaOrder);
+
+  const TaSysUserList = queryDict(getSysUser, { labelKey: "userName", valueKey: "userId" });
 
   useEffect(() => {
     if (id) {
@@ -21,23 +41,87 @@ export default (props) => {
     }
   }, []);
 
+  useEffect(() => {
+    if (tab) {
+      setActiveTabKey(tab);
+    }
+  }, [tab]);
+
+  const tabList = [
+    {
+      key: "tab1",
+      tab: "会员信息",
+    },
+    {
+      key: "tab2",
+      tab: "会员卡信息",
+    },
+  ];
+
+  const contentList = {
+    tab1: <MemberInfo memberList={memberList} />,
+    tab2: <MemberCardInfo memberId={id} setMemberCardId={setMemberCardId} />,
+  };
+
+  const columns = [
+    {
+      title: '会员名称',
+      dataIndex: "memberName",
+    },
+    {
+      title: "消费类型",
+      dataIndex: "billType",
+      render: (it) =>
+        it == BILL_CONSUME
+          ? "消费"
+          : it == BILL_REFUND
+            ? "退款"
+            : it == BILL_RECHARGE
+              ? "充值-开卡"
+              : it == BILL_WITHDRAW
+                ? "提现"
+                : "未知",
+    },
+    {
+      title: "消费时间",
+      dataIndex: "createdAt",
+      render: (it) => moment(it).format("YYYY-MM-DD HH:mm:ss"),
+    },
+    {
+      title: '操作人',
+      dataIndex: "createdBy",
+      valueType: "select",
+      request: TaSysUserList,
+    },
+  ];
+
+
   return (
     <Page back>
       <Card
-        title="会员信息"
         className="scorll"
+        tabList={tabList}
+        activeTabKey={activeTabKey}
+        onTabChange={setActiveTabKey}
         style={{ width: "100%", overflowY: "scroll", maxHeight: "700px", marginBottom: "24px" }}
       >
-        <MemberInfo memberList={memberList} />
-      </Card>
-
-      <Card
-        title="会员卡信息"
-        className="scorll"
-        style={{ width: "100%", overflowY: "scroll" }}
-      >
-        <MemberCardInfo memberId={id} />
+        {contentList[activeTabKey]}
       </Card>
+      {
+        memberCardId && (
+          <Card title="消费记录" style={{ marginTop: '24px' }}>
+            <ProTable
+              actionRef={actionRef}
+              rowKey="cardId"
+              columns={columns}
+              params={{ memberCardId: memberCardId }}
+              options={false}
+              search={false}
+              request={TaOrderList}
+            />
+          </Card>
+        )
+      }
     </Page>
   );
 };

src/pages/member/components/MemberCardInfo.jsx

@@ -2,21 +2,30 @@ import React, { useEffect, useState } from "react";
 import { Button, Card, Switch, Table } from "antd";
 import { ProTable } from "@ant-design/pro-components";
 import { getTaMemberCard } from "@/services/taMemberCard";
-import { queryTable } from "@/utils/request";
+import { getTaPackage } from "@/services/taPackage";
+import { getTaOrder } from "@/services/taOrder";
+import { queryTable, queryDict } from "@/utils/request";
 import moment from "moment";
 import MemberOrderModal from "./MemberOrderModal";
 
+const PackageNameList = queryDict(getTaPackage, { labelKey: "packageName", valueKey: "packageId" });
+
 export default (props) => {
-  const { memberId } = props;
+  const { memberId, setMemberCardId } = props;
   const actionRef = React.useRef();
 
   const TaMemberCardList = queryTable(() =>
     getTaMemberCard({ memberId: memberId })
   );
-  const [id, setId] = useState();
-  const [open, setOpen] = useState(false);
 
   const columns = [
+    {
+      title: "套餐名称",
+      dataIndex: "packageId",
+      valueType: 'select',
+      request: PackageNameList,
+      ellipsis: true,
+    },
     {
       title: "开卡人姓名",
       dataIndex: "memberName",
@@ -57,7 +66,7 @@ export default (props) => {
           style={{ padding: 0 }}
           type="link"
           key={1}
-          onClick={() => onClickOpen(record)}
+          onClick={() => onClick(record)}
         >
           消费记录
         </Button>,
@@ -65,13 +74,8 @@ export default (props) => {
     },
   ];
 
-  const onClickOpen = (val) => {
-    setId(val?.cardId);
-    setOpen(true);
-  };
-
-  const onCancel = () => {
-    setOpen(false);
+  const onClick = (val) => {
+    setMemberCardId(val?.cardId);
   };
 
   return (
@@ -84,7 +88,6 @@ export default (props) => {
         search={false}
         request={TaMemberCardList}
       />
-      <MemberOrderModal open={open} onCancel={onCancel} id={id} />
     </>
   );
 };

src/pages/query/index.jsx

@@ -0,0 +1,110 @@
+import React, { useRef } from "react";
+import List from "@/components/Page/List";
+import { getTaOrder } from "@/services/taOrder";
+import { getTaMemberCard } from "@/services/taMemberCard";
+import moment from "moment";
+import Page from '@/components/Page';
+import { ProTable } from '@ant-design/pro-components';
+import { queryTable, queryDict } from "@/utils/request";
+import { getSysUser } from "@/services/sysUser";
+import {
+  BILL_CONSUME,
+  BILL_REFUND,
+  BILL_RECHARGE,
+  BILL_WITHDRAW,
+} from "@/utils/biz";
+
+const TaOrderList = queryTable(getTaOrder);
+
+const TaSysUserList = queryDict(getSysUser, { labelKey: "userName", valueKey: "userId" });
+export default (props) => {
+  const actionRef = useRef();
+
+  const columns = [
+    {
+      title: "会员名称",
+      dataIndex: "memberName",
+    },
+    {
+      title: '套餐名称',
+      dataIndex: "packageName",
+      search: false
+    },
+    {
+      title: "消费类型",
+      dataIndex: "billType",
+      valueType: "select",
+      valueEnum: {
+        'consume': '消费',
+        'refund': '退款',
+        'recharge': '充值-开卡',
+        'withdraw': '提现',
+      }
+    },
+    {
+      title: "总费用",
+      dataIndex: "totalCharge",
+      search: false
+    },
+    {
+      title: "数量",
+      dataIndex: "totalAmount",
+      search: false
+    },
+    {
+      title: "单价",
+      dataIndex: "unitCharge",
+      search: false
+    },
+    {
+      title: "原始价格",
+      dataIndex: "fullCharge",
+      search: false
+    },
+    {
+      title: "下单日期",
+      dataIndex: "orderDate",
+      render: (it) => (it == '-' ? '-' : moment(it).format("YYYY-MM-DD HH:mm:ss")),
+      search: false
+    },
+    {
+      title: "下单人名称",
+      dataIndex: "personName",
+      search: false
+    },
+    // {
+    //   title: "是否退单",
+    //   dataIndex: "isRefund",
+    //   valueEnum: {
+    //     1: '是',
+    //     2: '否',
+    //   },
+    //   search: false
+    // },
+    {
+      title: "操作时间",
+      dataIndex: "createdAt",
+      render: (it) => (it == '-' ? '-' : moment(it).format("YYYY-MM-DD HH:mm:ss")),
+      search: false
+    },
+    {
+      title: "操作人",
+      dataIndex: "createdBy",
+      valueType: "select",
+      request: TaSysUserList,
+      search: false,
+    },
+  ]
+
+  return (
+    <Page>
+      <ProTable
+        cardBordered
+        rowKey="orderId"
+        columns={columns}
+        actionRef={actionRef}
+        request={TaOrderList}
+      />
+    </Page>
+  )
+}

src/routes/routes.jsx

@@ -15,6 +15,7 @@ import {
   BorderInnerOutlined,
   HeatMapOutlined,
   MediumOutlined,
+  LaptopOutlined
 } from "@ant-design/icons";
 import { Outlet, Navigate } from "react-router-dom";
 import AuthLayout from "@/layouts/AuthLayout";
@@ -29,6 +30,7 @@ import ProjectContactEdit from "@/pages/projectContact/Edit";
 import ProjectDeploy from "@/pages/projectDeploy";
 import ProjectDeployEdit from "@/pages/project/components/ProjectDeployEdit";
 import ProjectNode from "@/pages/projectNode";
+import Query from "@/pages/query";
 
 import Role from "@/pages/role";
 import Dept from "@/pages/dept";
@@ -146,6 +148,14 @@ export const authRoutes = [
           hideInMenu: true,
         },
       },
+      {
+        path: "query",
+        element: <Query />,
+        meta: {
+          title: "查询统计",
+          icon: <LaptopOutlined />,
+        },
+      }
     ],
   },
   {
@@ -307,7 +317,7 @@ export const defaultRoutes = [
   },
 ];
 
-export function mergeAuthRoutes(r1, r2) {
+export function mergeAuthRoutes (r1, r2) {
   const r = r1.slice();
   const children = r1[0].children.slice();
   r[0].children = children.concat(r2);
@@ -316,7 +326,7 @@ export function mergeAuthRoutes(r1, r2) {
 
 // 全部路由
 export const routes = mergeAuthRoutes(defaultRoutes, authRoutes);
-function getPath(parent = "/", current = "") {
+function getPath (parent = "/", current = "") {
   if (current.indexOf("/") === 0 || current.indexOf("http") === 0)
     return current;
   return `${parent}/${current}`.replace(/\/\//g, "/");

src/utils/request.js

@@ -4,7 +4,7 @@ import { message } from "antd";
 import { getToken, setToken } from "./token";
 
 const instance = axios.create({
-  baseURL:  import.meta.env.VITE_SERVER_BASE,
+  baseURL: import.meta.env.VITE_SERVER_BASE,
   timeout: 10000,
   // withCredentials: true, // 跨域
 });
@@ -21,7 +21,7 @@ instance.interceptors.request.use(
       params = {},
     } = config;
 
-      const token = getToken();
+    const token = getToken();
     let noTip = silent;
     if (noTip === undefined) {
       noTip = method.toLocaleLowerCase() === "get" ? true : false;
@@ -35,7 +35,7 @@ instance.interceptors.request.use(
       headers: {
         ...headers,
         Authorization: token || "",
-        "x-client-type":"pc.admin",
+        "x-client-type": "pc.admin",
         // "Content-Type": "application/json;charset=utf-8"
       },
       responseType: download ? "blob" : responseType,
@@ -95,7 +95,7 @@ instance.interceptors.response.use(
 
 export default instance;
 
-export function queryTable(apiRequest) {
+export function queryTable (apiRequest) {
   return function (params) {
     const { pageSize } = params;
     return apiRequest({
@@ -118,13 +118,13 @@ export function queryTable(apiRequest) {
   };
 }
 
-function getValueOfType(value, type) {
+function getValueOfType (value, type) {
   if (type == "string") return `${value}`;
   if (type == "int" || type == "integer") return value - 0;
   return value;
 }
 
-export function queryDict(
+export function queryDict (
   apiRequest,
   { labelKey = "name", valueKey = "id", valueType }
 ) {
@@ -136,11 +136,14 @@ export function queryDict(
       ...(leftParams || {}),
     })
       .then((res) => {
-        return res?.records?.map((x) => ({
-          label: x[labelKey],
-          value: getValueOfType(x[valueKey], valueType),
-          ...x,
-        }));
+        return res?.records?.map((x) => (
+          console.log('xiaofang-->x', x),
+          // console.log('xiaofang-->', x[labelKey]),
+          {
+            label: x[labelKey],
+            value: getValueOfType(x[valueKey], valueType),
+            ...x,
+          }));
       })
       .catch((err) => {
         return {
@@ -149,7 +152,7 @@ export function queryDict(
       });
   };
 }
-export function restful(url) {
+export function restful (url) {
   const list = (params) => instance.get(url, { params });
   const get = (id) => instance.get(`${url}/${id}`);
   const add = (data) => instance.post(url, data);
@@ -159,7 +162,7 @@ export function restful(url) {
   return [list, get, add, update, del];
 }
 
-export function useRequest(fn) {
+export function useRequest (fn) {
   const [loading, setLoading] = React.useState(false);
 
   const p = (...args) =>
@@ -179,7 +182,7 @@ export function useRequest(fn) {
   return [loading, p];
 }
 
-function downloadBlob(response) {
+function downloadBlob (response) {
   let fileName = "未知文件";
   const contentType = response.headers["content-type"];
   const contentDisposition = response.headers["content-disposition"];