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> |