更新

package.json

@@ -19,15 +19,15 @@
     "moment": "^2.29.4",
     "pinia": "^2.0.26",
     "vite-plugin-compression": "^0.3.5",
-    "vue": "^3.2.16",
+    "vue": "^3.2.34",
     "vue-router": "^4.0.4",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^1.9.3",
-    "unplugin-auto-import": "^0.5.11",
-    "unplugin-vue-components": "^0.17.18",
-    "vite": "^2.6.4",
-    "sass": "^1.47.0"
+    "sass": "^1.47.0",
+    "unplugin-auto-import": "^0.12.0",
+    "unplugin-vue-components": "^0.22.11",
+    "vite": "^3.2.0"
   }
 }

src/components/ShipCerts.vue

@@ -1,73 +1,146 @@
 <template>
-  <div>
-    <div>
-      <div class="df">
-        <div class="mr30">船舶国籍证书</div>
-        <div>有效期区间</div>
+  <div class="pl50">
+    <div v-for="(item, index) in shipCerts" :key="item.title">
+      <div v-if="index == 4" class="container-title fs28">船舶保险</div>
+      <div class="df aic mb10">
+        <div class="c6 fs20" style="width: 260px">{{ item.title }}</div>
+        <div>
+          <el-date-picker
+            style="width: 240px"
+            v-model="item.date"
+            @change="changeDate($event, index)"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="有效期开始"
+            end-placeholder="有效期结束"
+            unlink-panels
+            value-format="YYYY-MM-DD"
+            format="YYYY/MM/DD"
+          />
+        </div>
       </div>
+
       <Uploader
+        class="mb40"
         :uploaderId="'certsId' + 'country'"
-        :params="isUpdate ? { ...updateParams, type: 1 } : addParams"
+        :params="isUpdate ? { ...updateParams, type: item.type } : addParams"
         :actionUrl="
           isUpdate ? store.state.updateCertsUrl : store.state.addCertsUrl
         "
         :disabled="disabled"
-        :fileList="list1"
-        @onSendFileList="success1"
+        :fileList="item.certs"
+        @onSendFileList="uploadSuccess($event, index)"
       ></Uploader>
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import { defineComponent, computed, ref, onMounted, watch } from "vue";
 import _ from "lodash";
 import store from "../store";
 
-export default defineComponent({
-  props: {
-    certsId: {
-      type: String,
-      default: "cert",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    isUpdate: {
-      type: Boolean,
-      default: false,
-    },
-    shipCode: String,
+const props = defineProps({
+  certsId: {
+    type: String,
+    default: "cert",
   },
-  emits: ["onPreview", "onSendFileList"],
-  setup(props, { emit }) {
-    function initCerts(shipCerts) {
-      console.log(shipCerts);
-    }
-    let updateParams = ref({
-      shipCode: props.shipCode,
-      loginAccountId: localStorage.loginAccountId,
-    });
-    let addParams = ref({
-      loginAccountId: localStorage.loginAccountId,
-    });
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  isUpdate: {
+    type: Boolean,
+    default: false,
+  },
+  shipCode: String,
+});
+const emit = defineEmits(["submit"]);
+
+function initCerts(certs) {
+  console.log(certs);
+}
+let updateParams = ref({
+  shipCode: props.shipCode,
+  loginAccountId: localStorage.loginAccountId,
+});
+let addParams = ref({
+  loginAccountId: localStorage.loginAccountId,
+});
 
-    let list1 = ref([]);
-    function success1(list) {
-      console.log(list);
+function uploadSuccess(list, index) {
+  console.log(list);
+  if (list.length) {
+    let { url, response } = list[0];
+    if (response) {
+      let { downloadUrl, viewUrl, key } = response.result;
+      shipCerts.value[index].certs.push({
+        url,
+        downloadUrl,
+        viewUrl,
+        key,
+      });
+    } else {
+      shipCerts.value[index].certs = list;
     }
-    onMounted(() => {});
+  } else {
+    shipCerts.value[index].certs = [];
+  }
+}
 
-    return {
-      initCerts,
-      store,
-      updateParams,
-      addParams,
-      list1,
-      success1,
-    };
+function changeDate(e, index) {
+  shipCerts.value[index].startValidTime = e[0];
+  shipCerts.value[index].endtValidTime = e[1];
+}
+let shipCerts = ref([
+  {
+    title: "船舶国籍证书",
+    type: 1,
+    date: "",
+    startValidTime: "",
+    endtValidTime: "",
+    certs: [],
+  },
+  {
+    title: "内河船舶适航证书",
+    type: 2,
+    date: "",
+    startValidTime: "",
+    endtValidTime: "",
+    certs: [],
+  },
+  {
+    title: "船舶年审合格证书",
+    type: 3,
+    date: "",
+    startValidTime: "",
+    endtValidTime: "",
+    certs: [],
+  },
+  {
+    title: "内河船舶最低安全配员证书",
+    type: 4,
+    date: "",
+    startValidTime: "",
+    endtValidTime: "",
+    certs: [],
+  },
+  {
+    title: "船舶保险",
+    type: 5,
+    date: "",
+    startValidTime: "",
+    endtValidTime: "",
+    certs: [],
   },
+]);
+function getShipCerts() {
+  return shipCerts.value;
+}
+defineExpose({
+  initCerts,
+  getShipCerts,
 });
+onMounted(() => {});
 </script>
 
 <style></style>

src/components/ShipInfo.vue

@@ -0,0 +1,283 @@
+<template>
+  <div>
+    <div class="container-title">船舶信息</div>
+    <div class="pl50 pt30 bgf">
+      <el-button-group class="mr20">
+        <el-button
+          v-for="(item, index) in shipInfos"
+          :key="item.code"
+          @click="currentIndex = index"
+          :type="index == currentIndex ? 'primary' : ''"
+        >
+          {{ item.shipname || "新增船舶" }}
+        </el-button>
+      </el-button-group>
+      <el-button @click="deleteShip(currentIndex)" type="primary" class="mr20">
+        删除当前船舶
+      </el-button>
+      <el-button
+        v-if="shipInfos.length == 0 || shipInfos[currentIndex].code"
+        @click="addShip()"
+        type="primary"
+      >
+        新增船舶
+      </el-button>
+    </div>
+    <div class="line-container-p24">
+      <div class="line">
+        <div class="info-line">
+          <div class="info-line-title">船名</div>
+          <el-input
+            class="info-line-text"
+            v-model="shipInfos[currentIndex].shipname"
+            :disabled="unchangeableShip"
+          ></el-input>
+          <view class="unit"></view>
+        </div>
+        <div class="info-line">
+          <div class="info-line-title">MMSI</div>
+          <el-input
+            class="info-line-text"
+            v-model="shipInfos[currentIndex].mmsi"
+            :disabled="unchangeableShip || !!shipInfos[currentIndex].shipId"
+            @blur="searchShip($event, currentIndex)"
+          ></el-input>
+        </div>
+      </div>
+      <div class="line">
+        <div class="info-line">
+          <div class="info-line-title">船长</div>
+          <el-input
+            class="info-line-text"
+            v-model="shipInfos[currentIndex].length"
+            :disabled="unchangeableShip"
+          ></el-input>
+          <view class="unit">米</view>
+        </div>
+        <div class="info-line">
+          <div class="info-line-title">船宽</div>
+          <el-input
+            class="info-line-text"
+            v-model="shipInfos[currentIndex].breadth"
+            :disabled="unchangeableShip"
+          ></el-input>
+          <view class="unit">米</view>
+        </div>
+      </div>
+      <div class="line">
+        <div class="info-line">
+          <div class="info-line-title">吨位</div>
+          <el-input
+            class="info-line-text"
+            v-model="shipInfos[currentIndex].loadTons"
+            :disabled="unchangeableShip"
+          ></el-input>
+          <view class="unit">吨</view>
+        </div>
+        <div class="info-line">
+          <div class="info-line-title">船龄</div>
+          <el-input
+            class="info-line-text"
+            v-model="shipInfos[currentIndex].age"
+            :disabled="unchangeableShip"
+          ></el-input>
+          <view class="unit">年</view>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="container-title">船舶证书</div>
+      <div
+        v-for="(item, index) in shipInfos[currentIndex].shipCerts"
+        :key="item.title"
+        style="background: #fff"
+        class="pt20"
+      >
+        <div
+          v-if="index == 4"
+          class="container-title fs18 pt10 pb10"
+          style="background: #f3f4f5"
+        >
+          船舶保险
+        </div>
+        <div class="df aic pl40 pb20">
+          <div class="c6 fs16 mr30">{{ item.typeName }}</div>
+          <div>
+            <el-date-picker
+              style="width: 240px"
+              v-model="item.date"
+              @change="changeDate($event, index)"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="有效期开始"
+              end-placeholder="有效期结束"
+              unlink-panels
+              value-format="YYYY/MM/DD"
+              format="YYYY/MM/DD"
+            />
+          </div>
+        </div>
+        <Uploader
+          class="pl40 pb20"
+          :uploaderId="'certsId' + 'country'"
+          :params="
+            shipInfos[currentIndex].code
+              ? { ...updateParams, type: item.type }
+              : addParams
+          "
+          :actionUrl="
+            shipInfos[currentIndex].code
+              ? store.state.updateCertsUrl
+              : store.state.addCertsUrl
+          "
+          :disabled="disabled"
+          :fileList="item.certs"
+          @onUploadFileList="uploadSuccess($event, index)"
+          @onRemoveFileList="removeCert($event, index)"
+        ></Uploader>
+      </div>
+      <div class="p30 mb30 df jcfe" style="background: #fff">
+        <el-button @click="submit" type="primary">确定</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { defineComponent, computed, ref, onMounted, watch } from "vue";
+import { ElMessage } from "element-plus";
+import api from "../apis/fetch";
+import _ from "lodash";
+import store from "../store";
+
+const props = defineProps({
+  certsId: {
+    type: String,
+    default: "cert",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  shipInfos: {
+    type: Array,
+    default: [{}],
+  },
+  shipOwnerId: String,
+});
+let currentIndex = ref(0);
+const emit = defineEmits(["submit"]);
+
+function initCerts(certs) {
+  console.log(certs);
+}
+let updateParams = ref({
+  shipCode: props.shipInfos[currentIndex.value].code,
+  loginAccountId: localStorage.loginAccountId,
+});
+let addParams = ref({
+  loginAccountId: localStorage.loginAccountId,
+});
+
+function uploadSuccess(list, index) {
+  console.log(list);
+  if (list.length) {
+    let { url, response } = list[0];
+    if (response) {
+      let { downloadUrl, viewUrl, key } = response.result;
+      props.shipInfos[currentIndex.value].shipCerts[index].certs.push({
+        url,
+        downloadUrl,
+        viewUrl,
+        key,
+      });
+    } else {
+      props.shipInfos[currentIndex.value].shipCerts[index].certs = list;
+    }
+  } else {
+    props.shipInfos[currentIndex.value].shipCerts[index].certs = [];
+  }
+}
+async function removeCert({ file, list }, index) {
+  if (props.shipInfos[currentIndex.value].code) {
+    let { data } = await api.deleteShipCert({ shipCertId: file.id });
+    if (data.status == 0) {
+      ElMessage({
+        message: "删除成功!",
+        type: "success",
+      });
+    }
+  }
+}
+
+async function changeDate(e, index) {
+  if (props.shipInfos[currentIndex.value].code) {
+    let res = await api.updateShipCertValid({
+      shipCode: props.shipInfos[currentIndex.value].code,
+      type: props.shipInfos[currentIndex.value].shipCerts[index].type,
+      startValidTime: e[0],
+      endValidTime: e[1],
+    });
+  } else {
+    props.shipInfos[currentIndex.value].shipCerts[index].startValidTime = e[0];
+    props.shipInfos[currentIndex.value].shipCerts[index].endValidTime = e[1];
+  }
+}
+let initShipInfo = {
+  shipId: 0,
+  shipCerts: [],
+};
+function getShipCerts() {
+  return shipCerts.value;
+}
+let unchangeableShip = ref(false);
+
+async function searchShip(e) {
+  if (e.target.value.length != 9) return;
+  let { data } = await api.searchShip({
+    mmsi: e.target.value,
+  });
+  if (data.status == 0) {
+    data.result.shipCerts[0].typeName = "船舶国籍证书";
+    data.result.shipCerts[1].typeName = "内河船舶适航证书";
+    data.result.shipCerts[2].typeName = "船舶年审合格证书";
+    data.result.shipCerts[3].typeName = "内河船舶最低安全配员证书";
+    data.result.shipCerts[4].typeName = "船舶保险";
+    for (let i of data.result.shipCerts) {
+      for (let j of i.certs) {
+        j.url = j.viewUrl;
+      }
+    }
+    props.shipInfos[currentIndex.value] = data.result;
+  }
+}
+function deleteShip(item) {
+  console.log(item);
+}
+function addShip(item) {
+  props.shipInfos.push(initShipInfo);
+
+  currentIndex.value = props.shipInfos.length - 1;
+}
+
+async function submit() {
+  console.log(props.shipInfos[currentIndex.value]);
+  let res = await api.addShip({
+    ...props.shipInfos[currentIndex.value],
+    shipOwnerId: props.shipOwnerId,
+  });
+}
+
+defineExpose({
+  initCerts,
+  getShipCerts,
+});
+onMounted(() => {});
+</script>
+
+<style scoped>
+.unit {
+  width: 40px;
+  text-align: center;
+  color: #555;
+}
+</style>

src/components/Uploader.vue

@@ -8,6 +8,7 @@
       :action="actionUrl"
       list-type="picture-card"
       :on-preview="preview"
+      :before-remove="deleteComfirm"
       :on-remove="remove"
       :data="params"
       :on-success="uploadSuccess"
@@ -27,82 +28,69 @@
     </el-dialog>
   </div>
 </template>
-<script>
+<script setup>
 import { defineComponent, computed, ref, onMounted, watch } from "vue";
-import { ElMessage, ElNotification } from "element-plus";
+import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
 import store from "../store/index";
 
-export default defineComponent({
-  props: {
-    uploaderId: {
-      type: String,
-      default: "uploader",
-    },
-    limit: {
-      type: Number,
-      default: 100,
-    },
-    params: Object,
-    actionUrl: String,
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    fileList: Array,
-    uploadText: {
-      type: String,
-      default: "拖拽或点击上传",
-    },
+const emit = defineEmits(["onPreview", "onUploadFileList", "onRemoveFileList"]);
+const props = defineProps({
+  uploaderId: {
+    type: String,
+    default: "uploader",
   },
-  emits: ["onPreview", "onSendFileList"],
-  setup(props, { emit }) {
-    let dialogVisible = ref(false);
-    let dialogImageUrl = ref("");
-    function preview(file) {
-      dialogVisible.value = true;
-      dialogImageUrl.value = file.url;
-    }
-    function remove(file, list) {
-      emit("onSendFileList", list);
-    }
-    function uploadSuccess(res, file, list) {
-      emit("onSendFileList", list);
-    }
-    function onExceed(files, fileList) {
-      ElMessage({
-        message: `超出文件数量限制 (最大数量:${props.limit})`,
-        type: "warning",
-      });
-    }
-    function changeDragVisable(boo) {
-      //   try {
-      //     let d = document.getElementById(props.uploaderId);
-      //     d.childNodes[1].style.display = boo ? "inline-block" : "none";
-      //   } catch (error) {}
-
-      //   return;
-      let a = document.getElementsByClassName("el-upload-dragger");
-      let b = document.getElementsByClassName("el-upload--picture-card");
-      for (let i of a) {
-        i.style.display = boo ? "inline-block" : "none";
-      }
-      for (let i of b) {
-        i.style.display = boo ? "inline-block" : "none";
-      }
-    }
-    onMounted(() => {});
-
-    return {
-      preview,
-      remove,
-      uploadSuccess,
-      dialogVisible,
-      dialogImageUrl,
-      preview,
-      onExceed,
-    };
+  limit: {
+    type: Number,
+    default: 100,
+  },
+  params: Object,
+  actionUrl: String,
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  fileList: Array,
+  uploadText: {
+    type: String,
+    default: "拖拽或点击上传",
   },
 });
+let dialogVisible = ref(false);
+let dialogImageUrl = ref("");
+function preview(file) {
+  dialogVisible.value = true;
+  dialogImageUrl.value = file.url;
+}
+
+function deleteComfirm() {
+  return new Promise((resolve, reject) => {
+    ElMessageBox.confirm("确认删除?", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    })
+      .then(() => {
+        resolve(true);
+      })
+      .catch(() => {
+        reject;
+      });
+  });
+}
+
+function remove(file, list) {
+  emit("onRemoveFileList", { file, list });
+}
+function uploadSuccess(res, file, list) {
+  emit("onUploadFileList", list);
+}
+function onExceed(files, fileList) {
+  ElMessage({
+    message: `超出文件数量限制 (最大数量:${props.limit})`,
+    type: "warning",
+  });
+}
+onMounted(() => {});
 </script>
 <style scoped>
 .upload-plus-icon {

src/layout/AppMain.vue

@@ -1,6 +1,6 @@
 <template>
   <router-view v-slot="{ Component, route }">
-    <keep-alive>
+    <keep-alive :include="['shipList', 'shipOwnerList']">
       <component :is="Component" :key="route.path" />
     </keep-alive>
   </router-view>

src/main.js

@@ -8,6 +8,7 @@ import "./styles/index.css";
 
 import Uploader from "./components/Uploader.vue";
 import Certs from "./components/Certs.vue";
+import ShipInfo from "./components/ShipInfo.vue";
 import ShipCerts from "./components/ShipCerts.vue";
 import RemoteSearch from "./components/RemoteSearch.vue";
 import RemoteSelect from "./components/RemoteSelect.vue";
@@ -22,6 +23,7 @@ app.use(ElementPlus, {
 app.use(pinia);
 app.component("Layout", Layout);
 app.component("Certs", Certs);
+app.component("ShipInfo", ShipInfo);
 app.component("ShipCerts", ShipCerts);
 app.component("Uploader", Uploader);
 app.component("RemoteSearch", RemoteSearch);

src/router/index.js

@@ -30,6 +30,7 @@ const router = createRouter({
       name: "shipList",
       meta: {
         title: "船舶列表",
+        keepAlive: true,
       },
       component: () => import("../views/shipManage/shipList.vue"),
     },

src/store/index.js

@@ -4,7 +4,7 @@ console.log(import.meta.env.VITE_PROJECT_ENV);
 let baseurl = import.meta.env.VITE_BASEURL;
 const idCardUrl = `${baseurl}cos/uploadIdCard`;
 const addCertsUrl = `${baseurl}cos/uploadShipCertNew`;
-const updateCertsUrl = `${baseurl}cos/uploadShipCerUpdate`;
+const updateCertsUrl = `${baseurl}cos/uploadShipCertUpdate`;
 
 const store = createStore({
   state: {

src/styles/background.css

@@ -0,0 +1,3 @@
+.bgf{
+    background: #fff
+}

src/styles/index.css

@@ -2,6 +2,7 @@
 @import "./padding.css";
 @import "./font-size.css";
 @import "./color.css";
+@import "./background.css";
 
 *{
   box-sizing: border-box;

src/views/shipManage/shipDetail.vue

@@ -8,367 +8,9 @@
       返回船舶列表
     </div>
   </div>
-  <div class="container-title">船舶信息</div>
-  <div class="line-container-p24">
-    <div class="line">
-      <div class="info-line">
-        <div class="info-line-title">船名</div>
-        <el-input
-          class="info-line-text"
-          v-model="shipDetail.shipname"
-          :disabled="unchangeable"
-        ></el-input>
-      </div>
-      <div class="info-line">
-        <div class="info-line-title">MMSI</div>
-        <el-input
-          class="info-line-text"
-          v-model="shipDetail.mmsi"
-          :disabled="unchangeable"
-        ></el-input>
-      </div>
-    </div>
-    <div class="line">
-      <div class="info-line">
-        <div class="info-line-title">船长</div>
-        <el-input
-          class="info-line-text"
-          v-model="shipDetail.length"
-          :disabled="unchangeable"
-        ></el-input>
-      </div>
-      <div class="info-line">
-        <div class="info-line-title">船宽</div>
-        <el-input
-          class="info-line-text"
-          v-model="shipDetail.breadth"
-          :disabled="unchangeable"
-        ></el-input>
-      </div>
-    </div>
-    <div class="line">
-      <div class="info-line">
-        <div class="info-line-title">吨位</div>
-        <el-input
-          class="info-line-text"
-          v-model="shipDetail.tonnage"
-          :disabled="unchangeable"
-        ></el-input>
-      </div>
-      <div class="info-line">
-        <div class="info-line-title">载货吨位</div>
-        <el-input
-          class="info-line-text"
-          v-model="shipDetail.loadTons"
-          :disabled="unchangeable"
-        ></el-input>
-      </div>
-    </div>
-    <div class="line">
-      <div class="info-line">
-        <div class="info-line-title">吃水</div>
-        <el-input
-          class="info-line-text"
-          v-model="shipDetail.draught"
-          :disabled="unchangeable"
-        ></el-input>
-      </div>
-    </div>
-    <Certs ref="certs"></Certs>
-    <div class="df aic jcfe">
-      <el-button v-if="unchangeable" type="primary" @click="change">
-        修改
-      </el-button>
-      <el-button v-if="!unchangeable" @click="cancelChange">取消</el-button>
-      <el-button v-if="!unchangeable" type="primary" @click="submitChange">
-        提交
-      </el-button>
-    </div>
-    <div
-      style="margin-top: 60px; min-width: 800px; width: 90%; margin-left: 60px"
-    >
-      <el-table border :data="shipOwnerTableData" stripe style="width: 100%">
-        <el-table-column
-          type="index"
-          label="序号"
-          min-width="80"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="userName"
-          label="船东名称"
-          min-width="120"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="phone"
-          label="手机号"
-          min-width="160"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="createTime"
-          label="入驻时间"
-          min-width="200"
-          align="center"
-        ></el-table-column>
-        <el-table-column label="操作" min-width="80" align="center">
-          <template v-slot="scope">
-            <el-button
-              @click="shipOwnerDetail(scope.row.userId, tableData)"
-              text
-              size="small"
-            >
-              查看详情
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <div style="width: 100%; text-align: right; margin-top: 43px">
-        <el-pagination
-          background
-          layout="prev, pager, next"
-          :current-page="currentPage"
-          :total="shipOwnerTotal"
-          @current-change="shipOwnerPageChange"
-        ></el-pagination>
-      </div>
-    </div>
-  </div>
-  <div class="container-title">航次信息</div>
-  <div class="full-container-p24">
-    <div style="display: flex; justify-content: space-between">
-      <div class="df aic">
-        <div
-          @click="changeVoyageType(1)"
-          :class="
-            currentbtn
-              ? 'currentbtn radio-btns left-radius'
-              : 'radio-btns left-radius'
-          "
-        >
-          执行中航次
-        </div>
-        <div
-          @click="changeVoyageType(2)"
-          :class="
-            currentbtn
-              ? ' radio-btns right-radius'
-              : 'radio-btns right-radius currentbtn'
-          "
-          style="margin-right: 40px"
-        >
-          历史航次
-        </div>
-        <el-input
-          placeholder="请输入货主名称/联系人/联系人手机号"
-          prefix-icon="el-icon-search"
-          v-model="term"
-          clearable
-          style="width: 330px"
-        ></el-input>
-        <div class="search-btn" @click="getVoyageList(1)">查询</div>
-      </div>
-      <!-- <div class="cargo-owner-add" @click="voyageAddDialogVisible = true">
-        添加航次
-      </div> -->
-    </div>
-    <el-dialog v-model="voyageAddDialogVisible" title="添加航次">
-      <el-form
-        :rules="rules"
-        label-position="right"
-        label-width="80px"
-        ref="addVoyageForm"
-        :model="voyageForm"
-        :before-close="resetAddVoyageForm"
-      >
-        <div class="df ffw">
-          <!-- <el-form-item prop="voyageName" label="航次名称">
-            <el-input v-model="voyageForm.voyageName"></el-input>
-          </el-form-item>
-          <el-form-item label=""></el-form-item> -->
-          <el-form-item prop="shipName" label="船舶">
-            <!-- <el-input v-model="voyageForm.shipOwnerId"></el-input> -->
-            <el-autocomplete
-              v-model="voyageForm.shipName"
-              :fetch-suggestions="searchShip"
-              placeholder="选择船舶"
-              @select="selectShip"
-              disabled
-            />
-          </el-form-item>
-          <el-form-item prop="cargoOwnerId" label="货主">
-            <el-autocomplete
-              v-model="voyageForm.cargoOwnerName"
-              :fetch-suggestions="searchCargoOwner"
-              placeholder="选择货主"
-              @select="selectCargoOwner"
-            />
-          </el-form-item>
-          <el-form-item prop="startTime" label="开始时间">
-            <el-date-picker
-              v-model="voyageForm.startTime"
-              type="date"
-              value-format="YYYY/MM/DD"
-              placeholder="航次开始时间"
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item prop="endTime" label="结束时间">
-            <el-date-picker
-              v-model="voyageForm.endTime"
-              type="date"
-              value-format="YYYY/MM/DD"
-              placeholder="航次结束时间"
-              disabled
-            ></el-date-picker>
-          </el-form-item>
-          <el-form-item prop="loadPort" label="装货港">
-            <el-autocomplete
-              v-model="voyageForm.loadPort"
-              :fetch-suggestions="getCol"
-              placeholder="选择装货港"
-              @select="selectLoadPort"
-            />
-          </el-form-item>
-          <el-form-item prop="dischargeProt" label="卸货港">
-            <el-autocomplete
-              v-model="voyageForm.dischargeProt"
-              :fetch-suggestions="getCol"
-              placeholder="选择卸货港"
-              @select="selectDischargeProt"
-            />
-          </el-form-item>
-          <el-form-item prop="cargo" label="货种">
-            <el-input v-model="voyageForm.cargo"></el-input>
-          </el-form-item>
-          <el-form-item></el-form-item>
-          <el-form-item prop="tons" label="吨位">
-            <el-input v-model="voyageForm.tons"></el-input>
-          </el-form-item>
-          <el-form-item prop="pieces" label="件数">
-            <el-input v-model="voyageForm.pieces"></el-input>
-          </el-form-item>
-        </div>
-      </el-form>
-      <template #footer>
-        <span class="dialog-footer">
-          <el-button @click="resetAddVoyageForm">取消</el-button>
-          <el-button type="primary" @click="addVoyage">确定</el-button>
-        </span>
-      </template>
-    </el-dialog>
-    <el-table :data="tableData" stripe style="width: 100%; margin-top: 24px">
-      <el-table-column
-        prop="voyageName"
-        label="航次名称"
-        min-width="140"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="loadPort"
-        label="装货港"
-        min-width="90"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="dischargePort"
-        label="卸货港"
-        min-width="80"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="expectedArrivalTime"
-        label="预计到港时间"
-        sortable
-        min-width="140"
-        align="center"
-      >
-        <template v-slot="scope">
-          {{ scope.row.arrived ? "已到港" : scope.row.expectedArrivalTime }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="abnormalStatus"
-        label="航次状态"
-        min-width="80"
-        align="center"
-      >
-        <template v-slot="scope">
-          {{ scope.row.abnormalStatus == 0 ? "正常" : "异常" }}
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="daysInPortStr"
-        label="在港天数"
-        sortable
-        min-width="100"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="todayPhotoCount"
-        label="今日照片"
-        min-width="70"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="cargo"
-        label="货种"
-        min-width="70"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="actualLoadTons"
-        label="装载吨位"
-        min-width="80"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="unloadedtons"
-        label="已卸货吨位"
-        min-width="80"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="remainTons"
-        label="剩余吨位"
-        min-width="80"
-        align="center"
-      ></el-table-column>
-      <el-table-column
-        prop="hasInsurance"
-        label="保险状态"
-        min-width="70"
-        align="center"
-      >
-        <template v-slot="scope">
-          {{ scope.row.hasInsurance == 0 ? "未购买" : "已购买" }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" min-width="80" align="center">
-        <template v-slot="scope">
-          <el-button
-            @click="voyageDetail(scope.row.id, tableData)"
-            text
-            size="small"
-          >
-            查看详情
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div style="width: 100%; text-align: right; margin-top: 43px">
-      <el-pagination
-        background
-        layout="prev, pager, next"
-        :current-page="currentPage"
-        :total="total"
-        @current-change="pageChange"
-      ></el-pagination>
-    </div>
-  </div>
+  <ShipInfo :data="shipDetail"></ShipInfo>
 </template>
-<script>
-// import { uploadUrl } from "../../apis/config";
+<script setup>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
 import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import store from "../../store";
@@ -377,479 +19,14 @@ import md5 from "md5";
 import api from "../../apis/fetch";
 import { useRoute } from "vue-router";
 import _ from "lodash";
-export default {
-  setup() {
-    const route = useRoute();
-    let shipDetail = ref({});
-    async function getShipDetail() {
-      let res = await api.getShipDetail({
-        shipId: route.query.shipId,
-      });
-      if (res.data.status == 0) {
-        shipDetail.value = res.data.result;
-        voyageForm.voyageForm.shipName = res.data.result.shipname;
-        voyageForm.voyageForm.shipId = res.data.result.id;
-        certs.value.initCerts(shipDetail.value.shipCertificates);
-      } else {
-        console.log(res);
-      }
-    }
-    let shipDetailCache = ref({});
-    function change() {
-      shipDetailCache.value = _.cloneDeep(shipDetail.value);
-      certs.value.editCerts();
-      unchangeable.value = false;
-    }
-
-    function cancelChange() {
-      if (!_.isEqual(shipDetail.value, shipDetailCache.value)) {
-        shipDetail.value = _.cloneDeep(shipDetailCache.value);
-      }
-      certs.value.cancelEditCerts();
-      unchangeable.value = true;
-    }
-
-    let unchangeable = ref(true);
-
-    async function submitChange() {
-      shipDetail.value.shipId = shipDetail.value.id;
-      shipDetail.value.shipCerts = certs.value.sendCerts();
-      delete shipDetail.value.shipCertificates;
-      let postData = {
-        ...shipDetail.value,
-        userId: 0,
-      };
-      let res = await api.updateShip(postData);
-      if (res.data.status == 0) {
-        unchangeable.value = true;
-        ElNotification({
-          type: "success",
-          title: res.data.msg,
-        });
-      } else {
-        ElNotification({
-          type: "error",
-          title: res.data.msg,
-        });
-        console.log(res);
-      }
-      certs.value.disabled = true;
-
-      let t = setTimeout(() => {
-        getShipDetail();
-        clearTimeout(t);
-      }, 500);
-    }
-    let currentbtn = ref(true);
-    let currentPage = ref(1);
-    let term = ref("");
-    let tableData = ref();
-    let total = ref(0);
-    let status = ref(1);
-    async function getVoyageList(page) {
-      currentPage.value = page || currentPage.value;
-      let res = await api.getVoyageList({
-        cargoOwnerId: 0,
-        shipId: route.query.shipId,
-        status: status.value,
-        term: term.value,
-        currentPage: currentPage.value,
-        size: 10,
-      });
-      if (res.data.status == 0) {
-        tableData.value = res.data.result;
-        total.value = res.data.total;
-      } else {
-        tableData.value = [];
-        total.value = 0;
-      }
-    }
-    function changeVoyageType(s) {
-      currentPage.value = 1;
-      currentbtn.value = s == 1;
-      status.value = s;
-      getVoyageList();
-    }
-    async function voyageDetail(id) {
-      router.push({
-        path: "/voyage/voyageDetail",
-        query: {
-          id,
-        },
-      });
-    }
-    function pageChange(e) {
-      currentPage.value = e;
-      getVoyageList();
-    }
-
-    function goToVoyageAdd() {
-      router.push({
-        path: "/voyage/voyageAdd",
-      });
-    }
-    let voyageAddDialogVisible = ref(false);
-    const rules = reactive({
-      rules: {
-        voyageName: [
-          { required: false, message: "请填写航次名称", trigger: "blur" },
-        ],
-        shipOwnerId: [
-          { required: true, message: "请选择船东", trigger: "blur" },
-        ],
-        cargoOwnerId: [
-          { required: true, message: "请选择货主", trigger: "blur" },
-        ],
-        startTime: [
-          { required: true, message: "请填写开始时间", trigger: "blur" },
-        ],
-        endTime: [
-          { required: false, message: "请填写结束时间", trigger: "blur" },
-        ],
-        loadPort: [
-          { required: true, message: "请填写装货港", trigger: "blur" },
-        ],
-        dischargeProt: [
-          { required: true, message: "请填写卸货港", trigger: "blur" },
-        ],
-        cargo: [{ required: true, message: "请填写货种", trigger: "blur" }],
-        tons: [{ required: false, message: "请填写吨位", trigger: "blur" }],
-        pieces: [{ required: false, message: "请填写件数", trigger: "blur" }],
-      },
-    });
-    let voyageForm = reactive({
-      voyageForm: {
-        voyageName: "",
-        cargoOwnerId: "",
-        startTime: "",
-        endTime: "",
-        loadPort: "",
-        dischargeProt: "",
-        cargo: "",
-        tons: "",
-      },
-    });
-    let addVoyageForm = ref(null);
-
-    async function addVoyage() {
-      console.log("提交", voyageForm.voyageForm);
-      addVoyageForm.value.validate(async (valid) => {
-        if (valid) {
-          // console.log("提交", voyageForm.voyageForm);
-          let res = await api.addVoyage({
-            ...voyageForm.voyageForm,
-          });
-          if (res.data.status == 0) {
-            ElNotification({
-              title: res.data.msg,
-              type: "success",
-            });
-            resetAddVoyageForm();
-          } else {
-            console.log(res);
-            ElNotification({
-              title: res.data.msg,
-              type: "error",
-            });
-          }
-        }
-      });
-    }
-
-    async function searchShip(queryString, cb) {
-      if (!queryString) return;
-      let res = await api.searchShip({
-        term: queryString,
-      });
-      let ships = [];
-      if (res.data.status == 0) {
-        ships = res.data.result;
-        for (let i of ships) {
-          i.value = `${i.shipName}`;
-        }
-        cb(ships);
-      }
-    }
-    const selectShip = (item) => {
-      voyageForm.voyageForm.shipId = item.shipId;
-    };
-
-    async function searchCargoOwner(queryString, cb) {
-      if (!queryString) return;
-      let res = await api.searchUser({
-        term: queryString,
-        identity: 2,
-      });
-      let cargoOwners = [];
-      if (res.data.status == 0) {
-        cargoOwners = res.data.result;
-        for (let i of cargoOwners) {
-          i.value = `${i.userName}`;
-        }
-        cb(cargoOwners);
-      }
-    }
-
-    const selectCargoOwner = (item) => {
-      voyageForm.voyageForm.cargoOwnerId = item.userId;
-    };
-
-    const getCol = _.debounce(
-      async (queryString, cb) => {
-        if (!queryString) return;
-        let res = await api.getCol({
-          term: queryString,
-        });
-        if (res.data.status == 0) {
-          cb(res.data.result);
-        }
-      },
-      1500,
-      { leading: true }
-    );
-
-    const selectLoadPort = (item) => {
-      voyageForm.voyageForm.loadPortId = item.key;
-      voyageForm.voyageForm.loadPort = item.value;
-    };
-
-    const selectDischargeProt = (item) => {
-      voyageForm.voyageForm.dischargeProtId = item.key;
-      voyageForm.voyageForm.dischargeProt = item.value;
-    };
-
-    function resetAddVoyageForm() {
-      voyageAddDialogVisible.value = false;
-      addVoyageForm.value.resetFields();
-    }
-    let shipCurrentPage = ref(1);
-    let shipOwnerTableData = ref([]);
-    let shipOwnerCurrentPage = ref(1);
-    let shipOwnerTotal = ref(0);
-
-    async function getShipOwnerListByShipId() {
-      let res = await api.getShipOwnerListByShipId({
-        shipId: route.query.shipId,
-        currentPage: shipOwnerCurrentPage.value,
-        size: 10,
-      });
-      if (res.data.status == 0) {
-        shipOwnerTableData.value = res.data.result;
-        shipOwnerTotal.value = res.data.total;
-      } else {
-        console.log(res);
-      }
-    }
-
-    function shipOwnerDetail(userId) {
-      router.push({
-        path: "/shipOwnerManage/shipOwnerDetail",
-        query: {
-          userId,
-        },
-      });
-    }
-
-    function shipOwnerPageChange(e) {
-      shipOwnerCurrentPage.value = e;
-      getShipOwnerListByShipId();
-    }
-
-    let certs = ref(null);
-
-    onMounted(() => {
-      getShipDetail();
-      getVoyageList();
-      getShipOwnerListByShipId();
-    });
-    return {
-      unchangeable,
-      change,
-      cancelChange,
-      submitChange,
-      shipDetail,
-      router,
-      currentPage,
-      term,
-      tableData,
-      total,
-      currentbtn,
-      changeVoyageType,
-      getVoyageList,
-      voyageDetail,
-      pageChange,
-      goToVoyageAdd,
-      addVoyage,
-      voyageAddDialogVisible,
-      addVoyageForm,
-      ...toRefs(rules),
-      ...toRefs(voyageForm),
-      searchCargoOwner,
-      selectCargoOwner,
-      resetAddVoyageForm,
-      shipCurrentPage,
-      shipOwnerTableData,
-      shipOwnerCurrentPage,
-      getShipOwnerListByShipId,
-      shipOwnerDetail,
-      shipOwnerPageChange,
-      shipOwnerTotal,
-      getCol,
-      selectLoadPort,
-      selectDischargeProt,
-      searchShip,
-      selectShip,
-      certs,
-    };
-  },
-};
+const route = useRoute();
+const shipDetail = ref({});
+async function getShipDetail(shipCode) {
+  let { data } = await api.getShipDetail({ shipCode });
+  console.log(data);
+}
+onMounted(() => {
+  getShipDetail(route.query.shipCode);
+});
 </script>
-<style scoped>
-.search-btn {
-  display: inline-block;
-  width: 60px;
-  height: 32px;
-  background: #0094fe;
-  border-radius: 2px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #ffffff;
-  text-align: center;
-  line-height: 32px;
-  margin-left: 10px;
-  cursor: pointer;
-}
-
-.cargo-owner-add {
-  width: 80px;
-  height: 32px;
-  border-radius: 2px;
-  border: 1px solid #0094fe;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #0094fe;
-  line-height: 32px;
-  text-align: center;
-  cursor: pointer;
-}
-:deep().el-dialog {
-  width: 560px;
-  padding: 20px 50px;
-  border-radius: 6px;
-}
-
-:deep() .el-dialog__title {
-  font-size: 18px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #0094fe;
-}
-
-.normal-label {
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #353a42;
-  margin-right: 10px;
-}
-
-.show-input {
-  width: 280px;
-  height: 32px;
-  background: #ffffff;
-  border-radius: 2px;
-  border: 1px solid #dee0e3;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #333333;
-  line-height: 32px;
-  padding-left: 12px;
-  margin-right: 40px;
-}
-
-.radio-btns {
-  height: 38px;
-  width: 103px;
-  border: 1px solid #1486f9;
-  line-height: 38px;
-  text-align: center;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #0094fe;
-  cursor: pointer;
-}
-
-.left-radius {
-  border-top-left-radius: 19px;
-  border-bottom-left-radius: 19px;
-}
-
-.right-radius {
-  border-top-right-radius: 19px;
-  border-bottom-right-radius: 19px;
-}
-.currentbtn {
-  background: #1486f9;
-  color: #fff;
-}
-
-.search-btn {
-  display: inline-block;
-  width: 60px;
-  height: 38px;
-  background: #0094fe;
-  border-radius: 2px;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #ffffff;
-  text-align: center;
-  line-height: 38px;
-  margin-left: 10px;
-  cursor: pointer;
-}
-
-.voyage-add {
-  width: 80px;
-  height: 36px;
-  border-radius: 2px;
-  border: 1px solid #0094fe;
-  font-size: 14px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  color: #0094fe;
-  line-height: 36px;
-  text-align: center;
-  cursor: pointer;
-}
-
-:deep() .el-dialog {
-  width: 800px;
-}
-
-:deep() .el-form-item {
-  margin-right: 22px;
-  width: 300px;
-}
-
-:deep() .el-autocomplete {
-  width: 220px;
-}
-
-.upload-text {
-  height: 25%;
-  color: rgb(139, 147, 156);
-}
-
-.upload-plus-icon {
-  height: 15%;
-  color: rgb(139, 147, 156);
-  line-height: 100px;
-  font-size: 40px;
-  font-weight: 200;
-}
-</style>
+<style scoped></style>

src/views/shipManage/shipList.vue

@@ -65,7 +65,7 @@
         <el-table-column label="操作" min-width="80" align="center">
           <template v-slot="scope">
             <el-button
-              @click="shipDetail(scope.row.shipId, tableData)"
+              @click="shipDetail(scope.row.code)"
               type="primary"
               text
               size="small"
@@ -87,7 +87,7 @@
     </div>
   </div>
 </template>
-<script>
+<script setup>
 import { ref, h, reactive, toRefs, onMounted } from "vue";
 import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
 import store from "../../store";
@@ -95,54 +95,41 @@ import router from "../../router";
 import md5 from "md5";
 import api from "../../apis/fetch";
 
-export default {
-  setup() {
-    let currentPage = ref(1);
-    let term = ref("");
-    let tableData = ref([]);
-    let total = ref(0);
-    async function getShipList(page) {
-      currentPage.value = page || currentPage.value;
-      let res = await api.getShipList({
-        currentPage: currentPage.value,
-        size: 10,
-        term: term.value,
-      });
-      if (res.data.status == 0) {
-        tableData.value = res.data.result;
-        total.value = res.data.total;
-      } else {
-        tableData.value = [];
-        total.value = 0;
-      }
-    }
+let currentPage = ref(1);
+let term = ref("");
+let tableData = ref([]);
+let total = ref(0);
+async function getShipList(page) {
+  currentPage.value = page || currentPage.value;
+  let res = await api.getShipList({
+    currentPage: currentPage.value,
+    size: 10,
+    term: term.value,
+  });
+  if (res.data.status == 0) {
+    tableData.value = res.data.result;
+    total.value = res.data.total;
+  } else {
+    tableData.value = [];
+    total.value = 0;
+  }
+}
 
-    async function shipDetail(shipId) {
-      router.push({
-        path: "/shipManage/shipDetail",
-        query: {
-          shipId,
-        },
-      });
-    }
-    function pageChange(e) {
-      currentPage.value = e;
-      getShipList();
-    }
-    onMounted(() => {
-      getShipList();
-    });
-    return {
-      currentPage,
-      term,
-      tableData,
-      total,
-      getShipList,
-      shipDetail,
-      pageChange,
-    };
-  },
-};
+async function shipDetail(shipCode) {
+  router.push({
+    path: "/shipManage/shipDetail",
+    query: {
+      shipCode,
+    },
+  });
+}
+function pageChange(e) {
+  currentPage.value = e;
+  getShipList();
+}
+onMounted(() => {
+  getShipList();
+});
 </script>
 <style scoped>
 .seach-btn {

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -65,80 +65,15 @@
         ></Uploader>
       </div>
     </div>
-    <div class="df aic jcfe" v-if="addShipOwnerBtnVisable">
+    <div class="df aic jcfe" v-if="!shipOwnerDetail.id">
       <el-button type="primary" @click="addShipOwner()">确定</el-button>
     </div>
   </div>
-  <div v-if="shipInfoVisable">
-    <div class="container-title">船舶信息</div>
-    <div class="line-container-p24">
-      <div class="line">
-        <div class="info-line">
-          <div class="info-line-title">船名</div>
-          <el-input
-            class="info-line-text"
-            v-model="shipDetail.shipname"
-            :disabled="unchangeableShip"
-          ></el-input>
-          <view class="unit"></view>
-        </div>
-        <div class="info-line">
-          <div class="info-line-title">MMSI</div>
-          <el-input
-            class="info-line-text"
-            v-model="shipDetail.mmsi"
-            :disabled="unchangeableShip"
-            @blur="searchShip"
-          ></el-input>
-        </div>
-      </div>
-      <div class="line">
-        <div class="info-line">
-          <div class="info-line-title">船长</div>
-          <el-input
-            class="info-line-text"
-            v-model="shipDetail.length"
-            :disabled="unchangeableShip"
-          ></el-input>
-          <view class="unit">米</view>
-        </div>
-        <div class="info-line">
-          <div class="info-line-title">船宽</div>
-          <el-input
-            class="info-line-text"
-            v-model="shipDetail.breadth"
-            :disabled="unchangeableShip"
-          ></el-input>
-          <view class="unit">米</view>
-        </div>
-      </div>
-      <div class="line">
-        <div class="info-line">
-          <div class="info-line-title">吨位</div>
-          <el-input
-            class="info-line-text"
-            v-model="shipDetail.loadTons"
-            :disabled="unchangeableShip"
-          ></el-input>
-          <view class="unit">吨</view>
-        </div>
-        <div class="info-line">
-          <div class="info-line-title">船龄</div>
-          <el-input
-            class="info-line-text"
-            v-model="shipDetail.age"
-            :disabled="unchangeableShip"
-          ></el-input>
-          <view class="unit">年</view>
-        </div>
-      </div>
-    </div>
-    <div class="container-title">船舶证书</div>
-    <div class="line-container-p24">
-      <ShipCerts ref="shipCerts"></ShipCerts>
-    </div>
-    <div class="container-title">船舶保险</div>
-    <div class="line-container-p24 mb20"></div>
+  <div v-if="shipOwnerDetail.shipInfo.length != 0">
+    <ShipInfo
+      :shipInfos="shipOwnerDetail.shipInfo"
+      :shipOwnerId="route.query.shipOwnerId"
+    ></ShipInfo>
   </div>
 </template>
 <script setup>
@@ -153,8 +88,14 @@ import { useRoute } from "vue-router";
 import _ from "lodash";
 
 const route = useRoute();
-let shipOwnerDetail = ref({});
-let shipDetail = ref({});
+let shipOwnerDetail = ref({
+  userName: "",
+  userPhone: "",
+  shipInfo: [],
+});
+let shipDetail = ref({
+  shipId: 0,
+});
 
 let idFrontList = ref([]);
 function idFrontUploadSuccess(list) {
@@ -232,9 +173,8 @@ async function addShipOwner() {
       type: "success",
     })
       .then(() => {
-        shipInfoVisable.value = true;
+        shipOwnerDetail.value = data.result;
         unchangeableShipOwner.value = true;
-        addShipOwnerBtnVisable.value = false;
       })
       .catch(() => {
         router.push("/shipOwnerManage/shipOwnerList");
@@ -242,13 +182,10 @@ async function addShipOwner() {
   }
 }
 
-let shipOwnerId = ref("");
-let addShipOwnerBtnVisable = ref(true);
 let unchangeableShipOwner = ref(false);
 let unchangeableShip = ref(false);
-let shipInfoVisable = ref(true);
 
-let shipCerts = ref(null);
+let shipCertsRef = ref(null);
 async function searchShip(e) {
   if (e.target.value.length != 9) return;
   let { data } = await api.searchShip({
@@ -256,16 +193,39 @@ async function searchShip(e) {
   });
   if (data.status == 0) {
     shipDetail.value = data.result;
-    shipCerts.value.initCerts(shipDetail.value.shipCerts);
+    shipCertsRef.value.initCerts(shipDetail.value.shipCerts);
+  }
+}
+
+async function submit(data) {
+  let postData = {
+    ...shipDetail.value,
+    shipOwnerId: route.query.shipOwnerId,
+  };
+  postData.shipCerts = shipCertsRef.value.getShipCerts();
+  let res = await api.addShip(postData);
+  console.log(res);
+}
+async function getShipOwnerDetail(shipOwnerId) {
+  let { data } = await api.getShipOwnerDetail({
+    shipOwnerId,
+  });
+  shipOwnerDetail.value = data.result;
+  for (let i of shipOwnerDetail.value.shipInfo) {
+    for (let j of i.shipCerts) {
+      for (let k of j.certs) {
+        k.url = k.viewUrl;
+      }
+    }
   }
+  console.log(data);
 }
 
 onMounted(() => {
   if (route.query.shipOwnerId) {
-    shipOwnerId.value = route.query.shipOwnerId;
-    getShipOwnerDetail();
+    getShipOwnerDetail(route.query.shipOwnerId);
     unchangeableShipOwner.value = true;
-    unchangeableShip.value = true;
+    unchangeableShip.value = false;
   }
 });
 </script>

src/views/shipOwnerManage/shipOwnerList.vue

@@ -88,7 +88,7 @@
         <el-table-column label="操作" min-width="80" align="center">
           <template v-slot="scope">
             <el-button
-              @click="shipOwnerDetail(scope.row.shipOwnerId, tableData)"
+              @click="shipOwnerDetail(scope.row.id)"
               type="primary"
               text
               size="small"