|
|
@@ -0,0 +1,855 @@
|
|
|
+<template>
|
|
|
+ <div class="line-container-p24">
|
|
|
+ <i class="el-icon-arrow-left"></i>
|
|
|
+ <div
|
|
|
+ class="dib go-back ml8 pointer"
|
|
|
+ @click="router.replace('/shipManage/shipList')"
|
|
|
+ >
|
|
|
+ 返回船舶列表
|
|
|
+ </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)"
|
|
|
+ type="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)"
|
|
|
+ type="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>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+// import { uploadUrl } from "../../apis/config";
|
|
|
+import { ref, h, reactive, toRefs, onMounted } from "vue";
|
|
|
+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";
|
|
|
+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,
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</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>
|