ShippingService_WebApp/src/components/ShipInfo.vue

<template>
  <div>
    <div class="container-title">船舶信息</div>
    <div
      class="pl50 pt30 bgf df jcsb pr20"
      v-if="route.name == 'shipOwnerDetail' || route.name == 'shipDetail'"
      style="max-width: 1200px"
    >
      <el-button-group class="mr20" v-if="route.name == 'shipOwnerDetail'">
        <el-button
          v-for="(item, index) in shipInfos"
          :key="item.code"
          @click="currentIndex = index"
          :disabled="!shipInfoDisabled"
          v-show="item.code"
          :type="index == currentIndex ? 'primary' : ''"
        >
          {{ item.shipname || "新增船舶" }}
        </el-button>
      </el-button-group>
      <div class="df">
        <div class="df" v-if="shipInfos[currentIndex].code">
          <el-button v-if="shipInfoDisabled" type="primary" @click="showUpdate">
            更新船舶基础信息
          </el-button>
          <el-button
            v-if="!shipInfoDisabled"
            type="primary"
            @click="confirmUpdate"
          >
            确认更新
          </el-button>
          <el-button
            v-if="!shipInfoDisabled"
            type="primary"
            @click="cancelUpdate"
          >
            取消更新
          </el-button>
          <el-button
            v-if="route.name == 'shipOwnerDetail'"
            @click="deleteShip(currentIndex)"
            type="primary"
            class="mr20"
          >
            删除当前船舶
          </el-button>
        </div>
        <div class="df" v-if="route.name == 'shipOwnerDetail'">
          <el-button
            v-if="shipInfos.length == 0 || shipInfos[currentIndex].code"
            @click="addShip()"
            type="primary"
          >
            新增船舶
          </el-button>
          <div v-else>
            <el-button
              v-if="shipInfos.length > 1"
              @click="cancelAdd()"
              type="primary"
            >
              取消新增船舶
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="shipInfos[currentIndex].code"
      class="df jcfe bgf p20"
      style="max-width: 1200px"
    ></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="shipInfoDisabled"
          ></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="
              shipInfoDisabled ||
              !!shipInfos[currentIndex].code ||
              !!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="shipInfoDisabled"
          ></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="shipInfoDisabled"
          ></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="shipInfoDisabled"
          ></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="shipInfoDisabled"
          ></el-input>
          <view class="unit">年</view>
        </div>
      </div>
    </div>
    <div style="max-width: 1200px">
      <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,
                  shipCode: shipInfos[currentIndex].code,
                  type: item.type,
                }
              : addParams
          "
          :actionUrl="
            shipInfos[currentIndex].code
              ? store.state.updateCertsUrl
              : store.state.addCertsUrl
          "
          :disabled="disabled"
          :fileList="item.certs"
          @onUploadFileList="uploadSuccess($event, index)"
          @onRemoveFileList="removeSuccess($event, index)"
        ></Uploader>
      </div>
      <div
        v-if="!shipInfos[currentIndex].code"
        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";
import { useRoute } from "vue-router";
import router from "../router";
const route = useRoute();
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({
  loginAccountId: localStorage.loginAccountId,
});
let addParams = ref({
  loginAccountId: localStorage.loginAccountId,
});

// function uploadSuccess(list, index) {
function uploadSuccess({ response, file, list }, index) {
  if (response.status == 0) {
    let { key, fileKey, viewUrl, downloadUrl, id } = response.result;
    props.shipInfos[currentIndex.value].shipCerts[index].certs.push({
      fileKey: fileKey || key,
      viewUrl,
      downloadUrl,
      id,
      url: viewUrl,
    });
  }
}
async function removeSuccess({ 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",
      });
    }
  } else {
    let dataList = [];
    for (let i of list) {
      dataList.push({
        fileKey: i.response.result.key,
        downloadUrl: i.response.result.downloadUrl,
        viewUrl: i.response.result.viewUrl,
        url: i.response.result.viewUrl,
      });
    }
    props.shipInfos[currentIndex.value].shipCerts[index].certs = dataList;
  }
}

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,
  disabled: false,
  shipCerts: [
    {
      typeName: "船舶国籍证书",
      type: 1,
      date: "",
      startValidTime: "",
      endtValidTime: "",
      certs: [],
    },
    {
      typeName: "内河船舶适航证书",
      type: 2,
      date: "",
      startValidTime: "",
      endtValidTime: "",
      certs: [],
    },
    {
      typeName: "船舶年审合格证书",
      type: 3,
      date: "",
      startValidTime: "",
      endtValidTime: "",
      certs: [],
    },
    {
      typeName: "内河船舶最低安全配员证书",
      type: 4,
      date: "",
      startValidTime: "",
      endtValidTime: "",
      certs: [],
    },
    {
      typeName: "船舶保险",
      type: 5,
      date: "",
      startValidTime: "",
      endtValidTime: "",
      certs: [],
    },
  ],
};
function getShipCerts() {
  return shipCerts.value;
}

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;
      }
    }
    data.result.disabled = false;
    props.shipInfos[currentIndex.value] = data.result;
  }
}
function deleteShip(index) {
  ElMessageBox.confirm("确认删除船舶?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      console.log(index);
      let { data } = await api.deleteShip({
        shipCode: props.shipInfos[index].code,
      });
      if (data.status == 0) {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        props.shipInfos.splice(index, 1);
        currentIndex.value = 0;
      }
    })
    .catch(() => {});
}
let cacheIndex = -1;
function addShip(item) {
  cacheIndex = _.cloneDeep(currentIndex.value);
  shipInfoDisabled.value = false;
  if (
    props.shipInfos.length &&
    props.shipInfos[props.shipInfos.length - 1].code
  ) {
    props.shipInfos.push(initShipInfo);
  } else {
    props.shipInfos[props.shipInfos.length - 1] = initShipInfo;
  }
  currentIndex.value = props.shipInfos.length - 1;
}
function cancelAdd() {
  currentIndex.value = _.cloneDeep(cacheIndex);
  shipInfoDisabled.value = true;
}

async function submit() {
  let res = await api.addShip({
    ...props.shipInfos[currentIndex.value],
    shipOwnerId: props.shipOwnerId,
  });
  router.replace("/shipOwnerManage/shipOwnerList");
}

let shipInfoDisabled = ref(true);
let cacheInfo = ref({});
function showUpdate() {
  cacheInfo.value = _.cloneDeep(props.shipInfos[currentIndex.value]);
}
async function confirmUpdate() {
  let postData = props.shipInfos[currentIndex.value];
  postData.shipCode = postData.code;
  let { data } = await api.updateShip(postData);
  if (data.status == 0) {
    ElMessage({
      message: data.msg,
      type: "success",
    });
    shipInfoDisabled.value = true;
  } else {
    ElMessage({
      message: data.msg,
      type: "error",
    });
  }
}
function cancelUpdate() {
  props.shipInfos[currentIndex.value] = _.cloneDeep(cacheInfo.value);
  shipInfoDisabled.value = true;
}

function changeDisable(b) {
  shipInfoDisabled.value = b;
}
defineExpose({
  initCerts,
  getShipCerts,
  changeDisable,
});
onMounted(() => {});
</script>

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