feat 商户应用支付配置和支付通道管理

2025-09-04 11:26:03 +00:00 · 2023-05-26 17:16:45 +08:00
parent 1b8378346c
commit be4677d332
13 changed files with 299 additions and 54 deletions
--- a/src/components/registerGlobComp.ts
+++ b/src/components/registerGlobComp.ts
@@ -6,6 +6,7 @@ import { Icon } from './Icon'
 import {
  Layout,
  Input,
+  Image,
  Badge,
  Popover,
  InputNumber,
@@ -48,6 +49,7 @@ export function registerGlobComp(app: App) {
  app.use(Button)
  app.use(Link)
  app.use(Icon)
+  app.use(Image)
  app.use(Layout)
  app.use(InputNumber)
  app.use(Tag)
--- a/src/views/modules/develop/query/QuerySqlEdit.vue
+++ b/src/views/modules/develop/query/QuerySqlEdit.vue
@@ -18,7 +18,7 @@
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
        <a-input v-model:value="form.id" :disabled="showable" />
      </a-form-item>
      <a-form-item label="数据源ID" name="databaseId">
--- a/src/views/modules/develop/report/ProjectInfoEdit.vue
+++ b/src/views/modules/develop/report/ProjectInfoEdit.vue
@@ -17,7 +17,7 @@
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
-      <a-form-item label="主键" :hidden="true">
+      <a-form-item label="主键" name="id" :hidden="true">
        <a-input v-model:value="form.id" :disabled="showable" />
      </a-form-item>
      <a-form-item label="项目名称" name="name">
--- a/src/views/modules/payment/app/MchAppPayConfigEdit.vue
+++ b/src/views/modules/payment/app/MchAppPayConfigEdit.vue
@@ -0,0 +1,44 @@
+<template>
+    <AlipayConfigEdit v-if="currentComponent === AlipayConfigEdit"/>
+    <WechatPayConfigEdit v-else-if="currentComponent === AlipayConfigEdit"/>
+</template>
+<script setup lang="ts">
+  import { BasicDrawer } from '/@/components/Drawer'
+  import { $ref } from 'vue/macros'
+  import AlipayConfigEdit from '/@/views/modules/payment/channel/alipay/AlipayConfigEdit.vue'
+  import WechatPayConfigEdit from '/@/views/modules/payment/channel/wechat/WechatPayConfigEdit.vue'
+  import { MchAppPayConfigResult } from '/@/views/modules/payment/app/MchApplication.api'
+
+  let currentComponent = $ref<any>()
+  let config = $ref<MchAppPayConfigResult>({ channelName: '配置' } as MchAppPayConfigResult)
+  let visible = $ref(false)
+
+  const map = {
+    ali_pay: 'AlipayConfigEdit',
+    wechat_pay: 'WechatPayConfigEdit',
+    union_pay: null,
+    cash_pay: null,
+    wallet_pay: null,
+    voucher_pay: null,
+  }
+
+  /**
+   * 打开
+   */
+  function show(record: MchAppPayConfigResult) {
+    config = record
+    visible = true
+    currentComponent = map[record.channelCode]
+  }
+
+  /**
+   * 关闭
+   */
+  function handleCancel() {
+    visible = false
+  }
+
+  defineExpose({ show })
+</script>
+
+<style scoped lang="less"></style>
--- a/src/views/modules/payment/app/MchAppPayConfigList.vue
+++ b/src/views/modules/payment/app/MchAppPayConfigList.vue
@@ -0,0 +1,95 @@
+<template>
+  <basic-drawer showFooter v-bind="$attrs" title="支付通道配置" width="70%" :visible="visible" :maskClosable="false" @close="handleCancel">
+    <a-spin :spinning="confirmLoading">
+      <a-list style="margin-left: 20px" :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 5 }" :data-source="appConfigs">
+        <template #renderItem="{ item }">
+          <a-card hoverable style="width: 200px; margin-bottom: 50px" @click="setting(item)">
+            <template #cover>
+              <a-image :preview="false" :src="urlPrefix + item.img" :fallback="fallbackImg" />
+            </template>
+            <a-card-meta :title="item.channelName">
+              <template #description>
+                <template v-if="item.state === 'enable'">
+                  <a-badge dot color="green" />
+                  <span style="color: green">已启用</span>
+                </template>
+                <template v-else-if="item.state === 'disable'">
+                  <a-badge dot color="red" />
+                  <span style="color: red">未启用</span>
+                </template>
+                <template v-else>
+                  <a-badge dot color="grey" />
+                  <span style="color: grey">未配置</span>
+                </template>
+              </template>
+            </a-card-meta>
+          </a-card>
+        </template>
+      </a-list>
+    </a-spin>
+    <mch-app-pay-config-edit ref="mchAppPayConfigEdit" />
+    <template #footer>
+      <a-button key="cancel" @click="handleCancel">关闭</a-button>
+    </template>
+  </basic-drawer>
+</template>
+
+<script setup lang="ts">
+  import { BasicDrawer } from '/@/components/Drawer'
+  import { $ref } from 'vue/macros'
+  import { findAllConfig, MchApplication, MchAppPayConfigResult } from './MchApplication.api'
+  import { getFilePreviewUrlPrefix } from '/@/api/common/FileUpload'
+  import MchAppPayConfigEdit from './MchAppPayConfigEdit.vue'
+
+  let confirmLoading = $ref(false)
+  let visible = $ref(false)
+  let loading = $ref(false)
+  let mchApp = $ref<MchApplication>()
+  let appConfigs = $ref<MchAppPayConfigResult[]>([])
+  let urlPrefix = $ref<string>()
+
+  const mchAppPayConfigEdit = $ref<any>()
+
+  const fallbackImg =
+    'data:image/png;base64,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'
+
+  /**
+   * 初始化并展示
+   */
+  function show(mchApplication) {
+    visible = true
+    initData()
+    mchApp = mchApplication
+  }
+
+  /**
+   * 初始化数据
+   */
+  async function initData() {
+    loading = true
+    const configResults = await findAllConfig(mchApp?.id)
+    appConfigs = configResults.data
+
+    const urlPrefixResult = await getFilePreviewUrlPrefix()
+    urlPrefix = urlPrefixResult.data
+    loading = false
+  }
+
+  /**
+   * 关闭
+   */
+  function handleCancel() {
+    visible = false
+  }
+
+  /**
+   * 设置
+   */
+  function setting(record) {
+    mchAppPayConfigEdit.show(record)
+  }
+
+  defineExpose({ show })
+</script>
+
+<style scoped lang="less"></style>
--- a/src/views/modules/payment/app/MchApplication.api.ts
+++ b/src/views/modules/payment/app/MchApplication.api.ts
@@ -21,6 +21,16 @@ export function findAll() {
  })
 }

+/**
+ * 关联支付配置列表
+ */
+export function findAllConfig(appId) {
+  return defHttp.get<Result<MchAppPayConfigResult[]>>({
+    url: '/mch/app/findAllConfig',
+    params: { appId },
+  })
+}
+
 /**
 * 获取单条
 */
@@ -76,3 +86,21 @@ export interface MchApplication extends BaseEntity {
  // 备注
  remark?: string
 }
+
+/**
+ * 支付通道配置
+ */
+export interface MchAppPayConfigResult {
+  // 支付通道编码
+  channelCode: string
+  // 支付通道名称
+  channelName: string
+  // 状态
+  state: string
+  // 排序
+  sortNo: number
+  // 图片
+  img: string
+  // 关联配置ID
+  configId: string
+}
--- a/src/views/modules/payment/app/MchApplicationEdit.vue
+++ b/src/views/modules/payment/app/MchApplicationEdit.vue
@@ -18,7 +18,7 @@
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
-        <a-form-item label="主键" :hidden="true">
+        <a-form-item label="主键" name="id" :hidden="true">
          <a-input v-model:value="form.id" :disabled="showable" />
        </a-form-item>
        <a-form-item label="应用编码" v-show="editable || showable" name="appNo">
--- a/src/views/modules/payment/app/MchApplicationList.vue
+++ b/src/views/modules/payment/app/MchApplicationList.vue
@@ -72,7 +72,7 @@
  import { useTabs } from '/@/hooks/web/useTabs'
  import { useTitle } from '@vueuse/core'
  import ALink from '/@/components/Link/Link.vue'
-  import PayConfig from './PayConfig.vue'
+  import PayConfig from './MchAppPayConfigList.vue'

  // 使用hooks
  const { handleTableChange, pageQueryResHandel, pagination, pages, model, loading, superQueryFlag } = useTablePage(queryPage)
@@ -169,7 +169,7 @@
  }
  // 支付配置
  function config(record) {
-    payConfig.show(record.appNo)
+    payConfig.show(record)
  }

  // 删除
--- a/src/views/modules/payment/app/PayConfig.vue
+++ b/src/views/modules/payment/app/PayConfig.vue
@@ -1,35 +0,0 @@
-<template>
-  <basic-drawer showFooter v-bind="$attrs" title="支付参数配置" width="70%" :visible="visible" :maskClosable="false" @close="handleCancel">
-    <a-spin :spinning="confirmLoading" />
-    <template #footer>
-      <a-button key="cancel" @click="handleCancel">关闭</a-button>
-    </template>
-  </basic-drawer>
-</template>
-
-<script setup lang="ts">
-  import { BasicDrawer } from '/@/components/Drawer'
-  import { $ref } from 'vue/macros'
-
-  let confirmLoading = $ref(false)
-  let visible = $ref(false)
-
-  /**
-   * 初始化并展示
-   */
-  function show(appNo) {
-    visible = true
-    console.log(appNo)
-  }
-
-  /**
-   * 关闭
-   */
-  function handleCancel() {
-    visible = false
-  }
-
-  defineExpose({ show })
-</script>
-
-<style scoped lang="less"></style>
--- a/src/views/modules/payment/channel/config/PayChannelConfig.api.ts
+++ b/src/views/modules/payment/channel/config/PayChannelConfig.api.ts
@@ -61,6 +61,23 @@ export function del(id) {
  })
 }

+/**
+ * 编码是否被使用
+ */
+export const existsByCode = (code: string) => {
+  return defHttp.get<Result<boolean>>({
+    url: '/channel/existsByCode',
+    params: { code },
+  })
+}
+export const existsByCodeNotId = (code: string, id) => {
+  return defHttp.get<Result<boolean>>({
+    url: '/channel/existsByCodeNotId',
+    params: { code, id },
+  })
+}
+
+
 /**
 * 支付通道配置
 */
@@ -69,6 +86,8 @@ export interface PayChannelConfig extends BaseEntity {
  code?: string
  // 支付通道名称
  name?: string
+  // 排序
+  sortNo?: number
  // 图片
  image?: string
 }
--- a/src/views/modules/payment/channel/config/PayChannelConfigEdit.vue
+++ b/src/views/modules/payment/channel/config/PayChannelConfigEdit.vue
@@ -18,17 +18,38 @@
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
-        <a-form-item label="主键" :hidden="true">
+        <a-form-item label="主键" name="id" :hidden="true">
          <a-input v-model:value="form.id" :disabled="showable" />
        </a-form-item>
        <a-form-item label="通道编码" name="code">
          <a-input v-model:value="form.code" :disabled="showable" placeholder="请输入通道编码" />
        </a-form-item>
-        <a-form-item label="支付通道名称" name="channelName">
-          <a-input v-model:value="form.channelName" :disabled="showable" placeholder="请输入支付通道名称" />
+        <a-form-item label="支付通道名称" name="name">
+          <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入支付通道名称" />
        </a-form-item>
-        <a-form-item label="图片" name="image">
-          <a-input v-model:value="form.image" :disabled="showable" placeholder="请输入图片" />
+        <a-form-item label="排序" name="sortNo">
+          <a-input-number placeholder="请输入排序，可以是小数" :disabled="showable" v-model:value="form.sortNo" style="width: 200px" />
+        </a-form-item>
+        <a-form-item label="logo图" name="image">
+          <a-input v-model:value="form.value" v-show="false" />
+          <a-form-item-rest>
+            <a-upload
+              v-if="!showable"
+              name="file"
+              :multiple="false"
+              :action="uploadAction"
+              :headers="tokenHeader"
+              :showUploadList="false"
+              @change="handleChange"
+            >
+              <a-button preIcon="ant-design:cloud-upload-outlined" type="primary"> 上传图片 </a-button>
+            </a-upload>
+          </a-form-item-rest>
+          <a-form-item-rest v-if="form.image">
+            <div style="margin-top: 15px">
+              <a-image :src="urlPrefix + form.image" />
+            </div>
+          </a-form-item-rest>
        </a-form-item>
      </a-form>
    </a-spin>
@@ -45,10 +66,14 @@
  import { nextTick, reactive } from 'vue'
  import { $ref } from 'vue/macros'
  import useFormEdit from '/@/hooks/bootx/useFormEdit'
-  import { add, get, update, PayChannelConfig } from './PayChannelConfig.api'
+  import { add, get, update, existsByCode, existsByCodeNotId, PayChannelConfig } from './PayChannelConfig.api'
  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
  import { FormEditType } from '/@/enums/formTypeEnum'
  import { BasicDrawer } from '/@/components/Drawer'
+  import { useValidate } from '/@/hooks/bootx/useValidate'
+  import { useUpload } from '/@/hooks/bootx/useUpload'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { getFilePreviewUrlPrefix } from '/@/api/common/FileUpload'
  const {
    initFormEditType,
    handleCancel,
@@ -63,24 +88,47 @@
    showable,
    formEditType,
  } = useFormEdit()
+  const { existsByServer } = useValidate()
+  const { tokenHeader, uploadAction } = useUpload('/file/upload')
+  const { createMessage } = useMessage()
+
  // 表单
  const formRef = $ref<FormInstance>()
+  let urlPrefix = $ref<string>()
  let form = $ref<PayChannelConfig>({
    id: null,
    code: '',
    name: '',
-    image: '',
+    sortNo: 0,
+    image: undefined,
  })
  // 校验
-  const rules = reactive({} as Record<string, Rule[]>)
+  const rules = reactive({
+    code: [
+      { required: true, message: '请输入支付通道编码' },
+      { validator: validateCode, trigger: 'blur' },
+    ],
+    name: [{ required: true, message: '请输入支付通道编码' }],
+    sortNo: [{ required: true, message: '请输入支付通道编码' }],
+  } as Record<string, Rule[]>)
  // 事件
  const emits = defineEmits(['ok'])
  // 入口
  function init(id, editType: FormEditType) {
    initFormEditType(editType)
+    initData()
    resetForm()
    getInfo(id, editType)
  }
+
+  /**
+   * 初始化数据
+   */
+  async function initData() {
+    const result = await getFilePreviewUrlPrefix()
+    urlPrefix = result.data
+  }
+
  // 获取信息
  function getInfo(id, editType: FormEditType) {
    if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
@@ -107,6 +155,29 @@
      emits('ok')
    })
  }
+  // 校验编码重复
+  async function validateCode() {
+    const { code, id } = form
+    return existsByServer(code, id, formEditType, existsByCode, existsByCodeNotId)
+  }
+
+  /**
+   * 文件上传
+   */
+  function handleChange(info) {
+    // 上传完毕
+    if (info.file.status === 'done') {
+      const res = info.file.response
+      if (!res.code) {
+        form.image = res.data.id
+        createMessage.success(`${info.file.name} 上传成功!`)
+      } else {
+        createMessage.error(`${res.msg}`)
+      }
+    } else if (info.file.status === 'error') {
+      createMessage.error('上传失败')
+    }
+  }

  // 重置表单
  function resetForm() {
--- a/src/views/modules/payment/channel/config/PayChannelConfigList.vue
+++ b/src/views/modules/payment/channel/config/PayChannelConfigList.vue
@@ -15,7 +15,11 @@
        <vxe-column type="seq" width="60" />
        <vxe-column field="code" title="通道编码" />
        <vxe-column field="name" title="支付通道名称" />
-        <vxe-column field="image" title="图片" />
+        <vxe-column field="image" title="图片" width="60">
+          <template #default="{ row }">
+            <a-image :src="urlPrefix + row.image" :fallback="fallbackImg" :width="35" />
+          </template>
+        </vxe-column>
        <vxe-column field="createTime" title="创建时间" />
        <vxe-column fixed="right" width="150" :showOverflow="false" title="操作">
          <template #default="{ row }">
@@ -27,7 +31,7 @@
              <a-link @click="edit(row)">编辑</a-link>
            </span>
            <a-divider type="vertical" />
-            <a-link danger @click="remove(row)" >删除</a-link>
+            <a-link danger @click="remove(row)">删除</a-link>
          </template>
        </vxe-column>
      </vxe-table>
@@ -50,31 +54,48 @@
  import { del, page } from './PayChannelConfig.api'
  import useTablePage from '/@/hooks/bootx/useTablePage'
  import PayChannelConfigEdit from './PayChannelConfigEdit.vue'
-  import { VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+  import { VxeTableInstance, VxeToolbarInstance, VxePager, VxeTable, VxeToolbar } from 'vxe-table'
  import BQuery from '/@/components/Bootx/Query/BQuery.vue'
  import { FormEditType } from '/@/enums/formTypeEnum'
  import { useMessage } from '/@/hooks/web/useMessage'
  import { QueryField } from '/@/components/Bootx/Query/Query'
+  import { getFilePreviewUrlPrefix } from '/@/api/common/FileUpload'

  // 使用hooks
  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
  const { notification, createMessage, createConfirm } = useMessage()

+  const fallbackImg =
+    'data:image/png;base64,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'
  // 查询条件
-  const fields = [] as QueryField[]
+  const fields = [
+    { field: 'code', name: '编码', placeholder: '请输入支付通道编码' },
+    { field: 'name', name: '名称', placeholder: '请输入支付通道名称' },
+  ] as QueryField[]

  const xTable = $ref<VxeTableInstance>()
  const xToolbar = $ref<VxeToolbarInstance>()
  const payChannelConfigEdit = $ref<any>()

+  let urlPrefix = $ref<string>()
+
  onMounted(() => {
    vxeBind()
+    initData()
    queryPage()
  })
  function vxeBind() {
    xTable?.connect(xToolbar as VxeToolbarInstance)
  }

+  /**
+   * 初始化数据
+   */
+  async function initData() {
+    const result = await getFilePreviewUrlPrefix()
+    urlPrefix = result.data
+  }
+
  // 分页查询
  function queryPage() {
    loading.value = true
@@ -111,7 +132,7 @@
        })
      },
    })
-    }
+  }
 </script>

 <style lang="less" scoped></style>
--- a/src/views/modules/payment/merchant/MerchantInfoEdit.vue
+++ b/src/views/modules/payment/merchant/MerchantInfoEdit.vue
@@ -18,7 +18,7 @@
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
-        <a-form-item label="主键" :hidden="true">
+        <a-form-item label="主键" name="id" :hidden="true">
          <a-input v-model:value="form.id" :disabled="showable" />
        </a-form-item>
        <a-form-item v-if="editable || showable" label="商户号" name="mchNo">