<template>
|
<div class="default-main">
|
<el-card shadow="never">
|
<div class="title">订单信息</div>
|
<el-descriptions :column="3" border class="mt10">
|
<el-descriptions-item label="订单编号">{{ detail.orderNo }}</el-descriptions-item>
|
<el-descriptions-item label="交易资源类型">{{ detail.resourceTypeName }}</el-descriptions-item>
|
<el-descriptions-item label="交易状态">{{ detail.statusName }}</el-descriptions-item>
|
<el-descriptions-item label="申请时间">{{ detail.applyTime }}</el-descriptions-item>
|
<el-descriptions-item label="单位">{{ detail.unitName }}</el-descriptions-item>
|
<el-descriptions-item label="用户名">{{ detail.userName }}</el-descriptions-item>
|
</el-descriptions>
|
</el-card>
|
|
<el-card class="mt15" shadow="never">
|
<div class="title">交易内容</div>
|
<el-descriptions :column="2" border class="mt10">
|
<el-descriptions-item label="产品名称">{{ detail.productName }}</el-descriptions-item>
|
<el-descriptions-item label="提供者">{{ detail.supplier }}</el-descriptions-item>
|
<el-descriptions-item label="行业领域">{{ detail.industry }}</el-descriptions-item>
|
<el-descriptions-item label="单位工程">{{ detail.projectUnit }}</el-descriptions-item>
|
<el-descriptions-item label="产品简介" :span="2">
|
{{ detail.productDesc }}
|
</el-descriptions-item>
|
</el-descriptions>
|
|
<el-table :data="detail.items" border class="mt15">
|
<el-table-column label="详情" min-width="280">
|
<template #default="{ row }">
|
<div>
|
<div>{{ row.name }}</div>
|
<div class="gray">客户对象：{{ row.customerTarget }}</div>
|
<div class="gray">并发节点数：{{ row.concurrentNodes }}</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="单价" prop="priceName" width="140" />
|
<el-table-column label="数量" prop="quantity" width="80" />
|
<el-table-column label="期限(年)" prop="period" width="120" />
|
</el-table>
|
|
<div class="total">
|
总计：<span class="price">{{ detail.pointTotal }}</span> 积分
|
<span class="ml20 price">{{ detail.cashTotal }}</span> 元
|
</div>
|
</el-card>
|
|
<el-card class="mt15" shadow="never" v-if="detail.records?.length">
|
<div class="title">审批追踪</div>
|
<el-table :data="detail.records" border class="mt10">
|
<el-table-column label="节点名称" prop="nodeName" />
|
<el-table-column label="审批人" prop="approver" width="160" />
|
<el-table-column label="审批部门" prop="department" width="200" />
|
<el-table-column label="开始时间" prop="startTime" width="180" />
|
<el-table-column label="结束时间" prop="endTime" width="180" />
|
<el-table-column label="状态" prop="statusName" width="120" />
|
</el-table>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, reactive } from 'vue'
|
import { useRoute } from 'vue-router'
|
import { fetchOrderDetail } from '@/api/tradeManage'
|
|
const route = useRoute()
|
const detail = reactive<any>({ items: [], records: [] })
|
|
onMounted(async () => {
|
const { data } = (await fetchOrderDetail({ id: route.params.id })) as any
|
Object.assign(detail, data || {})
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.title { font-weight: 600; }
|
.mt10 { margin-top: 10px; }
|
.mt15 { margin-top: 15px; }
|
.gray { color: #909399; font-size: 12px; }
|
.total { text-align: right; margin-top: 10px; }
|
.price { color: #f56c6c; font-weight: 600; }
|
.ml20 { margin-left: 20px; }
|
</style>
|
