新增 分配单据全选;最大高度及滚动

src/views/voyage/voyageDetail.vue

@@ -861,13 +861,23 @@
   </div> -->
   <div class="container-title df aic jcsb">
     <div>单据图片分配</div>
-    <el-button
-      style="width: 220px; margin-right: 20px"
-      type="primary"
-      @click="showDistributeModal"
-    >
-      分配单据
-    </el-button>
+    <div>
+      <el-checkbox
+        v-model="isCheckAll"
+        @change="checkAll"
+        :indeterminate="isIndeterminate"
+        size="large"
+        style="margin-right: 20px"
+        >全选</el-checkbox
+      >
+      <el-button
+        style="width: 220px; margin-right: 20px"
+        type="primary"
+        @click="showDistributeModal"
+      >
+        分配单据
+      </el-button>
+    </div>
   </div>
   <div class="line-container-p24">
     <div v-if="shipownerUploadFiles.length" class="df aic fww">
@@ -890,7 +900,11 @@
           {{ item.createTime }}
         </div>
         <div class="tac">
-          <el-checkbox v-model="item.checked" size="large"></el-checkbox>
+          <el-checkbox
+            @change="checkItem"
+            v-model="item.checked"
+            size="large"
+          ></el-checkbox>
         </div>
       </div>
     </div>
@@ -929,7 +943,7 @@
       > -->
     </div>
     <div class="hr m10-0"></div>
-    <div class="df aic fww">
+    <div class="df aic fww" style="max-height: 300px; overflow: scroll">
       <div
         style="
           width: 100px;
@@ -981,7 +995,7 @@
       <div class="tar">
         <el-button @click="ocr" type="primary">开始识别</el-button>
       </div>
-      <el-table :data="ocrTruckRecordTableData" stripe>
+      <el-table :data="ocrTruckRecordTableData" stripe max-height="500">
         <el-table-column label="港口名称" min-width="120" align="center">
           <template v-slot="scope">
             <el-input size="small" v-model="scope.row.portName"></el-input>
@@ -1974,6 +1988,26 @@ async function ocr() {
   console.log(recordIds.value);
   ocrTruckRecordTableData.value = res.data.result;
 }
+let isCheckAll = ref(false);
+let isIndeterminate = ref(false);
+function checkAll(b) {
+  isIndeterminate.value = false;
+  shipownerUploadFiles.value.forEach((e) => {
+    e.checked = b;
+  });
+}
+function checkItem() {
+  let arr = shipownerUploadFiles.value.filter((e) => e.checked);
+  if (arr.length == shipownerUploadFiles.value.length) {
+    isCheckAll.value = true;
+    isIndeterminate.value = false;
+  } else if (arr.length == 0) {
+    isCheckAll.value = false;
+    isIndeterminate.value = false;
+  } else {
+    isIndeterminate.value = true;
+  }
+}
 
 onMounted(() => {
   getVoyageDetail();