修改会员支付参数设置

.npmrc

 registry = "http://10.0.0.21:8081/repository/node-group/"
-# registry = "https://registry.npmjs.org/"
\ No newline at end of file
+# registry = "https://registry.npmjs.org/"

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

+import React, { useState } from 'react';
+import { Table, Button } from 'antd';
+import { ColumnType } from 'antd/lib/table/interface';
+import { PlusOutlined } from '@ant-design/icons';
+import SetUpModal from './setUpModal';
+
+interface payWayTableParams {
+  name?: string,
+  payParametersList?: any,
+  payParametersListResponses?: any,
+  visible?: boolean,
+  onGet?: Function,
+  onType?: number,
+  onDel?: Function,
+  onEdit?: Function,
+  id?: number
+}
+
+const PayWayTable: React.FC<payWayTableParams> = (props) => {
+  const [modalvisible, setmodalvisible] = useState<boolean>(false);
+  const [type, setType] = useState<number>(1); // 1.
+  const { name, payParametersListResponses, payParametersList, visible, onType, onGet, onDel, onEdit, id } = props;
+  const columns: ColumnType<any>[] = [
+    {
+      title: '参数代码',
+      key: 'code',
+      dataIndex: 'code'
+    },
+    {
+      title: '参数值',
+      key: 'value',
+      dataIndex: 'value'
+    },
+    {
+      title: '参数描述',
+      key: 'describe',
+      dataIndex: 'describe'
+    },
+    {
+      title: '操作',
+      key: 'options',
+      dataIndex: 'options',
+      render: (text: any, record: any, index: number) => <>
+        <Button type='link'>编辑</Button>
+        <Button type='link' onClick={() => onDel(type, index)}>删除</Button>
+      </>
+    }
+  ]
+
+  const handleOk = (value: any, idx: number) => {
+    onGet(value, idx)
+    setmodalvisible(false);
+  }
+
+
+  return (
+    <>
+      {
+        visible &&
+        <>
+          <div style={{ borderLeft: '2px solid #00B37A', margin: '41px 0 8px', padding: '1px 5px' }}>{name}参数配置</div>
+          <Table
+            columns={columns}
+            dataSource={payParametersListResponses}
+            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>
+          <div style={{ borderLeft: '2px solid #00B37A', margin: '41px 0 8px', padding: '1px 5px' }}>{name}转账到银行卡参数配置</div>
+          {
+            id !== 2 &&
+            <>
+              <Table
+                columns={columns}
+                dataSource={payParametersList}
+                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>
+            </>
+          }
+
+        </>
+      }
+      <SetUpModal
+        onType={onType}
+        type={type}
+        modalvisible={modalvisible}
+        onOK={(value) => handleOk(value, type)}
+        onCancel={() => setmodalvisible(false)}
+      />
+    </>
+  )
+}
+export default PayWayTable;

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

+import React, { useState } from 'react';
+import { Modal, Form, Select , Input } from 'antd';
+import usePayTypeEnum from './usePayTypeEnum';
+const { Option } = Select;
+const { TextArea } = Input;
+
+interface setUpModalParams {
+  type?: number,
+  modalvisible?: boolean,
+  onOK?: Function,
+  onCancel?: Function,
+  onType?: number
+}
+const layout: any = {
+  colon: false,
+  labelCol: { style: { width: '100px' } },
+  labelAlign: "left"
+};
+const SetUpModal:React.FC<setUpModalParams> = (props) => {
+  const [form] = Form.useForm();
+  const { payTypeEnum } = usePayTypeEnum();
+  const { modalvisible, onOK, onCancel, onType} = props;
+  const [option, setOption] = useState<any>({})
+
+  const handleOk = () => {
+    form.validateFields().then(res => {
+      const obj = {
+        code: option.children,
+        value: res.value,
+        describe: res.describe,
+        type: onType,
+        payWayCodeTypeEnum: res.code
+      }
+      onOK(obj)
+      form.resetFields();
+    }).catch(error => {
+      console.log(error)
+    })
+  }
+
+  const handleChange = (e:any, option:any) => {
+    setOption(option)
+  }
+
+  return (
+    <Modal
+      width={576}
+      title='新增参数配置'
+      visible={modalvisible}
+      onOk={handleOk}
+      onCancel={() => onCancel()}
+    >
+      <Form
+        form={form}
+        {...layout}
+      >
+        <Form.Item name='code' label='参数代码' rules={[{ required: true, message: '请选择参数代码' }]}>
+          <Select onChange={handleChange}>
+            {
+              payTypeEnum.map(item => (
+                <Option key={item.value} payWayCodeTypeEnum={item.value} value={item.value}>{item.label}</Option>
+              ))
+            }
+          </Select>
+        </Form.Item>
+        <Form.Item name='value' label='参数值' rules={[{ required: true, message: '请输入参数值' }]}>
+          <Input />
+        </Form.Item>
+        <Form.Item name='describe' label='参数描述'>
+          <TextArea rows={4} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+}
+export default SetUpModal;

src/pages/payandSettle/paySetting/components/usePayTypeEnum.ts

+import { PublicApi } from '@/services/api';
+import React, { useState, useEffect, useRef } from 'react';
+
+
+const usePayTypeEnum = () => {
+  const [payTypeEnum, setPayTypeEnum] = useState<any>([])
+  const ref = useRef(payTypeEnum);
+
+  useEffect(() => {
+    const getPayWayType = async () => {
+      await PublicApi.getPayGetPayWayCodeTypeEnum().then(res => {
+        if(res.code === 1000) {
+          const { data } = res;
+          const payWay: any[] = []
+          data.forEach(v => {
+            payWay.push({
+              label: v.name,
+              value: v.type
+            })
+          })
+          ref.current = payWay
+          setPayTypeEnum(ref.current)
+        }
+      })
+    }
+    getPayWayType();
+  },[])
+  return { payTypeEnum };
+}
+
+export default usePayTypeEnum;

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 } from 'antd';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { PublicApi } from '@/services/api';
-import PayWayRadio from './components/payWayRadio';
-import { set } from 'mobx';
-const { TabPane } = Tabs
-
-const PayWaySetTemplate:React.FC<{}> = () => {
-  const [config, setconfig] = useState<any>([]);
-  const [name, setname] = useState<string>('');
-  const [isPitchOn, setisPitchOn] = useState<number>(0);
-  const [selectId, setselectId] = useState<number>(1);
-  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 = async (id:any) => {
-    const data = [...step,Number(id)];
-    let arr = [...new Set(data)]
-    setStep(arr)
-    const conditions = arr.find(v => v === Number(id))
-    console.log(conditions)
-    if(!conditions) {
-      await PublicApi.getPayMemberQueryPlatformIsStart({id}).then(res => {
-        if(res.code === 1000) {
-          setisPitchOn(res.data.isPitchOn)
-          setname(res.data.way);
-          setselectId(res.data.id)
-        }
-      })
-    }
-  }
-  const handleTabClick = (key:any) => {
-    initPayWayStart(key)
-  }
-  const handleChangeRadio = (e:any) => {
-    setisPitchOn(e.target.value)
-  }
-  useEffect(() => {
-    // 支付配置信息
-    payWayConfigInfo().then((res:any) => {
-      setconfig(res);
-      const id = res[0].id;
-      setStep([...step, id])
-      initPayWayStart(id);
-    })
-  }, [])
-
-  return(
-    <PageHeaderWrapper
-      extra={<Button type='primary'>保存</Button>}
-    >
-      <Card>
-        <Tabs type="card" onTabClick={handleTabClick}>
-          {config.map(item =>
-            <TabPane tab={item.way} key={item.id} forceRender>
-              <PayWayRadio
-                name={name}
-                value={isPitchOn}
-                selectId={selectId}
-                onChange={handleChangeRadio}
-              />
-            </TabPane>
-          )}
-        </Tabs>
-      </Card>
-    </PageHeaderWrapper>
-  )
-};
-export default PayWaySetTemplate;
+/*
+ * @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;