feat(store-manage): 添加商品详情接口并优化列表展示

- 新增 getDetail 函数用于获取商品详情
- 调整商品列表展示样式，优化列宽和布局
- 在线商品列表添加操作列，支持评论详情功能
- 产品监控列表更新星星评分展示方式

src/views/product-manage/Columns.ts

@@ -5,7 +5,7 @@ export const ProductColumns = [
     slots: { default: 'is_monitor' }
   },
   {
-    field: 'product_info', title: '商品信息', minWidth: 'auto', align: 'center', fixed: 'left',
+    field: 'product_info', title: '商品信息', width: 280, align: 'center', fixed: 'left',
     slots: { default: 'product_info' }
   },
   {
@@ -33,15 +33,15 @@ export const ProductColumns = [
     slots: { default: 'tag' }
   },
   {
-    field: 'price_info', title: '价 格', width: 'auto', align: 'left',
+    field: 'price_info', title: '价 格', width: 150, align: 'left',
     slots: { default: 'price_info' }
   },
   {
-    field: 'show_price', title: '指导价格', width: 'auto', align: 'left',
+    field: 'show_price', title: '指导价格', width: 150, align: 'left',
     slots: { default: 'show_price' }
   },
   {
-    field: 'launch_date', title: '上架日期', width: 'auto', align: 'center', sortable: true,
+    field: 'launch_date', title: '上架日期', width: 110, align: 'center', sortable: true,
     slots: { default: 'launch_date' }
   },
   {
@@ -49,15 +49,15 @@ export const ProductColumns = [
     slots: { default: 'category' }
   },
   {
-    field: 'status', title: '状 态', width: 'auto', align: 'center',
+    field: 'status', title: '状 态', width: 90, align: 'center',
     slots: { default: 'status' }
   },
   {
-    field: 'update_datetime', title: '更新时间', width: 'auto', align: 'center',
+    field: 'update_datetime', title: '更新时间', width: 180, align: 'center',
     slots: { default: 'update_datetime' }
   },
   {
-    field: 'create_datetime', title: '创建时间', width: 'auto', align: 'center',
+    field: 'create_datetime', title: '创建时间', width: 180, align: 'center',
     slots: { default: 'create_datetime' }
   },
   {
@@ -96,6 +96,14 @@ export const ProductMonitorColumns = [
     field: 'tag', title: '分 组', width: 'auto', align: 'center',
     slots: { default: 'tag' }
   },
+  {
+    field: 'price_info', title: '价 格', width: 'auto', align: 'left',
+    slots: { default: 'price_info' }
+  },
+  {
+    field: 'show_price', title: '指导价格', width: 'auto', align: 'left',
+    slots: { default: 'show_price' }
+  },
   {
     field: 'score', title: '子ASIN计算评分', width: 'auto', align: 'center', sortable: true,
     slots: { default: 'score' }
@@ -112,14 +120,6 @@ export const ProductMonitorColumns = [
     field: 'all_stars', title: '亚马逊星级分布', width: 'auto', headerAlign: 'center', align: 'center',
     slots: { default: 'all_stars' }
   },
-  {
-    field: 'price_info', title: '价 格', width: 'auto', align: 'left',
-    slots: { default: 'price_info' }
-  },
-  {
-    field: 'show_price', title: '指导价格', width: 'auto', align: 'left',
-    slots: { default: 'show_price' }
-  },
   {
     field: 'ratings', title: '子ASIN评分人数', width: 'auto', align: 'center', sortable: true,
     slots: { default: 'ratings' }
@@ -184,6 +184,10 @@ export const CompetitorMonitorColumns = [
     field: 'tag', title: '分 组', width: 'auto', align: 'center',
     slots: { default: 'tag' }
   },
+  {
+    field: 'price_info', title: '价 格',  width: 'auto', align: 'left',
+    slots: { default: 'price_info' }
+  },
   {
     field: 'score', title: '子ASIN计算评分', width: 'auto', align: 'center', sortable: true,
     slots: { default: 'score' }
@@ -200,10 +204,6 @@ export const CompetitorMonitorColumns = [
     field: 'all_stars', title: '亚马逊星级分布', width: 'auto', headerAlign: 'center', align: 'center',
     slots: { default: 'all_stars' }
   },
-  {
-    field: 'price_info', title: '价 格',  width: 'auto', align: 'left',
-    slots: { default: 'price_info' }
-  },
   {
     field: 'ratings', title: '子ASIN评分人数', width: 'auto', align: 'center', sortable: true,
     slots: { default: 'ratings' }

src/views/product-manage/product-monitor/component/DataTableSlot.vue

@@ -154,7 +154,17 @@ function goto() {
       </template>
     </div>
     <div v-else-if="field === 'stars'" class="flex flex-col font-normal" style="min-width: 170px">
-      <ProgressBar :row="row" percentage="ratings" />
+      <div v-for="i in [5,4,3,2,1]" :key="i" class="w-full flex items-center" style="max-height: 15px;">
+        <span class="w-10 text-right mr-2 italic">{{ i }}星</span>
+        <el-progress
+            :color="'#3A8EE6'"
+            :percentage="row.goods.ratings > 0 ? Math.round(row.goods[`ratings${i}`] / row.goods.ratings * 100) : 0"
+            :stroke-width="10"
+            class="flex-1"
+            striped
+            striped-flow
+        />
+      </div>
     </div>
     <div v-else-if="field === 'all_stars'" class="flex flex-col font-normal" style="min-width: 170px">
       <ProgressBar :row="row" percentage="all_rate" />

src/views/store-manage/Columns.ts

@@ -70,7 +70,7 @@ export const OnlineMerchandiseColumns = [
     slots: { default: 'status' }
   },
   {
-    field: 'create_datetime', title: '创建时间', minWidth: 'auto', align: 'center',
-    slots: { default: 'create_datetime' }
+    field: 'operate', title: '操 作', width: 70, align: 'center', fixed: 'right',
+    slots: { default: 'operate' }
   }
 ];

src/views/store-manage/online-merchandise/api.ts

@@ -18,6 +18,14 @@ export function getShopOptions() {
   });
 }
 
+export function getDetail(query: any) {
+  return request({
+    url: '/api/choice/goods/',
+    method: 'GET',
+    params: query
+  });
+}
+
 // 导出
 export function exportData(query: any) {
   return request({

src/views/store-manage/online-merchandise/component/DataTableSlot.vue

@@ -7,8 +7,14 @@
 
 import { useCountryInfoStore } from '/@/stores/countryInfo';
 import { getTagType } from '/@/utils/useTagColor';
+import { Tickets } from '@element-plus/icons-vue';
+import PermissionButton from '/@/components/PermissionButton/index.vue';
+import { useResponse } from '/@/utils/useResponse';
+import * as api from '../api';
 
 
+const router = useRouter();
+
 const props = defineProps<{
   row: any,
   field: any
@@ -19,6 +25,27 @@ const countryInfoStore = useCountryInfoStore();
 const country = countryInfoStore.Countries.find(c => c.code == row.country_code);
 const color = country ? country.color : '#3875F6';
 const region = countryInfoStore.Region.find(r => r.code == row.shop.region);
+
+async function goto() {
+  const query = {
+    asin: row.asin,
+    country_code: row.country_code
+  }
+  
+  const res: any = await useResponse(api.getDetail, query )
+  console.log("(DataTableSlot.vue: 36)=> res", res);
+  
+  const routeUrl = router.resolve({
+    path: '/product/comment',
+    query: {
+      asin: res.data[0].asin,
+      title: res.data[0].title,
+      img: res.data[0].img,
+      url: res.data[0].url
+    }
+  });
+  window.open(routeUrl.href, '_blank');
+}
 </script>
 
 <template>
@@ -50,6 +77,16 @@ const region = countryInfoStore.Region.find(r => r.code == row.shop.region);
         {{ row.status === 'Active' ? '在售' : row.status === 'Inactive' ? '不在售' : '不完整' }}
       </el-tag>
     </div>
+    <div v-else-if="field === 'operate'">
+      <el-tooltip :enterable="false" :show-arrow="false" content="评论详情" hide-after="0"
+                  placement="top" popper-class="custom-btn-tooltip">
+        <PermissionButton circle plain type="success" @click="goto">
+          <el-icon>
+            <Tickets />
+          </el-icon>
+        </PermissionButton>
+      </el-tooltip>
+    </div>
     <!-- 动态获取 -->
     <div v-else>
       {{ row[field] }}