300 lines
7.1 KiB
Vue
300 lines
7.1 KiB
Vue
|
<template>
|
|||
|
|
<view class="shiftDetails">
|
|||
|
|
<view class="container">
|
|||
|
|
<custom-tabs type="c1" :value="value" @change="changeIndex">
|
|||
|
|
<custom-tab-pane label="工班信息" name="c1_1">
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<p>船名：</p>
|
|||
|
|
<span>快乐号</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>航次：</p>
|
|||
|
|
<span>JK97065578</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>进出口：</p>
|
|||
|
|
<span>进口</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>贸易类型：</p>
|
|||
|
|
<span>外贸</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>装卸类型：</p>
|
|||
|
|
<span> 装货</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<p>工班：</p>
|
|||
|
|
<span> 一工班</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>作业时间：</p>
|
|||
|
|
<span> 2023/06/06 12:00 - 023/06/06 13:00</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>车型：</p>
|
|||
|
|
<span>轿车</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>数量：</p>
|
|||
|
|
<span>100</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="wLi">
|
|||
|
|
<p>备注：</p>
|
|||
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
|||
|
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
|||
|
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
|
|||
|
|
nascetur ridiculus mus. Nam</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>车型：</p>
|
|||
|
|
<span>备件</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>数量：</p>
|
|||
|
|
<span>100</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="wLi">
|
|||
|
|
<p>备注：</p>
|
|||
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
|||
|
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
|||
|
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
|
|||
|
|
nascetur ridiculus mus. Nam</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<p>工班：</p>
|
|||
|
|
<span> 二工班</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>作业时间：</p>
|
|||
|
|
<span> 2023/06/06 12:00 - 023/06/06 13:00</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>车型：</p>
|
|||
|
|
<span>轿车</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>数量：</p>
|
|||
|
|
<span>100</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="wLi">
|
|||
|
|
<p>备注：</p>
|
|||
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
|||
|
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
|||
|
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
|
|||
|
|
nascetur ridiculus mus. Nam</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</custom-tab-pane>
|
|||
|
|
<custom-tab-pane label="翻仓信息" name="c1_2">
|
|||
|
|
<view class="fcInfo" v-for="(item,index) in fcList" :key="index + 'fc'">
|
|||
|
|
<view class="fcBox">
|
|||
|
|
<p>翻舱类型：</p>
|
|||
|
|
<span>舱内翻</span>
|
|||
|
|
</view>
|
|||
|
|
<ul v-for="(item2,index2) in item.infoList" :key="index2 + 'info'">
|
|||
|
|
<li>
|
|||
|
|
<p>航次：</p>
|
|||
|
|
<span>JK97065578</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>翻舱起点：</p>
|
|||
|
|
<span>D5H4</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>翻舱终点：</p>
|
|||
|
|
<span>舱外</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>作业时间：</p>
|
|||
|
|
<span>2023/06/06 12:00 - 023/06/06 13:00</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>车型：</p>
|
|||
|
|
<span>轿车</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>数量：</p>
|
|||
|
|
<span>100</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>体积：</p>
|
|||
|
|
<span>30</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>重量：</p>
|
|||
|
|
<span>50</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</custom-tab-pane>
|
|||
|
|
<custom-tab-pane label="其他信息" name="c1_3">
|
|||
|
|
<view class="otherInfo">
|
|||
|
|
<p class="title">辅助作业</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<p>技术工人：</p>
|
|||
|
|
<span>10</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>普通工人：</p>
|
|||
|
|
<span>30</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>作业时间：</p>
|
|||
|
|
<span>2023/06/06 12:00 - 023/06/06 13:00</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>重量：</p>
|
|||
|
|
<span>50</span>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p>体积：</p>
|
|||
|
|
<span>30</span>
|
|||
|
|
</li>
|
|||
|
|
<li class="wLi">
|
|||
|
|
<p>描述：</p>
|
|||
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
|||
|
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
|||
|
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
|
|||
|
|
montes,nascetur ridiculus mus. Nam</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<p class="title">待工作业</p>
|
|||
|
|
<ul>
|
|||
|
|
<li class="wLi">
|
|||
|
|
<p>描述：</p>
|
|||
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
|||
|
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
|||
|
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
|
|||
|
|
montes,nascetur ridiculus mus. Nam</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<p class="title">作业备注</p>
|
|||
|
|
<ul>
|
|||
|
|
<li class="wLi">
|
|||
|
|
<p>描述：</p>
|
|||
|
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
|
|||
|
|
laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin
|
|||
|
|
sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient
|
|||
|
|
montes,nascetur ridiculus mus. Nam</span>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</custom-tab-pane>
|
|||
|
|
</custom-tabs>
|
|||
|
|
<view class="btnList">
|
|||
|
|
<van-button type="default" @click="cancel">取消</van-button>
|
|||
|
|
<van-button type="default">删除</van-button>
|
|||
|
|
<van-button type="info">编辑</van-button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
value: 2,
|
|||
|
|
fcList: [{
|
|||
|
|
infoList: [{}, {}]
|
|||
|
|
}, {
|
|||
|
|
infoList: [{}]
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
changeIndex(e) {
|
|||
|
|
// console.log('选中:', e)
|
|||
|
|
},
|
|||
|
|
// 取消
|
|||
|
|
cancel() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/shipWork/mixWork'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less" scoped>
|
|||
|
|
.shiftDetails {
|
|||
|
|
.container {
|
|||
|
|
padding: 30px 20px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
|
|||
|
|
.fcInfo {
|
|||
|
|
padding-bottom: 20px;
|
|||
|
|
border-bottom: 1px solid #ccc;
|
|||
|
|
|
|||
|
|
.fcBox {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
line-height: 35px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul {
|
|||
|
|
border-bottom: 1px dashed #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul:last-child {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.otherInfo {
|
|||
|
|
.title {
|
|||
|
|
margin: 20px 0;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
padding-left: 10px;
|
|||
|
|
border-left: 5px solid #2979ff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ul {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
width: 45%;
|
|||
|
|
display: flex;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
line-height: 35px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
min-width: 85px;
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wLi {
|
|||
|
|
width: calc(100% - 150px);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btnList {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
|
|||
|
|
/deep/ .van-button {
|
|||
|
|
margin: 30px 20px;
|
|||
|
|
width: 120px;
|
|||
|
|
height: 50px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|