style(prd_tag): 商品标签页面_样式修复_新增

src/assets/styles/element-ui.scss

@@ -47,11 +47,31 @@
 }
 
 // to fixed https://github.com/ElemeFE/element/issues/2461
-.el-dialog {
-  transform: none;
-  left: 0;
-  position: relative;
-  margin: 0 auto;
+// 重写 dialog 样式，默认居中显示
+.el-overlay-dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .el-dialog {
+    transform: none;
+    position: relative;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    height: 50vh;
+    .el-dialog__header{
+      height: 40px;
+    }
+
+    .el-dialog__body {
+      height: calc(50vh - 40px - 32px);
+    }
+  }
+
+  .el-dialog:not(.is-fullscreen) {
+    margin-top: 0 !important;
+  }
 }
 
 // refine element ui upload
@@ -106,9 +126,10 @@
   // background-color: red !important;
 }
 
-.el-pagination{
+.el-pagination {
   font-size: var(--xl-fontsize) !important;
-  .number{
+
+  .number {
     font-size: var(--xl-fontsize) !important;
   }
 }
\ No newline at end of file

src/components/CommonMenu/index.vue

@@ -128,14 +128,9 @@ const rightChange = (val) => {
     display: flex;
     justify-content: center;
 
-    /* 隐藏头部列表数量统计 */
-    .el-transfer-panel__header {
-      display: none;
-    }
-
     .el-transfer {
       display: flex;
-      align-items: center;
+      height: 100%;
       gap: 50px;
       width: 100%;
 
@@ -146,15 +141,18 @@ const rightChange = (val) => {
 
       .el-transfer-panel {
         flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        /* 隐藏头部列表数量统计 */
+        .el-transfer-panel__header {
+          display: none;
+        }
 
         .el-transfer-panel__body {
-          height: 500px;
           display: flex;
           flex-direction: column;
-
-          .el-transfer-panel__list {
-            flex: 1;
-          }
+          flex: 1;
         }
       }
 

src/views/bi/prd_tag/index.vue

 <template>
   <div class="app-container">
-    <el-row :gutter="20" class="client-fix-height">
+    <el-row :gutter="20"
+      class="client-fix-height">
       <!--商品分类-->
       <category-tree :options="tagsOptions"
         :defaultProps="defaultProps"
@@ -36,50 +37,48 @@
           <el-table-column label="商品编码"
             prop="prdCode" />
           <el-table-column label="商品名称"
-          width="300"
+            width="300"
             prop="prdName" />
           <el-table-column label="系列名称"
             prop="series" />
         </el-table>
-        <!-- 添加或修改商品-标签详情对话框 -->
-        <el-dialog :title="title"
-          v-model="open"
-          append-to-body>
-          <el-form ref="formRef"
-            :model="form"
-            :rules="rules"
-            label-width="120px">
-            <el-form-item label="标签名称"
-              prop="prdTagName">
-              <el-input v-model="form.prdTagName"
-                placeholder="请输入标签名称" />
-            </el-form-item>
-            <el-form-item label="系列和商品"
-              prop="seriesPrdMap">
-              <el-cascader v-model="form.seriesPrdMap"
-                v-if="open"
-                :options="seriesPrdOptions"
-                :props="props"
-                collapse-tags
-                clearable
-                filterable
-                popper-class="my_popper"></el-cascader>
-            </el-form-item>
-          </el-form>
-          <div slot="footer"
-            class="dialog-footer">
-            <el-button type="primary"
-              @click="submitForm">确 定</el-button>
-            <el-button @click="cancel">取 消</el-button>
-          </div>
-        </el-dialog>
       </el-col>
     </el-row>
+    <!-- 添加或修改商品-标签详情对话框 -->
+    <el-dialog :title="title"
+      v-model="open">
+      <el-form ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="120px">
+        <el-form-item label="标签名称"
+          prop="prdTagName">
+          <el-input v-model="form.prdTagName"
+            placeholder="请输入标签名称" />
+        </el-form-item>
+        <el-form-item label="系列和商品"
+          prop="seriesPrdMap">
+          <el-cascader v-model="form.seriesPrdMap"
+            v-if="open"
+            :options="seriesPrdOptions"
+            :props="props"
+            collapse-tags
+            clearable
+            filterable
+            popper-class="my_popper"></el-cascader>
+        </el-form-item>
+      </el-form>
+      <div slot="footer"
+        class="dialog-footer">
+        <el-button type="primary"
+          @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-// import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/gen/info";
 import { getSeriesListAPI, getProductListAPI, createSeriesGoodsTagAPI, getSeriesGoodsTagListAPI, getPrdTagDetailAPI, deleteSeriesGoodsTagAPI } from '@/api';
 
 const { proxy } = getCurrentInstance();
@@ -301,36 +300,52 @@ getSeriesGoodsTagList()
   .app-container {
     .el-row {
       background-color: var(--el-bg-color-overlay);
+
+      .right_col {
+        flex: 1 !important;
+        transition: all .5s;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .el-form-item {
+          margin-bottom: 0;
+        }
+
+        .pagination {
+          /* 没办法设置某个子元素单独在主轴排列方式，使用此方式可以 */
+          margin-top: auto;
+        }
+
+        &.el-col-10 {
+          width: 41.666666%;
+          max-width: none;
+        }
+
+      }
     }
 
-    .right_col {
-      flex: 1 !important;
-      transition: all .5s;
+    ::v-deep(.el-dialog) {
       display: flex;
       flex-direction: column;
-      height: 100%;
 
-      .el-form-item {
-        margin-bottom: 0;
-      }
+      .el-dialog__body {
+        display: flex;
+        flex-direction: column;
 
-      .pagination {
-        /* 没办法设置某个子元素单独在主轴排列方式，使用此方式可以 */
-        margin-top: auto;
-      }
+        .el-form {
+          flex: 1;
 
-      &.el-col-10 {
-        width: 41.666666%;
-        max-width: none;
+          .el-cascader {
+            width: 100%;
+          }
+        }
       }
 
+      .dialog-footer {
+        align-self: flex-end;
+      }
     }
+
   }
 </style>
-<style lang="scss">
-.my_popper {
-  .el-scrollbar__wrap {
-    height: 400px !important;
-  }
-}
-</style>