Merge branch 'cheney' into dev

src/utils/useCustomHeight.ts

@@ -1,4 +1,4 @@
-export function useTableHeight(heightObj: Record<string, number | Ref<HTMLElement | null>>) {
+export function useCustomHeight(heightObj: Record<string, number | Ref<HTMLElement | null>>) {
   const tableHeight = ref<number>(0);
 
   const calculateHeight = () => {

src/views/product-manage/Columns.ts

@@ -61,7 +61,7 @@ export const ProductColumns = [
     slots: { default: 'create_datetime' }
   },
   {
-    field: 'operate', title: '操 作', minWidth: 100, align: 'center', fixed: 'right',
+    field: 'operate', title: '操 作', minWidth: 90, align: 'center', fixed: 'right',
     slots: { default: 'operate' }
   }
 ];
@@ -157,7 +157,7 @@ export const ProductMonitorColumns = [
     slots: { default: 'create_datetime' }
   },
   {
-    field: 'operate', title: '操 作', minWidth: 100, align: 'center', fixed: 'right',
+    field: 'operate', title: '操 作', minWidth: 90, align: 'center', fixed: 'right',
     slots: { default: 'operate' }
   }
 ];
@@ -241,7 +241,7 @@ export const CompetitorMonitorColumns = [
     slots: { default: 'create_datetime' }
   },
   {
-    field: 'operate', title: '操 作', minWidth: 100, align: 'center', fixed: 'right',
+    field: 'operate', title: '操 作', minWidth: 90, align: 'center', fixed: 'right',
     slots: { default: 'operate' }
   }
 ];

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

@@ -11,6 +11,9 @@ import { useResponse } from '/@/utils/useResponse';
 import { DictionaryStore } from '/@/stores/dictionary';
 import * as api from '../api';
 
+
+const groupOptions = <Ref>inject('groupOptions');
+
 const { data: staticData } = DictionaryStore();
 
 const btnLoading = ref(false);
@@ -98,7 +101,9 @@ function closeDrawer() {
           <el-input v-model="ruleForm.shop_name" />
         </el-form-item>
         <el-form-item class="font-medium" label="分 组" prop="tag">
-          <el-input v-model="ruleForm.tag" />
+          <el-select v-model="ruleForm.tag" filterable>
+            <el-option v-for="item in groupOptions" :label="item.tag" :value="item.tag" />
+          </el-select>
         </el-form-item>
         <el-form-item class="font-medium" label="状 态" prop="status">
           <el-select v-model="ruleForm.status" :disabled="true">

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

@@ -7,19 +7,29 @@
 
 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 '/@/utils/useTableHeight';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from './api';
 import { useTemplateRef } from 'vue';
 import { DictionaryStore } from '/@/stores/dictionary';
+import { useCustomHeight } from '/@/utils/useCustomHeight';
 
 
+const DataTable = defineAsyncComponent(() => import('./component/DataTable.vue'));
+
+defineOptions({
+  name: 'CompetitorMonitor'
+});
+
 const { data: staticData } = DictionaryStore();
 
-const titleContainer: Ref<HTMLElement | null> = useTemplateRef('titleContainer');
-const queryContainer: Ref<HTMLElement | null> = useTemplateRef('queryContainer');
-const { tableHeight } = useTableHeight(titleContainer, queryContainer);
+const baseHeight = {
+  headerHeight: 50,
+  dividerHeight: 32,
+  toolbarHeight: 51,
+  padding: 40
+};
+const heightObj = { titleContainer: 48, queryContainer: 80, ...baseHeight };
+const { tableHeight } = useCustomHeight(heightObj);
 
 const tableRef: Ref<any> = useTemplateRef('table');
 
@@ -49,27 +59,19 @@ const statusOptions = [
   { label: '失败', value: 2 },
   { label: '暂停', value: 3 },
   { label: '下架', value: 10 }
-]
-
-onBeforeMount(() => {
-  fetchGroupOptions();
-  fetchBrandsOptions();
-  fetchShopsOptions();
-});
+];
 
-async function fetchGroupOptions() {
-  const res = await useResponse(api.getGroupOptions);
-  groupOptions.value = res.data;
-}
+const isTableReady = ref(false);
 
-async function fetchBrandsOptions() {
-  const res = await useResponse(api.getBrandsOptions);
-  brandsOptions.value = res.data;
-}
+onBeforeMount(async () => {
+  await fetchOptions(); // 确保选项数据加载完成
+  isTableReady.value = true; // 数据加载完成后设置为 true
+});
 
-async function fetchShopsOptions() {
-  const res = await useResponse(api.getShopsOptions);
-  shopsOptions.value = res.data;
+async function fetchOptions() {
+  groupOptions.value = (await useResponse(api.getGroupOptions)).data;
+  brandsOptions.value = (await useResponse(api.getBrandsOptions)).data;
+  shopsOptions.value = (await useResponse(api.getShopsOptions)).data;
 }
 
 const btnLoading = ref(false);
@@ -174,14 +176,14 @@ function resetParameter() {
           <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;" 
+          <el-button :icon="RefreshRight" color="#ECECF1C9" style="width: 88px; color: #3c3c3c;"
                      @click="resetParameter">
             重 置
           </el-button>
         </div>
       </div>
       <el-divider ref="dividerContainer" style="margin: 20px 0 12px 0;" />
-      <div :style="{ height: tableHeight + 'px' }">
+      <div v-if="isTableReady" :style="{ height: tableHeight + 'px' }">
         <DataTable ref="table" />
       </div>
     </el-card>

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

@@ -7,19 +7,29 @@
 
 import VerticalDivider from '/src/components/VerticalDivider/index.vue';
 import { RefreshRight, Search } from '@element-plus/icons-vue';
-import { useTableHeight } from '/@/utils/useTableHeight';
-import DataTable from './component/DataTable.vue';
 import { DictionaryStore } from '/@/stores/dictionary';
 import { useResponse } from '/@/utils/useResponse';
 import { useTemplateRef } from 'vue';
 import * as api from './api';
+import { useCustomHeight } from '/@/utils/useCustomHeight';
 
 
+const DataTable = defineAsyncComponent(() => import('./component/DataTable.vue'));
+
+defineOptions({
+  name: 'ProductList'
+});
+
 const { data: staticData } = DictionaryStore();
 
-const titleContainer: Ref<HTMLElement | null> = useTemplateRef('titleContainer');
-const queryContainer: Ref<HTMLElement | null> = useTemplateRef('queryContainer');
-const { tableHeight } = useTableHeight(titleContainer, queryContainer);
+const baseHeight = {
+  headerHeight: 50,
+  dividerHeight: 32,
+  toolbarHeight: 51,
+  padding: 40
+};
+const heightObj = { titleContainer: 48, queryContainer: 80, ...baseHeight };
+const { tableHeight } = useCustomHeight(heightObj);
 
 const tableRef: Ref<any> = useTemplateRef('table');
 
@@ -73,9 +83,9 @@ function resetParameter() {
 <template>
   <div class="p-5">
     <el-card class="h-full" style="color: rgba(0, 0, 0, 0.88);">
-      <div ref="titleContainer" class="text-xl font-semibold pb-5">商品列表</div>
+      <div class="text-xl font-semibold pb-5">商品列表</div>
       <!-- 查询条件 -->
-      <div ref="queryContainer" class="flex justify-between">
+      <div class="flex justify-between">
         <div class="flex flex-1">
           <div class="w-full whitespace-nowrap">
             <el-row :gutter="20" style="margin-bottom: 16px;">

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

@@ -12,6 +12,8 @@ import { useResponse } from '/@/utils/useResponse';
 import * as api from '../api';
 
 
+const groupOptions = <Ref>inject('groupOptions');
+
 const { data: staticData } = DictionaryStore();
 
 const btnLoading = ref(false);
@@ -130,7 +132,9 @@ function closeDrawer() {
           <el-input v-model="ruleForm.shop" />
         </el-form-item>
         <el-form-item class="font-medium" label="分 组" prop="tag">
-          <el-input v-model="ruleForm.tag" />
+          <el-select v-model="ruleForm.tag" filterable>
+            <el-option v-for="item in groupOptions" :label="item.tag" :value="item.tag" />
+          </el-select>
         </el-form-item>
         <el-form-item class="font-medium" label="状 态" prop="status">
           <el-select v-model="ruleForm.status" :disabled="true">

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

@@ -7,19 +7,29 @@
 
 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 '/@/utils/useTableHeight';
 import { useResponse } from '/@/utils/useResponse';
 import * as api from './api';
 import { useTemplateRef } from 'vue';
 import { DictionaryStore } from '/@/stores/dictionary';
+import { useCustomHeight } from '/@/utils/useCustomHeight';
 
 
+const DataTable = defineAsyncComponent(() => import('./component/DataTable.vue'));
+
+defineOptions({
+  name: 'ProductMonitor'
+});
+
 const { data: staticData } = DictionaryStore();
 
-const titleContainer: Ref<HTMLElement | null> = useTemplateRef('titleContainer');
-const queryContainer: Ref<HTMLElement | null> = useTemplateRef('queryContainer');
-const { tableHeight } = useTableHeight(titleContainer, queryContainer);
+const baseHeight = {
+  headerHeight: 50,
+  dividerHeight: 32,
+  toolbarHeight: 51,
+  padding: 40
+};
+const heightObj = { titleContainer: 48, queryContainer: 116, ...baseHeight };
+const { tableHeight } = useCustomHeight(heightObj);
 
 const tableRef: Ref<any> = useTemplateRef('table');
 
@@ -51,10 +61,13 @@ const statusOptions = [
   { label: '失败', value: 2 },
   { label: '暂停', value: 3 },
   { label: '下架', value: 10 }
-]
+];
+
+const isTableReady = ref(false);
 
-onBeforeMount(() => {
-  fetchOptions();
+onBeforeMount(async () => {
+  await fetchOptions(); // 确保选项数据加载完成
+  isTableReady.value = true; // 数据加载完成后设置为 true
 });
 
 async function fetchOptions() {
@@ -162,7 +175,7 @@ function resetParameter() {
               <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 v-model="formInline.commentNumber" :min="0" placeholder="请输入">
                   </el-input-number>
                 </div>
               </el-col>
@@ -187,7 +200,7 @@ function resetParameter() {
         </div>
       </div>
       <el-divider ref="dividerContainer" style="margin: 20px 0 12px 0;" />
-      <div :style="{ height: tableHeight + 'px' }">
+      <div v-if="isTableReady" :style="{ height: tableHeight + 'px' }">
         <DataTable ref="table" />
       </div>
     </el-card>

src/views/sku-manage/product-brand/api.ts

@@ -15,7 +15,6 @@ export function deleteRow(query: any) {
   return request({
     url: apiPrefix + query.id + '/',
     method: 'DELETE',
-    params: query
   });
 }