refactor(product-manage): 重构产品管理模块

- 移除了 product-list 和 product-monitor 组件中的冗余代码
- 优化了 API 调用，删除了未使用的函数
- 更新了表格列的定义和渲染逻辑
- 添加了品牌、分组、店铺等下拉选项的数据获取
- 优化了查询功能，增加了更多筛选条件
- 调整了表格样式和布局

src/views/product-manage/product-list/ColumnsTsx.tsx

@@ -118,7 +118,7 @@ export const productColumns = (handleMonitor: Function) => [
     }
   },
   {
-    field: 'minimum_price', title: '平时活动售价', minWidth: 'auto', align: 'center',
+    field: 'minimum_price', title: '最低活动售价', minWidth: 'auto', align: 'center',
     slots: {
       default({ row }: any) {
         return <div class={ 'font-medium' }>{ row.minimum_price ? row.currency_code + row.minimum_price : '--' }</div>;

src/views/product-manage/product-list/api.ts

@@ -3,14 +3,6 @@ import { request } from '/@/utils/service';
 
 const apiPrefix = '/api/choice/goods/';
 
-export function getCardData(query: any) {
-  return request({
-    url: apiPrefix + 'card/',
-    method: 'GET',
-    params: query,
-  });
-}
-
 export function getTableData(query: any) {
   return request({
     url: apiPrefix,
@@ -19,70 +11,21 @@ export function getTableData(query: any) {
   });
 }
 
-export function getPlatformDetailOverview(query: any) {
-  return request({
-    url: apiPrefix + 'platform/',
-    method: 'GET',
-    params: query,
-  });
-}
-
 export function getGroupOptions() {
   return request({
     url: apiPrefix + 'tags/',
     method: 'GET',
   });
 }
-export function getImportTemplateProduct() {
-  return request({
-    url: apiPrefix + 'import_data/',
-    method: 'GET',
-  });
-}
-export function getImportTemplatePrice() {
-  return request({
-    url: apiPrefix + 'GuidancePrice/import_data/',
-    method: 'GET',
-  });
-}
 
-export function getCurrentInfo(query: any) {
+export function getBrandsOptions(query: any) {
   return request({
-    url: apiPrefix + 'current/',
+    url:  apiPrefix + 'brands/',
     method: 'GET',
     params: query,
   });
 }
 
-export function getHistoryInfo(query: any) {
-  return request({
-    url: apiPrefix + 'past/',
-    method: 'GET',
-    params: query,
-  });
-}
-
-export function getComputerInfo(query: any) {
-  return request({
-    url: apiPrefix + 'computer/',
-    method: 'GET',
-    params: query,
-  });
-}
-
-export function getShopSelect() {
-  return request({
-    url: apiPrefix + 'box/',
-    method: 'GET',
-  });
-}
-export function getCompanySelect() {
-  return request({
-    url: '/api/assets/company/box/',
-    method: 'GET',
-  });
-}
-
 export function updateShopDetail(body: any) {
   return request({
     url: apiPrefix + `${body.id}/`,

src/views/product-manage/product-list/component/DataTable.vue

@@ -14,7 +14,6 @@ import ImportButton from '/src/components/ImportButton/index.vue';
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import { productColumns } from '../ColumnsTsx';
 import { downloadFile } from '/@/utils/service';
-import { getTagType } from '/@/utils/useTagColor';
 import ProductInfo from '/@/views/product-manage/product-list/component/ProductInfo.vue';
 
 
@@ -33,13 +32,11 @@ const { tableOptions, handlePageChange } = usePagination(fetchList);
 
 const gridRef = ref();
 const gridOptions: any = reactive({
-  id: 'tableID',
   border: false,
   round: true,
   stripe: true,
   currentRowHighLight: true,
   height: '100%',
-  width: '100%',
   toolbarConfig: {
     custom: true,
     slots: {
@@ -162,7 +159,7 @@ defineExpose({ fetchList });
 </script>
 
 <template>
-  <vxe-grid :key="gridOptions.id" ref="gridRef"
+  <vxe-grid ref="gridRef"
             v-bind="gridOptions"
             @checkbox-change="selectChangeEvent"
             @checkbox-all="selectAllChangeEvent">

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

@@ -1,83 +0,0 @@
-<script lang="ts" setup>
-/**
- * @Name: DataTableSlot.vue
- * @Description:
- * @Author: Cheney
- */
-
-
-import { useCountryInfoStore } from '/@/stores/countryInfo';
-import { Operation, Delete, Message } from '@element-plus/icons-vue';
-import PermissionButton from '/@/components/PermissionButton/index.vue'
-
-
-const props = defineProps<{
-  row: any,
-  field: any
-}>();
-const { row, field } = props;
-
-const emit = defineEmits([ 'edit-row', 'handle-notice' ]);
-
-const countryInfoStore = useCountryInfoStore();
-const country = countryInfoStore.countries.find(c => c.code == row.country_code);
-const color = country ? country.color : '#3875F6';
-
-function handleEdit(row: any) {
-  emit('edit-row', row);
-}
-
-function handleNotice(row: any) {
-  emit('handle-notice', row);
-}
-</script>
-
-<template>
-  <div class="font-medium">
-    <div v-if="field === 'is_monitor'">
-      <el-switch v-model="row.is_monitor"></el-switch>
-    </div>
-    <div v-else-if="field === 'country_code'">
-      <el-tag :style="{ color: color, borderColor: color }" effect="plain" round>
-        {{ country ? country.name : '--' }}
-      </el-tag>
-    </div>
-    <div v-else-if="field === 'product_info'">
-        {{ row.goods_info ? row.goods_info : '--' }}
-    </div>
-    <div v-else-if="field === 'platform_number'">
-        {{ row.platform_number ? row.platform_number : '--' }}
-    </div>
-    <div v-else-if="field === 'shop_name'">
-      <el-tag type="primary" effect="plain">{{ row.shop_name ? 
-          row.shop_name : 
-          '--' }}</el-tag>
-    </div>
-    <div v-else-if="field === 'brand'">
-      <el-tag :style="{ color: '#F88B8A', borderColor: '#FBC4C4'}"  effect="plain">{{ row.brand ? 
-          row.brand : 
-          '--' }}</el-tag>
-    </div>
-    <div v-else-if="field === 'operate'">
-      <div class="flex justify-center gap-2">
-        <PermissionButton circle plain type="warning" @click="handleEdit(row)">
-          <el-icon>
-            <Operation />
-          </el-icon>
-        </PermissionButton>
-        <PermissionButton circle plain type="info" @click="handleNotice(row)">
-          <el-icon>
-            <Message />
-          </el-icon>
-        </PermissionButton>
-      </div>
-    </div>
-    <div v-else>
-      {{ row[field] }}
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/views/product-manage/product-list/index.vue

@@ -37,9 +37,11 @@ const formInline = reactive({
 provide('query-parameter', formInline)
 
 const groupOptions:any = ref([])
+const brandsOptions:any = ref([])
 
 onBeforeMount(() => {
   fetchGroupOptions()
+  fetchBrandsOptions()
 })
 
 async function fetchGroupOptions() {
@@ -47,8 +49,12 @@ async function fetchGroupOptions() {
   groupOptions.value = res.data
 }
 
+async function fetchBrandsOptions() {
+  const res = await useResponse(api.getBrandsOptions)
+  brandsOptions.value = res.data
+}
+
 async function handleQuery() {
-  console.log('tableRef=> ', tableRef.value);
   btnLoading.value = true;
   await tableRef.value?.fetchList();
   btnLoading.value = false;
@@ -76,15 +82,16 @@ async function handleQuery() {
               <el-col :span="6">
                 <div class="flex items-center">
                   <span class="mr-2">品 牌</span>
-                  <el-select v-model="formInline.brand" clearable placeholder="请选择品牌" />
+                  <el-select v-model="formInline.brand" clearable placeholder="请选择品牌">
+                    <el-option v-for="item in brandsOptions" :label="item.brand" :value="item.brand" />
+                  </el-select>
                 </div>
               </el-col>
               <el-col :span="6">
                 <div class="flex items-center">
                   <span class="mr-2">分 组</span>
                   <el-select v-model="formInline.group" clearable placeholder="请选择分组">
-                    <el-option v-for="item in groupOptions" :label="item.tag" 
-                               :value="item.tag" />
+                    <el-option v-for="item in groupOptions" :label="item.tag" :value="item.tag" />
                   </el-select>
                 </div>
               </el-col>

src/views/product-manage/product-monitor/ColumnsTsx.tsx

@@ -1,13 +1,215 @@
-export const productColumns: any = [
+import { useCountryInfoStore } from '/@/stores/countryInfo';
+import { getTagType } from '/@/utils/useTagColor';
+
+
+const countryInfoStore = useCountryInfoStore();
+
+export const productColumns = [
   { type: 'checkbox', width: 50, align: 'center', fixed: 'left' },
-  { type: 'seq', width: 60, align: 'center' },
+  { type: 'seq', title: 'No.', width: 60, align: 'center' },
   {
     field: 'product_info', title: '商品信息', minWidth: 'auto', align: 'center',
     slots: { default: 'product_info' }
   },
   {
-    field: 'country', title: '国 家', minWidth: 'auto', align: 'center',
-    slots: { default: 'country' }
+    field: 'sku', title: 'SKU', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.goods.sku ? row.goods.sku : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'country_code', title: '国 家', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        const country = countryInfoStore.countries.find(c => c.code === row.country_code);
+        const color = country ? country.color : '#3875F6';
+        return (
+            <el-tag effect="plain" round
+                    style={ { color: color, borderColor: color } }>{ country ? country.name : '--' }
+            </el-tag>
+        );
+      }
+    }
+  },
+  {
+    field: 'platform_number', title: '平台编号', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <span class={ 'font-medium' }>{ row.goods.platform_number ? row.goods.platform_number : '--' }</span>;
+      }
+    }
+  },
+  {
+    field: 'shop_name', title: '店 铺', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return (
+            <el-tag type={ getTagType.value(row.shop_name) }>
+              { row.shop_name ? row.shop_name : '--' }
+            </el-tag>
+        );
+      }
+    }
+  },
+  {
+    field: 'tag', title: '分 组',  minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return (
+            <el-tag type={ getTagType.value(row.goods.tag) }>
+              { row.goods.tag ? row.goods.tag : '--' }
+            </el-tag>
+        );
+      }
+    }
+  },
+  {
+    field: 'brand', title: '品 牌', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return (
+            <el-tag type={ getTagType.value(row.goods.brand) } effect="plain" round>
+              { row.goods.brand ? row.goods.brand : '--' }
+            </el-tag>
+        );
+      }
+    }
+  },
+  {
+    field: 'price_info', title: '价 格', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return (
+            <div v-if={ row.goods.price > 0 } class={ `font-medium text-left` }>
+              <p>现 价：{ row.goods.currency_code + '‎' + row.goods.price }</p>
+              <p>折 扣：{ row.goods.discount > 0 ? row.goods.discount + '%' : '-' }</p>
+              <p>优惠劵：{ !row || row.goods.coupon <= 0 ? '-' : row.goods.currency_code + '‎' + row.goods.coupon }</p>
+            </div>
+        );
+      }
+    }
+  },
+  {
+    field: 'show_price', title: '展示价格', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.goods.show_price ? row.goods.currency_code + row.goods.show_price : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'activity_price', title: '平时活动售价', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div
+            class={ 'font-medium' }>{ row.goods.activity_price ? row.goods.currency_code + row.goods.activity_price : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'minimum_price', title: '最低活动售价', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.goods.minimum_price ? row.goods.currency_code + row.goods.minimum_price : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'ratings', title: '子ASIN评分人数', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.goods.ratings ? row.goods.ratings : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'all_ratings', title: '亚马逊显示评分人数', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.goods.all_ratings ? row.goods.all_ratings : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'reviews', title: '子ASIN评论人数', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.goods.reviews ? row.goods.reviews : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'all_reviews', title: '亚马逊显示评论人数', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.goods.all_reviews ? row.goods.all_reviews : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'score', title: '子ASIN计算评分', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.goods.score ? row.goods.score : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'all_score', title: '亚马逊显示评分', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.goods.all_score ? row.goods.all_score : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'launch_date', title: '上架日期', minWidth: 'auto', align: 'center', sortable: true,
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.launch_date ? row.launch_date : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'category', title: '类 目', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.category ? row.category : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'status', title: '状 态', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        const statusText = row.status === 1 ? '在售' : '停售';
+        const statusType = row.status === 1 ? 'success' : 'info';
+
+        return (
+            <el-tag type={ statusType }>
+              { statusText }
+            </el-tag>
+        );
+      }
+    }
+  },
+  {
+    field: 'update_datetime', title: '更新时间', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.update_datetime ? row.update_datetime : '--' }</div>;
+      }
+    }
+  },
+  {
+    field: 'create_datetime', title: '创建时间', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <div class={ 'font-medium' }>{ row.create_datetime ? row.create_datetime : '--' }</div>;
+      }
+    }
   },
   {
     field: 'operate', title: '操 作', width: 100, align: 'center', fixed: 'right',

src/views/product-manage/product-monitor/api.ts

@@ -1,77 +1,39 @@
-import { request } from '/src/utils/service';
+import { request } from '/@/utils/service';
 
 
-const apiPrefix = '/api/assets/shop/';
-
-export function getCardData(query: any) {
-  return request({
-    url: apiPrefix + 'card/',
-    method: 'GET',
-    params: query,
-  });
-}
+const apiPrefix = '/api/choice/';
 
 export function getTableData(query: any) {
   return request({
-    url: 'api/choice/reviews_monitor',
-    method: 'GET',
-    params: query,
-  });
-}
-
-export function getPlatformDetailOverview(query: any) {
-  return request({
-    url: apiPrefix + 'platform/',
-    method: 'GET',
-    params: query,
-  });
-}
-
-export function getShopDetailOverview(query: any) {
-  return request({
-    url: apiPrefix + 'detail/',
+    url: apiPrefix + 'reviews_monitor/',
     method: 'GET',
     params: query,
   });
 }
 
-export function getCurrentInfo(query: any) {
+export function getGroupOptions(query: any) {
   return request({
-    url: apiPrefix + 'current/',
+    url:  apiPrefix + 'goods/tags/',
     method: 'GET',
     params: query,
   });
 }
 
-export function getHistoryInfo(query: any) {
+export function getBrandsOptions(query: any) {
   return request({
-    url: apiPrefix + 'past/',
+    url:  apiPrefix + 'goods/brands/',
     method: 'GET',
     params: query,
   });
 }
-
-export function getComputerInfo(query: any) {
+export function getShopsOptions(query: any) {
   return request({
-    url: apiPrefix + 'computer/',
+    url:  apiPrefix + 'marketplace_shops/select/',
     method: 'GET',
     params: query,
   });
 }
 
-export function getShopSelect() {
-  return request({
-    url: apiPrefix + 'box/',
-    method: 'GET',
-  });
-}
-export function getCompanySelect() {
-  return request({
-    url: '/api/assets/company/box/',
-    method: 'GET',
-  });
-}
-
 export function updateShopDetail(body: any) {
   return request({
     url: apiPrefix + `${body.id}/`,

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

@@ -11,10 +11,25 @@ import PermissionButton from '/src/components/PermissionButton/index.vue';
 import EditDrawer from './EditDrawer.vue';
 import ImportButton from '/src/components/ImportButton/index.vue';
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
-import DataTableSlot from './DataTableSlot.vue';
 import { productColumns } from '../ColumnsTsx';
+import ProductInfo from '/@/views/product-manage/product-list/component/ProductInfo.vue';
+
+
+interface Parameter {
+  country: string,
+  brand: string,
+  group: string,
+  status: string,
+  shop: string
+  asin: string,
+  sku: string,
+  platformId: string,
+  scoreNumber: string,
+  commentNumber: string,
+  displayScore: string,
+}
 
-
+const queryParameter: Parameter | undefined = inject('query-parameter');
 const { tableOptions, handlePageChange } = usePagination(fetchList);
 
 const gridRef = ref();
@@ -60,14 +75,23 @@ const dialogVisible = ref(false);
 
 const templateType = ref();
 
-onBeforeMount(() => {
+onMounted(() => {
   fetchList();
 });
 
 async function fetchList() {
   const query = {
-    page: gridOptions.pagerConfig.page,
-    limit: gridOptions.pagerConfig.limit
+    country_code: queryParameter?.country,
+    goods__brand: queryParameter?.brand,
+    goods__tag: queryParameter?.group,
+    status: queryParameter?.status,
+    shop_id: queryParameter?.shop,
+    asin: queryParameter?.asin,
+    goods__sku: queryParameter?.sku,
+    platform_number: queryParameter?.platformId,
+    goods__all_ratings: queryParameter?.scoreNumber,
+    goods__all_reviews: queryParameter?.commentNumber,
+    goods__all_score: queryParameter?.displayScore,
   };
   await useTableData(api.getTableData, query, gridOptions);
 }
@@ -108,18 +132,19 @@ function selectAllChangeEvent({ checked }: any) {
 function handleEdit(row: any) {
   editOpen.value = true;
   rowData.value = row;
-  console.log('(DataTable.vue: 111)=> rowData.value', rowData.value);
 }
 
 function singleDelete(row: any) {
   // dialogVisible.value = true;
   rowData.value = row;
-  console.log('(DataTable.vue: 116)=> rowData.value', rowData.value);
 }
 
 function downloadTemplate() {
   // console.log('111=> ');
 }
+
+defineExpose({ fetchList });
+
 </script>
 
 <template>
@@ -179,10 +204,23 @@ function downloadTemplate() {
       />
     </template>
     <!-- 自定义列插槽 -->
-    <template v-for="col in productColumns" :key="col.field" #[`${col.field}`]="{ row }">
-      <DataTableSlot :field="col.field" :row="row" @edit-row="handleEdit" @single-delete="singleDelete" />
+    <template #product_info="{ row }">
+      <ProductInfo :item="row.goods" :img-width="50"></ProductInfo>
+    </template>
+    <template #operate="{ row }">
+      <div class="flex justify-center gap-2">
+        <PermissionButton circle plain type="warning" @click="handleEdit(row)">
+          <el-icon>
+            <Operation />
+          </el-icon>
+        </PermissionButton>
+        <PermissionButton circle plain type="danger" @click="singleDelete(row)">
+          <el-icon>
+            <Delete />
+          </el-icon>
+        </PermissionButton>
+      </div>
     </template>
-
   </vxe-grid>
   <EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" />
 </template>

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

@@ -1,71 +0,0 @@
-<script lang="ts" setup>
-/**
- * @Name: DataTableSlot.vue
- * @Description:
- * @Author: Cheney
- */
-
-import PermissionButton from '/src/components/PermissionButton/index.vue';
-import { useCountryInfoStore } from '/src/stores/countryInfo';
-import { Operation, Delete } from '@element-plus/icons-vue';
-
-
-const props = defineProps<{
-  row: any,
-  field: String
-}>();
-const { row, field } = props;
-
-const emit = defineEmits(['edit-row', 'single-delete']);
-
-const countryInfoStore = useCountryInfoStore();
-const country = countryInfoStore.countries.find(c => c.name === row.country);
-const color = country ? country.color : '#3875F6';
-
-function handleEdit(row: any) {
-  emit('edit-row', row)
-}
-
-function singleDelete(row: any) {
-  emit('single-delete', row)
-}
-</script>
-
-<template>
-  <div class="font-medium">
-    <div v-if="field === 'product_info'">
-      <div>
-        1232432
-      </div>
-    </div>
-    <div v-else-if="field === 'country'">
-      <el-tag :style="{ color: color, borderColor: color }" effect="plain" round>
-        {{ row.country ? row.country : '--' }}
-      </el-tag>
-    </div>
-    <div v-else-if="field === 'operate'">
-      <div class="flex justify-center gap-2">
-        <PermissionButton circle plain type="warning" @click="handleEdit(row)">
-          <el-icon>
-            <Operation />
-          </el-icon>
-        </PermissionButton>
-        <PermissionButton circle plain type="danger" @click="singleDelete(row)">
-          <el-icon>
-            <Delete />
-          </el-icon>
-        </PermissionButton>
-      </div>
-  </div>
-    <div v-else-if="field === 'country'">
-      <el-tag :style="{ color: color, borderColor: color }" effect="plain" round>
-        {{ row.country ? row.country : '--' }}
-      </el-tag>
-    </div>
-  </div>
-
-</template>
-
-<style scoped>
-
-</style>

src/views/product-manage/product-monitor/index.vue

@@ -8,13 +8,22 @@
 import { RefreshRight, Search } from '@element-plus/icons-vue';
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import DataTable from './component/DataTable.vue';
-import { useTableHeight } from '/src/utils/useTableHeight';
+import { useTableHeight } from '/@/utils/useTableHeight';
+import { useResponse } from '/@/utils/useResponse';
+import * as api from './api';
+import { useTemplateRef } from 'vue';
+import { DictionaryStore } from '/@/stores/dictionary';
+import { getShopsOptions } from './api';
 
 
+const { data: staticData } = DictionaryStore();
+
 const titleContainer: Ref<HTMLElement | null> = useTemplateRef('titleContainer');
 const queryContainer: Ref<HTMLElement | null> = useTemplateRef('queryContainer');
 const { tableHeight } = useTableHeight(titleContainer, queryContainer);
 
+const tableRef: Ref<any> = useTemplateRef('table');
+
 const formInline = reactive({
   country: '',
   brand: '',
@@ -28,12 +37,39 @@ const formInline = reactive({
   commentNumber: '',
   displayScore: ''
 });
+provide('query-parameter', formInline);
+
+const groupOptions: any = ref([]);
+const brandsOptions: any = ref([]);
+const shopsOptions: any = ref([]);
+
+onBeforeMount(() => {
+  fetchGroupOptions();
+  fetchBrandsOptions();
+  fetchShopsOptions();
+});
 
-const loading = ref(false);
+async function fetchGroupOptions() {
+  const res = await useResponse(api.getGroupOptions);
+  groupOptions.value = res.data;
+}
+
+async function fetchBrandsOptions() {
+  const res = await useResponse(api.getBrandsOptions);
+  brandsOptions.value = res.data;
+}
+
+async function fetchShopsOptions() {
+  const res = await useResponse(api.getShopsOptions);
+  shopsOptions.value = res.data;
+}
 
-function onClick() {
-  loading.value = true;
+const btnLoading = ref(false);
 
+async function handleQuery() {
+  btnLoading.value = true;
+  await tableRef.value?.fetchList();
+  btnLoading.value = false;
 }
 </script>
 
@@ -49,25 +85,35 @@ function onClick() {
               <el-col :span="6">
                 <div class="flex items-center">
                   <span class="mr-2">国 家</span>
-                  <el-select v-model="formInline.country" clearable placeholder="请选择国家" />
+                  <el-select v-model="formInline.country" clearable placeholder="请选择国家">
+                    <el-option v-for="item in staticData.country_code" :key="item.value" :label="item.label"
+                               :value="item.value" />
+                  </el-select>
                 </div>
               </el-col>
               <el-col :span="6">
                 <div class="flex items-center">
                   <span class="mr-2">品 牌</span>
-                  <el-select v-model="formInline.brand" clearable placeholder="请选择品牌" />
+                  <el-select v-model="formInline.brand" clearable placeholder="请选择品牌">
+                    <el-option v-for="item in brandsOptions" :label="item.brand" :value="item.brand" />
+                  </el-select>
                 </div>
               </el-col>
               <el-col :span="6">
                 <div class="flex items-center">
                   <span class="mr-2">分 组</span>
-                  <el-select v-model="formInline.group" clearable placeholder="请选择分组" />
+                  <el-select v-model="formInline.group" clearable placeholder="请选择分组">
+                    <el-option v-for="item in groupOptions" :label="item.tag" :value="item.tag" />
+                  </el-select>
                 </div>
               </el-col>
               <el-col :span="6">
                 <div class="flex items-center">
                   <span class="mr-2">状 态</span>
-                  <el-select v-model="formInline.status" clearable placeholder="请选择状态" />
+                  <el-select v-model="formInline.status" clearable placeholder="请选择状态">
+                    <el-option v-for="item in staticData.goods_status" :key="item.value" :label="item.label"
+                               :value="item.value" />
+                  </el-select>
                 </div>
               </el-col>
             </el-row>
@@ -75,7 +121,9 @@ function onClick() {
               <el-col :span="6" class="flex">
                 <div class="flex items-center">
                   <span class="mr-2">店 铺</span>
-                  <el-select v-model="formInline.shop" clearable placeholder="请输入店铺"></el-select>
+                  <el-select v-model="formInline.shop" clearable placeholder="请输入店铺">
+                    <el-option v-for="item in shopsOptions" :key="item.id" :label="item.name" :value="item.id" />
+                  </el-select>
                 </div>
               </el-col>
               <el-col :span="6">
@@ -124,7 +172,7 @@ function onClick() {
         </div>
         <VerticalDivider />
         <div class="flex flex-col  items-end">
-          <el-button :icon="Search" :loading="loading" class="mb-4" type="primary" @click="onClick">
+          <el-button :icon="Search" :loading="btnLoading" class="mb-4" type="primary" @click="handleQuery">
             查 询
           </el-button>
           <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;">
@@ -134,7 +182,7 @@ function onClick() {
       </div>
       <el-divider ref="dividerContainer" style="margin: 20px 0 12px 0;" />
       <div :style="{ height: tableHeight + 'px' }">
-        <DataTable />
+        <DataTable ref="table" />
       </div>
     </el-card>
   </div>