对接会员规则相关

src/components/StandardTable/index.tsx

@@ -15,24 +15,24 @@ export default class StandardTable extends React.PureComponent<StandardTableProp
 
   state = {
     page: 1,
-    size: 0,
+    size: 10,
   };
 
   handlePaginationChange = (page: number, size: number) => {
     const { pagination = {}, onPaginationChange } = this.props;
     const { current, pageSize } = pagination;
 
-    // 单独控制当前页 或 当前页数
-    // if (!('current' in pagination)) {
-    //   this.setState({ current });
-    // }
-    // if (!('pageSize' in pagination)) {
-    //   this.setState({ pageSize });
-    // }
+    // 内部自己维护 page、size， 单独控制当前页 或 当前页数
+    if (!('current' in pagination)) {
+      this.setState({ page: current });
+    }
+    if (!('pageSize' in pagination)) {
+      this.setState({ size: pageSize });
+    }
 
-     if (onPaginationChange) {
-      onPaginationChange(page, size);
-     }
+    if (onPaginationChange) {
+    onPaginationChange(page, size);
+    }
   };
 
   render() {
@@ -44,6 +44,7 @@ export default class StandardTable extends React.PureComponent<StandardTableProp
       pagination = {}, 
       loading, 
       className, 
+      onPaginationChange, 
       ...restProps
     } = this.props;
 

src/pages/member/memberUpgradeRule/index.tsx

@@ -3,7 +3,8 @@ import {
   Card, 
   Input, 
   Button, 
-  Form, 
+  Form,
+  message, 
 } from 'antd';
 import { ColumnType } from 'antd/lib/table/interface';
 import { PublicApi } from '@/services/api';
@@ -73,8 +74,6 @@ const EditableCell: React.FC<EditableCellProps> = ({
     try {
       const values = await form.validateFields();
 
-      console.log('values', values)
-
       // toggleEdit();
       handleSave({ 
         ...record, 
@@ -120,18 +119,17 @@ interface Columns extends ColumnType<any> {
   rules?: Array<any>;
 }
 
-const fetchData = async (params: any) => {
-  const res = await PublicApi.getMemberManageLevelRulePage(params);
-  return res.data;
-};
-
 const MemberUpgradeRule: React.FC<[]> = () => {
   
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(10);
   const [total, setTotal] = useState(0);
   const [dataSource, setDataSource] = useState([]);
   const [listLoading, setListLoading] = useState(true);
+  const [submitLoading, setSubmitLoading] = useState(false);
 
   const getRuleList = async (params) => {
+    setListLoading(true);
     const res = await PublicApi.getMemberManageLevelRulePage(params);
 
     if (res.code === 1000) {
@@ -144,10 +142,10 @@ const MemberUpgradeRule: React.FC<[]> = () => {
 
   useEffect(() => {
     getRuleList({
-      current: 1, 
-      pageSize: 1, 
+      current: page, 
+      pageSize: size, 
     });
-  }, []);
+  }, [page, size]);
 
   const columns: Columns[] = [
     {
@@ -175,14 +173,45 @@ const MemberUpgradeRule: React.FC<[]> = () => {
   ];
 
   const handlePaginationChange = (page: number, size: number) => {
-    console.log(page, size)
+    setPage(page);
+    setSize(size);
   };
 
+  // 重新保存 dataSource
   const handleSave = row => {
-    console.log('new row', row)
+    const newData = [...dataSource];
+    const index = newData.findIndex(item => item.id === row.id);
+    const item = newData[index];
+    newData.splice(index, 1, {
+      ...item,
+      ...row, 
+      point: +row.point, 
+    });
+    setDataSource(newData);
   };
 
-  const handleSubmit = () => {};
+  const handleSubmit = async () => {
+    if (!dataSource.length) {
+      return;
+    }
+    const payload = dataSource.map(item => ({
+      id: item.id, 
+      point: item.point, 
+    }));
+
+    setSubmitLoading(true);
+    const res = await PublicApi.postMemberManageLevelRuleSetpoint(payload);
+
+    if (res.code === 1000) {
+      message.success('保存成功');
+      getRuleList({
+        current: page, 
+        pageSize: size, 
+      });
+    }
+
+    setSubmitLoading(false);
+  };
 
   const components = {
     body: {
@@ -212,7 +241,7 @@ const MemberUpgradeRule: React.FC<[]> = () => {
     ],
   };
   
-  const newColumns:any = columns.map(col => {
+  const newColumns: any = columns.map(col => {
     if (!col.editable) {
       return col;
     }
@@ -243,6 +272,7 @@ const MemberUpgradeRule: React.FC<[]> = () => {
         <Button
           type="primary"
           icon={<ContainerOutlined />}
+          loading={submitLoading}
           onClick={handleSubmit}
         >
           保存
@@ -263,6 +293,7 @@ const MemberUpgradeRule: React.FC<[]> = () => {
           rowClassName={() => 'editable-row'} 
           loading={listLoading}
           pagination={{
+            pageSize: size, 
             total,
           }}
           onPaginationChange={handlePaginationChange}