1068 lines
36 KiB
Vue
1068 lines
36 KiB
Vue
<template>
|
|
<ArtTableFullScreen>
|
|
<div class="wechat-config-page" id="table-full-screen">
|
|
<!-- 搜索栏 -->
|
|
<ArtSearchBar
|
|
v-model:filter="searchForm"
|
|
:items="searchFormItems"
|
|
label-width="100"
|
|
:show-expand="false"
|
|
@reset="handleReset"
|
|
@search="handleSearch"
|
|
></ArtSearchBar>
|
|
|
|
<ElCard shadow="never" class="art-table-card">
|
|
<!-- 表格头部 -->
|
|
<ArtTableHeader
|
|
:columnList="columnOptions"
|
|
v-model:columns="columnChecks"
|
|
@refresh="handleRefresh"
|
|
>
|
|
<template #left>
|
|
<ElButton type="primary" @click="showCreateDialog" v-if="hasAuth('wechat_config:create')">新增支付配置</ElButton>
|
|
</template>
|
|
</ArtTableHeader>
|
|
|
|
<!-- 表格 -->
|
|
<ArtTable
|
|
ref="tableRef"
|
|
row-key="id"
|
|
:loading="loading"
|
|
:data="configList"
|
|
:currentPage="pagination.page"
|
|
:pageSize="pagination.page_size"
|
|
:total="pagination.total"
|
|
:marginTop="10"
|
|
:actions="getActions"
|
|
:actionsWidth="120"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
>
|
|
<template #default>
|
|
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
|
|
</template>
|
|
</ArtTable>
|
|
|
|
<!-- 创建/编辑对话框 -->
|
|
<ElDialog
|
|
v-model="dialogVisible"
|
|
:title="dialogType === 'add' ? '新增支付配置' : '编辑支付配置'"
|
|
width="900px"
|
|
:close-on-click-modal="false"
|
|
@closed="handleDialogClosed"
|
|
>
|
|
<ElForm
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
label-width="140px"
|
|
class="config-form"
|
|
>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="配置名称" prop="name">
|
|
<ElInput v-model="form.name" placeholder="请输入配置名称" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="支付渠道类型" prop="provider_type">
|
|
<ElSelect
|
|
v-model="form.provider_type"
|
|
placeholder="请选择支付渠道类型"
|
|
style="width: 100%"
|
|
@change="handleProviderTypeChange"
|
|
>
|
|
<ElOption label="微信直连" value="wechat" />
|
|
<ElOption label="微信直连V2" value="wechat_v2" />
|
|
<ElOption label="富友支付" value="fuiou" />
|
|
</ElSelect>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElFormItem label="配置描述" prop="description">
|
|
<ElInput
|
|
v-model="form.description"
|
|
type="textarea"
|
|
:rows="2"
|
|
placeholder="请输入配置描述"
|
|
/>
|
|
</ElFormItem>
|
|
|
|
<!-- 微信相关配置 -->
|
|
<template v-if="form.provider_type === 'wechat' || form.provider_type === 'wechat_v2'">
|
|
<ElDivider content-position="left">
|
|
<span class="divider-title">小程序配置</span>
|
|
</ElDivider>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="小程序AppID" prop="miniapp_app_id">
|
|
<ElInput v-model="form.miniapp_app_id" placeholder="请输入小程序AppID" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="小程序AppSecret" prop="miniapp_app_secret">
|
|
<ElInput
|
|
v-model="form.miniapp_app_secret"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入小程序AppSecret"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
|
|
<ElDivider content-position="left">
|
|
<span class="divider-title">公众号配置</span>
|
|
</ElDivider>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="公众号AppID" prop="oa_app_id">
|
|
<ElInput v-model="form.oa_app_id" placeholder="请输入公众号AppID" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="公众号AppSecret" prop="oa_app_secret">
|
|
<ElInput
|
|
v-model="form.oa_app_secret"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入公众号AppSecret"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="公众号Token" prop="oa_token">
|
|
<ElInput
|
|
v-model="form.oa_token"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入公众号Token"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="公众号AES Key" prop="oa_aes_key">
|
|
<ElInput
|
|
v-model="form.oa_aes_key"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入公众号AES加密Key"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElFormItem label="OAuth回调地址" prop="oa_oauth_redirect_url">
|
|
<ElInput v-model="form.oa_oauth_redirect_url" placeholder="请输入OAuth回调地址" />
|
|
</ElFormItem>
|
|
|
|
<ElDivider content-position="left">
|
|
<span class="divider-title">微信支付配置</span>
|
|
</ElDivider>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="微信商户号" prop="wx_mch_id">
|
|
<ElInput v-model="form.wx_mch_id" placeholder="请输入微信商户号" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="证书序列号" prop="wx_serial_no">
|
|
<ElInput v-model="form.wx_serial_no" placeholder="请输入微信证书序列号" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="APIv2密钥" prop="wx_api_v2_key">
|
|
<ElInput
|
|
v-model="form.wx_api_v2_key"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入微信APIv2密钥"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="APIv3密钥" prop="wx_api_v3_key">
|
|
<ElInput
|
|
v-model="form.wx_api_v3_key"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入微信APIv3密钥"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElFormItem label="支付回调地址" prop="wx_notify_url">
|
|
<ElInput v-model="form.wx_notify_url" placeholder="请输入微信支付回调地址" />
|
|
</ElFormItem>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="支付证书" prop="wx_cert_content">
|
|
<ElInput
|
|
v-model="form.wx_cert_content"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请粘贴PEM格式证书内容"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="支付密钥" prop="wx_key_content">
|
|
<ElInput
|
|
v-model="form.wx_key_content"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请粘贴PEM格式密钥内容"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
</template>
|
|
|
|
<!-- 富友支付配置 -->
|
|
<template v-if="form.provider_type === 'fuiou'">
|
|
<ElDivider content-position="left">小程序配置</ElDivider>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="小程序AppID" prop="miniapp_app_id">
|
|
<ElInput v-model="form.miniapp_app_id" placeholder="请输入小程序AppID" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="小程序AppSecret" prop="miniapp_app_secret">
|
|
<ElInput
|
|
v-model="form.miniapp_app_secret"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入小程序AppSecret"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
|
|
<ElDivider content-position="left">
|
|
<span class="divider-title">公众号配置</span>
|
|
</ElDivider>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="公众号AppID" prop="oa_app_id">
|
|
<ElInput v-model="form.oa_app_id" placeholder="请输入公众号AppID" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="公众号AppSecret" prop="oa_app_secret">
|
|
<ElInput
|
|
v-model="form.oa_app_secret"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入公众号AppSecret"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="公众号Token" prop="oa_token">
|
|
<ElInput
|
|
v-model="form.oa_token"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入公众号Token"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="公众号AES Key" prop="oa_aes_key">
|
|
<ElInput
|
|
v-model="form.oa_aes_key"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入公众号AES加密Key"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElFormItem label="OAuth回调地址" prop="oa_oauth_redirect_url">
|
|
<ElInput v-model="form.oa_oauth_redirect_url" placeholder="请输入OAuth回调地址" />
|
|
</ElFormItem>
|
|
|
|
<ElDivider content-position="left">
|
|
<span class="divider-title">微信支付配置</span>
|
|
</ElDivider>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="微信商户号" prop="wx_mch_id">
|
|
<ElInput v-model="form.wx_mch_id" placeholder="请输入微信商户号" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="证书序列号" prop="wx_serial_no">
|
|
<ElInput v-model="form.wx_serial_no" placeholder="请输入微信证书序列号" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="APIv2密钥" prop="wx_api_v2_key">
|
|
<ElInput
|
|
v-model="form.wx_api_v2_key"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入微信APIv2密钥"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="APIv3密钥" prop="wx_api_v3_key">
|
|
<ElInput
|
|
v-model="form.wx_api_v3_key"
|
|
type="password"
|
|
show-password
|
|
placeholder="请输入微信APIv3密钥"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElFormItem label="支付回调地址" prop="wx_notify_url">
|
|
<ElInput v-model="form.wx_notify_url" placeholder="请输入微信支付回调地址" />
|
|
</ElFormItem>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="支付证书" prop="wx_cert_content">
|
|
<ElInput
|
|
v-model="form.wx_cert_content"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请粘贴PEM格式证书内容"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="支付密钥" prop="wx_key_content">
|
|
<ElInput
|
|
v-model="form.wx_key_content"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请粘贴PEM格式密钥内容"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
|
|
<ElDivider content-position="left">
|
|
<span class="divider-title">富友支付配置</span>
|
|
</ElDivider>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="富友API地址" prop="fy_api_url">
|
|
<ElInput v-model="form.fy_api_url" placeholder="请输入富友API地址" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="富友机构号" prop="fy_ins_cd">
|
|
<ElInput v-model="form.fy_ins_cd" placeholder="请输入富友机构号" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="富友商户号" prop="fy_mchnt_cd">
|
|
<ElInput v-model="form.fy_mchnt_cd" placeholder="请输入富友商户号" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="富友终端号" prop="fy_term_id">
|
|
<ElInput v-model="form.fy_term_id" placeholder="请输入富友终端号" />
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
<ElFormItem label="支付回调地址" prop="fy_notify_url">
|
|
<ElInput v-model="form.fy_notify_url" placeholder="请输入富友支付回调地址" />
|
|
</ElFormItem>
|
|
<ElRow :gutter="20">
|
|
<ElCol :span="12">
|
|
<ElFormItem label="富友私钥" prop="fy_private_key">
|
|
<ElInput
|
|
v-model="form.fy_private_key"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请粘贴PEM格式私钥内容"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
<ElCol :span="12">
|
|
<ElFormItem label="富友公钥" prop="fy_public_key">
|
|
<ElInput
|
|
v-model="form.fy_public_key"
|
|
type="textarea"
|
|
:rows="3"
|
|
placeholder="请粘贴PEM格式公钥内容"
|
|
/>
|
|
</ElFormItem>
|
|
</ElCol>
|
|
</ElRow>
|
|
</template>
|
|
</ElForm>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<ElButton @click="dialogVisible = false">取消</ElButton>
|
|
<ElButton type="primary" @click="handleSubmit" :loading="submitLoading">
|
|
提交
|
|
</ElButton>
|
|
</div>
|
|
</template>
|
|
</ElDialog>
|
|
</ElCard>
|
|
</div>
|
|
</ArtTableFullScreen>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { h, nextTick } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { WechatConfigService } from '@/api/modules'
|
|
import { ElMessage, ElMessageBox, ElSwitch, ElButton } from 'element-plus'
|
|
import type { FormInstance, FormRules } from 'element-plus'
|
|
import type {
|
|
WechatConfig,
|
|
WechatConfigQueryParams,
|
|
PaymentProviderType,
|
|
CreateWechatConfigRequest,
|
|
UpdateWechatConfigRequest
|
|
} from '@/types/api'
|
|
import type { SearchFormItem } from '@/types'
|
|
import { useCheckedColumns } from '@/composables/useCheckedColumns'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
import { formatDateTime } from '@/utils/business/format'
|
|
import { RoutesAlias } from '@/router/routesAlias'
|
|
|
|
defineOptions({ name: 'WechatConfigList' })
|
|
|
|
const { hasAuth } = useAuth()
|
|
const router = useRouter()
|
|
|
|
const loading = ref(false)
|
|
const submitLoading = ref(false)
|
|
const tableRef = ref()
|
|
const dialogVisible = ref(false)
|
|
const dialogType = ref<'add' | 'edit'>('add')
|
|
const formRef = ref<FormInstance>()
|
|
|
|
// 搜索表单初始值
|
|
const initialSearchState = {
|
|
provider_type: undefined as PaymentProviderType | undefined,
|
|
is_active: undefined as number | undefined
|
|
}
|
|
|
|
// 搜索表单
|
|
const searchForm = reactive({ ...initialSearchState })
|
|
|
|
// 搜索表单配置
|
|
const searchFormItems: SearchFormItem[] = [
|
|
{
|
|
label: '支付渠道类型',
|
|
prop: 'provider_type',
|
|
type: 'select',
|
|
placeholder: '请选择支付渠道类型',
|
|
options: [
|
|
{ label: '微信直连', value: 'wechat' },
|
|
{ label: '微信直连V2', value: 'wechat_v2' },
|
|
{ label: '富友支付', value: 'fuiou' }
|
|
],
|
|
config: {
|
|
clearable: true
|
|
}
|
|
},
|
|
{
|
|
label: '激活状态',
|
|
prop: 'is_active',
|
|
type: 'select',
|
|
placeholder: '请选择激活状态',
|
|
options: [
|
|
{ label: '已激活', value: 1 },
|
|
{ label: '未激活', value: 0 }
|
|
],
|
|
config: {
|
|
clearable: true
|
|
}
|
|
}
|
|
]
|
|
|
|
// 分页
|
|
const pagination = reactive({
|
|
page: 1,
|
|
page_size: 20,
|
|
total: 0
|
|
})
|
|
|
|
// 列配置
|
|
const columnOptions = [
|
|
{ label: '配置名称', prop: 'name' },
|
|
{ label: '配置描述', prop: 'description' },
|
|
{ label: '支付渠道类型', prop: 'provider_type' },
|
|
{ label: '激活状态', prop: 'is_active' },
|
|
{ label: '商户号', prop: 'merchant_id' },
|
|
{ label: '小程序AppID', prop: 'miniapp_app_id' },
|
|
{ label: '公众号AppID', prop: 'oa_app_id' },
|
|
{ label: '支付回调地址', prop: 'notify_url' },
|
|
{ label: '创建时间', prop: 'created_at' },
|
|
{ label: '更新时间', prop: 'updated_at' }
|
|
]
|
|
|
|
// URL格式验证规则
|
|
const urlValidator = (_rule: any, value: any, callback: any) => {
|
|
if (!value) {
|
|
callback()
|
|
return
|
|
}
|
|
const urlPattern = /^(https?:\/\/)[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?$/
|
|
if (!urlPattern.test(value)) {
|
|
callback(new Error('请输入正确的URL格式(http://或https://)'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
|
|
// 静态验证规则 - 只有配置名称和支付渠道类型是必填的
|
|
const rules = reactive<FormRules>({
|
|
name: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
|
|
provider_type: [{ required: true, message: '请选择支付渠道类型', trigger: 'change' }],
|
|
// 其他字段都是可选的,只验证URL格式
|
|
oa_oauth_redirect_url: [{ validator: urlValidator, trigger: 'blur' }],
|
|
wx_notify_url: [{ validator: urlValidator, trigger: 'blur' }],
|
|
fy_api_url: [{ validator: urlValidator, trigger: 'blur' }],
|
|
fy_notify_url: [{ validator: urlValidator, trigger: 'blur' }]
|
|
})
|
|
|
|
const form = reactive({
|
|
id: 0,
|
|
name: '',
|
|
provider_type: 'wechat' as PaymentProviderType,
|
|
description: '',
|
|
miniapp_app_id: '',
|
|
miniapp_app_secret: '',
|
|
oa_app_id: '',
|
|
oa_app_secret: '',
|
|
oa_token: '',
|
|
oa_aes_key: '',
|
|
oa_oauth_redirect_url: '',
|
|
wx_mch_id: '',
|
|
wx_api_v2_key: '',
|
|
wx_api_v3_key: '',
|
|
wx_notify_url: '',
|
|
wx_serial_no: '',
|
|
wx_cert_content: '',
|
|
wx_key_content: '',
|
|
fy_api_url: '',
|
|
fy_ins_cd: '',
|
|
fy_mchnt_cd: '',
|
|
fy_term_id: '',
|
|
fy_notify_url: '',
|
|
fy_private_key: '',
|
|
fy_public_key: ''
|
|
})
|
|
|
|
// 重置表单数据
|
|
const resetForm = () => {
|
|
form.id = 0
|
|
form.name = ''
|
|
form.provider_type = 'wechat'
|
|
form.description = ''
|
|
form.miniapp_app_id = ''
|
|
form.miniapp_app_secret = ''
|
|
form.oa_app_id = ''
|
|
form.oa_app_secret = ''
|
|
form.oa_token = ''
|
|
form.oa_aes_key = ''
|
|
form.oa_oauth_redirect_url = ''
|
|
form.wx_mch_id = ''
|
|
form.wx_api_v2_key = ''
|
|
form.wx_api_v3_key = ''
|
|
form.wx_notify_url = ''
|
|
form.wx_serial_no = ''
|
|
form.wx_cert_content = ''
|
|
form.wx_key_content = ''
|
|
form.fy_api_url = ''
|
|
form.fy_ins_cd = ''
|
|
form.fy_mchnt_cd = ''
|
|
form.fy_term_id = ''
|
|
form.fy_notify_url = ''
|
|
form.fy_private_key = ''
|
|
form.fy_public_key = ''
|
|
}
|
|
|
|
const configList = ref<WechatConfig[]>([])
|
|
|
|
// 获取支付渠道类型文本
|
|
const getProviderTypeText = (type: PaymentProviderType): string => {
|
|
const typeMap: Record<PaymentProviderType, string> = {
|
|
wechat: '微信直连',
|
|
wechat_v2: '微信直连V2',
|
|
fuiou: '富友支付'
|
|
}
|
|
return typeMap[type] || type
|
|
}
|
|
|
|
// 获取商户号
|
|
const getMerchantId = (row: WechatConfig): string => {
|
|
if (row.provider_type === 'wechat' || row.provider_type === 'wechat_v2') {
|
|
return row.wx_mch_id || '-'
|
|
}
|
|
if (row.provider_type === 'fuiou') {
|
|
return row.fy_mchnt_cd || '-'
|
|
}
|
|
return '-'
|
|
}
|
|
|
|
// 获取支付回调地址
|
|
const getNotifyUrl = (row: WechatConfig): string => {
|
|
if (row.provider_type === 'wechat' || row.provider_type === 'wechat_v2') {
|
|
return row.wx_notify_url || '-'
|
|
}
|
|
if (row.provider_type === 'fuiou') {
|
|
return row.fy_notify_url || '-'
|
|
}
|
|
return '-'
|
|
}
|
|
|
|
// 动态列配置
|
|
const { columnChecks, columns } = useCheckedColumns(() => [
|
|
{
|
|
prop: 'name',
|
|
label: '配置名称',
|
|
minWidth: 160,
|
|
showOverflowTooltip: true,
|
|
formatter: (row: WechatConfig) => {
|
|
return h(
|
|
'span',
|
|
{
|
|
style: 'color: var(--el-color-primary); cursor: pointer; text-decoration: underline;',
|
|
onClick: (e: MouseEvent) => {
|
|
e.stopPropagation()
|
|
handleNameClick(row)
|
|
}
|
|
},
|
|
row.name
|
|
)
|
|
}
|
|
},
|
|
{
|
|
prop: 'description',
|
|
label: '配置描述',
|
|
minWidth: 180,
|
|
showOverflowTooltip: true,
|
|
formatter: (row: WechatConfig) => row.description || '-'
|
|
},
|
|
{
|
|
prop: 'provider_type',
|
|
label: '支付渠道类型',
|
|
width: 130,
|
|
formatter: (row: WechatConfig) => getProviderTypeText(row.provider_type)
|
|
},
|
|
{
|
|
prop: 'is_active',
|
|
label: '激活状态',
|
|
width: 100,
|
|
formatter: (row: WechatConfig) => {
|
|
return h(ElSwitch, {
|
|
modelValue: row.is_active,
|
|
activeText: '已激活',
|
|
inactiveText: '未激活',
|
|
inlinePrompt: true,
|
|
disabled: !hasAuth('wechat_config:status'),
|
|
'onUpdate:modelValue': (val) => handleStatusChange(row, val)
|
|
})
|
|
}
|
|
},
|
|
{
|
|
prop: 'merchant_id',
|
|
label: '商户号',
|
|
width: 150,
|
|
showOverflowTooltip: true,
|
|
formatter: (row: WechatConfig) => getMerchantId(row)
|
|
},
|
|
{
|
|
prop: 'miniapp_app_id',
|
|
label: '小程序AppID',
|
|
width: 160,
|
|
showOverflowTooltip: true,
|
|
formatter: (row: WechatConfig) => row.miniapp_app_id || '-'
|
|
},
|
|
{
|
|
prop: 'oa_app_id',
|
|
label: '公众号AppID',
|
|
width: 160,
|
|
showOverflowTooltip: true,
|
|
formatter: (row: WechatConfig) => row.oa_app_id || '-'
|
|
},
|
|
{
|
|
prop: 'notify_url',
|
|
label: '支付回调地址',
|
|
minWidth: 200,
|
|
showOverflowTooltip: true,
|
|
formatter: (row: WechatConfig) => getNotifyUrl(row)
|
|
},
|
|
{
|
|
prop: 'created_at',
|
|
label: '创建时间',
|
|
width: 180,
|
|
formatter: (row: WechatConfig) => formatDateTime(row.created_at)
|
|
},
|
|
{
|
|
prop: 'updated_at',
|
|
label: '更新时间',
|
|
width: 180,
|
|
formatter: (row: WechatConfig) => formatDateTime(row.updated_at)
|
|
}
|
|
])
|
|
|
|
onMounted(() => {
|
|
getTableData()
|
|
})
|
|
|
|
// 获取配置列表
|
|
const getTableData = async () => {
|
|
loading.value = true
|
|
try {
|
|
const params: WechatConfigQueryParams = {
|
|
page: pagination.page,
|
|
page_size: pagination.page_size,
|
|
provider_type: searchForm.provider_type,
|
|
is_active: searchForm.is_active !== undefined ? searchForm.is_active === 1 : undefined
|
|
}
|
|
const res = await WechatConfigService.getWechatConfigs(params)
|
|
if (res.code === 0) {
|
|
configList.value = res.data.items || []
|
|
pagination.total = res.data.total || 0
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 重置搜索
|
|
const handleReset = () => {
|
|
Object.assign(searchForm, { ...initialSearchState })
|
|
pagination.page = 1
|
|
getTableData()
|
|
}
|
|
|
|
// 搜索
|
|
const handleSearch = () => {
|
|
pagination.page = 1
|
|
getTableData()
|
|
}
|
|
|
|
// 刷新表格
|
|
const handleRefresh = () => {
|
|
getTableData()
|
|
}
|
|
|
|
// 处理表格分页变化
|
|
const handleSizeChange = (newPageSize: number) => {
|
|
pagination.page_size = newPageSize
|
|
getTableData()
|
|
}
|
|
|
|
const handleCurrentChange = (newCurrentPage: number) => {
|
|
pagination.page = newCurrentPage
|
|
getTableData()
|
|
}
|
|
|
|
// 显示创建对话框
|
|
const showCreateDialog = () => {
|
|
resetForm()
|
|
dialogType.value = 'add'
|
|
dialogVisible.value = true
|
|
nextTick(() => {
|
|
formRef.value?.clearValidate()
|
|
})
|
|
}
|
|
|
|
// 处理敏感字段值 - 如果是***或[已配置]等特殊值,转换为空字符串
|
|
const processSensitiveField = (value: string | undefined | null): string => {
|
|
if (!value || value === '***' || value.includes('[已配置]') || value.includes('[未配置]')) {
|
|
return ''
|
|
}
|
|
return value
|
|
}
|
|
|
|
// 显示编辑对话框
|
|
const showEditDialog = async (row: WechatConfig) => {
|
|
// 先调用详情接口获取完整数据
|
|
try {
|
|
const res = await WechatConfigService.getWechatConfigById(row.id)
|
|
if (res.code === 0 && res.data) {
|
|
const detail = res.data
|
|
// 赋值表单数据
|
|
Object.assign(form, {
|
|
id: detail.id,
|
|
name: detail.name,
|
|
provider_type: detail.provider_type,
|
|
description: detail.description || '',
|
|
miniapp_app_id: detail.miniapp_app_id || '',
|
|
miniapp_app_secret: processSensitiveField(detail.miniapp_app_secret),
|
|
oa_app_id: detail.oa_app_id || '',
|
|
oa_app_secret: processSensitiveField(detail.oa_app_secret),
|
|
oa_token: processSensitiveField(detail.oa_token),
|
|
oa_aes_key: processSensitiveField(detail.oa_aes_key),
|
|
oa_oauth_redirect_url: detail.oa_oauth_redirect_url || '',
|
|
wx_mch_id: detail.wx_mch_id || '',
|
|
wx_api_v2_key: processSensitiveField(detail.wx_api_v2_key),
|
|
wx_api_v3_key: processSensitiveField(detail.wx_api_v3_key),
|
|
wx_notify_url: detail.wx_notify_url || '',
|
|
wx_serial_no: detail.wx_serial_no || '',
|
|
wx_cert_content: processSensitiveField(detail.wx_cert_content),
|
|
wx_key_content: processSensitiveField(detail.wx_key_content),
|
|
fy_api_url: detail.fy_api_url || '',
|
|
fy_ins_cd: detail.fy_ins_cd || '',
|
|
fy_mchnt_cd: detail.fy_mchnt_cd || '',
|
|
fy_term_id: detail.fy_term_id || '',
|
|
fy_notify_url: detail.fy_notify_url || '',
|
|
fy_private_key: processSensitiveField(detail.fy_private_key),
|
|
fy_public_key: processSensitiveField(detail.fy_public_key)
|
|
})
|
|
dialogType.value = 'edit'
|
|
dialogVisible.value = true
|
|
await nextTick(() => {
|
|
formRef.value?.clearValidate()
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('获取详情失败:', error)
|
|
ElMessage.error('获取配置详情失败')
|
|
}
|
|
}
|
|
|
|
// 处理支付渠道类型变化
|
|
const handleProviderTypeChange = () => {
|
|
// 清除验证状态
|
|
nextTick(() => {
|
|
formRef.value?.clearValidate()
|
|
})
|
|
}
|
|
|
|
// 对话框关闭后的清理
|
|
const handleDialogClosed = () => {
|
|
// 不调用resetFields,因为会把数据也重置了
|
|
// 只需要什么都不做,下次打开时会重新赋值
|
|
}
|
|
|
|
// 提交表单
|
|
const handleSubmit = async () => {
|
|
if (!formRef.value) return
|
|
|
|
await formRef.value.validate(async (valid) => {
|
|
if (valid) {
|
|
submitLoading.value = true
|
|
try {
|
|
if (dialogType.value === 'add') {
|
|
const data: CreateWechatConfigRequest = {
|
|
name: form.name,
|
|
provider_type: form.provider_type,
|
|
description: form.description || undefined,
|
|
miniapp_app_id: form.miniapp_app_id || undefined,
|
|
miniapp_app_secret: form.miniapp_app_secret || undefined,
|
|
oa_app_id: form.oa_app_id || undefined,
|
|
oa_app_secret: form.oa_app_secret || undefined,
|
|
oa_token: form.oa_token || undefined,
|
|
oa_aes_key: form.oa_aes_key || undefined,
|
|
oa_oauth_redirect_url: form.oa_oauth_redirect_url || undefined,
|
|
wx_mch_id: form.wx_mch_id || undefined,
|
|
wx_api_v2_key: form.wx_api_v2_key || undefined,
|
|
wx_api_v3_key: form.wx_api_v3_key || undefined,
|
|
wx_notify_url: form.wx_notify_url || undefined,
|
|
wx_serial_no: form.wx_serial_no || undefined,
|
|
wx_cert_content: form.wx_cert_content || undefined,
|
|
wx_key_content: form.wx_key_content || undefined,
|
|
fy_api_url: form.fy_api_url || undefined,
|
|
fy_ins_cd: form.fy_ins_cd || undefined,
|
|
fy_mchnt_cd: form.fy_mchnt_cd || undefined,
|
|
fy_term_id: form.fy_term_id || undefined,
|
|
fy_notify_url: form.fy_notify_url || undefined,
|
|
fy_private_key: form.fy_private_key || undefined,
|
|
fy_public_key: form.fy_public_key || undefined
|
|
}
|
|
await WechatConfigService.createWechatConfig(data)
|
|
ElMessage.success('创建成功')
|
|
} else {
|
|
const data: UpdateWechatConfigRequest = {
|
|
name: form.name,
|
|
description: form.description || undefined
|
|
}
|
|
// 只有填写了新值才更新敏感字段
|
|
if (form.miniapp_app_secret) data.miniapp_app_secret = form.miniapp_app_secret
|
|
if (form.oa_app_secret) data.oa_app_secret = form.oa_app_secret
|
|
if (form.oa_token) data.oa_token = form.oa_token
|
|
if (form.oa_aes_key) data.oa_aes_key = form.oa_aes_key
|
|
if (form.wx_api_v2_key) data.wx_api_v2_key = form.wx_api_v2_key
|
|
if (form.wx_api_v3_key) data.wx_api_v3_key = form.wx_api_v3_key
|
|
if (form.wx_cert_content) data.wx_cert_content = form.wx_cert_content
|
|
if (form.wx_key_content) data.wx_key_content = form.wx_key_content
|
|
if (form.fy_private_key) data.fy_private_key = form.fy_private_key
|
|
if (form.fy_public_key) data.fy_public_key = form.fy_public_key
|
|
|
|
// 非敏感字段总是更新
|
|
if (form.miniapp_app_id) data.miniapp_app_id = form.miniapp_app_id
|
|
if (form.oa_app_id) data.oa_app_id = form.oa_app_id
|
|
if (form.oa_oauth_redirect_url) data.oa_oauth_redirect_url = form.oa_oauth_redirect_url
|
|
if (form.wx_mch_id) data.wx_mch_id = form.wx_mch_id
|
|
if (form.wx_notify_url) data.wx_notify_url = form.wx_notify_url
|
|
if (form.wx_serial_no) data.wx_serial_no = form.wx_serial_no
|
|
if (form.fy_api_url) data.fy_api_url = form.fy_api_url
|
|
if (form.fy_ins_cd) data.fy_ins_cd = form.fy_ins_cd
|
|
if (form.fy_mchnt_cd) data.fy_mchnt_cd = form.fy_mchnt_cd
|
|
if (form.fy_term_id) data.fy_term_id = form.fy_term_id
|
|
if (form.fy_notify_url) data.fy_notify_url = form.fy_notify_url
|
|
|
|
await WechatConfigService.updateWechatConfig(form.id, data)
|
|
ElMessage.success('更新成功')
|
|
}
|
|
|
|
dialogVisible.value = false
|
|
await getTableData()
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
submitLoading.value = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 激活/停用状态切换
|
|
const handleStatusChange = async (row: WechatConfig, newStatus: string | number | boolean) => {
|
|
if (!hasAuth('wechat_config:status')) {
|
|
ElMessage.warning('您没有修改激活状态的权限')
|
|
return
|
|
}
|
|
|
|
const newBoolStatus = Boolean(newStatus)
|
|
const oldStatus = row.is_active
|
|
row.is_active = newBoolStatus
|
|
try {
|
|
if (newBoolStatus) {
|
|
await WechatConfigService.activateWechatConfig(row.id)
|
|
ElMessage.success('激活成功')
|
|
} else {
|
|
await WechatConfigService.deactivateWechatConfig(row.id)
|
|
ElMessage.success('停用成功')
|
|
}
|
|
await getTableData()
|
|
} catch (error) {
|
|
row.is_active = oldStatus
|
|
console.error(error)
|
|
}
|
|
}
|
|
|
|
// 删除配置
|
|
const handleDelete = async (row: WechatConfig) => {
|
|
try {
|
|
await ElMessageBox.confirm(`确定要删除支付配置"${row.name}"吗?`, '删除确认', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
|
|
await WechatConfigService.deleteWechatConfig(row.id)
|
|
ElMessage.success('删除成功')
|
|
await getTableData()
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
console.error(error)
|
|
}
|
|
}
|
|
}
|
|
|
|
// 查看详情
|
|
const handleViewDetail = (row: WechatConfig) => {
|
|
router.push({
|
|
path: `${RoutesAlias.WechatConfig}/detail/${row.id}`
|
|
})
|
|
}
|
|
|
|
// 处理名称点击
|
|
const handleNameClick = (row: WechatConfig) => {
|
|
if (hasAuth('wechat_config:detail')) {
|
|
handleViewDetail(row)
|
|
} else {
|
|
ElMessage.warning('您没有查看详情的权限')
|
|
}
|
|
}
|
|
|
|
// 获取操作按钮
|
|
const getActions = (row: WechatConfig) => {
|
|
const actions: any[] = []
|
|
|
|
if (hasAuth('wechat_config:edit')) {
|
|
actions.push({
|
|
label: '编辑',
|
|
handler: () => showEditDialog(row),
|
|
type: 'primary'
|
|
})
|
|
}
|
|
|
|
if (hasAuth('wechat_config:delete')) {
|
|
actions.push({
|
|
label: '删除',
|
|
handler: () => handleDelete(row),
|
|
type: 'danger'
|
|
})
|
|
}
|
|
|
|
return actions
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.wechat-config-page {
|
|
height: 100%;
|
|
}
|
|
|
|
.config-form {
|
|
max-height: 600px;
|
|
padding-right: 10px;
|
|
overflow-y: auto;
|
|
|
|
.divider-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
|
|
:deep(.el-divider) {
|
|
margin: 24px 0 20px;
|
|
}
|
|
|
|
:deep(.el-form-item) {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
:deep(.el-textarea__inner) {
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
|
|
// 优化滚动条样式
|
|
.config-form::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.config-form::-webkit-scrollbar-thumb {
|
|
background-color: var(--el-border-color-darker);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.config-form::-webkit-scrollbar-track {
|
|
background-color: var(--el-fill-color-lighter);
|
|
}
|
|
</style>
|