新增商品监控页面及相关组件

- 添加商品监控页面的API接口调用
- 实现商品监控页面的表格组件，包括自定义列和操作
- 新增编辑抽屉组件，用于商品信息的编辑
- 添加通知对话框组件，用于处理商品变更通知
- 实现商品监控页面的布局和样式
- 优化服务请求，移除不必要的headers
- 调整导航菜单图标样式

src/layout/navMenu/subItem.vue

@@ -14,7 +14,7 @@
             <SvgIcon :name="val.meta.icon" :style="[
                   val.meta.icon.startsWith('bi') ? {
                     'vertical-align': 'middle',
-                    'margin-right': '5px',
+                    'margin': '0 10px 0 5px',
                     'width': '24px',
                     'text-align': 'center',
                   } : {}

src/utils/service.ts

@@ -178,6 +178,7 @@ function createRequestFunction(service: any) {
 			data: {},
 		};
 
+		delete config.hearders;
 		// const token = userStore.getToken;
 		const token = Session.get('token');
 		if (token != null) {

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

@@ -8,11 +8,11 @@
 import { Download, Message, Money, Open, Operation, Refresh } from '@element-plus/icons-vue';
 import * as api from '/@/views/product-list/api';
 import PermissionButton from '/@/components/PermissionButton/index.vue';
-import { productColumns } from '/@/views/product-list/ColumnsTsx';
 import EditDrawer from '/@/views/product-list/component/EditDrawer.vue';
 import NoticeDialog from '/@/views/product-list/component/NoticeDialog.vue';
 import ImportButton from '/@/components/ImportButton/index.vue';
 import VerticalDivider from '/@/components/VerticalDivider/index.vue';
+import { productColumns } from '/@/views/product-list/ColumnsTsx';
 
 
 const { tableOptions, handlePageChange } = usePagination(fetchList);
@@ -73,8 +73,6 @@ async function fetchList() {
 }
 
 function handleRefresh() {
-  gridOptions.pagerConfig.page = 1;
-  gridOptions.pagerConfig.limit = 15;
   fetchList();
 }
 
@@ -136,7 +134,7 @@ function downloadTemplate() {
           <el-select v-model="templateType" placeholder="Select" style="width: 190px">
             <template #prefix>
               <div class="flex items-center">
-                <el-button bg size="small" style="margin-left: -7px; font-size: 14px; border-radius: 20px;" text
+                <el-button bg size="small" style="margin-left: -7px; font-size: 14px; border-radius: 29px;" text
                            type="success"
                            @click.stop="downloadTemplate">下载
                 </el-button>
@@ -181,7 +179,7 @@ function downloadTemplate() {
       />
     </template>
     <template #operate="{ row }">
-      <div class="flex justify-between">
+      <div class="flex justify-center gap-2">
         <PermissionButton circle plain type="warning" @click="handleEdit(row)">
           <el-icon>
             <Operation />

src/views/product-list/index.vue

@@ -13,7 +13,6 @@ import DataTable from '/@/views/product-list/component/DataTable.vue';
 
 const titleContainer: Ref<HTMLElement | null> = useTemplateRef('titleContainer');
 const queryContainer: Ref<HTMLElement | null> = useTemplateRef('queryContainer');
-
 const { tableHeight } = useTableHeight(titleContainer, queryContainer);
 
 const loading = ref(false);

src/views/product-monitor/ColumnsTsx.tsx

@@ -0,0 +1,30 @@
+import { useCountryInfoStore } from '/@/stores/countryInfo';
+
+const countryInfoStore = useCountryInfoStore();
+
+export const productColumns: any = [
+  { type: 'checkbox', width: 50, align: 'center', fixed: 'left' },
+  { type: 'seq', width: 60, align: 'center' },
+  {
+    field: 'is_monitor', title: '监控管理', width: 90, align: 'center',
+    slots: {
+      default({ row }: any) {
+        return <el-switch v-model={ row.is_monitor }></el-switch>;
+      }
+    }
+  },
+  {
+    field: 'country', title: '国 家', minWidth: 'auto', align: 'center',
+    slots: {
+      default({ row }: any) {
+        const country = countryInfoStore.countries.find(c => c.name === row.country);
+        const color = country ? country.color : '#3875F6';
+        return <el-tag effect="plain" round
+                       style={ { color: color, borderColor: color } }>{ row.country ? row.country : '--' }</el-tag>;
+      }
+    }
+  },
+  { 
+    field: 'operate', title: '操 作', width: 100, align: 'center', fixed: 'right',
+    slots: { default: 'operate' }},
+];

src/views/product-monitor/api.ts

@@ -0,0 +1,82 @@
+import { request } from '/@/utils/service';
+
+
+const apiPrefix = '/api/assets/shop/';
+
+export function getCardData(query: any) {
+  return request({
+    url: apiPrefix + 'card/',
+    method: 'GET',
+    params: query,
+  });
+}
+
+export function getTableData(query: any) {
+  return request({
+    url: apiPrefix,
+    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/',
+    method: 'GET',
+    params: query,
+  });
+}
+
+export function getCurrentInfo(query: any) {
+  return request({
+    url: apiPrefix + 'current/',
+    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}/`,
+    method: 'POST',
+    params: { partial: body.partial },
+    data: body.formData,
+  });
+}

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

@@ -0,0 +1,206 @@
+<script lang="ts" setup>
+/**
+ * @Name: Table.vue
+ * @Description: 商品列表表格
+ * @Author: Cheney
+ */
+
+import { Delete, Download, Operation, Plus, Refresh, Upload } from '@element-plus/icons-vue';
+import * as api from '/@/views/product-list/api';
+import PermissionButton from '/@/components/PermissionButton/index.vue';
+import EditDrawer from './EditDrawer.vue';
+import ImportButton from '/@/components/ImportButton/index.vue';
+import VerticalDivider from '/@/components/VerticalDivider/index.vue';
+import { productColumns } from '/@/views/product-list/ColumnsTsx';
+
+
+const { tableOptions, handlePageChange } = usePagination(fetchList);
+
+const gridRef = ref();
+const gridOptions: any = reactive({
+  border: false,
+  round: true,
+  stripe: true,
+  currentRowHighLight: true,
+  height: '100%',
+  toolbarConfig: {
+    custom: true,
+    slots: {
+      buttons: 'toolbar_buttons',
+      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: productColumns,
+  data: ''
+});
+
+const checkedList = ref<Set<number>>(new Set());
+
+const editOpen = ref(false);
+const rowData = ref({});
+
+const dialogVisible = ref(false);
+
+const templateType = ref();
+
+onBeforeMount(() => {
+  fetchList();
+});
+
+async function fetchList() {
+  const query = {
+    page: gridOptions.pagerConfig.page,
+    limit: gridOptions.pagerConfig.limit
+  };
+  await useTableData(api.getTableData, query, gridOptions);
+}
+
+function handleRefresh() {
+  fetchList();
+}
+
+async function batchOpen() {
+  const ids = Array.from(checkedList.value);
+  await useResponse(api.updateShopDetail, { ids, status: 1 });
+  checkedList.value.clear();
+  await fetchList();
+}
+
+function selectChangeEvent({ checked, row }: any) {
+  if (checked) {
+    checkedList.value.add(row.id); // 获取单个数据
+  } else {
+    checkedList.value.delete(row.id);
+  }
+}
+
+function selectAllChangeEvent({ checked }: any) {
+  const $grid = gridRef.value;
+  if ($grid) {
+    const records = $grid.getData(); // 获取所有数据
+    if (checked) {
+      records.forEach((item: any) => {
+        checkedList.value.add(item.id);
+      });
+    } else {
+      checkedList.value.clear();
+    }
+  }
+}
+
+function handleEdit(row: any) {
+  editOpen.value = true;
+  rowData.value = row;
+}
+
+function singleDelete(row: any) {
+  // dialogVisible.value = true;
+  rowData.value = row;
+}
+
+function downloadTemplate() {
+  // console.log('111=> ');
+}
+</script>
+
+<template>
+  <vxe-grid ref="gridRef" v-bind="gridOptions"
+            @checkbox-change="selectChangeEvent"
+            @checkbox-all="selectAllChangeEvent">
+    <template #toolbar_buttons>
+      <div class="flex gap-2">
+        <PermissionButton :disabled="!checkedList.size" :icon="Delete" plain round type="danger" @click="batchOpen">
+          批量删除
+        </PermissionButton>
+        <PermissionButton :icon="Plus" plain round type="primary" @click="batchOpen">
+          新 增
+        </PermissionButton>
+        <VerticalDivider class="px-1" style="margin-left: 7px;" />
+        <div class="custom-el-input">
+          <el-select v-model="templateType" placeholder="Select" style="width: 190px">
+            <template #prefix>
+              <div class="flex items-center">
+                <el-button bg size="small" style="margin-left: -7px; font-size: 14px; border-radius: 29px;" text
+                           type="success"
+                           @click.stop="downloadTemplate">下载
+                </el-button>
+                <VerticalDivider style="margin-left: 7px" />
+              </div>
+            </template>
+            <el-option label="商品通知模板" value="item1" />
+            <el-option label="商品模板" value="item2" />
+            <el-option label="指导价格模板" value="item3" />
+          </el-select>
+        </div>
+        <ImportButton :icon="Upload" bg text>导 入</ImportButton>
+      </div>
+    </template>
+    <template #toolbar_tools>
+      <el-button circle class="toolbar-btn" @click="handleRefresh">
+        <el-icon>
+          <Refresh />
+        </el-icon>
+      </el-button>
+      <el-button circle class="mr-3 toolbar-btn">
+        <el-icon>
+          <Download />
+        </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 #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>
+
+<style scoped>
+.toolbar-btn {
+  width: 34px;
+  height: 34px;
+  font-size: 18px
+}
+
+:deep(.custom-el-input .el-select__wrapper) {
+  border-radius: 20px;
+}
+</style>

src/views/product-monitor/component/EditDrawer.vue

@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+/**
+ * @Name: EditDrawer.vue
+ * @Description: 店铺编辑
+ * @Author: Cheney
+ */
+
+import { ElMessage, FormInstance, FormRules } from 'element-plus';
+import { useResponse } from '/@/utils/useResponse';
+import * as api from '/@/views/shop-information/api';
+
+
+const loading = ref(false);
+const editOpen = defineModel({ default: false });
+const { rowData } = defineProps<{
+  rowData: object;
+}>();
+
+const emit = defineEmits([ 'refresh' ]);
+
+onBeforeMount(() => {
+  // replaceCol();
+  console.log('rowData=> ', rowData);
+});
+
+interface RuleForm {
+  asin: any,
+  sku: any,
+  country: any
+  shop: any
+  group: any
+  status: any
+  frequency: any
+}
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<RuleForm>({
+  asin: '',
+  sku: '',
+  country: '',
+  shop: '',
+  group: '',
+  status: '',
+  frequency: '',
+});
+
+const rules = reactive<FormRules<RuleForm>>({
+  asin: [ { required: true, message: '请输入ASIN', trigger: 'blur' } ],
+  sku: [ { required: true, message: '请输入SKU', trigger: 'blur' } ],
+  country: [ { required: true, message: '请选择国家', trigger: 'change' } ],
+  shop: [ { required: true, message: '请输入店铺', trigger: 'blur' } ],
+  group: [ { required: true, message: '请输入分组', trigger: 'blur' } ],
+  status: [ {  message: '请选择状态', trigger: 'blur' } ],
+  frequency: [ { message: '请选择更新频率', trigger: 'blur' } ]
+
+});
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      // await useResponse({ id: gridOptions.data[0].id, partial: 1, formData: ruleForm }, api.updateShopDetail, loading);
+      editOpen.value = false;
+      ElMessage.success('编辑成功');
+      emit('refresh');
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+// function replaceCol() {
+//   const result = Object.keys(ruleForm).reduce((acc, key) => {
+//     if (key in gridOptions.data[0]) {
+//       acc[key] = gridOptions.data[0][key];
+//     }
+//     return acc;
+//   }, {} as { [key: string]: any });
+//   Object.assign(ruleForm, result);
+// }
+</script>
+
+<template>
+  <el-drawer v-model="editOpen"
+             :close-on-click-modal="false"
+             :close-on-press-escape="false"
+             :title="`商品监控 - 编辑 `"
+             size="25%">
+    <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        class="mx-2.5 mt-2.5"
+        label-width="auto"
+        status-icon>
+      <el-form-item label="ASIN" prop="asin">
+        <el-input v-model="ruleForm.asin"/>
+      </el-form-item>
+      <el-form-item label="SKU" prop="sku">
+        <el-input v-model="ruleForm.sku"/>
+      </el-form-item>
+      <el-form-item label="店 铺" prop="shop">
+        <el-input v-model="ruleForm.shop"/>
+      </el-form-item>
+      <el-form-item label="分 组" prop="group">
+        <el-input v-model="ruleForm.group"/>
+      </el-form-item>
+      <el-form-item label="状 态" prop="status">
+        <el-select v-model="ruleForm.status"/>
+      </el-form-item>
+      <el-form-item label="国 家" prop="country">
+        <el-select v-model="ruleForm.country" placeholder="请选择国家">
+          <el-option
+              v-for="item in rowData.country"
+              :key="item"
+              :label="item"
+              :value="item">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="更新频率" prop="frequency">
+        <el-input-number v-model="ruleForm.frequency"/>
+      </el-form-item>
+      <el-form-item>
+        <el-divider />
+        <div class="flex flex-1 justify-end">
+          <el-button :loading="loading" type="primary" @click="submitForm(ruleFormRef)">确 定</el-button>
+          <el-button @click="resetForm(ruleFormRef)">重 置</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+  </el-drawer>
+</template>
+
+<style scoped>
+:deep(.el-drawer .el-drawer__header) {
+  border: none !important;
+}
+</style>

src/views/product-monitor/component/NoticeDialog.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>/**
+ * @Name: NoticeDialog.vue
+ * @Description:
+ * @Author: Cheney
+ */
+import { ElMessage } from 'element-plus';
+
+
+const { rowData } = defineProps<{
+  rowData: object;
+}>();
+// console.log('rowData=> ', rowData);
+const dialogVisible = defineModel({ default: false });
+
+const staffSelect = ref('');
+const staffOptions: any = ref([]);
+const staffTags: any = ref([]);
+const staffLoading = ref(false);
+const currentRow: any = ref(null);
+
+function handleClose(done: any) {
+  staffSelect.value = '';
+  staffTags.value = [];
+  done();
+}
+
+function addStaffChange() {
+  const selectedOption: any = staffOptions.value.find((option: any) => option.id === staffSelect.value);
+  if (selectedOption && !staffTags.value.some((tag: any) => tag.id === selectedOption.id)) {
+    // 如果选中的项不在 staffTags 中，则添加到 staffTags
+    staffTags.value.push({
+      id: selectedOption.id,
+      username: selectedOption.username
+    });
+  }
+}
+
+function isOptionDisabled(id: any) {
+  return staffTags.value.some((tag: any) => tag.id === id);
+}
+
+function removeTag(tag: any) {
+  staffTags.value = staffTags.value.filter((t: any) => t.id !== tag.id);
+}
+
+async function fetchExistingStaff(row: any) {
+  const query = {
+    id: row.value.id ? row.value.id : row.value.rowid
+  };
+  // const resp = await api.getExistingStaffs(query);
+  // staffTags.value = resp.data;
+}
+
+async function addStaffs() {
+  staffLoading.value = true;
+  const body = {
+    id: currentRow.id,
+    user_ids: staffTags.map((tag: any) => tag.id)
+  };
+  try {
+    // const resp = await api.postStaffs(body);
+    // if (resp.code === 2000) {
+    //   ElMessage.error('编辑成功！');
+    //   await fetchExistingStaff(currentRow);
+    // }
+  } catch (error) {
+    ElMessage.error('编辑失败！');
+  } finally {
+    staffSelect.value = '';
+    staffLoading.value = false;
+  }
+}
+
+function cancelDialog() {
+  handleClose(() => {
+    dialogVisible.value = false;
+  });
+}
+</script>
+
+<template>
+  <div>
+    <el-dialog
+        v-model="dialogVisible"
+        :before-close="handleClose"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        title="变更通知"
+        width="35%"
+    >
+      <el-row class="mb-2">
+        <el-col>
+          <span class="mr-2">人员选择</span>
+          <el-select v-model="staffSelect" filterable placeholder="输入搜索" style="width: 200px;"
+                     @change="addStaffChange">
+            <el-option
+                v-for="item in staffOptions"
+                :key="item.id"
+                :disabled="isOptionDisabled(item.id)"
+                :label="item.username"
+                :value="item.id">
+            </el-option>
+          </el-select>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="2">
+
+        </el-col>
+        <el-col :span="20" class="ml-2.5">
+          <i class="bi bi-info-circle"></i>
+          <span class="ml-1" style="color: #909399">仅可添加已绑定邮箱的用户</span>
+        </el-col>
+      </el-row>
+      <el-divider style="margin: 12px 0 20px 0"></el-divider>
+      <div class="flex flex-wrap gap-1.5">
+        <el-tag
+            v-for="tag in staffTags"
+            :key="tag.id"
+            closable
+            @close="removeTag(tag)">
+          {{ tag.username }}
+        </el-tag>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cancelDialog">取 消</el-button>
+        <el-button :loading="staffLoading" type="primary" @click="addStaffs">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/views/product-monitor/index.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+/**
+ * @Name: index.vue
+ * @Description:
+ * @Author: Cheney
+ */
+
+import { RefreshRight, Search } from '@element-plus/icons-vue';
+import VerticalDivider from '/@/components/VerticalDivider/index.vue';
+import DataTable from './component/DataTable.vue';
+import { useTableHeight } from '/@/utils/useTableHeight';
+
+
+const titleContainer: Ref<HTMLElement | null> = useTemplateRef('titleContainer');
+const queryContainer: Ref<HTMLElement | null> = useTemplateRef('queryContainer');
+const { tableHeight } = useTableHeight(titleContainer, queryContainer);
+
+const formInline = reactive({
+  country: '',
+  brand: '',
+  group: '',
+  status: '',
+  shop: '',
+  asin: '',
+  sku: '',
+  platformId: '',
+  scoreNumber: '',
+  commentNumber: '',
+  displayScore: ''
+});
+
+const loading = ref(false);
+
+function onClick() {
+  loading.value = true;
+
+}
+</script>
+
+<template>
+  <div class="p-5 flex-grow">
+    <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
+      <div ref="titleContainer" class="text-xl font-semibold pb-7">商品列表</div>
+      <!-- 查询条件 -->
+      <div ref="queryContainer" class="flex justify-between">
+        <div class="flex flex-1">
+          <div class="w-full whitespace-nowrap">
+            <el-row :gutter="20" style="margin-bottom: 16px;">
+              <el-col :span="6">
+                <div class="flex items-center">
+                  <span class="mr-2">国 家</span>
+                  <el-select v-model="formInline.country" clearable placeholder="请选择国家" />
+                </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="请选择品牌" />
+                </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="请选择分组" />
+                </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="请选择状态" />
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20" style="margin-bottom: 16px;">
+              <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>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="flex items-center">
+                  <span class="mr-2">ASIN</span>
+                  <el-input v-model="formInline.asin" clearable placeholder="请输入ASIN"></el-input>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="flex items-center">
+                  <span class="mr-2">SKU</span>
+                  <el-input v-model="formInline.sku" clearable placeholder="请输入SKU"></el-input>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="flex items-center">
+                  <span class="mr-2">平台编号</span>
+                  <el-input v-model="formInline.platformId" clearable placeholder="请输入平台编号"></el-input>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="6" class="flex">
+                <div class="flex items-center">
+                  <span class="mr-2">亚马逊显示评分人数</span>
+                  <el-input-number v-model="formInline.scoreNumber" :min="0"
+                                   placeholder="请输入亚马逊显示评分人数"></el-input-number>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="flex items-center">
+                  <span class="mr-2">亚马逊显示评论人数</span>
+                  <el-input-number v-model="formInline.commentNumber" :min="0"
+                                   placeholder="请输入亚马逊显示评论人数"></el-input-number>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="flex items-center">
+                  <span class="mr-2">亚马逊显示评分</span>
+                  <el-input-number v-model="formInline.displayScore" :min="0"
+                                   placeholder="请输入亚马逊显示评分"></el-input-number>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+        <VerticalDivider />
+        <div class="flex flex-col  items-end">
+          <el-button :icon="Search" :loading="loading" class="mb-4" type="primary" @click="onClick">
+            查 询
+          </el-button>
+          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;">
+            重 置
+          </el-button>
+        </div>
+      </div>
+      <el-divider ref="dividerContainer" style="margin: 20px 0 12px 0;" />
+      <div :style="{ height: tableHeight + 'px' }">
+        <DataTable />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+
+</style>