feat(shipManage): 新增船员信息管理和编辑功能

- 新增船员信息对话框，支持新增和编辑船员信息
- 集成上传船员证书和健康检查表功能
- 优化船员信息列表展示，增加编辑和删除操作
- 重构 CrewInfo 组件，支持表单验证和数据绑定

src/apis/config.js

@@ -19,6 +19,7 @@ export const $http = function (url, data) {
     data: {
       ...data,
       loginAccountId: localStorage.loginAccountId,
+      shippingId: localStorage.shippingId,
     },
     withCredentials: true,
   });

src/components/CrewInfo.vue

@@ -1,66 +1,106 @@
 <template>
   <div>
-    <el-button type="primary" @click="dialogVisible = true">新增船员</el-button>
-    <el-dialog v-model="dialogVisible" title="船员信息">
+    <el-button type="primary" @click="handleClick">
+      {{ crewId ? "修改船员" : "新增船员" }}
+    </el-button>
+    <el-dialog
+      v-model="dialogVisible"
+      title="船员信息"
+      width="600"
+      append-to-body
+    >
       <el-form
+        ref="crewFormRef"
+        :rules="crewRules"
         @submit.prevent="handleSubmit"
-        :model="crewInfo"
-        label-width="120px"
+        :model="crewForm"
+        label-width="150px"
       >
         <el-form-item label="船名">
-          {{ shipInfos.shipname }}
+          <span>{{ shipname }}</span>
         </el-form-item>
         <el-form-item label="船员姓名" prop="crewName">
-          <el-input v-model="crewInfo.crewName"></el-input>
+          <el-input class="w200" v-model="crewForm.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
+            class="w200"
+            v-model="crewForm.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-input class="w200" v-model="crewForm.crewCertNo"></el-input>
         </el-form-item>
         <el-form-item label="证书类别" prop="crewCertType">
-          <el-input v-model="crewInfo.crewCertType"></el-input>
+          <el-input class="w200" v-model="crewForm.crewCertType"></el-input>
         </el-form-item>
         <el-form-item label="职务资格" prop="crewPost">
-          <el-input v-model="crewInfo.crewPost"></el-input>
+          <el-input class="w200" v-model="crewForm.crewPost"></el-input>
         </el-form-item>
         <el-form-item label="签发日期" prop="crewCertSignDate">
           <el-date-picker
-            v-model="crewInfo.crewCertSignDate"
+            class="w200"
+            v-model="crewForm.crewCertSignDate"
             type="date"
             placeholder="选择日期"
+            value-format="YYYY/MM/DD HH:mm:ss"
+            format="YYYY/MM/DD HH:mm:ss"
           ></el-date-picker>
         </el-form-item>
         <el-form-item label="截止日期" prop="crewCertExpiryDate">
           <el-date-picker
-            v-model="crewInfo.crewCertExpiryDate"
+            class="w200"
+            v-model="crewForm.crewCertExpiryDate"
             type="date"
             placeholder="选择日期"
+            value-format="YYYY/MM/DD HH:mm:ss"
+            format="YYYY/MM/DD HH:mm:ss"
           ></el-date-picker>
         </el-form-item>
         <el-form-item label="签发机构" prop="crewCertIssuingAuthority">
-          <el-input v-model="crewInfo.crewCertIssuingAuthority"></el-input>
+          <el-input
+            class="w200"
+            v-model="crewForm.crewCertIssuingAuthority"
+          ></el-input>
         </el-form-item>
         <el-form-item label="适用限制" prop="crewCertApplicableRestrictions">
           <el-input
-            v-model="crewInfo.crewCertApplicableRestrictions"
+            class="w200"
+            v-model="crewForm.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-form-item label="船员证" prop="crewCertViewUrl">
+          <el-upload
+            :limit="1"
+            :action="store.state.baseurl + '/ship/crew/uploadCert'"
+            :show-file-list="false"
+            :data="{ loginAccountId, type: 1 }"
+            :on-success="uploadCertSuccess"
+          >
+            <el-button>上传船员证书</el-button>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="健康检查表" prop="crewExamRecViewUrl">
+          <el-upload
+            :limit="1"
+            :action="store.state.baseurl + '/ship/crew/uploadCert'"
+            :show-file-list="false"
+            :data="{ loginAccountId, type: 2 }"
+            :on-success="uploadFileSuccess"
+          >
+            <el-button>上传船员体检表</el-button>
+          </el-upload>
+        </el-form-item>
+        <div class="df aic jcfe">
           <el-button type="primary" @click="handleSubmit">
-            {{ isEdit ? "保存修改" : "新增船员" }}
+            {{ crewForm.id ? "保存修改" : "新增船员" }}
           </el-button>
-        </el-form-item>
+        </div>
       </el-form>
     </el-dialog>
   </div>
@@ -68,16 +108,58 @@
 
 <script setup>
 import { ref } from "vue";
+import store from "@/store";
+import api from "../apis/fetch";
 const props = defineProps({
-  shipInfos: {
+  crewId: {
+    type: String,
+    default: "",
+  },
+  shipCode: {
+    type: String,
+    default: "",
+  },
+  shipname: {
+    type: String,
+    default: "",
+  },
+  crewInfo: {
     type: Object,
-    default: {},
+    default: () => ({}),
   },
 });
+const emit = defineEmits(["onSubmit"]);
 const dialogVisible = ref(false);
-const isEdit = ref(false);
-const crewInfo = ref({
-  shipCode: "",
+const crewFormRef = ref(null);
+const loginAccountId = localStorage.loginAccountId;
+const crewRules = ref({
+  crewName: [{ required: true, message: "请输入船员姓名", trigger: "blur" }],
+  crewGender: [{ required: true, message: "请选择性别", trigger: "change" }],
+  crewCertNo: [{ required: true, message: "请输入证书编号", trigger: "blur" }],
+  crewCertType: [
+    { required: false, message: "请输入证书类别", trigger: "blur" },
+  ],
+  crewPost: [{ required: false, message: "请输入职务资格", trigger: "blur" }],
+  crewCertSignDate: [
+    { required: true, message: "请选择签发日期", trigger: "change" },
+  ],
+  crewCertExpiryDate: [
+    { required: true, message: "请选择截止日期", trigger: "change" },
+  ],
+  crewCertIssuingAuthority: [
+    { required: true, message: "请输入签发机构", trigger: "blur" },
+  ],
+  crewCertApplicableRestrictions: [
+    { required: false, message: "请输入适用限制", trigger: "blur" },
+  ],
+  crewCertViewUrl: [
+    { required: true, message: "请上传船员证", trigger: "blur" },
+  ],
+  crewExamRecViewUrl: [
+    { required: false, message: "请上传健康检查表", trigger: "blur" },
+  ],
+});
+const crewForm = ref({
   crewName: "",
   crewGender: "",
   crewCertNo: "",
@@ -95,14 +177,56 @@ const crewInfo = ref({
   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);
+const crewCertFileList = ref([]);
+const crewExamRecFileList = ref([]);
+
+function uploadCertSuccess(e) {
+  if (e.status === 0) {
+    crewForm.value.crewCertFileKey = e.result.key;
+    crewForm.value.crewCertViewUrl = e.result.viewUrl;
+    crewForm.value.crewCertDownloadUrl = e.result.downloadUrl;
   }
+}
+
+function uploadFileSuccess(e) {
+  if (e.status === 0) {
+    crewForm.value.crewExamRecFileKey = e.result.key;
+    crewForm.value.crewExamRecViewUrl = e.result.viewUrl;
+    crewForm.value.crewExamRecDownloadUrl = e.result.downloadUrl;
+  }
+}
+
+function handleClick() {
+  dialogVisible.value = true;
+  if (props.crewId) {
+    crewForm.value = props.crewInfo;
+  }
+}
+
+const handleSubmit = () => {
+  crewFormRef.value.validate(async (valid) => {
+    console.log(" submit!!", crewForm.value);
+    if (valid) {
+      let { data } = await api[crewForm.value.id ? "updateCrew" : "addCrew"]({
+        ...crewForm.value,
+        shipCode: props.shipCode,
+        shipCrewId: props.crewId,
+      });
+      if (data.status === 0) {
+        emit("onSubmit");
+        dialogVisible.value = false;
+      } else {
+        ElNotification.error({
+          title: "失败",
+          duration: 2000,
+          message: data.msg,
+        });
+      }
+    } else {
+      console.log("error submit!!", crewForm.value);
+      return false;
+    }
+  });
 };
 </script>
 
@@ -114,4 +238,16 @@ const handleSubmit = () => {
 .el-form-item {
   margin-bottom: 20px;
 }
+
+.upload-plus-icon {
+  height: 15%;
+  color: rgb(139, 147, 156);
+  line-height: 100px;
+  font-size: 40px;
+  font-weight: 200;
+}
+.upload-text {
+  height: 25%;
+  color: rgb(139, 147, 156);
+}
 </style>

src/styles/index.css

@@ -4,7 +4,7 @@
 @import "./color.css";
 @import "./background.css";
 
-*{
+* {
   box-sizing: border-box;
 }
 
@@ -52,6 +52,10 @@
   align-items: baseline;
 }
 
-.pointer{
+.pointer {
   cursor: pointer;
-}
+}
+
+.w200 {
+  width: 200px !important;
+}

src/views/shipManage/shipDetail.vue

@@ -10,10 +10,13 @@
   </div>
   <div id="map-container" class="map-container"></div>
   <ShipInfo :shipInfos="shipInfos"></ShipInfo>
-  <div class="df aic jcsb" v-if="shipInfos.length">
+  <div class="df aic jcsb pr20" v-if="shipInfos.length">
     <div class="container-title">船员信息</div>
-    <el-button type="primary" @click="goToCrewDetail()">新增船员</el-button>
-    <CrewInfo :shipInfos="shipInfos[0]"></CrewInfo>
+    <CrewInfo
+      :shipCode="route.query.shipCode"
+      :shipname="shipInfos[0].shipname"
+      @onSubmit="getCrewList"
+    ></CrewInfo>
   </div>
   <el-table border :data="crewList" stripe style="width: 1000px">
     <el-table-column align="center" type="index" label="序号" width="80" />
@@ -35,9 +38,26 @@
     </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>
+        <div class="df aic jcc">
+          <el-button
+            class="mr10"
+            type="primary"
+            @click="goToCrewDetail(scope.row)"
+          >
+            详情
+          </el-button>
+          <CrewInfo
+            class="mr10"
+            :shipCode="route.query.shipCode"
+            :shipname="shipInfos[0].shipname"
+            :crewId="scope.row.id"
+            :crewInfo="scope.row"
+            @onSubmit="getCrewList"
+          ></CrewInfo>
+          <el-button type="danger" @click="deleteCrew(scope.row)">
+            删除
+          </el-button>
+        </div>
       </template>
     </el-table-column>
   </el-table>