feat(shipOwnerManage): 优化船员信息管理功能

- 修改页面标题和表单标签，将"船东"改为"船员"
- 添加表单验证规则，提高数据输入的准确性和完整性
- 优化日期验证逻辑，确保发证日期和截止日期的合理性
- 重构表单提交逻辑，使用 Element Plus 的表单验证功能
- 优化证书照片上传的验证逻辑

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -5,16 +5,22 @@
       @click="router.replace('/shipOwnerManage/shipOwnerList')"
     >
       <el-icon class="mr10"><ArrowLeftBold /></el-icon>
-      <div>返回船东列表</div>
+      <div>返回船员列表</div>
     </div>
   </div>
 
   <div class="container-title">基本信息</div>
   <div class="line-container-p24">
-    <el-form :model="shipOwnerForm" label-width="100px" label-position="left">
+    <el-form
+      :model="shipOwnerForm"
+      :rules="rules"
+      ref="shipOwnerFormRef"
+      label-width="100px"
+      label-position="left"
+    >
       <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="船东姓名" required>
+          <el-form-item label="船员姓名" prop="userName" required>
             <el-input
               v-model="shipOwnerForm.userName"
               placeholder="请输入"
@@ -23,7 +29,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="船东手机号" required>
+          <el-form-item label="船员手机号" prop="userPhone" required>
             <el-input
               v-model="shipOwnerForm.userPhone"
               placeholder="请输入"
@@ -35,7 +41,7 @@
       </el-row>
       <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="船东身份证号">
+          <el-form-item label="船员身份证号">
             <el-input
               v-model="shipOwnerForm.idcardNo"
               placeholder="请输入"
@@ -77,10 +83,12 @@
     </el-form>
   </div>
 
-  <div class="container-title">船东证书信息</div>
+  <div class="container-title">船员证书信息</div>
   <div class="line-container-p24">
     <el-form
       :model="shipOwnerForm.cerificate"
+      :rules="certificateRules"
+      ref="certificateFormRef"
       label-width="100px"
       label-position="left"
     >
@@ -97,7 +105,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="证书编号" required>
+          <el-form-item label="证书编号" prop="certNo" required>
             <el-input
               v-model="shipOwnerForm.cerificate.certNo"
               placeholder="请输入"
@@ -115,7 +123,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="职务资格" required>
+          <el-form-item label="职务资格" prop="postRole" required>
             <el-select
               v-model="shipOwnerForm.cerificate.postRole"
               placeholder="请选择"
@@ -130,7 +138,7 @@
       </el-row>
       <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="发证日期" required>
+          <el-form-item label="发证日期" prop="issuerAt" required>
             <el-date-picker
               v-model="shipOwnerForm.cerificate.issuerAt"
               type="date"
@@ -140,7 +148,7 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="截止日期" required>
+          <el-form-item label="截止日期" prop="expiryAt" required>
             <el-date-picker
               v-model="shipOwnerForm.cerificate.expiryAt"
               type="date"
@@ -152,7 +160,7 @@
       </el-row>
       <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="签发机构" required>
+          <el-form-item label="签发机构" prop="issuerAuthority" required>
             <el-input
               v-model="shipOwnerForm.cerificate.issuerAuthority"
               placeholder="请输入"
@@ -172,7 +180,7 @@
       </el-row>
       <el-row>
         <el-col :span="8">
-          <el-form-item label="证书照片" required>
+          <el-form-item label="证书照片" prop="certFile" required>
             <Uploader
               :action-url="uploadConfig.uploadUrl"
               :file-list="certFileList"
@@ -232,19 +240,94 @@ import _ from "lodash";
 
 const route = useRoute();
 const uploadConfig = ref({});
+const shipOwnerFormRef = ref(null);
+const certificateFormRef = ref(null);
+
+// 表单验证规则
+const rules = {
+  userName: [{ required: true, message: "请输入船员姓名", trigger: "blur" }],
+  userPhone: [
+    { required: true, message: "请输入船员手机号", trigger: "blur" },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: "请输入正确的手机号格式",
+      trigger: "blur",
+    },
+  ],
+};
+// 验证证书照片
+const validateCertFile = (rule, value, callback) => {
+  if (!certFileList.value || certFileList.value.length === 0) {
+    callback(new Error("请上传证书照片"));
+  } else {
+    callback();
+  }
+};
+
+// 验证截止日期
+const validateExpiryDate = (rule, value, callback) => {
+  if (!value) {
+    callback(new Error("请选择截止日期"));
+  } else {
+    if (shipOwnerForm.value.cerificate.issuerAt) {
+      // 确保截止日期晚于发证日期
+      if (
+        new Date(value) <= new Date(shipOwnerForm.value.cerificate.issuerAt)
+      ) {
+        callback(new Error("截止日期必须晚于发证日期"));
+      }
+    }
+    callback();
+  }
+};
 
-// 初始化船东表单数据结构
+// 验证发证日期
+const validateIssuerDate = (rule, value, callback) => {
+  if (!value) {
+    callback(new Error("请选择发证日期"));
+  } else {
+    if (shipOwnerForm.value.cerificate.expiryAt) {
+      // 如果已选择截止日期，确保发证日期早于截止日期
+      if (
+        new Date(value) >= new Date(shipOwnerForm.value.cerificate.expiryAt)
+      ) {
+        callback(new Error("发证日期必须早于截止日期"));
+      }
+    }
+    callback();
+  }
+};
+
+// 证书表单验证规则
+const certificateRules = {
+  certNo: [{ required: true, message: "请输入证书编号", trigger: "blur" }],
+  postRole: [{ required: true, message: "请选择职务资格", trigger: "change" }],
+  issuerAt: [
+    { required: true, message: "请选择发证日期", trigger: "change" },
+    { validator: validateIssuerDate, trigger: "change" },
+  ],
+  expiryAt: [
+    { required: true, message: "请选择截止日期", trigger: "change" },
+    { validator: validateExpiryDate, trigger: "change" },
+  ],
+  issuerAuthority: [
+    { required: true, message: "请输入签发机构", trigger: "blur" },
+  ],
+  certFile: [{ validator: validateCertFile, trigger: "change" }],
+};
+
+// 初始化船员表单数据结构
 const shipOwnerForm = ref({
-  shipOwnerId: 0, // 船东ID，匹配时返回，未匹配到为0，非0时下方内容无效
-  userName: "", // 船东姓名（必填）
-  userPhone: "", // 船东手机（必填）
-  idcardNo: "", // 船东身份证号（非必填）
-  idcardFrontFileKey: "", // 船东身份证正面文件key（非必填）
-  idcardFrontViewUrl: "", // 船东身份证正面文件预览地址（非必填）
-  idcardFrontDownloadUrl: "", // 船东身份证正面文件下载地址（非必填）
-  idcardBackFileKey: "", // 船东身份证反面文件key（非必填）
-  idcardBackViewUrl: "", // 船东身份证反面文件预览地址（非必填）
-  idcardBackDownloadUrl: "", // 船东身份证反面文件下载地址（非必填）
+  shipOwnerId: 0, // 船员ID，匹配时返回，未匹配到为0，非0时下方内容无效
+  userName: "", // 船员姓名（必填）
+  userPhone: "", // 船员手机（必填）
+  idcardNo: "", // 船员身份证号（非必填）
+  idcardFrontFileKey: "", // 船员身份证正面文件key（非必填）
+  idcardFrontViewUrl: "", // 船员身份证正面文件预览地址（非必填）
+  idcardFrontDownloadUrl: "", // 船员身份证正面文件下载地址（非必填）
+  idcardBackFileKey: "", // 船员身份证反面文件key（非必填）
+  idcardBackViewUrl: "", // 船员身份证反面文件预览地址（非必填）
+  idcardBackDownloadUrl: "", // 船员身份证反面文件下载地址（非必填）
   cerificate: {
     gender: "", // 性别（1-男；2-女）
     certNo: "", // 证书编号（必填）
@@ -311,7 +394,7 @@ const serviceFileList = computed(() => {
 
 // 初始化数据
 onMounted(() => {
-  // 如果有ID参数，获取船东详情
+  // 如果有ID参数，获取船员详情
   if (route.query.id) {
     api.getShipOwnerDetail({ id: route.query.id }).then((res) => {
       if (res.data.code === 0) {
@@ -323,20 +406,20 @@ onMounted(() => {
   }
 });
 
-// 手机号失去焦点时检查是否已存在船东信息
+// 手机号失去焦点时检查是否已存在船员信息
 const handlePhoneBlur = () => {
   if (!shipOwnerForm.value.userPhone) return;
 
-  // 如果已经有shipOwnerId，说明已经匹配到了船东，不需要再查询
+  // 如果已经有shipOwnerId，说明已经匹配到了船员，不需要再查询
   if (shipOwnerForm.value.shipOwnerId) return;
 
   api
     .getShipOwnerDetail({ phone: shipOwnerForm.value.userPhone })
     .then((res) => {
       if (res.data.code === 0 && res.data.data && res.data.data.shipOwnerId) {
-        // 匹配到船东信息，更新表单
+        // 匹配到船员信息，更新表单
         Object.assign(shipOwnerForm.value, res.data.data);
-        ElMessage.info("已匹配到船东信息");
+        ElMessage.info("已匹配到船员信息");
       }
     });
 };
@@ -461,41 +544,24 @@ const handleServiceRemove = ({ fileIndex }) => {
   );
 };
 
-// 保存船东信息
+// 保存船员信息
 const saveShipOwner = () => {
-  // 表单验证
-  if (!shipOwnerForm.value.userName) {
-    ElMessage.warning("请输入船东姓名");
-    return;
-  }
-  if (!shipOwnerForm.value.userPhone) {
-    ElMessage.warning("请输入船东手机号");
-    return;
-  }
-  if (!shipOwnerForm.value.cerificate.certNo) {
-    ElMessage.warning("请输入证书编号");
-    return;
-  }
-  if (!shipOwnerForm.value.cerificate.postRole) {
-    ElMessage.warning("请选择职务资格");
-    return;
-  }
-  if (!shipOwnerForm.value.cerificate.issuerAt) {
-    ElMessage.warning("请选择发证日期");
-    return;
-  }
-  if (!shipOwnerForm.value.cerificate.expiryAt) {
-    ElMessage.warning("请选择截止日期");
-    return;
-  }
-  if (!shipOwnerForm.value.cerificate.issuerAuthority) {
-    ElMessage.warning("请输入签发机构");
-    return;
-  }
-  if (!certFileList.value.length) {
-    ElMessage.warning("请上传证书照片");
-    return;
-  }
+  // 使用Element Plus表单验证
+  shipOwnerFormRef.value.validate((valid1) => {
+    if (!valid1) return;
+
+    certificateFormRef.value.validate((valid2) => {
+      if (!valid2) return;
+
+      // 验证证书照片是否上传
+      if (!certFileList.value.length) {
+        ElMessage.warning("请上传证书照片");
+        return;
+      }
+
+      // 表单验证通过，继续保存操作
+    });
+  });
 
   // 如果有ID，则更新，否则新增
   const apiMethod = route.query.id ? api.updateShipOwner : api.addShipOwner;