|
|
@@ -10,15 +10,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="container-title df aic jcsb">
|
|
|
- <div>船舶信息</div>
|
|
|
- <el-button
|
|
|
- style="width: 220px; margin-right: 20px"
|
|
|
- type="primary"
|
|
|
- @click="downloadExcel"
|
|
|
- :loading="isLoadingExcel"
|
|
|
- >
|
|
|
- 下载船舶跟踪表
|
|
|
- </el-button>
|
|
|
+ <div>航次信息</div>
|
|
|
</div>
|
|
|
<div class="line-container-p24">
|
|
|
<div class="line">
|
|
|
@@ -30,6 +22,7 @@
|
|
|
disabled
|
|
|
></el-input>
|
|
|
</div>
|
|
|
+ <div class="info-gap"></div>
|
|
|
<div class="info-line">
|
|
|
<div class="info-line-title">货主</div>
|
|
|
<el-input
|
|
|
@@ -59,13 +52,15 @@
|
|
|
</div> -->
|
|
|
<div class="line">
|
|
|
<div class="info-line">
|
|
|
- <div class="info-line-title">船舶</div>
|
|
|
+ <div class="info-line-title">船舶名称</div>
|
|
|
<el-input
|
|
|
class="info-line-text"
|
|
|
v-model="voyage.shipName"
|
|
|
disabled
|
|
|
></el-input>
|
|
|
</div>
|
|
|
+ <div class="info-gap">查看船舶证书或汇很多认证</div>
|
|
|
+
|
|
|
<div class="info-line">
|
|
|
<div class="info-line-title">MMSI</div>
|
|
|
<el-input
|
|
|
@@ -130,9 +125,17 @@
|
|
|
></el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="container-title">航次信息</div>
|
|
|
- <div class="line-container-p24">
|
|
|
+ <div class="container-second-title df aic jcsb mt40">
|
|
|
+ <div>船舶运输记录详情</div>
|
|
|
+ <el-button
|
|
|
+ style="width: 220px"
|
|
|
+ type="primary"
|
|
|
+ @click="downloadExcel"
|
|
|
+ :loading="isLoadingExcel"
|
|
|
+ >
|
|
|
+ 下载船舶跟踪表
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
<div class="line">
|
|
|
<div class="info-line">
|
|
|
<div class="info-line-title">到达装货港时间</div>
|
|
|
@@ -313,31 +316,89 @@
|
|
|
<el-button
|
|
|
v-if="voyage.dischargeEndTime && disabledStatus"
|
|
|
type="primary"
|
|
|
+ size="small"
|
|
|
@click="finishVoyage"
|
|
|
>
|
|
|
完成航次
|
|
|
</el-button>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="container-title df aic jcsb">
|
|
|
- <div>卸货记录</div>
|
|
|
- <el-button
|
|
|
- @click="exportDischargeExcel"
|
|
|
- style="width: 220px; margin-right: 20px"
|
|
|
- type="primary"
|
|
|
- :loading="isDischargeLoadingExcel"
|
|
|
- >下载卸货信息</el-button
|
|
|
- >
|
|
|
+ <div class="hr"></div>
|
|
|
+ <div class="container-second-title df aic jcsb">
|
|
|
+ <div>卸货记录</div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ class="mr20"
|
|
|
+ type="primary"
|
|
|
+ @click="isAddPoundVisable = true"
|
|
|
+ >
|
|
|
+ 新增卸货记录
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ @click="exportDischargeExcel"
|
|
|
+ style="width: 160px"
|
|
|
+ type="primary"
|
|
|
+ :loading="isDischargeLoadingExcel"
|
|
|
+ >下载卸货信息</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="line-container-p24">
|
|
|
- <el-card
|
|
|
- style="
|
|
|
- width: 800px;
|
|
|
- margin-left: 60px;
|
|
|
- margin-top: 50px;
|
|
|
- margin-bottom: 40px;
|
|
|
- "
|
|
|
+ <el-table
|
|
|
+ style="width: 800px"
|
|
|
+ :data="dischargeList"
|
|
|
+ stripe
|
|
|
+ :disabled="disabledStatus"
|
|
|
>
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ min-width="80"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="dischargeTons"
|
|
|
+ label="卸货吨位"
|
|
|
+ min-width="100"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="dischargeTime"
|
|
|
+ label="卸货时间"
|
|
|
+ min-width="120"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="磅单" min-width="150" align="center">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-button
|
|
|
+ @click="showUpdateDischarge(scope.row, scope.$index)"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ {{ scope.row.files ? "查看" : "上传" }}
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" min-width="150" align="center">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-button
|
|
|
+ @click="showUpdateDischarge(scope.row, scope.$index)"
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ 修改
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ @click="deleteDischarge(scope.row.id, scope.$index)"
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ 删除
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-dialog v-model="isAddPoundVisable">
|
|
|
<el-form :model="formInline">
|
|
|
<el-form-item label="卸货时间">
|
|
|
<el-date-picker
|
|
|
@@ -368,133 +429,80 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<div class="df aic jcfe mb30">
|
|
|
- <el-button type="primary" @click="addDischarge">
|
|
|
- 新增卸货记录
|
|
|
- </el-button>
|
|
|
+ <el-button type="primary" @click="addDischarge"> 新增 </el-button>
|
|
|
</div>
|
|
|
- <el-table :data="dischargeList" stripe :disabled="disabledStatus">
|
|
|
- <el-table-column
|
|
|
- type="index"
|
|
|
- label="序号"
|
|
|
- min-width="80"
|
|
|
- align="center"
|
|
|
- ></el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="dischargeTons"
|
|
|
- label="卸货吨位"
|
|
|
- min-width="100"
|
|
|
- align="center"
|
|
|
- ></el-table-column>
|
|
|
- <el-table-column
|
|
|
- prop="dischargeTime"
|
|
|
- label="卸货时间"
|
|
|
- min-width="120"
|
|
|
- align="center"
|
|
|
- ></el-table-column>
|
|
|
- <el-table-column label="磅单" min-width="150" align="center">
|
|
|
- <template v-slot="scope">
|
|
|
- <el-button
|
|
|
- @click="showUpdateDischarge(scope.row, scope.$index)"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- >
|
|
|
- {{ scope.row.files ? "查看" : "上传" }}
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column label="操作" min-width="150" align="center">
|
|
|
- <template v-slot="scope">
|
|
|
- <el-button
|
|
|
- @click="showUpdateDischarge(scope.row, scope.$index)"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- >
|
|
|
- 修改
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- @click="deleteDischarge(scope.row.id, scope.$index)"
|
|
|
- type="danger"
|
|
|
- size="small"
|
|
|
- >
|
|
|
- 删除
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <el-dialog
|
|
|
- v-model="updateDischargeDialog"
|
|
|
- title="修改记录"
|
|
|
- width="700px"
|
|
|
- center
|
|
|
- >
|
|
|
- <el-form :model="updateForm" style="margin-bottom: 20px">
|
|
|
- <!-- <el-form-item label="记录ID">
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ v-model="updateDischargeDialog"
|
|
|
+ title="修改记录"
|
|
|
+ width="700px"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <el-form :model="updateForm" style="margin-bottom: 20px">
|
|
|
+ <!-- <el-form-item label="记录ID">
|
|
|
<span style="padding-left: 20px">{{ updateForm.id }}</span>
|
|
|
</el-form-item> -->
|
|
|
- <el-form-item label="卸货时间">
|
|
|
- <el-date-picker
|
|
|
- class="info-line-text"
|
|
|
- v-model="updateForm.dischargeTime"
|
|
|
- type="datetime"
|
|
|
- format="YYYY/MM/DD HH:mm:ss"
|
|
|
- value-format="YYYY/MM/DD HH:mm:ss"
|
|
|
- placeholder="卸货时间"
|
|
|
- ></el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="卸货吨位">
|
|
|
- <el-input
|
|
|
- style="width: 240px"
|
|
|
- v-model="updateForm.dischargeTons"
|
|
|
- placeholder="卸货吨位"
|
|
|
- ></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="上传磅单">
|
|
|
- <Uploader
|
|
|
- :actionUrl="this.$store.state.wayBillUrl"
|
|
|
- isVisiable
|
|
|
- :uploaderId="'updatePound'"
|
|
|
- :params="updatePoundParams"
|
|
|
- @onSendFileList="getupdatePoundBillList"
|
|
|
- :fileList="updatePoundBillList"
|
|
|
- uploadText="拖拽或点击上传磅单"
|
|
|
- ></Uploader>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- <template #footer>
|
|
|
- <el-button @click="cancelUpdateDischarge">取消</el-button>
|
|
|
- <el-button
|
|
|
- style="margin-left: 30px"
|
|
|
- type="primary"
|
|
|
- @click="updateDischarge"
|
|
|
- >
|
|
|
- 提交
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-dialog>
|
|
|
+ <el-form-item label="卸货时间">
|
|
|
+ <el-date-picker
|
|
|
+ class="info-line-text"
|
|
|
+ v-model="updateForm.dischargeTime"
|
|
|
+ type="datetime"
|
|
|
+ format="YYYY/MM/DD HH:mm:ss"
|
|
|
+ value-format="YYYY/MM/DD HH:mm:ss"
|
|
|
+ placeholder="卸货时间"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="卸货吨位">
|
|
|
+ <el-input
|
|
|
+ style="width: 240px"
|
|
|
+ v-model="updateForm.dischargeTons"
|
|
|
+ placeholder="卸货吨位"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="上传磅单">
|
|
|
+ <Uploader
|
|
|
+ :actionUrl="this.$store.state.wayBillUrl"
|
|
|
+ isVisiable
|
|
|
+ :uploaderId="'updatePound'"
|
|
|
+ :params="updatePoundParams"
|
|
|
+ @onSendFileList="getupdatePoundBillList"
|
|
|
+ :fileList="updatePoundBillList"
|
|
|
+ uploadText="拖拽或点击上传磅单"
|
|
|
+ ></Uploader>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
|
|
|
- <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
|
|
|
- <el-image
|
|
|
- :src="dialogImageUrl"
|
|
|
- style="height: 100%; width: 100%"
|
|
|
- ></el-image>
|
|
|
- </el-dialog>
|
|
|
- <div style="width: 100%; text-align: right; margin-top: 43px">
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- layout="prev, pager, next"
|
|
|
- :total="total"
|
|
|
- @current-change="pageChange"
|
|
|
- ></el-pagination>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="cancelUpdateDischarge">取消</el-button>
|
|
|
+ <el-button
|
|
|
+ style="margin-left: 30px"
|
|
|
+ type="primary"
|
|
|
+ @click="updateDischarge"
|
|
|
+ >
|
|
|
+ 提交
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog v-model="dialogVisible" title="图片预览" width="30%">
|
|
|
+ <el-image
|
|
|
+ :src="dialogImageUrl"
|
|
|
+ style="height: 100%; width: 100%"
|
|
|
+ ></el-image>
|
|
|
+ </el-dialog>
|
|
|
+ <div style="width: 800px; text-align: right; margin-top: 43px">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="total"
|
|
|
+ @current-change="pageChange"
|
|
|
+ ></el-pagination>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="container-title">保险单列表</div>
|
|
|
+ <div class="container-title">单据信息</div>
|
|
|
<div class="line-container-p24">
|
|
|
<div class="line">
|
|
|
<div class="info-line">
|
|
|
- <div class="info-line-title">上传保险单</div>
|
|
|
+ <div class="info-line-title">保险单</div>
|
|
|
<el-upload
|
|
|
drag
|
|
|
multiple
|
|
|
@@ -511,8 +519,27 @@
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="line">
|
|
|
+ <div class="info-line">
|
|
|
+ <div class="info-line-title">运单</div>
|
|
|
+ <el-upload
|
|
|
+ drag
|
|
|
+ multiple
|
|
|
+ :action="this.$store.state.wayBillUrl"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :on-remove="handleRemoveBill"
|
|
|
+ :data="billParams"
|
|
|
+ :on-success="billUploadSuccess"
|
|
|
+ :file-list="voyageBill"
|
|
|
+ >
|
|
|
+ <div class="upload-plus-icon">+</div>
|
|
|
+ <div class="upload-text">拖拽或点击上传</div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="container-title">运单列表</div>
|
|
|
+ <!-- <div class="container-title">运单列表</div>
|
|
|
<div class="line-container-p24">
|
|
|
<div class="line">
|
|
|
<div class="info-line">
|
|
|
@@ -533,7 +560,7 @@
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
<!-- <div class="container-title">磅单列表</div>
|
|
|
<div class="line-container-p24">
|
|
|
<div class="line" style="margin-bottom: 60px">
|
|
|
@@ -789,7 +816,6 @@ export default {
|
|
|
}
|
|
|
let updateForm = ref({});
|
|
|
let updateDischargeDialog = ref(false);
|
|
|
- let currentUpdateIndex = ref(-1);
|
|
|
async function updateDischarge() {
|
|
|
let postData = {
|
|
|
...updateForm.value,
|
|
|
@@ -836,13 +862,11 @@ export default {
|
|
|
dischargeTons,
|
|
|
dischargeTime,
|
|
|
};
|
|
|
- currentUpdateIndex.value = index;
|
|
|
}
|
|
|
function cancelUpdateDischarge() {
|
|
|
updateDischargeDialog.value = false;
|
|
|
updateForm.value = {};
|
|
|
updatePoundBillList.value = [];
|
|
|
- currentUpdateIndex.value = -1;
|
|
|
}
|
|
|
let mapId = ref(`map${route.query.id}`);
|
|
|
function initMap() {
|
|
|
@@ -1285,11 +1309,18 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ let isAddPoundVisable = ref(false);
|
|
|
+ let isAddTruckRecordVisable = ref(false);
|
|
|
+ let truckTableData = ref([]);
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
getVoyageDetail();
|
|
|
getDischargeList();
|
|
|
});
|
|
|
return {
|
|
|
+ isAddPoundVisable,
|
|
|
+ isAddTruckRecordVisable,
|
|
|
+ truckTableData,
|
|
|
certs,
|
|
|
downloadExcel,
|
|
|
isLoadingExcel,
|
|
|
@@ -1520,4 +1551,13 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 148px !important;
|
|
|
}
|
|
|
+
|
|
|
+.info-gap {
|
|
|
+ width: 120px;
|
|
|
+ font-size: 14px;
|
|
|
+ overflow: visible;
|
|
|
+ white-space: nowrap;
|
|
|
+ color: #006ebc;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
</style>
|
wzh