txz-mgr-pay/src/views/order/payOrder/notifyLog.vue

<template>
	<el-dialog :close-on-click-modal="false" title="回调日志" draggable v-model="visible" width="1000px">
		<div v-loading="loading">
			<!-- 回调信息概览 -->
			<el-descriptions :column="2" border class="mb20" v-if="notifyData.id">
				<el-descriptions-item label="订单ID">{{ notifyData.orderId }}</el-descriptions-item>
				<el-descriptions-item label="通知状态">
					<el-tag v-if="notifyData.status === 0" type="warning">待通知</el-tag>
					<el-tag v-else-if="notifyData.status === 1" type="success">通知成功</el-tag>
					<el-tag v-else-if="notifyData.status === 2" type="danger">通知失败</el-tag>
					<el-tag v-else>{{ notifyData.status }}</el-tag>
				</el-descriptions-item>
				<el-descriptions-item label="当前通知次数">{{ notifyData.notifyTimes }}</el-descriptions-item>
				<el-descriptions-item label="最大通知次数">{{ notifyData.maxNotifyTimes }}</el-descriptions-item>
				<el-descriptions-item label="通知地址" :span="2">{{ notifyData.notifyUrl }}</el-descriptions-item>
				<el-descriptions-item label="最后执行时间" :span="2">{{ notifyData.lastExecuteTime || '-' }}</el-descriptions-item>
				<el-descriptions-item label="下次通知时间" :span="2">{{ notifyData.nextNotifyTime || '-' }}</el-descriptions-item>
				<el-descriptions-item label="失败原因" :span="2">
					<span style="color: #f56c6c">{{ notifyData.errorMsg || '-' }}</span>
				</el-descriptions-item>
			</el-descriptions>

			<!-- 通知日志列表 -->
			<el-divider content-position="left">通知日志</el-divider>
			<el-timeline v-if="notifyData.payNotifyLogs && notifyData.payNotifyLogs.length > 0">
				<el-timeline-item
					v-for="(log, index) in notifyData.payNotifyLogs"
					:key="index"
					:timestamp="log.createTime"
					placement="top"
					:type="log.status === 1 ? 'success' : 'danger'"
				>
					<el-card shadow="hover">
						<div class="log-item">
							<div class="log-header">
								<span class="log-title">第 {{ log.notifyTimes }} 次通知</span>
								<el-tag v-if="log.status === 0" type="warning" size="small">待通知</el-tag>
								<el-tag v-else-if="log.status === 1" type="success" size="small">通知成功</el-tag>
								<el-tag v-else-if="log.status === 2" type="danger" size="small">通知失败</el-tag>
							</div>
							<div class="log-content">
								<div class="log-label">响应结果：</div>
								<pre class="log-response">{{ log.response || '无响应' }}</pre>
							</div>
						</div>
					</el-card>
				</el-timeline-item>
			</el-timeline>
			<el-empty v-else description="暂无通知日志" />
		</div>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" name="NotifyLogDialog" setup>
import { fetchPayNotifyLog } from '/@/api/order';
import { useMessage } from '/@/hooks/message';

// 定义变量
const visible = ref(false);
const loading = ref(false);
const notifyData = reactive<any>({});

// 打开弹窗
const openDialog = async (appId: string, orderId: string) => {
	visible.value = true;
	loading.value = true;
	
	// 清空数据
	Object.keys(notifyData).forEach(key => delete notifyData[key]);
	
	try {
		const res = await fetchPayNotifyLog(appId, orderId);
		Object.assign(notifyData, res.data);
	} catch (err: any) {
		useMessage().error(err.msg || '获取回调日志失败');
	} finally {
		loading.value = false;
	}
};

// 暴露方法
defineExpose({
	openDialog,
});
</script>

<style scoped>
.log-item {
	padding: 10px 0;
}

.log-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.log-title {
	font-size: 16px;
	font-weight: bold;
	color: #303133;
}

.log-content {
	margin-top: 10px;
}

.log-label {
	font-size: 14px;
	color: #606266;
	margin-bottom: 5px;
}

.log-response {
	background: #f5f7fa;
	padding: 10px;
	border-radius: 4px;
	font-size: 13px;
	color: #303133;
	white-space: pre-wrap;
	word-wrap: break-word;
	max-height: 200px;
	overflow-y: auto;
	margin: 0;
}
</style>