ShippingService_WebApp/src/views/shipOwnerManage/shipOwnerDetail.vue

<template>
  <div class="line-container-p24">
    <i class="el-icon-arrow-left"></i>
    <div
      class="dib go-back ml8 pointer"
      @click="router.replace('/shipOwnerManage/shipOwnerList')"
    >
      返回船东列表
    </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="shipOwnerDetail.userName"
          :disabled="unchangeableShipOwner"
        ></el-input>
      </div>
      <div class="info-line">
        <div class="info-line-title">船东手机号</div>
        <el-input
          class="info-line-text"
          v-model="shipOwnerDetail.userPhone"
          :disabled="unchangeableShipOwner"
        ></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="shipOwnerDetail.idcardNo"
          :disabled="unchangeableShipOwner"
        ></el-input>
      </div>
    </div>
    <div class="line">
      <div class="info-line aic">
        <div class="info-line-title">上传身份证 :</div>
        <Uploader
          uploaderId="idfront"
          :limit="1"
          :params="{}"
          :actionUrl="store.state.idCardUrl"
          :disabled="unchangeableShipOwner"
          :fileList="idFrontList"
          @onSendFileList="idFrontUploadSuccess"
          uploadText="身份证人像面"
          class="mr20"
        ></Uploader>
        <Uploader
          uploaderId="idback"
          :limit="1"
          :params="{}"
          :actionUrl="store.state.idCardUrl"
          :disabled="unchangeableShipOwner"
          :fileList="idBackList"
          @onSendFileList="idBackUploadSuccess"
          uploadText="身份证国徽面"
        ></Uploader>
      </div>
    </div>
    <div class="df aic jcfe" v-if="addShipOwnerBtnVisable">
      <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>
</template>
<script setup>
import { ref, h, reactive, toRefs, onMounted } from "vue";
// import { uploadUrl } from "../../apis/config";
import { ElNotification, ElMessageBox, ElMessage } from "element-plus";
import store from "../../store";
import router from "../../router";
import md5 from "md5";
import api from "../../apis/fetch";
import { useRoute } from "vue-router";
import _ from "lodash";

const route = useRoute();
let shipOwnerDetail = ref({});
let shipDetail = ref({});

let idFrontList = ref([]);
function idFrontUploadSuccess(list) {
  if (list.length) {
    let { url, response } = list[0];
    let { downloadUrl, viewUrl, key } = response.result;
    idFrontList.value = [{ url, downloadUrl, viewUrl, key }];
  } else {
    idFrontList.value = [];
  }
}
let idBackList = ref([]);
function idBackUploadSuccess(list) {
  if (list.length) {
    let { url, response } = list[0];
    let { downloadUrl, viewUrl, key } = response.result;
    idBackList.value = [{ url, downloadUrl, viewUrl, key }];
  } else {
    idBackList.value = [];
  }
}
function checkShipOwner() {
  let { userName, userPhone } = shipOwnerDetail.value;
  if (!userName) {
    ElNotification.error({
      title: "请填写船东姓名",
      duration: 1500,
    });
    return false;
  }
  if (!userPhone) {
    ElNotification.error({
      title: "请填写船东手机号",
      duration: 1500,
    });
    return false;
  }
  return true;
}
async function addShipOwner() {
  if (!checkShipOwner()) return;
  let postData = shipOwnerDetail.value;
  if (idFrontList.value.length) {
    let {
      downloadUrl: idcardFrontDownloadUrl,
      viewUrl: idcardFrontViewUrl,
      key: idcardFrontFileKey,
    } = idFrontList.value[0];
    postData = {
      ...postData,
      idcardFrontDownloadUrl,
      idcardFrontViewUrl,
      idcardFrontFileKey,
    };
  }
  if (idBackList.value.length) {
    let {
      downloadUrl: idcardBackDownloadUrl,
      viewUrl: idcardBackViewUrl,
      key: idcardBackFileKey,
    } = idBackList.value[0];
    postData = {
      ...postData,
      idcardBackDownloadUrl,
      idcardBackViewUrl,
      idcardBackFileKey,
    };
  }

  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;
  }
});
</script>
<style scoped>
:deep().el-upload-list__item-thumbnail {
  object-fit: contain;
}

.upload-plus-icon {
  height: 15%;
  color: rgb(139, 147, 156);
  line-height: 100px;
  font-size: 40px;
  font-weight: 200;
}

.upload-text {
  height: 25%;
  color: rgb(139, 147, 156);
}

:deep().el-upload--picture-card {
  border: none;
  width: auto;
}

.unit {
  width: 40px;
  text-align: center;
  color: #555;
}
</style>