jcloud/dashboard/src2/components/billing/mpesa/PartnerPaymentPayout.vue

<template>
	<Dialog :options="{ title: '合作伙伴付款支付', size: 'lg' }">
		<template #body-content>
			<div class="grid grid-cols-2 gap-4">
				<!-- 过滤器 -->
				<FormControl
					label="支付网关"
					v-model="paymentGateway"
					name="payment_gateway"
					type="autocomplete"
					:options="paymentGatewayList"
					size="sm"
					variant="subtle"
					class="mb-5"
					placeholder="输入支付网关"
				/>

				<FormControl
					label="合作伙伴"
					v-model="partner"
					:options="partnerList"
					size="sm"
					variant="subtle"
					type="autocomplete"
					class="mb-5"
					placeholder="输入合作伙伴"
				/>

				<FormControl
					label="开始日期"
					v-model="fromDate"
					name="from_date"
					autocomplete="off"
					class="mb-5"
					type="date"
					placeholder="选择开始日期"
				/>

				<FormControl
					label="结束日期"
					v-model="toDate"
					name="to_date"
					autocomplete="off"
					class="mb-5"
					type="date"
					placeholder="选择结束日期"
				/>

				<Button
					@click="fetchPayments"
					variant="solid"
					class="justify-center col-span-2"
				>
					获取付款
				</Button>
			</div>

			<!-- 结果表格 -->
			<div v-if="payments.length > 0" class="mt-5">
				<table class="w-full border-collapse border border-gray-300">
					<thead>
						<tr>
							<th class="border border-gray-300 p-2">交易ID</th>
							<th class="border border-gray-300 p-2">金额</th>
							<th class="border border-gray-300 p-2">过账日期</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="payment in payments" :key="payment.name">
							<td class="border border-gray-300 p-2">{{ payment.name }}</td>
							<td class="border border-gray-300 p-2">{{ payment.amount }}</td>
							<td class="border border-gray-300 p-2">
								{{ payment.posting_date }}
							</td>
						</tr>
					</tbody>
				</table>
			</div>

			<div
				v-if="payments.length === 0 && fetchAttempted"
				class="text-center mt-4 text-gray-500"
			>
				未找到付款记录。
			</div>
			<div v-if="payments.length != 0" class="mt-4 flex w-full justify-end">
				<Button
					variant="outline"
					@click="createAndSubmitPayout"
					:loading="paymentInProgress"
				>
					提交付款
				</Button>
			</div>
		</template>
	</Dialog>
</template>

<script>
import { toast } from 'vue-sonner';
import { jingrowRequest } from 'jingrow-ui';

export default {
	name: 'PartnerPaymentPayout',
	data() {
		return {
			paymentGateway: '',
			partner: '',
			fromDate: '',
			toDate: '',
			partnerList: [],
			payments: [],
			fetchAttempted: false,
			paymentGatewayList: [],
		};
	},
	resources: {
		createPaymentPartnerPayout() {
			return {
				url: 'jcloud.api.regional_payments.mpesa.utils.create_payment_partner_payout',
				method: 'POST',
				params: {
					payment_gateway: this.paymentGateway.value,
					payment_partner: this.partner.value,
					from_date: this.fromDate,
					to_date: this.toDate,
					payments: this.payments,
				},
				onSuccess: () => {
					toast.success('付款提交成功');
					this.$emit('close');
				},
				onError: (error) => {
					toast.error(`提交付款时出错: ${error.message}`);
				},
			};
		},
	},
	methods: {
		async createAndSubmitPayout() {
			try {
				this.paymentInProgress = true;
				await this.$resources.createPaymentPartnerPayout.submit();
			} catch (error) {
				toast.error(`提交付款时出错: ${error.message}`);
			} finally {
				this.paymentInProgress = false;
			}
		},
		async fetchPayments() {
			try {
				this.fetchAttempted = true;
				const response = await jingrowRequest({
					url: 'jcloud.api.regional_payments.mpesa.utils.fetch_payments',
method: 'GET',
					params: {
						payment_gateway: this.paymentGateway.value,
						partner: this.partner.value,
						from_date: this.fromDate,
						to_date: this.toDate,
					},
				});
				if (Array.isArray(response)) {
					this.payments = response;
				} else {
					console.log('无数据');
				}
			} catch (error) {
				toast.error(`获取支付信息时出错: ${error.message}`);
			}
		},
		async fetchPartners() {
			try {
				const response = await jingrowRequest({
					url: '/api/action/jcloud.api.regional_payments.mpesa.utils.display_payment_partners',
					method: 'GET',
				});
				if (Array.isArray(response)) {
					this.partnerList = response;
				} else {
					console.log('无数据');
				}
			} catch (error) {
				this.errorMessage = `获取团队失败 ${error.message}`;
			}
		},

		async fetchPaymentGateway() {
			try {
				const response = await jingrowRequest({
					url: '/api/action/jcloud.api.regional_payments.mpesa.utils.display_payment_gateway',
					method: 'GET',
				});
				if (Array.isArray(response)) {
					this.paymentGatewayList = response;
				} else {
					console.log('无数据');
				}
			} catch (error) {
				this.errorMessage = `获取支付网关失败 ${error.message}`;
			}
		},
	},
	mounted() {
		this.fetchPartners();
		this.fetchPaymentGateway();
	},
};
</script>

<style scoped>
table {
	width: 100%;
	text-align: left;
	margin-top: 1rem;
}
th,
td {
	padding: 8px 12px;
}
</style>