pad-app/pages/shipWork/peopleAdd.vue

212 lines
4.5 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="peopleAdd">
<view class="container">
<ul>
<li>
<p>船名</p>
<span>快乐号</span>
</li>
<li>
<p><span class="required" v-if="obj.state != 'look'">*</span>航次:</p>
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
v-if="obj.state != 'look'"></uni-data-select>
<p v-else>CK98796</p>
</li>
<li>
<p>进出口:</p>
<span>进口</span>
</li>
<li>
<p>贸易类型:</p>
<span>内贸</span>
</li>
<li>
<p><span class="required" v-if="obj.state != 'look'">*</span>天气:</p>
<span>未知</span>
</li>
<li>
<p><span class="required" v-if="obj.state != 'look'">*</span>泊位:</p>
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"
v-if="obj.state != 'look'"></uni-data-select>
<p v-else>1泊位</p>
</li>
<li>
<p><span class="required" v-if="obj.state != 'look'">*</span>作业组数:</p>
<uni-number-box @change="workChange" v-if="obj.state != 'look'" />
<p v-else>5</p>
</li>
<li>
<p><span class="required" v-if="obj.state != 'look'">*</span>单船人数:</p>
<uni-number-box @change="shipChange" v-if="obj.state != 'look'" />
<p v-else>12</p>
</li>
<li>
<p>作业时间:</p>
<uni-datetime-picker v-model="datetime" type="datetimerange" rangeSeparator="-" @change="changeLog"
v-if="obj.state != 'look'" />
<p v-else>2020-04-21 00:00 - 2020-04-21 00:00</p>
</li>
</ul>
<view class="btnList">
<van-button type="default" @click="cancel">取消</van-button>
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')"></van-button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
obj: {},
// 航次下拉框
hcValue: "",
hcList: [{
value: 0,
text: "航次0"
},
{
value: 1,
text: "航次1"
},
{
value: 2,
text: "航次2"
},
],
// 泊位下拉框
bwValue: "",
bwList: [{
value: 0,
text: "泊位0"
},
{
value: 1,
text: "泊位1"
},
{
value: 2,
text: "泊位2"
},
],
// 作业单数
workValue: 0,
// 单船人数
shipValue: 0,
// 作业时间
datetime: "",
}
},
onLoad(options) {
if ('params' in options) {
// 获取传递的对象参数使用decodeURIComponent解码并转为对象
this.obj = JSON.parse(decodeURIComponent(options.params))
}
},
methods: {
// 航次下拉
hcChange(e) {
this.hcValue = e;
},
// 泊位下拉
bwChange(e) {
this.bwValue = e;
},
// 作业组数
workChange(val) {
this.workValue = val;
},
// 单船人数
shipChange(val) {
this.shipValue = val;
},
// 作业时间
changeLog(e) {
this.datetime = e;
console.log(e)
},
// 取消
cancel() {
uni.navigateTo({
url: '/pages/shipWork/mixWork'
})
},
// 保存
save() {
uni.navigateTo({
url: '/pages/shipWork/mixWork'
})
},
// 编辑
toGo(state) {
this.obj.state = state;
const params = encodeURIComponent(JSON.stringify(this.obj));
uni.navigateTo({
url: `/pages/shipWork/peopleAdd?params=${params}`
})
}
}
}
</script>
<style lang="less" scoped>
.peopleAdd {
.container {
padding: 30px 20px;
background-color: #fff;
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
width: 44%;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
display: flex;
padding: 10px 20px;
line-height: 35px;
margin-bottom: 20px;
.required {
color: red;
margin-right: 5px;
}
/deep/.uni-numbox {
border: 1px solid #ccc;
box-sizing: border-box;
}
/deep/.uni-numbox-btns {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
padding: 0 14px;
box-sizing: border-box;
}
/deep/.uni-numbox__value {
width: 100px;
height: 35px;
line-height: 35px;
background-color: #fff !important;
}
}
}
.btnList {
display: flex;
justify-content: center;
/deep/ .van-button {
margin: 30px 20px;
width: 120px;
height: 50px;
}
}
}
}
</style>