feat(product-manage): 添加历史详情页面的表格功能

- 新增 DataTable 组件用于展示历史变更数据
- 添加 ChangeValue 组件用于格式化显示变更值
- 在 historical-detail 目录下新增 api.ts 文件用于获取表格数据
- 更新 index.vue 文件，集成DataTable组件到历史详情页面
- 调整 PriceChart 组件样式

src/views/product-manage/Columns.ts

@@ -255,4 +255,21 @@ export const CompetitorMonitorColumns = [
   }
 ];
 
-
+export const HistoricalColumns = [
+  {
+    field: 'create_datetime', title: '时 间', align: 'center', fixed: 'left',
+    slots: { default: 'create_datetime' }
+  },
+  {
+    field: 'field', title: '变更项', align: 'center',
+    slots: { default: 'field' }
+  },
+  {
+    field: 'old_val', title: '原 值', align: 'center',
+    slots: { default: 'old_val' }
+  },
+  {
+    field: 'new_val', title: '现 值', align: 'center',
+    slots: { default: 'new_val' }
+  },
+] 

src/views/product-manage/historical-detail/api.ts

@@ -8,3 +8,11 @@ export function getChartData(query: any) {
     params: query
   });
 }
+
+export function getTableData(query: any) {
+  return request({
+    url: '/api/choice/goods_changes/',
+    method: 'GET',
+    params: query
+  });
+}

src/views/product-manage/historical-detail/component/ChangeValue.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { defineProps, ref, computed } from 'vue';
+import XEUtils from 'xe-utils';
+
+const props = defineProps<{
+  field: string;
+  value: string;
+}>();
+
+const badgeMap = {
+  0: '',
+  1: 'LD',
+  2: '7DD',
+  3: 'DOTD/TD'
+};
+
+const loadJsonString = (val: string) => XEUtils.toStringJSON(val);
+
+const isArray = computed(() => XEUtils.includes(['bullet_point', 'variants'], props.field));
+
+const formatedVal = computed(() => {
+  if (props.field === 'discount') {
+    return `${props.value}%`;
+  } else if (props.field === 'coupon' || props.field === 'price') {
+    return `$${props.value}`;
+  } else if (props.field === 'badge') {
+    return badgeMap[props.value];
+  }
+  return props.value;
+});
+</script>
+
+<template>
+  <div>
+    <template v-if="props.field==='imgs'">
+      <span v-for="(img, index) in loadJsonString(props.value)" :key="index">
+        <el-tooltip placement="bottom-start" effect="light">
+          <el-image
+              style="width: 40px; margin-right: 5px;"
+              fit="fill"
+              :src="`https://m.media-amazon.com/images/I/${img}.jpg`"
+          />
+          <template #content>
+            <el-image
+                style="width: 250px"
+                :src="`https://m.media-amazon.com/images/I/${img}.jpg`"
+            />
+          </template>
+        </el-tooltip>
+      </span>
+    </template>
+    <template v-else-if="isArray">
+      <ul class="in-table-ul">
+        <li v-for="(val, index) in loadJsonString(props.value)" :key="index">
+          <span>{{ val }}</span>
+        </li>
+      </ul>
+    </template>
+    <span v-else>{{ formatedVal }}</span>
+  </div>
+</template>
+
+<style scoped>
+.in-table-ul {
+  padding-left: 20px;
+}
+</style>

src/views/product-manage/historical-detail/component/DataTable.vue

@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+/**
+ * @Name: DataTable.vue
+ * @Description: 历史详情Table
+ * @Author: Cheney
+ */
+
+import { Refresh } from '@element-plus/icons-vue';
+import * as api from '../api';
+import { HistoricalColumns } from '/@/views/product-manage/Columns';
+import { usePagination } from '/@/utils/usePagination';
+import { useTableData } from '/@/utils/useTableData';
+import ChangeValue from './ChangeValue.vue';
+
+
+const props = defineProps({
+  asin: String,
+  country: String
+});
+const { asin, country } = props;
+
+const { tableOptions, handlePageChange } = usePagination(fetchList);
+
+const gridRef = ref();
+const gridOptions: any = reactive({
+  id: 'historical-detail-table',
+  keepSource: true,
+  size: 'small',
+  border: false,
+  round: true,
+  stripe: true,
+  currentRowHighLight: true,
+  height: 800,
+  customConfig: {
+    storage: true
+  },
+  toolbarConfig: {
+    size: 'large',
+    custom: true,
+    slots: {
+      tools: 'toolbar_tools'
+    }
+  },
+  rowConfig: {
+    isHover: true
+  },
+  columnConfig: {
+    resizable: true
+  },
+  pagerConfig: {
+    total: tableOptions.value.total,
+    page: tableOptions.value.page,
+    limit: tableOptions.value.limit
+  },
+  loading: false,
+  loadingConfig: {
+    icon: 'vxe-icon-indicator roll',
+    text: '正在拼命加载中...'
+  },
+  columns: '',
+  data: ''
+});
+
+const tagMap = {
+  price: { label: '价格', color: 'primary' },
+  discount: { label: '折扣', color: 'primary' },
+  coupon: { label: '优惠券', color: 'primary' },
+  imgs: { label: '图片', color: 'warning' },
+  title: { label: '标题', color: 'warning' },
+  bullet_point: { label: '五点信息', color: 'warning' },
+  all_score: { label: '综合评分', color: 'warning' },
+  badge: { label: '限时处理', color: 'danger' },
+  variants: { label: '变体', color: 'danger' },
+  score: { label: '子asin评分', color: 'success' },
+  reviews: { label: '子asin评论数', color: 'success' }
+};
+
+onBeforeMount(() => {
+  fetchList();
+});
+
+async function fetchList() {
+  gridOptions.data = [];
+  gridOptions.columns = [];
+
+  const query = {
+    asin,
+    country_code: country
+  };
+
+  await useTableData(api.getTableData, query, gridOptions);
+  await gridRef.value.loadColumn(HistoricalColumns);
+  gridOptions.showHeader = Boolean(gridOptions.data?.length);
+}
+
+function handleRefresh() {
+  fetchList();
+}
+</script>
+
+<template>
+  <el-card class="border-none my-5">
+    <vxe-grid ref="gridRef"
+              v-bind="gridOptions">
+      <!-- 工具栏右侧 -->
+      <template #toolbar_tools>
+        <el-button circle class="toolbar-btn mr-2" @click="handleRefresh">
+          <el-icon>
+            <Refresh />
+          </el-icon>
+        </el-button>
+      </template>
+      <template #top>
+        <div class="mb-2"></div>
+      </template>
+      <!-- 分页 -->
+      <template #pager>
+        <vxe-pager
+            v-model:currentPage="gridOptions.pagerConfig.page"
+            v-model:pageSize="gridOptions.pagerConfig.limit"
+            :total="gridOptions.pagerConfig.total"
+            class="mt-1.5"
+            @page-change="handlePageChange"
+        />
+      </template>
+      <!-- 自定义列插槽 -->
+      <template #create_datetime="{row}">
+        {{ row.create_datetime }}
+      </template>
+      <template #field="{ row }">
+        <el-tag v-if="tagMap[row.field]" :type="tagMap[row.field].color" effect="plain">
+          {{ tagMap[row.field].label }}
+        </el-tag>
+      </template>
+      <template #old_val="{row}">
+        <ChangeValue :field="row.field" :value="row.old_val" />
+      </template>
+      <template #new_val="{row}">
+        <ChangeValue :field="row.field" :value="row.new_val" />
+      </template>
+    </vxe-grid>
+  </el-card>
+
+</template>
+
+<style scoped>
+.toolbar-btn {
+  width: 34px;
+  height: 34px;
+  font-size: 18px
+}
+
+</style>

src/views/product-manage/historical-detail/component/PriceChart.vue

@@ -129,7 +129,7 @@ async function fetchChartData() {
 </script>
 
 <template>
-  <el-card class="border-none sticky top-5  z-10">
+  <el-card class="border-none mt-2">
     <div ref="chartRef" class="chart"></div>
   </el-card>
 </template>

src/views/product-manage/historical-detail/index.vue

@@ -7,6 +7,7 @@
 
 import { useTableHeight } from '/@/utils/useCustomHeight';
 import PriceChart from '/@/views/product-manage/historical-detail/component/PriceChart.vue';
+import DataTable from '/@/views/product-manage/historical-detail/component/DataTable.vue';
 
 
 const isShowHistory = defineModel({ default: false });
@@ -33,10 +34,10 @@ const { tableHeight } = useTableHeight(heightObj);
         direction="btt"
         size="85%"
         style="background-color:#F3F4FB;">
-      <div class="sticky top-0" style="background-color:#F3F4FB; min-height: 20px; z-index: 2"></div>
+      <div class="sticky top-0" style="background-color:#F3F4FB; min-height: 20px; z-index: 999"></div>
       <div class="px-5">
         <PriceChart :asin="rowData.asin" :country="rowData.country_code" />
-        
+        <DataTable :asin="rowData.asin" :country="rowData.country_code" />
       </div>
     </el-drawer>
   </div>