重构会员支付参数配置

src/pages/ruleSettingManage/paySetting/components/payWayRadio.tsx

+import React, { useState, useEffect } from 'react';
+import { Space, Radio, Form } from 'antd';
+import "../index.less";
+
+interface params {
+  name: string,
+  value: number,
+  selectId: number,
+  onChange: Function
+}
+
+const PayWayRadio: React.FC<params> = (props) => {
+  const { value, selectId, onChange, name } = props;
+  const [form] = Form.useForm();
+  useEffect(() => {
+    form.resetFields()
+  }, [value])
+
+  const options = [{ label: '是', value: 1 }, { label: '否', value: 0 }]
+  return (
+    <Space size={49}>
+      <span>是否开启{name}</span>
+      <Form form={form}>
+        <Form.Item
+          name={`radio-${selectId}`}
+          noStyle
+          initialValue={value}
+        >
+          <Radio.Group
+            options={options}
+            className='radio-group-box'
+            size="small"
+            buttonStyle="solid"
+            optionType="button"
+            onChange={(e) => onChange(e)}
+          />
+        </Form.Item>
+      </Form>
+
+    </Space>
+  )
+}
+export default PayWayRadio;

src/pages/ruleSettingManage/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.
+  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>[] = [
+    {
+      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' 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) => {
+    let idType = null;
+    switch (type) {
+      case 1:
+        idType = 1
+        break;
+      case 2:
+        idType = 3
+        break;
+      case 3:
+        idType = 2
+        break;
+    }
+    if (!modify) {
+      onGet(value, idType)
+    } else {
+      onEdit(value, idType, modifyIndex)
+    }
+
+    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(id); setmodify(false) }} type='dashed'>新增参数配置</Button>
+
+          {
+            id !== 2 &&
+            <>
+              <div style={{ borderLeft: '2px solid #00B37A', margin: '41px 0 8px', padding: '1px 5px' }}>{name}转账到银行卡参数配置</div>
+              <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(3); setmodify(false) }} type='dashed'>新增参数配置</Button>
+            </>
+          }
+
+        </>
+      }
+      <SetUpModal
+        onType={onType}
+        type={type}
+        modalvisible={modalvisible}
+        edit={edit}
+        onOK={(value) => handleOk(value, type)}
+        onCancel={() => setmodalvisible(false)}
+      />
+    </>
+  )
+}
+export default PayWayTable;

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

+import React, { useEffect, 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,
+  edit?: any
+}
+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, type, edit } = props;
+  const [option, setOption] = useState<any>({})
+
+  const handleOk = () => {
+    form.validateFields().then(res => {
+      console.log(type)
+      let idType = null;
+      switch (type) {
+        case 1:
+          idType = 1
+          break;
+        case 2:
+          idType = 3
+          break;
+        case 3:
+          idType = 2
+          break;
+      }
+      const obj = {
+        id: edit.id ? edit.id : undefined,
+        code: option.children,
+        value: res.value,
+        describe: res.describe,
+        type: idType,
+        payWayCodeTypeEnum: res.code
+      }
+      onOK(obj)
+      form.resetFields();
+    }).catch(error => {
+      console.log(error)
+    })
+  }
+
+  const handleChange = (e: any, option: any) => {
+    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}
+      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/ruleSettingManage/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/ruleSettingManage/paySetting/index.less

+.radio-group-box {
+  .ant-radio-button-wrapper {
+    width: 80px !important;
+    text-align: center;
+  }
+}

src/pages/ruleSettingManage/paySetting/index.tsx

@@ -39,7 +39,7 @@ const PaySetting: React.FC<{}> = () => {
   }
   const handleModalOK = (obj:any) => {
     console.log('选项卡:',exportId(),'弹窗id:',type)
-   
+
     setvisible(false)
     currentTab = !exportId() ? 1: exportId()
     console.log('选项卡:',exportId(),'数据',obj)
@@ -62,7 +62,7 @@ const PaySetting: React.FC<{}> = () => {
 
     //微信
     if(type == 3){
-      
+
       let list:any = []
       list.push(obj)
       let old = payActions.getFieldValue("payParametersListResponses2")
@@ -137,7 +137,7 @@ const PaySetting: React.FC<{}> = () => {
       list = [...payParametersListResponses]
     }
     console.log(list)
-    // return 
+    // return
     PublicApi.postPayCollectionParametersAdd({
       payWayId: currentTab,
       isPitchOn: values.isPitchOn,
@@ -183,4 +183,4 @@ const PaySetting: React.FC<{}> = () => {
     </PageHeaderWrapper>
   )
 }
-export default PaySetting
\ No newline at end of file
+export default PaySetting

src/pages/ruleSettingManage/payStrategy/index.tsx

@@ -18,11 +18,15 @@ import {FORM_FILTER_PATH} from '@/formSchema/const'
 import  {SaveOutlined,PlusOutlined} from '@ant-design/icons'
 import { strategySearch} from '../schema'
 import { PublicApi} from '@/services/api'
+import moment from 'moment';
 const formActions = createFormActions()
 interface searchType {
   name: string
 }
 const List: React.FC<{}> = () => {
+  const format = (text) => {
+    return <>{moment(text).format("YYYY-MM-DD HH:mm:ss")}</>
+  }
   const ref = useRef<any>({})
   const [searchParams, setsearchParams] = useState<searchType>({
     name:''
@@ -49,6 +53,7 @@ const List: React.FC<{}> = () => {
       title:'操作时间',
       dataIndex:'operationTime',
       key:'operationTime',
+      render: (text: any, record: any) => (format(text)),
       align:'center'
     },
     {
@@ -88,7 +93,7 @@ const List: React.FC<{}> = () => {
         )
       }
     }
-    
+
   ]
   const handleModify = async (record: any) => {
     await PublicApi.postPayPaymentPolicyUpdateState({
@@ -127,7 +132,7 @@ const List: React.FC<{}> = () => {
           layouts:{
             order:2
           },
-          children: 
+          children:
           <Button
             type="primary"
             onClick={handleToAdd}
@@ -160,4 +165,4 @@ const List: React.FC<{}> = () => {
     </Card>
   )
 }
-export default List
\ No newline at end of file
+export default List