feat(船东管理): 新增船东信息编辑功能

- 增加基本信息和证书信息的编辑按钮
- 实现基本信息和证书信息的保存和取消编辑功能
- 优化表单验证逻辑
- 新增 API 接口用于更新船东信息

src/apis/fetch.js

@@ -29,6 +29,10 @@ export default {
     return $http("/shipOwner/update", data);
   },
 
+  updateShipOwnerCert(data) {
+    return $http("/shipOwner/update/cert", data);
+  },
+
   // 新增船舶
   addShip(data) {
     return $http("/ship/add", data);

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -24,7 +24,7 @@
             <el-input
               v-model="shipOwnerForm.userName"
               placeholder="请输入"
-              :disabled="!!shipOwnerForm.shipOwnerId"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingBasicInfo"
               class="w200"
             ></el-input>
           </el-form-item>
@@ -34,7 +34,7 @@
             <el-input
               v-model="shipOwnerForm.userPhone"
               placeholder="请输入"
-              :disabled="!!shipOwnerForm.shipOwnerId"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingBasicInfo"
               @blur="handlePhoneBlur"
               class="w200"
             ></el-input>
@@ -47,7 +47,7 @@
             <el-input
               v-model="shipOwnerForm.idcardNo"
               placeholder="请输入"
-              :disabled="!!shipOwnerForm.shipOwnerId"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingBasicInfo"
               class="w200"
             ></el-input>
           </el-form-item>
@@ -90,6 +90,19 @@
         </el-col>
       </el-row>
     </el-form>
+    <div class="df aic jcfe mt20" v-if="route.query.shipOwnerId">
+      <el-button
+        v-if="!isEditingBasicInfo"
+        type="primary"
+        @click="startEditingBasicInfo"
+      >
+        修改
+      </el-button>
+      <template v-else>
+        <el-button @click="cancelEditingBasicInfo">取消</el-button>
+        <el-button type="primary" @click="saveBasicInfo">保存</el-button>
+      </template>
+    </div>
   </div>
 
   <div class="container-title">船员证书信息</div>
@@ -108,6 +121,7 @@
               v-model="shipOwnerForm.certificate.gender"
               placeholder="请选择"
               class="w200"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingCertificate"
             >
               <el-option label="男" :value="1"></el-option>
               <el-option label="女" :value="2"></el-option>
@@ -120,6 +134,7 @@
               v-model="shipOwnerForm.certificate.certNo"
               placeholder="请输入"
               class="w200"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingCertificate"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -131,6 +146,7 @@
               v-model="shipOwnerForm.certificate.certType"
               placeholder="请输入"
               class="w200"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingCertificate"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -140,6 +156,7 @@
               v-model="shipOwnerForm.certificate.postRole"
               placeholder="请选择"
               class="w200"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingCertificate"
             >
               <el-option label="大副" value="大副"></el-option>
               <el-option label="二副" value="二副"></el-option>
@@ -157,6 +174,7 @@
               type="date"
               placeholder="选择日期"
               format="YYYY-MM-DD"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingCertificate"
             />
           </el-form-item>
         </el-col>
@@ -168,6 +186,7 @@
               placeholder="选择日期"
               format="YYYY-MM-DD"
               class="w200"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingCertificate"
             />
           </el-form-item>
         </el-col>
@@ -179,6 +198,7 @@
               v-model="shipOwnerForm.certificate.issuerAuthority"
               placeholder="请输入"
               class="w200"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingCertificate"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -189,6 +209,7 @@
               v-model="shipOwnerForm.certificate.applicableRestrictions"
               :rows="4"
               placeholder="请输入"
+              :disabled="!!shipOwnerForm.shipOwnerId && !isEditingCertificate"
             ></el-input>
           </el-form-item>
         </el-col>
@@ -213,6 +234,19 @@
         </el-col>
       </el-row>
     </el-form>
+    <div class="df aic jcfe mt20" v-if="route.query.shipOwnerId">
+      <el-button
+        v-if="!isEditingCertificate"
+        type="primary"
+        @click="startEditingCertificate"
+      >
+        修改
+      </el-button>
+      <template v-else>
+        <el-button @click="cancelEditingCertificate">取消</el-button>
+        <el-button type="primary" @click="updateShipOwnerCert">保存</el-button>
+      </template>
+    </div>
   </div>
 
   <div class="container-title">其他文件</div>
@@ -248,7 +282,7 @@
     />
   </div>
 
-  <div class="df jcc mt30 mb30">
+  <div class="df jcc mt30 mb30" v-if="!route.query.shipOwnerId">
     <el-button @click="router.replace('/shipOwnerManage/shipOwnerList')">
       取消
     </el-button>
@@ -256,7 +290,7 @@
   </div>
 </template>
 <script setup>
-import { ref, h, reactive, toRefs, onMounted, computed } from "vue";
+import { ref, h, reactive, toRefs, onMounted, computed, nextTick } from "vue";
 import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import store from "../../store";
 import router from "../../router";
@@ -270,6 +304,15 @@ const uploadConfig = ref({});
 const shipOwnerFormRef = ref(null);
 const certificateFormRef = ref(null);
 
+// 编辑模式状态
+const isEditing = ref(false);
+const isEditingBasicInfo = ref(false);
+const isEditingCertificate = ref(false);
+// 原始数据备份，用于取消编辑时恢复
+const originalData = ref(null);
+const originalBasicInfo = ref(null);
+const originalCertificate = ref(null);
+
 // 表单验证规则
 const rules = {
   userName: [{ required: true, message: "请输入船员姓名", trigger: "blur" }],
@@ -374,8 +417,6 @@ const idCardFrontFileList = computed(() => {
     shipOwnerForm.value.idcardFrontFileKey &&
     shipOwnerForm.value.idcardFrontViewUrl
   ) {
-    console.log(shipOwnerForm.value);
-
     return [
       {
         fileKey: shipOwnerForm.value.idcardFrontFileKey,
@@ -454,8 +495,6 @@ async function getShipOwnerDetail() {
       // 处理文档信息
       documents: data.result.documents || [],
     };
-
-    console.log("处理后的船员详情数据:", shipOwnerForm.value);
   } else {
     ElMessage.error(data.msg || "获取船员详情失败");
   }
@@ -477,8 +516,6 @@ const handleIdCardFrontRemove = () => {
 };
 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;
@@ -586,21 +623,166 @@ const handleServiceRemove = ({ fileIndex }) => {
   );
 };
 
+// 开始编辑
+const startEditing = () => {
+  // 备份当前数据，用于取消时恢复
+  originalData.value = JSON.parse(JSON.stringify(shipOwnerForm.value));
+  isEditing.value = true;
+};
+
+// 取消编辑
+const cancelEditing = () => {
+  // 恢复原始数据
+  if (originalData.value) {
+    shipOwnerForm.value = JSON.parse(JSON.stringify(originalData.value));
+  }
+  isEditing.value = false;
+};
+
+// 开始编辑基本信息
+const startEditingBasicInfo = () => {
+  // 备份当前数据，用于取消时恢复
+  originalBasicInfo.value = JSON.parse(JSON.stringify(shipOwnerForm.value));
+  isEditingBasicInfo.value = true;
+};
+
+// 取消编辑基本信息
+const cancelEditingBasicInfo = () => {
+  // 恢复原始数据
+  if (originalBasicInfo.value) {
+    shipOwnerForm.value = {
+      ...shipOwnerForm.value,
+      userName: originalBasicInfo.value.userName,
+      userPhone: originalBasicInfo.value.userPhone,
+      idcardNo: originalBasicInfo.value.idcardNo,
+      idcardFrontFileKey: originalBasicInfo.value.idcardFrontFileKey,
+      idcardFrontViewUrl: originalBasicInfo.value.idcardFrontViewUrl,
+      idcardFrontDownloadUrl: originalBasicInfo.value.idcardFrontDownloadUrl,
+      idcardBackFileKey: originalBasicInfo.value.idcardBackFileKey,
+      idcardBackViewUrl: originalBasicInfo.value.idcardBackViewUrl,
+      idcardBackDownloadUrl: originalBasicInfo.value.idcardBackDownloadUrl,
+    };
+  }
+  isEditingBasicInfo.value = false;
+};
+
+// 保存基本信息
+const saveBasicInfo = () => {
+  shipOwnerFormRef.value.validate((valid) => {
+    if (!valid) return;
+
+    // 构建保存数据
+    const saveData = {
+      shipOwnerId: shipOwnerForm.value.shipOwnerId,
+      userName: shipOwnerForm.value.userName,
+      userPhone: shipOwnerForm.value.userPhone,
+      idcardNo: shipOwnerForm.value.idcardNo,
+      idcardFrontFileKey: shipOwnerForm.value.idcardFrontFileKey,
+      idcardFrontViewUrl: shipOwnerForm.value.idcardFrontViewUrl,
+      idcardFrontDownloadUrl: shipOwnerForm.value.idcardFrontDownloadUrl,
+      idcardBackFileKey: shipOwnerForm.value.idcardBackFileKey,
+      idcardBackViewUrl: shipOwnerForm.value.idcardBackViewUrl,
+      idcardBackDownloadUrl: shipOwnerForm.value.idcardBackDownloadUrl,
+    };
+
+    api
+      .updateShipOwner(saveData)
+      .then((res) => {
+        console.log(res);
+        if (res.data.status === 0) {
+          ElMessage.success("基本信息更新成功");
+          isEditingBasicInfo.value = false;
+          // 更新原始数据
+          originalBasicInfo.value = JSON.parse(
+            JSON.stringify(shipOwnerForm.value)
+          );
+          // 刷新数据
+          getShipOwnerDetail();
+        } else {
+          ElMessage.error(res.data.msg || "保存失败");
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+        ElMessage.error("保存失败");
+      });
+  });
+};
+
+// 开始编辑证书信息
+const startEditingCertificate = () => {
+  // 备份当前数据，用于取消时恢复
+  originalCertificate.value = JSON.parse(
+    JSON.stringify(shipOwnerForm.value.certificate)
+  );
+  isEditingCertificate.value = true;
+};
+
+// 取消编辑证书信息
+const cancelEditingCertificate = () => {
+  // 恢复原始数据
+  if (originalCertificate.value) {
+    shipOwnerForm.value.certificate = JSON.parse(
+      JSON.stringify(originalCertificate.value)
+    );
+  }
+  isEditingCertificate.value = false;
+};
+
+// 保存证书信息
+const updateShipOwnerCert = () => {
+  certificateFormRef.value.validate((valid) => {
+    if (!valid) return;
+
+    // 验证证书照片是否上传
+    if (!certFileList.value.length) {
+      ElMessage.warning("请上传证书照片");
+      return;
+    }
+
+    // 构建保存数据
+    const saveData = {
+      shipOwnerId: shipOwnerForm.value.shipOwnerId,
+      ...shipOwnerForm.value.certificate,
+    };
+
+    api
+      .updateShipOwnerCert(saveData)
+      .then((res) => {
+        if (res.data.status === 0) {
+          ElMessage.success("证书信息更新成功");
+          isEditingCertificate.value = false;
+          // 更新原始数据
+          originalCertificate.value = JSON.parse(
+            JSON.stringify(shipOwnerForm.value.certificate)
+          );
+          // 刷新数据
+          getShipOwnerDetail();
+        } else {
+          ElMessage.error(res.data.msg || "保存失败");
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+        ElMessage.error("保存失败");
+      });
+  });
+};
+
 // 保存船员信息
 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
@@ -616,9 +798,18 @@ const saveShipOwner = () => {
 
       apiMethod(saveData)
         .then((res) => {
-          if (res.data.code === 0) {
+          if (res.data.status === 0) {
             ElMessage.success(successMsg);
-            router.replace("/shipOwnerManage/shipOwnerList");
+            if (!route.query.shipOwnerId) {
+              router.replace("/shipOwnerManage/shipOwnerList");
+            } else {
+              // 如果是编辑模式，保存成功后退出编辑模式
+              isEditing.value = false;
+              // 更新原始数据
+              originalData.value = JSON.parse(
+                JSON.stringify(shipOwnerForm.value)
+              );
+            }
           } else {
             ElMessage.error(res.data.msg || "保存失败");
           }