Commit c47949d6 authored by 前端-黄佳鑫's avatar 前端-黄佳鑫

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

parent 3555a3d1
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
// import ChannelRoute from './channelRoute' // 渠道能力路由 // import ChannelRoute from './channelRoute' // 渠道能力路由
import TranactionRoute from './tranactionRoute' // 交易能力路由 import TranactionRoute from './tranactionRoute' // 交易能力路由
// import LogisticsRoute from './logisticsRoutes' // 物流能力路由 // import LogisticsRoute from './logisticsRoutes' // 物流能力路由
// import PayandSettleRoute from './payandSettle' //支付与结算 import PayandSettleRoute from './payandSettle' //支付与结算
// import AuthConfigRoute from './authConfigRoute' // import AuthConfigRoute from './authConfigRoute'
// import AfterService from './afterServiceRoute' // 售后 // import AfterService from './afterServiceRoute' // 售后
// import HandlingRoute from './handlingRoute'; // 加工能力 // import HandlingRoute from './handlingRoute'; // 加工能力
...@@ -77,6 +77,7 @@ const memberCenterRoute = { ...@@ -77,6 +77,7 @@ const memberCenterRoute = {
// AuthConfigRoute, // AuthConfigRoute,
// MemberRoute, // MemberRoute,
// HandlingRoute, // HandlingRoute,
PayandSettleRoute,
marketingRoute, marketingRoute,
...asyncRoutes, ...asyncRoutes,
{ {
......
...@@ -21,7 +21,8 @@ const payandSettleRoute: RouterChild = { ...@@ -21,7 +21,8 @@ const payandSettleRoute: RouterChild = {
{ {
path:'/memberCenter/payandSettle/paySetting/payParamsSetting', path:'/memberCenter/payandSettle/paySetting/payParamsSetting',
name:'payParamsSetting', name:'payParamsSetting',
component:'@/pages/payandSettle/paySetting' component:'@/pages/payandSettle/paySetting',
noMargin: true,
}, },
] ]
}, },
......
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;
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
}
.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);
}
}
}
This diff is collapsed.
/*
* @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;
...@@ -13,6 +13,8 @@ export type tabLink = { ...@@ -13,6 +13,8 @@ export type tabLink = {
} }
export interface IProps { export interface IProps {
/** 返回按钮 */
onBack?: boolean,
/** 单号 */ /** 单号 */
no?: string | React.ReactNode, no?: string | React.ReactNode,
/** 详情描述 */ /** 详情描述 */
...@@ -29,6 +31,7 @@ export interface IProps { ...@@ -29,6 +31,7 @@ export interface IProps {
const PeripheralLayout: React.FC<IProps> = (props: any) => { const PeripheralLayout: React.FC<IProps> = (props: any) => {
const { const {
onBack,
no, no,
detail, detail,
tabLink, tabLink,
...@@ -71,7 +74,7 @@ const PeripheralLayout: React.FC<IProps> = (props: any) => { ...@@ -71,7 +74,7 @@ const PeripheralLayout: React.FC<IProps> = (props: any) => {
<div style={{ flex: 1 }}> <div style={{ flex: 1 }}>
<div className={style.title}> <div className={style.title}>
<div className={style.titleBox}> <div className={style.titleBox}>
<ArrowLeftOutlined className={style.goBack} onClick={() => history.goBack()} /> {!onBack && <ArrowLeftOutlined className={style.goBack} onClick={() => history.goBack()} />}
<span className={style.titleContext}> <span className={style.titleContext}>
{detail ? detail : dataSource.details} {detail ? detail : dataSource.details}
&nbsp;{!hideBreak && '|'}&nbsp; &nbsp;{!hideBreak && '|'}&nbsp;
......
...@@ -186,7 +186,8 @@ export const Columns = (int) => { ...@@ -186,7 +186,8 @@ export const Columns = (int) => {
折扣 <QuestionCircleOutlined /> 折扣 <QuestionCircleOutlined />
</Tooltip>, </Tooltip>,
key: 'discount', key: 'discount',
dataIndex: 'discount' dataIndex: 'discount',
editable: true,
}, },
{ {
title: '活动价格', title: '活动价格',
......
...@@ -27,10 +27,17 @@ const EditableCell = ({ ...@@ -27,10 +27,17 @@ const EditableCell = ({
const rate = async () => { const rate = async () => {
try { try {
const values = await form.getFieldValue(dataIndex); let values = null;
if (activities && Number(activities) !== 11) { switch (Number(activities)) {
record.activityPrice = sumTotal(record.price, values) 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 }); handleSave({ ...record, ...values });
} catch (errInfo) { } } catch (errInfo) { }
} }
...@@ -129,7 +136,34 @@ const EditableCell = ({ ...@@ -129,7 +136,34 @@ const EditableCell = ({
</Form.Item> </Form.Item>
) )
break; 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>
)
}
} }
/** 操作按钮 */ /** 操作按钮 */
......
...@@ -46,7 +46,7 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => { ...@@ -46,7 +46,7 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
}; };
const handleSave = (row) => { const handleSave = (row) => {
const newData = [...dataSource]; 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]; const item = newData[index];
newData.splice(index, 1, { ...item, ...row }); newData.splice(index, 1, { ...item, ...row });
getDataSource(newData) getDataSource(newData)
...@@ -54,8 +54,8 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => { ...@@ -54,8 +54,8 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
}; };
const handleDelete = (key) => { const handleDelete = (key) => {
const newData = [...dataSource]; const newData = [...dataSource];
getDataSource(newData.filter(item => item.productId !== key)) getDataSource(newData.filter(item => item.id !== key))
setDataSource(newData.filter(item => item.productId !== key)) setDataSource(newData.filter(item => item.id !== key))
}; };
const columns = useMemo(() => { const columns = useMemo(() => {
return Columns(type || 1) return Columns(type || 1)
...@@ -73,9 +73,9 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => { ...@@ -73,9 +73,9 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
/** 选择活动商品columns */ /** 选择活动商品columns */
const TableModalColumns: ColumnType<any>[] = [ const TableModalColumns: ColumnType<any>[] = [
{ {
title: '商品ID', title: 'SKUID',
key: 'productId', key: 'id',
dataIndex: 'productId', dataIndex: 'id',
}, },
{ {
title: '商品名称', title: '商品名称',
...@@ -193,7 +193,7 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => { ...@@ -193,7 +193,7 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
> >
<Button style={{ marginBottom: '16px' }} block type="dashed" icon={<PlusOutlined />} onClick={() => toggle(true)}>选择活动商品</Button> <Button style={{ marginBottom: '16px' }} block type="dashed" icon={<PlusOutlined />} onClick={() => toggle(true)}>选择活动商品</Button>
<Table <Table
rowKey={(record) => record.productId} rowKey={(record) => record.id}
components={components} components={components}
columns={columns.map((col: any) => { columns={columns.map((col: any) => {
if (!col.editable && !col.operation) { if (!col.editable && !col.operation) {
...@@ -227,9 +227,9 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => { ...@@ -227,9 +227,9 @@ const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
columns={TableModalColumns} columns={TableModalColumns}
mode="checkbox" mode="checkbox"
tableProps={{ tableProps={{
rowKey: 'productId', rowKey: 'id',
}} }}
customKey="productId" customKey="id"
onClose={() => toggle(false)} onClose={() => toggle(false)}
onOk={handleOk} onOk={handleOk}
effects={($, actions) => { 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