532 lines
12 KiB
Vue
532 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="details">
|
|||
|
|
<head-view :title="title"></head-view>
|
|||
|
|
<view class="container">
|
|||
|
|
<view class="topBox">
|
|||
|
|
<view class="topImg">
|
|||
|
|
<image src="../../static/images/theme/logo.png"></image>
|
|||
|
|
<view class="rightTitle">
|
|||
|
|
<text>上海海通国际汽车码头有限公司</text>
|
|||
|
|
<text>SHANGHAI HAITONG INTERNATIONAL AUTOMOTIVE TERMINAL CO.</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<p class="title">装卸货物交接计数单</p>
|
|||
|
|
<p class="bh">编号/N0:<text>QR-7.5.1-01-05-M</text></p>
|
|||
|
|
<view class="infoList">
|
|||
|
|
<view class="li">
|
|||
|
|
<p class="liTitle">船名：</p>
|
|||
|
|
<text>{{shipInfo.spmName}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<p class="liTitle">航次：</p>
|
|||
|
|
<text>{{shipInfo.vvyName}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<p class="liTitle">进出口：</p>
|
|||
|
|
<text>{{shipInfo.importExportFlagName}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<p class="liTitle">贸易类型：</p>
|
|||
|
|
<text>{{shipInfo.tradeType}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<p class="liTitle">完工时间：</p>
|
|||
|
|
<text>{{shipInfo.actualFinishTime}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
<p class="liTitle">工班：</p>
|
|||
|
|
<text>{{shipInfo.gb}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="listBox">
|
|||
|
|
<view class="listTitle">
|
|||
|
|
<image src="../../static/images/goodsImg2.png" mode=""></image>
|
|||
|
|
<p>货物明细</p>
|
|||
|
|
<view class="total">
|
|||
|
|
<text>总计：</text>
|
|||
|
|
<text>车辆数：{{totalObj.carAmount}}</text>
|
|||
|
|
<text>备件数：{{totalObj.partAmount}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="table">
|
|||
|
|
<view class="tableTop">
|
|||
|
|
<view class="tableHead" v-for="(item,index) in tableHead" :key="index">
|
|||
|
|
<p>{{item}}</p>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tableInfo" v-for="(item,index) in tableData" :key="index">
|
|||
|
|
<view class="li">
|
|||
|
|
{{item.mnfBl}}
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
{{item.mnfMk}}
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
{{item.brdName}}
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
{{item.carAmount}}
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
{{item.partAmount}}
|
|||
|
|
</view>
|
|||
|
|
<view class="li" @click="toDetails(item)">
|
|||
|
|
详情
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="signBox">
|
|||
|
|
<view class="signContent">
|
|||
|
|
<view class="signTitle">
|
|||
|
|
<p>堆场员签名:</p>
|
|||
|
|
<p>Yard staff:</p>
|
|||
|
|
</view>
|
|||
|
|
<view class="signInfo" v-if="shipInfo.yardSignUrl == null" @click="toSign('0')">
|
|||
|
|
去签名
|
|||
|
|
</view>
|
|||
|
|
<view class="signImg" v-else>
|
|||
|
|
<image :src="yardSignUrl" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="row"></view>
|
|||
|
|
<view class="signContent" v-if="shipInfo.tradeType == '外贸'">
|
|||
|
|
<view class="signTitle">
|
|||
|
|
<p>理货员签名:</p>
|
|||
|
|
<p>tally clerk:</p>
|
|||
|
|
</view>
|
|||
|
|
<view class="signInfo" v-if="shipInfo.tallySignUrl == null" @click="toSign('1')">
|
|||
|
|
去签名
|
|||
|
|
</view>
|
|||
|
|
<view class="signImg" v-else>
|
|||
|
|
<image :src="tallySignUrl" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="signContent" v-else>
|
|||
|
|
<view class="signTitle">
|
|||
|
|
<p>船方:</p>
|
|||
|
|
<p>the ship:</p>
|
|||
|
|
</view>
|
|||
|
|
<view class="signInfo" v-if="shipInfo.shipSignUrl == null" @click="toSign('2')">
|
|||
|
|
去签名
|
|||
|
|
</view>
|
|||
|
|
<view class="signImg" v-else>
|
|||
|
|
<image :src="shipSignUrl" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<uni-popup ref="popup" background-color="#fff">
|
|||
|
|
<view class="table rowTable">
|
|||
|
|
<view class="tableTop">
|
|||
|
|
<view class="tableHead" v-for="(item,index) in rowTableHead" :key="index">
|
|||
|
|
<p>{{item}}</p>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="tableInfo" v-for="(item,index) in rowTableData" :key="index">
|
|||
|
|
<view class="li">
|
|||
|
|
{{index + 1}}
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
{{item.vinCode}}
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
{{item.qdLinkName}}
|
|||
|
|
</view>
|
|||
|
|
<view class="li">
|
|||
|
|
{{item.disposalSituationName}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</uni-popup>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import HeadView from '@/components/head-view/head-view.vue';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loginObj: {},
|
|||
|
|
portObj: {},
|
|||
|
|
title: "",
|
|||
|
|
shipInfo: {},
|
|||
|
|
totalObj: {},
|
|||
|
|
tableHead: ["提单号", "唛头", "品牌", "车辆数", "备件数", "原残具体情况"],
|
|||
|
|
tableData: [],
|
|||
|
|
rowTableHead: ["序号", "车架号", "质损发生环节", "损伤情况"],
|
|||
|
|
rowTableData: [],
|
|||
|
|
// 堆场员签名
|
|||
|
|
yardSignUrl: "",
|
|||
|
|
// 理货员签名
|
|||
|
|
tallySignUrl: "",
|
|||
|
|
// 船方签名
|
|||
|
|
shipSignUrl: "",
|
|||
|
|
|
|||
|
|
vvyId: "",
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
if ('params' in options) {
|
|||
|
|
this.vvyId = JSON.parse(decodeURIComponent(options.params)).vvyId
|
|||
|
|
this.loginObj = uni.getStorageSync('loginObj')
|
|||
|
|
this.portObj = uni.getStorageSync('portObj')
|
|||
|
|
this.initData()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取当前航次的船信息
|
|||
|
|
initData() {
|
|||
|
|
uni.request({
|
|||
|
|
url: `${this.$local}/shp/iEDeliverySlipController/page?vvyId=${this.vvyId}`,
|
|||
|
|
header: {
|
|||
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|||
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|||
|
|
},
|
|||
|
|
method: 'GET', //请求方式，必须为大写
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log(res)
|
|||
|
|
if (res.statusCode == 200) {
|
|||
|
|
this.shipInfo = res.data.data.records[0]
|
|||
|
|
console.log(this.shipInfo)
|
|||
|
|
this.title = `船名：${this.shipInfo.spmName} / 航次：${this.shipInfo.vvyName} 装卸货物交接计数单`
|
|||
|
|
this.getInfo()
|
|||
|
|
this.getSgin()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取数据
|
|||
|
|
getInfo() {
|
|||
|
|
uni.request({
|
|||
|
|
url: `${this.$local}/shp/iEDeliverySlipController/planPage?vvyId=${this.shipInfo.vvyId}&importExportFlag=${this.shipInfo.importExportFlag}`,
|
|||
|
|
header: {
|
|||
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|||
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|||
|
|
},
|
|||
|
|
method: 'GET', //请求方式，必须为大写
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.statusCode == 200) {
|
|||
|
|
this.tableData = res.data.data.plan.records
|
|||
|
|
this.totalObj = res.data.data.count
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取当前行的数据
|
|||
|
|
toDetails(item) {
|
|||
|
|
this.$refs.popup.open('center')
|
|||
|
|
let obj = {
|
|||
|
|
splId: item.splId,
|
|||
|
|
importExportFlag: this.shipInfo.importExportFlag
|
|||
|
|
}
|
|||
|
|
uni.request({
|
|||
|
|
url: `${this.$local}/shp/iEDeliverySlipController/iEDeliverySlipPlanDamage`,
|
|||
|
|
data: obj,
|
|||
|
|
header: {
|
|||
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|||
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|||
|
|
},
|
|||
|
|
method: 'POST', //请求方式，必须为大写
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.statusCode == 200) {
|
|||
|
|
this.rowTableData = res.data.data
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取堆场员，理货员，船方签名
|
|||
|
|
getSgin() {
|
|||
|
|
let arr = [{
|
|||
|
|
type: 0,
|
|||
|
|
url: this.shipInfo.yardSignUrl,
|
|||
|
|
}, {
|
|||
|
|
type: 1,
|
|||
|
|
url: this.shipInfo.tallySignUrl,
|
|||
|
|
}, {
|
|||
|
|
type: 2,
|
|||
|
|
url: this.shipInfo.shipSignUrl
|
|||
|
|
}]
|
|||
|
|
arr.forEach(v => {
|
|||
|
|
if (v != null) {
|
|||
|
|
this.initImg(v)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 调用获取图片接口
|
|||
|
|
initImg(v) {
|
|||
|
|
uni.request({
|
|||
|
|
url: `${this.$local}/api/file/url/?fileName=${v.url}`,
|
|||
|
|
header: {
|
|||
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|||
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|||
|
|
},
|
|||
|
|
method: 'GET', //请求方式，必须为大写
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.statusCode == 200) {
|
|||
|
|
if (v.type == 0) {
|
|||
|
|
this.yardSignUrl = res.data
|
|||
|
|
} else if (v.type == 1) {
|
|||
|
|
this.tallySignUrl = res.data
|
|||
|
|
} else {
|
|||
|
|
this.shipSignUrl = res.data
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 点击签字
|
|||
|
|
toSign(type) {
|
|||
|
|
this.shipInfo['type'] = type
|
|||
|
|
const params = encodeURIComponent(JSON.stringify(this.shipInfo));
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/receipt/sign?params=' + params
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.details {
|
|||
|
|
background-color: #F6F7F9;
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
padding: 16px;
|
|||
|
|
margin-top: 68px;
|
|||
|
|
|
|||
|
|
.topBox {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
padding: 16px 24px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
|
|||
|
|
.topImg {
|
|||
|
|
padding: 16px 0;
|
|||
|
|
border-bottom: 1px solid #999;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 270px;
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rightTitle {
|
|||
|
|
text-align: right;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
|
|||
|
|
text:first-child {
|
|||
|
|
font-size: 22px;
|
|||
|
|
color: #0052A4;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text:last-child {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 24px;
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #23262E;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bh {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
text-align: right;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666666;
|
|||
|
|
padding-bottom: 16.5px;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #0052A4;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.infoList {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #23262E;
|
|||
|
|
margin-top: 15.5px;
|
|||
|
|
padding: 0 60px;
|
|||
|
|
|
|||
|
|
.li {
|
|||
|
|
display: flex;
|
|||
|
|
width: 33%;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.liTitle {
|
|||
|
|
width: 100px;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.listBox {
|
|||
|
|
padding: 24px 18px;
|
|||
|
|
margin-bottom: 70px;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
|
|||
|
|
.listTitle {
|
|||
|
|
display: flex;
|
|||
|
|
margin-bottom: 25px;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
margin-top: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #23262E;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 14px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.total {
|
|||
|
|
padding: 7.5px 16px;
|
|||
|
|
background: #FFF8F4;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #FF6400;
|
|||
|
|
margin-left: 16px;
|
|||
|
|
|
|||
|
|
text:first-child {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text:last-child {
|
|||
|
|
margin-left: 32px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signBox {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 66px;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border: 1px solid #E1E5ED;
|
|||
|
|
box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.05);
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
padding: 0 70px;
|
|||
|
|
|
|||
|
|
.row {
|
|||
|
|
width: 1px;
|
|||
|
|
height: 30px;
|
|||
|
|
background-color: #ccc;
|
|||
|
|
margin-top: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signContent {
|
|||
|
|
display: flex;
|
|||
|
|
margin: 0 54px;
|
|||
|
|
|
|||
|
|
.signTitle {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signInfo {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 18px;
|
|||
|
|
color: #0052A4;
|
|||
|
|
margin-left: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signImg {
|
|||
|
|
width: 100px;
|
|||
|
|
height: 54px;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.signContent:last-child {
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.table {
|
|||
|
|
.tableTop {
|
|||
|
|
display: flex;
|
|||
|
|
background: #F4F4F4;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
|
|||
|
|
.tableHead {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #0B266A;
|
|||
|
|
padding-left: 9px;
|
|||
|
|
height: 20px;
|
|||
|
|
border-left: 1px solid #0B266A;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tableInfo {
|
|||
|
|
display: flex;
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
border-bottom: 1px solid #E9ECF1;
|
|||
|
|
|
|||
|
|
.li {
|
|||
|
|
flex: 1;
|
|||
|
|
padding-left: 9px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.li:last-child {
|
|||
|
|
color: #0067CF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tableInfo:nth-of-type(2n) {
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tableInfo:nth-of-type(2n-1) {
|
|||
|
|
background: #FAFAFA;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rowTable {
|
|||
|
|
width: 600px;
|
|||
|
|
height: 400px;
|
|||
|
|
overflow: scroll;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|