更新 报港

src/auth/menuData.js

@@ -22,7 +22,7 @@ let menuData = [
       {
         path: "/voyage/portDeclarationList",
         name: "报港",
-        code: "DECLARE",
+        code: "DECLARELIST",
       },
     ],
   },

src/router/index.js

@@ -149,7 +149,7 @@ const router = createRouter({
       name: "portDeclarationList",
       meta: {
         title: "报岗",
-        code: "DECLARE",
+        code: "DECLARELIST",
       },
       component: () => import("../views/voyage/portDeclarationList.vue"),
     },
@@ -157,8 +157,8 @@ const router = createRouter({
       path: "/voyage/portDeclarationDetail",
       name: "portDeclarationDetail",
       meta: {
-        title: "报岗",
-        code: "DEFAULT",
+        title: "申请报港",
+        code: "DECLAREDETAIL",
       },
       component: () => import("../views/voyage/portDeclarationDetail.vue"),
     },

src/views/voyage/portDeclarationDetail.vue

@@ -1,5 +1,100 @@
 <template>
-  <div class="full-container-p24">报港详情</div>
+  <div class="container-title df aic jcsb">
+    <div class="df aic">
+      <div class="mr30">船东信息</div>
+    </div>
+  </div>
+  <div class="line-container-p24">
+    <div class="df aic mb30">
+      <div class="df aic">
+        <div class="title">船东姓名</div>
+        <div class="text">{{ detail.userName }}</div>
+      </div>
+      <div class="df aic">
+        <div class="title">手机号</div>
+        <div class="text">{{ detail.phone }}</div>
+      </div>
+    </div>
+    <div class="df aic mb30">
+      <div class="df aic">
+        <div class="title">身份证号</div>
+        <div class="text">{{ detail.idcardNo }}</div>
+      </div>
+    </div>
+    <div class="df aic">
+      <div class="df aic">
+        <div class="title">身份证国徽面</div>
+        <div class="text">
+          <el-image
+            :preview-src-list="previewListIds"
+            fit="contain"
+            :src="detail.idcardBackViewUrl"
+          ></el-image>
+        </div>
+      </div>
+      <div class="df aic">
+        <div class="title">身份证头像面</div>
+        <div class="text">
+          <el-image
+            :preview-src-list="previewListIds"
+            fit="contain"
+            :src="detail.idcardFrontViewUrl"
+          ></el-image>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="container-title df aic jcsb">
+    <div class="df aic">
+      <div class="mr30">船舶信息</div>
+    </div>
+  </div>
+  <div class="line-container-p24">
+    <div class="df aic mb30">
+      <div class="df aic">
+        <div class="title">船舶名称</div>
+        <div class="text">{{ detail.shipname }}</div>
+      </div>
+      <div class="df aic">
+        <div class="title">MMSI</div>
+        <div class="text">{{ detail.mmsi }}</div>
+      </div>
+    </div>
+    <Certs ref="certs"></Certs>
+  </div>
+  <div class="container-title df aic jcsb">
+    <div class="df aic">
+      <div class="mr30">航次信息</div>
+    </div>
+  </div>
+  <div class="line-container-p24">
+    <div class="df aic mb30">
+      <div class="df aic">
+        <div class="title">航次名称</div>
+        <div class="text">{{ detail.voyageName }}</div>
+      </div>
+      <div class="df aic">
+        <div class="title">货种</div>
+        <div class="text">{{ detail.cargo }}</div>
+      </div>
+    </div>
+    <div class="df aic">
+      <div class="df aic">
+        <div class="title">货量</div>
+        <div class="text">
+          {{ detail.actualLoadTons + " 吨" }} /
+          {{ detail.actualLoadPieces + " 件" }}
+        </div>
+      </div>
+      <div class="df aic">
+        <div class="title">预计到港时间</div>
+        <div class="text">{{ detail.expectedArrivalTime }}</div>
+      </div>
+    </div>
+  </div>
+  <div class="df jcfe mt20 mr20">
+    <el-button @click="portReport" type="primary">申请报港</el-button>
+  </div>
 </template>
 <script setup>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
@@ -8,7 +103,63 @@ import store from "../../store";
 import router from "../../router";
 import md5 from "md5";
 import api from "../../apis/fetch";
-onMounted(() => {});
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+let detail = ref({});
+let certs = ref(null);
+let previewListIds = ref([]);
+
+async function getReportDetail() {
+  let res = await api.getReportDetail({
+    voyageId: route.query.id,
+  });
+  detail.value = res.data.result;
+  previewListIds.value = [
+    detail.value.idcardFrontViewUrl,
+    detail.value.idcardBackViewUrl,
+  ];
+  // certs.value.initCerts(detail.value.shipAudits);
+}
+async function portReport() {
+  let res = await api.portReport({
+    voyageId: route.query.id,
+  });
+  if (res.data.status == 0) {
+    ElMessage({
+      type: "success",
+      message: "报港成功!",
+    });
+    router.push("/voyage/portDeclarationList");
+  } else {
+    ElMessage({
+      type: "error",
+      message: "报港失败!",
+    });
+    console.log(res);
+  }
+}
+onMounted(() => {
+  getReportDetail();
+});
 </script>
 <style scoped>
+.title {
+  color: #555;
+  width: 100px;
+  text-align: right;
+  margin-right: 30px;
+  font-size: 14px;
+}
+
+.text {
+  width: 280px;
+}
+
+.el-image {
+  width: 240px;
+  height: 160px;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+}
 </style>

src/views/voyage/portDeclarationList.vue

@@ -15,7 +15,6 @@
         ></el-input>
         <div class="seach-btn" @click="getReportList(1)">查询</div>
       </div>
-      <el-button type="primary" @click="goToReport">申请报港</el-button>
     </div>
     <div style="margin-top: 24px">
       <el-table :data="tableData" stripe style="width: 100%">
@@ -68,7 +67,7 @@
               type="text"
               size="small"
             >
-              审核
+              申请报港
             </el-button>
           </template>
         </el-table-column>