<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-table :data="detail.items" border class="mt10">
|
<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">
|
<div class="title">交易文件</div>
|
<el-table :data="files" border class="mt10">
|
<el-table-column label="文件名称" prop="name" />
|
<el-table-column label="文件大小" prop="size" width="140" />
|
<el-table-column label="操作" width="160">
|
<template #default="{ row }">
|
<el-button type="primary" link @click="preview(row)">预览</el-button>
|
<el-button type="primary" link @click="download(row)">下载</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div class="title mt15">交易信息备注</div>
|
<el-form :model="form" label-width="120px" class="mt10">
|
<div v-for="(item, i) in detail.items" :key="i" class="item-block">
|
<div class="sub-title">{{ item.name }}</div>
|
<el-form-item label="备注">
|
<el-input v-model="form.items[i].remark" placeholder="请输入备注" />
|
</el-form-item>
|
</div>
|
</el-form>
|
<div class="ba-center mt15">
|
<el-button @click="goBack">返回</el-button>
|
<el-button type="success" @click="submit(true)">通过</el-button>
|
<el-button type="danger" @click="submit(false)">驳回</el-button>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, reactive } from 'vue'
|
import { useRoute, useRouter } from 'vue-router'
|
import { fetchApprovalDetail, checkFiles } from '@/api/approvalManage'
|
import { ElMessage } from 'element-plus'
|
|
const route = useRoute()
|
const router = useRouter()
|
const detail = reactive<any>({ items: [] })
|
const files = reactive<any[]>([])
|
const form = reactive<any>({ items: [] })
|
|
onMounted(async () => {
|
const { data } = (await fetchApprovalDetail({ id: route.params.id })) as any
|
Object.assign(detail, data || {})
|
files.splice(0, files.length, ...(data?.files || []))
|
form.items = (detail.items || []).map(() => ({ remark: '' }))
|
})
|
|
const preview = (file: any) => window.open(file.previewUrl)
|
const download = (file: any) => window.open(file.downloadUrl)
|
const goBack = () => router.back()
|
const submit = async (pass: boolean) => {
|
const { code } = (await checkFiles({ id: route.params.id, pass, ...form })) as any
|
if (code === 200) {
|
ElMessage.success('操作成功')
|
router.back()
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.title { font-weight: 600; }
|
.sub-title { font-weight: 600; margin: 10px 0; }
|
.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; }
|
.item-block { padding: 10px; border: 1px solid #ebeef5; border-radius: 4px; margin-bottom: 10px; }
|
</style>
|
