mat/frontend/src/views/FactoryDetail.vue

51 lines
1.7 KiB
Vue

<template>
<div class="page">
<div class="page-title">
工厂详情
<el-button class="back-btn" plain size="small" @click="goBack">返回</el-button>
</div>
<div class="card" v-if="factory">
<el-descriptions :column="2" border>
<el-descriptions-item label="工厂全称">{{ factory.factory_name }}</el-descriptions-item>
<el-descriptions-item label="品牌">{{ factory.brand }}</el-descriptions-item>
<el-descriptions-item label="经销商">{{ factory.dealer_name }}</el-descriptions-item>
<el-descriptions-item label="产品分类">{{ factory.product_category }}</el-descriptions-item>
<el-descriptions-item label="地区">{{ formatRegion(factory.province, factory.city, factory.district) }}</el-descriptions-item>
<el-descriptions-item label="地址">{{ factory.address }}</el-descriptions-item>
<el-descriptions-item label="官网">{{ factory.website }}</el-descriptions-item>
<el-descriptions-item label="材料数量">{{ factory.material_count }}</el-descriptions-item>
</el-descriptions>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { formatRegion } from '@/utils/region'
import { fetchFactoryDetail } from '@/api/factory'
const route = useRoute()
const router = useRouter()
const factory = ref(null)
const loadDetail = async () => {
factory.value = await fetchFactoryDetail(route.params.id)
}
onMounted(loadDetail)
const goBack = () => {
router.back()
}
</script>
<style scoped>
.page-title {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>