refactor(shipManage): 重构船员信息组件并优化船员列表展示

- 重构 CrewInfo 组件，增加 btnText 和 disabled 属性以适应不同场景
- 在船员列表中使用 CrewInfo 组件替代原有的详情按钮，实现查看和修改功能
- 优化船员信息展示，增加证书和体检表的预览功能
- 调整表单布局和样式，提升用户体验

src/components/CrewInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-button type="primary" @click="handleClick">
-      {{ crewId ? "修改船员" : "新增船员" }}
+      {{ btnText }}
     </el-button>
     <el-dialog
       v-model="dialogVisible"
@@ -20,10 +20,15 @@
           <span>{{ shipname }}</span>
         </el-form-item>
         <el-form-item label="船员姓名" prop="crewName">
-          <el-input class="w200" v-model="crewForm.crewName"></el-input>
+          <el-input
+            :disabled="disabled"
+            class="w200"
+            v-model="crewForm.crewName"
+          ></el-input>
         </el-form-item>
         <el-form-item label="船员性别" prop="crewGender">
           <el-select
+            :disabled="disabled"
             class="w200"
             v-model="crewForm.crewGender"
             placeholder="请选择"
@@ -33,16 +38,29 @@
           </el-select>
         </el-form-item>
         <el-form-item label="证书编号" prop="crewCertNo">
-          <el-input class="w200" v-model="crewForm.crewCertNo"></el-input>
+          <el-input
+            :disabled="disabled"
+            class="w200"
+            v-model="crewForm.crewCertNo"
+          ></el-input>
         </el-form-item>
         <el-form-item label="证书类别" prop="crewCertType">
-          <el-input class="w200" v-model="crewForm.crewCertType"></el-input>
+          <el-input
+            :disabled="disabled"
+            class="w200"
+            v-model="crewForm.crewCertType"
+          ></el-input>
         </el-form-item>
         <el-form-item label="职务资格" prop="crewPost">
-          <el-input class="w200" v-model="crewForm.crewPost"></el-input>
+          <el-input
+            :disabled="disabled"
+            class="w200"
+            v-model="crewForm.crewPost"
+          ></el-input>
         </el-form-item>
         <el-form-item label="签发日期" prop="crewCertSignDate">
           <el-date-picker
+            :disabled="disabled"
             class="w200"
             v-model="crewForm.crewCertSignDate"
             type="date"
@@ -53,6 +71,7 @@
         </el-form-item>
         <el-form-item label="截止日期" prop="crewCertExpiryDate">
           <el-date-picker
+            :disabled="disabled"
             class="w200"
             v-model="crewForm.crewCertExpiryDate"
             type="date"
@@ -63,40 +82,61 @@
         </el-form-item>
         <el-form-item label="签发机构" prop="crewCertIssuingAuthority">
           <el-input
+            :disabled="disabled"
             class="w200"
             v-model="crewForm.crewCertIssuingAuthority"
           ></el-input>
         </el-form-item>
         <el-form-item label="适用限制" prop="crewCertApplicableRestrictions">
           <el-input
+            :disabled="disabled"
             class="w200"
             v-model="crewForm.crewCertApplicableRestrictions"
             type="textarea"
           ></el-input>
         </el-form-item>
         <el-form-item label="船员证" prop="crewCertViewUrl">
+          <el-image
+            v-if="crewForm.crewCertViewUrl"
+            style="width: 100px; height: 100px"
+            class="mr20"
+            fit="cover"
+            :preview-src-list="[crewForm.crewCertViewUrl]"
+            :src="crewForm.crewCertViewUrl"
+          ></el-image>
           <el-upload
-            :limit="1"
+            v-if="!disabled"
             :action="store.state.baseurl + '/ship/crew/uploadCert'"
             :show-file-list="false"
             :data="{ loginAccountId, type: 1 }"
             :on-success="uploadCertSuccess"
           >
-            <el-button>上传船员证书</el-button>
+            <el-button>
+              {{ crewForm.crewCertViewUrl ? "重新" : "" }}上传船员证书
+            </el-button>
           </el-upload>
         </el-form-item>
         <el-form-item label="健康检查表" prop="crewExamRecViewUrl">
+          <el-button
+            v-if="crewForm.crewExamRecViewUrl"
+            type="primary"
+            class="mr20"
+          >
+            下载船员体检表
+          </el-button>
           <el-upload
-            :limit="1"
+            v-if="!disabled"
             :action="store.state.baseurl + '/ship/crew/uploadCert'"
             :show-file-list="false"
             :data="{ loginAccountId, type: 2 }"
             :on-success="uploadFileSuccess"
           >
-            <el-button>上传船员体检表</el-button>
+            <el-button>
+              {{ crewForm.crewExamRecViewUrl ? "重新" : "" }}上传船员体检表
+            </el-button>
           </el-upload>
         </el-form-item>
-        <div class="df aic jcfe">
+        <div class="df aic jcfe" v-if="!disabled">
           <el-button type="primary" @click="handleSubmit">
             {{ crewForm.id ? "保存修改" : "新增船员" }}
           </el-button>
@@ -111,6 +151,10 @@ import { ref } from "vue";
 import store from "@/store";
 import api from "../apis/fetch";
 const props = defineProps({
+  btnText: {
+    type: String,
+    default: "新增船员",
+  },
   crewId: {
     type: String,
     default: "",
@@ -127,6 +171,10 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 const emit = defineEmits(["onSubmit"]);
 const dialogVisible = ref(false);
@@ -199,7 +247,9 @@ function uploadFileSuccess(e) {
 function handleClick() {
   dialogVisible.value = true;
   if (props.crewId) {
-    crewForm.value = props.crewInfo;
+    crewForm.value = {
+      ...props.crewInfo,
+    };
   }
 }
 

src/views/shipManage/shipDetail.vue

@@ -39,19 +39,22 @@
     <el-table-column align="center" label="详情" min-width="120">
       <template #default="scope">
         <div class="df aic jcc">
-          <el-button
+          <CrewInfo
             class="mr10"
-            type="primary"
-            @click="goToCrewDetail(scope.row)"
-          >
-            详情
-          </el-button>
+            :shipCode="route.query.shipCode"
+            :shipname="shipInfos[0].shipname"
+            :crewId="scope.row.id"
+            :crewInfo="scope.row"
+            btnText="查看"
+            disabled
+          ></CrewInfo>
           <CrewInfo
             class="mr10"
             :shipCode="route.query.shipCode"
             :shipname="shipInfos[0].shipname"
             :crewId="scope.row.id"
             :crewInfo="scope.row"
+            btnText="修改"
             @onSubmit="getCrewList"
           ></CrewInfo>
           <el-button type="danger" @click="deleteCrew(scope.row)">