refactor(shipOwnerManage): 优化船员管理详情页面

- 调整表单项的样式和布局
- 统一文件上传和删除的处理逻辑
- 优化表单验证规则
- 调整日期选择器的样式
- 统一错误提示信息

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -20,21 +20,23 @@
     >
       <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="船员姓名" prop="userName" required>
+          <el-form-item label="船员姓名" prop="userName">
             <el-input
               v-model="shipOwnerForm.userName"
               placeholder="请输入"
               :disabled="!!shipOwnerForm.shipOwnerId"
+              class="w200"
             ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="船员手机号" prop="userPhone" required>
+          <el-form-item label="船员手机号" prop="userPhone">
             <el-input
               v-model="shipOwnerForm.userPhone"
               placeholder="请输入"
               :disabled="!!shipOwnerForm.shipOwnerId"
               @blur="handlePhoneBlur"
+              class="w200"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -46,6 +48,7 @@
               v-model="shipOwnerForm.idcardNo"
               placeholder="请输入"
               :disabled="!!shipOwnerForm.shipOwnerId"
+              class="w200"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -59,10 +62,10 @@
                   ? store.state.shipOwnerUpdateUrl
                   : store.state.shipOwnerCacheUrl
               "
-              :file-list="idCardFrontFileList"
+              :fileList="idCardFrontFileList"
               :params="{ type: 8, shipOwnerId: shipOwnerForm.shipOwnerId }"
-              @on-upload-file-list="handleIdCardFrontUpload"
-              @on-remove-file-list="handleIdCardFrontRemove"
+              @onRemoveFileList="handleIdCardFrontRemove"
+              @onUploadFileList="handleIdCardFrontSuccess"
               :limit="1"
               upload-text="点击上传人像面"
               :disabled="!!shipOwnerForm.shipOwnerId"
@@ -77,10 +80,10 @@
                   ? store.state.shipOwnerUpdateUrl
                   : store.state.shipOwnerCacheUrl
               "
-              :file-list="idCardBackFileList"
+              :fileList="idCardBackFileList"
               :params="{ type: 9, shipOwnerId: shipOwnerForm.shipOwnerId }"
-              @on-upload-file-list="handleIdCardBackUpload"
-              @on-remove-file-list="handleIdCardBackRemove"
+              @onUploadFileList="handleIdCardBackSuccess"
+              @onRemoveFileList="handleIdCardBackRemove"
               :limit="1"
               upload-text="点击上传国徽面"
               :disabled="!!shipOwnerForm.shipOwnerId"
@@ -102,10 +105,11 @@
     >
       <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="性别">
+          <el-form-item label="船员性别" prop="gender">
             <el-select
               v-model="shipOwnerForm.cerificate.gender"
               placeholder="请选择"
+              class="w200"
             >
               <el-option label="男" :value="1"></el-option>
               <el-option label="女" :value="2"></el-option>
@@ -113,10 +117,11 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="证书编号" prop="certNo" required>
+          <el-form-item label="证书编号" prop="certNo">
             <el-input
               v-model="shipOwnerForm.cerificate.certNo"
               placeholder="请输入"
+              class="w200"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -127,14 +132,16 @@
             <el-input
               v-model="shipOwnerForm.cerificate.certType"
               placeholder="请输入"
+              class="w200"
             ></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="职务资格" prop="postRole" required>
+          <el-form-item label="职务资格" prop="postRole">
             <el-select
               v-model="shipOwnerForm.cerificate.postRole"
               placeholder="请选择"
+              class="w200"
             >
               <el-option label="大副" value="大副"></el-option>
               <el-option label="二副" value="二副"></el-option>
@@ -146,7 +153,7 @@
       </el-row>
       <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="发证日期" prop="issuerAt" required>
+          <el-form-item label="发证日期" prop="issuerAt">
             <el-date-picker
               v-model="shipOwnerForm.cerificate.issuerAt"
               type="date"
@@ -156,22 +163,24 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="截止日期" prop="expiryAt" required>
+          <el-form-item label="截止日期" prop="expiryAt">
             <el-date-picker
               v-model="shipOwnerForm.cerificate.expiryAt"
               type="date"
               placeholder="选择日期"
               format="YYYY/MM/DD"
+              class="w200"
             />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="8">
-          <el-form-item label="签发机构" prop="issuerAuthority" required>
+          <el-form-item label="签发机构" prop="issuerAuthority">
             <el-input
               v-model="shipOwnerForm.cerificate.issuerAuthority"
               placeholder="请输入"
+              class="w200"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -188,17 +197,17 @@
       </el-row>
       <el-row>
         <el-col :span="8">
-          <el-form-item label="证书照片" prop="certFile" required>
+          <el-form-item label="证书照片" prop="certFile">
             <Uploader
               :action-url="
                 shipOwnerForm.shipOwnerId
                   ? store.state.shipOwnerUpdateUrl
                   : store.state.shipOwnerCacheUrl
               "
-              :file-list="certFileList"
+              :fileList="certFileList"
               :params="{ type: 1, shipOwnerId: shipOwnerForm.shipOwnerId }"
-              @on-upload-file-list="handleCertUpload"
-              @on-remove-file-list="handleCertRemove"
+              @onUploadFileList="handleCertSuccess"
+              @onRemoveFileList="handleCertRemove"
               :limit="1"
               upload-text="点击上传证书"
             />
@@ -217,10 +226,10 @@
           ? store.state.shipOwnerUpdateUrl
           : store.state.shipOwnerCacheUrl
       "
-      :file-list="healthFileList"
+      :fileList="healthFileList"
       :params="{ type: 2, shipOwnerId: shipOwnerForm.shipOwnerId }"
-      @on-upload-file-list="handleHealthUpload"
-      @on-remove-file-list="handleHealthRemove"
+      @onUploadFileList="handleHealthSuccess"
+      @onRemoveFileList="handleHealthRemove"
       :limit="2"
       upload-text="点击上传"
     />
@@ -232,10 +241,10 @@
           ? store.state.shipOwnerUpdateUrl
           : store.state.shipOwnerCacheUrl
       "
-      :file-list="serviceFileList"
+      :fileList="serviceFileList"
       :params="{ type: 3, shipOwnerId: shipOwnerForm.shipOwnerId }"
-      @on-upload-file-list="handleServiceUpload"
-      @on-remove-file-list="handleServiceRemove"
+      @onUploadFileList="handleServiceSuccess"
+      @onRemoveFileList="handleServiceRemove"
       :limit="2"
       upload-text="点击上传"
     />
@@ -320,6 +329,7 @@ const validateIssuerDate = (rule, value, callback) => {
 
 // 证书表单验证规则
 const certificateRules = {
+  gender: [{ required: true, message: "请选择船员性别", trigger: "change" }],
   certNo: [{ required: true, message: "请输入证书编号", trigger: "blur" }],
   postRole: [{ required: true, message: "请选择职务资格", trigger: "change" }],
   issuerAt: [
@@ -336,36 +346,80 @@ 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, // 船员ID，匹配时返回，未匹配到为0，非0时下方内容无效
-  userName: "", // 船员姓名（必填）
-  userPhone: "", // 船员手机（必填）
-  idcardNo: "", // 船员身份证号（非必填）
-  idcardFrontFileKey: "", // 船员身份证正面文件key（非必填）
-  idcardFrontViewUrl: "", // 船员身份证正面文件预览地址（非必填）
-  idcardFrontDownloadUrl: "", // 船员身份证正面文件下载地址（非必填）
-  idcardBackFileKey: "", // 船员身份证反面文件key（非必填）
-  idcardBackViewUrl: "", // 船员身份证反面文件预览地址（非必填）
-  idcardBackDownloadUrl: "", // 船员身份证反面文件下载地址（非必填）
+  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-男；2-女）
-    certNo: "", // 证书编号（必填）
-    certType: "", // 证书类型（非必填）
-    postRole: "", // 职务资格（必填）
-    issuerAt: "", // 发证日期（必填）
-    expiryAt: "", // 截止日期（必填）
-    issuerAuthority: "", // 签发机构（必填）
-    applicableRestrictions: "", // 适用限制（非必填）
+    gender: 1,
+    certNo: "2",
+    certType: "22",
+    postRole: "二副",
+    issuerAuthority: "222",
+    applicableRestrictions: "2222",
+    issuerAt: "2024/10/13",
+    expiryAt: "2025/10/13",
   },
-  documents: [], // 文件信息数组
+  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",
 });
-
 // 计算属性 - 文件列表
 const idCardFrontFileList = computed(() => {
   if (
     shipOwnerForm.value.idcardFrontFileKey &&
     shipOwnerForm.value.idcardFrontViewUrl
   ) {
+    console.log(shipOwnerForm.value);
+
     return [
       {
         fileKey: shipOwnerForm.value.idcardFrontFileKey,
@@ -426,32 +480,29 @@ const handlePhoneBlur = () => {
   if (shipOwnerForm.value.shipOwnerId) return;
 };
 
-// 身份证人像面上传处理
-const handleIdCardFrontUpload = ({ response }) => {
-  if (response.code === 0) {
-    shipOwnerForm.value.idcardFrontFileKey = response.data.fileKey;
-    shipOwnerForm.value.idcardFrontViewUrl = response.data.viewUrl;
-    shipOwnerForm.value.idcardFrontDownloadUrl = response.data.downloadUrl;
-  } else {
-    ElMessage.error(response.msg || "上传失败");
-  }
-};
-
 // 身份证人像面删除处理
 const handleIdCardFrontRemove = () => {
   shipOwnerForm.value.idcardFrontFileKey = "";
   shipOwnerForm.value.idcardFrontViewUrl = "";
   shipOwnerForm.value.idcardFrontDownloadUrl = "";
 };
+const handleIdCardFrontSuccess = ({ response: data }) => {
+  if (data.status === 0) {
+    console.log(data.result);
 
+    shipOwnerForm.value.idcardFrontFileKey = data.result.key;
+    shipOwnerForm.value.idcardFrontViewUrl = data.result.viewUrl;
+    shipOwnerForm.value.idcardFrontDownloadUrl = data.result.downloadUrl;
+  }
+};
 // 身份证国徽面上传处理
-const handleIdCardBackUpload = ({ response }) => {
-  if (response.code === 0) {
-    shipOwnerForm.value.idcardBackFileKey = response.data.fileKey;
-    shipOwnerForm.value.idcardBackViewUrl = response.data.viewUrl;
-    shipOwnerForm.value.idcardBackDownloadUrl = response.data.downloadUrl;
+const handleIdCardBackSuccess = ({ response: data }) => {
+  if (data.status === 0) {
+    shipOwnerForm.value.idcardBackFileKey = data.result.key;
+    shipOwnerForm.value.idcardBackViewUrl = data.result.viewUrl;
+    shipOwnerForm.value.idcardBackDownloadUrl = data.result.downloadUrl;
   } else {
-    ElMessage.error(response.msg || "上传失败");
+    ElMessage.error(data.msg || "上传失败");
   }
 };
 
@@ -463,19 +514,19 @@ const handleIdCardBackRemove = () => {
 };
 
 // 证书上传处理
-const handleCertUpload = ({ response }) => {
-  if (response.code === 0) {
+const handleCertSuccess = ({ response: data }) => {
+  if (data.status === 0) {
     if (!shipOwnerForm.value.documents) {
       shipOwnerForm.value.documents = [];
     }
     shipOwnerForm.value.documents.push({
       docType: 1, // 船员适任证书
-      fileKey: response.data.fileKey,
-      viewUrl: response.data.viewUrl,
-      downloadUrl: response.data.downloadUrl,
+      fileKey: data.result.key,
+      viewUrl: data.result.viewUrl,
+      downloadUrl: data.result.downloadUrl,
     });
   } else {
-    ElMessage.error(response.msg || "上传失败");
+    ElMessage.error(data.msg || "上传失败");
   }
 };
 
@@ -491,19 +542,19 @@ const handleCertRemove = ({ fileIndex }) => {
 };
 
 // 健康证明上传处理
-const handleHealthUpload = ({ response }) => {
-  if (response.code === 0) {
+const handleHealthSuccess = ({ response: data }) => {
+  if (data.status === 0) {
     if (!shipOwnerForm.value.documents) {
       shipOwnerForm.value.documents = [];
     }
     shipOwnerForm.value.documents.push({
       docType: 2, // 体检表
-      fileKey: response.data.fileKey,
-      viewUrl: response.data.viewUrl,
-      downloadUrl: response.data.downloadUrl,
+      fileKey: data.result.key,
+      viewUrl: data.result.viewUrl,
+      downloadUrl: data.result.downloadUrl,
     });
   } else {
-    ElMessage.error(response.msg || "上传失败");
+    ElMessage.error(data.msg || "上传失败");
   }
 };
 
@@ -519,19 +570,19 @@ const handleHealthRemove = ({ fileIndex }) => {
 };
 
 // 服务簿上传处理
-const handleServiceUpload = ({ response }) => {
-  if (response.code === 0) {
+const handleServiceSuccess = ({ response: data }) => {
+  if (data.status === 0) {
     if (!shipOwnerForm.value.documents) {
       shipOwnerForm.value.documents = [];
     }
     shipOwnerForm.value.documents.push({
       docType: 3, // 服务簿
-      fileKey: response.data.fileKey,
-      viewUrl: response.data.viewUrl,
-      downloadUrl: response.data.downloadUrl,
+      fileKey: data.result.key,
+      viewUrl: data.result.viewUrl,
+      downloadUrl: data.result.downloadUrl,
     });
   } else {
-    ElMessage.error(response.msg || "上传失败");
+    ElMessage.error(data.msg || "上传失败");
   }
 };
 
@@ -562,35 +613,34 @@ const saveShipOwner = () => {
         return;
       }
 
-      // 表单验证通过，继续保存操作
-    });
-  });
+      // 如果有ID，则更新，否则新增
+      const apiMethod = route.query.shipOwnerId
+        ? api.updateShipOwner
+        : api.addShipOwner;
+      const successMsg = route.query.shipOwnerId ? "更新成功" : "添加成功";
 
-  // 如果有ID，则更新，否则新增
-  const apiMethod = route.query.shipOwnerId
-    ? api.updateShipOwner
-    : api.addShipOwner;
-  const successMsg = route.query.shipOwnerId ? "更新成功" : "添加成功";
-
-  // 构建保存数据
-  const saveData = { ...shipOwnerForm.value };
-  if (route.query.shipOwnerId) {
-    saveData.id = route.query.shipOwnerId;
-  }
-
-  apiMethod(saveData)
-    .then((res) => {
-      if (res.data.code === 0) {
-        ElMessage.success(successMsg);
-        router.replace("/shipOwnerManage/shipOwnerList");
-      } else {
-        ElMessage.error(res.data.msg || "保存失败");
+      // 构建保存数据
+      const saveData = { ...shipOwnerForm.value };
+      if (route.query.shipOwnerId) {
+        saveData.id = route.query.shipOwnerId;
       }
-    })
-    .catch((err) => {
-      console.error(err);
-      ElMessage.error("保存失败");
+
+      apiMethod(saveData)
+        .then((res) => {
+          if (res.data.code === 0) {
+            ElMessage.success(successMsg);
+            router.replace("/shipOwnerManage/shipOwnerList");
+          } else {
+            ElMessage.error(res.data.msg || "保存失败");
+          }
+        })
+        .catch((err) => {
+          console.error(err);
+          ElMessage.error("保存失败");
+        });
+      // 表单验证通过，继续保存操作
     });
+  });
 };
 
 // 初始化数据
@@ -624,6 +674,9 @@ onMounted(() => {
   border: none;
   width: auto;
 }
+:deep(.el-input__wrapper) {
+  width: 200px;
+}
 
 .unit {
   width: 40px;