ToDo 证书组件,保险

src/apis/fetch.js

@@ -24,4 +24,39 @@ export default {
   updateShipOwner(data) {
     return $http("/shipOwner/update", data);
   },
+
+  // 新增船舶
+  addShip(data) {
+    return $http("/ship/add", data);
+  },
+
+  // 删除船舶
+  deleteShip(data) {
+    return $http("/ship/delete", data);
+  },
+
+  // 删除船舶证书
+  deleteShipCert(data) {
+    return $http("/ship/delete/cert", data);
+  },
+
+  // 船舶详情
+  getShipDetail(data) {
+    return $http("/ship/detail", data);
+  },
+
+  //
+  getShipList(data) {
+    return $http("/ship/list", data);
+  },
+
+  // 使用mmsi匹配船舶
+  searchShip(data) {
+    return $http("/ship/search", data);
+  },
+
+  //
+  updateShipCertValid(data) {
+    return $http("/ship/update/cert/valid", data);
+  },
 };

src/components/ShipCerts.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <div>
+      <div class="df">
+        <div class="mr30">船舶国籍证书</div>
+        <div>有效期区间</div>
+      </div>
+      <Uploader
+        :uploaderId="'certsId' + 'country'"
+        :params="isUpdate ? { ...updateParams, type: 1 } : addParams"
+        :actionUrl="
+          isUpdate ? store.state.updateCertsUrl : store.state.addCertsUrl
+        "
+        :disabled="disabled"
+        :fileList="list1"
+        @onSendFileList="success1"
+      ></Uploader>
+    </div>
+  </div>
+</template>
+<script>
+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,
+  },
+  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,
+    });
+
+    let list1 = ref([]);
+    function success1(list) {
+      console.log(list);
+    }
+    onMounted(() => {});
+
+    return {
+      initCerts,
+      store,
+      updateParams,
+      addParams,
+      list1,
+      success1,
+    };
+  },
+});
+</script>
+
+<style></style>

src/components/Upload.vue → src/components/Uploader.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-upload
-      :class="{ hide: hidden || fileList.length == limit }"
+      :class="{ hide: disabled || fileList.length == limit }"
       :id="uploaderId"
       drag
       multiple
@@ -44,10 +44,6 @@ export default defineComponent({
     },
     params: Object,
     actionUrl: String,
-    hidden: {
-      type: Boolean,
-      default: true,
-    },
     disabled: {
       type: Boolean,
       default: false,

src/main.js

@@ -6,8 +6,9 @@ import router from "./router";
 import store from "./store";
 import "./styles/index.css";
 
-import Uploader from "./components/Upload.vue";
+import Uploader from "./components/Uploader.vue";
 import Certs from "./components/Certs.vue";
+import ShipCerts from "./components/ShipCerts.vue";
 import RemoteSearch from "./components/RemoteSearch.vue";
 import RemoteSelect from "./components/RemoteSelect.vue";
 import zhCn from "element-plus/dist/locale/zh-cn.mjs";
@@ -21,7 +22,7 @@ app.use(ElementPlus, {
 app.use(pinia);
 app.component("Layout", Layout);
 app.component("Certs", Certs);
-
+app.component("ShipCerts", ShipCerts);
 app.component("Uploader", Uploader);
 app.component("RemoteSearch", RemoteSearch);
 app.component("RemoteSelect", RemoteSelect);

src/views/shipOwnerManage/shipOwnerDetail.vue

@@ -42,116 +42,103 @@
     <div class="line">
       <div class="info-line aic">
         <div class="info-line-title">上传身份证 :</div>
-        <Upload
+        <Uploader
           uploaderId="idfront"
           :limit="1"
           :params="{}"
           :actionUrl="store.state.idCardUrl"
-          :hidden="false"
-          :disabled="false"
+          :disabled="unchangeableShipOwner"
           :fileList="idFrontList"
           @onSendFileList="idFrontUploadSuccess"
           uploadText="身份证人像面"
           class="mr20"
-        ></Upload>
-        <Upload
+        ></Uploader>
+        <Uploader
           uploaderId="idback"
           :limit="1"
           :params="{}"
           :actionUrl="store.state.idCardUrl"
-          :hidden="false"
-          :disabled="false"
+          :disabled="unchangeableShipOwner"
           :fileList="idBackList"
           @onSendFileList="idBackUploadSuccess"
           uploadText="身份证国徽面"
-        ></Upload>
+        ></Uploader>
       </div>
     </div>
-    <div class="df aic jcfe">
+    <div class="df aic jcfe" v-if="addShipOwnerBtnVisable">
       <el-button type="primary" @click="addShipOwner()">确定</el-button>
     </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="unchangeableShip"
-        ></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="unchangeableShip"
-        ></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>
-      </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>
-      </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="unchangeableShip"
-        ></el-input>
+  <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="info-line">
-        <div class="info-line-title">载货吨位</div>
-        <el-input
-          class="info-line-text"
-          v-model="shipDetail.loadTons"
-          :disabled="unchangeableShip"
-        ></el-input>
+      <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>
-    <div class="line">
-      <div class="info-line">
-        <div class="info-line-title">吃水</div>
-        <el-input
-          class="info-line-text"
-          v-model="shipDetail.draught"
-          :disabled="unchangeableShip"
-        ></el-input>
+      <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="df aic jcfe">
-      <el-button v-if="unchangeableShip" type="primary" @click="change(0)">
-        修改
-      </el-button>
-      <el-button v-if="!unchangeableShip" @click="cancelChange(0)">
-        取消
-      </el-button>
-      <el-button
-        v-if="!unchangeableShip"
-        type="primary"
-        @click="submitChange(0)"
-      >
-        提交
-      </el-button>
+    <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>
 </template>
 <script setup>
@@ -168,88 +155,6 @@ import _ from "lodash";
 const route = useRoute();
 let shipOwnerDetail = ref({});
 let shipDetail = ref({});
-let unchangeableShipOwner = ref(false);
-let unchangeableShip = ref(false);
-async function getShipOwnerDetail() {
-  let res = await api.getShipOwnerDetail({
-    shipOwnerId: route.query.shipOwnerId,
-  });
-  if (res.data.status == 0) {
-    let r = res.data.result;
-
-    let {
-      //船东信息
-      idcardBackDownloadUrl,
-      idcardBackFileKey,
-      idcardBackViewUrl,
-      idcardFrontDownloadUrl,
-      idcardFrontFileKey,
-      idcardFrontViewUrl,
-      idcardNo,
-      phone,
-      preferenceCargo,
-      userId: shipOwnerId,
-      userName,
-
-      // 船舶信息
-      breadth,
-      draught,
-      length,
-      loadTons,
-      mmsi,
-      shipId,
-      shipname,
-      tonnage,
-      shipCerts,
-    } = r;
-
-    shipOwnerDetail.value = {
-      idcardNo,
-      phone,
-      preferenceCargo,
-      shipOwnerId,
-      userName,
-    };
-    idFrontFile.value = idcardFrontFileKey
-      ? [
-          {
-            url: idcardFrontViewUrl,
-            idcardFrontDownloadUrl,
-            idcardFrontFileKey,
-            idcardFrontViewUrl,
-          },
-        ]
-      : [];
-    idBackFile.value = idcardBackFileKey
-      ? [
-          {
-            url: idcardBackViewUrl,
-            idcardBackDownloadUrl,
-            idcardBackFileKey,
-            idcardBackViewUrl,
-          },
-        ]
-      : [];
-
-    shipDetail.value = {
-      breadth,
-      draught,
-      length,
-      loadTons,
-      mmsi,
-      shipId,
-      shipname,
-      tonnage,
-    };
-    certs.value.initCerts(shipCerts);
-  } else {
-    ElNotification({
-      type: "error",
-      title: res.data.msg,
-    });
-    console.log(res);
-  }
-}
 
 let idFrontList = ref([]);
 function idFrontUploadSuccess(list) {
@@ -289,7 +194,7 @@ function checkShipOwner() {
   }
   return true;
 }
-function addShipOwner() {
+async function addShipOwner() {
   if (!checkShipOwner()) return;
   let postData = shipOwnerDetail.value;
   if (idFrontList.value.length) {
@@ -319,11 +224,45 @@ function addShipOwner() {
     };
   }
 
-  console.log(postData);
+  let { data } = await api.addShipOwner(postData);
+  if (data.status == 0) {
+    ElMessageBox.confirm("添加船东成功,是否添加新船舶?", "添加成功", {
+      confirmButtonText: "是",
+      cancelButtonText: "否",
+      type: "success",
+    })
+      .then(() => {
+        shipInfoVisable.value = true;
+        unchangeableShipOwner.value = true;
+        addShipOwnerBtnVisable.value = false;
+      })
+      .catch(() => {
+        router.push("/shipOwnerManage/shipOwnerList");
+      });
+  }
+}
+
+let shipOwnerId = ref("");
+let addShipOwnerBtnVisable = ref(true);
+let unchangeableShipOwner = ref(false);
+let unchangeableShip = ref(false);
+let shipInfoVisable = ref(true);
+
+let shipCerts = ref(null);
+async function searchShip(e) {
+  if (e.target.value.length != 9) return;
+  let { data } = await api.searchShip({
+    mmsi: e.target.value,
+  });
+  if (data.status == 0) {
+    shipDetail.value = data.result;
+    shipCerts.value.initCerts(shipDetail.value.shipCerts);
+  }
 }
 
 onMounted(() => {
   if (route.query.shipOwnerId) {
+    shipOwnerId.value = route.query.shipOwnerId;
     getShipOwnerDetail();
     unchangeableShipOwner.value = true;
     unchangeableShip.value = true;
@@ -352,4 +291,10 @@ onMounted(() => {
   border: none;
   width: auto;
 }
+
+.unit {
+  width: 40px;
+  text-align: center;
+  color: #555;
+}
 </style>