<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="typeName" label="产品类型" width="120" />
|
<el-table-column prop="importantAreaName" label="行业领域" width="150" />
|
<el-table-column prop="submissionUnit" 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'
|
import productApi from '@/api/productApi'
|
|
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 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))
|
let data = {"name":"","industrialChainId":"","importantAreaId":"","importantAreaIdList":[],"typeId":"","typeChildId":[],"startDate":"","endDate":"","page":{"current":1,"size":10,"total":3}}
|
const res: any = await productApi.getProductList(data)
|
if (res?.code === 200) {
|
productList.value = res.data.records || []
|
} else {
|
productList.value = []
|
ElMessage.error(res?.msg || '获取产品列表失败')
|
}
|
// 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
|
router.push({
|
path: '/product/priceViewer',
|
query: { productId: row.id}
|
})
|
}
|
|
// 处理订购
|
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>
|
