Ver Fonte

refactor(shipOwnerManage): 优化船员信息详情页面

- 移除了身份证上传的禁用状态
- 修正了证书信息表单的模型绑定
- 统一了日期格式为 YYYY-MM-DD
- 删除了不必要的注释代码
- 优化了船员详情数据的处理逻辑
- 添加了 API 请求的错误处理
wzg há 9 meses atrás
pai
commit
ea158fe73b
1 ficheiros alterados com 76 adições e 87 exclusões
  1. 76 87
      src/views/shipOwnerManage/shipOwnerDetail.vue

+ 76 - 87
src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -68,7 +68,6 @@
               @onUploadFileList="handleIdCardFrontSuccess"
               :limit="1"
               upload-text="点击上传人像面"
-              :disabled="!!shipOwnerForm.shipOwnerId"
             />
           </el-form-item>
         </el-col>
@@ -86,7 +85,6 @@
               @onRemoveFileList="handleIdCardBackRemove"
               :limit="1"
               upload-text="点击上传国徽面"
-              :disabled="!!shipOwnerForm.shipOwnerId"
             />
           </el-form-item>
         </el-col>
@@ -97,7 +95,7 @@
   <div class="container-title">船员证书信息</div>
   <div class="line-container-p24">
     <el-form
-      :model="shipOwnerForm.cerificate"
+      :model="shipOwnerForm.certificate"
       :rules="certificateRules"
       ref="certificateFormRef"
       label-width="100px"
@@ -107,7 +105,7 @@
         <el-col :span="8">
           <el-form-item label="船员性别" prop="gender">
             <el-select
-              v-model="shipOwnerForm.cerificate.gender"
+              v-model="shipOwnerForm.certificate.gender"
               placeholder="请选择"
               class="w200"
             >
@@ -119,7 +117,7 @@
         <el-col :span="8">
           <el-form-item label="证书编号" prop="certNo">
             <el-input
-              v-model="shipOwnerForm.cerificate.certNo"
+              v-model="shipOwnerForm.certificate.certNo"
               placeholder="请输入"
               class="w200"
             ></el-input>
@@ -130,7 +128,7 @@
         <el-col :span="8">
           <el-form-item label="证书类型">
             <el-input
-              v-model="shipOwnerForm.cerificate.certType"
+              v-model="shipOwnerForm.certificate.certType"
               placeholder="请输入"
               class="w200"
             ></el-input>
@@ -139,7 +137,7 @@
         <el-col :span="8">
           <el-form-item label="职务资格" prop="postRole">
             <el-select
-              v-model="shipOwnerForm.cerificate.postRole"
+              v-model="shipOwnerForm.certificate.postRole"
               placeholder="请选择"
               class="w200"
             >
@@ -155,20 +153,20 @@
         <el-col :span="8">
           <el-form-item label="发证日期" prop="issuerAt">
             <el-date-picker
-              v-model="shipOwnerForm.cerificate.issuerAt"
+              v-model="shipOwnerForm.certificate.issuerAt"
               type="date"
               placeholder="选择日期"
-              format="YYYY/MM/DD"
+              format="YYYY-MM-DD"
             />
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="截止日期" prop="expiryAt">
             <el-date-picker
-              v-model="shipOwnerForm.cerificate.expiryAt"
+              v-model="shipOwnerForm.certificate.expiryAt"
               type="date"
               placeholder="选择日期"
-              format="YYYY/MM/DD"
+              format="YYYY-MM-DD"
               class="w200"
             />
           </el-form-item>
@@ -178,7 +176,7 @@
         <el-col :span="8">
           <el-form-item label="签发机构" prop="issuerAuthority">
             <el-input
-              v-model="shipOwnerForm.cerificate.issuerAuthority"
+              v-model="shipOwnerForm.certificate.issuerAuthority"
               placeholder="请输入"
               class="w200"
             ></el-input>
@@ -188,7 +186,7 @@
           <el-form-item label="适用限制">
             <el-input
               type="textarea"
-              v-model="shipOwnerForm.cerificate.applicableRestrictions"
+              v-model="shipOwnerForm.certificate.applicableRestrictions"
               :rows="4"
               placeholder="请输入"
             ></el-input>
@@ -298,10 +296,10 @@ const validateExpiryDate = (rule, value, callback) => {
   if (!value) {
     callback(new Error("请选择截止日期"));
   } else {
-    if (shipOwnerForm.value.cerificate.issuerAt) {
+    if (shipOwnerForm.value.certificate.issuerAt) {
       // 确保截止日期晚于发证日期
       if (
-        new Date(value) <= new Date(shipOwnerForm.value.cerificate.issuerAt)
+        new Date(value) <= new Date(shipOwnerForm.value.certificate.issuerAt)
       ) {
         callback(new Error("截止日期必须晚于发证日期"));
       }
@@ -315,10 +313,10 @@ const validateIssuerDate = (rule, value, callback) => {
   if (!value) {
     callback(new Error("请选择发证日期"));
   } else {
-    if (shipOwnerForm.value.cerificate.expiryAt) {
+    if (shipOwnerForm.value.certificate.expiryAt) {
       // 如果已选择截止日期,确保发证日期早于截止日期
       if (
-        new Date(value) >= new Date(shipOwnerForm.value.cerificate.expiryAt)
+        new Date(value) >= new Date(shipOwnerForm.value.certificate.expiryAt)
       ) {
         callback(new Error("发证日期必须早于截止日期"));
       }
@@ -346,72 +344,30 @@ const certificateRules = {
   certFile: [{ validator: validateCertFile, trigger: "change" }],
 };
 // 初始化船员表单数据结构
-// const shipOwnerForm = ref({
-//   shipOwnerId: 0, // 船员ID,匹配时返回,未匹配到为0,非0时下方内容无效
-//   userName: "", // 船员姓名(必填)
-//   userPhone: "", // 船员手机(必填)
-//   idcardNo: "", // 船员身份证号(非必填)
-//   idcardFrontFileKey: "key", // 船员身份证正面文件key(非必填)
-//   idcardFrontViewUrl: "", // 船员身份证正面文件预览地址(非必填)
-//   idcardFrontDownloadUrl: "", // 船员身份证正面文件下载地址(非必填)
-//   idcardBackFileKey: "", // 船员身份证反面文件key(非必填)
-//   idcardBackViewUrl: "", // 船员身份证反面文件预览地址(非必填)
-//   idcardBackDownloadUrl: "", // 船员身份证反面文件下载地址(非必填)
-//   cerificate: {
-//     gender: "", // 性别(1-男;2-女)
-//     certNo: "", // 证书编号(必填)
-//     certType: "", // 证书类型(非必填)
-//     postRole: "", // 职务资格(必填)
-//     issuerAt: "", // 发证日期(必填)
-//     expiryAt: "", // 截止日期(必填)
-//     issuerAuthority: "", // 签发机构(必填)
-//     applicableRestrictions: "", // 适用限制(非必填)
-//   },
-//   documents: [], // 文件信息数组
-// });
-
 const shipOwnerForm = ref({
-  shipOwnerId: 0,
-  userName: "测试船员2",
-  userPhone: "13222222222",
-  idcardNo: "41222222222",
-  idcardFrontFileKey:
-    "temp/idCard//46259243-df73-40bf-bfc8-06ebe072d6bb1744299585221.png",
-  idcardFrontViewUrl:
-    "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/temp/idCard/%2F46259243-df73-40bf-bfc8-06ebe072d6bb1744299585221.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1744299585%3B93158697600%26q-key-time%3D1744299585%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D00ef742f2923419c4c2a72e2e8f96e1e51a33235",
-  idcardFrontDownloadUrl:
-    "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/temp/idCard/%2F46259243-df73-40bf-bfc8-06ebe072d6bb1744299585221.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1744299585%3B93156019200%26q-key-time%3D1744299585%3B93156019200%26q-header-list%3Dhost%26q-url-param-list%3Dresponse-cache-control%3Bresponse-content-disposition%3Bresponse-content-language%3Bresponse-content-type%3Bresponse-expires%26q-signature%3D0a45d725f25b2996dfe86b59e7c0f73a0cded93a&response-cache-control=no-cache&response-content-disposition=filename%3D%2255.png%22&response-content-language=zh-CN&response-expires=Fri%2C%2011%20Apr%202025%2015%3A39%3A45%20GMT&response-content-type=application%2Foctet-stream",
-  idcardBackFileKey:
-    "temp/idCard//59355817-3fdd-4c5b-886b-6344315d49131744299588315.png",
-  idcardBackViewUrl:
-    "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/temp/idCard/%2F59355817-3fdd-4c5b-886b-6344315d49131744299588315.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1744299588%3B93158697600%26q-key-time%3D1744299588%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3Dd921b492449684ec6c1bd1cfe462fd7f82806da5",
-  idcardBackDownloadUrl:
-    "https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/temp/idCard/%2F59355817-3fdd-4c5b-886b-6344315d49131744299588315.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1744299588%3B93156019200%26q-key-time%3D1744299588%3B93156019200%26q-header-list%3Dhost%26q-url-param-list%3Dresponse-cache-control%3Bresponse-content-disposition%3Bresponse-content-language%3Bresponse-content-type%3Bresponse-expires%26q-signature%3Dc6d86846bcbfba08ce4c390b27407101f172a2c4&response-cache-control=no-cache&response-content-disposition=filename%3D%2244.png%22&response-content-language=zh-CN&response-expires=Fri%2C%2011%20Apr%202025%2015%3A39%3A48%20GMT&response-content-type=application%2Foctet-stream",
-  cerificate: {
-    gender: 1,
-    certNo: "2",
-    certType: "22",
-    postRole: "二副",
-    issuerAuthority: "222",
-    applicableRestrictions: "2222",
-    issuerAt: "2024/10/13",
-    expiryAt: "2025/10/13",
+  shipOwnerId: 0, // 船员ID,匹配时返回,未匹配到为0,非0时下方内容无效
+  userName: "", // 船员姓名(必填)
+  userPhone: "", // 船员手机(必填)
+  idcardNo: "", // 船员身份证号(非必填)
+  idcardFrontFileKey: "key", // 船员身份证正面文件key(非必填)
+  idcardFrontViewUrl: "", // 船员身份证正面文件预览地址(非必填)
+  idcardFrontDownloadUrl: "", // 船员身份证正面文件下载地址(非必填)
+  idcardBackFileKey: "", // 船员身份证反面文件key(非必填)
+  idcardBackViewUrl: "", // 船员身份证反面文件预览地址(非必填)
+  idcardBackDownloadUrl: "", // 船员身份证反面文件下载地址(非必填)
+  certificate: {
+    gender: "", // 性别(1-男;2-女)
+    certNo: "", // 证书编号(必填)
+    certType: "", // 证书类型(非必填)
+    postRole: "", // 职务资格(必填)
+    issuerAt: "", // 发证日期(必填)
+    expiryAt: "", // 截止日期(必填)
+    issuerAuthority: "", // 签发机构(必填)
+    applicableRestrictions: "", // 适用限制(非必填)
   },
-  documents: [
-    {
-      docType: 1,
-      fileKey:
-        "new/ship_onwer_doc_temp/汇很多船务公司/f2c2b015-b0d5-4be6-b2b0-a21066aadd391744299609131.png",
-      viewUrl:
-        "https://hhd-shipping-formal-1255802371.cos.ap-shanghai.myqcloud.com/new/ship_onwer_doc_temp/%E6%B1%87%E5%BE%88%E5%A4%9A%E8%88%B9%E5%8A%A1%E5%85%AC%E5%8F%B8/f2c2b015-b0d5-4be6-b2b0-a21066aadd391744299609131.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1744299609%3B93158697600%26q-key-time%3D1744299609%3B93158697600%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3D3574bf400b4fea4952353a7b84f5ab1c746324a9",
-      downloadUrl:
-        "https://hhd-shipping-formal-1255802371.cos.ap-shanghai.myqcloud.com/new/ship_onwer_doc_temp/%E6%B1%87%E5%BE%88%E5%A4%9A%E8%88%B9%E5%8A%A1%E5%85%AC%E5%8F%B8/f2c2b015-b0d5-4be6-b2b0-a21066aadd391744299609131.png?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKID4xb091cy4tRikV0EBrGOGsCF1WkhMlum%26q-sign-time%3D1744299609%3B93156019200%26q-key-time%3D1744299609%3B93156019200%26q-header-list%3Dhost%26q-url-param-list%3Dresponse-cache-control%3Bresponse-content-disposition%3Bresponse-content-language%3Bresponse-content-type%3Bresponse-expires%26q-signature%3D425e483068c127c1ab5726844c903c95b3247d1d&response-cache-control=no-cache&response-content-disposition=filename%3D%2211.png%22&response-content-language=zh-CN&response-expires=Fri%2C%2011%20Apr%202025%2015%3A40%3A09%20GMT&response-content-type=application%2Foctet-stream",
-      hover: false,
-    },
-  ],
-  loginAccountId: "19",
-  shippingId: "15",
+  documents: [], // 文件信息数组
 });
+
 // 计算属性 - 文件列表
 const idCardFrontFileList = computed(() => {
   if (
@@ -469,7 +425,40 @@ async function getShipOwnerDetail() {
   let { data } = await api.getShipOwnerDetail({
     shipOwnerId: route.query.shipOwnerId,
   });
-  console.log(data);
+
+  if (data.status === 0 && data.result) {
+    // 处理基本信息
+    shipOwnerForm.value = {
+      shipOwnerId: data.result.id,
+      userName: data.result.userName,
+      userPhone: data.result.phone,
+      idcardNo: data.result.idcardNo,
+      idcardFrontFileKey: data.result.idcardFrontFileKey || "",
+      idcardFrontViewUrl: data.result.idcardFrontViewUrl || "",
+      idcardFrontDownloadUrl: data.result.idcardFrontDownloadUrl || "",
+      idcardBackFileKey: data.result.idcardBackFileKey || "",
+      idcardBackViewUrl: data.result.idcardBackViewUrl || "",
+      idcardBackDownloadUrl: data.result.idcardBackDownloadUrl || "",
+      // 处理证书信息
+      certificate: {
+        gender: data.result.certificate?.gender || "", // 性别(1-男;2-女)
+        certNo: data.result.certificate?.certNo || "", // 证书编号
+        certType: data.result.certificate?.certType || "", // 证书类型
+        postRole: data.result.certificate?.postRole || "", // 职务资格
+        issuerAt: data.result.certificate?.issuerAt || "", // 发证日期
+        expiryAt: data.result.certificate?.expiryAt || "", // 截止日期
+        issuerAuthority: data.result.certificate?.issuerAuthority || "", // 签发机构
+        applicableRestrictions:
+          data.result.certificate?.applicableRestrictions || "", // 适用限制
+      },
+      // 处理文档信息
+      documents: data.result.documents || [],
+    };
+
+    console.log("处理后的船员详情数据:", shipOwnerForm.value);
+  } else {
+    ElMessage.error(data.msg || "获取船员详情失败");
+  }
 }
 
 // 手机号失去焦点时检查是否已存在船员信息
@@ -602,16 +591,16 @@ const saveShipOwner = () => {
   console.log("保存船员信息", shipOwnerForm.value);
   // 使用Element Plus表单验证
   shipOwnerFormRef.value.validate((valid1) => {
-    if (!valid1) return;
+    // if (!valid1) return;
 
     certificateFormRef.value.validate((valid2) => {
-      if (!valid2) return;
+      // if (!valid2) return;
 
       // 验证证书照片是否上传
-      if (!certFileList.value.length) {
-        ElMessage.warning("请上传证书照片");
-        return;
-      }
+      // if (!certFileList.value.length) {
+      //   ElMessage.warning("请上传证书照片");
+      //   return;
+      // }
 
       // 如果有ID,则更新,否则新增
       const apiMethod = route.query.shipOwnerId