YD_Event.Web/src/views/marchant/order/index.vue

<template>
	<div class="system-menu-container layout-padding">
		<ProTable ref="tableRef" :request-api="orderPageGet" :columns="columns" :pagination="true"
			:tool-button="true">
			<!-- <template #tools>
				<el-button v-auth="'order:export'" type="primary" icon="ele-Plus" @click="onOpenMenu"> 导出 </el-button>
			</template> -->
			<template #index="scope">
				{{ scope.$index + 1 }}
			</template>
			<template #paymentMethod="scope">
				{{ scope.row.paymentMethod }}
			</template>
			<template #action="scope">
				<el-button size="small" text type="primary" @click="onOpenMenu(scope.row.id)">
					查看详情 </el-button>
			</template>
		</ProTable>

		<!-- 弹窗 -->
		<el-dialog title="订单详情" v-model="isShowDialog" width="1100px">
			<el-skeleton :rows="6" animated v-if="detailLoading" />
			<el-empty v-else-if="!detailTableData.length" description="暂无订单明细数据" />
			<el-table v-else :data="detailTableData" border>
				<el-table-column prop="projectName" label="项目" align="center" />
				<el-table-column prop="groupName" label="组别" align="center" />
				<el-table-column prop="participantNames" label="参赛队员" align="center" show-overflow-tooltip />
				<el-table-column prop="fee" label="费用（元）" align="center" width="120" />
			</el-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="isShowDialog = false">取消</el-button>
					<el-button type="primary" @click="isShowDialog = false">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup >
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import ProTable from '/@/components/ProTable/index.vue';
import { orderPageGet , orderDetailGet} from '/@/api/match/order';

// 定义表单引用类型
const formRef = ref();

const formData = ref({
	orderNo: '',
    eventId: 0,
    eventName: '',
    registrationMode: 0,
    teamName: '',
    contactName: '',
    contactPhone: '',
    totalAmount: 0,
    discountAmount: 0,
    payableAmount: 0,
    status: 0,
    createdTime: '',
    paidTime: '',
    items:[],
	persons:[]
})



const columns = ref([
	{ prop: 'orderNo', label: '订单编号', align: 'center', search: { el: 'input', }, fixed: 'left', width: 150 },
	{ prop: 'eventName', label: '所属赛事', search: { el: 'input', }, },
	{ prop: 'paymentMethod', label: '支付方式', search: { el: 'select', }, enum: [{ label: '全部', value: 0 }, { label: '线上', value: 1 }, { label: '线下', value: 2 },], },
	{ prop: 'actualAmount', label: '实付金额' },
	{ prop: 'createdTime', label: '支付时间', search: { el: 'date-picker', props: { type: 'daterange' } } },
	{ prop: 'orderStatus', label: '订单状态' },
	{ prop: 'action', label: '操作', align: 'center', fixed: 'right', width: 120, },
]);

const isShowDialog = ref(false);
const dialogTitle = ref('新增');
const detailLoading = ref(false);

const normalizeNames = (value) => {
	if (Array.isArray(value)) return value.filter(Boolean).join('、');
	if (typeof value === 'string') return value;
	return '';
};

const detailTableData = computed(() => {
	const items = formData.value?.items ?? [];
	const persons = formData.value?.persons ?? [];
	return items.map((item) => {
		const personNamesByItem = persons
			.filter((p) => p?.itemId === item?.id || p?.projectId === item?.projectId)
			.map((p) => p?.name)
			.filter(Boolean);
		const participantNames = normalizeNames(
			item?.participantNames ?? item?.personNames ?? item?.memberNames ?? personNamesByItem
		) || '-';
		const fee = item?.subtotal ?? ((Number(item?.unitPrice) || 0) * (Number(item?.personCount) || 0));
		return {
			projectName: item?.projectName ?? '-',
			groupName: item?.groupName ?? item?.projectTypeName ?? '-',
			participantNames,
			fee,
		};
	});
});

const onOpenMenu = async(id) => {
	if (!id) return;
	isShowDialog.value = true;
	detailLoading.value = true;
	const { succeeded, data } = await orderDetailGet({ id });
	if (!succeeded) {
		ElMessage.error('订单详情加载失败');
		formData.value.items = [];
		formData.value.persons = [];
		detailLoading.value = false;
		return;
	}
	formData.value = {
		...formData.value,
		...(data ?? {}),
		items: data?.items ?? [],
		persons: data?.persons ?? [],
	};
	detailLoading.value = false;
	isShowDialog.value = true;
};




</script>
<style scoped lang="scss">
.dialog-footer {
	margin-top: 80px;
}

/* 时长组合框样式 */
.duration-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.duration-row .el-input {
	width: 120px;
}

.duration-separator {
	color: #606266;
	font-size: 14px;
}

.duration-label {
	color: #909399;
	font-size: 14px;
}
</style>