|
|
@@ -0,0 +1,1041 @@
|
|
|
+<template>
|
|
|
+ <div class="line-container-p24">
|
|
|
+ <div class="df jcsb aic">
|
|
|
+ <div class="df aic" v-auth="'VOYAGELISTVIEW'">
|
|
|
+ <div
|
|
|
+ @click="changeVoyageType(0)"
|
|
|
+ :class="
|
|
|
+ status == 0
|
|
|
+ ? 'currentbtn radio-btns left-radius'
|
|
|
+ : 'radio-btns left-radius'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 全部航次
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="border-left: none"
|
|
|
+ @click="changeVoyageType(1)"
|
|
|
+ :class="status == 1 ? 'currentbtn radio-btns' : 'radio-btns'"
|
|
|
+ >
|
|
|
+ 装货中
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ style="border-left: none"
|
|
|
+ @click="changeVoyageType(2)"
|
|
|
+ :class="status == 2 ? 'currentbtn radio-btns' : 'radio-btns'"
|
|
|
+ >
|
|
|
+ 运输中
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ style="border-left: none"
|
|
|
+ @click="changeVoyageType(3)"
|
|
|
+ :class="status == 3 ? 'currentbtn radio-btns' : 'radio-btns'"
|
|
|
+ >
|
|
|
+ 卸货中
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="changeVoyageType(4)"
|
|
|
+ :class="
|
|
|
+ status == 4
|
|
|
+ ? 'currentbtn radio-btns right-radius'
|
|
|
+ : 'radio-btns right-radius '
|
|
|
+ "
|
|
|
+ style="margin-right: 40px; border-left: none"
|
|
|
+ >
|
|
|
+ 历史航次
|
|
|
+ </div>
|
|
|
+ <!-- <div style="color: #333; margin-right: 10px; font-size: 14px">
|
|
|
+ 预计到港时间:
|
|
|
+ </div>
|
|
|
+ <el-radio-group v-model="sortradio">
|
|
|
+ <el-radio :label="-1">默认排序</el-radio>
|
|
|
+ <el-radio :label="0">降序</el-radio>
|
|
|
+ <el-radio :label="1">升序</el-radio>
|
|
|
+ </el-radio-group> -->
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入货主名称/船名/MMSI"
|
|
|
+ prefix-icon="el-icon-search"
|
|
|
+ v-model="term"
|
|
|
+ clearable
|
|
|
+ style="width: 220px"
|
|
|
+ @keydown.enter="getOrderList()"
|
|
|
+ ></el-input>
|
|
|
+ <div class="search-btn" @click="getOrderList()">查询</div>
|
|
|
+ </div>
|
|
|
+ <div class="df aic">
|
|
|
+ <!-- <el-button
|
|
|
+ @click="FYDIModalVisable = true"
|
|
|
+ class="mr20"
|
|
|
+ size="medium"
|
|
|
+ type="primary"
|
|
|
+ >上传FYDI指数</el-button
|
|
|
+ > -->
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="上传FYDI指数"
|
|
|
+ v-model="FYDIModalVisable"
|
|
|
+ @close="FYDIModalClose"
|
|
|
+ >
|
|
|
+ <template v-slot:default>
|
|
|
+ <div class="df aic jcsa">
|
|
|
+ <!-- <RemoteSearch
|
|
|
+ api="getUserSelect"
|
|
|
+ v-model="cargoOwnerCompanyStr"
|
|
|
+ placeholder="公司名称/联系人/手机号"
|
|
|
+ :params="{
|
|
|
+ identity: 2,
|
|
|
+ }"
|
|
|
+ @selectItem="selectCargoOwnerUpload($event)"
|
|
|
+ class="mb10"
|
|
|
+ ></RemoteSearch> -->
|
|
|
+ <RemoteSelect
|
|
|
+ api="getCargoOwnerSelect"
|
|
|
+ v-model="cargoOwnerCompanyStr"
|
|
|
+ placeholder="公司名称/联系人/手机号"
|
|
|
+ @selectItem="selectCargoOwnerUpload($event)"
|
|
|
+ class="mb10"
|
|
|
+ ></RemoteSelect>
|
|
|
+ <el-upload
|
|
|
+ v-if="FYDIParams.cargoOwnerId"
|
|
|
+ class="upload-demo"
|
|
|
+ :action="this.$store.state.fydi"
|
|
|
+ :show-file-list="false"
|
|
|
+ :data="FYDIParams"
|
|
|
+ :on-success="upFYDISuccess"
|
|
|
+ :before-upload="beforeFYDI"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ class="mr20"
|
|
|
+ size="medium"
|
|
|
+ type="primary"
|
|
|
+ :loading="isUpLoading"
|
|
|
+ >
|
|
|
+ 上传FYDI指数
|
|
|
+ </el-button>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-button
|
|
|
+ class="mr20"
|
|
|
+ size="medium"
|
|
|
+ type="primary"
|
|
|
+ v-auth="'ADDVOYAGE'"
|
|
|
+ @click="voyageAddDialogVisible = true"
|
|
|
+ >
|
|
|
+ 添加航次
|
|
|
+ </el-button>
|
|
|
+ <el-popover placement="bottom" :width="100" trigger="hover">
|
|
|
+ <template #reference>
|
|
|
+ <el-button
|
|
|
+ v-auth="'VOYAGELISTREPORTDOWNLOAD'"
|
|
|
+ size="medium"
|
|
|
+ type="primary"
|
|
|
+ >
|
|
|
+ 导出
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 140px;
|
|
|
+ justify-content: space-between;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="medium"
|
|
|
+ v-auth="'DOWNLOADVOYAGELIST'"
|
|
|
+ @click="showExportModal('航次列表')"
|
|
|
+ >
|
|
|
+ 导出航次列表
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="medium"
|
|
|
+ v-auth="'MULTDOWNLOADSHIPTRACK'"
|
|
|
+ @click="showExportModal('航次跟踪')"
|
|
|
+ >
|
|
|
+ 导出航次跟踪
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="medium"
|
|
|
+ v-auth="'MULTDOWNLOADDISCHARGE'"
|
|
|
+ @click="showExportModal('卸货记录')"
|
|
|
+ >
|
|
|
+ 导出卸货记录
|
|
|
+ </el-button>
|
|
|
+ <!-- <el-button type="primary" size="medium" @æclick="downloadFYDI"
|
|
|
+ >下载FYDI指数</el-button
|
|
|
+ > -->
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ v-model="exportModalVisable"
|
|
|
+ :title="exportModalTitle"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ width="200px"
|
|
|
+ @close="isLoadingZip = false"
|
|
|
+ >
|
|
|
+ <div class="df aic jcsb">
|
|
|
+ <div v-if="exportModalTitle != '航次列表'" class="df aic">
|
|
|
+ <div class="mr20">请选择月份:</div>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="currentMonth"
|
|
|
+ type="month"
|
|
|
+ placeholder="请选择年月"
|
|
|
+ value-format="YYYYMM"
|
|
|
+ :disabled="isLoadingZip"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div></div>
|
|
|
+ <el-button type="primary" @click="exportZip" :loading="isLoadingZip">
|
|
|
+ 导出{{ exportModalTitle }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ v-model="voyageAddDialogVisible"
|
|
|
+ @closed="resetAddVoyageForm"
|
|
|
+ title="添加航次"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :rules="rules"
|
|
|
+ label-position="right"
|
|
|
+ label-width="120px"
|
|
|
+ ref="voyageFormRef"
|
|
|
+ :model="voyageForm"
|
|
|
+ >
|
|
|
+ <div class="df ffw">
|
|
|
+ <el-form-item prop="shipName" label="船舶">
|
|
|
+ <RemoteSelect
|
|
|
+ api="getShipSelect"
|
|
|
+ v-model="shipStr"
|
|
|
+ @selectItem="selectShip($event)"
|
|
|
+ class="mb10"
|
|
|
+ ></RemoteSelect>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="cargoOwnerName" label="货主">
|
|
|
+ <RemoteSelect
|
|
|
+ api="getCargoOwnerSelect"
|
|
|
+ v-model="cargoOwnerStr"
|
|
|
+ placeholder="选择货主"
|
|
|
+ @selectItem="selectCargoOwner($event)"
|
|
|
+ class="mb10"
|
|
|
+ ></RemoteSelect>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="startTime" label="开始时间">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 198px"
|
|
|
+ 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"
|
|
|
+ style="width: 198px"
|
|
|
+ type="date"
|
|
|
+ value-format="YYYY/MM/DD"
|
|
|
+ placeholder="航次结束时间"
|
|
|
+ disabled
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="loadPort" label="装货港">
|
|
|
+ <RemoteSelect
|
|
|
+ api="getCol"
|
|
|
+ v-model="loadPortStr"
|
|
|
+ placeholder="选择装货港"
|
|
|
+ @selectItem="selectLoadPort"
|
|
|
+ class="mb10"
|
|
|
+ ></RemoteSelect>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item></el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ v-for="(item, index) in dischargePorts"
|
|
|
+ :key="item"
|
|
|
+ prop="dischargePorts"
|
|
|
+ :label="'第 ' + (index + 1) + ' 卸货港'"
|
|
|
+ >
|
|
|
+ <div class="df aic mb10">
|
|
|
+ <RemoteSelect
|
|
|
+ class="mr10"
|
|
|
+ api="getCol"
|
|
|
+ v-model="dischargePorts[index].dischargePort"
|
|
|
+ placeholder="选择卸货港"
|
|
|
+ @selectItem="selectDischargeProt($event, index)"
|
|
|
+ ></RemoteSelect>
|
|
|
+ <el-button
|
|
|
+ v-if="dischargePorts.length > 1"
|
|
|
+ style="padding: 0 8px"
|
|
|
+ type="danger"
|
|
|
+ size="mini"
|
|
|
+ @click="removeDischargePort(index)"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" size="small" @click="addDiscPort">
|
|
|
+ 添加卸货港
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="dischargePorts.length % 2 == 0"></el-form-item>
|
|
|
+
|
|
|
+ <el-form-item
|
|
|
+ prop="cargo"
|
|
|
+ label="货种"
|
|
|
+ v-if="voyageForm.cargoOwnerId"
|
|
|
+ >
|
|
|
+ <RemoteSelect
|
|
|
+ api="getCargoSelect"
|
|
|
+ v-model="voyageForm.cargo"
|
|
|
+ :params="{
|
|
|
+ cargoOwnerId: voyageForm.cargoOwnerId,
|
|
|
+ }"
|
|
|
+ placeholder="选择货种"
|
|
|
+ @selectItem="selectCargo"
|
|
|
+ class="mb10"
|
|
|
+ ></RemoteSelect>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="reasonableUnloadingDays" label="合理卸货天数">
|
|
|
+ <el-input
|
|
|
+ style="width: 200px"
|
|
|
+ v-model="voyageForm.reasonableUnloadingDays"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="tons" label="吨位">
|
|
|
+ <el-input style="width: 200px" v-model="voyageForm.tons"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="pieces" label="件数">
|
|
|
+ <el-input
|
|
|
+ style="width: 200px"
|
|
|
+ v-model="voyageForm.pieces"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button class="mr20" @click="resetAddVoyageForm">取消</el-button>
|
|
|
+ <el-button type="primary" @click="addVoyage">确定</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ style="width: 100%; margin-top: 24px"
|
|
|
+ :row-style="rowStyle"
|
|
|
+ v-auth="'VOYAGELISTVIEW'"
|
|
|
+ >
|
|
|
+ <el-table-column type="expand">
|
|
|
+ <template #default="props">
|
|
|
+ <el-table
|
|
|
+ style="margin-left: 48px; width: 95%"
|
|
|
+ :data="props.row.voyages"
|
|
|
+ border
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ prop="voyageName"
|
|
|
+ label="航次编号"
|
|
|
+ width="160"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="shipName"
|
|
|
+ label="船舶名称"
|
|
|
+ min-width="90"
|
|
|
+ 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>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="code"
|
|
|
+ label="订单编号"
|
|
|
+ width="160"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="cargoOwnerName"
|
|
|
+ label="货主名称"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="cargo"
|
|
|
+ label="货种"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="tons"
|
|
|
+ label="货物吨位"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="shipCount"
|
|
|
+ label="船舶数量"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop=""
|
|
|
+ label="装载吨位"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="actualLoadTons"
|
|
|
+ label="已卸货吨位"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="unloadedtons"
|
|
|
+ label="剩余吨位"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="createTime"
|
|
|
+ label="创建时间"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ min-width="80"
|
|
|
+ align="center"
|
|
|
+ v-auth="'VOYAGEDETAIL'"
|
|
|
+ fixed="right"
|
|
|
+ >
|
|
|
+ <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
|
|
|
+ v-auth="'VOYAGELISTVIEW'"
|
|
|
+ style="width: 100%; text-align: right; margin-top: 43px"
|
|
|
+ >
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ :page-size="pageSize"
|
|
|
+ @current-change="pageChange"
|
|
|
+ ></el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+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 downloadBlobFile from "../../utils/downloadBlobFile";
|
|
|
+import _ from "lodash";
|
|
|
+import url from "../../apis/config";
|
|
|
+
|
|
|
+let currentPage = ref(1);
|
|
|
+let pageSize = ref(20);
|
|
|
+let term = ref("");
|
|
|
+let tableData = ref([]);
|
|
|
+let total = ref(0);
|
|
|
+let status = ref(0);
|
|
|
+async function getOrderList() {
|
|
|
+ tableData.value = [];
|
|
|
+ let res = await api.getOrderList({
|
|
|
+ status: status.value,
|
|
|
+ term: term.value,
|
|
|
+ currentPage: currentPage.value,
|
|
|
+ size: pageSize.value,
|
|
|
+ });
|
|
|
+ if (res.data.status == 0) {
|
|
|
+ tableData.value = res.data.result;
|
|
|
+ total.value = res.data.total;
|
|
|
+ } else {
|
|
|
+ total.value = 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+function changeVoyageType(s) {
|
|
|
+ currentPage.value = 1;
|
|
|
+ status.value = s;
|
|
|
+ getOrderList();
|
|
|
+}
|
|
|
+async function voyageDetail(id) {
|
|
|
+ router.push({
|
|
|
+ path: "/voyage/voyageDetail",
|
|
|
+ query: {
|
|
|
+ id,
|
|
|
+ },
|
|
|
+ });
|
|
|
+}
|
|
|
+function pageChange(e) {
|
|
|
+ currentPage.value = e;
|
|
|
+ getOrderList();
|
|
|
+}
|
|
|
+
|
|
|
+function goToVoyageAdd() {
|
|
|
+ router.push({
|
|
|
+ path: "/voyage/voyageAdd",
|
|
|
+ });
|
|
|
+}
|
|
|
+let voyageAddDialogVisible = ref(false);
|
|
|
+const rules = ref({
|
|
|
+ shipName: [{ required: true, message: "请选择船舶", trigger: "blur" }],
|
|
|
+ cargoOwnerName: [{ required: true, message: "请选择货主", trigger: "blur" }],
|
|
|
+ startTime: [{ required: true, message: "请填写开始时间", trigger: "blur" }],
|
|
|
+ loadPort: [{ required: true, message: "请填写装货港", trigger: "blur" }],
|
|
|
+ cargo: [{ required: true, message: "请填写货种", trigger: "blur" }],
|
|
|
+ tons: [{ required: false, message: "请填写吨位", trigger: "blur" }],
|
|
|
+ pieces: [{ required: false, message: "请填写件数", trigger: "blur" }],
|
|
|
+ reasonableUnloadingDays: [
|
|
|
+ { required: true, message: "请填写合理卸货天数", trigger: "blur" },
|
|
|
+ ],
|
|
|
+});
|
|
|
+let voyageForm = ref({
|
|
|
+ cargoOwnerId: "",
|
|
|
+ cargoOwnerName: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ loadPort: "",
|
|
|
+ cargo: "",
|
|
|
+ tons: 0,
|
|
|
+ loadPortId: "",
|
|
|
+ shipId: "",
|
|
|
+ shipName: "",
|
|
|
+ pieces: 0,
|
|
|
+ reasonableUnloadingDays: 0,
|
|
|
+});
|
|
|
+
|
|
|
+let voyageFormRef = ref(null);
|
|
|
+
|
|
|
+async function addVoyage() {
|
|
|
+ voyageFormRef.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ console.log("提交", voyageForm.value);
|
|
|
+ dischargePorts.value = dischargePorts.value.filter((e) => {
|
|
|
+ return e.id;
|
|
|
+ });
|
|
|
+ if (!dischargePorts.value.length) {
|
|
|
+ ElNotification({
|
|
|
+ title: "请选择至少一个装货港",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ dischargePorts.value = [{}];
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let res = await api.addVoyage({
|
|
|
+ ...voyageForm.value,
|
|
|
+ dischargePorts: dischargePorts.value,
|
|
|
+ });
|
|
|
+ if (res.data.status == 0) {
|
|
|
+ ElNotification({
|
|
|
+ title: res.data.msg,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ resetAddVoyageForm();
|
|
|
+ getOrderList();
|
|
|
+ } else {
|
|
|
+ console.log(res);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log("未提交", voyageForm.value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+let shipsCache = ref([]);
|
|
|
+let colCache = ref([]);
|
|
|
+let cargoOwnersCache = ref([]);
|
|
|
+
|
|
|
+let searchShip = _.debounce(
|
|
|
+ async (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}`;
|
|
|
+ }
|
|
|
+ shipsCache.value = ships;
|
|
|
+ cb(ships);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 1000,
|
|
|
+ { leading: true }
|
|
|
+);
|
|
|
+let shipStr = ref("");
|
|
|
+let cargoOwnerStr = ref("");
|
|
|
+let loadPortStr = ref("");
|
|
|
+let discPortStr = ref("");
|
|
|
+let selectShip = (item) => {
|
|
|
+ voyageForm.value.shipId = item.key;
|
|
|
+ voyageForm.value.shipName = item.value;
|
|
|
+};
|
|
|
+
|
|
|
+let selectCargoOwner = (item) => {
|
|
|
+ voyageForm.value.cargoOwnerName = item.value;
|
|
|
+ voyageForm.value.cargoOwnerId = item.key;
|
|
|
+ voyageForm.value.cargo = "";
|
|
|
+ voyageForm.value.cargoId = "";
|
|
|
+};
|
|
|
+
|
|
|
+let getCol = _.debounce(
|
|
|
+ async (queryString, cb) => {
|
|
|
+ if (!queryString) return;
|
|
|
+ let res = await api.getCol({
|
|
|
+ term: queryString,
|
|
|
+ });
|
|
|
+ if (res.data.status == 0) {
|
|
|
+ colCache.value = [...colCache.value, ...res.data.result];
|
|
|
+ colCache.value = _.uniqBy(colCache.value, "key");
|
|
|
+
|
|
|
+ cb(res.data.result);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 1000,
|
|
|
+ { leading: true }
|
|
|
+);
|
|
|
+
|
|
|
+let selectLoadPort = (item) => {
|
|
|
+ voyageForm.value.loadPortId = item.key;
|
|
|
+ voyageForm.value.loadPort = item.value;
|
|
|
+};
|
|
|
+
|
|
|
+let selectDischargeProt = (item, index) => {
|
|
|
+ dischargePorts.value[index] = {
|
|
|
+ dischargePort: item.value,
|
|
|
+ id: item.key,
|
|
|
+ reasonableUnloadingDays: 0,
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+let selectCargo = (item) => {
|
|
|
+ voyageForm.value.cargo = item.value;
|
|
|
+ voyageForm.value.cargoId = item.key;
|
|
|
+};
|
|
|
+
|
|
|
+function resetAddVoyageForm() {
|
|
|
+ voyageAddDialogVisible.value = false;
|
|
|
+ voyageFormRef.value.resetFields();
|
|
|
+ shipStr.value = "";
|
|
|
+ cargoOwnerStr.value = "";
|
|
|
+ loadPortStr.value = "";
|
|
|
+ voyageForm.value = {
|
|
|
+ tons: 0,
|
|
|
+ pieces: 0,
|
|
|
+ };
|
|
|
+ dischargePorts.value = [{}];
|
|
|
+}
|
|
|
+
|
|
|
+let sortradio = ref(0);
|
|
|
+
|
|
|
+let isUpLoading = ref(false);
|
|
|
+function upFYDISuccess(e) {
|
|
|
+ if (e.status == 0) {
|
|
|
+ ElNotification.success({
|
|
|
+ title: "成功",
|
|
|
+ duration: 2000,
|
|
|
+ message: e.msg,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ ElNotification.error({
|
|
|
+ title: "失败",
|
|
|
+ duration: 2000,
|
|
|
+ message: e.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ isUpLoading.value = false;
|
|
|
+ FYDIModalVisable.value = false;
|
|
|
+ FYDIParams.value.cargoOwnerId = "";
|
|
|
+ cargoOwnerCompanyStr.value = "";
|
|
|
+}
|
|
|
+
|
|
|
+function beforeFYDI() {
|
|
|
+ isUpLoading.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+let FYDIModalVisable = ref(false);
|
|
|
+let FYDIParams = ref({
|
|
|
+ cargoOwnerId: "",
|
|
|
+});
|
|
|
+let cargoOwnerCompanyStr = ref("");
|
|
|
+function selectCargoOwnerUpload(item) {
|
|
|
+ FYDIParams.value.cargoOwnerId = item.key;
|
|
|
+}
|
|
|
+
|
|
|
+function FYDIModalClose() {
|
|
|
+ isUpLoading.value = false;
|
|
|
+ FYDIModalVisable.value = false;
|
|
|
+ FYDIParams.value.cargoOwnerId = "";
|
|
|
+ cargoOwnerCompanyStr.value = "";
|
|
|
+}
|
|
|
+
|
|
|
+function rowStyle({ row }) {
|
|
|
+ let rowStyle = {};
|
|
|
+ if (row.daysInPort >= 30) {
|
|
|
+ rowStyle.color = "red";
|
|
|
+ return rowStyle;
|
|
|
+ }
|
|
|
+}
|
|
|
+let dischargePorts = ref([{}]);
|
|
|
+
|
|
|
+function addDiscPort() {
|
|
|
+ dischargePorts.value.push({});
|
|
|
+}
|
|
|
+
|
|
|
+let exportModalVisable = ref(false);
|
|
|
+let exportModalTitle = ref("");
|
|
|
+let currentMonth = ref("");
|
|
|
+
|
|
|
+function showExportModal(type) {
|
|
|
+ exportModalVisable.value = true;
|
|
|
+ exportModalTitle.value = type;
|
|
|
+}
|
|
|
+let isLoadingZip = ref(false);
|
|
|
+
|
|
|
+async function exportZip() {
|
|
|
+ if (!currentMonth.value && exportModalTitle.value != "航次列表") return;
|
|
|
+
|
|
|
+ isLoadingZip.value = true;
|
|
|
+ let path = "";
|
|
|
+ let type = "";
|
|
|
+ let postData = {
|
|
|
+ loginAccountId: localStorage.loginAccountId,
|
|
|
+ };
|
|
|
+ let title = "";
|
|
|
+ switch (exportModalTitle.value) {
|
|
|
+ case "航次列表": {
|
|
|
+ path = "/voyage/exportListExcel";
|
|
|
+ type =
|
|
|
+ "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
|
|
|
+ title = `${exportModalTitle.value}`;
|
|
|
+ let arr = [];
|
|
|
+ for (let i of tableData.value) {
|
|
|
+ arr.push(i.id);
|
|
|
+ }
|
|
|
+ postData.voyageIds = arr.join(",");
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case "航次跟踪": {
|
|
|
+ path = "/voyage/exportMultExcel";
|
|
|
+ type = "application/zip";
|
|
|
+ postData.date = currentMonth.value;
|
|
|
+ title = `${exportModalTitle.value}${currentMonth.value}`;
|
|
|
+
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ case "卸货记录": {
|
|
|
+ path = "/voyage/exportMultDischargeExcel";
|
|
|
+ type = "application/zip";
|
|
|
+ postData.date = currentMonth.value;
|
|
|
+ title = `${exportModalTitle.value}${currentMonth.value}`;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ let res = await downloadBlobFile(
|
|
|
+ `${url.baseurl}${path}`,
|
|
|
+ postData,
|
|
|
+ title,
|
|
|
+ "post",
|
|
|
+ type
|
|
|
+ );
|
|
|
+ console.log(res);
|
|
|
+ if (res.status == 0) {
|
|
|
+ ElNotification({
|
|
|
+ title: "导出成功!",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ ElNotification({
|
|
|
+ title: "暂无数据",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error);
|
|
|
+ ElNotification({
|
|
|
+ title: "暂无数据",
|
|
|
+ });
|
|
|
+ } finally {
|
|
|
+ isLoadingZip.value = false;
|
|
|
+ currentMonth.value = "";
|
|
|
+ exportModalVisable.value = false;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function downloadFYDI() {
|
|
|
+ let res0 = await api.getFYFIDownloadUrl({
|
|
|
+ loginAccountId: localStorage.loginAccountId,
|
|
|
+ });
|
|
|
+
|
|
|
+ if (res0.data.result == 1) {
|
|
|
+ ElNotification({
|
|
|
+ type: "info",
|
|
|
+ title: "更新中",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ let url = res0.data.result;
|
|
|
+ let a = document.createElement("a");
|
|
|
+ a.setAttribute("href", url);
|
|
|
+ a.click();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function removeDischargePort(index) {
|
|
|
+ dischargePorts.value.splice(index, 1);
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ getOrderList();
|
|
|
+});
|
|
|
+</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: 60px;
|
|
|
+ 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;
|
|
|
+ width: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+.right-radius {
|
|
|
+ border-top-right-radius: 19px;
|
|
|
+ border-bottom-right-radius: 19px;
|
|
|
+ width: 70px;
|
|
|
+}
|
|
|
+.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;
|
|
|
+}
|
|
|
+
|
|
|
+.el-radio {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+.el-radio:last-child {
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-button {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+</style>
|
