luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

删除多余代码

Browse Source
This commit is contained in:
sexygoat
2026-04-08 19:31:22 +08:00
parent b510b4539f
commit d1c6588d8f
110 changed files with 897 additions and 24613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

306
src/views/settings/commission-template/index.vue
View File

@@ -1,306 +0,0 @@
<template>
<div class="page-content">
<ElRow>
<ElCol :xs="24" :sm="12" :lg="6">
<ElInput v-model="searchQuery" placeholder="模板名称" clearable></ElInput>
</ElCol>
<div style="width: 12px"></div>
<ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
<ElButton v-ripple @click="handleSearch">搜索</ElButton>
<ElButton v-ripple @click="showDialog('add')">新增模板</ElButton>
</ElCol>
</ElRow>
<ArtTable :data="filteredData" index>
<template #default>
<ElTableColumn label="模板名称" prop="templateName" />
<ElTableColumn label="分佣模式" prop="commissionMode">
<template #default="scope">
<ElTag :type="scope.row.commissionMode === 'fixed' ? '' : 'success'">
{{ scope.row.commissionMode === 'fixed' ? '固定佣金' : '比例佣金' }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="佣金规则" prop="rule">
<template #default="scope">
{{
scope.row.commissionMode === 'fixed'
? `¥${scope.row.fixedAmount.toFixed(2)}/笔`
: `${scope.row.percent}%`
}}
</template>
</ElTableColumn>
<ElTableColumn label="适用范围" prop="scope" show-overflow-tooltip />
<ElTableColumn label="应用次数" prop="usageCount" />
<ElTableColumn label="状态" prop="status">
<template #default="scope">
<ElTag :type="scope.row.status === 'active' ? 'success' : 'info'">
{{ scope.row.status === 'active' ? '启用' : '禁用' }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="createTime" width="180" />
<ElTableColumn fixed="right" label="操作" width="220">
<template #default="scope">
<el-button link @click="viewUsage(scope.row)">应用记录</el-button>
<el-button link @click="showDialog('edit', scope.row)">编辑</el-button>
<el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</ElTableColumn>
</template>
</ArtTable>
<!-- 新增/编辑对话框 -->
<ElDialog
v-model="dialogVisible"
:title="dialogType === 'add' ? '新增分佣模板' : '编辑分佣模板'"
width="600px"
align-center
>
<ElForm ref="formRef" :model="form" :rules="rules" label-width="120px">
<ElFormItem label="模板名称" prop="templateName">
<ElInput v-model="form.templateName" placeholder="请输入模板名称" />
</ElFormItem>
<ElFormItem label="分佣模式" prop="commissionMode">
<ElRadioGroup v-model="form.commissionMode">
<ElRadio value="fixed">固定佣金</ElRadio>
<ElRadio value="percent">比例佣金</ElRadio>
</ElRadioGroup>
</ElFormItem>
<ElFormItem v-if="form.commissionMode === 'fixed'" label="固定金额" prop="fixedAmount">
<ElInputNumber v-model="form.fixedAmount" :min="0" :precision="2" style="width: 100%" />
<span style="margin-left: 8px">元/笔</span>
</ElFormItem>
<ElFormItem v-if="form.commissionMode === 'percent'" label="佣金比例" prop="percent">
<ElInputNumber
v-model="form.percent"
:min="0"
:max="100"
:precision="2"
style="width: 100%"
/>
<span style="margin-left: 8px">%</span>
</ElFormItem>
<ElFormItem label="适用范围" prop="scope">
<ElInput v-model="form.scope" placeholder="例如：全部套餐、特定代理商等" />
</ElFormItem>
<ElFormItem label="分佣说明" prop="description">
<ElInput
v-model="form.description"
type="textarea"
:rows="3"
placeholder="请输入分佣规则说明"
/>
</ElFormItem>
<ElFormItem label="状态">
<ElSwitch v-model="form.status" active-value="active" inactive-value="inactive" />
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="dialogVisible = false">取消</ElButton>
<ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
</div>
</template>
</ElDialog>
<!-- 应用记录对话框 -->
<ElDialog v-model="usageDialogVisible" title="模板应用记录" width="900px" align-center>
<ArtTable :data="usageRecords" index>
<template #default>
<ElTableColumn label="应用对象" prop="targetName" />
<ElTableColumn label="对象类型" prop="targetType">
<template #default="scope">
<ElTag :type="scope.row.targetType === 'agent' ? '' : 'success'">
{{ scope.row.targetType === 'agent' ? '代理商' : '套餐' }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="应用时间" prop="applyTime" width="180" />
<ElTableColumn label="操作人" prop="operator" />
<ElTableColumn label="状态" prop="status">
<template #default="scope">
<ElTag :type="scope.row.status === 'active' ? 'success' : 'info'">
{{ scope.row.status === 'active' ? '生效中' : '已失效' }}
</ElTag>
</template>
</ElTableColumn>
</template>
</ArtTable>
</ElDialog>
</div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
defineOptions({ name: 'CommissionTemplate' })
interface Template {
id?: string
templateName: string
commissionMode: 'fixed' | 'percent'
fixedAmount: number
percent: number
scope: string
description?: string
usageCount?: number
status: 'active' | 'inactive'
createTime?: string
}
const mockData = ref<Template[]>([
{
id: '1',
templateName: '标准代理商佣金',
commissionMode: 'percent',
fixedAmount: 0,
percent: 10,
scope: '全部套餐',
description: '适用于一级代理商的标准佣金模板',
usageCount: 25,
status: 'active',
createTime: '2026-01-01 10:00:00'
},
{
id: '2',
templateName: '特殊套餐固定佣金',
commissionMode: 'fixed',
fixedAmount: 50,
percent: 0,
scope: '高端套餐系列',
description: '适用于高端套餐的固定佣金',
usageCount: 8,
status: 'active',
createTime: '2026-01-05 11:00:00'
}
])
const usageRecords = ref([
{
id: '1',
targetName: '华东区总代理',
targetType: 'agent',
applyTime: '2026-01-02 10:00:00',
operator: 'admin',
status: 'active'
}
])
const searchQuery = ref('')
const dialogVisible = ref(false)
const usageDialogVisible = ref(false)
const dialogType = ref<'add' | 'edit'>('add')
const formRef = ref<FormInstance>()
const form = reactive<Template>({
templateName: '',
commissionMode: 'percent',
fixedAmount: 0,
percent: 0,
scope: '',
description: '',
status: 'active'
})
const rules = reactive<FormRules>({
templateName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
commissionMode: [{ required: true, message: '请选择分佣模式', trigger: 'change' }],
fixedAmount: [
{
validator: (rule, value, callback) => {
if (form.commissionMode === 'fixed' && value <= 0) {
callback(new Error('固定金额必须大于0'))
} else {
callback()
}
},
trigger: 'blur'
}
],
percent: [
{
validator: (rule, value, callback) => {
if (form.commissionMode === 'percent' && (value <= 0 || value > 100)) {
callback(new Error('比例必须在0-100之间'))
} else {
callback()
}
},
trigger: 'blur'
}
],
scope: [{ required: true, message: '请输入适用范围', trigger: 'blur' }]
})
const filteredData = computed(() => {
if (!searchQuery.value) return mockData.value
return mockData.value.filter((item) => item.templateName.includes(searchQuery.value))
})
const handleSearch = () => {}
const showDialog = (type: 'add' | 'edit', row?: Template) => {
dialogType.value = type
dialogVisible.value = true
if (type === 'edit' && row) {
Object.assign(form, row)
} else {
Object.assign(form, {
templateName: '',
commissionMode: 'percent',
fixedAmount: 0,
percent: 0,
scope: '',
description: '',
status: 'active'
})
}
}
const handleSubmit = async (formEl: FormInstance | undefined) => {
if (!formEl) return
await formEl.validate((valid) => {
if (valid) {
if (dialogType.value === 'add') {
mockData.value.push({
...form,
id: Date.now().toString(),
usageCount: 0,
createTime: new Date().toLocaleString('zh-CN')
})
ElMessage.success('新增成功')
} else {
const index = mockData.value.findIndex((item) => item.id === form.id)
if (index !== -1) mockData.value[index] = { ...form }
ElMessage.success('修改成功')
}
dialogVisible.value = false
formEl.resetFields()
}
})
}
const handleDelete = (row: Template) => {
ElMessageBox.confirm('确定删除该模板吗？', '删除确认', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
const index = mockData.value.findIndex((item) => item.id === row.id)
if (index !== -1) mockData.value.splice(index, 1)
ElMessage.success('删除成功')
})
}
const viewUsage = (row: Template) => {
usageDialogVisible.value = true
}
</script>

306
src/views/settings/developer-api/index.vue
View File

@@ -1,306 +0,0 @@
<template>
<div class="page-content">
<!-- API密钥管理 -->
<ElCard shadow="never">
<template #header>
<div style="display: flex; align-items: center; justify-content: space-between">
<span style="font-weight: 500">API密钥管理</span>
<ElButton type="primary" size="small" @click="showCreateDialog">生成新密钥</ElButton>
</div>
</template>
<ArtTable :data="apiKeyList" index>
<template #default>
<ElTableColumn label="密钥名称" prop="keyName" />
<ElTableColumn label="AppKey" prop="appKey" min-width="200">
<template #default="scope">
<div style="display: flex; gap: 8px; align-items: center">
<code style="color: var(--el-color-primary)">{{ scope.row.appKey }}</code>
<ElButton link :icon="CopyDocument" @click="copyToClipboard(scope.row.appKey)" />
</div>
</template>
</ElTableColumn>
<ElTableColumn label="AppSecret" prop="appSecret" min-width="200">
<template #default="scope">
<div style="display: flex; gap: 8px; align-items: center">
<code>{{ scope.row.showSecret ? scope.row.appSecret : '••••••••••••••••' }}</code>
<ElButton link :icon="View" @click="scope.row.showSecret = !scope.row.showSecret" />
<ElButton link :icon="CopyDocument" @click="copyToClipboard(scope.row.appSecret)" />
</div>
</template>
</ElTableColumn>
<ElTableColumn label="权限" prop="permissions">
<template #default="scope">
<ElTag
v-for="(perm, index) in scope.row.permissions"
:key="index"
size="small"
style="margin-right: 4px"
>
{{ perm }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="状态" prop="status">
<template #default="scope">
<ElTag :type="scope.row.status === 'active' ? 'success' : 'info'">
{{ scope.row.status === 'active' ? '启用' : '禁用' }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="createTime" width="180" />
<ElTableColumn fixed="right" label="操作" width="180">
<template #default="scope">
<el-button link @click="handleResetKey(scope.row)">重置密钥</el-button>
<el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</ElTableColumn>
</template>
</ArtTable>
</ElCard>
<!-- Webhook配置 -->
<ElCard shadow="never" style="margin-top: 20px">
<template #header>
<span style="font-weight: 500">Webhook配置</span>
</template>
<ElForm :model="webhookForm" label-width="120px" style="max-width: 800px">
<ElFormItem label="回调地址">
<ElInput v-model="webhookForm.url" placeholder="https://your-domain.com/webhook">
<template #prepend>POST</template>
</ElInput>
</ElFormItem>
<ElFormItem label="签名密钥">
<ElInput
v-model="webhookForm.secret"
:type="showWebhookSecret ? 'text' : 'password'"
placeholder="用于验证webhook请求签名"
>
<template #append>
<ElButton :icon="View" @click="showWebhookSecret = !showWebhookSecret" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem label="事件订阅">
<ElCheckboxGroup v-model="webhookForm.events">
<ElCheckbox value="order.created">订单创建</ElCheckbox>
<ElCheckbox value="order.paid">订单支付</ElCheckbox>
<ElCheckbox value="card.activated">卡片激活</ElCheckbox>
<ElCheckbox value="card.expired">卡片过期</ElCheckbox>
<ElCheckbox value="recharge.success">充值成功</ElCheckbox>
</ElCheckboxGroup>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" @click="saveWebhook">保存配置</ElButton>
<ElButton @click="testWebhook">测试推送</ElButton>
</ElFormItem>
</ElForm>
</ElCard>
<!-- API调用统计 -->
<ElCard shadow="never" style="margin-top: 20px">
<template #header>
<span style="font-weight: 500">API调用统计（最近7天）</span>
</template>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :lg="6">
<div class="stat-box">
<div class="stat-label">总调用次数</div>
<div class="stat-value">12,580</div>
</div>
</ElCol>
<ElCol :xs="24" :sm="12" :lg="6">
<div class="stat-box">
<div class="stat-label">成功次数</div>
<div class="stat-value" style="color: var(--el-color-success)">12,453</div>
</div>
</ElCol>
<ElCol :xs="24" :sm="12" :lg="6">
<div class="stat-box">
<div class="stat-label">失败次数</div>
<div class="stat-value" style="color: var(--el-color-danger)">127</div>
</div>
</ElCol>
<ElCol :xs="24" :sm="12" :lg="6">
<div class="stat-box">
<div class="stat-label">成功率</div>
<div class="stat-value">99.0%</div>
</div>
</ElCol>
</ElRow>
</ElCard>
<!-- 生成密钥对话框 -->
<ElDialog v-model="createDialogVisible" title="生成新密钥" width="500px" align-center>
<ElForm ref="createFormRef" :model="createForm" :rules="createRules" label-width="100px">
<ElFormItem label="密钥名称" prop="keyName">
<ElInput v-model="createForm.keyName" placeholder="请输入密钥名称" />
</ElFormItem>
<ElFormItem label="权限设置">
<ElCheckboxGroup v-model="createForm.permissions">
<ElCheckbox value="读取">读取</ElCheckbox>
<ElCheckbox value="写入">写入</ElCheckbox>
<ElCheckbox value="删除">删除</ElCheckbox>
</ElCheckboxGroup>
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="createDialogVisible = false">取消</ElButton>
<ElButton type="primary" @click="handleCreateKey">生成</ElButton>
</div>
</template>
</ElDialog>
</div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { CopyDocument, View } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
defineOptions({ name: 'DeveloperApi' })
interface ApiKey {
id: string
keyName: string
appKey: string
appSecret: string
permissions: string[]
status: 'active' | 'inactive'
createTime: string
showSecret?: boolean
}
const apiKeyList = ref<ApiKey[]>([
{
id: '1',
keyName: '生产环境密钥',
appKey: 'ak_prod_1234567890abcdef',
appSecret: 'sk_prod_abcdefghijklmnopqrstuvwxyz123456',
permissions: ['读取', '写入'],
status: 'active',
createTime: '2026-01-01 10:00:00',
showSecret: false
}
])
const webhookForm = reactive({
url: 'https://your-domain.com/webhook',
secret: 'webhook_secret_key_123456',
events: ['order.created', 'order.paid']
})
const showWebhookSecret = ref(false)
const createDialogVisible = ref(false)
const createFormRef = ref<FormInstance>()
const createForm = reactive({
keyName: '',
permissions: ['读取']
})
const createRules = reactive<FormRules>({
keyName: [{ required: true, message: '请输入密钥名称', trigger: 'blur' }]
})
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text).then(() => {
ElMessage.success('已复制到剪贴板')
})
}
const showCreateDialog = () => {
createForm.keyName = ''
createForm.permissions = ['读取']
createDialogVisible.value = true
}
const handleCreateKey = async () => {
if (!createFormRef.value) return
await createFormRef.value.validate((valid) => {
if (valid) {
const newKey: ApiKey = {
id: Date.now().toString(),
keyName: createForm.keyName,
appKey: `ak_${Date.now()}`,
appSecret: `sk_${Math.random().toString(36).substring(2)}`,
permissions: createForm.permissions,
status: 'active',
createTime: new Date().toLocaleString('zh-CN'),
showSecret: false
}
apiKeyList.value.push(newKey)
createDialogVisible.value = false
ElMessage.success('密钥生成成功，请妥善保管')
}
})
}
const handleResetKey = (row: ApiKey) => {
ElMessageBox.confirm('重置后原密钥将失效，确定要重置吗？', '重置密钥', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
row.appSecret = `sk_${Math.random().toString(36).substring(2)}`
ElMessage.success('密钥重置成功')
})
}
const handleDelete = (row: ApiKey) => {
ElMessageBox.confirm('删除后无法恢复，确定要删除吗？', '删除密钥', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
const index = apiKeyList.value.findIndex((item) => item.id === row.id)
if (index !== -1) apiKeyList.value.splice(index, 1)
ElMessage.success('删除成功')
})
}
const saveWebhook = () => {
ElMessage.success('Webhook配置保存成功')
}
const testWebhook = () => {
ElMessage.info('正在发送测试推送...')
setTimeout(() => {
ElMessage.success('测试推送成功')
}, 1500)
}
</script>
<style lang="scss" scoped>
.page-content {
.stat-box {
padding: 20px;
text-align: center;
background: var(--el-bg-color);
border-radius: 8px;
.stat-label {
margin-bottom: 8px;
font-size: 14px;
color: var(--el-text-color-secondary);
}
.stat-value {
font-size: 28px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
:deep(.el-checkbox) {
margin-right: 20px;
margin-bottom: 10px;
}
}
</style>

216
src/views/settings/payment-merchant/index.vue
View File

@@ -1,216 +0,0 @@
<template>
<div class="page-content">
<ElCard shadow="never">
<template #header>
<span style="font-weight: 500">支付商户配置</span>
</template>
<ElForm
ref="formRef"
:model="form"
:rules="rules"
label-width="150px"
style="max-width: 900px"
>
<ElDivider content-position="left">基础信息</ElDivider>
<ElFormItem label="商户名称" prop="merchantName">
<ElInput v-model="form.merchantName" placeholder="请输入商户名称" />
</ElFormItem>
<ElFormItem label="商户编号" prop="merchantId">
<ElInput v-model="form.merchantId" placeholder="请输入商户编号" />
</ElFormItem>
<ElDivider content-position="left">API配置</ElDivider>
<ElFormItem label="AppID" prop="appId">
<ElInput v-model="form.appId" placeholder="请输入AppID">
<template #append>
<ElButton :icon="View" @click="toggleShow('appId')">
{{ showFields.appId ? '隐藏' : '显示' }}
</ElButton>
</template>
</ElInput>
</ElFormItem>
<ElFormItem label="AppSecret" prop="appSecret">
<ElInput
v-model="form.appSecret"
:type="showFields.appSecret ? 'text' : 'password'"
placeholder="请输入AppSecret"
>
<template #append>
<ElButton :icon="View" @click="toggleShow('appSecret')">
{{ showFields.appSecret ? '隐藏' : '显示' }}
</ElButton>
</template>
</ElInput>
</ElFormItem>
<ElFormItem label="API密钥" prop="apiKey">
<ElInput
v-model="form.apiKey"
:type="showFields.apiKey ? 'text' : 'password'"
placeholder="请输入API密钥"
>
<template #append>
<ElButton :icon="View" @click="toggleShow('apiKey')">
{{ showFields.apiKey ? '隐藏' : '显示' }}
</ElButton>
</template>
</ElInput>
</ElFormItem>
<ElDivider content-position="left">回调配置</ElDivider>
<ElFormItem label="支付回调地址" prop="notifyUrl">
<ElInput v-model="form.notifyUrl" placeholder="https://your-domain.com/api/notify">
<template #prepend>POST</template>
</ElInput>
</ElFormItem>
<ElFormItem label="退款回调地址" prop="refundNotifyUrl">
<ElInput
v-model="form.refundNotifyUrl"
placeholder="https://your-domain.com/api/refund-notify"
>
<template #prepend>POST</template>
</ElInput>
</ElFormItem>
<ElDivider content-position="left">支付方式</ElDivider>
<ElFormItem label="启用的支付方式">
<ElCheckboxGroup v-model="form.paymentMethods">
<ElCheckbox value="wechat">
<div style="display: flex; gap: 8px; align-items: center">
<span style="font-size: 20px; color: #09bb07">💬</span>
<span>微信支付</span>
</div>
</ElCheckbox>
<ElCheckbox value="alipay">
<div style="display: flex; gap: 8px; align-items: center">
<span style="font-size: 20px; color: #1677ff">💳</span>
<span>支付宝</span>
</div>
</ElCheckbox>
<ElCheckbox value="bank">
<div style="display: flex; gap: 8px; align-items: center">
<span style="font-size: 20px">🏦</span>
<span>银行卡</span>
</div>
</ElCheckbox>
</ElCheckboxGroup>
</ElFormItem>
<ElFormItem label="测试模式">
<ElSwitch v-model="form.testMode" />
<span style="margin-left: 8px; color: var(--el-text-color-secondary)">
{{ form.testMode ? '开启（使用沙箱环境）' : '关闭（生产环境）' }}
</span>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" @click="handleSave">保存配置</ElButton>
<ElButton @click="handleTest">测试连接</ElButton>
<ElButton @click="resetForm">重置</ElButton>
</ElFormItem>
</ElForm>
</ElCard>
<ElCard shadow="never" style="margin-top: 20px">
<template #header>
<span style="font-weight: 500">配置说明</span>
</template>
<ElAlert type="info" :closable="false">
<template #title>
<div style="line-height: 1.8">
<p><strong>AppID/AppSecret</strong>: 从支付服务商后台获取</p>
<p><strong>API密钥</strong>: 用于签名验证，请妥善保管</p>
<p><strong>回调地址</strong>: 支付完成后，支付平台会向该地址发送支付结果通知</p>
<p><strong>测试模式</strong>: 开启后使用沙箱环境，不会产生真实交易</p>
</div>
</template>
</ElAlert>
</ElCard>
</div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { View } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
defineOptions({ name: 'PaymentMerchant' })
const formRef = ref<FormInstance>()
const form = reactive({
merchantName: '某某科技有限公司',
merchantId: 'MCH123456789',
appId: 'wx1234567890abcdef',
appSecret: '********************************',
apiKey: '********************************',
notifyUrl: 'https://your-domain.com/api/payment/notify',
refundNotifyUrl: 'https://your-domain.com/api/payment/refund-notify',
paymentMethods: ['wechat', 'alipay'],
testMode: true
})
const showFields = reactive({
appId: false,
appSecret: false,
apiKey: false
})
const rules = reactive<FormRules>({
merchantName: [{ required: true, message: '请输入商户名称', trigger: 'blur' }],
merchantId: [{ required: true, message: '请输入商户编号', trigger: 'blur' }],
appId: [{ required: true, message: '请输入AppID', trigger: 'blur' }],
appSecret: [{ required: true, message: '请输入AppSecret', trigger: 'blur' }],
apiKey: [{ required: true, message: '请输入API密钥', trigger: 'blur' }],
notifyUrl: [
{ required: true, message: '请输入支付回调地址', trigger: 'blur' },
{ type: 'url', message: '请输入正确的URL地址', trigger: 'blur' }
]
})
const toggleShow = (field: 'appId' | 'appSecret' | 'apiKey') => {
showFields[field] = !showFields[field]
}
const handleSave = async () => {
if (!formRef.value) return
await formRef.value.validate((valid) => {
if (valid) {
ElMessage.success('配置保存成功')
}
})
}
const handleTest = () => {
ElMessage.info('正在测试连接...')
setTimeout(() => {
ElMessage.success('连接测试成功')
}, 1500)
}
const resetForm = () => {
formRef.value?.resetFields()
}
</script>
<style lang="scss" scoped>
.page-content {
:deep(.el-checkbox) {
margin-right: 30px;
margin-bottom: 12px;
}
:deep(.el-divider__text) {
font-weight: 500;
color: var(--el-text-color-primary);
}
}
</style>

1
src/views/settings/wechat-config/detail.vue
View File

@@ -51,6 +51,7 @@
const getProviderTypeText = (type: PaymentProviderType): string => {
const typeMap: Record<PaymentProviderType, string> = {
wechat: '微信直连',
wechat_v2: '微信直连V2',
fuiou: '富友支付'
}
return typeMap[type] || type

123
src/views/settings/wechat-config/index.vue
View File

@@ -19,7 +19,7 @@
@refresh="handleRefresh"
>
<template #left>
<ElButton type="primary" @click="showCreateDialog">新增支付配置</ElButton>
<ElButton type="primary" @click="showCreateDialog" v-if="hasAuth('wechat_config:create')">新增支付配置</ElButton>
</template>
</ArtTableHeader>
@@ -33,29 +33,16 @@
:pageSize="pagination.page_size"
:total="pagination.total"
:marginTop="10"
:row-class-name="getRowClassName"
:actions="getActions"
:actionsWidth="120"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@row-contextmenu="handleRowContextMenu"
@cell-mouse-enter="handleCellMouseEnter"
@cell-mouse-leave="handleCellMouseLeave"
>
<template #default>
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
</template>
</ArtTable>
<!-- 鼠标悬浮提示 -->
<TableContextMenuHint :visible="showContextMenuHint" :position="hintPosition" />
<!-- 支付配置操作右键菜单 -->
<ArtMenuRight
ref="configOperationMenuRef"
:menu-items="configOperationMenuItems"
:menu-width="140"
@select="handleConfigOperationMenuSelect"
/>
<!-- 创建/编辑对话框 -->
<ElDialog
v-model="dialogVisible"
@@ -436,7 +423,7 @@
import { h, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { WechatConfigService } from '@/api/modules'
import { ElMessage, ElTag, ElMessageBox, ElSwitch, ElButton } from 'element-plus'
import { ElMessage, ElMessageBox, ElSwitch, ElButton } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type {
WechatConfig,
@@ -448,10 +435,6 @@
import type { SearchFormItem } from '@/types'
import { useCheckedColumns } from '@/composables/useCheckedColumns'
import { useAuth } from '@/composables/useAuth'
import { useTableContextMenu } from '@/composables/useTableContextMenu'
import ArtMenuRight from '@/components/core/others/ArtMenuRight.vue'
import TableContextMenuHint from '@/components/core/others/TableContextMenuHint.vue'
import type { MenuItemType } from '@/components/core/others/ArtMenuRight.vue'
import { formatDateTime } from '@/utils/business/format'
import { RoutesAlias } from '@/router/routesAlias'
@@ -467,10 +450,6 @@
const dialogType = ref<'add' | 'edit'>('add')
const formRef = ref<FormInstance>()
// 右键菜单
const configOperationMenuRef = ref<InstanceType<typeof ArtMenuRight>>()
const currentOperatingConfig = ref<WechatConfig | null>(null)
// 搜索表单初始值
const initialSearchState = {
provider_type: undefined as PaymentProviderType | undefined,
@@ -533,7 +512,7 @@
]
// URL格式验证规则
const urlValidator = (rule: any, value: any, callback: any) => {
const urlValidator = (_rule: any, value: any, callback: any) => {
if (!value) {
callback()
return
@@ -692,6 +671,7 @@
activeText: '已激活',
inactiveText: '未激活',
inlinePrompt: true,
disabled: !hasAuth('wechat_config:status'),
'onUpdate:modelValue': (val) => handleStatusChange(row, val)
})
}
@@ -848,7 +828,7 @@
})
dialogType.value = 'edit'
dialogVisible.value = true
nextTick(() => {
await nextTick(() => {
formRef.value?.clearValidate()
})
}
@@ -956,6 +936,11 @@
// 激活/停用状态切换
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
@@ -1002,63 +987,35 @@
// 处理名称点击
const handleNameClick = (row: WechatConfig) => {
handleViewDetail(row)
}
// 支付配置操作菜单项配置
const configOperationMenuItems = computed((): MenuItemType[] => {
const items: MenuItemType[] = []
// 编辑
items.push({
key: 'edit',
label: '编辑'
})
// 删除
items.push({
key: 'delete',
label: '删除'
})
return items
})
// 显示支付配置操作右键菜单
const showConfigOperationMenu = (e: MouseEvent, row: WechatConfig) => {
e.preventDefault()
e.stopPropagation()
currentOperatingConfig.value = row
configOperationMenuRef.value?.show(e)
}
// 处理表格行右键菜单
const handleRowContextMenu = (row: WechatConfig, column: any, event: MouseEvent) => {
showConfigOperationMenu(event, row)
}
// 处理支付配置操作菜单选择
const handleConfigOperationMenuSelect = (item: MenuItemType) => {
if (!currentOperatingConfig.value) return
switch (item.key) {
case 'edit':
showEditDialog(currentOperatingConfig.value)
break
case 'delete':
handleDelete(currentOperatingConfig.value)
break
if (hasAuth('wechat_config:detail')) {
handleViewDetail(row)
} else {
ElMessage.warning('您没有查看详情的权限')
}
}
// 使用表格右键菜单功能
const {
showContextMenuHint,
hintPosition,
getRowClassName,
handleCellMouseEnter,
handleCellMouseLeave
} = useTableContextMenu()
// 获取操作按钮
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">
@@ -1066,10 +1023,6 @@
height: 100%;
}
:deep(.el-table__row.table-row-with-context-menu) {
cursor: pointer;
}
.config-form {
max-height: 600px;
padding-right: 10px;