feat 微信支付通道

src/views/modules/notice/template/MessageTemplateEdit.vue

@@ -1,6 +1,5 @@
 <template>
   <basic-modal
-    defaultFullscreen
     v-bind="$attrs"
     :loading="confirmLoading"
     :width="modalWidth"

src/views/modules/notice/template/TemplateRender.vue

@@ -1,20 +1,15 @@
 <template>
-  <basic-modal
-    defaultFullscreen
-    v-bind="$attrs"
-    width="60%"
-    title="渲染测试"
-    :loading="confirmLoading"
-    :visible="visible"
-    @cancel="handleCancel"
-  >
+  <basic-modal v-bind="$attrs" width="60%" title="渲染测试" :loading="confirmLoading" :visible="visible" @cancel="handleCancel">
     <a-form ref="formRef" layout="vertical">
       <a-form-item label="模板名称">
         <a-input v-model:value="templateInfo.name" disabled />
       </a-form-item>
+      <a-form-item label="模板数据">
+        <code-editor style="height: 100px" readonly v-model:value="templateInfo.data" :mode="MODE.HTML" />
+      </a-form-item>
       <a-form-item label="测试参数(json格式)">
         <div style="border: 1px solid #ccc">
-          <code-editor style="height: 250px" v-model:value="param" :mode="MODE.JSON" />
+          <code-editor style="height: 150px" v-model:value="param" :mode="MODE.JSON" />
         </div>
       </a-form-item>
       <a-form-item label="渲染内容">

src/views/modules/payment/channel/alipay/AlipayConfig.api.ts

@@ -0,0 +1,133 @@
+import { defHttp } from '/@/utils/http/axios'
+import { PageResult, Result } from '/#/axios'
+import { BaseEntity, KeyValue } from '/#/web'
+
+/**
+ * 分页
+ */
+export function page(params) {
+  return defHttp.get<Result<PageResult<AlipayConfig>>>({
+    url: '/alipay/page',
+    params,
+  })
+}
+
+/**
+ * 查询全部
+ */
+export function findAll() {
+  return defHttp.get<Result<AlipayConfig[]>>({
+    url: '/alipay/findAll',
+  })
+}
+
+/**
+ * 获取单条
+ */
+export function get(id) {
+  return defHttp.get<Result<AlipayConfig>>({
+    url: '/alipay/findById',
+    params: { id },
+  })
+}
+
+/**
+ * 添加
+ */
+export function add(obj: AlipayConfig) {
+  return defHttp.post({
+    url: '/alipay/add',
+    data: obj,
+  })
+}
+
+/**
+ * 更新
+ */
+export function update(obj: AlipayConfig) {
+  return defHttp.post({
+    url: '/alipay/update',
+    data: obj,
+  })
+}
+
+/**
+ * 删除
+ */
+export function del(id) {
+  return defHttp.delete({
+    url: '/alipay/delete',
+    params: { id },
+  })
+}
+
+/**
+ * 获取支付宝支持支付方式
+ */
+export function findPayWayList() {
+  return defHttp.get<Result<KeyValue[]>>({
+    url: '/alipay/findPayWayList',
+  })
+}
+
+/**
+ * 启用指定的支付宝配置
+ */
+export function setUpActivity(id) {
+  return defHttp.post({
+    url: '/alipay/setUpActivity',
+    params: { id },
+  })
+}
+
+/**
+ * 清除指定的支付宝配置
+ */
+export function clearActivity(id) {
+  return defHttp.post({
+    url: '/alipay/clearActivity',
+    params: { id },
+  })
+}
+
+/**
+ * 支付宝配置
+ */
+export interface AlipayConfig extends BaseEntity {
+  // 名称
+  name?: string
+  // 支付宝商户appId
+  appId?: string
+  // 服务器异步通知页面路径
+  notifyUrl?: string
+  // 页面跳转同步通知页面路径
+  returnUrl?: string
+  // 请求网关地址
+  serverUrl?: string
+  // 认证方式
+  authType?: number
+  // 签名类型
+  signType?: string
+  // 支付宝公钥
+  alipayPublicKey?: string
+  // 私钥
+  privateKey?: string
+  // 应用公钥
+  appCert?: string
+  // 支付宝公钥证书
+  alipayCert?: string
+  // 支付宝CA根证书
+  alipayRootCert?: string
+  // 是否沙箱环境
+  sandbox?: boolean
+  // 超时配置
+  expireTime?: number
+  // 支持的支付类型
+  payWayList?: KeyValue[]
+  // 备注
+  remark?: string
+  // 是否启用
+  activity?: boolean
+  // 状态
+  state?: number
+}

src/views/modules/payment/channel/alipay/AlipayConfigEdit.vue

@@ -0,0 +1,226 @@
+<template>
+  <basic-drawer
+    showFooter
+    v-bind="$attrs"
+    :title="title"
+    :width="modalWidth"
+    :visible="visible"
+    :maskClosable="false"
+    @close="handleCancel"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form
+        class="small-from-item"
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        :validate-trigger="['blur', 'change']"
+        :label-col="labelCol"
+        :wrapper-col="wrapperCol"
+      >
+        <a-form-item label="主键" :hidden="true">
+          <a-input v-model:value="form.id" :disabled="showable" />
+        </a-form-item>
+        <a-form-item label="名称" name="name">
+          <a-input v-model:value="form.name" :disabled="showable" placeholder="请输入名称" />
+        </a-form-item>
+        <a-form-item label="AppId" name="appId">
+          <a-input v-model:value="form.appId" :disabled="showable" placeholder="请输入支付宝商户AppId" />
+        </a-form-item>
+        <a-form-item label="异步通知URL" name="notifyUrl">
+          <a-input v-model:value="form.notifyUrl" :disabled="showable" placeholder="请输入异步通知URL" />
+        </a-form-item>
+        <a-form-item label="同步通知URL" name="returnUrl">
+          <a-input v-model:value="form.returnUrl" :disabled="showable" placeholder="请输入同步通知URL" />
+        </a-form-item>
+        <a-form-item label="支付网关URL" name="serverUrl">
+          <a-input v-model:value="form.serverUrl" :disabled="showable" placeholder="请输入支付网关URL" />
+        </a-form-item>
+        <a-form-item label="默认支付超时配置(分钟)" name="expireTime">
+          <a-input-number
+            :min="1"
+            :max="12000"
+            :step="1"
+            :disabled="showable"
+            placeholder="请输入超时配置"
+            v-model:value="form.expireTime"
+          />
+        </a-form-item>
+        <a-form-item label="支持支付方式" name="payWayList">
+          <a-select
+            allowClear
+            mode="multiple"
+            v-model:value="form.payWayList"
+            :disabled="showable"
+            :options="payWayList"
+            style="width: 100%"
+            placeholder="选择支付方式"
+          />
+        </a-form-item>
+        <a-form-item label="沙箱环境" name="sandbox">
+          <a-switch checked-children="是" un-checked-children="否" v-model:checked="form.sandbox" :disabled="showable" />
+        </a-form-item>
+        <a-form-item v-show="showable" label="是否启用" name="activity">
+          <a-tag>{{ form.activity ? '启用' : '未启用' }}</a-tag>
+        </a-form-item>
+        <a-form-item label="认证方式" name="authType">
+          <a-select allowClear :disabled="showable" v-model:value="form.authType" style="width: 100%" placeholder="选择认证方式">
+            <a-select-option :key="1">公钥模式</a-select-option>
+            <a-select-option :key="2">证书模式</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="签名类型" name="signType">
+          <a-select allowClear :disabled="showable" v-model:value="form.signType" style="width: 100%" placeholder="选择签名类型">
+            <a-select-option key="RSA2">RSA2秘钥</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item v-show="form.authType === 1" label="支付宝公钥" name="alipayPublicKey">
+          <a-textarea v-model:value="form.alipayPublicKey" :disabled="showable" placeholder="请输入支付宝公钥" />
+        </a-form-item>
+        <a-form-item v-show="form.authType === 2" label="应用公钥证书" name="appCert">
+          <a-textarea v-model:value="form.appCert" :disabled="showable" placeholder="请输入应用公钥证书内容" />
+        </a-form-item>
+        <a-form-item v-show="form.authType === 2" label="支付宝公钥证书" name="alipayCert">
+          <a-textarea v-model:value="form.alipayCert" :disabled="showable" placeholder="请输入支付宝公钥证书内容" />
+        </a-form-item>
+        <a-form-item v-show="form.authType === 2" label="支付宝CA根证书" name="alipayRootCert">
+          <a-textarea v-model:value="form.alipayRootCert" :disabled="showable" placeholder="请输入支付宝CA根证书" />
+        </a-form-item>
+        <a-form-item label="应用私钥" name="privateKey">
+          <a-textarea v-model:value="form.privateKey" :disabled="showable" placeholder="请输入应用私钥" />
+        </a-form-item>
+        <a-form-item label="备注" name="remark">
+          <a-textarea v-model:value="form.remark" :disabled="showable" placeholder="请输入备注" />
+        </a-form-item>
+      </a-form>
+    </a-spin>
+    <template #footer>
+      <a-space>
+        <a-button key="cancel" @click="handleCancel">取消</a-button>
+        <a-button v-if="!showable" key="forward" :loading="confirmLoading" type="primary" @click="handleOk">保存</a-button>
+      </a-space>
+    </template>
+  </basic-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { computed, nextTick, reactive } from 'vue'
+  import { $ref } from 'vue/macros'
+  import useFormEdit from '/@/hooks/bootx/useFormEdit'
+  import { add, get, update, AlipayConfig, findPayWayList } from './AlipayConfig.api'
+  import { FormInstance, Rule } from 'ant-design-vue/lib/form'
+  import { FormEditType } from '/@/enums/formTypeEnum'
+  import { BasicDrawer } from '/@/components/Drawer'
+  import { KeyValue } from '/#/web'
+  const {
+    initFormEditType,
+    handleCancel,
+    search,
+    diffForm,
+    labelCol,
+    wrapperCol,
+    modalWidth,
+    title,
+    confirmLoading,
+    visible,
+    editable,
+    showable,
+    formEditType,
+  } = useFormEdit()
+  // 表单
+  const formRef = $ref<FormInstance>()
+
+  let payWayList = $ref<KeyValue[]>([])
+  let form = $ref({
+    name: '',
+    appId: '',
+    notifyUrl: '',
+    returnUrl: '',
+    serverUrl: '',
+    authType: 1,
+    signType: 'RSA2',
+    alipayPublicKey: '',
+    appCert: '',
+    alipayCert: '',
+    alipayRootCert: '',
+    privateKey: '',
+    expireTime: 15,
+    payWayList: [],
+    sandbox: false,
+    remark: '',
+  } as AlipayConfig)
+  let rawForm
+  // 校验
+  const rules = computed(() => {
+    return {
+      name: [{ required: true, message: '请输入配置名称' }],
+      appId: [{ required: true, message: '请输入AppId' }],
+      notifyUrl: [{ required: true, message: '请输入异步通知页面地址' }],
+      returnUrl: [{ required: true, message: '请输入同步通知页面地址' }],
+      serverUrl: [{ required: true, message: '请输入请求网关地址' }],
+      authType: [{ required: true, message: '请选择认证方式' }],
+      signType: [{ required: true, message: '请选择加密类型' }],
+      alipayPublicKey: [{ required: form.authType === 1, message: '请输入支付宝公钥' }],
+      appCert: [{ required: form.authType === 2, message: '请输入应用证书' }],
+      alipayCert: [{ required: form.authType === 2, message: '请输入支付宝证书' }],
+      alipayRootCert: [{ required: form.authType === 2, message: '请输入支付宝CA根证书' }],
+      privateKey: [{ required: true, message: '请输入支付私钥' }],
+      sandbox: [{ required: true, message: '请选择是否为沙箱环境' }],
+      expireTime: [{ required: true, message: '请输入默认超时配置' }],
+      payWayList: [{ required: true, message: '请选择支持的支付类型' }],
+    } as Record<string, Rule[]>
+  })
+  // 事件
+  const emits = defineEmits(['ok'])
+  // 入口
+  function init(id, editType: FormEditType) {
+    findPayWayList().then(({ data }) => {
+      payWayList = data
+    })
+    initFormEditType(editType)
+    resetForm()
+    getInfo(id, editType)
+  }
+  // 获取信息
+  function getInfo(id, editType: FormEditType) {
+    if ([FormEditType.Edit, FormEditType.Show].includes(editType)) {
+      confirmLoading.value = true
+      get(id).then(({ data }) => {
+        rawForm = { ...data }
+        form = data
+        confirmLoading.value = false
+      })
+    } else {
+      confirmLoading.value = false
+    }
+  }
+  // 保存
+  function handleOk() {
+    formRef.validate().then(async () => {
+      confirmLoading.value = true
+      if (formEditType.value === FormEditType.Add) {
+        await add(form)
+      } else if (formEditType.value === FormEditType.Edit) {
+        await update({
+          ...form,
+          ...diffForm(rawForm, form, 'appId', 'alipayPublicKey', 'appCert', 'alipayCert', 'alipayRootCert', 'privateKey'),
+        })
+      }
+      confirmLoading.value = false
+      handleCancel()
+      emits('ok')
+    })
+  }
+
+  // 重置表单
+  function resetForm() {
+    nextTick(() => {
+      formRef.resetFields()
+    })
+  }
+  defineExpose({
+    init,
+  })
+</script>
+
+<style lang="less" scoped></style>

src/views/modules/payment/channel/alipay/AlipayConfigList.vue

@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <div class="m-3 p-3 pt-5 bg-white">
+      <b-query :query-params="model.queryParam" :fields="fields" @query="queryPage" @reset="resetQueryParams" />
+    </div>
+    <div class="m-3 p-3 bg-white">
+      <vxe-toolbar ref="xToolbar" custom :refresh="{ query: queryPage }">
+        <template #buttons>
+          <a-space>
+            <a-button type="primary" pre-icon="ant-design:plus-outlined" @click="add">新建</a-button>
+          </a-space>
+        </template>
+      </vxe-toolbar>
+      <vxe-table row-id="id" ref="xTable" :data="pagination.records" :loading="loading">
+        <vxe-column type="seq" width="60" />
+        <vxe-column field="name" title="名称" />
+        <vxe-column field="appId" title="商户appId" />
+        <vxe-column field="authType" title="认证方式">
+          <template #default="{ row }">
+            <a-tag v-show="row.authType === 1">公钥</a-tag>
+            <a-tag v-show="row.authType === 2">证书</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="signType" title="签名类型" />
+        <vxe-column field="sandbox" title="沙箱">
+          <template #default="{ row }">
+            <a-tag v-if="row.sandbox">是</a-tag>
+            <a-tag v-else>否</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column field="activity" title="活动状态">
+          <template #default="{ row }">
+            <a-tag color="green" v-if="row.activity">启用</a-tag>
+            <a-tag color="red" v-else>未启用</a-tag>
+          </template>
+        </vxe-column>
+        <vxe-column fixed="right" width="200" :showOverflow="false" title="操作">
+          <template #default="{ row }">
+            <a-link @click="show(row)">查看</a-link>
+            <a-divider type="vertical" />
+            <a-link @click="edit(row)">编辑</a-link>
+            <a-divider type="vertical" />
+            <a-dropdown>
+              <a> 更多 <icon icon="ant-design:down-outlined" :size="12" /></a>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item>
+                    <a-link v-if="!row.activity" @click="setup(row)">启用</a-link>
+                    <a-link v-else danger @click="clear(row)">停用</a-link>
+                  </a-menu-item>
+                  <a-menu-item>
+                    <a-link @click="remove(row)" style="color: red">删除</a-link>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </template>
+        </vxe-column>
+      </vxe-table>
+      <vxe-pager
+        size="medium"
+        :loading="loading"
+        :current-page="pagination.current"
+        :page-size="pagination.size"
+        :total="pagination.total"
+        @page-change="handleTableChange"
+      />
+      <alipay-config-edit ref="alipayConfigEdit" @ok="queryPage" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted } from 'vue'
+  import { $ref } from 'vue/macros'
+  import { clearActivity, del, page, setUpActivity } from './AlipayConfig.api'
+  import useTablePage from '/@/hooks/bootx/useTablePage'
+  import AlipayConfigEdit from './AlipayConfigEdit.vue'
+  import { VxeTableInstance, VxeToolbarInstance } 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 ALink from "/@/components/Link/Link.vue";
+
+  // 使用hooks
+  const { handleTableChange, pageQueryResHandel, resetQueryParams, pagination, pages, model, loading } = useTablePage(queryPage)
+  const { notification, createMessage, createConfirm } = useMessage()
+
+  // 查询条件
+  const fields = [
+    { field: 'name', type: 'string', name: '名称', placeholder: '请输入名称' },
+    { field: 'appId', type: 'string', name: 'AppId', placeholder: '请输入AppId' },
+  ] as QueryField[]
+
+  const xTable = $ref<VxeTableInstance>()
+  const xToolbar = $ref<VxeToolbarInstance>()
+  const alipayConfigEdit = $ref<any>()
+
+  onMounted(() => {
+    vxeBind()
+    queryPage()
+  })
+  function vxeBind() {
+    xTable.connect(xToolbar)
+  }
+
+  // 分页查询
+  function queryPage() {
+    loading.value = true
+    page({
+      ...model.queryParam,
+      ...pages,
+    }).then(({ data }) => {
+      pageQueryResHandel(data)
+    })
+  }
+  // 新增
+  function add() {
+    alipayConfigEdit.init(null, FormEditType.Add)
+  }
+  // 编辑
+  function edit(record) {
+    alipayConfigEdit.init(record.id, FormEditType.Edit)
+  }
+  // 查看
+  function show(record) {
+    alipayConfigEdit.init(record.id, FormEditType.Show)
+  }
+
+  // 删除
+  function remove(record) {
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: '是否删除该数据',
+      onOk: () => {
+        del(record.id).then(() => {
+          createMessage.success('删除成功')
+          queryPage()
+        })
+      },
+    })
+  }
+  function setup(record) {
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: '是否启用此配置',
+      onOk: () => {
+        loading.value = true
+        setUpActivity(record.id).then(() => {
+          queryPage()
+        })
+      },
+    })
+  }
+  function clear(record) {
+    createConfirm({
+      iconType: 'warning',
+      title: '警告',
+      content: '是否停用此配置',
+      onOk: () => {
+        loading.value = true
+        clearActivity(record.id).then(() => {
+          queryPage()
+        })
+      },
+    })
+  }
+</script>
+
+<style lang="less" scoped></style>

types/web.d.ts

@@ -1,14 +1,5 @@
 import { PageResult } from '/#/axios'
 
-/**
- * 分页属性
- */
-export interface Pagination {
-  size: number
-  current: number
-  total: number
-}
-
 /**
  * 分页参数
  */
@@ -35,5 +26,13 @@ export interface TablePageModel<T = any> {
  * 基础实体对象
  */
 export interface BaseEntity {
-  id?: number | string | null | undefined
+  id?: number | string | null
+}
+
+/**
+ * 键值对对象
+ */
+export interface KeyValue {
+  key: string
+  value: string
 }