refactor(bi/product/index.vue): bi 商品管理重构完成-包括单屏幕适配

src/assets/styles/element-ui.scss

@@ -91,6 +91,7 @@
   color: var(--el-color-primary) !important;
 }
 
+// 覆盖默认样式
 .el-select {
   width: 215px;
 }
@@ -98,3 +99,7 @@
 .el-tabs {
   flex: 1;
 }
+
+.el-form-item {
+  margin-bottom: 0;
+}

src/assets/styles/index.scss

@@ -127,6 +127,10 @@ aside {
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding: 20px;
+  >div{
+    width: 100%;
+  }
 }
 
 .components-container {
@@ -184,4 +188,4 @@ aside {
     vertical-align: middle;
     margin-bottom: 10px;
   }
-}
+}
\ No newline at end of file

src/layout/components/AppMain.vue

@@ -41,7 +41,6 @@ function addIframe() {
   .app-main {
     /* 50= navbar  50  */
     min-height: calc(100vh - 50px);
-    padding: 20px;
     width: 100%;
     position: relative;
     overflow: hidden;

src/layout/index.vue

@@ -108,7 +108,7 @@ function setLayout() {
   // 开启头部固定以后，main的高度需要设置为100vh
   .fixed-header+.app-main {
     min-height: 100vh;
-    padding-top: 50px + 20px;
+    padding-top: 50px;
   }
 
 
@@ -121,7 +121,7 @@ function setLayout() {
     }
 
     .fixed-header+.app-main {
-      padding-top: 84px + 20px;
+      padding-top: 84px;
     }
   }
 
@@ -137,4 +137,33 @@ function setLayout() {
   .mobile .fixed-header {
     width: 100%;
   }
+
+
+  // 有些页面高度固定就是 100 vh - 头部高度作为可视区域
+  // 例如：小 BI 分析中的商品管理页面，中间可用区域固定高度，不能撑开整个网页滚动
+  // 所以要动态计算高度
+  ::v-deep() {
+
+    // 无头部固定，无头部 Tags-view
+    .client-fix-height {
+      // 头部导航 50，上下内边距 20
+      height: calc(100vh - 50px - 40px);
+    }
+
+    // 头部固定时
+    .fixed-header+.app-main {
+      .client-fix-height {
+        height: calc(100vh - 50px - 40px) !important;
+      }
+    }
+
+    // 有头部标签时
+    .hasTagsView {
+      .fixed-header+.app-main {
+        .client-fix-height {
+          height: calc(100vh - 50px - 34px - 40px) !important;
+        }
+      }
+    }
+  }
 </style>
\ No newline at end of file

src/views/bi/competitor/index.vue

@@ -62,6 +62,7 @@ provide('activeName', activeName);
           flex-direction: column;
           justify-content: space-around;
           width: 100%;
+          margin-top: 20px;
 
           .chart{
             flex: 1;

src/views/bi/product/index.vue

 <template>
   <div class="app-container">
     <el-row :gutter="20"
-      class="row">
+      class="client-fix-height">
       <!--商品分类-->
       <category-tree :options="seriesOptions"
         :defaultProps="defaultProps"
@@ -11,7 +11,7 @@
         @search="handleQuery"
         :colSpan="4"></category-tree>
       <!--商品数据-->
-      <el-col :span="18"
+      <el-col :span="20"
         :xs="24"
         class="right_col">
         <el-form :model="queryParams"
@@ -63,8 +63,7 @@
             align="left"
             key="prdCode"
             prop="prdCode"
-            v-if="columns[0].visible"
-            width="150" />
+            v-if="columns[0].visible" />
           <el-table-column label="商品名字"
             align="left"
             key="prdName"
@@ -76,20 +75,17 @@
             key="series"
             prop="series"
             v-if="columns[2].visible"
-            :show-overflow-tooltip="true"
-            width="150" />
+            :show-overflow-tooltip="true" />
           <el-table-column label="条码"
             align="left"
             key="prdSpec"
             prop="prdSpec"
             v-if="columns[3].visible"
-            :show-overflow-tooltip="true"
-            width="180" />
+            :show-overflow-tooltip="true" />
           <el-table-column label="售卖状态"
             align="center"
             key="saleStatus"
-            v-if="columns[4].visible"
-            width="80">
+            v-if="columns[4].visible">
             <template v-slot="scope">
               <el-switch v-model="scope.row.saleStatus"
                 active-value="1"
@@ -99,18 +95,16 @@
           </el-table-column>
           <el-table-column label="操作"
             align="center"
-            width="160"
             class-name="small-padding fixed-width"
             v-if="columns[5].visible">
             <template slot-scope="scope">
-              <el-button size="mini"
-                type="text"
-                icon="el-icon-edit">修改</el-button>
+              <el-button icon="el-icon-edit">修改</el-button>
             </template>
           </el-table-column>
         </el-table>
 
-        <pagination v-show="total > 0"
+        <pagination class="pagination"
+          v-show="total > 0"
           :total="total"
           v-model:page="queryParams.pageNum"
           v-model:limit="queryParams.pageSize"
@@ -182,7 +176,34 @@ getProductList()
 
 <style scoped
   lang="scss">
-  ::v-deep .row {
+  .app-container {
+    >.el-row {
+      /* flex: 1; */
+      display: flex;
+      padding: 20px;
+      background-color: var(--el-bg-color-overlay);
+
+      .right_col {
+        flex: 1 !important;
+        transition: all .5s;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .pagination {
+          /* 没办法设置某个子元素单独在主轴排列方式，使用此方式可以 */
+          margin-top: auto;
+        }
+
+        &.el-col-20 {
+          width: 83.33333333%;
+          max-width: none;
+        }
+      }
+    }
+  }
+
+  /* ::v-deep .row {
     height: 100%;
     display: flex;
 
@@ -195,5 +216,5 @@ getProductList()
       }
     }
 
-  }
+  } */
 </style>
\ No newline at end of file

src/views/bi/sale/index.vue

@@ -608,9 +608,9 @@ init()
     /* 套表 */
     .excel_charts_item {
       background-color: var(--el-bg-color-overlay);
-      padding: 20px;
       margin-top: 20px;
       width: 100%;
+      padding: 20px;
 
       /* 图容器 */
       .echarts_wrap {
@@ -637,9 +637,6 @@ init()
         margin-top: 0;
       }
 
-      .el-form-item {
-        margin-bottom: 0;
-      }
     }
 
     /* 新增套表 */