168 lines
3.3 KiB
Vue
168 lines
3.3 KiB
Vue
<template>
|
||
<view class="mixWork">
|
||
<view class="container">
|
||
<view class="tabsList">
|
||
<view class="tabsBox" v-for="(item,index) in tabsList" :key="index" :class="{active:tabsIndex == index}"
|
||
@click="tabsClick(item,index)">{{item}}</view>
|
||
</view>
|
||
<ul v-if="tabsType == 1">
|
||
<li v-for="(item,index) in peopleInfo" :key="index">
|
||
<view class="title">航次：{{item.val1}}</view>
|
||
<p>贸易类型：{{item.val2}}</p>
|
||
<p>进出口：{{item.val3}}</p>
|
||
<p>作业组数：{{item.val4}}</p>
|
||
<p>单船人数：{{item.val5}}</p>
|
||
<p>状态：{{item.val6}}</p>
|
||
</li>
|
||
</ul>
|
||
<ul v-if="tabsType == 2">
|
||
<li v-for="(item,index) in shiftInfo" :key="index">
|
||
<view class="title">航次：{{item.val1}}</view>
|
||
<view class="shift">
|
||
<p>一工班</p>
|
||
<span>作业时间：2023/09/09 13:00:00</span>
|
||
</view>
|
||
<view class="shift">
|
||
<p>二工班</p>
|
||
<span>作业时间：2023/09/09 13:00:00</span>
|
||
</view>
|
||
<view class="shift">
|
||
<p>三工班</p>
|
||
<span>作业时间：2023/09/09 13:00:00</span>
|
||
</view>
|
||
<view class="state">状态：{{item.val6}}</view>
|
||
</li>
|
||
</ul>
|
||
<view class="addBtn" @click="add">+ 新增</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabsList: ["人员信息", "工班信息"],
|
||
tabsType: 1,
|
||
tabsIndex: 0,
|
||
peopleInfo: [{
|
||
val1: "JK9795799",
|
||
val2: "内贸",
|
||
val3: "进口",
|
||
val4: "100",
|
||
val5: "100",
|
||
val6: "未上传",
|
||
}, {
|
||
val1: "JK9795799",
|
||
val2: "内贸",
|
||
val3: "进口",
|
||
val4: "100",
|
||
val5: "100",
|
||
val6: "未上传",
|
||
}, {
|
||
val1: "JK9795799",
|
||
val2: "内贸",
|
||
val3: "进口",
|
||
val4: "100",
|
||
val5: "100",
|
||
val6: "未上传",
|
||
}],
|
||
shiftInfo: [{
|
||
val1: "JK9795799",
|
||
val6: "未上传",
|
||
}, ]
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
tabsClick(item, index) {
|
||
this.tabsIndex = index;
|
||
if (item == "人员信息") {
|
||
this.tabsType = 1;
|
||
} else {
|
||
this.tabsType = 2;
|
||
}
|
||
},
|
||
add() {
|
||
uni.navigateTo({
|
||
url: `/pages/shipWork/mixAdd`
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.mixWork {
|
||
.container {
|
||
padding: 30px 20px;
|
||
|
||
.tabsList {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.tabsBox {
|
||
width: 100px;
|
||
height: 50px;
|
||
border-radius: 4px;
|
||
margin: 0px 10px;
|
||
border: 1px solid #ccc;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
}
|
||
|
||
.active {
|
||
background: #2979ff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
ul {
|
||
padding: 20px 0;
|
||
|
||
li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #ccc;
|
||
padding: 20px;
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.shift {
|
||
p {
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
|
||
.state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.addBtn {
|
||
position: fixed;
|
||
right: 50px;
|
||
bottom: 50px;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 50%;
|
||
background-color: #2979ff;
|
||
color: #fff;
|
||
font-size: 24px;
|
||
text-align: center;
|
||
line-height: 100px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
</style> |