新增 单据图片分配:运单分配

src/App.vue

@@ -216,6 +216,21 @@ export default {
 .hr {
   border-bottom: 2px solid #3b91fa;
   opacity: 0.2;
+}
+
+.m10-0 {
+  margin: 10px 0;
+}
+
+.m30-0 {
   margin: 30px 0;
 }
+
+.fww {
+  flex-wrap: wrap;
+}
+
+.tar {
+  text-align: right;
+}
 </style>

src/apis/fetch.js

@@ -184,4 +184,14 @@ export default {
   updateTruckLoadRecord(data) {
     return $http("post", "/voyage/updateCarLoadRecord", data);
   },
+
+  // 分配单据
+  distribute(data) {
+    return $http("post", "/shipownerUploadFile/distribute", data);
+  },
+
+  // ocr识别
+  ocr(data) {
+    return $http("post", "/shipownerUploadFile/ocr", data);
+  },
 };

src/views/voyage/voyageDetail.vue

@@ -335,7 +335,7 @@
         完成航次
       </el-button>
     </div>
-    <div class="hr"></div>
+    <div class="hr m30-0"></div>
     <div class="container-second-title df aic jcsb">
       <div>卸货记录</div>
       <div>
@@ -510,6 +510,7 @@
         @current-change="pageChange"
       ></el-pagination>
     </div>
+    <div class="hr m30-0"></div>
     <div class="container-second-title df aic jcsb mt40">
       <div>汽车装货记录详情</div>
       <div>
@@ -844,6 +845,192 @@
   <div class="line-container-p24">
     <Certs ref="certs"></Certs>
   </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>
+  <div class="line-container-p24">
+    <div class="df aic fww">
+      <div
+        style="
+          width: 100px;
+          text-align: center;
+          margin-right: 20px;
+          margin-bottom: 20px;
+        "
+        v-for="item in shipownerUploadFiles"
+      >
+        <el-image
+          style="height: 100px; width: 100px"
+          fit="contain"
+          :src="item.viewUrl"
+          :preview-src-list="previewList"
+        ></el-image>
+        <div style="width: 100px; text-align: center; font-size: 12px">
+          {{ item.createTime }}
+        </div>
+        <div class="tac">
+          <el-checkbox v-model="item.checked" size="large"></el-checkbox>
+        </div>
+      </div>
+    </div>
+  </div>
+  <el-dialog
+    title="单据分配"
+    v-model="isDistributeModalVisable"
+    @close="distributeModalClose"
+  >
+    <div>
+      <el-radio v-model="distributeType" label="1" size="large">运单</el-radio>
+      <el-radio v-model="distributeType" label="2" size="large">磅单</el-radio>
+      <el-radio v-model="distributeType" label="4" size="large"
+        >汽运装货单</el-radio
+      >
+    </div>
+    <div class="hr m10-0"></div>
+    <div class="df aic fww">
+      <div
+        style="
+          width: 100px;
+          text-align: center;
+          margin-right: 20px;
+          margin-bottom: 10px;
+          border: 2px solid #7598b1;
+        "
+        v-for="item in checkedImages"
+      >
+        <el-image
+          style="height: 100px; width: 100px"
+          fit="contain"
+          :src="item.viewUrl"
+          :preview-src-list="checkedPreviewList"
+        ></el-image>
+      </div>
+    </div>
+    <div class="hr m10-0"></div>
+    <div v-if="distributeType == 2">
+      <el-form inline :model="distributePoundForm">
+        <el-form-item label="卸货时间">
+          <el-date-picker
+            class="info-line-text"
+            v-model="distributePoundForm.dischargeTime"
+            type="datetime"
+            format="YYYY/MM/DD HH:mm:ss"
+            value-format="YYYY/MM/DD HH:mm:ss"
+            placeholder="卸货时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="卸货吨位">
+          <el-input
+            class="info-line-text"
+            v-model="distributePoundForm.dischargeTons"
+            placeholder="卸货吨位"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="卸货件数">
+          <el-input
+            class="info-line-text"
+            v-model="distributePoundForm.dischargePieces"
+            placeholder="卸货件数"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div v-if="distributeType == 4">
+      <div class="tar">
+        <el-button @click="ocr" type="primary">开始识别</el-button>
+        <el-button @click="ocrTruckRecordTableData.push({})" type="primary"
+          >新增条目</el-button
+        >
+      </div>
+      <el-table :data="ocrTruckRecordTableData" stripe>
+        <el-table-column label="港口名称" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.portName"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="称重时间" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-date-picker
+              style="width: 80px"
+              size="small"
+              class="info-line-text"
+              v-model="scope.row.weighTime"
+              type="datetime"
+              format="YYYY/MM/DD HH:mm:ss"
+              value-format="YYYY/MM/DD HH:mm:ss"
+              placeholder="称重时间"
+            ></el-date-picker>
+          </template>
+        </el-table-column>
+        <el-table-column label="车号" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.carNum"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="货物名称" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.cargoName"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="发货单位" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.shippingUnit"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="收货单位" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.receivingUnit"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="毛重" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.grossWeight"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="皮重" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.tare"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="净重" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.netWeight"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="货船名称" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.shipName"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="司磅员" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-input size="small" v-model="scope.row.weigher"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="80" align="center">
+          <template v-slot="scope">
+            <el-button
+              size="small"
+              @click="deleteOcrRecord(scope.$index)"
+              type="danger"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="hr m10-0"></div>
+    <div class="tar">
+      <el-button @click="submitDistribute" type="primary">确定</el-button>
+    </div>
+  </el-dialog>
   <div class="container-title">航次图片</div>
   <div class="line-container-p24">
     <div v-if="medias.length" class="medias-content df ffw">
@@ -967,7 +1154,13 @@ let medias = ref([]);
 let coordinates = ref([]);
 let previewSrcList = ref([]);
 let shipAudits = ref([]);
+let shipownerUploadFiles = ref([]);
 async function getVoyageDetail() {
+  previewList.value = [];
+  policyFileList.value = [];
+  voyageBill.value = [];
+  previewSrcList.value = [];
+  shipownerUploadFiles.value = [];
   let res = await api.getVoyageDetail({
     type: localStorage.userType,
     voyageId: route.query.id,
@@ -982,6 +1175,10 @@ async function getVoyageDetail() {
     voyage.value = res.data.result.voyage;
     medias.value = res.data.result.medias;
     shipAudits.value = res.data.result.shipAudits;
+    shipownerUploadFiles.value = res.data.result.shipownerUploadFiles;
+    for (let i of shipownerUploadFiles.value || []) {
+      previewList.value.push(i.viewUrl);
+    }
     for (let i of res.data.result.policys || []) {
       policyFileList.value.push({
         ...i,
@@ -1668,6 +1865,73 @@ async function deleteTruckRecord(id, index) {
     });
 }
 
+let isDistributeModalVisable = ref(false);
+let previewList = ref([]);
+let checkedImages = ref([]);
+let distributeType = ref(-1);
+let checkedPreviewList = ref([]);
+let recordIds = ref("");
+let ocrTruckRecordTableData = ref([{}]);
+function showDistributeModal() {
+  checkedImages.value = shipownerUploadFiles.value.filter((e) => e.checked);
+
+  if (!checkedImages.value.length) {
+    ElMessage({
+      type: "error",
+      message: "请选择要分配的图片!",
+    });
+    return;
+  }
+  let arr0 = [];
+  for (let i of checkedImages.value) {
+    checkedPreviewList.value.push(i.viewUrl);
+    arr0.push(i.id);
+  }
+  recordIds.value = arr0.join(",");
+  isDistributeModalVisable.value = true;
+}
+
+function distributeModalClose() {
+  isDistributeModalVisable.value = false;
+  distributeType.value = -1;
+  distributePoundForm.value = {};
+  ocrTruckRecordTableData.value = {};
+}
+
+async function submitDistribute() {
+  if (distributeType.value == -1) {
+    ElMessage({
+      type: "error",
+      message: "请选择要分配类型!",
+    });
+    return;
+  }
+  console.log(ocrTruckRecordTableData.value);
+  let postData = {};
+  let res = await api.distribute({
+    ...postData,
+    voyageId: route.query.id,
+    recordIds: recordIds.value,
+    type: distributeType.value,
+  });
+  console.log(res);
+  distributeModalClose();
+  getVoyageDetail();
+}
+
+async function deleteOcrRecord(index) {
+  console.log(index);
+  ocrTruckRecordTableData.value.splice(index, 1);
+}
+
+let distributePoundForm = ref({});
+async function ocr() {
+  let res = await api.ocr({
+    recordIds: recordIds.value,
+  });
+  console.log(recordIds.value);
+}
+
 onMounted(() => {
   getVoyageDetail();
   getDischargeList();

src/views/voyage/voyageList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="full-container-p24">
+  <div class="line-container-p24">
     <div style="display: flex; justify-content: space-between">
       <div class="df aic">
         <div