Browse Source

style(layout): 调整布局样式和代码结构

- 移除了多个组件中的 flex-grow 类
- 简化了选项获取函数
- 调整了布局父组件的样式
WanGxC 6 tháng trước cách đây
mục cha
commit
d19de8d88d

+ 1 - 1
src/layout/routerView/parent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-parent justify-center">
+  <div class="layout-parent">
     <router-view v-slot="{ Component }">
       <transition :name="setTransitionName" mode="out-in">
         <keep-alive v-if="showView" :include="getKeepAliveNames">

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

@@ -81,7 +81,7 @@ function resetParameter() {
 </script>
 
 <template>
-  <div class="p-5 flex-grow">
+  <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>
       <!-- 查询条件 -->

+ 9 - 19
src/views/product-manage/product-list/index.vue

@@ -36,32 +36,22 @@ const formInline = reactive<any>({
 });
 provide('query-parameter', formInline);
 
-const groupOptions: any = ref([]);
-const brandsOptions: any = ref([]);
-const shopOptions: any = ref([]);
+const groupOptions = <any>ref([]);
+const brandsOptions = <any>ref([]);
+const shopOptions = <any>ref([]);
 
 provide('groupOptions', groupOptions);
 provide('brandsOptions', brandsOptions);
 provide('shopOptions', shopOptions);
 
 onBeforeMount(() => {
-  fetchAllOptions();
+  fetchOptions();
 });
 
-async function fetchAllOptions() {
-  try {
-    const [ groupRes, brandsRes, shopRes ] = await Promise.all([
-      useResponse(api.getGroupOptions),
-      useResponse(api.getBrandsOptions),
-      useResponse(api.getShopOptions)
-    ]);
-
-    groupOptions.value = groupRes.data;
-    brandsOptions.value = brandsRes.data;
-    shopOptions.value = shopRes.data;
-  } catch (error) {
-    console.error('Error fetching options: ', error);
-  }
+async function fetchOptions() {
+  groupOptions.value = (await useResponse(api.getGroupOptions)).data;
+  brandsOptions.value = (await useResponse(api.getBrandsOptions)).data;
+  shopOptions.value = (await useResponse(api.getShopOptions)).data;
 }
 
 async function handleQuery() {
@@ -78,7 +68,7 @@ function resetParameter() {
 </script>
 
 <template>
-  <div class="p-5 flex-grow">
+  <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>
       <!-- 查询条件 -->

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

@@ -72,7 +72,7 @@ function resetParameter() {
 </script>
 
 <template>
-  <div class="p-5 flex-grow">
+  <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>
       <!-- 查询条件 -->

+ 1 - 1
src/views/sku-manage/product-attribute/index.vue

@@ -39,7 +39,7 @@ function resetParameter() {
 </script>
 
 <template>
-  <div class="p-5 flex-grow">
+  <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>
       <!-- 查询条件 -->

+ 1 - 1
src/views/sku-manage/product-brand/index.vue

@@ -38,7 +38,7 @@ function resetParameter() {
 </script>
 
 <template>
-  <div class="p-5 flex-grow">
+  <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>
       <!-- 查询条件 -->

+ 1 - 1
src/views/sku-manage/product-category/index.vue

@@ -38,7 +38,7 @@ function resetParameter() {
 </script>
 
 <template>
-  <div class="p-5 flex-grow">
+  <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>
       <!-- 查询条件 -->

+ 1 - 1
src/views/store-manage/market-store/index.vue

@@ -46,7 +46,7 @@ function resetParameter() {
 </script>
 
 <template>
-  <div class="p-5 flex-grow">
+  <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>
       <!-- 查询条件 -->

+ 1 - 1
src/views/store-manage/online-merchandise/index.vue

@@ -63,7 +63,7 @@ function resetParameter() {
 </script>
 
 <template>
-  <div class="p-5 flex-grow">
+  <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>
       <!-- 查询条件 -->