wsnet
/
pad-app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
pad-app/pages/index/instructDetails.vue

502 lines
12 KiB
Vue
Raw Normal View History

7.12
2023-07-12 18:06:16 +08:00
<template>
<view class="details">
<view class="container">
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="liBox">
<view class="title">
<image src="../../static/images/carInfo.png" mode=""></image>
<text>基本信息</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="ul">
<view class="li">
<p>船名：</p>
<text>海王星领袖</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>航次：</p>
<text>29089473289</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>港口：</p>
<text>厦门港</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>货代：</p>
<text>货代货代货代货代</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>联系人：</p>
<text>张xx</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>联系方式：</p>
<text>12345678900</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>泊位：</p>
<text>一泊位</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>备注：</p>
<text>我是备注我是备注我是备注</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
</view>
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="liBox">
<view class="title">
<image src="../../static/images/goodsImg.png" mode=""></image>
<text>货物明细</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="ul">
<view class="li">
<p>提单号：</p>
<text>789654654123</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>品牌：</p>
<text>奔驰</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>型号：</p>
<text>cx87898888</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>车辆明细：</p>
<text>车辆明细车辆明细</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>车长：</p>
<text>1888</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>车宽：</p>
<text>1688</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>车高：</p>
<text>1000</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>体积：</p>
<text>28888</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>重量：</p>
<text>48888</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>数量：</p>
<text>288</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>单票数量：</p>
<text>10</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="li">
<p>单票重量：</p>
<text>33</text>
</view>
<view class="li">
<p>单票体积：</p>
<text>20</text>
7.12
2023-07-12 18:06:16 +08:00
</view>
</view>
</view>
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
<view class="liBox">
<view class="title">
<image src="../../static/images/goodsImg2.png" mode=""></image>
<text>货物表格</text>
</view>
<view class="formNr">
<uni-table border stripe emptyText="暂无更多数据">
<!-- 表头行 -->
<uni-tr class="gray">
<uni-th align="center" width="22">序号</uni-th>
<uni-th align="center" width="22">车架号/条形码</uni-th>
<uni-th align="center" width="22">作业状态</uni-th>
<uni-th align="center" width="22">场位</uni-th>
<uni-th align="center" width="12">操作</uni-th>
</uni-tr>
<!-- 表格数据行 -->
<uni-tr>
<uni-td>1</uni-td>
<uni-td>a</uni-td>
<uni-td>ix3</uni-td>
<uni-td>18283</uni-td>
<uni-td align="center">
<text class="operate" @click="open">残损</text>
</uni-td>
</uni-tr>
</uni-table>
</view>
7.12
2023-07-12 18:06:16 +08:00
</view>
装船指令静态完成
2023-07-13 11:12:15 +08:00
<!-- 弹出层 -->
<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">品牌:</text>
<text class="text">车型:</text>
<text class="text">车架号/条形码:</text>
</view>
<view class="table">
<view class="title">
<view>质损发生环节: 收车交接</view>
<view class="tag">已收车</view>
</view>
<view class="row">
<view class="col">
质损上报人员: 张星星
</view>
<view class="col">
质损上报时间: 2023/09/08 23:00
</view>
<view class="col">
质损发生位置: 舱内
</view>
</view>
<view class="row">
<view class="col">
质损概况: 磕伤
</view>
<view class="col">
损坏情况: 凹陷
</view>
<view class="col">
处置情况: 其他 这是一段关于其他的描述
</view>
</view>
<view class="imgRow">
<view class="name">
质损照片:
</view>
<view class="imgList">
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
</view>
</view>
<view class="imgRow">
<view class="name">
车架号照片:
</view>
<view class="imgList">
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
</view>
</view>
</view>
7.12
2023-07-12 18:06:16 +08:00
装船指令静态完成
2023-07-13 11:12:15 +08:00
<view class="table">
<view class="title">
<view>质损发生环节: 收车交接</view>
<view class="tag">已收车</view>
</view>
<view class="row">
备注：这段备注很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长
</view>
<view class="row">
<view class="col">
质损上报人员: 张星星
</view>
<view class="col">
质损上报时间: 2023/09/08 23:00
</view>
<view class="col">
质损发生位置: 舱内
</view>
</view>
<view class="row">
<view class="col">
质损概况: 磕伤
</view>
<view class="col">
损坏情况: 凹陷
</view>
<view class="col">
处置情况: 其他 这是一段关
</view>
</view>
<view class="imgRow">
<view class="name">
质损照片:
</view>
<view class="imgList">
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
</view>
</view>
<view class="imgRow">
<view class="name">
车架号照片:
</view>
<view class="imgList">
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
<view class="img">
<image src="../../static/images/testImg.jpg" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</uni-popup>
7.12
2023-07-12 18:06:16 +08:00
</view>
</view>
</template>
<script>
7.24
2023-07-24 16:14:37 +08:00
import {
mapActions
} from 'vuex'
7.12
2023-07-12 18:06:16 +08:00
import HeadInfo from '@/components/head-info/head-info';
export default {
data() {
7.24
2023-07-24 16:14:37 +08:00
return {
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
id: 0
7.24
2023-07-24 16:14:37 +08:00
}
7.12
2023-07-12 18:06:16 +08:00
},
components: {
HeadInfo
},
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
onLoad(options) {
this.id = JSON.parse(decodeURIComponent(options.id))
7.24
2023-07-24 16:14:37 +08:00
this.loadList() // 总指令：分页查询
},
7.12
2023-07-12 18:06:16 +08:00
methods: {
7.24
2023-07-24 16:14:37 +08:00
...mapActions([
'majax',
'najax'
]),
loadList() {
let data = {}
data.spsId = this.id
this.majax({
url: this.$local + "/api/shipInstructions/listDetail",
params: data,
method: 'GET'
}).then(res => {
// this.itemList = res.data.records
})
},
装船指令静态完成
2023-07-13 11:12:15 +08:00
open() {
this.$refs.popup.open('center')
},
close() {
this.$refs.popup.close()
7.12
2023-07-12 18:06:16 +08:00
}
}
}
</script>
<style lang="less" scoped>
.details {
.container {
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
padding: 16px;
7.12
2023-07-12 18:06:16 +08:00
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
.liBox {
width: 100%;
padding: 24px 16px;
background-color: #fff;
margin-bottom: 16px;
7.12
2023-07-12 18:06:16 +08:00
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
.title {
display: flex;
margin-bottom: 20px;
image {
width: 24px;
height: 24px;
margin-top: 2px;
}
7.12
2023-07-12 18:06:16 +08:00
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
text {
font-size: 18px;
font-weight: bold;
margin-left: 10px;
}
}
.ul {
7.12
2023-07-12 18:06:16 +08:00
display: flex;
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
flex-wrap: wrap;
7.12
2023-07-12 18:06:16 +08:00
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
.li {
width: 32%;
margin-bottom: 12px;
7.12
2023-07-12 18:06:16 +08:00
display: flex;
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
font-size: 14px;
7.12
2023-07-12 18:06:16 +08:00
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
p {
color: #999;
7.12
2023-07-12 18:06:16 +08:00
}
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
text {
color: #23262E;
}
7.12
2023-07-12 18:06:16 +08:00
}
}
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
}
7.12
2023-07-12 18:06:16 +08:00
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
.formTitle {
padding-left: 10px;
border-left: 5px solid #2979ff;
font-size: 20px;
font-weight: bold;
}
.formNr {
7.12
2023-07-12 18:06:16 +08:00
.gray {
background-color: #f9f9f9;
}
样式修改，逻辑修改 8.23
2023-08-23 17:42:44 +08:00
.operate {
color: #2979ff;
}
7.12
2023-07-12 18:06:16 +08:00
}
}
}
装船指令静态完成
2023-07-13 11:12:15 +08:00
.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;
}
}
}
}
}
}
7.12
2023-07-12 18:06:16 +08:00
</style>