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

- 添加 CrewInfo 组件，用于新增和编辑船员信息
- 在 shipDetail 页面中集成 CrewInfo 组件
- 实现船员信息表单的渲染和数据绑定
- 添加表单提交逻辑，支持新增和保存修改船员信息

src/components/CrewInfo.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <el-button type="primary" @click="dialogVisible = true">新增船员</el-button>
+    <el-dialog v-model="dialogVisible" title="船员信息">
+      <el-form
+        @submit.prevent="handleSubmit"
+        :model="crewInfo"
+        label-width="120px"
+      >
+        <el-form-item label="船名">
+          {{ shipInfos.shipname }}
+        </el-form-item>
+        <el-form-item label="船员姓名" prop="crewName">
+          <el-input v-model="crewInfo.crewName"></el-input>
+        </el-form-item>
+        <el-form-item label="船员性别" prop="crewGender">
+          <el-select v-model="crewInfo.crewGender" placeholder="请选择">
+            <el-option label="男" value="1"></el-option>
+            <el-option label="女" value="2"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="证书编号" prop="crewCertNo">
+          <el-input v-model="crewInfo.crewCertNo"></el-input>
+        </el-form-item>
+        <el-form-item label="证书类别" prop="crewCertType">
+          <el-input v-model="crewInfo.crewCertType"></el-input>
+        </el-form-item>
+        <el-form-item label="职务资格" prop="crewPost">
+          <el-input v-model="crewInfo.crewPost"></el-input>
+        </el-form-item>
+        <el-form-item label="签发日期" prop="crewCertSignDate">
+          <el-date-picker
+            v-model="crewInfo.crewCertSignDate"
+            type="date"
+            placeholder="选择日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="截止日期" prop="crewCertExpiryDate">
+          <el-date-picker
+            v-model="crewInfo.crewCertExpiryDate"
+            type="date"
+            placeholder="选择日期"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="签发机构" prop="crewCertIssuingAuthority">
+          <el-input v-model="crewInfo.crewCertIssuingAuthority"></el-input>
+        </el-form-item>
+        <el-form-item label="适用限制" prop="crewCertApplicableRestrictions">
+          <el-input
+            v-model="crewInfo.crewCertApplicableRestrictions"
+            type="textarea"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="船员证" prop="crewCertViewUrl"></el-form-item>
+        <el-form-item
+          label="健康检查表"
+          prop="crewExamRecViewUrl"
+        ></el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSubmit">
+            {{ isEdit ? "保存修改" : "新增船员" }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  shipInfos: {
+    type: Object,
+    default: {},
+  },
+});
+const dialogVisible = ref(false);
+const isEdit = ref(false);
+const crewInfo = ref({
+  shipCode: "",
+  crewName: "",
+  crewGender: "",
+  crewCertNo: "",
+  crewCertType: "",
+  crewPost: "",
+  crewCertSignDate: "",
+  crewCertExpiryDate: "",
+  crewCertIssuingAuthority: "",
+  crewCertApplicableRestrictions: "",
+  crewCertFileKey: "",
+  crewCertViewUrl: "",
+  crewCertDownloadUrl: "",
+  crewExamRecFileKey: "",
+  crewExamRecViewUrl: "",
+  crewExamRecDownloadUrl: "",
+});
+
+const handleSubmit = () => {
+  if (isEdit.value) {
+    // Handle update logic
+    console.log("Updating crew info:", crewInfo.value);
+  } else {
+    // Handle add logic
+    console.log("Adding new crew:", crewInfo.value);
+  }
+};
+</script>
+
+<style scoped>
+.el-form {
+  max-width: 600px;
+  margin: 0 auto;
+}
+.el-form-item {
+  margin-bottom: 20px;
+}
+</style>

src/main.js

@@ -11,6 +11,7 @@ import IdUploader from "./components/IdUploader.vue";
 import ShipInfo from "./components/ShipInfo.vue";
 import RemoteSearch from "./components/RemoteSearch.vue";
 import RemoteSelect from "./components/RemoteSelect.vue";
+import CrewInfo from "./components/CrewInfo.vue";
 import zhCn from "element-plus/dist/locale/zh-cn.mjs";
 import Layout from "./layout/Layout.vue";
 import { createPinia } from "pinia";
@@ -26,6 +27,7 @@ app.component("Uploader", Uploader);
 app.component("IdUploader", IdUploader);
 app.component("RemoteSearch", RemoteSearch);
 app.component("RemoteSelect", RemoteSelect);
+app.component("CrewInfo", CrewInfo);
 import * as ElementPlusIconsVue from "@element-plus/icons-vue";
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);

src/views/shipManage/shipDetail.vue

@@ -10,9 +10,10 @@
   </div>
   <div id="map-container" class="map-container"></div>
   <ShipInfo :shipInfos="shipInfos"></ShipInfo>
-  <div class="df aic jcsb">
+  <div class="df aic jcsb" v-if="shipInfos.length">
     <div class="container-title">船员信息</div>
     <el-button type="primary" @click="goToCrewDetail()">新增船员</el-button>
+    <CrewInfo :shipInfos="shipInfos[0]"></CrewInfo>
   </div>
   <el-table border :data="crewList" stripe style="width: 1000px">
     <el-table-column align="center" type="index" label="序号" width="80" />