Skip to content

J
jinfa-platform
Commit c47949d6 authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

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

parent 3555a3d1
Show whitespace changes
Inline Side-by-side
Showing with 840 additions and 205 deletions
config/routes/index.ts
View file @ c47949d6
......@@ -10,7 +10,7 @@
// import ChannelRoute from './channelRoute' // 渠道能力路由
import TranactionRoute from './tranactionRoute' // 交易能力路由
// import LogisticsRoute from './logisticsRoutes' // 物流能力路由
// import PayandSettleRoute from './payandSettle' //支付与结算
import PayandSettleRoute from './payandSettle' //支付与结算
// import AuthConfigRoute from './authConfigRoute'
// import AfterService from './afterServiceRoute' // 售后
// import HandlingRoute from './handlingRoute'; // 加工能力
......@@ -77,6 +77,7 @@ const memberCenterRoute = {
// AuthConfigRoute,
// MemberRoute,
// HandlingRoute,
PayandSettleRoute,
marketingRoute,
...asyncRoutes,
{
......
config/routes/payandSettle.ts
View file @ c47949d6
......@@ -21,7 +21,8 @@ const payandSettleRoute: RouterChild = {
{
path:'/memberCenter/payandSettle/paySetting/payParamsSetting',
name:'payParamsSetting',
component:'@/pages/payandSettle/paySetting'
component:'@/pages/payandSettle/paySetting',
noMargin: true,
},
]
},
......
src/pages/payandSettle/paySetting/components/modal.tsx 0 → 100644
View file @ c47949d6
import React, { useCallback, useEffect, useState } from 'react';
import { Modal, Form, Select, Input } from 'antd';
import { PublicApi } from '@/services/api';
import { isEmpty } from 'lodash';
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.getOrderMemberPaymentParameterChannelFind({ 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 => Number(item.code) === Number(res.code))[0].key,
})
form.resetFields();
})
}
useEffect(() => {
if (!isEmpty(value)) {
console.log(value)
form.setFieldsValue({
...value
})
}
}, [value])
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 => (
<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/payandSettle/paySetting/data.ts 0 → 100644
View file @ c47949d6
export const res = {
"code": 1000,
"message": "操作成功",
"data": [
{
"payType": 1,
"payTypeName": "线上支付",
"channels": [
{
"payChannel": 1,
"payChannelName": "支付宝",
"parameters": []
},
{
"payChannel": 2,
"payChannelName": "微信",
"parameters": []
},
{
"payChannel": 3,
"payChannelName": "银联",
"parameters": []
},
{
"payChannel": 4,
"payChannelName": "余额支付",
"parameters": []
}
],
"payChannels": [
1
]
},
{
"payType": 2,
"payTypeName": "线下支付",
"channels": [
{
"payChannel": 5,
"payChannelName": "线下支付线上确认",
"parameters": []
}
],
"payChannels": [
5
]
}
],
"time": 1629166786635
}
src/pages/payandSettle/paySetting/index.less 0 → 100644
View file @ c47949d6
.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/payandSettle/paySetting/index.tsx
View file @ c47949d6
/*
* @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 React, { useEffect, useState, Fragment, useCallback } from 'react';
import PeripheralLayout from '@/pages/transaction/components/detailLayout';
import { ColumnType } from 'antd/lib/table/interface';
import { Tabs, Form, Button, Radio, Table, Space, Image, Popconfirm } from 'antd';
import { PublicApi } from '@/services/api';
import PayWayRadio from './components/payWayRadio';
import PayWayTable from './components/payWayTable';
import Card from '@/pages/transaction/components/Card';
import style from './index.less';
import { PlusOutlined, SaveOutlined } from '@ant-design/icons';
import ModalLayout from './components/modal';
import { isEmpty } from 'lodash';
import { res } from './data';
import alipay from '@/assets/icons/alipay_icon.png';
import wechat from '@/assets/icons/wechat_icon.png';
import unionpay from '@/assets/icons/unionpay_icon.png';
import balance from '@/assets/icons/balance_icon.png';
const PIC_MAP = {
1: alipay,
2: wechat,
3: unionpay,
4: balance,
};
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.getPayMemberPayConfig().then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
})
type TabLink = {
id: string,
title: string
}[]
const layout: any = {
colon: false,
labelCol: { style: { width: "144px" } },
wrapperCol: { span: 9 },
labelAlign: "left"
};
type parameters = {
/**支付参数枚举值 */
code?: number,
/** 支付参数 */
value?: string,
/** remark */
remark?: string
}
type channels = {
payType?: number,
payChannel?: number,
/** 支付参数列表 */
parameters?: parameters[]
}
type FindProps = {
/** 支付类型 */
payType?: number,
/** 支付渠道及参数设置列表 */
channels?: channels[]
}
const PaySettingLayout = () => {
const [form] = Form.useForm();
const [visible, setVisible] = useState<boolean>(false);
const [tabLink, setTabLink] = useState<TabLink>([])
const [parameterFind, setParameterFind] = useState<any[]>([]);
const [payChannel, setPayChannel] = useState<string>('');
const [parameters, setParameters] = useState<FindProps[]>([]); // 提交的数据
const [channel, setChannel] = useState<number[]>([]); // 已勾选配置的支付渠道枚举值
const [value, setValue] = useState<parameters>({});
const [isEdit, setIsEdit] = useState<boolean>(false);
const [editIndex, setEditIndex] = useState<number>(0);
const columns: ColumnType<any>[] = [
{
title: '参数代码',
key: 'key',
dataIndex: 'key'
},
{
title: '参数值',
key: 'value',
dataIndex: 'value'
},
{
title: '参数描述',
key: 'remark',
dataIndex: 'remark'
},
{
title: '操作',
key: 'options',
dataIndex: 'options',
render: (_: any, record: any, index: number) => <>
<Button type='link' onClick={() => handleEdit(record, index)}>编辑</Button>
<Popconfirm
title="确定要执行这个操作?"
onConfirm={() => handleDelete(index)}
okText="是"
cancelText="否"
>
<Button type='link'>删除</Button>
</Popconfirm>
</>
}
]
useEffect(() => {
// 支付配置信息
payWayConfigInfo().then((res: any) => {
const arr: any[] = [];
console.log(res)
res.forEach((item: any) => {
arr.push({
id: item.id,
way: item.way,
isPitchOn: item.isPitchOn ? item.isPitchOn : 0,
payType: item.payType,
payParametersList: item.payParametersList ? item.payParametersList : [],
payParametersAddListRequests: item.payParametersListResponses ? item.payParametersListResponses : []
PublicApi.getOrderMemberPaymentParameterFind().then(res => {
if (res.code !== 1000) {
return
}
const { data } = res
setTabLink(data.map(item => {
return {
id: `tabLink_${item.payType}`,
title: item.payTypeName
}
}))
/** 组合数据 */
const params: FindProps[] = []
const _channel: number[] = []
data.forEach(item => {
const _obj: FindProps = {}
_obj.payType = item.payType;
_obj.channels = item.channels.map(_item => {
return {
payChannel: _item.payChannel,
parameters: _item.parameters
}
})
if (!isEmpty(item.payChannels)) {
item.payChannels.forEach(_item => {
_channel.push(_item)
form.setFieldsValue({
[`payChannel_${_item}`]: _item
})
setconfig([...res]);
setPayItem([...arr]);
})
}, [])
const onChangeRaido = (e: any, index: number) => {
const data = [...payItem];
payItem[index].isPitchOn = e.target.value;
setPayItem(data);
}
params.push(_obj);
})
setChannel(_channel)
setParameters(params);
setParameterFind(data);
})
}, [])
const onGet = (value: any, type: number, idx: number) => {
const data = [...payItem];
if (type === 2) {
data[idx].payParametersList = [...data[idx].payParametersList, value]
} else {
data[idx].payParametersAddListRequests = [...data[idx].payParametersAddListRequests, value]
}
setPayItem(data);
const handleSubmit = async () => {
const params: FindProps[] = []
parameters.forEach((item: any) => {
const _obj: FindProps = {}
const _channel = item.channels.filter(_item => channel.indexOf(_item.payChannel) !== -1);
if (!isEmpty(_channel)) {
_obj.payType = item.payType;
_obj.channels = _channel.map(_item => {
if (!isEmpty(_item.parameters)) {
return {
payChannel: _item.payChannel,
parameters: _item.parameters
}
/**删除 */
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]
return {
payChannel: _item.payChannel,
}
setPayItem([...data]);
}
/**编辑 */
const onEdit = (value: any, type: number, index: number, idx: number) => {
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]
}
setPayItem(data);
}
/**保存更新 */
const onHnadleSubmit = () => {
let conditions = false;
let wayName = '';
try {
payItem.forEach(item => {
if (item.id === 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.id === 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.id === 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
})
}
if (!isEmpty(_obj)) {
params.push(_obj)
}
} else {
conditions = true
})
await PublicApi.postOrderMemberPaymentParameterCreate({ parameters: params as any }).then(res => {
if (res.code !== 1000) {
return
}
})
} catch {
message.error(wayName)
}
if (conditions) {
PublicApi.postPayMemberQueryPlatformUpdate({
platformPayWays: payItem
}).then(res => {
if (res.code === 1000) {
history.push('/memberCenter/payandSettle/paySetting/payParamsSetting')
/** 点击radio的事件 */
const handleRadioChang = (e: any, _payType_: number) => {
const { value } = e.target;
if (typeof value === 'string') {
setChannel(channel.filter(item => item !== Number(value.split('_')[1])))
} else {
setChannel([...channel, value])
}
})
}
const toggle = (id: string) => {
setPayChannel(id);
setVisible(true);
}
/** */
const handleBlur = (e, name, idx) => {
console.log(e)
const data = [...payItem]
const payParametersAddListRequests = data[idx].payParametersAddListRequests;
if(payParametersAddListRequests.length === 0) {
payParametersAddListRequests.push({code: '', value: '', describe: ''})
const handleCancel = () => {
setVisible(false);
}
payParametersAddListRequests.map(item => {
for(let key in item) {
if(key === name) {
if(name === 'value') {
item[key] = e
/** 新增支付参数 */
const handleConfirm = (format) => {
const _parameters = [...parameters];
_parameters.forEach((item: any) => {
const _channels = [...item.channels]
_channels.forEach(_item => {
if (_item.payChannel === Number(payChannel)) {
if (isEdit) {
_item.parameters[editIndex] = format;
} else {
item[key] = e.target.value
_item.parameters.push(format)
}
}else {
if(name === 'value') {
item[name] = e
} else {
item[name] = e.target.value
}
})
})
setIsEdit(false);
setParameters(_parameters);
setVisible(false);
}
/** 删除支付参数 */
const handleDelete = (index) => {
const _parameters = [...parameters];
_parameters.forEach((item: any) => {
const _channels = [...item.channels]
_channels.forEach(_item => {
if (_item.payChannel === Number(payChannel)) {
_item.parameters.splice(index, 1)
}
item.type = 6;
})
data[idx].payParametersAddListRequests = [...payParametersAddListRequests]
console.log(payParametersAddListRequests, 10086)
setPayItem(data)
})
setParameters(_parameters);
}
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].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={(value, type, index) => onEdit(value, type, index, idx)}
/>
/** 编辑支付参数 */
const handleEdit = (record, index) => {
setValue(record);
setEditIndex(index);
setIsEdit(true)
setVisible(true);
}
{
(payItem[idx].id === 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>
const dataSource = (payType, _payChannel) => {
let _parameters: any = [];
parameters.forEach(item => {
if (item.payType === payType) {
_parameters = item.channels.filter(_item => _item.payChannel === _payChannel)[0].parameters
}
})
return [..._parameters]
}
</>
return (
<PeripheralLayout
onBack
hideBreak
detail="会员支付参数配置"
tabLink={tabLink}
effect={
<Button
type="primary"
icon={<SaveOutlined />}
onClick={handleSubmit}
>
保存
</Button>
}
</>
</TabPane>
components={
<Fragment>
<Form {...layout} form={form}>
{parameterFind.map((item, index) => (
<Card
id={`tabLink_${item.payType}`}
title={item.payTypeName}
key={`tabLink_${item.payType}`}
>
<div className={style.tabsLayout}>
{item.payType === 1 && (
<Tabs>
{item.channels.map((_item, _index) => (
<TabPane tab={<Space><Image preview={false} width={16} height={16} src={PIC_MAP[_item.payChannel]} />{_item.payChannelName}</Space>} key={_item.payChannel} forceRender>
<Form.Item
label={`是否开启${_item.payChannelName}`}
name={`payChannel_${_item.payChannel}`}
initialValue={`_${_item.payChannel}`}
>
<Radio.Group
size="small"
buttonStyle="solid"
onChange={(e) => handleRadioChang(e, item.payType)}
>
<Radio.Button value={_item.payChannel}>是</Radio.Button>
<Radio.Button value={`_${_item.payChannel}`}>否</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) => prevValues[`payChannel_${_item.payChannel}`] !== currentValues[`payChannel_${_item.payChannel}`]}
>
{({ getFieldValue }) => (
getFieldValue(`payChannel_${_item.payChannel}`) === 1 ||
getFieldValue(`payChannel_${_item.payChannel}`) === 2
) && (
<Fragment>
<div className={style.anchor}>{`${_item.payChannelName}支付参数配置`}</div>
<Form.Item
wrapperCol={{ span: 24 }}
name={[`payChannel_${_item.payChannel}`, 'parameters']}
>
<Table
rowKey={(_record: any, index: any) => `table${index + 1}`}
columns={columns}
dataSource={dataSource(item.payType, _item.payChannel)}
pagination={false}
/>
<Button
type='dashed'
block
icon={<PlusOutlined />}
style={{ marginBottom: '24px' }}
onClick={() => toggle(_item.payChannel)}
>
新增参数配置
</Button>
</Form.Item>
</Fragment>
)}
</Form.Item>
</TabPane>
))}
</Tabs>
)}
{item.payType !== 1 && (
<Fragment>
{item.channels.map((_item, _index) => (
<Fragment key={_item.payChannel}>
<Form.Item
label={_item.payChannelName}
name={`payChannel_${_item.payChannel}`}
initialValue={`_${_item.payChannel}`}
>
<Radio.Group
size="small"
buttonStyle="solid"
onChange={(e) => handleRadioChang(e, item.payType)}
>
<Radio.Button value={_item.payChannel}>是</Radio.Button>
<Radio.Button value={`_${_item.payChannel}`}>否</Radio.Button>
</Radio.Group>
</Form.Item>
</Fragment>
))}
</Fragment>
)}
</div>
</Card>
</PageHeaderWrapper>
))}
</Form>
<ModalLayout
value={value}
visible={visible}
payChannel={payChannel}
onConfirm={handleConfirm}
onCancel={handleCancel}
/>
</Fragment>
}
/>
)
};
export default PayWaySetTemplate;
}
export default PaySettingLayout;
src/pages/payandSettle/paySetting/index2.tsx 0 → 100644
View file @ c47949d6
/*
* @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.getPayMemberPayConfig().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,
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) => {
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) => {
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]
}
setPayItem(data);
}
/**保存更新 */
const onHnadleSubmit = () => {
let conditions = false;
let wayName = '';
try {
payItem.forEach(item => {
if (item.id === 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.id === 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.id === 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.postPayMemberQueryPlatformUpdate({
platformPayWays: payItem
}).then(res => {
if (res.code === 1000) {
history.push('/memberCenter/payandSettle/paySetting/payParamsSetting')
}
})
}
}
/** */
const handleBlur = (e, name, idx) => {
console.log(e)
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].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={(value, type, index) => onEdit(value, type, index, idx)}
/>
}
{
(payItem[idx].id === 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;
src/pages/transaction/components/detailLayout/index.tsx
View file @ c47949d6
......@@ -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/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/columns.tsx
View file @ c47949d6
......@@ -186,7 +186,8 @@ export const Columns = (int) => {
折扣 <QuestionCircleOutlined />
</Tooltip>,
key: 'discount',
dataIndex: 'discount'
dataIndex: 'discount',
editable: true,
},
{
title: '活动价格',
......
src/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/productListLayout/EditableCell.tsx
View file @ c47949d6
......@@ -27,10 +27,17 @@ const EditableCell = ({
const rate = async () => {
try {
const values = await form.getFieldValue(dataIndex);
if (activities && Number(activities) !== 11) {
record.activityPrice = sumTotal(record.price, values)
let values = null;
switch (Number(activities)) {
case 2:
values = await form.getFieldValue('plummetPrice');
record.activityPrice = sumTotal(record.price, values);
break;
case 3:
values = await form.getFieldValue('discount');
record.activityPrice = Number(record.price) * (Number(values))/100
}
console.log(values)
handleSave({ ...record, ...values });
} catch (errInfo) { }
}
......@@ -129,6 +136,33 @@ const EditableCell = ({
</Form.Item>
)
break;
case 'discount':
childNode = (
<Form.Item
style={{
margin: 0,
}}
name={dataIndex}
initialValue={record[dataIndex]}
rules={[
{
required: true,
validator: (_rule, value) => {
const pattern = /^(\-)?\d+(\.\d{1,2})?$/;
if (!value) {
return Promise.reject(new Error('必填项'));
}
if (!pattern.test(value)) {
return Promise.reject(new Error('折扣必须大于0'));
}
return Promise.resolve();
},
},
]}
>
<Input style={{ width: '112px' }} addonBefore="折"onPressEnter={rate} onBlur={rate} />
</Form.Item>
)
}
}
......
src/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/productListLayout/index.tsx
View file @ c47949d6
......@@ -46,7 +46,7 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
};
const handleSave = (row) => {
const newData = [...dataSource];
const index = newData.findIndex((item) => row.productId === item.productId);
const index = newData.findIndex((item) => row.id === item.id);
const item = newData[index];
newData.splice(index, 1, { ...item, ...row });
getDataSource(newData)
......@@ -54,8 +54,8 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
};
const handleDelete = (key) => {
const newData = [...dataSource];
getDataSource(newData.filter(item => item.productId !== key))
setDataSource(newData.filter(item => item.productId !== key))
getDataSource(newData.filter(item => item.id !== key))
setDataSource(newData.filter(item => item.id !== key))
};
const columns = useMemo(() => {
return Columns(type || 1)
......@@ -73,9 +73,9 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
/** 选择活动商品columns */
const TableModalColumns: ColumnType<any>[] = [
{
title: '商品ID',
key: 'productId',
dataIndex: 'productId',
title: 'SKUID',
key: 'id',
dataIndex: 'id',
},
{
title: '商品名称',
......@@ -193,7 +193,7 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
>
<Button style={{ marginBottom: '16px' }} block type="dashed" icon={<PlusOutlined />} onClick={() => toggle(true)}>选择活动商品</Button>
<Table
rowKey={(record) => record.productId}
rowKey={(record) => record.id}
components={components}
columns={columns.map((col: any) => {
if (!col.editable && !col.operation) {
......@@ -227,9 +227,9 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
columns={TableModalColumns}
mode="checkbox"
tableProps={{
rowKey: 'productId',
rowKey: 'id',
}}
customKey="productId"
customKey="id"
onClose={() => toggle(false)}
onOk={handleOk}
effects={($, actions) => {
......
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