f

src/pages/member/Edit.jsx

@@ -21,36 +21,22 @@ export default (props) => {
     }
   }, []);
 
-  const tabList = [
-    {
-      key: "tab1",
-      tab: "会员信息",
-    },
-    {
-      key: "tab2",
-      tab: "会员卡信息",
-    },
-  ];
-  const contentList = {
-    // 会员基本信息
-    tab1: <MemberInfo key="1" memberList={memberList} />,
-    // 会员卡信息
-    tab2: (
-      <MemberCardInfo key="2" id={id} />
-    ),
-  };
   return (
     <Page back>
       <Card
+        title="会员信息"
         className="scorll"
-        style={{ width: "100%", overflowY: "scroll", maxHeight: "700px" }}
-        // title="会员卡"
-        //   extra={<a href="#">More</a>}
-        tabList={tabList}
-        activeTabKey={activeTabKey}
-        onTabChange={(key) => setActiveTabKey(key)}
+        style={{ width: "100%", overflowY: "scroll", maxHeight: "700px", marginBottom: "24px" }}
       >
-        {contentList[activeTabKey]}
+        <MemberInfo memberList={memberList} />
+      </Card>
+
+      <Card
+        title="会员卡信息"
+        className="scorll"
+        style={{ width: "100%", overflowY: "scroll" }}
+      >
+        <MemberCardInfo memberId={id} />
       </Card>
     </Page>
   );

src/pages/member/components/MemberCardInfo.jsx

@@ -1,14 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { Button, Card, Switch, Table } from "antd";
 import { ProTable } from '@ant-design/pro-components';
-import { getTaMemberId } from "@/services/taMember";
+import { getTaMemberCard } from "@/services/taMemberCard";
+import { queryTable } from '@/utils/request'
 import moment from "moment";
 import MemberOrderModal from "./MemberOrderModal";
 
+
 export default (props) => {
-  const { id } = props;
+  const { memberId } = props
   const actionRef = React.useRef();
-  const [list, setList] = useState();
+
+  const TaMemberCardList = queryTable(() => getTaMemberCard())
+  const [id, setId] = useState();
   const [open, setOpen] = useState(false);
 
   const columns = [
@@ -48,23 +52,22 @@ export default (props) => {
       key: 'option',
       ellipsis: true,
       render: (_, record) => [
-        <Button style={{ padding: 0 }} type="link" key={1} onClick={() => setOpen(true)}>
+        <Button style={{ padding: 0 }} type="link" key={1} onClick={() => onClickOpen(record)}>
           消费记录
         </Button>
       ]
     }
   ]
 
+  const onClickOpen = (val) => {
+    setId(val?.cardId)
+    setOpen(true);
+  };
+
   const onCancel = () => {
     setOpen(false);
   };
 
-  useEffect(() => {
-    getTaMemberId(id).then((res) => {
-      setList(res?.taMemberCardList);
-    })
-  }, [])
-
   return (
     <>
       <ProTable
@@ -73,9 +76,9 @@ export default (props) => {
         columns={columns}
         options={false}
         search={false}
-        dataSource={list}
+        request={TaMemberCardList}
       />
-      <MemberOrderModal open={open} onCancel={onCancel} />
+      <MemberOrderModal open={open} onCancel={onCancel} id={id} />
     </>
   );
 };

src/pages/member/components/MemberOrderModal.jsx

@@ -1,11 +1,36 @@
 import React, { useEffect, useState } from "react";
+import { Button } from "antd";
 import {
   ModalForm,
   ProTable
 } from '@ant-design/pro-components';
+import { getTaOrder } from "@/services/taOrder";
 
 export default (props) => {
-  const { open, onCancel } = props;
+  const { open, onCancel, id } = props;
+
+  const actionRef = React.useRef();
+  const [list, setList] = useState();
+
+  useEffect(() => {
+    if (id) {
+      getTaOrder({ memberCardId: id }).then((res) => {
+        setList(res)
+      })
+    }
+  }, [id])
+
+  const columns = [
+    {
+      title: "xxx",
+      dataIndex: "xxx"
+    },
+    {
+      title: "消费时间",
+      dataIndex: "createdAt"
+    },
+  ]
+  // console.log('---------->list', list);
   return (
     <ModalForm
       title="消费记录"
@@ -13,8 +38,34 @@ export default (props) => {
       modalProps={{
         destroyOnClose: true,
         onCancel: onCancel
-      }}>
-
+      }}
+      submitter={{
+        // 完全自定义整个区域
+        render: (props, doms) => {
+          return [
+            <Button
+              onClick={onCancel}
+            >
+              取消
+            </Button>,
+            <Button
+              type="primary"
+              onClick={onCancel}
+            >
+              确定
+            </Button>,
+          ];
+        }
+      }}
+    >
+      <ProTable
+        actionRef={actionRef}
+        rowKey="cardId"
+        columns={columns}
+        options={false}
+        search={false}
+      // dataSource={list}
+      />
     </ModalForm>
   )
 }

src/services/taMemberCard.js

@@ -1,7 +1,7 @@
 import request from "@/utils/request";
 
 /**
- * 部门查询
+ * 会员卡查询
  */
 export const getTaMemberCard = (params) =>
   request("/taMemberCard", {
@@ -18,8 +18,8 @@ export const postTaMemberCard = (data) =>
 /**
  * ID查询
  */
-export const getTaMemberCardId = (id, data) =>
-  request(`/taMemberCard/${id}`, { data });
+export const getTaMemberCardId = (id) =>
+  request(`/taMemberCard/${id}`);
 
 /**
  * 更新数据

src/services/taOrder.js

@@ -0,0 +1,6 @@
+import request from "@/utils/request";
+
+/*
+ * 分页查询
+ */
+export const getTaOrder = (params) => request(`/taOrder`, { params });