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

config/routes/index.ts

@@ -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

@@ -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

+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

+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

+.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/index2.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 { 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

@@ -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

@@ -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

@@ -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,7 +136,34 @@ 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

@@ -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) => {