455 lines
11 KiB
Vue
455 lines
11 KiB
Vue
<template>
|
||
<view class="details">
|
||
<head-view :title="title"></head-view>
|
||
<view class="container contentFixed">
|
||
<view class="liBox">
|
||
<view class="title">
|
||
<image src="../../static/images/carInfo.png" mode="widthFix"></image>
|
||
<text>基本信息</text>
|
||
</view>
|
||
<view class="ul">
|
||
<view class="li">
|
||
<p>船名：</p>
|
||
<text>{{objInfo.shipInfo.spmIdDesc}}</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>航次：</p>
|
||
<text>{{objInfo.shipInfo.vvyName}}</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>泊位：</p>
|
||
<text>{{objInfo.shipInfo.actualBerthageDesc}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="liBox">
|
||
<view class="title">
|
||
<image src="../../static/images/goodsImg.png" mode="widthFix"></image>
|
||
<text>详细信息</text>
|
||
</view>
|
||
<view class="ul">
|
||
<view class="li">
|
||
<p>品牌：</p>
|
||
<text>{{objInfo.xqInfo.brdName}}</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>提单号：</p>
|
||
<text>{{objInfo.xqInfo.mnfBl}}</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>车型：</p>
|
||
<text>{{objInfo.xqInfo.bvmName}}</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>型号：</p>
|
||
<text>{{objInfo.xqInfo.model}}</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>数量：</p>
|
||
<text>{{objInfo.xqInfo.amount}}</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>场位：</p>
|
||
<text>{{objInfo.xqInfo.yardPos}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="liBox">
|
||
<view class="title">
|
||
<image src="../../static/images/goodsImg2.png" mode="widthFix"></image>
|
||
<text>货物明细</text>
|
||
</view>
|
||
<view class="formNr">
|
||
<uni-table border stripe emptyText="暂无更多数据">
|
||
<!-- 表头行 -->
|
||
<uni-tr class="gray">
|
||
<uni-th align="center" width="10">序号</uni-th>
|
||
<uni-th align="center" width="22">车架号/条形码</uni-th>
|
||
<uni-th align="center" width="15">作业状态</uni-th>
|
||
<uni-th align="center" width="40">场位</uni-th>
|
||
<uni-th align="center" width="15">货物性质</uni-th>
|
||
<uni-th align="center" width="10">操作</uni-th>
|
||
</uni-tr>
|
||
<!-- 表格数据行 -->
|
||
<uni-tr v-for="(item,index) in tableList" :key="index">
|
||
<uni-td align="center">{{index + 1}}</uni-td>
|
||
<uni-td align="center">{{item.vinCode}}</uni-td>
|
||
<uni-td align="center">{{item.workStatus}}</uni-td>
|
||
<uni-td align="center">{{item.yardPos}}</uni-td>
|
||
<uni-td align="center">{{item.natureFlagName}}</uni-td>
|
||
<uni-td align="center">
|
||
<text class="operate" @click="open(item)">残损</text>
|
||
</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</view>
|
||
</view>
|
||
<!-- 弹出层 -->
|
||
<uni-popup ref="popup" :mask-click="false">
|
||
<view class="dialog">
|
||
<view class="dtitle">
|
||
<text>残损信息</text>
|
||
<uni-icons type="closeempty" size="30" @click="close"></uni-icons>
|
||
</view>
|
||
<view class="tableContant">
|
||
<view class="nr">
|
||
<text class="text">品牌:{{rowInfo.brdName}}</text>
|
||
<text class="text">车型:{{rowInfo.bvmName}}</text>
|
||
<text class="text">车架号/条形码:{{rowInfo.vinCode}}</text>
|
||
</view>
|
||
<view class="table" v-for="(item,index) in damagedList" :key="index">
|
||
<view class="title">
|
||
<view>质损发生环节: {{item.qdLinkName}}</view>
|
||
<view class="tag" v-if="item.godStatus != null">{{item.godStatus}}</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
质损上报人员: {{item.qdReportPerson}}
|
||
</view>
|
||
<view class="col">
|
||
质损上报时间: {{item.qualityDamageTime}}
|
||
</view>
|
||
<view class="col">
|
||
质损发生位置: {{item.yardPos}}
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="col">
|
||
质损概况: {{item.qualityDamageSituationName}}
|
||
</view>
|
||
<view class="col">
|
||
损坏情况: {{item.damageSituationName}}
|
||
</view>
|
||
<view class="col">
|
||
处置情况: {{item.disposalSituationName}}
|
||
</view>
|
||
</view>
|
||
<view class="imgRow">
|
||
<view class="name">
|
||
质损照片:
|
||
</view>
|
||
<view class="imgList">
|
||
<view class="img" v-for="(item2,index2) in item.damageImageList" :key="index2">
|
||
<image :src="item2" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="imgRow">
|
||
<view class="name">
|
||
车架号照片:
|
||
</view>
|
||
<view class="imgList">
|
||
<view class="img" v-for="(item2,index2) in item.vinCodeImageList" :key="index2">
|
||
<image :src="item2" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import HeadInfo from '@/components/head-info/head-info';
|
||
export default {
|
||
data() {
|
||
return {
|
||
loginObj: {},
|
||
title: "货物详情",
|
||
id: "",
|
||
|
||
// 基本信息
|
||
basicInfo: {},
|
||
|
||
// 详细信息
|
||
detailInfo: {},
|
||
|
||
// 货物明细
|
||
tableList: [],
|
||
|
||
// 货物明细当前行信息
|
||
rowInfo: {},
|
||
|
||
// 残损信息列表
|
||
damagedList: [],
|
||
|
||
// 质损照片
|
||
damageImage: [],
|
||
|
||
// 车架号照片
|
||
vinCodeImage: [],
|
||
|
||
// 内贸详情数据
|
||
objInfo: {},
|
||
}
|
||
},
|
||
components: {
|
||
HeadInfo
|
||
},
|
||
onLoad(options) {
|
||
this.objInfo = JSON.parse(decodeURIComponent(options.params))
|
||
console.log(this.objInfo)
|
||
this.loginObj = uni.getStorageSync('loginObj')
|
||
this.getTableInfo()
|
||
},
|
||
methods: {
|
||
// 获取货物明细数据
|
||
getTableInfo() {
|
||
uni.request({
|
||
url: `${this.$local}/api/unload/command/pageForCargoDetails?suaId=${this.objInfo.xqInfo.suaId}&lwpId=${this.objInfo.jcInfo.lwpId}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.data.status == 200) {
|
||
this.tableList = res.data.data.records
|
||
console.log(this.tableList)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
open(item) {
|
||
this.rowInfo = item
|
||
console.log(item)
|
||
this.$refs.popup.open('center')
|
||
this.getDamaged(item.vinCode)
|
||
},
|
||
// 获取残损信息
|
||
getDamaged(vinCode) {
|
||
uni.request({
|
||
url: `${this.$local}/api/goodsQuality/damage/${vinCode}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.data.status == 200) {
|
||
this.damagedList = res.data.data
|
||
this.damagedList.forEach((item, index) => {
|
||
item.damageImage.forEach((v, index2) => {
|
||
this.initImg(v, "1", index, index2)
|
||
})
|
||
item.vinCodeImage.forEach((v, index2) => {
|
||
this.initImg(v, "2", index, index2)
|
||
})
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
initImg(fileName, type, index, index2) {
|
||
uni.request({
|
||
url: `${this.$local}/api/file/url/?fileName=${fileName}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (type == 1) {
|
||
this.damageImage.push(res.data)
|
||
this.$set(this.damagedList[index], "damageImageList", this.damageImage)
|
||
if (this.damagedList[index].damageImage.length == this.damageImage.length) {
|
||
this.damageImage = []
|
||
}
|
||
} else if (type == 2) {
|
||
this.vinCodeImage.push(res.data)
|
||
this.$set(this.damagedList[index], "vinCodeImageList", this.vinCodeImage)
|
||
if (this.damagedList[index].vinCodeImage.length == this.vinCodeImage.length) {
|
||
this.vinCodeImage = []
|
||
}
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
close() {
|
||
this.$refs.popup.close()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.details {
|
||
.container {
|
||
padding: 16px;
|
||
|
||
.liBox {
|
||
width: 100%;
|
||
padding: 24px 16px;
|
||
background-color: #fff;
|
||
margin-bottom: 16px;
|
||
|
||
.title {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
|
||
image {
|
||
width: 24px;
|
||
height: 24px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
text {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
|
||
.ul {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.li {
|
||
width: 32%;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
font-size: 14px;
|
||
|
||
p {
|
||
color: #999;
|
||
}
|
||
|
||
text {
|
||
color: #23262E;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.formTitle {
|
||
padding-left: 10px;
|
||
border-left: 5px solid #2979ff;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.formNr {
|
||
.gray {
|
||
background-color: #f9f9f9;
|
||
}
|
||
|
||
.operate {
|
||
color: #2979ff;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.dialog {
|
||
width: 90vh;
|
||
height: 80vh;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
|
||
.dtitle {
|
||
width: 100%;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
border-radius: 10px 10px 0 0;
|
||
padding: 0 20px;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
background-color: #f9f9f9;
|
||
text-align: left;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.tableContant {
|
||
height: calc(80vh - 60px);
|
||
overflow-y: auto;
|
||
|
||
|
||
.nr {
|
||
padding: 0 20px;
|
||
height: 60px;
|
||
line-height: 60px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
.text {
|
||
min-width: 120px;
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
.table {
|
||
width: calc(100% - 40px);
|
||
margin: 0 20px 20px;
|
||
padding: 0 20px;
|
||
border-bottom: 1px solid #ebebeb;
|
||
|
||
.title {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-weight: 900;
|
||
text-align: left;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
.tag {
|
||
width: 60px;
|
||
margin: 10px 15px 0;
|
||
border-radius: 3px;
|
||
height: 20px;
|
||
line-height: 20px;
|
||
font-weight: 400;
|
||
color: #fff;
|
||
text-align: center;
|
||
background-color: #108ee9;
|
||
}
|
||
}
|
||
|
||
.row {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 18px;
|
||
height: 40px;
|
||
font-size: 10px;
|
||
|
||
.col {
|
||
width: 32%;
|
||
text-align: left;
|
||
}
|
||
|
||
}
|
||
|
||
.imgRow {
|
||
margin-bottom: 25rpx;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
|
||
.name {
|
||
width: 80px;
|
||
text-align: left;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.imgList {
|
||
width: calc(100% - 80px);
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
flex-wrap: wrap;
|
||
|
||
.img {
|
||
width: 100px;
|
||
margin-left: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |