修改会员支付参数配置编辑修改和删除

src/pages/payandSettle/paySetting/components/payWayTable.tsx

@@ -19,6 +19,9 @@ interface payWayTableParams {
 const PayWayTable: React.FC<payWayTableParams> = (props) => {
   const [modalvisible, setmodalvisible] = useState<boolean>(false);
   const [type, setType] = useState<number>(1); // 1.
+  const [edit, setedit] = useState<any>({});
+  const [modifyIndex, setModifyIndex] = useState<any>(0)
+  const [modify, setmodify] = useState<boolean>(false);
   const { name, payParametersListResponses, payParametersList, visible, onType, onGet, onDel, onEdit, id } = props;
   const columns: ColumnType<any>[] = [
     {
@@ -41,14 +44,19 @@ const PayWayTable: React.FC<payWayTableParams> = (props) => {
       key: 'options',
       dataIndex: 'options',
       render: (text: any, record: any, index: number) => <>
-        <Button type='link'>编辑</Button>
-        <Button type='link' onClick={() => onDel(type, index)}>删除</Button>
+        <Button type='link' onClick={() => {setedit(record); setmodalvisible(true); setModifyIndex(index); setmodify(true)}}>编辑</Button>
+        <Button type='link' onClick={() => onDel(record.type, index)}>删除</Button>
       </>
     }
   ]
 
   const handleOk = (value: any, idx: number) => {
-    onGet(value, idx)
+    if( !modify ) {
+      onGet(value, idx)
+    } else {
+      onEdit(value, idx, modifyIndex)
+    }
+
     setmodalvisible(false);
   }
 
@@ -65,7 +73,7 @@ const PayWayTable: React.FC<payWayTableParams> = (props) => {
             rowKey={(record: any, index: number) => index}
             pagination={false}
           />
-          <Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => { setmodalvisible(true); setType(1); }} type='dashed'>新增参数配置</Button>
+          <Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => { setmodalvisible(true); setType(1); setmodify(false) }} type='dashed'>新增参数配置</Button>
 
           {
             id !== 2 &&
@@ -77,7 +85,7 @@ const PayWayTable: React.FC<payWayTableParams> = (props) => {
                 rowKey={(record: any, index: number) => index}
                 pagination={false}
               />
-              <Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => { setmodalvisible(true); setType(2); }} type='dashed'>新增参数配置</Button>
+              <Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => { setmodalvisible(true); setType(2); setmodify(false) }} type='dashed'>新增参数配置</Button>
             </>
           }
 
@@ -87,6 +95,7 @@ const PayWayTable: React.FC<payWayTableParams> = (props) => {
         onType={onType}
         type={type}
         modalvisible={modalvisible}
+        edit={edit}
         onOK={(value) => handleOk(value, type)}
         onCancel={() => setmodalvisible(false)}
       />

src/pages/payandSettle/paySetting/components/setUpModal.tsx

-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Modal, Form, Select , Input } from 'antd';
 import usePayTypeEnum from './usePayTypeEnum';
 const { Option } = Select;
@@ -9,7 +9,8 @@ interface setUpModalParams {
   modalvisible?: boolean,
   onOK?: Function,
   onCancel?: Function,
-  onType?: number
+  onType?: number,
+  edit?: any
 }
 const layout: any = {
   colon: false,
@@ -19,12 +20,13 @@ const layout: any = {
 const SetUpModal:React.FC<setUpModalParams> = (props) => {
   const [form] = Form.useForm();
   const { payTypeEnum } = usePayTypeEnum();
-  const { modalvisible, onOK, onCancel, onType} = props;
+  const { modalvisible, onOK, onCancel, onType, edit} = props;
   const [option, setOption] = useState<any>({})
 
   const handleOk = () => {
     form.validateFields().then(res => {
       const obj = {
+        id: edit.id ? edit.id : undefined,
         code: option.children,
         value: res.value,
         describe: res.describe,
@@ -42,6 +44,17 @@ const SetUpModal:React.FC<setUpModalParams> = (props) => {
     setOption(option)
   }
 
+  useEffect(() => {
+    if(Object.keys(edit).length > 0) {
+      console.log(edit, 10086)
+      form.setFieldsValue({
+        code: edit.payWayCodeTypeEnum,
+        value: edit.value,
+        describe: edit.edit
+      })
+    }
+  },[edit])
+
   return (
     <Modal
       width={576}

src/pages/payandSettle/paySetting/newPay.tsx

-/*
- * @Author: HJX
- * @Date: 2020-11-19 15:25:54
- * @LastEditors: HJX
- * @LastEditTime: 2020-11-19 15:25:54
- */
-import React, { useState, useEffect } from 'react';
-import { Button, Card, Tabs, Space, Input } from 'antd';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { PublicApi } from '@/services/api';
-import PayWayRadio from './components/payWayRadio';
-import PayWayTable from './components/payWayTable';
-import { set } from 'mobx';
-const { TabPane } = Tabs
-
-const PayWaySetTemplate: React.FC<{}> = () => {
-  const [config, setconfig] = useState<any>([]);
-  const [payItem, setPayItem] = useState<any>([]);
-  const [step, setStep] = useState<Array<number>>([]);
-  const payWayConfigInfo = () => {
-    // 支付配置信息
-    return new Promise(resolve => {
-      PublicApi.getPayMemberPayConfig().then(res => {
-        if (res.code === 1000) {
-          resolve(res.data)
-        }
-      })
-    })
-  }
-
-  const initPayWayStart = (id: any) => {
-    return new Promise(resolve => {
-      PublicApi.getPayMemberQueryPlatformIsStart({ id }).then(res => {
-        if (res.code === 1000) {
-          if (res.data) {
-            resolve(res)
-          }
-        }
-      })
-    }).then((res: any) => {
-      const data = [...payItem];
-      if (data.length > 0) {
-        data.forEach((item: any) => {
-          if (item.id === res.data.id) {
-            item.id = res.data.id;
-            item.isPitchOn = res.data.isPitchOn;
-            item.payParametersList = res.data.payParametersList;
-            item.payParametersAddListRequests = res.data.payParametersListResponses;
-            item.payType = res.data.payType;
-            item.way = res.data.way;
-          }
-        })
-        setPayItem([...data])
-      }
-    })
-  }
-
-  const handleTabClick = (key: any) => {
-    if (!step.includes(Number(key))) {
-      initPayWayStart(key);
-    }
-    const data = [...step, Number(key)];
-    let arr = [...new Set(data)]
-    setStep(arr);
-  }
-
-  useEffect(() => {
-    // 支付配置信息
-    payWayConfigInfo().then((res: any) => {
-      const id = res[0].id;
-      const arr: any[] = [];
-      res.forEach((item: any) => {
-        arr.push({
-          id: item.id,
-          way: item.way,
-          isPitchOn: item.isPitchOn ? item.isPitchOn : 0,
-          payType: item.payType,
-          payParametersList: [],
-          payParametersAddListRequests: []
-        })
-      })
-      setStep([...step, id])
-      setconfig(res);
-      /**第一次运行 */
-      PublicApi.getPayMemberQueryPlatformIsStart({ id }).then(res => {
-        arr.forEach((item: any, index: number) => {
-          if (res.data) {
-            if (item.id === id) {
-              item.id = res.data.id;
-              item.isPitchOn = res.data.isPitchOn;
-              item.payParametersList = res.data.payParametersList;
-              item.payParametersAddListRequests = res.data.payParametersListResponses;
-              item.payType = res.data.payType;
-              item.way = res.data.way;
-            }
-          }
-        })
-        console.log(arr)
-        setPayItem([...arr]);
-      })
-    })
-  }, [])
-
-  const onChangeRaido = (e: any, index: number) => {
-    const data = [...payItem];
-    payItem[index].isPitchOn = e.target.value;
-    setPayItem(data);
-  }
-
-  const onGet = (value:any, type:number, idx:number) => {
-    const data = [...payItem];
-    if(type === 1) {
-      data[idx].payParametersAddListRequests = [...data[idx].payParametersAddListRequests, value]
-    } else {
-      data[idx].payParametersList.push(value)
-    }
-    setPayItem(data);
-  }
-
-  /**删除 */
-  const onDel = (value:any, index:number, idx:number) => {
-    console.log(value, index, idx, 10086)
-    const data = [...payItem];
-    if(Number(value) === 1) {
-      data[idx].payParametersAddListRequests.splice(index, 1);
-      data[idx].payParametersAddListRequests = [...data[idx].payParametersAddListRequests]
-    } else {
-      data[idx].payParametersList.splice(index, 1);
-      data[idx].payParametersList = [...data[idx].payParametersList]
-    }
-    setPayItem([...data]);
-  }
-  /**编辑 */
-  const onEdit = (value:any, index:number) => {
-
-  }
-
-  /**保存更新 */
-  const onHnadleSubmit = () => {
-    console.log(payItem);
-  }
-
-  return (
-    <PageHeaderWrapper
-      extra={<Button type='primary' onClick={onHnadleSubmit}>保存</Button>}
-    >
-      <Card>
-        <Tabs type="card" onTabClick={handleTabClick}>
-          {config.map((item: any, idx: number) =>
-            <TabPane tab={item.way} key={item.id} forceRender>
-              <>
-                {
-                  payItem.length > 0 &&
-                  <>
-                    <PayWayRadio
-                      name={payItem[idx].way}
-                      value={payItem[idx].isPitchOn}
-                      selectId={payItem[idx].id}
-                      onChange={(value) => onChangeRaido(value, idx)}
-                    />
-                    {(payItem[idx].id === 1 || payItem[idx].id === 2) &&
-                      <PayWayTable
-                        id={payItem[idx].id}
-                        onType={payItem[idx].payType}
-                        name={payItem[idx].way}
-                        payParametersList={payItem[idx].payParametersList}
-                        payParametersListResponses={payItem[idx].payParametersAddListRequests}
-                        visible={!!payItem[idx].isPitchOn}
-                        onGet={(value, t) => onGet(value, t, idx)}
-                        onDel={(value, index) => onDel(value, index, idx)}
-                        onEdit={onEdit}
-                      />
-                    }
-                    {
-                      payItem[idx].id === 6 &&
-                      payItem[idx].payParametersAddListRequests.map((item: any, index: number) => (
-                        <div style={{ marginTop: 42 }}>
-                          <Space direction="horizontal" size={16}>
-                            初始申请额度不超过
-                            <Input value={item.code} addonBefore="￥" />
-                            允许满<Input value={item.value} />
-                            天后申请上调<Input value={item.describe} addonAfter="%" />
-                          </Space>
-                        </div>
-                      ))
-                    }
-
-                  </>
-                }
-              </>
-            </TabPane>
-          )}
-        </Tabs>
-      </Card>
-    </PageHeaderWrapper>
-  )
-};
-export default PayWaySetTemplate;