feat(price-approval): 更新商品添加页功能

- 在 SelectDrawer 组件中添加表格展示功能
- 增加数据加载、刷新和分页功能
- 添加新增按钮和垂直分割线组件
- 优化布局和样式，提升用户体验

src/views/price-approval/components/AddPage.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 /**
  * @Name: AddPage.vue
- * @Description: 商品添加-供货
+ * @Description: 商品添加页
  * @Author: Cheney
  */
 

src/views/price-approval/components/SelectDrawer.vue

@@ -4,6 +4,17 @@
  * @Author: Cheney
  */
 
+import { hasPermission } from '/@/utils/hasPermission';
+import { Plus, Refresh } from '@element-plus/icons-vue';
+import { CompetitorMonitorCommentColumns } from '/@/views/product-manage/Columns';
+import VerticalDivider from '/@/components/VerticalDivider/index.vue';
+import PermissionButton from '/@/components/PermissionButton/index.vue';
+import DataTableSlot from '/@/views/product-manage/comment-detail/component/DataTableSlot.vue';
+import { usePagination } from '/@/utils/usePagination';
+import { useTableData } from '/@/utils/useTableData';
+import * as api from '/@/views/product-manage/comment-detail/api';
+
+
 const isShow = defineModel({ default: false });
 
 const props = defineProps({
@@ -15,6 +26,68 @@ const { rowData, title } = props;
 const queryRow = reactive<any>({});
 
 const platformOptions = ref([]);
+
+const { tableOptions, handlePageChange } = usePagination(fetchList);
+
+const gridRef = ref();
+const gridOptions: any = reactive({
+  size: 'mini',
+  border: false,
+  round: true,
+  stripe: true,
+  showHeader: true,
+  currentRowHighLight: true,
+  height: 750,
+  toolbarConfig: {
+    size: 'large',
+    slots: {
+      buttons: 'toolbar_buttons',
+      tools: 'toolbar_tools'
+    }
+  },
+  rowConfig: {
+    isHover: 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: ''
+});
+
+async function fetchList(isQuery = false) {
+  if (isQuery) {
+    gridOptions.pagerConfig.page = 1;
+  }
+
+  gridOptions.data = [];
+  gridOptions.columns = [];
+
+  const query = {
+    // asin: asin,
+    // country_code: formInline?.country,
+    // score: formInline?.score,
+    // tiv: formInline?.tiv,
+  };
+  await useTableData(api.getTableData, query, gridOptions);
+  await gridRef.value.loadColumn(CompetitorMonitorCommentColumns);
+  gridOptions.showHeader = Boolean(gridOptions.data?.length);
+}
+
+function handleRefresh() {
+  fetchList();
+}
+
+function handleCreate() {
+
+}
 </script>
 
 <template>
@@ -26,10 +99,9 @@ const platformOptions = ref([]);
         :show-close="false"
         :title="`商品添加 --> ${title} --> 成本选择`"
         direction="btt"
-        size="70%"
+        size="80%"
         style="background-color:#F3F4FB;">
-      <div class="sticky top-0" style="background-color:#F3F4FB; min-height: 20px;"></div>
-      <div class="px-5">
+      <div class="px-5 mb-5">
         <el-card class="border-none mt-2">
           <div class="flex flex-1">
             <div class="w-full whitespace-nowrap">
@@ -37,10 +109,10 @@ const platformOptions = ref([]);
                 <el-col :span="5">
                   <div class="flex items-center">
                     <span class="mr-2">描 述</span>
-                    <el-input v-model="queryRow.description" clearable placeholder="请输入SKU" />
+                    <el-input v-model="queryRow.description" clearable placeholder="请输入描述" />
                   </div>
                 </el-col>
-                <el-col :span="5" class="flex">
+                <el-col :span="4" class="flex">
                   <div class="flex items-center">
                     <span class="mr-2">地 区</span>
                     <el-select v-model="queryRow.station" clearable placeholder="请选择地区">
@@ -48,7 +120,7 @@ const platformOptions = ref([]);
                     </el-select>
                   </div>
                 </el-col>
-                <el-col :span="5">
+                <el-col :span="4">
                   <div class="flex items-center">
                     <span class="mr-2">平 台</span>
                     <el-select v-model="queryRow.platform" placeholder="请选择平台">
@@ -59,9 +131,46 @@ const platformOptions = ref([]);
               </el-row>
             </div>
           </div>
+          <el-divider />
+          <vxe-grid ref="gridRef" class="z-0" v-bind="gridOptions">
+            <template #toolbar_buttons>
+              <div class="flex gap-2">
+                <PermissionButton v-if="hasPermission('ReviewCreate')" :icon="Plus" plain round type="primary"
+                                  @click="handleCreate">
+                  新 增
+                </PermissionButton>
+                <VerticalDivider class="px-1" style="margin-left: 7px" />
+              </div>
+            </template>
+            <template #toolbar_tools>
+              <el-button circle class="toolbar-btn" @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 #empty>
+              <el-empty description="暂无数据" />
+            </template>
+            <!-- 自定义列插槽 -->
+            <template v-for="col in CompetitorMonitorCommentColumns" #[`${col.field}`]="{ row }">
+              <DataTableSlot :key="row.id" :field="col.field" :row="row" />
+            </template>
+          </vxe-grid>
         </el-card>
       </div>
-
     </el-drawer>
   </div>
 </template>
@@ -75,4 +184,10 @@ const platformOptions = ref([]);
 .drawer-container :deep(.el-drawer__title) {
   font-size: 18px;
 }
+
+.toolbar-btn {
+  width: 34px;
+  height: 34px;
+  font-size: 18px
+}
 </style>