feat(sampleListDialog): 重构布局，优化质检和工艺文件展示

src/views/produce/components/workPlan/components/sampleListDialog.vue

@@ -10,17 +10,22 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
   >
-    <div class="two-layout">
-      <el-row :gutter="10" class="full-row">
-        <el-col :span="12" class="full-col">
-          <div class="pane">
-            <div class="pane-title">质检</div>
-            <div class="table-wrapper">
-              <el-table
-                :data="tableData"
-                :default-expand-all="true"
-                height="calc(80vh - 120px)"
-              >
+    <ele-split-layout
+      class="two-layout"
+      width="70%"
+      :min-size="280"
+      :max-size="0.85"
+      space="6px"
+      :resizable="true"
+    >
+      <div class="pane">
+        <div class="pane-title">质检</div>
+        <div class="table-wrapper">
+          <el-table
+            :data="tableData"
+            :default-expand-all="true"
+            height="100%"
+          >
                 <el-table-column type="expand">
                   <template slot-scope="props">
                     <div style="padding: 10px">
@@ -231,18 +236,15 @@
                 </el-button>
               </div>
             </div>
-          </div>
-        </el-col>
+      </div>
+      <template #content>
+        <div class="pane">
+          <div class="pane-title">工艺文件</div>
 
-        <el-col :span="12" class="full-col">
-          <div class="pane">
-            <div class="pane-title">工艺文件</div>
-
-            <wokePopupList ref="wokePopupListRef"></wokePopupList>
-          </div>
-        </el-col>
-      </el-row>
-    </div>
+          <wokePopupList ref="wokePopupListRef"></wokePopupList>
+        </div>
+      </template>
+    </ele-split-layout>
 
     <!-- <el-table :data="tableData" :default-expand-all="true">
       <el-table-column type="expand">
@@ -780,18 +782,20 @@
 
   .two-layout {
     height: 80vh;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
   }
 
-  .full-row {
-    flex: 1;
-    height: 100%;
-    min-height: 0;
+  // ele-admin 默认 justify-content: flex-end 把 side 推到 wrap 右端，
+  // 改成 flex-start 让左侧 pane 靠左
+  ::v-deep .ele-split-panel-wrap {
+    justify-content: flex-start;
+    .ele-split-panel-side {
+      width: 100%;
+    }
   }
 
-  .full-col {
+  // 让两个 pane 撑满 ele-split-layout 的 side / body 容器
+  ::v-deep .ele-split-panel-side,
+  ::v-deep .ele-split-panel-body {
     height: 100%;
     min-height: 0;
   }
@@ -804,7 +808,9 @@
 
     display: flex;
     flex-direction: column;
+    min-width: 0;
     min-height: 0;
+    overflow: hidden;
   }
 
   /* 表格父级 */