<template>
|
<div class="product-list-container">
|
<div class="page-header">
|
<div class="header-content">
|
<h2>产品列表</h2>
|
<p>测试产品价格查看组件功能</p>
|
</div>
|
</div>
|
|
<el-card class="product-card" shadow="never">
|
<template #header>
|
<div class="card-header">
|
<span>产品信息</span>
|
<el-button type="primary" @click="handleAddProduct">添加产品</el-button>
|
</div>
|
</template>
|
|
<el-table
|
:data="productList"
|
v-loading="loading"
|
style="width: 100%"
|
border
|
stripe
|
>
|
<el-table-column prop="id" label="产品ID" width="120" />
|
<el-table-column prop="name" label="产品名称" min-width="200" />
|
<el-table-column prop="productType" label="产品类型" width="120" />
|
<el-table-column prop="industry" label="行业领域" width="150" />
|
<el-table-column prop="submitUnit" label="提报单位" width="150" />
|
<el-table-column prop="shelfStatus" label="上架状态" width="100">
|
<template #default="{ row }">
|
<el-tag :type="getStatusType(row.shelfStatus)" size="small">
|
{{ row.shelfStatus }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="200" fixed="right">
|
<template #default="{ row }">
|
<el-button
|
type="primary"
|
size="small"
|
@click="handlePriceManage(row)"
|
>
|
价格管理
|
</el-button>
|
<el-button
|
type="success"
|
size="small"
|
@click="handleViewPricing(row)"
|
>
|
查看定价
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<!-- 产品价格查看弹窗 -->
|
<ProductPriceViewer
|
v-model="priceViewerVisible"
|
:product-id="currentProductId"
|
@order="handleOrder"
|
/>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, onMounted } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import ProductPriceViewer from '@/views/productManage/productPriceViewer/index.vue'
|
|
interface ProductItem {
|
id: string
|
name: string
|
productType: string
|
industry: string
|
submitUnit: string
|
submitter: string
|
projectUnit: string
|
industryStage: string
|
description: string
|
shelfStatus: '待上架' | '已上架' | '已下架'
|
}
|
|
const router = useRouter()
|
const loading = ref(false)
|
const productList = ref<ProductItem[]>([])
|
|
// 价格查看弹窗相关
|
const priceViewerVisible = ref(false)
|
const currentProductId = ref('')
|
|
// 模拟产品数据
|
const mockProductList: ProductItem[] = [
|
{
|
id: '1',
|
name: '数字化产品A',
|
productType: '软件/平台',
|
industry: '交通基础设施',
|
submitUnit: '中交一公局',
|
submitter: '张三',
|
projectUnit: '某高速公路工程',
|
industryStage: '应用阶段',
|
description: '本产品定位为以建设期BIM数字资产作为数字底盘，结合项目运营维保需求的实时性、交互性、便捷性的三维可视化运维管理系统。系统提供项目数字化、智能化运维管理功能，能够解决建筑运行维护管理中的实际问题，实现信息快速整合与查询、信息有效共享与传递，提升项目综合管理与维护水平。',
|
shelfStatus: '待上架'
|
},
|
{
|
id: '2',
|
name: '数字化产品B',
|
productType: '硬件/传感',
|
industry: '市政工程',
|
submitUnit: '中交二航局',
|
submitter: '李四',
|
projectUnit: '智慧管廊项目',
|
industryStage: '研发阶段',
|
description: '面向城市管廊监测的传感设备与采集网关，支持边缘计算与远程运维。',
|
shelfStatus: '已上架'
|
},
|
{
|
id: '3',
|
name: '数字化产品C',
|
productType: '软件/平台',
|
industry: '建筑工程',
|
submitUnit: '中交三航局',
|
submitter: '王五',
|
projectUnit: '智慧建筑项目',
|
industryStage: '应用阶段',
|
description: '基于BIM技术的建筑工程管理平台，提供设计、施工、运维全生命周期管理。',
|
shelfStatus: '已下架'
|
},
|
{
|
id: '10004',
|
name: '数字化产品D',
|
productType: '硬件/传感',
|
industry: '水利工程',
|
submitUnit: '中交四航局',
|
submitter: '赵六',
|
projectUnit: '智慧水利项目',
|
industryStage: '研发阶段',
|
description: '水利工程监测设备与数据采集系统，支持实时监测和预警。',
|
shelfStatus: '已上架'
|
}
|
]
|
|
// 获取状态类型
|
const getStatusType = (status: string) => {
|
switch (status) {
|
case '已上架':
|
return 'success'
|
case '待上架':
|
return 'warning'
|
case '已下架':
|
return 'danger'
|
default:
|
return 'info'
|
}
|
}
|
|
// 加载产品列表
|
const loadProductList = async () => {
|
loading.value = true
|
try {
|
// 模拟API调用
|
await new Promise(resolve => setTimeout(resolve, 500))
|
productList.value = mockProductList
|
} catch (error) {
|
console.error('加载产品列表失败:', error)
|
ElMessage.error('加载产品列表失败')
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 添加产品
|
const handleAddProduct = () => {
|
ElMessage.info('添加产品功能开发中...')
|
}
|
|
// 价格管理
|
const handlePriceManage = (row: ProductItem) => {
|
// 跳转到价格管理页面
|
router.push({
|
path: `/product/price/${row.id}`
|
})
|
}
|
|
// 查看定价
|
const handleViewPricing = (row: ProductItem) => {
|
currentProductId.value = row.id
|
priceViewerVisible.value = true
|
}
|
|
// 处理订购
|
const handleOrder = (selectedItems: any[]) => {
|
console.log('选中的价格项:', selectedItems)
|
ElMessage.success(`已选择 ${selectedItems.length} 个价格项进行订购`)
|
}
|
|
onMounted(() => {
|
loadProductList()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.product-list-container {
|
padding: 20px;
|
|
.page-header {
|
margin-bottom: 20px;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
border-radius: 8px;
|
padding: 20px;
|
color: white;
|
|
.header-content {
|
h2 {
|
margin: 0 0 8px 0;
|
font-size: 24px;
|
font-weight: 600;
|
}
|
|
p {
|
margin: 0;
|
opacity: 0.9;
|
font-size: 14px;
|
}
|
}
|
}
|
|
.product-card {
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
span {
|
font-size: 16px;
|
font-weight: 600;
|
color: #303133;
|
}
|
}
|
}
|
|
:deep(.el-table) {
|
.el-table__header {
|
th {
|
background-color: #f5f7fa;
|
color: #303133;
|
font-weight: 600;
|
}
|
}
|
|
.el-table__row {
|
&:hover {
|
background-color: #f5f7fa;
|
}
|
}
|
}
|
}
|
</style>
|
