feat(): 新增应用配置和支付商户配置页面

src/assets/css/theme.scss

@@ -214,7 +214,7 @@ body {
     --color-card-border:#DCDCDC;
 
     --color-no-data-p: #000;
-
+    --ant-select-dropdown-bg: #fff; 
   }
 
 

src/pages/FinancialMgm/PayConf/AppConf/index.jsx

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

src/pages/FinancialMgm/PayConf/AppConf/index.scss

@@ -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;
+    }
+  }
+}

src/pages/FinancialMgm/PayConf/AppConf/loadable.jsx

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

src/pages/FinancialMgm/PayConf/PayMerchantConf/index.jsx

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

src/pages/FinancialMgm/PayConf/PayMerchantConf/index.scss

@@ -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;
+    }
+  }
+
+}

src/pages/FinancialMgm/PayConf/PayMerchantConf/loadable.jsx

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

src/pages/FinancialMgm/PayConf/PlatformMerchantConf/index.jsx

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

src/pages/FinancialMgm/PayConf/PlatformMerchantConf/index.scss

@@ -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;
+    }
+  }
+
+}

src/pages/FinancialMgm/PayConf/PlatformMerchantConf/loadable.jsx

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

src/pages/FinancialMgm/PayConf/components/FormItemList/index.jsx

@@ -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;
+  }
+}

src/pages/FinancialMgm/PayConf/components/index.jsx

@@ -0,0 +1,5 @@
+import FormItemList from "./FormItemList";
+
+export {
+  FormItemList
+}

src/pages/FinancialMgm/PayConf/index.jsx

@@ -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,
+};

src/router/router.config.js

@@ -854,6 +854,24 @@ let routes = [
         component: pages.PayRepeat,
       },
       {
+        path: "/financialMgm/appConfiguration",
+        text: "应用配置",
+        name: "appConfiguration",
+        component: pages.AppConf,
+      },
+      {
+        path: "/financialMgm/merchantConfiguration",
+        text: "支付商户配置",
+        name: "merchantConfiguration",
+        component: pages.PayMerchantConf,
+      },
+      {
+        path: "/financialMgm/platformConfiguration",
+        text: "平台商户配置",
+        name: "platformConfiguration",
+        component: pages.PlatformMerchantConf,
+      },
+      {
         // -------------------------------系统管理 -   区域管理
         path: "/systemMgm/areaManage",
         text: "区域管理",

src/services/FinancialMgm/index.js

@@ -0,0 +1,5 @@
+import paymentConfiguration from "./paymentConfiguration"
+
+export default {
+  ...paymentConfiguration
+}

src/services/FinancialMgm/paymentConfiguration.js

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

src/services/index.js

@@ -18,6 +18,7 @@ import ZombieCarCleanRecord from "./OutRoadMgm";
 import AdminMgm from "./SystemMgm";
 import RoleMgm from "./SystemMgm";
 import BusinessConf from "./SystemMgm";
+import FinancialMgm from "./FinancialMgm";
 const api = {};
 export default {
   ...api,
@@ -40,5 +41,6 @@ export default {
   ...ZombieCarCleanRecord,
   ...AdminMgm,
   ...RoleMgm,
-  ...BusinessConf
+  ...BusinessConf,
+  ...FinancialMgm
 };