yoe-dms-web/src/views/product/pool/review1.vue

<template>
  <div class="p-2">
    <!-- 标签页 -->
    <el-card shadow="never">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="待入池产品" name="pending">
          <!-- 待入池产品表格 -->
          <el-table v-loading="pendingLoading" border :data="pendingProductList">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column label="产品池名称" align="center" prop="poolName" min-width="150" />
            <el-table-column label="产品池类型" align="center" width="120">
              <template #default="scope">
                {{ getPoolTypeLabel(scope.row.type) }}
              </template>
            </el-table-column>
            <el-table-column label="商品编号" align="center" prop="productNo" width="120" />
            <el-table-column label="商品图片" align="center" prop="productImageUrl" width="100">
              <template #default="scope">
                <image-preview :src="scope.row.productImageUrl" :width="60" :height="60"/>
              </template>
            </el-table-column>
            <el-table-column label="商品信息" align="center" min-width="200">
              <template #default="scope">
                <div class="text-left" style="font-size: 12px;">
                  <div>{{ scope.row.itemName }}</div>
                  <div class="text-gray-500">品牌：{{ scope.row.brandName || '-' }}</div>
                  <div class="text-gray-500">库存：{{ scope.row.stock || '-' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" prop="unitName" width="80" />
            <el-table-column label="SKU价格" align="center" width="150">
              <template #default="scope">
                <div class="text-left" style="font-size: 12px;">
                  <div>
                    <span class="text-gray-500">市场价:</span>
                    <span class="text-red-500">¥{{ scope.row.marketPrice || '0.00' }}</span>
                  </div>
                  <div>
                    <span class="text-gray-500">官网价:</span>
                    <span class="text-red-500">¥{{ scope.row.platformPrice || '0.00' }}</span>
                  </div>
                  <div>
                    <span class="text-gray-500">最低售价:</span>
                    <span class="text-red-500">¥{{ scope.row.minPrice || '0.00' }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="成本数据" align="center" width="150">
              <template #default="scope">
                <div class="text-left" style="font-size: 12px;">
                  <div>
                    <span class="text-gray-500">采购价:</span>
                    <span>¥{{ scope.row.purchasePrice || '0.00' }}</span>
                  </div>
                  <div>
                    <span class="text-gray-500">暂估毛利率:</span>
                    <span>{{ scope.row.grossMargin || '0.00' }}%</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="项目/官网价" align="center" prop="productPrice" width="120">
              <template #default="scope">
                ¥{{ scope.row.productPrice || '0.00' }}
              </template>
            </el-table-column>
            <el-table-column label="商品状态" align="center" width="100">
              <template #default="scope">
                <dict-tag :options="product_review_status" :value="scope.row.productReviewStatus" />
              </template>
            </el-table-column>
            <el-table-column label="创建供应商" align="center" prop="supplier" width="120" />
          </el-table>

          <pagination v-show="pendingTotal > 0" :total="pendingTotal" v-model:page="pendingQuery.pageNum" v-model:limit="pendingQuery.pageSize" @pagination="getPendingList" />
        </el-tab-pane>

        <el-tab-pane label="入池清单" name="approved">
          <!-- 入池清单表格 -->
          <el-table v-loading="approvedLoading" border :data="approvedProductList">
            <el-table-column type="index" label="序号" width="60" align="center" />
            <el-table-column label="产品池名称" align="center" prop="poolName" min-width="150" />
            <el-table-column label="产品池类型" align="center" width="120">
              <template #default="scope">
                {{ getPoolTypeLabel(scope.row.type) }}
              </template>
            </el-table-column>
            <el-table-column label="商品编号" align="center" prop="productNo" width="120" />
            <el-table-column label="商品图片" align="center" prop="productImageUrl" width="100">
              <template #default="scope">
                <image-preview :src="scope.row.productImageUrl" :width="60" :height="60"/>
              </template>
            </el-table-column>
            <el-table-column label="商品信息" align="center" min-width="200">
              <template #default="scope">
                <div class="text-left" style="font-size: 12px;">
                  <div>{{ scope.row.itemName }}</div>
                  <div class="text-gray-500">品牌：{{ scope.row.brandName || '-' }}</div>
                  <div class="text-gray-500">库存：{{ scope.row.stock || '-' }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" prop="unitName" width="80" />
            <el-table-column label="SKU价格" align="center" width="150">
              <template #default="scope">
                <div class="text-left" style="font-size: 12px;">
                  <div>
                    <span class="text-gray-500">市场价:</span>
                    <span class="text-red-500">¥{{ scope.row.marketPrice || '0.00' }}</span>
                  </div>
                  <div>
                    <span class="text-gray-500">官网价:</span>
                    <span class="text-red-500">¥{{ scope.row.platformPrice || '0.00' }}</span>
                  </div>
                  <div>
                    <span class="text-gray-500">最低售价:</span>
                    <span class="text-red-500">¥{{ scope.row.minPrice || '0.00' }}</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="成本数据" align="center" width="150">
              <template #default="scope">
                <div class="text-left" style="font-size: 12px;">
                  <div>
                    <span class="text-gray-500">采购价:</span>
                    <span>¥{{ scope.row.purchasePrice || '0.00' }}</span>
                  </div>
                  <div>
                    <span class="text-gray-500">暂估毛利率:</span>
                    <span>{{ scope.row.grossMargin || '0.00' }}%</span>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="项目/官网价" align="center" prop="productPrice" width="120">
              <template #default="scope">
                ¥{{ scope.row.productPrice || '0.00' }}
              </template>
            </el-table-column>
            <el-table-column label="商品状态" align="center" width="100">
              <template #default="scope">
                <dict-tag :options="product_review_status" :value="scope.row.productReviewStatus" />
              </template>
            </el-table-column>
            <el-table-column label="创建供应商" align="center" prop="supplier" width="120" />
          </el-table>

          <pagination v-show="approvedTotal > 0" :total="approvedTotal" v-model:page="approvedQuery.pageNum" v-model:limit="approvedQuery.pageSize" @pagination="getApprovedList" />
        </el-tab-pane>
      </el-tabs>
    </el-card>

  </div>
</template>

<script setup name="PoolReviewDetail" lang="ts">
import { listPoolLink } from '@/api/product/poolLink';
import { PoolLinkVO, PoolLinkQuery } from '@/api/product/poolLink/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

/** 产品池类型选项 */
const poolTypeOptions = [
  { label: '自营产品池', value: 0 },
  { label: '精选产品池', value: 1 },
  { label: '协议产品池', value: 2 },
  { label: '项目产品池', value: 3 },
  { label: '分类产品池', value: 4 }
];

/** 获取产品池类型标签 */
const getPoolTypeLabel = (type: number | undefined) => {
  const option = poolTypeOptions.find(item => item.value === type);
  return option ? option.label : '未知类型';
};

// 当前标签页
const activeTab = ref('pending');

// 待入池产品列表
const pendingProductList = ref<PoolLinkVO[]>([]);
const pendingLoading = ref(false);
const pendingTotal = ref(0);
const pendingQuery = ref<PoolLinkQuery>({
  pageNum: 1,
  pageSize: 10,
  productReviewStatus: '1' // 待审核
});

// 入池清单列表
const approvedProductList = ref<PoolLinkVO[]>([]);
const approvedLoading = ref(false);
const approvedTotal = ref(0);
const approvedQuery = ref<PoolLinkQuery>({
  pageNum: 1,
  pageSize: 10,
  productReviewStatus: '2' // 审核通过
});

// 字典数据
const { product_review_status } = toRefs<any>(proxy?.useDict('product_review_status'));

/** 获取待入池产品列表 */
const getPendingList = async () => {
  pendingLoading.value = true;
  try {
    const res = await listPoolLink(pendingQuery.value);
    pendingProductList.value = res.rows || [];
    pendingTotal.value = res.total || 0;
  } catch (error) {
    console.error('获取待入池产品列表失败:', error);
    pendingProductList.value = [];
    pendingTotal.value = 0;
  } finally {
    pendingLoading.value = false;
  }
};

/** 获取入池清单列表 */
const getApprovedList = async () => {
  approvedLoading.value = true;
  try {
    const res = await listPoolLink(approvedQuery.value);
    approvedProductList.value = res.rows || [];
    approvedTotal.value = res.total || 0;
  } catch (error) {
    console.error('获取入池清单列表失败:', error);
    approvedProductList.value = [];
    approvedTotal.value = 0;
  } finally {
    approvedLoading.value = false;
  }
};

/** 标签页切换 */
const handleTabClick = () => {
  if (activeTab.value === 'pending') {
    getPendingList();
  } else {
    getApprovedList();
  }
};

onMounted(async () => {
  // 默认加载待入池产品
  await getPendingList();
});
</script>

<style scoped lang="scss">
</style>