352 lines
7.9 KiB
Vue
352 lines
7.9 KiB
Vue
<template>
|
||
<view class="details">
|
||
<head-view title="船名/航次"></head-view>
|
||
<view class="container contentFixed">
|
||
<view class="userInfo">
|
||
<p>填报人：{{infoData.qdReportPerson}}</p>
|
||
<p>上报部门：{{infoData.qrpDept}}</p>
|
||
</view>
|
||
<view class="formTitle">
|
||
基本信息
|
||
</view>
|
||
<view class="ul zsInfo">
|
||
<view class="li">
|
||
<p>质损发生环节</p>
|
||
<view class="rightInfo">
|
||
<p>{{infoData.qdLinkName}} </p>
|
||
<p v-if="infoData.linkFeedback != '' || infoData.linkOther != ''">
|
||
备注：{{infoData.linkFeedback}}{{infoData.linkOther}}
|
||
</p>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ul">
|
||
<view class="li">
|
||
<p class="liTitle">板车照片</p>
|
||
<view class="picture">
|
||
<template v-for="item in boardCarPhotos">
|
||
<image :key="item" :src="item" mode="widthFix"></image>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle">板车车牌照</p>
|
||
<view class="picture">
|
||
<template v-for="item in boardCarList">
|
||
<image :key="item" :src="item" mode="widthFix"></image>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="formTitle">
|
||
质损信息
|
||
</view>
|
||
<view class="ul zsInfo">
|
||
<view class="li">
|
||
<p>车架号/条形码：</p>
|
||
<p>{{infoData.vinCode}}</p>
|
||
</view>
|
||
<view class="li">
|
||
<p>船名/航次：</p>
|
||
<p>{{infoData.spmIdAndVvyId}}</p>
|
||
</view>
|
||
<view class="li">
|
||
<p>车型：</p>
|
||
<p>{{infoData.bvmName}}</p>
|
||
</view>
|
||
<view class="li">
|
||
<p>品牌：</p>
|
||
<p>{{infoData.brdName}}</p>
|
||
</view>
|
||
<view class="li">
|
||
<p>场位：</p>
|
||
<p>{{infoData.pos}}</p>
|
||
</view>
|
||
<view class="li">
|
||
<p>质损时间：</p>
|
||
<p>{{infoData.qualityDamageTime}}</p>
|
||
</view>
|
||
<view class="li">
|
||
<p>质损货物品类：</p>
|
||
<view class="rightInfo">
|
||
<p>{{infoData.qdGodsCategoryName}}</p>
|
||
<p v-if="infoData.qdGcOther != ''">
|
||
备注：{{infoData.qdGcOther}}
|
||
</p>
|
||
</view>
|
||
</view>
|
||
<view class="li imageLi">
|
||
<image :src="zsImg" mode="widthFix"></image>
|
||
</view>
|
||
<view class="li tsLi">
|
||
<p>质损概况：</p>
|
||
<view class="rightInfo">
|
||
<p>{{infoData.qdGodsCategoryName}}</p>
|
||
<p v-if="infoData.qdGcOther != ''">
|
||
备注：{{infoData.qdGcOther}}
|
||
</p>
|
||
</view>
|
||
</view>
|
||
<view class="li tsLi">
|
||
<p>损伤情况：</p>
|
||
<view class="rightInfo">
|
||
<p>{{infoData.damageSituationName}}</p>
|
||
<p v-if="infoData.dsOther != ''">
|
||
备注：{{infoData.dsOther}}
|
||
</p>
|
||
</view>
|
||
</view>
|
||
<view class="li tsLi">
|
||
<p>处置情况：</p>
|
||
<view class="rightInfo">
|
||
<p>{{infoData.disposalSituationName}}</p>
|
||
<p v-if="infoData.dpsOther != ''">
|
||
备注：{{infoData.dpsOther}}
|
||
</p>
|
||
</view>
|
||
</view>
|
||
<view class="li zpLi">
|
||
<p class="liTitle">质损照片</p>
|
||
<view class="picture">
|
||
<template v-for="item in qualityDamage">
|
||
<image :key="item" :src="item" mode="widthFix"></image>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="li zpLi">
|
||
<p class="liTitle">车架号图片</p>
|
||
<view class="picture">
|
||
<template v-for="item in carFrameNumber">
|
||
<image :key="item" :src="item" mode="widthFix"></image>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="formTitle">
|
||
签字
|
||
</view>
|
||
<view class="ul">
|
||
<view class="li flexLi">
|
||
<p class="liTitle">质损负责人</p>
|
||
<p>{{infoData.qdLiablePerson}}</p>
|
||
</view>
|
||
<view class="li flexLi">
|
||
<p class="liTitle">签名</p>
|
||
<view class="picture">
|
||
<image :src="signImg" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btnList">
|
||
<van-button type="default" @click="cancel">取消</van-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
ygqId: "",
|
||
loginObj: {},
|
||
infoData: {},
|
||
// 板车照片
|
||
boardCarPhotos: [],
|
||
// 板车车牌照
|
||
boardCarList: [],
|
||
// 质损照片
|
||
qualityDamage: [],
|
||
// 车架号图片
|
||
carFrameNumber: [],
|
||
// 签名图片
|
||
signImg: "",
|
||
// 质损参考图
|
||
zsImg: "",
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if ('params' in options) {
|
||
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||
this.ygqId = JSON.parse(decodeURIComponent(options.params)).ygqId
|
||
}
|
||
this.loginObj = uni.getStorageSync('loginObj')
|
||
this.initData()
|
||
},
|
||
methods: {
|
||
initData() {
|
||
uni.request({
|
||
url: `${this.$local}/api/goodsQuality/getDetail?ygqId=${this.ygqId}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
console.log('接口返回------', res);
|
||
if (res.statusCode == 200) {
|
||
this.infoData = res.data.data
|
||
// 获取板车照片
|
||
this.infoData.boardCarPhotos.forEach(v => {
|
||
this.initImg(v.filePath, "1")
|
||
})
|
||
// 获取板车车牌照
|
||
this.infoData.boardCarLicensePlates.forEach(v => {
|
||
this.initImg(v.filePath, "2")
|
||
})
|
||
// 获取质损照片
|
||
this.infoData.qualityDamagePhotos.forEach(v => {
|
||
this.initImg(v.filePath, "3")
|
||
})
|
||
// 获取车架号图片
|
||
this.infoData.carFrameNumberPhotos.forEach(v => {
|
||
this.initImg(v.filePath, "4")
|
||
})
|
||
this.initImg(this.infoData.signUrl, "5")
|
||
this.initImg(this.infoData.refImageUrl, "6")
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// type 1 板车照片 2板车车牌照 3质损照片 4车架号图片 5签名 6参考图
|
||
initImg(fileName, type) {
|
||
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 (res.statusCode == 200) {
|
||
if (type == 1) {
|
||
this.boardCarPhotos.push(res.data)
|
||
} else if (type == 2) {
|
||
this.boardCarList.push(res.data)
|
||
} else if (type == 3) {
|
||
this.qualityDamage.push(res.data)
|
||
} else if (type == 4) {
|
||
this.carFrameNumber.push(res.data)
|
||
} else if (type == 5) {
|
||
this.signImg = res.data
|
||
} else if (type == 5) {
|
||
this.zsImg = res.data
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 取消
|
||
cancel() {
|
||
uni.navigateTo({
|
||
url: '/pages/quality/index'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.details {
|
||
.container {
|
||
padding: 20px 30px;
|
||
|
||
.userInfo {
|
||
display: flex;
|
||
margin-bottom: 20px;
|
||
|
||
p {
|
||
margin-right: 30px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.formTitle {
|
||
padding-left: 10px;
|
||
border-left: 5px solid #2979ff;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.ul {
|
||
margin-bottom: 30px;
|
||
|
||
.rightInfo {
|
||
display: flex;
|
||
|
||
p {
|
||
width: 120px;
|
||
}
|
||
}
|
||
|
||
.flexLi {
|
||
display: flex;
|
||
}
|
||
|
||
.li {
|
||
margin-top: 30px;
|
||
|
||
.liTitle {
|
||
min-width: 100px;
|
||
margin-right: 20px;
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.picture {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
image {
|
||
width: 120px;
|
||
height: 120px;
|
||
margin: 10px;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
|
||
.zsInfo {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.li {
|
||
width: 48%;
|
||
display: flex;
|
||
|
||
p:first-child {
|
||
width: 120px;
|
||
}
|
||
}
|
||
|
||
.tsLi {
|
||
width: 100%;
|
||
}
|
||
|
||
.zpLi {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.imageLi {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
}
|
||
|
||
.btnList {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
/deep/ .van-button {
|
||
margin: 30px 0;
|
||
width: 120px;
|
||
height: 50px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |