Skip to content

J
jinfa-admin
Commit 5b7edf3f authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

🦄 refactor(平台支付参数配置): 重构

parent ae7f848d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 179 additions and 540 deletions
src/components/DetailLayout/index.tsx
View file @ 5b7edf3f
......@@ -13,6 +13,8 @@ export type tabLink = {
}
export interface IProps {
/** 返回按钮 */
onBack?: boolean,
/** 单号 */
no?: string | React.ReactNode,
/** 详情描述 */
......@@ -29,6 +31,7 @@ export interface IProps {
const PeripheralLayout: React.FC<IProps> = (props: any) => {
const {
onBack,
no,
detail,
tabLink,
......@@ -71,7 +74,7 @@ const PeripheralLayout: React.FC<IProps> = (props: any) => {
<div style={{ flex: 1 }}>
<div className={style.title}>
<div className={style.titleBox}>
<ArrowLeftOutlined className={style.goBack} onClick={() => history.goBack()} />
{!onBack && <ArrowLeftOutlined className={style.goBack} onClick={() => history.goBack()} />}
<span className={style.titleContext}>
{detail ? detail : dataSource.details}
&nbsp;{!hideBreak && '|'}&nbsp;
......
src/global/config/global.d.ts
View file @ 5b7edf3f
......@@ -41,7 +41,7 @@ export interface ShopInfo {
describe: string;
state: number;
url: string;
isDefault: number;
isDefault?: any;
}
export interface OrderMode {
......@@ -62,7 +62,7 @@ export interface SiteInfo {
name: string;
logo: string;
siteUrl: string;
symbol: string;
symbol?: any;
}
export interface Site {
......
src/pages/marketing/detail/index.tsx
View file @ 5b7edf3f
import React, { Fragment, useCallback, useMemo, useState } from 'react';
import { Button } from 'antd';
import { history } from 'umi';
import { Context } from '@/components/detailLayout/components/context';
import PeripheralLayout from '@/components/detailLayout';
import { Context } from '@/components/DetailLayout/components/context';
import PeripheralLayout from '@/components/DetailLayout';
import { _data } from './data';
import ProgressLayout from '@/components/detailLayout/components/progressLayout';
import GeneralLayout from '@/components/detailLayout/components/generalLayout';
import RecordLyout from '@/components/detailLayout/components/recordLyout';
import BasicLayout from '@/components/detailLayout/components/basicLayout';
import ProgressLayout from '@/components/DetailLayout/components/progressLayout';
import GeneralLayout from '@/components/DetailLayout/components/generalLayout';
import RecordLyout from '@/components/DetailLayout/components/recordLyout';
import BasicLayout from '@/components/DetailLayout/components/basicLayout';
import moment from 'moment';
import { useEffect } from 'react';
import { ACTIVITYTYPENAME, GeneralEffect } from './constants';
import ActivityUserLayout from '../components/activityUserLayout';
import DemandLayout from '../components/demandLayout';
import ListLayout from '@/components/detailLayout/components/listLayout';
import ListLayout from '@/components/DetailLayout/components/listLayout';
import { Columns } from './columns';
import { PublicApi } from '@/services/api';
import { isEmpty } from 'lodash';
......
src/pages/ruleSettingManage/paySetting/components/modal.tsx 0 → 100644
View file @ 5b7edf3f
import React, { useCallback, useEffect, useState } from 'react';
import { Modal, Form, Select, Input } from 'antd';
import { PublicApi } from '@/services/api';
const { Option } = Select;
const { TextArea } = Input;
const layout: any = {
colon: false,
labelCol: { style: { width: '100px' } },
labelAlign: "left"
};
interface ModalProps {
/** 支付渠道 */
payChannel: string,
/** 显示隐藏 */
visible?: boolean,
/** 编辑回显数据 */
value?: {
/** 支付参数枚举值 */
code?: number,
/** 支付参数Key名称 */
key?: string,
/** 支付参数内容 */
value?: string,
/** 描述 */
remark?: String
}[],
/** 确定 */
onConfirm: (e) => void,
/** 取消 */
onCancel: () => void,
}
type channel = {
/** 参数枚举值 */
code?: number,
/** 参数Key名称 */
key: string,
}[]
const ModalLayout: React.FC<ModalProps> = ({
payChannel,
visible,
value,
onConfirm,
onCancel,
}) => {
const [form] = Form.useForm();
const [channel, setChannel] = useState<channel>([]);
const handleChannelFind = useCallback(async () => {
await PublicApi.getOrderPlatformPaymentParameterChannelFind({ payChannel }).then(res => {
if (res.code !== 1000) {
return
}
setChannel(res.data);
})
}, [payChannel])
useEffect(() => {
if (payChannel) {
handleChannelFind();
}
}, [payChannel])
const handleCancel = () => {
onCancel()
form.resetFields()
}
const handleConfirm = () => {
form.validateFields().then(res => {
onConfirm({
...res,
key: channel.filter(item => item.code === res.code)[0].key,
})
form.resetFields();
})
}
return (
<Modal
width={576}
title='新增参数配置'
visible={visible}
onOk={handleConfirm}
onCancel={handleCancel}
>
<Form
form={form}
{...layout}
>
<Form.Item name='code' label='参数代码' rules={[{ required: true, message: '请选择参数代码' }]}>
<Select>
{
channel.map((item: any) => (
<Option key={item.code} value={item.code}>{item.key}</Option>
))
}
</Select>
</Form.Item>
<Form.Item name='value' label='参数值' rules={[{ required: true, message: '请输入参数值' }]}>
<Input maxLength={200} />
</Form.Item>
<Form.Item name='remark' label='参数描述'>
<TextArea maxLength={200} rows={4} />
</Form.Item>
</Form>
</Modal>
)
}
export default ModalLayout;
src/pages/ruleSettingManage/paySetting/components/payWayRadio.tsx deleted 100644 → 0
View file @ ae7f848d
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 deleted 100644 → 0
View file @ ae7f848d
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,
payWayId?: number,
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<any>(); // 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, payWayId } = 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: number = 1;
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)
}
setedit({});
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: any) => index}
pagination={false}
/>
<Button style={{ marginBottom: 16, marginTop: 24 }} block icon={<PlusOutlined />} onClick={() => { setmodalvisible(true); setType(id); setmodify(false) }} type='dashed'>新增参数配置</Button>
{
payWayId !== 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: any) => 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); setedit({}) }}
/>
</>
)
}
export default PayWayTable;
src/pages/ruleSettingManage/paySetting/components/setUpModal.tsx deleted 100644 → 0
View file @ ae7f848d
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: number = 1;
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 ? option.children : edit.code,
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.describe
})
}
}, [edit])
return (
<Modal
width={576}
title='新增参数配置'
visible={modalvisible}
onOk={handleOk}
onCancel={() => { onCancel();form.resetFields(); }}
>
<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 maxLength={200} />
</Form.Item>
<Form.Item name='describe' label='参数描述'>
<TextArea maxLength={200} rows={4} />
</Form.Item>
</Form>
</Modal>
)
}
export default SetUpModal;
src/pages/ruleSettingManage/paySetting/components/usePayTypeEnum.ts deleted 100644 → 0
View file @ ae7f848d
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
View file @ 5b7edf3f
.radio-group-box {
.ant-radio-button-wrapper {
width: 80px !important;
text-align: center;
.tabsLayout {
:global {
.ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before {
border-bottom: none;
}
.ant-tabs-tab {
border-radius: 4px;
border: 1px solid #EDEEEF;
margin: 0px 16px 0px 0px;
padding: 6px 16px;
}
.ant-tabs-tab-btn {
height: 18px;
}
.ant-tabs-tab-active {
border-radius: 4px;
border: 1px solid #00B37A;
}
.ant-tabs-ink-bar {
display: none;
}
.ant-radio-group {
.ant-radio-button-wrapper {
width: 80px !important;
text-align: center;
}
}
.ant-space-item {
display: flex;
align-items: center;
}
}
.anchor {
color: #909399;
font-size: 14px;
position: relative;
padding-left: 6px;
margin-bottom: 16px;
&::after {
content: '';
height: 14px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-left: 2px solid @main-color;
transform: scaleY(1);
opacity: 1;
transition: transform .15s cubic-bezier(.645,.045,.355,1),opacity .15s cubic-bezier(.645,.045,.355,1);
}
}
}
src/pages/ruleSettingManage/paySetting/settingIndex.tsx deleted 100644 → 0
View file @ ae7f848d
/*
* @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 { history } from 'umi';
import { Button, Card, Tabs, Space, Input, InputNumber, message } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { PublicApi } from '@/services/api';
import PayWayRadio from './components/payWayRadio';
import PayWayTable from './components/payWayTable';
const { TabPane } = Tabs
const PayWaySetTemplate: React.FC<{}> = () => {
const [config, setconfig] = useState<any>([]);
const [payItem, setPayItem] = useState<any>([]);
// const [step, setStep] = useState<Array<number>>([]);
const [obj, setObj] = useState<any>({});
const payWayConfigInfo = () => {
// 支付配置信息
return new Promise(resolve => {
PublicApi.getPayQueryPlatformDetails().then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
})
}
useEffect(() => {
// 支付配置信息
payWayConfigInfo().then((res: any) => {
const arr: any[] = [];
console.log(res)
res.forEach((item: any) => {
arr.push({
id: item.id,
way: item.way,
payWayId: item.payWayId,
isPitchOn: item.isPitchOn ? item.isPitchOn : 0,
payType: item.payType,
payParametersList: item.payParametersList ? item.payParametersList : [],
payParametersAddListRequests: item.payParametersListResponses ? item.payParametersListResponses : []
})
})
setconfig([...res]);
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) => {
console.log(value, type)
const data = [...payItem];
if (type === 2) {
data[idx].payParametersList = [...data[idx].payParametersList, value]
} else {
data[idx].payParametersAddListRequests = [...data[idx].payParametersAddListRequests, value]
}
setPayItem(data);
}
/**删除 */
const onDel = (value: any, index: number, idx: number) => {
console.log(value, index, idx, 10086)
const data = [...payItem];
if (Number(value) === 2) {
data[idx].payParametersList.splice(index, 1);
data[idx].payParametersList = [...data[idx].payParametersList]
} else {
data[idx].payParametersAddListRequests.splice(index, 1);
data[idx].payParametersAddListRequests = [...data[idx].payParametersAddListRequests]
}
setPayItem([...data]);
}
/**编辑 */
const onEdit = (value: any, type: number, index: number, idx: number) => {
console.log(value, type, index, idx)
const data = [...payItem];
if (type === 2) {
data[idx].payParametersList[index] = { ...value };
data[idx].payParametersList = [...data[idx].payParametersList]
} else {
data[idx].payParametersAddListRequests[index] = { ...value };
data[idx].payParametersAddListRequests = [...data[idx].payParametersAddListRequests]
}
console.log(data, 10086)
setPayItem(data);
}
/**保存更新 */
const onHnadleSubmit = () => {
let conditions = false;
let wayName = '';
try {
payItem.forEach(item => {
if (item.payWayId === 2 && item.isPitchOn === 1) {
console.log(1)
if (item.payParametersAddListRequests.length > 0) {
conditions = true
} else {
conditions = false
wayName = `${item.way}缺少支付参数配置`
throw new Error
}
} else if (item.payWayId === 1 && item.isPitchOn === 1) {
if (item.payParametersAddListRequests.length > 0 && item.payParametersList.length > 0) {
conditions = true
} else {
conditions = false
wayName = `${item.way}缺少支付参数配置`
throw new Error
}
} else if (item.payWayId === 6 && item.isPitchOn === 1) {
if (item.payParametersAddListRequests.length > 0) {
const data = item.payParametersAddListRequests[0]
if (data.code && data.value && data.describe) {
conditions = true
} else {
conditions = false
wayName = `请配置${item.way}的参数`
throw new Error
}
}
} else {
conditions = true
}
})
} catch {
message.error(wayName)
}
if (conditions) {
PublicApi.postPayCollectionParametersAdd({
platformPayWays: payItem
}).then(res => {
if (res.code === 1000) {
history.push('/ruleSettingManager/paySetting')
}
})
}
}
/** */
const handleBlur = (e, name, idx) => {
const data = [...payItem]
const payParametersAddListRequests = data[idx].payParametersAddListRequests;
if (payParametersAddListRequests.length === 0) {
payParametersAddListRequests.push({ code: '', value: '', describe: '' })
}
payParametersAddListRequests.map(item => {
for (let key in item) {
if (key === name) {
if (name === 'value') {
item[key] = e
} else {
item[key] = e.target.value
}
} else {
if (name === 'value') {
item[name] = e
} else {
item[name] = e.target.value
}
}
}
item.type = 6;
})
data[idx].payParametersAddListRequests = [...payParametersAddListRequests]
console.log(payParametersAddListRequests, 10086)
setPayItem(data)
}
return (
<PageHeaderWrapper
extra={<Button type='primary' onClick={onHnadleSubmit}>保存</Button>}
>
<Card>
<Tabs type="card">
{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].payWayId === 1 || payItem[idx].payWayId === 2) &&
<PayWayTable
id={payItem[idx].id}
payWayId={payItem[idx].payWayId}
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={(value, type, index) => onEdit(value, type, index, idx)}
/>
}
{
(payItem[idx].payWayId === 6 && !!payItem[idx].isPitchOn) &&
<div style={{ marginTop: 42 }}>
<Space direction="horizontal" size={16}>
初始申请额度不超过
<Input onChange={(e) => handleBlur(e, 'code', idx)} value={payItem[idx].payParametersAddListRequests.length > 0 ? payItem[idx].payParametersAddListRequests[0].code : undefined} addonBefore="￥" />
允许满<InputNumber min={1} onChange={(e) => handleBlur(e, 'value', idx)} value={payItem[idx].payParametersAddListRequests.length > 0 ? payItem[idx].payParametersAddListRequests[0].value : undefined} />
天后申请上调<Input onChange={(e) => handleBlur(e, 'describe', idx)} value={payItem[idx].payParametersAddListRequests.length > 0 ? payItem[idx].payParametersAddListRequests[0].describe : undefined} addonAfter="%" />
</Space>
</div>
}
</>
}
</>
</TabPane>
)}
</Tabs>
</Card>
</PageHeaderWrapper>
)
};
export default PayWaySetTemplate;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment