feat(crewManage): 新增船员管理功能

- 新增船员相关 API 接口
- 实现船员列表展示和分页功能
- 添加船员详情页面
- 修改证书管理页面，支持船员证书展示
- 优化船舶详情页面布局

.env.dev

@@ -1,2 +1,2 @@
 VITE_PROJECT_ENV = 'dev'
-VITE_BASEURL = 'https://interface.huihenduo.com.cn/hhd-shipping-dev/'
+VITE_BASEURL = 'https://interface.huihenduo.cc/hhd-shipping/'

src/apis/fetch.js

@@ -222,4 +222,34 @@ export default {
   saveFireSafetyCheckUser(data) {
     return $http("/fire/inspection/save/security/account", data);
   },
+
+  // 新增船员
+  addCrew(data) {
+    return $http("/ship/crew/add", data);
+  },
+
+  // 删除船员
+  deleteCrew(data) {
+    return $http("/ship/crew/delete", data);
+  },
+
+  // 获取船员列表
+  getCrewList(data) {
+    return $http("/ship/crew/list", data);
+  },
+
+  // 获取船员详情
+  getCrewDetail(data) {
+    return $http("/ship/crew/detail", data);
+  },
+
+  // 更新船员
+  updateCrew(data) {
+    return $http("/ship/crew/update", data);
+  },
+
+  // 上传船员文件
+  uploadCrewFile(data) {
+    return $http("/ship/crew/uploadCert", data);
+  },
 };

src/components/ShipInfo.vue

@@ -234,7 +234,9 @@
           船舶保险
         </div>
         <div class="df aic pl40 pb20">
-          <div class="c6 fs16 mr30">{{ item.typeName }}</div>
+          <div class="c6 fs16 mr30">
+            {{ item.typeName }}
+          </div>
         </div>
         <div class="ml50 mb20 c7 fs14" v-if="item.type != 0">
           <div
@@ -242,7 +244,7 @@
             v-for="(item1, index1) in item.certValids"
             :key="item.id"
           >
-            <div class="mr10">{{ item1.typeName }}</div>
+            <div class="mr10" style="width: 140px">{{ item1.typeName }}</div>
             <el-date-picker
               style="width: 140px; font-size: 13px"
               v-model="item1.startValidTime"

src/router/index.js

@@ -68,7 +68,15 @@ const router = createRouter({
       component: () => import("../views/shipOwnerManage/shipOwnerList.vue"),
     },
     {
-      path: "//workStation/certsManage",
+      path: "/crewManage/crewDetail",
+      name: "crewDetail",
+      meta: {
+        title: "船员详情",
+      },
+      component: () => import("../views/crewManage/crewDetail.vue"),
+    },
+    {
+      path: "/workStation/certsManage",
       name: "certsManage",
       meta: {
         title: "证书管理",

src/views/crewManage/crewDetail.vue

@@ -0,0 +1,28 @@
+<template>1</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import { useRoute } from "vue-router";
+import api from "../../apis/fetch";
+const route = useRoute();
+const crewInfo = ref({});
+
+async function getCrewDetail() {
+  let { data } = await api.getCrewDetail({
+    shipCode: route.query.shipCode,
+    shipCrewId: route.query.shipCrewId,
+  });
+  if (data.status === 0) {
+    crewInfo.value = data.result;
+  } else {
+    crewInfo.value = {};
+    ElMessage({
+      message: data.msg,
+      type: "error",
+    });
+  }
+}
+onMounted(() => {
+  if (route.query.shipCrewId) getCrewDetail();
+});
+</script>
+<style scoped></style>

src/views/shipManage/shipDetail.vue

@@ -10,6 +10,45 @@
   </div>
   <div id="map-container" class="map-container"></div>
   <ShipInfo :shipInfos="shipInfos"></ShipInfo>
+  <div class="df aic jcsb">
+    <div class="container-title">船员信息</div>
+    <el-button type="primary" @click="goToCrewDetail()">新增船员</el-button>
+  </div>
+  <el-table border :data="crewList" stripe style="width: 1000px">
+    <el-table-column align="center" type="index" label="序号" width="80" />
+    <el-table-column
+      align="center"
+      prop="crewName"
+      label="船员姓名"
+      min-width="120"
+    />
+    <el-table-column
+      align="center"
+      prop="crewCertExpiryDate"
+      label="有效期"
+      min-width="120"
+    >
+      <template v-slot="scope">
+        {{ subTimeStr(scope.row.crewCertExpiryDate) }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="详情" min-width="120">
+      <template #default="scope">
+        <el-button type="primary" text @click="goToCrewDetail(scope.row)">
+          详情
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+  <div class="df aic jcfe mt40 mr20">
+    <el-pagination
+      :current-page="crewCurrentPage"
+      @current-change="crewPageChange"
+      background
+      layout="prev, pager, next"
+      :total="crewTotal"
+    />
+  </div>
   <div class="container-title">船舶图片</div>
   <div v-if="medias.length" class="medias-content df ffw">
     <div class="pic-container">
@@ -74,6 +113,8 @@ import md5 from "md5";
 import api from "../../apis/fetch";
 import { useRoute } from "vue-router";
 import _ from "lodash";
+import { subTimeStr } from "../../utils/utils";
+
 const route = useRoute();
 let shipInfos = ref([{}]);
 let medias = ref([]);
@@ -95,7 +136,40 @@ async function getShipDetail(shipCode) {
   shipCoors.value = data.result.shipCoors;
   shipInfos.value = [data.result];
   initMap();
+  getCrewList();
 }
+let crewCurrentPage = ref(1);
+let crewTotal = ref(0);
+let crewList = ref([]);
+async function getCrewList() {
+  let { data } = await api.getCrewList({
+    shipCode: route.query.shipCode,
+    currentPage: crewCurrentPage.value,
+    size: 10,
+  });
+  if (data.status === 0) {
+    crewList.value = data.result;
+    crewTotal.value = data.total;
+  } else {
+    crewList.value = [];
+    crewTotal.value = 0;
+  }
+}
+function crewPageChange(e) {
+  crewCurrentPage.value = e;
+  getCrewList();
+}
+
+function goToCrewDetail(item) {
+  router.push({
+    path: "/crewManage/crewDetail",
+    query: {
+      shipCode: route.query.shipCode,
+      shipCrewId: item ? item.id : "",
+    },
+  });
+}
+
 let currentUrl = ref("");
 let mediaModal = ref(false);
 let modalType = ref(1);

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -233,29 +233,36 @@ async function getShipOwnerDetail(shipOwnerId) {
   let { data } = await api.getShipOwnerDetail({
     shipOwnerId,
   });
-  data.result.shipOwnerId = data.result.id;
-  shipOwnerDetail.value = data.result;
-  idFrontList.value = data.result.idcardFrontViewUrl
-    ? [
-        {
-          url: data.result.idcardFrontViewUrl,
-        },
-      ]
-    : [];
-  idBackList.value = data.result.idcardBackViewUrl
-    ? [
-        {
-          url: data.result.idcardBackViewUrl,
-        },
-      ]
-    : [];
-  for (let i of shipOwnerDetail.value.shipInfo) {
-    i.disabled = true;
-    for (let j of i.shipCerts) {
-      for (let k of j.certs) {
-        k.url = k.viewUrl;
+  if (data.status === 0) {
+    data.result.shipOwnerId = data.result.id;
+    shipOwnerDetail.value = data.result;
+    idFrontList.value = data.result.idcardFrontViewUrl
+      ? [
+          {
+            url: data.result.idcardFrontViewUrl,
+          },
+        ]
+      : [];
+    idBackList.value = data.result.idcardBackViewUrl
+      ? [
+          {
+            url: data.result.idcardBackViewUrl,
+          },
+        ]
+      : [];
+    for (let i of shipOwnerDetail.value.shipInfo) {
+      i.disabled = true;
+      for (let j of i.shipCerts) {
+        for (let k of j.certs) {
+          k.url = k.viewUrl;
+        }
       }
     }
+  } else {
+    ElNotification.error({
+      title: data.msg,
+      duration: 1500,
+    });
   }
 }
 async function addShip() {

src/views/workStation/certsManage.vue

@@ -70,12 +70,21 @@
             min-width="120"
           />
           <el-table-column
+            v-if="certType == 6"
+            align="center"
+            prop="crewName"
+            label="船员姓名"
+            min-width="120"
+          />
+          <el-table-column
+            v-if="certType != 6"
             align="center"
             prop="shipOwnerName"
             label="船东姓名"
             min-width="120"
           />
           <el-table-column
+            v-if="certType != 6"
             align="center"
             prop="shipOwnerPhone"
             label="手机号"
@@ -96,7 +105,13 @@
               <el-button
                 type="primary"
                 text
-                @click="goToDetail(scope.row.shipCode)"
+                @click="
+                  goToDetail(
+                    scope.row.shipCode,
+                    scope.row.crewName,
+                    scope.row.id
+                  )
+                "
               >
                 详情
               </el-button>
@@ -154,13 +169,23 @@ function pageChange(e) {
   currentPage.value = e;
   getCertList();
 }
-function goToDetail(shipCode) {
-  router.push({
-    path: "/shipManage/shipDetail",
-    query: {
-      shipCode,
-    },
-  });
+function goToDetail(shipCode, crewName, shipCrewId) {
+  if (certType.value === 6 && crewName) {
+    router.push({
+      path: "/crewManage/crewDetail",
+      query: {
+        shipCode,
+        shipCrewId,
+      },
+    });
+  } else {
+    router.push({
+      path: "/shipManage/shipDetail",
+      query: {
+        shipCode,
+      },
+    });
+  }
 }
 let certTypes = ref([
   {