17 changed files with 2712 additions and 69 deletions
-
2src/assets/css/theme.scss
-
528src/pages/FinancialMgm/PayConf/AppConf/index.jsx
-
206src/pages/FinancialMgm/PayConf/AppConf/index.scss
-
15src/pages/FinancialMgm/PayConf/AppConf/loadable.jsx
-
790src/pages/FinancialMgm/PayConf/PayMerchantConf/index.jsx
-
207src/pages/FinancialMgm/PayConf/PayMerchantConf/index.scss
-
15src/pages/FinancialMgm/PayConf/PayMerchantConf/loadable.jsx
-
545src/pages/FinancialMgm/PayConf/PlatformMerchantConf/index.jsx
-
207src/pages/FinancialMgm/PayConf/PlatformMerchantConf/index.scss
-
15src/pages/FinancialMgm/PayConf/PlatformMerchantConf/loadable.jsx
-
87src/pages/FinancialMgm/PayConf/components/FormItemList/index.jsx
-
5src/pages/FinancialMgm/PayConf/components/index.jsx
-
11src/pages/FinancialMgm/PayConf/index.jsx
-
18src/router/router.config.js
-
5src/services/FinancialMgm/index.js
-
117src/services/FinancialMgm/paymentConfiguration.js
-
4src/services/index.js
@ -1,6 +1,524 @@ |
|||
import React from "react" |
|||
import loadable from "@loadable/component" |
|||
import { LoadingImg } from "@/components" |
|||
import React, { useState, useEffect } from "react"; |
|||
import { ResultFlowResult } from "@/components"; |
|||
import { FormItemList } from "../components"; |
|||
import { |
|||
Select, |
|||
Input, |
|||
Button, |
|||
Table, |
|||
message, |
|||
Pagination, |
|||
Modal, |
|||
Dropdown, |
|||
Form, |
|||
Checkbox, |
|||
Row, |
|||
Col, |
|||
} from "antd"; |
|||
import { useSessionStorageState } from "ahooks"; |
|||
import { dictionary } from "@/config/common"; |
|||
import "./index.scss"; |
|||
import ajax from "@/services"; |
|||
|
|||
const AppConfLoadable = loadable(() => import("./loadable")) |
|||
export default (pros) => <AppConfLoadable {...pros} fallback={<LoadingImg />} /> |
|||
// 应用配置 |
|||
function AppConfiguration(props) { |
|||
const [form] = Form.useForm(); |
|||
// session缓存 |
|||
const [defaultParams, setDefaultParams] = useSessionStorageState( |
|||
"formData_appConfiguration", |
|||
{ defaultValue: null } |
|||
); |
|||
// 默认数据 |
|||
const defaultData = { |
|||
app_name: "", // 应用名称 |
|||
app_type: "-1", //应用类型 |
|||
pay_merchant_id: "-1", //支付商户名称 |
|||
}; |
|||
// 分页数据 |
|||
const [pageInfo, setPageInfo] = useState({ |
|||
pn: defaultParams ? defaultParams?.pn : 1, |
|||
page_size: defaultParams ? defaultParams?.page_size : 15, |
|||
}); |
|||
// 表单数据 |
|||
const [formData, setFormData] = useState({ |
|||
...defaultData, |
|||
...defaultParams, |
|||
}); |
|||
// 搜索提交数据-存储 |
|||
const [holdData, setHoldData] = useState(formData); |
|||
// 访问接口，isAjax改变时执行 |
|||
const [isAjax, setIsAjax] = useState(false); |
|||
// 检索按钮加载状态 |
|||
const [loading, setLoading] = useState(false); |
|||
// 表格加载状态 |
|||
const [tabLoading, setTabLoading] = useState(false); |
|||
// 表格返回数据 |
|||
const [resultData, setResultData] = useState({ |
|||
total: 0, |
|||
list: [], |
|||
}); |
|||
const [visible, setVisible] = useState(false); |
|||
const [actionState, setActionState] = useState(null); //操作状态 |
|||
const [appTypeData, setAppTypeData] = useState([]); //应用类型 |
|||
const [merchantNameData, setMerchantNameData] = useState([]); //支付商户名称 |
|||
|
|||
const defRowData = { |
|||
id: "", |
|||
app_name: "", |
|||
app_type: null, |
|||
app_id: "", |
|||
pay_merchant_id: "", |
|||
}; |
|||
// 行数据 |
|||
const [rowData, setRowData] = useState(defRowData); |
|||
|
|||
useEffect(() => { |
|||
getSelectList(); |
|||
}, []); |
|||
|
|||
// 访问接口，获取表格 |
|||
useEffect(() => { |
|||
getData(); |
|||
}, [isAjax]); |
|||
|
|||
// 获取下拉数据 |
|||
const getSelectList = () => { |
|||
ajax.getAppTypeScenariosInfo().then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setAppTypeData(res.data?.app_type_scenario_arr || []); |
|||
setMerchantNameData(res.data?.payment_merchant_list || []); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 获取列表数据 |
|||
const getData = () => { |
|||
let postData = { ...formData }; |
|||
if (!loading) { |
|||
postData = { ...holdData }; |
|||
} |
|||
setDefaultParams({ ...postData, ...pageInfo }); |
|||
setTabLoading(true); |
|||
ajax.getAppList({ ...postData, ...pageInfo }).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setResultData(res?.data || {}); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 检索数据 |
|||
const handleSearch = () => { |
|||
setLoading(true); |
|||
setPageInfo({ ...pageInfo, ...{ pn: 1 } }); |
|||
setHoldData(formData); |
|||
setIsAjax(!isAjax); |
|||
}; |
|||
|
|||
// 分页 |
|||
const paginationProps = { |
|||
className: "pagination-common", |
|||
showQuickJumper: true, |
|||
showSizeChanger: true, |
|||
current: pageInfo.pn, |
|||
total: resultData?.total, |
|||
pageSize: pageInfo.page_size, |
|||
pageSizeOptions: Array.from( |
|||
new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) |
|||
), |
|||
onChange: (current, size) => { |
|||
setPageInfo({ |
|||
...pageInfo, |
|||
...{ pn: pageInfo.page_size == size ? current : 1, page_size: size }, |
|||
}); |
|||
setIsAjax(!isAjax); |
|||
}, |
|||
}; |
|||
|
|||
// 取消 |
|||
const onCancel = () => { |
|||
form.resetFields(); |
|||
setActionState(null); |
|||
setVisible(false); |
|||
}; |
|||
|
|||
// 操作-下拉 |
|||
const items = [ |
|||
{ key: "view", label: "查看" }, |
|||
{ key: "edit", label: "编辑" }, |
|||
]; |
|||
|
|||
//列表 |
|||
const tableColumns = [ |
|||
{ |
|||
title: "应用名称", |
|||
dataIndex: "app_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "应用类型", |
|||
dataIndex: "app_type_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "支付商户名称", |
|||
dataIndex: "payment_merchant_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
align: "center", |
|||
width: 140, |
|||
render: (val, row, index) => { |
|||
return ( |
|||
<Dropdown |
|||
arrow |
|||
placement="bottom" |
|||
menu={{ |
|||
items, |
|||
onClick: (key) => { |
|||
return clickDropDown(key, row); |
|||
}, |
|||
}} |
|||
> |
|||
<Button type="primary">操作</Button> |
|||
</Dropdown> |
|||
); |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
// 操作 |
|||
const clickDropDown = (param, record) => { |
|||
ajax |
|||
.getAppDetails({ |
|||
id: record.id, |
|||
}) |
|||
.then( |
|||
(res) => { |
|||
if (res?.status == 20000) { |
|||
setActionState(param.key); |
|||
setRowData(res.data || {}); |
|||
form.setFieldsValue(res.data || {}); |
|||
setVisible(true); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 添加 |
|||
const handleAdd = () => { |
|||
setActionState("add"); |
|||
setRowData(defRowData); |
|||
form.setFieldsValue(defRowData); |
|||
setVisible(true); |
|||
}; |
|||
|
|||
// 弹窗标题 |
|||
const getModalTitle = (key) => { |
|||
switch (key) { |
|||
case "view": |
|||
return "查看应用配置"; |
|||
case "edit": |
|||
return "编辑应用配置"; |
|||
case "add": |
|||
return "添加应用配置"; |
|||
default: |
|||
break; |
|||
} |
|||
}; |
|||
|
|||
// 表单改变事件 |
|||
const handleForm = async (changedValues, allValues) => { |
|||
let obj = {}; |
|||
let key = Object.keys(changedValues)[0]; |
|||
let val = Object.values(changedValues)[0]; |
|||
switch (key) { |
|||
case "app_type": |
|||
obj[key] = val; |
|||
obj.pay_scenario = ""; |
|||
break; |
|||
default: |
|||
obj[key] = val; |
|||
break; |
|||
} |
|||
form.setFieldsValue({ ...allValues, ...obj }); |
|||
}; |
|||
|
|||
// 表单提交 |
|||
const onFinish = (values) => { |
|||
ajax[values?.id ? "getAppEdit" : "getAppAdd"]({ |
|||
...values, |
|||
}).then( |
|||
(res) => { |
|||
if (res?.status == 20000) { |
|||
message.success(res.message); |
|||
setVisible(false); |
|||
setIsAjax(!isAjax); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
return ( |
|||
<> |
|||
<div className="app-configuration"> |
|||
<div className="paid-search"> |
|||
<div className="title">查询条件</div> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search"> |
|||
<label>应用名称</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入内容" |
|||
value={formData?.app_name} |
|||
onChange={(e) => |
|||
setFormData({ ...formData, app_name: e.target.value }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>应用类型</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
showSearch |
|||
optionFilterProp="text" |
|||
fieldNames={{ label: "text", value: "id" }} |
|||
options={[...[{ text: "全部", id: "-1" }], ...appTypeData]} |
|||
value={formData?.app_type || undefined} |
|||
onChange={(v) => setFormData({ ...formData, app_type: v })} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>支付商户名称</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
showSearch |
|||
optionFilterProp="text" |
|||
fieldNames={{ label: "text", value: "id" }} |
|||
options={[...[{ text: "全部", id: "-1" }], ...merchantNameData]} |
|||
value={formData?.pay_merchant_id || undefined} |
|||
onChange={(v) => |
|||
setFormData({ ...formData, pay_merchant_id: v }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="form-btn"> |
|||
<Button |
|||
className="reset" |
|||
onClick={() => setFormData(defaultData)} |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button |
|||
className="submit" |
|||
type="primary" |
|||
onClick={handleSearch} |
|||
loading={loading} |
|||
> |
|||
查询 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="paid-result"> |
|||
<div className="result"> |
|||
<div className="row-head"> |
|||
<span className="number-wrapper"> |
|||
<span className="letter">共查询到</span> |
|||
<span className="total-number">{resultData.total || 0} </span> |
|||
<span className="letter">条结果</span> |
|||
</span> |
|||
<div> |
|||
<Button type="primary" className="green" onClick={handleAdd}> |
|||
添加 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
<ResultFlowResult |
|||
ajaxLoad={tabLoading} |
|||
resultData={resultData?.list || []} |
|||
> |
|||
<Table |
|||
className="yisa-table" |
|||
rowKey={(row) => row.id} |
|||
dataSource={resultData?.list || []} |
|||
columns={tableColumns} |
|||
pagination={false} |
|||
loading={tabLoading} |
|||
/> |
|||
<Pagination {...paginationProps} className="pagination-common" /> |
|||
</ResultFlowResult> |
|||
</div> |
|||
</div> |
|||
<Modal |
|||
open={visible} |
|||
width={720} |
|||
onCancel={onCancel} |
|||
footer={null} |
|||
className="modal-pay-configuration" |
|||
title={getModalTitle(actionState)} |
|||
> |
|||
<div className="form-container"> |
|||
<Form |
|||
labelCol={{ span: 4 }} |
|||
wrapperCol={{ span: 18 }} |
|||
layout="horizontal" |
|||
form={form} |
|||
initialValues={rowData} |
|||
onValuesChange={handleForm} |
|||
onFinish={onFinish} |
|||
> |
|||
<Form.Item name="id" hidden> |
|||
<Input /> |
|||
</Form.Item> |
|||
{[ |
|||
{ |
|||
type: "select", |
|||
label: "应用类型", |
|||
name: "app_type", |
|||
value: rowData?.app_type_name, |
|||
disabled: actionState !== "add", |
|||
required: actionState !== "view", |
|||
options: appTypeData, |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "应用名称", |
|||
name: "app_name", |
|||
value: rowData?.app_name, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "APPID", |
|||
name: "app_id", |
|||
value: rowData?.app_id, |
|||
disabled: actionState !== "add", |
|||
required: actionState !== "view", |
|||
}, |
|||
].map((item) => ( |
|||
<FormItemList |
|||
actionState={actionState} |
|||
key={item.name} |
|||
{...item} |
|||
/> |
|||
))} |
|||
<Form.Item |
|||
noStyle |
|||
shouldUpdate={(prevValues, currentValues) => |
|||
prevValues.app_type !== currentValues.app_type |
|||
} |
|||
> |
|||
{({ getFieldValue }) => { |
|||
return ( |
|||
<> |
|||
{[9, 10, 11].includes(getFieldValue("app_type")) && ( |
|||
<Form.Item |
|||
label="APPSecret" |
|||
name="app_secret" |
|||
rules={[ |
|||
{ |
|||
required: actionState !== "view", |
|||
message: "必填", |
|||
}, |
|||
]} |
|||
> |
|||
{actionState === "view" ? ( |
|||
<> |
|||
{rowData?.app_secret} |
|||
<Input hidden /> |
|||
</> |
|||
) : ( |
|||
<Input |
|||
autoComplete="off" |
|||
disabled={actionState !== "add"} |
|||
/> |
|||
)} |
|||
</Form.Item> |
|||
)} |
|||
<Form.Item |
|||
label="支付场景" |
|||
name="pay_scenario" |
|||
rules={[ |
|||
{ |
|||
required: actionState !== "view", |
|||
message: "必填", |
|||
}, |
|||
]} |
|||
> |
|||
<Checkbox.Group> |
|||
<Row> |
|||
{appTypeData |
|||
?.filter( |
|||
(item) => item.id === getFieldValue("app_type") |
|||
)[0] |
|||
?.payment_scenario_list?.map((v) => { |
|||
return ( |
|||
<Col key={v.id}> |
|||
<Checkbox |
|||
disabled={actionState === "view"} |
|||
value={v.id} |
|||
style={{ |
|||
lineHeight: "32px", |
|||
marginRight: 30, |
|||
}} |
|||
> |
|||
{v.text} |
|||
</Checkbox> |
|||
</Col> |
|||
); |
|||
})} |
|||
</Row> |
|||
</Checkbox.Group> |
|||
</Form.Item> |
|||
</> |
|||
); |
|||
}} |
|||
</Form.Item> |
|||
<Form.Item className="submitBtn" wrapperCol={{ span: 24 }}> |
|||
{actionState !== "view" && ( |
|||
<Button type="primary" className="submit" htmlType="submit"> |
|||
保存 |
|||
</Button> |
|||
)} |
|||
<Button className="cancel" onClick={onCancel}> |
|||
取消 |
|||
</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default AppConfiguration; |
|||
@ -1,5 +1,211 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
|
|||
$color-container-bg : var(--color-container-bg); |
|||
$color-user-list-bg : var(--color-user-list-bg); |
|||
$color-text : var(--color-text); |
|||
$color-primary : var(--color-primary); |
|||
|
|||
.app-configuration { |
|||
display: flex; |
|||
padding-top: 10px; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
|
|||
.paid-search { |
|||
display: block; |
|||
width: 375px; |
|||
padding: 10px 10px 20px 20px; |
|||
|
|||
.title { |
|||
width: 100%; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Bold; |
|||
font-weight: 700; |
|||
text-align: left; |
|||
color: var(--color-text); |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.form-Wrap { |
|||
height: calc(100% - 45px); |
|||
overflow-y: auto; |
|||
scrollbar-width: none; |
|||
-ms-overflow-style: none; |
|||
|
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.ant-select-selector, |
|||
.ant-picker, |
|||
.ant-input { |
|||
background-color: var(--color-search-list-item-bg) !important; |
|||
box-shadow: none !important; |
|||
color: var(--color-search-list-item-value); |
|||
border-color: var(--color-search-list-item-bd) !important; |
|||
} |
|||
|
|||
.yisa-search { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 24px; |
|||
|
|||
label { |
|||
color: var(--color-search-list-item-text); |
|||
flex: 0 0 25%; |
|||
max-width: 25%; |
|||
text-align: right; |
|||
padding-right: 8px; |
|||
} |
|||
|
|||
.form-con { |
|||
flex: 1; |
|||
width: 220px; |
|||
} |
|||
} |
|||
|
|||
.form-btn { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
justify-content: space-between; |
|||
margin: 40px 0px 0px; |
|||
padding: 0 3px; |
|||
|
|||
.ant-btn+.ant-btn { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.ant-btn span { |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Regular; |
|||
font-weight: 400; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.reset { |
|||
width: 90px; |
|||
height: 36px; |
|||
background: var(--button-default-bg); |
|||
} |
|||
|
|||
.submit { |
|||
width: calc(100% - 100px); |
|||
height: 36px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-btn+.ant-btn { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.green { |
|||
background-color: #67c23a; |
|||
border-color: #67c23a; |
|||
} |
|||
|
|||
.paid-result { |
|||
width: calc(100% - 375px); |
|||
padding-bottom: 15px; |
|||
padding: 20px; |
|||
background: var(--color-user-list-bg); |
|||
border-top-left-radius: 20px; |
|||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); |
|||
|
|||
.result { |
|||
@include flex-columns; |
|||
|
|||
.row-head { |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 13px; |
|||
|
|||
.number-wrapper { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
|
|||
.letter { |
|||
color: var(--color-text); |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.total-number { |
|||
color: var(--color-primary); |
|||
font-weight: bold; |
|||
margin: 0 4px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cc-result-flow { |
|||
width: 100%; |
|||
height: calc(100% - 34px - 13px); |
|||
|
|||
.yisa-table { |
|||
width: 100%; |
|||
height: calc(100% - 32px - 15px); |
|||
overflow-y: auto !important; |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
|
|||
.ant-table-thead { |
|||
th { |
|||
background: var(--color-table-header-bg) !important; |
|||
} |
|||
} |
|||
|
|||
.ant-table-tbody { |
|||
td { |
|||
background: var(--color-table-body-bg) !important; |
|||
border-bottom-color: var(--color-table-border-bottom-color); |
|||
} |
|||
|
|||
tr:nth-child(even) { |
|||
td { |
|||
background: var(--color-table-body-bg-nth-child-even) !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
.modal-pay-configuration { |
|||
|
|||
.submitBtn { |
|||
text-align: center; |
|||
margin: 20px 0 0; |
|||
|
|||
.ant-btn { |
|||
width: 80px; |
|||
height: 35px; |
|||
border: none; |
|||
border-radius: 4px; |
|||
|
|||
span { |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.submit { |
|||
background: #409eff; |
|||
} |
|||
|
|||
.cancel { |
|||
background: var(--button-default-bg); |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
} |
|||
@ -1,15 +0,0 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|||
// import { dictionary, utils } from "@/config/common"; |
|||
// import moment from 'moment' |
|||
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|||
// import ajax from "@/services" |
|||
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" |
|||
// import "./index.scss"; |
|||
// import errorImg from "@/assets/images/layout/error.png" |
|||
// import { useLocation } from "react-router-dom"; |
|||
function AppConf() { |
|||
return <div>AppConf</div> |
|||
} |
|||
|
|||
export default AppConf; |
|||
@ -1,6 +1,786 @@ |
|||
import React from "react" |
|||
import loadable from "@loadable/component" |
|||
import { LoadingImg } from "@/components" |
|||
import React, { useState, useEffect } from "react"; |
|||
import { ResultFlowResult } from "@/components"; |
|||
import { FormItemList } from "../components"; |
|||
import { |
|||
Select, |
|||
Input, |
|||
Button, |
|||
Table, |
|||
message, |
|||
Pagination, |
|||
Modal, |
|||
Dropdown, |
|||
Form, |
|||
} from "antd"; |
|||
import { useSessionStorageState } from "ahooks"; |
|||
import { dictionary } from "@/config/common"; |
|||
import "./index.scss"; |
|||
import ajax from "@/services"; |
|||
|
|||
const PayMerchantConfLoadable = loadable(() => import("./loadable")) |
|||
export default (pros) => <PayMerchantConfLoadable {...pros} fallback={<LoadingImg />} /> |
|||
// 支付商户配置 |
|||
function MerchantConfiguration(props) { |
|||
const [form] = Form.useForm(); |
|||
// session缓存 |
|||
const [defaultParams, setDefaultParams] = useSessionStorageState( |
|||
"formData_merchantConfiguration", |
|||
{ defaultValue: null } |
|||
); |
|||
// 默认数据 |
|||
const defaultData = { |
|||
payment_merchant_name: "-1", //支付商户名称 |
|||
type: "-1", //商户类型 |
|||
platform: "-1", //配置平台 |
|||
}; |
|||
// 分页数据 |
|||
const [pageInfo, setPageInfo] = useState({ |
|||
pn: defaultParams ? defaultParams?.pn : 1, |
|||
page_size: defaultParams ? defaultParams?.page_size : 15, |
|||
}); |
|||
// 表单数据 |
|||
const [formData, setFormData] = useState({ |
|||
...defaultData, |
|||
...defaultParams, |
|||
}); |
|||
// 搜索提交数据-存储 |
|||
const [holdData, setHoldData] = useState(formData); |
|||
// 访问接口，isAjax改变时执行 |
|||
const [isAjax, setIsAjax] = useState(false); |
|||
// 检索按钮加载状态 |
|||
const [loading, setLoading] = useState(false); |
|||
// 表格加载状态 |
|||
const [tabLoading, setTabLoading] = useState(false); |
|||
// 表格返回数据 |
|||
const [resultData, setResultData] = useState({ |
|||
total: 0, |
|||
list: [], |
|||
}); |
|||
const [visible, setVisible] = useState(false); |
|||
const [actionState, setActionState] = useState(null); //操作状态 |
|||
const [merchantNameData, setMerchantNameData] = useState([]); //支付商户名称 |
|||
const [merchantTypeData, setMerchantTypeData] = useState([]); //商户类型 |
|||
const [merchantPlatformData, setMerchantPlatformData] = useState([]); //商户平台 |
|||
const [platformToAppData, setPlatformToAppData] = useState([]); //根据配置平台获取相关应用数据 |
|||
|
|||
const defRowData = { |
|||
id: "", |
|||
// 唯一id |
|||
platform: null, |
|||
//配置平台 |
|||
payment_merchant_name: "", |
|||
//商户名称 |
|||
type: null, |
|||
//商户类型 |
|||
merchant_id: "", |
|||
//商户ID |
|||
api_key: "", |
|||
//APIkey |
|||
wechat_official_account: "", |
|||
//（微信）微信公众号 |
|||
wechat_mini_program: "", |
|||
//（微信）微信小程序 |
|||
wechat_app: "", |
|||
//（微信）APP （商户类型为普通时，有该选项） |
|||
alipay_partner: "", |
|||
//（支付宝） |
|||
alipay_private_key: "", |
|||
//（支付宝） |
|||
alipay_ali_public_key: "", |
|||
//（支付宝） |
|||
service_window: "", |
|||
//（支付宝）服务窗 |
|||
alipay_app: "", |
|||
//（支付宝）APP-支付宝 |
|||
online_terminal_num: "", |
|||
//（招商银行 服务商）线上终端号 |
|||
offline_terminal_num: "", |
|||
//（招商银行 服务商）线下终端号 |
|||
online_main_merchant_id: "", |
|||
//（招商银行 服务商）线上主商户ID |
|||
offline_main_merchant_id: "", |
|||
//（招商银行 服务商）线下主商户ID |
|||
payment_channels: "", |
|||
//（招商银行 服务商）支付渠道配置 应用配置 |
|||
special_merchant: "", |
|||
//（招商银行 特约商户）主商户名称 |
|||
online_sub_merchant_id: "", |
|||
//（招商银行 特约商户）线上子商户ID |
|||
offline_sub_merchant_id: "", |
|||
//（招商银行 特约商户）线下子商户ID |
|||
}; |
|||
// 行数据 |
|||
const [rowData, setRowData] = useState(defRowData); |
|||
|
|||
useEffect(() => { |
|||
getSelectList(); |
|||
}, []); |
|||
|
|||
// 访问接口，获取表格 |
|||
useEffect(() => { |
|||
getData(); |
|||
}, [isAjax]); |
|||
|
|||
// 获取下拉数据 |
|||
const getSelectList = () => { |
|||
ajax.getPaymentMerchantSelectInfo().then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setMerchantNameData(res.data?.payment_merchant_list || []); |
|||
setMerchantTypeData(res.data?.payment_merchant_type || []); |
|||
setMerchantPlatformData(res.data?.payment_merchant_platform || []); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 获取列表数据 |
|||
const getData = () => { |
|||
let postData = { ...formData }; |
|||
if (!loading) { |
|||
postData = { ...holdData }; |
|||
} |
|||
setDefaultParams({ ...postData, ...pageInfo }); |
|||
setTabLoading(true); |
|||
ajax.getPaymentMerchantList({ ...postData, ...pageInfo }).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setResultData(res?.data || {}); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 检索数据 |
|||
const handleSearch = () => { |
|||
setLoading(true); |
|||
setPageInfo({ ...pageInfo, ...{ pn: 1 } }); |
|||
setHoldData(formData); |
|||
setIsAjax(!isAjax); |
|||
}; |
|||
|
|||
// 分页 |
|||
const paginationProps = { |
|||
className: "pagination-common", |
|||
showQuickJumper: true, |
|||
showSizeChanger: true, |
|||
current: pageInfo.pn, |
|||
total: resultData?.total, |
|||
pageSize: pageInfo.page_size, |
|||
pageSizeOptions: Array.from( |
|||
new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) |
|||
), |
|||
onChange: (current, size) => { |
|||
setPageInfo({ |
|||
...pageInfo, |
|||
...{ pn: pageInfo.page_size == size ? current : 1, page_size: size }, |
|||
}); |
|||
setIsAjax(!isAjax); |
|||
}, |
|||
}; |
|||
|
|||
// 取消 |
|||
const onCancel = () => { |
|||
form.resetFields(); |
|||
setActionState(null); |
|||
setVisible(false); |
|||
}; |
|||
|
|||
// 操作-下拉 |
|||
const items = [ |
|||
{ key: "view", label: "查看" }, |
|||
{ key: "edit", label: "编辑" }, |
|||
]; |
|||
|
|||
//列表 |
|||
const tableColumns = [ |
|||
{ |
|||
title: "支付商户名称", |
|||
dataIndex: "payment_merchant_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "商户类型", |
|||
dataIndex: "type_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "平台", |
|||
dataIndex: "platform_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
align: "center", |
|||
width: 140, |
|||
render: (val, row, index) => { |
|||
return ( |
|||
<Dropdown |
|||
arrow |
|||
placement="bottom" |
|||
menu={{ |
|||
items, |
|||
onClick: (key) => { |
|||
return clickDropDown(key, row); |
|||
}, |
|||
}} |
|||
> |
|||
<Button type="primary">操作</Button> |
|||
</Dropdown> |
|||
); |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
// 操作 |
|||
const clickDropDown = (param, record) => { |
|||
ajax |
|||
.getPaymentMerchantDetails({ |
|||
id: record.id, |
|||
}) |
|||
.then( |
|||
(res) => { |
|||
if (res?.status == 20000) { |
|||
setActionState(param.key); |
|||
setRowData(res.data || {}); |
|||
form.setFieldsValue(res.data || {}); |
|||
setVisible(true); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 添加 |
|||
const handleAdd = () => { |
|||
setActionState("add"); |
|||
setRowData(defRowData); |
|||
form.setFieldsValue(defRowData); |
|||
setVisible(true); |
|||
}; |
|||
|
|||
// 弹窗标题 |
|||
const getModalTitle = (key) => { |
|||
switch (key) { |
|||
case "view": |
|||
return "查看支付商户配置"; |
|||
case "edit": |
|||
return "编辑支付商户配置"; |
|||
case "add": |
|||
return "添加支付商户配置"; |
|||
default: |
|||
break; |
|||
} |
|||
}; |
|||
|
|||
// 表单改变事件 |
|||
const handleForm = async (changedValues, allValues) => { |
|||
let obj = {}; |
|||
let key = Object.keys(changedValues)[0]; |
|||
let val = Object.values(changedValues)[0]; |
|||
switch (key) { |
|||
case "platform": |
|||
obj[key] = val; |
|||
obj.type = null; |
|||
getPlatformSelectList(val); |
|||
break; |
|||
default: |
|||
obj[key] = val; |
|||
break; |
|||
} |
|||
form.setFieldsValue({ ...allValues, ...obj }); |
|||
}; |
|||
|
|||
// 表单提交 |
|||
const onFinish = (values) => { |
|||
ajax[values?.id ? "getPaymentMerchantEdit" : "getPaymentMerchantAdd"]({ |
|||
...values, |
|||
}).then( |
|||
(res) => { |
|||
if (res?.status == 20000) { |
|||
message.success(res.message); |
|||
setVisible(false); |
|||
setIsAjax(!isAjax); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 根据配置平台获取相关应用数据 |
|||
const getPlatformSelectList = (platform) => { |
|||
ajax.getPlatformToAppList({ platform }).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setPlatformToAppData(res.data || {}); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 平台类型=>pt(1微信、2支付宝、3招商银行、4数字人民币、5ETC) |
|||
// 商户类型=>mt(1普通商户、2服务商、3特约商户) |
|||
const dynamicFormItem = (pt, mt) => { |
|||
if (pt === 1) { |
|||
if (mt === 1 || mt === 2) { |
|||
return [ |
|||
{ |
|||
type: "title", |
|||
name: "title_1", |
|||
title: "微信公众平台配置", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "商户ID", |
|||
name: "merchant_id", |
|||
value: rowData?.merchant_id, |
|||
required: actionState !== "view", |
|||
disabled: actionState !== "add", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "APIkey", |
|||
name: "api_key", |
|||
value: rowData?.api_key, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "select", |
|||
label: "微信公众号", |
|||
name: "wechat_official_account", |
|||
value: rowData?.wechat_official_account_name, |
|||
options: platformToAppData?.wechat_official_account || [], |
|||
required: false, |
|||
allowClear: true, |
|||
}, |
|||
{ |
|||
type: "select", |
|||
label: "微信小程序", |
|||
name: "wechat_mini_program", |
|||
value: rowData?.wechat_mini_program_name, |
|||
options: platformToAppData?.wechat_mini_program || [], |
|||
required: false, |
|||
allowClear: true, |
|||
}, |
|||
] |
|||
.concat( |
|||
mt === 1 |
|||
? [ |
|||
{ |
|||
type: "select", |
|||
label: "APP", |
|||
name: "wechat_app", |
|||
value: rowData?.wechat_app_name, |
|||
options: platformToAppData?.wechat_app || [], |
|||
required: false, |
|||
allowClear: true, |
|||
}, |
|||
] |
|||
: [] |
|||
) |
|||
.map((item) => ( |
|||
<FormItemList actionState={actionState} key={item.name} {...item} /> |
|||
)); |
|||
} else if (mt === 3) { |
|||
return [ |
|||
{ |
|||
type: "select", |
|||
label: "父商户", |
|||
name: "parent_merchant", |
|||
value: rowData?.parent_merchant_name, |
|||
options: [], |
|||
required: actionState !== "view", |
|||
disabled: actionState !== "add", |
|||
}, |
|||
{ |
|||
type: "title", |
|||
name: "title_1", |
|||
title: "微信公众平台配置", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "商户ID", |
|||
name: "merchant_id", |
|||
value: rowData?.merchant_id, |
|||
required: actionState !== "view", |
|||
disabled: actionState !== "add", |
|||
}, |
|||
].map((item) => ( |
|||
<FormItemList actionState={actionState} key={item.name} {...item} /> |
|||
)); |
|||
} else { |
|||
return null; |
|||
} |
|||
} else if (pt === 2) { |
|||
return [ |
|||
{ |
|||
type: "title", |
|||
name: "title_1", |
|||
title: "支付宝商户配置", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "ALIPAY_PARTNER", |
|||
name: "alipay_partner", |
|||
value: rowData?.alipay_partner, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "ALIPAY_PRIVATE_KEY", |
|||
name: "alipay_private_key", |
|||
value: rowData?.alipay_private_key, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "ALIPAY_ALI_PUBLIC_KEY", |
|||
name: "alipay_ali_public_key", |
|||
value: rowData?.alipay_ali_public_key, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "select", |
|||
label: "服务窗", |
|||
name: "service_window", |
|||
value: rowData?.service_window_name, |
|||
options: platformToAppData?.service_window || [], |
|||
required: false, |
|||
allowClear: true, |
|||
}, |
|||
{ |
|||
type: "select", |
|||
label: "APP-支付宝", |
|||
name: "alipay_app", |
|||
value: rowData?.alipay_app_name, |
|||
options: platformToAppData?.alipay_app || [], |
|||
required: false, |
|||
allowClear: true, |
|||
}, |
|||
].map((item) => ( |
|||
<FormItemList actionState={actionState} key={item.name} {...item} /> |
|||
)); |
|||
} else if (pt === 3) { |
|||
if (mt === 2) { |
|||
return [ |
|||
{ |
|||
type: "title", |
|||
name: "title_1", |
|||
title: "服务商配置", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "商户ID", |
|||
name: "merchant_id", |
|||
value: rowData?.merchant_id, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "APIkey", |
|||
name: "api_key", |
|||
value: rowData?.api_key, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "线上终端号", |
|||
name: "online_terminal_num", |
|||
value: rowData?.online_terminal_num, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "线下终端号", |
|||
name: "offline_terminal_num", |
|||
value: rowData?.offline_terminal_num, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "线上主商户ID", |
|||
name: "online_main_merchant_id", |
|||
value: rowData?.online_main_merchant_id, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "线下主商户ID", |
|||
name: "offline_main_merchant_id", |
|||
value: rowData?.offline_main_merchant_id, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "title", |
|||
name: "title_2", |
|||
title: "支付渠道配置", |
|||
}, |
|||
{ |
|||
type: "select", |
|||
label: "应用选择", |
|||
name: "payment_channels", |
|||
value: rowData?.payment_channels_name, |
|||
options: platformToAppData?.payment_channels || [], |
|||
required: actionState !== "view", |
|||
}, |
|||
].map((item) => ( |
|||
<FormItemList actionState={actionState} key={item.name} {...item} /> |
|||
)); |
|||
} else if (mt === 3) { |
|||
return [ |
|||
{ |
|||
type: "title", |
|||
name: "title_1", |
|||
title: "特约商户配置", |
|||
}, |
|||
{ |
|||
type: "select", |
|||
label: "主商户名称", |
|||
name: "special_merchant", |
|||
value: rowData?.special_merchant_name, |
|||
options: platformToAppData?.special_merchant || [], |
|||
disabled: actionState !== "add", |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "商户ID", |
|||
name: "merchant_id", |
|||
value: rowData?.merchant_id, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "线上子商户ID", |
|||
name: "online_sub_merchant_id", |
|||
value: rowData?.online_sub_merchant_id, |
|||
required: false, |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "线下子商户ID", |
|||
name: "offline_sub_merchant_id", |
|||
value: rowData?.offline_sub_merchant_id, |
|||
required: false, |
|||
}, |
|||
].map((item) => ( |
|||
<FormItemList actionState={actionState} key={item.name} {...item} /> |
|||
)); |
|||
} else { |
|||
return null; |
|||
} |
|||
} else { |
|||
return null; |
|||
} |
|||
}; |
|||
|
|||
return ( |
|||
<> |
|||
<div className="merchant-configuration"> |
|||
<div className="paid-search"> |
|||
<div className="title">查询条件</div> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search"> |
|||
<label>支付商户名称</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
showSearch |
|||
optionFilterProp="text" |
|||
fieldNames={{ label: "text", value: "id" }} |
|||
options={[...[{ text: "全部", id: "-1" }], ...merchantNameData]} |
|||
value={formData?.payment_merchant_name || undefined} |
|||
onChange={(v) => |
|||
setFormData({ ...formData, payment_merchant_name: v }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>商户类型</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
showSearch |
|||
optionFilterProp="text" |
|||
fieldNames={{ label: "text", value: "id" }} |
|||
options={[...[{ text: "全部", id: "-1" }], ...merchantTypeData]} |
|||
value={formData?.type || undefined} |
|||
onChange={(v) => setFormData({ ...formData, type: v })} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>平台</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
showSearch |
|||
optionFilterProp="text" |
|||
fieldNames={{ label: "text", value: "id" }} |
|||
options={[ |
|||
...[{ text: "全部", id: "-1" }], |
|||
...merchantPlatformData, |
|||
]} |
|||
value={formData?.platform || undefined} |
|||
onChange={(v) => setFormData({ ...formData, platform: v })} |
|||
/> |
|||
</div> |
|||
<div className="form-btn"> |
|||
<Button |
|||
className="reset" |
|||
onClick={() => setFormData(defaultData)} |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button |
|||
className="submit" |
|||
type="primary" |
|||
onClick={handleSearch} |
|||
loading={loading} |
|||
> |
|||
查询 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="paid-result"> |
|||
<div className="result"> |
|||
<div className="row-head"> |
|||
<span className="number-wrapper"> |
|||
<span className="letter">共查询到</span> |
|||
<span className="total-number">{resultData.total || 0} </span> |
|||
<span className="letter">条结果</span> |
|||
</span> |
|||
<div> |
|||
<Button type="primary" className="green" onClick={handleAdd}> |
|||
添加 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
<ResultFlowResult |
|||
ajaxLoad={tabLoading} |
|||
resultData={resultData?.list || []} |
|||
> |
|||
<Table |
|||
className="yisa-table" |
|||
rowKey={(row) => row.id} |
|||
dataSource={resultData?.list || []} |
|||
columns={tableColumns} |
|||
pagination={false} |
|||
loading={tabLoading} |
|||
/> |
|||
<Pagination {...paginationProps} className="pagination-common" /> |
|||
</ResultFlowResult> |
|||
</div> |
|||
</div> |
|||
<Modal |
|||
open={visible} |
|||
width={720} |
|||
onCancel={onCancel} |
|||
footer={null} |
|||
className="modal-pay-configuration" |
|||
title={getModalTitle(actionState)} |
|||
> |
|||
<div className="form-container"> |
|||
<Form |
|||
labelCol={{ span: 6 }} |
|||
wrapperCol={{ span: 16 }} |
|||
layout="horizontal" |
|||
form={form} |
|||
initialValues={rowData} |
|||
onValuesChange={handleForm} |
|||
onFinish={onFinish} |
|||
> |
|||
<Form.Item name="id" hidden> |
|||
<Input /> |
|||
</Form.Item> |
|||
{[ |
|||
{ |
|||
type: "select", |
|||
label: "配置平台", |
|||
name: "platform", |
|||
value: rowData?.platform_name, |
|||
options: merchantPlatformData, |
|||
disabled: actionState !== "add", |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "input", |
|||
label: "商户名称", |
|||
name: "payment_merchant_name", |
|||
value: rowData?.payment_merchant_name, |
|||
required: actionState !== "view", |
|||
}, |
|||
{ |
|||
type: "select", |
|||
label: "商户类型", |
|||
name: "type", |
|||
value: rowData?.type_name, |
|||
options: platformToAppData.merchant_type_id_list || [], |
|||
disabled: actionState !== "add", |
|||
required: actionState !== "view", |
|||
}, |
|||
].map((item) => ( |
|||
<FormItemList |
|||
actionState={actionState} |
|||
key={item.name} |
|||
{...item} |
|||
/> |
|||
))} |
|||
<Form.Item |
|||
noStyle |
|||
shouldUpdate={(prevValues, currentValues) => |
|||
prevValues.platform !== currentValues.platform || |
|||
prevValues.type !== currentValues.type |
|||
} |
|||
> |
|||
{({ getFieldValue }) => { |
|||
return ( |
|||
<> |
|||
{dynamicFormItem( |
|||
getFieldValue("platform"), |
|||
getFieldValue("type") |
|||
)} |
|||
</> |
|||
); |
|||
}} |
|||
</Form.Item> |
|||
<Form.Item className="submitBtn" wrapperCol={{ span: 24 }}> |
|||
{actionState !== "view" && ( |
|||
<Button type="primary" className="submit" htmlType="submit"> |
|||
保存 |
|||
</Button> |
|||
)} |
|||
<Button className="cancel" onClick={onCancel}> |
|||
取消 |
|||
</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default MerchantConfiguration; |
|||
@ -1,5 +1,212 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
|
|||
$color-container-bg : var(--color-container-bg); |
|||
$color-user-list-bg : var(--color-user-list-bg); |
|||
$color-text : var(--color-text); |
|||
$color-primary : var(--color-primary); |
|||
|
|||
.merchant-configuration { |
|||
display: flex; |
|||
padding-top: 10px; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
|
|||
.paid-search { |
|||
display: block; |
|||
width: 375px; |
|||
padding: 10px 10px 20px 20px; |
|||
|
|||
.title { |
|||
width: 100%; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Bold; |
|||
font-weight: 700; |
|||
text-align: left; |
|||
color: var(--color-text); |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.form-Wrap { |
|||
height: calc(100% - 45px); |
|||
overflow-y: auto; |
|||
scrollbar-width: none; |
|||
-ms-overflow-style: none; |
|||
|
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.ant-select-selector, |
|||
.ant-picker, |
|||
.ant-input { |
|||
background-color: var(--color-search-list-item-bg) !important; |
|||
box-shadow: none !important; |
|||
color: var(--color-search-list-item-value); |
|||
border-color: var(--color-search-list-item-bd) !important; |
|||
} |
|||
|
|||
.yisa-search { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 24px; |
|||
|
|||
label { |
|||
color: var(--color-search-list-item-text); |
|||
flex: 0 0 25%; |
|||
max-width: 25%; |
|||
text-align: right; |
|||
padding-right: 8px; |
|||
} |
|||
|
|||
.form-con { |
|||
flex: 1; |
|||
width: 220px; |
|||
} |
|||
} |
|||
|
|||
.form-btn { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
justify-content: space-between; |
|||
margin: 40px 0px 0px; |
|||
padding: 0 3px; |
|||
|
|||
.ant-btn+.ant-btn { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.ant-btn span { |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Regular; |
|||
font-weight: 400; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.reset { |
|||
width: 90px; |
|||
height: 36px; |
|||
background: var(--button-default-bg); |
|||
} |
|||
|
|||
.submit { |
|||
width: calc(100% - 100px); |
|||
height: 36px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-btn+.ant-btn { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.green { |
|||
background-color: #67c23a; |
|||
border-color: #67c23a; |
|||
} |
|||
|
|||
.paid-result { |
|||
width: calc(100% - 375px); |
|||
padding-bottom: 15px; |
|||
padding: 20px; |
|||
background: var(--color-user-list-bg); |
|||
border-top-left-radius: 20px; |
|||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); |
|||
|
|||
.result { |
|||
@include flex-columns; |
|||
|
|||
.row-head { |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 13px; |
|||
|
|||
.number-wrapper { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
|
|||
.letter { |
|||
color: var(--color-text); |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.total-number { |
|||
color: var(--color-primary); |
|||
font-weight: bold; |
|||
margin: 0 4px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cc-result-flow { |
|||
width: 100%; |
|||
height: calc(100% - 34px - 13px); |
|||
|
|||
.yisa-table { |
|||
width: 100%; |
|||
height: calc(100% - 32px - 15px); |
|||
overflow-y: auto !important; |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
|
|||
.ant-table-thead { |
|||
th { |
|||
background: var(--color-table-header-bg) !important; |
|||
} |
|||
} |
|||
|
|||
.ant-table-tbody { |
|||
td { |
|||
background: var(--color-table-body-bg) !important; |
|||
border-bottom-color: var(--color-table-border-bottom-color); |
|||
} |
|||
|
|||
tr:nth-child(even) { |
|||
td { |
|||
background: var(--color-table-body-bg-nth-child-even) !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
.modal-pay-configuration { |
|||
|
|||
.submitBtn { |
|||
text-align: center; |
|||
margin: 20px 0 0; |
|||
|
|||
.ant-btn { |
|||
width: 80px; |
|||
height: 35px; |
|||
border: none; |
|||
border-radius: 4px; |
|||
|
|||
span { |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.submit { |
|||
background: #409eff; |
|||
} |
|||
|
|||
.cancel { |
|||
background: var(--button-default-bg); |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -1,15 +0,0 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|||
// import { dictionary, utils } from "@/config/common"; |
|||
// import moment from 'moment' |
|||
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|||
// import ajax from "@/services" |
|||
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" |
|||
// import "./index.scss"; |
|||
// import errorImg from "@/assets/images/layout/error.png" |
|||
// import { useLocation } from "react-router-dom"; |
|||
function PayMerchantConf() { |
|||
return <div>PayMerchantConf</div> |
|||
} |
|||
|
|||
export default PayMerchantConf; |
|||
@ -1,6 +1,541 @@ |
|||
import React from "react" |
|||
import loadable from "@loadable/component" |
|||
import { LoadingImg } from "@/components" |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
import { ResultFlowResult } from "@/components"; |
|||
import { |
|||
Select, |
|||
Input, |
|||
Button, |
|||
Table, |
|||
message, |
|||
Pagination, |
|||
Modal, |
|||
Dropdown, |
|||
Form, |
|||
Checkbox, |
|||
Row, |
|||
Col, |
|||
} from "antd"; |
|||
import { useSessionStorageState } from "ahooks"; |
|||
import { dictionary } from "@/config/common"; |
|||
import moment from "moment"; |
|||
import "./index.scss"; |
|||
import ajax from "@/services"; |
|||
|
|||
const PlatformMerchantConfLoadable = loadable(() => import("./loadable")) |
|||
export default (pros) => <PlatformMerchantConfLoadable {...pros} fallback={<LoadingImg />} /> |
|||
// 平台商户配置 |
|||
function PlatformConfiguration(props) { |
|||
const [form] = Form.useForm(); |
|||
// session缓存 |
|||
const [defaultParams, setDefaultParams] = useSessionStorageState( |
|||
"formData_platformConfiguration", |
|||
{ defaultValue: null } |
|||
); |
|||
// 默认数据 |
|||
const defaultData = { |
|||
app_name: "", // 应用名称 |
|||
app_type: "-1", //应用类型 |
|||
pay_merchant_id: "-1", //支付商户名称 |
|||
}; |
|||
// 分页数据 |
|||
const [pageInfo, setPageInfo] = useState({ |
|||
pn: defaultParams ? defaultParams?.pn : 1, |
|||
page_size: defaultParams ? defaultParams?.page_size : 15, |
|||
}); |
|||
// 表单数据 |
|||
const [formData, setFormData] = useState({ |
|||
...defaultData, |
|||
...defaultParams, |
|||
}); |
|||
// 搜索提交数据-存储 |
|||
const [holdData, setHoldData] = useState(formData); |
|||
// 访问接口，isAjax改变时执行 |
|||
const [isAjax, setIsAjax] = useState(false); |
|||
// 检索按钮加载状态 |
|||
const [loading, setLoading] = useState(false); |
|||
// 表格加载状态 |
|||
const [tabLoading, setTabLoading] = useState(false); |
|||
// 表格返回数据 |
|||
const [resultData, setResultData] = useState({ |
|||
total: 0, |
|||
list: [], |
|||
}); |
|||
const [visible, setVisible] = useState(false); |
|||
const [actionState, setActionState] = useState(null); //操作状态 |
|||
const [appTypeData, setAppTypeData] = useState([]); //应用类型 |
|||
const [payMerchantData, setPayMerchantData] = useState([]); //支付商户名称 |
|||
|
|||
const defRowData = { |
|||
id: "", |
|||
app_name: "", |
|||
app_type: "", |
|||
app_id: "", |
|||
pay_merchant_id: "", |
|||
}; |
|||
// 行数据 |
|||
const [rowData, setRowData] = useState(defRowData); |
|||
|
|||
useEffect(() => { |
|||
getSelectList(); |
|||
}, []); |
|||
|
|||
// 访问接口，获取表格 |
|||
useEffect(() => { |
|||
getData(); |
|||
}, [isAjax]); |
|||
|
|||
// 获取下拉数据 |
|||
const getSelectList = () => { |
|||
ajax.getAppTypeScenariosInfo().then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setAppTypeData(res.data?.app_type_scenario_arr || []); |
|||
setPayMerchantData(res.data?.payment_merchant_list || []); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 获取列表数据 |
|||
const getData = () => { |
|||
let postData = { ...formData }; |
|||
if (!loading) { |
|||
postData = { ...holdData }; |
|||
} |
|||
setDefaultParams({ ...postData, ...pageInfo }); |
|||
setTabLoading(true); |
|||
ajax.getAppList({ ...postData, ...pageInfo }).then( |
|||
(res) => { |
|||
if (parseInt(res?.status) === 20000) { |
|||
setResultData(res?.data || {}); |
|||
} else { |
|||
message.error(res?.message); |
|||
} |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
setLoading(false); |
|||
setTabLoading(false); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 检索数据 |
|||
const handleSearch = () => { |
|||
setLoading(true); |
|||
setPageInfo({ ...pageInfo, ...{ pn: 1 } }); |
|||
setHoldData(formData); |
|||
setIsAjax(!isAjax); |
|||
}; |
|||
|
|||
// 分页 |
|||
const paginationProps = { |
|||
className: "pagination-common", |
|||
showQuickJumper: true, |
|||
showSizeChanger: true, |
|||
current: pageInfo.pn, |
|||
total: resultData?.total, |
|||
pageSize: pageInfo.page_size, |
|||
pageSizeOptions: Array.from( |
|||
new Set([...[15], ...(dictionary?.pageSizeOptions || [])]) |
|||
), |
|||
onChange: (current, size) => { |
|||
setPageInfo({ |
|||
...pageInfo, |
|||
...{ pn: pageInfo.page_size == size ? current : 1, page_size: size }, |
|||
}); |
|||
setIsAjax(!isAjax); |
|||
}, |
|||
}; |
|||
|
|||
// 取消 |
|||
const onCancel = () => { |
|||
form.resetFields(); |
|||
setActionState(null); |
|||
setVisible(false); |
|||
}; |
|||
|
|||
// 操作-下拉 |
|||
const items = [ |
|||
{ key: "view", label: "查看" }, |
|||
{ key: "edit", label: "编辑" }, |
|||
]; |
|||
|
|||
//列表 |
|||
const tableColumns = [ |
|||
{ |
|||
title: "应用名称", |
|||
dataIndex: "app_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "应用类型", |
|||
dataIndex: "app_type_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "支付商户名称", |
|||
dataIndex: "payment_merchant_name", |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
align: "center", |
|||
width: 140, |
|||
render: (val, row, index) => { |
|||
return ( |
|||
<Dropdown |
|||
arrow |
|||
placement="bottom" |
|||
menu={{ |
|||
items, |
|||
onClick: (key) => { |
|||
return clickDropDown(key, row); |
|||
}, |
|||
}} |
|||
> |
|||
<Button type="primary">操作</Button> |
|||
</Dropdown> |
|||
); |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
// 操作 |
|||
const clickDropDown = (param, record) => { |
|||
ajax |
|||
.getAppDetails({ |
|||
id: record.id, |
|||
}) |
|||
.then( |
|||
(res) => { |
|||
if (res?.status == 20000) { |
|||
setActionState(param.key); |
|||
setRowData(res.data || {}); |
|||
form.setFieldsValue(res.data || {}); |
|||
setVisible(true); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
// 添加 |
|||
const handleAdd = () => { |
|||
setActionState("add"); |
|||
setRowData(defRowData); |
|||
form.setFieldsValue(defRowData); |
|||
setVisible(true); |
|||
}; |
|||
|
|||
// 弹窗标题 |
|||
const getModalTitle = (key) => { |
|||
switch (key) { |
|||
case "view": |
|||
return "查看应用配置"; |
|||
case "edit": |
|||
return "编辑应用配置"; |
|||
case "add": |
|||
return "添加应用配置"; |
|||
default: |
|||
break; |
|||
} |
|||
}; |
|||
|
|||
// 表单改变事件 |
|||
const handleForm = async (changedValues, allValues) => { |
|||
let obj = {}; |
|||
let key = Object.keys(changedValues)[0]; |
|||
let val = Object.values(changedValues)[0]; |
|||
switch (key) { |
|||
case "app_type": |
|||
obj[key] = val; |
|||
obj.pay_scenario = ""; |
|||
break; |
|||
default: |
|||
obj[key] = val; |
|||
break; |
|||
} |
|||
form.setFieldsValue({ ...allValues, ...obj }); |
|||
}; |
|||
|
|||
// 表单提交 |
|||
const onFinish = (values) => { |
|||
ajax[values?.id ? "getAppEdit" : "getAppAdd"]({ |
|||
...values, |
|||
}).then( |
|||
(res) => { |
|||
if (res?.status == 20000) { |
|||
message.success(res.message); |
|||
setVisible(false); |
|||
setIsAjax(!isAjax); |
|||
} else { |
|||
message.error(res.message); |
|||
} |
|||
}, |
|||
(err) => { |
|||
console.log(err); |
|||
} |
|||
); |
|||
}; |
|||
|
|||
return ( |
|||
<> |
|||
<div className="platform-configuration"> |
|||
<div className="paid-search"> |
|||
<div className="title">查询条件</div> |
|||
<div className="form-Wrap"> |
|||
<div className="yisa-search"> |
|||
<label>应用名称</label> |
|||
<Input |
|||
className="form-con" |
|||
placeholder="请输入内容" |
|||
value={formData?.app_name} |
|||
onChange={(e) => |
|||
setFormData({ ...formData, app_name: e.target.value }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>应用类型</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
showSearch |
|||
optionFilterProp="text" |
|||
fieldNames={{ label: "text", value: "id" }} |
|||
options={[...[{ text: "全部", id: "-1" }], ...appTypeData]} |
|||
value={formData?.app_type || undefined} |
|||
onChange={(v) => setFormData({ ...formData, app_type: v })} |
|||
/> |
|||
</div> |
|||
<div className="yisa-search"> |
|||
<label>支付商户名称</label> |
|||
<Select |
|||
className="form-con" |
|||
placeholder="请选择" |
|||
showSearch |
|||
optionFilterProp="text" |
|||
fieldNames={{ label: "text", value: "id" }} |
|||
options={[...[{ text: "全部", id: "-1" }], ...payMerchantData]} |
|||
value={formData?.pay_merchant_id || undefined} |
|||
onChange={(v) => |
|||
setFormData({ ...formData, pay_merchant_id: v }) |
|||
} |
|||
/> |
|||
</div> |
|||
<div className="form-btn"> |
|||
<Button |
|||
className="reset" |
|||
onClick={() => setFormData(defaultData)} |
|||
> |
|||
重置 |
|||
</Button> |
|||
<Button |
|||
className="submit" |
|||
type="primary" |
|||
onClick={handleSearch} |
|||
loading={loading} |
|||
> |
|||
查询 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div className="paid-result"> |
|||
<div className="result"> |
|||
<div className="row-head"> |
|||
<span className="number-wrapper"> |
|||
<span className="letter">共查询到</span> |
|||
<span className="total-number">{resultData.total || 0} </span> |
|||
<span className="letter">条结果</span> |
|||
</span> |
|||
<div> |
|||
<Button type="primary" className="green" onClick={handleAdd}> |
|||
添加 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
<ResultFlowResult |
|||
ajaxLoad={tabLoading} |
|||
resultData={resultData?.list || []} |
|||
> |
|||
<Table |
|||
className="yisa-table" |
|||
rowKey={(row) => row.id} |
|||
dataSource={resultData?.list || []} |
|||
columns={tableColumns} |
|||
pagination={false} |
|||
loading={tabLoading} |
|||
/> |
|||
<Pagination {...paginationProps} className="pagination-common" /> |
|||
</ResultFlowResult> |
|||
</div> |
|||
</div> |
|||
<Modal |
|||
open={visible} |
|||
width={720} |
|||
onCancel={onCancel} |
|||
footer={null} |
|||
className="modal-pay-configuration" |
|||
title={getModalTitle(actionState)} |
|||
> |
|||
<div className="form-container"> |
|||
<Form |
|||
labelCol={{ span: 4 }} |
|||
wrapperCol={{ span: 18 }} |
|||
layout="horizontal" |
|||
form={form} |
|||
initialValues={rowData} |
|||
onValuesChange={handleForm} |
|||
onFinish={onFinish} |
|||
> |
|||
<Form.Item name="id" hidden> |
|||
<Input /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="应用类型" |
|||
name="app_type" |
|||
rules={[ |
|||
{ |
|||
required: actionState !== "view", |
|||
message: "请选择应用类型", |
|||
}, |
|||
]} |
|||
> |
|||
{actionState === "view" ? ( |
|||
rowData.app_type_name |
|||
) : ( |
|||
<Select |
|||
placeholder="请选择" |
|||
showSearch |
|||
disabled={actionState === "edit"} |
|||
optionFilterProp="text" |
|||
fieldNames={{ label: "text", value: "id" }} |
|||
options={appTypeData} |
|||
/> |
|||
)} |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="应用名称" |
|||
name="app_name" |
|||
rules={[ |
|||
{ |
|||
required: actionState !== "view", |
|||
message: "请输入应用名称", |
|||
}, |
|||
]} |
|||
> |
|||
{actionState === "view" ? ( |
|||
rowData.app_name |
|||
) : ( |
|||
<Input autoComplete="off" /> |
|||
)} |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="APPID" |
|||
name="app_id" |
|||
rules={[ |
|||
{ required: actionState !== "view", message: "请输入APPID" }, |
|||
]} |
|||
> |
|||
{actionState === "view" ? ( |
|||
rowData.app_id |
|||
) : ( |
|||
<Input autoComplete="off" disabled={actionState === "edit"} /> |
|||
)} |
|||
</Form.Item> |
|||
<Form.Item |
|||
noStyle |
|||
shouldUpdate={(prevValues, currentValues) => |
|||
prevValues.app_type !== currentValues.app_type |
|||
} |
|||
> |
|||
{({ getFieldValue }) => { |
|||
return ( |
|||
<> |
|||
{[9, 10, 11].includes(getFieldValue("app_type")) && ( |
|||
<Form.Item |
|||
label="APPSecret" |
|||
name="app_secret" |
|||
rules={[ |
|||
{ |
|||
required: actionState !== "view", |
|||
message: "请输入APPSecret", |
|||
}, |
|||
]} |
|||
> |
|||
{actionState === "view" ? ( |
|||
rowData.app_secret |
|||
) : ( |
|||
<Input |
|||
autoComplete="off" |
|||
disabled={actionState === "edit"} |
|||
/> |
|||
)} |
|||
</Form.Item> |
|||
)} |
|||
<Form.Item |
|||
label="支付场景" |
|||
name="pay_scenario" |
|||
rules={[ |
|||
{ |
|||
required: actionState !== "view", |
|||
message: "请选择支付场景", |
|||
}, |
|||
]} |
|||
> |
|||
<Checkbox.Group> |
|||
<Row> |
|||
{appTypeData |
|||
?.filter( |
|||
(item) => item.id === getFieldValue("app_type") |
|||
)[0] |
|||
?.payment_scenario_list?.map((v) => { |
|||
return ( |
|||
<Col key={v.id}> |
|||
<Checkbox |
|||
disabled={actionState === "view"} |
|||
value={v.id} |
|||
style={{ |
|||
lineHeight: "32px", |
|||
marginRight: 30, |
|||
}} |
|||
> |
|||
{v.text} |
|||
</Checkbox> |
|||
</Col> |
|||
); |
|||
})} |
|||
</Row> |
|||
</Checkbox.Group> |
|||
</Form.Item> |
|||
</> |
|||
); |
|||
}} |
|||
</Form.Item> |
|||
<Form.Item className="submitBtn" wrapperCol={{ span: 24 }}> |
|||
{actionState !== "view" && ( |
|||
<Button type="primary" className="submit" htmlType="submit"> |
|||
保存 |
|||
</Button> |
|||
)} |
|||
<Button className="cancel" onClick={onCancel}> |
|||
取消 |
|||
</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default PlatformConfiguration; |
|||
@ -1,5 +1,212 @@ |
|||
@import "@/assets/css/mixin.scss"; |
|||
|
|||
$color-container-bg : var(--color-container-bg); |
|||
$color-user-list-bg : var(--color-user-list-bg); |
|||
$color-text : var(--color-text); |
|||
$color-primary : var(--color-primary); |
|||
|
|||
.platform-configuration { |
|||
display: flex; |
|||
padding-top: 10px; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
|
|||
.paid-search { |
|||
display: block; |
|||
width: 375px; |
|||
padding: 10px 10px 20px 20px; |
|||
|
|||
.title { |
|||
width: 100%; |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Bold; |
|||
font-weight: 700; |
|||
text-align: left; |
|||
color: var(--color-text); |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.form-Wrap { |
|||
height: calc(100% - 45px); |
|||
overflow-y: auto; |
|||
scrollbar-width: none; |
|||
-ms-overflow-style: none; |
|||
|
|||
&::-webkit-scrollbar { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
.ant-select-selector, |
|||
.ant-picker, |
|||
.ant-input { |
|||
background-color: var(--color-search-list-item-bg) !important; |
|||
box-shadow: none !important; |
|||
color: var(--color-search-list-item-value); |
|||
border-color: var(--color-search-list-item-bd) !important; |
|||
} |
|||
|
|||
.yisa-search { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 24px; |
|||
|
|||
label { |
|||
color: var(--color-search-list-item-text); |
|||
flex: 0 0 25%; |
|||
max-width: 25%; |
|||
text-align: right; |
|||
padding-right: 8px; |
|||
} |
|||
|
|||
.form-con { |
|||
flex: 1; |
|||
width: 220px; |
|||
} |
|||
} |
|||
|
|||
.form-btn { |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
justify-content: space-between; |
|||
margin: 40px 0px 0px; |
|||
padding: 0 3px; |
|||
|
|||
.ant-btn+.ant-btn { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.ant-btn span { |
|||
font-size: 16px; |
|||
font-family: Microsoft YaHei, Microsoft YaHei-Regular; |
|||
font-weight: 400; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.reset { |
|||
width: 90px; |
|||
height: 36px; |
|||
background: var(--button-default-bg); |
|||
} |
|||
|
|||
.submit { |
|||
width: calc(100% - 100px); |
|||
height: 36px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.ant-btn+.ant-btn { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
.green { |
|||
background-color: #67c23a; |
|||
border-color: #67c23a; |
|||
} |
|||
|
|||
.paid-result { |
|||
width: calc(100% - 375px); |
|||
padding-bottom: 15px; |
|||
padding: 20px; |
|||
background: var(--color-user-list-bg); |
|||
border-top-left-radius: 20px; |
|||
box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.08); |
|||
|
|||
.result { |
|||
@include flex-columns; |
|||
|
|||
.row-head { |
|||
height: 32px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 13px; |
|||
|
|||
.number-wrapper { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
font-size: 14px; |
|||
|
|||
.letter { |
|||
color: var(--color-text); |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.total-number { |
|||
color: var(--color-primary); |
|||
font-weight: bold; |
|||
margin: 0 4px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cc-result-flow { |
|||
width: 100%; |
|||
height: calc(100% - 34px - 13px); |
|||
|
|||
.yisa-table { |
|||
width: 100%; |
|||
height: calc(100% - 32px - 15px); |
|||
overflow-y: auto !important; |
|||
@include scrollBar(var(--color-user-list-bg), #3B97FF); |
|||
|
|||
.ant-table-thead { |
|||
th { |
|||
background: var(--color-table-header-bg) !important; |
|||
} |
|||
} |
|||
|
|||
.ant-table-tbody { |
|||
td { |
|||
background: var(--color-table-body-bg) !important; |
|||
border-bottom-color: var(--color-table-border-bottom-color); |
|||
} |
|||
|
|||
tr:nth-child(even) { |
|||
td { |
|||
background: var(--color-table-body-bg-nth-child-even) !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
.modal-pay-configuration { |
|||
|
|||
.submitBtn { |
|||
text-align: center; |
|||
margin: 20px 0 0; |
|||
|
|||
.ant-btn { |
|||
width: 80px; |
|||
height: 35px; |
|||
border: none; |
|||
border-radius: 4px; |
|||
|
|||
span { |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.submit { |
|||
background: #409eff; |
|||
} |
|||
|
|||
.cancel { |
|||
background: var(--button-default-bg); |
|||
margin-left: 20px; |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -1,15 +0,0 @@ |
|||
import React, { useState, useRef, useEffect } from "react"; |
|||
// import { message, Pagination, Table, Space, Modal, } from "antd"; |
|||
// import { dictionary, utils } from "@/config/common"; |
|||
// import moment from 'moment' |
|||
// import { useSessionStorageState, useUpdateEffect, useSize, useUpdate } from 'ahooks'; |
|||
// import ajax from "@/services" |
|||
// import { FormInput, FormSelect, OptionPanel, ResultPanel, FormSliderPicker, AreaCascader, ImgResize, ImgZoom, } from "@/components" |
|||
// import "./index.scss"; |
|||
// import errorImg from "@/assets/images/layout/error.png" |
|||
// import { useLocation } from "react-router-dom"; |
|||
function PlatformMerchantConf() { |
|||
return <div>PlatformMerchantConf</div> |
|||
} |
|||
|
|||
export default PlatformMerchantConf; |
|||
@ -0,0 +1,87 @@ |
|||
import React from "react"; |
|||
import { Select, Input, Form, Checkbox, Row, Col } from "antd"; |
|||
|
|||
// 动态表单项 |
|||
export default function FormItemList(props) { |
|||
const { |
|||
type, |
|||
title, |
|||
label, |
|||
name, |
|||
value, |
|||
message = "必填", |
|||
allowClear = false, |
|||
disabled = false, |
|||
required = false, |
|||
options = [], |
|||
actionState, |
|||
} = props; |
|||
switch (type) { |
|||
case "title": |
|||
return ( |
|||
<h4 style={{ marginBottom: 20, marginLeft: 20, fontWeight: "bold" }}> |
|||
{title} |
|||
</h4> |
|||
); |
|||
case "input": |
|||
return ( |
|||
<Form.Item |
|||
label={label} |
|||
name={name} |
|||
rules={[ |
|||
{ |
|||
required: required, |
|||
message: message, |
|||
}, |
|||
] |
|||
} |
|||
> |
|||
{actionState === "view" ? ( |
|||
<> |
|||
{value} |
|||
<Input hidden /> |
|||
</> |
|||
) : ( |
|||
<Input |
|||
disabled={disabled} |
|||
placeholder="请输入" |
|||
autoComplete="off" |
|||
/> |
|||
)} |
|||
</Form.Item> |
|||
); |
|||
case "select": |
|||
return ( |
|||
<Form.Item |
|||
label={label} |
|||
name={name} |
|||
rules={[ |
|||
{ |
|||
required: required, |
|||
message: message, |
|||
}, |
|||
] |
|||
} |
|||
> |
|||
{actionState === "view" ? ( |
|||
<> |
|||
{value} |
|||
<Input hidden /> |
|||
</> |
|||
) : ( |
|||
<Select |
|||
placeholder="请选择" |
|||
showSearch |
|||
allowClear={allowClear} |
|||
disabled={disabled} |
|||
optionFilterProp="text" |
|||
fieldNames={{ label: "text", value: "id" }} |
|||
options={options} |
|||
/> |
|||
)} |
|||
</Form.Item> |
|||
); |
|||
default: |
|||
return null; |
|||
} |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
import FormItemList from "./FormItemList"; |
|||
|
|||
export { |
|||
FormItemList |
|||
} |
|||
@ -1,9 +1,10 @@ |
|||
import AppConf from "./AppConf" |
|||
import PayMerchantConf from "./PayMerchantConf" |
|||
import PlatformMerchantConf from "./PlatformMerchantConf" |
|||
import loadable from "@loadable/component"; |
|||
const AppConf = loadable(() => import("./AppConf")); |
|||
const PayMerchantConf = loadable(() => import("./PayMerchantConf")); |
|||
const PlatformMerchantConf = loadable(() => import("./PlatformMerchantConf")); |
|||
|
|||
export default { |
|||
AppConf, |
|||
PayMerchantConf, |
|||
PlatformMerchantConf |
|||
} |
|||
PlatformMerchantConf, |
|||
}; |
|||
@ -0,0 +1,5 @@ |
|||
import paymentConfiguration from "./paymentConfiguration" |
|||
|
|||
export default { |
|||
...paymentConfiguration |
|||
} |
|||
@ -0,0 +1,117 @@ |
|||
import ajax from "@/config/ajax"; |
|||
|
|||
// 获取应用配置相关下拉
|
|||
const getAppTypeScenariosInfo = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/get_app_type_scenarios_info", |
|||
type: "get", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
// 获取应用配置列表
|
|||
const getAppList = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/get_app_list", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
// 添加应用配置
|
|||
const getAppAdd = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/add_app", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
// 编辑应用配置
|
|||
const getAppEdit = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/edit_app", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
// 查看应用配置
|
|||
const getAppDetails = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/app_details", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
// 获取支付商户配置相关下拉
|
|||
const getPaymentMerchantSelectInfo = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/get_payment_merchant_select_info", |
|||
type: "get", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
// 根据配置平台获取相关应用数据
|
|||
const getPlatformToAppList = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/get_platform_to_app_list", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
// 获取支付商户配置列表
|
|||
const getPaymentMerchantList = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/get_payment_merchant_list", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
// 添加支付商户配置
|
|||
const getPaymentMerchantAdd = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/add_payment_merchant", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
// 编辑支付商户配置
|
|||
const getPaymentMerchantEdit = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/edit_payment_merchant", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
// 查看支付商户配置
|
|||
const getPaymentMerchantDetails = (params) => { |
|||
return ajax({ |
|||
url: "/api/fin/payment_config/payment_merchant_details", |
|||
type: "post", |
|||
data: params, |
|||
}); |
|||
}; |
|||
|
|||
|
|||
|
|||
|
|||
export default { |
|||
getAppTypeScenariosInfo, |
|||
getAppList, |
|||
getAppAdd, |
|||
getAppEdit, |
|||
getAppDetails, |
|||
getPaymentMerchantSelectInfo, |
|||
getPlatformToAppList, |
|||
getPaymentMerchantList, |
|||
getPaymentMerchantAdd, |
|||
getPaymentMerchantEdit, |
|||
getPaymentMerchantDetails |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue