txz-mch-pay/src/views/payment/channel/index.vue

<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row class="ml10" v-show="showSearch">
				<el-form :inline="true" :model="queryForm" @keyup.enter="handleSearch" ref="queryRef">
					<el-form-item label="通道名称" prop="channelName">
						<el-input placeholder="请输入通道名称" style="max-width: 180px" v-model="queryForm.channelName" clearable />
					</el-form-item>
					<el-form-item label="支付方式" prop="paymentName">
						<el-input placeholder="请输入支付方式" style="max-width: 180px" v-model="queryForm.paymentName" clearable />
					</el-form-item>
					<el-form-item label="支付类别" prop="paymentType">
						<el-select v-model="queryForm.paymentType" placeholder="请选择支付类别" style="max-width: 180px" clearable>
							<el-option label="代付" value="PAY" />
							<el-option label="代收" value="HARVEST" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button @click="handleSearch" icon="search" type="primary">查询</el-button>
						<el-button @click="resetQuery" icon="Refresh">重置</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
				<div class="mb8" style="width: 100%">
					<el-button @click="loadData" class="ml10" icon="Refresh" type="primary">刷新</el-button>
					<right-toolbar
						@queryTable="handleSearch"
						class="ml10"
						style="float: right; margin-right: 20px"
						v-model:showSearch="showSearch"
					></right-toolbar>
				</div>
			</el-row>

			<el-table
				:data="filteredData"
				style="width: 100%"
				v-loading="loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
			>
				<el-table-column label="通道名称" prop="channelName" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ scope.row.channelName || '--' }}
					</template>
				</el-table-column>
				<el-table-column label="支付方式" prop="paymentName" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ scope.row.paymentName || '--' }}
					</template>
				</el-table-column>
				<el-table-column label="支付类别" prop="paymentType" show-overflow-tooltip align="center">
					<template #default="scope">
						<el-tag :type="scope.row.paymentType === 'PAY' ? 'warning' : 'info'">
							{{ paymentTypeMap[scope.row.paymentType] || scope.row.paymentType }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="商户手续费类型" prop="mfeeType" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ feeTypeMap[scope.row.mfeeType] || scope.row.mfeeType }}
					</template>
				</el-table-column>
				<el-table-column label="商户手续费比例" prop="mfeeRate" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ scope.row.mfeeRate ? `${scope.row.mfeeRate}%` : '0%' }}
					</template>
				</el-table-column>
				<el-table-column label="商户手续费固定金额" prop="mfeeEvery" show-overflow-tooltip align="center">
					<template #default="scope">
						<span class="amount-value">¥{{ scope.row.mfeeEvery ? scope.row.mfeeEvery.toFixed(2) : '0.00' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="代理商手续费类型" prop="afeeType" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ feeTypeMap[scope.row.afeeType] || scope.row.afeeType }}
					</template>
				</el-table-column>
				<el-table-column label="代理商手续费比例" prop="afeeRate" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ scope.row.afeeRate ? `${scope.row.afeeRate}%` : '0%' }}
					</template>
				</el-table-column>
				<el-table-column label="代理商手续费固定金额" prop="afeeEvery" show-overflow-tooltip align="center">
					<template #default="scope">
						<span class="amount-value">¥{{ scope.row.afeeEvery ? scope.row.afeeEvery.toFixed(2) : '0.00' }}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script lang="ts" name="paymentChannel" setup>
import { getMerchantRate } from '/@/api/payment/channel';
import { useMessage } from '/@/hooks/message';

// 支付类别映射
const paymentTypeMap: Record<string, string> = {
	PAY: '代付',
	HARVEST: '代收',
};

// 手续费类型映射
const feeTypeMap: Record<string, string> = {
	PERCENTAGE: '百分比',
	FIXED: '固定金额',
	MIXED: '混合',
};

// 定义变量
const queryRef = ref();
const showSearch = ref(true);
const loading = ref(false);
const tableData = ref<any[]>([]);
const queryForm = ref({
	channelName: '',
	paymentName: '',
	paymentType: '',
});

// 表格样式
const tableStyle = {
	cellStyle: {
		textAlign: 'center',
	},
	headerCellStyle: {
		textAlign: 'center',
		background: '#fafafa',
	},
};

// 前端筛选数据
const filteredData = computed(() => {
	let data = tableData.value;

	// 通道名称筛选
	if (queryForm.value.channelName) {
		data = data.filter((item) => item.channelName?.toLowerCase().includes(queryForm.value.channelName.toLowerCase()));
	}

	// 支付方式筛选
	if (queryForm.value.paymentName) {
		data = data.filter((item) => item.paymentName?.toLowerCase().includes(queryForm.value.paymentName.toLowerCase()));
	}

	// 支付类别筛选
	if (queryForm.value.paymentType) {
		data = data.filter((item) => item.paymentType === queryForm.value.paymentType);
	}

	return data;
});

// 查询
const handleSearch = () => {
	// 前端筛选，无需额外操作
};

// 重置查询
const resetQuery = () => {
	queryRef.value?.resetFields();
};

// 加载数据
const loadData = async () => {
	loading.value = true;
	try {
		const res = await getMerchantRate();
		tableData.value = res.data || [];
	} catch (err: any) {
		useMessage().error(err.msg || '获取费率信息失败');
	} finally {
		loading.value = false;
	}
};

// 初始化加载
onMounted(() => {
	loadData();
});
</script>

<style scoped lang="scss">
.amount-value {
	font-size: 14px;
	font-weight: bold;
	color: #f56c6c;
}
</style>