565 lines
13 KiB
Vue
565 lines
13 KiB
Vue
<template>
|
||
<view class="shiftAdd">
|
||
<view class="container">
|
||
<uni-steps :options="stepList" :active="active" />
|
||
<view class="line"></view>
|
||
<!-- 工班信息 -->
|
||
<template v-if="active == 0">
|
||
<ul class="ul1">
|
||
<li>
|
||
<p>船名：</p>
|
||
<span>快乐号</span>
|
||
</li>
|
||
<li>
|
||
<p><span class="required">*</span>航次：</p>
|
||
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"></uni-data-select>
|
||
</li>
|
||
<li>
|
||
<p>进出口：</p>
|
||
<span>进口</span>
|
||
</li>
|
||
<li>
|
||
<p>贸易类型：</p>
|
||
<span>内贸</span>
|
||
</li>
|
||
<li>
|
||
<p><span class="required">*</span>装卸类型：</p>
|
||
<uni-data-select v-model="zxValue" :localdata="zxList" @change="zxChange"></uni-data-select>
|
||
</li>
|
||
</ul>
|
||
<view class="ulTop"><span @click="ulAdd1">添加</span><van-icon name="arrow-down" /></view>
|
||
<ul class="ul2" v-for="(item,index) in ulList1" :key="index+'ul'">
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>工班：</p>
|
||
<uni-data-select v-model="item.gbValue" :localdata="gbList"
|
||
@change="gbChange"></uni-data-select>
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>作业时间 ：</p>
|
||
<uni-datetime-picker v-model="item.datetime" type="datetimerange" rangeSeparator="-"
|
||
@change="changeLog" />
|
||
</li>
|
||
</ul>
|
||
<view class="ulTop"><span @click="ulAdd2">添加</span><span @click="del">删除</span><van-icon
|
||
name="arrow-down" /></view>
|
||
<ul class="ul2" v-for="(item,index) in ulList2" :key="index+'ul2'">
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>车型：</p>
|
||
<uni-data-select v-model="item.cxValue" :localdata="cxList"
|
||
@change="cxChange"></uni-data-select>
|
||
</li>
|
||
<li>
|
||
<p><span class="required">*</span>数量：</p>
|
||
<uni-number-box @change="numChange" v-model="item.numValue" />
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>装卸方式：</p>
|
||
<uni-data-select v-model="item.fsValue" :localdata="fsList"
|
||
@change="fsChange"></uni-data-select>
|
||
</li>
|
||
<li class="widthLi">
|
||
<p class="liTitle">备注：</p>
|
||
<uni-easyinput type="textarea" autoHeight v-model="item.notes" placeholder="请输入任务描述(200字以内)"
|
||
maxlength="200"></uni-easyinput>
|
||
</li>
|
||
</ul>
|
||
</template>
|
||
|
||
<!-- 翻仓信息 -->
|
||
<template v-if="active == 1">
|
||
<view v-for="(item,index) in fcUlList" :key="index + 'fc'">
|
||
<view class="ulTop"><span @click="fcAdd">添加</span><van-icon name="arrow-down" /></view>
|
||
<ul class="fcUl">
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>翻仓类型：</p>
|
||
<uni-data-select v-model="item.fcValue" :localdata="fcList"
|
||
@change="fcChange"></uni-data-select>
|
||
</li>
|
||
</ul>
|
||
<view v-for="(item2,index2) in item.fcUlList2" :key="index2 + 'fc2'">
|
||
<view class="ulTop"><span @click="fcAdd2(index)">添加</span></span><span v-if="index2 > 0"
|
||
@click="delFc(index,index2)">删除</span><van-icon name="arrow-down" /></view>
|
||
<ul class="ul2 fcUl2">
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>翻舱起点位置：</p>
|
||
<uni-easyinput v-model="item2.qdValue" focus placeholder="请输入翻舱起点位置"></uni-easyinput>
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>翻舱终点位置：</p>
|
||
<uni-easyinput v-model="item2.zdValue" focus placeholder="请输入翻舱终点位置"></uni-easyinput>
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>工班：</p>
|
||
<uni-data-select v-model="item2.gbValue" :localdata="gbList"
|
||
@change="gbChange"></uni-data-select>
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>作业时间 ：</p>
|
||
<uni-datetime-picker v-model="item2.datetime" type="datetimerange" rangeSeparator="-" />
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>数量：</p>
|
||
<uni-number-box v-model="item2.numValue" />
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>体积：</p>
|
||
<uni-number-box v-model="item2.tjValue" />
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>重量：</p>
|
||
<uni-number-box v-model="item2.zlValue" />
|
||
</li>
|
||
</ul>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 其他信息 -->
|
||
<template v-if="active == 2">
|
||
<view class="otherWork">
|
||
<p class="title">辅助作业</p>
|
||
<ul>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>技术工人：</p>
|
||
<uni-number-box v-model="otherObj.jsWorker" />
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>普通工人：</p>
|
||
<uni-number-box v-model="otherObj.ptWorker" />
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>作业时间 ：</p>
|
||
<uni-datetime-picker v-model="otherObj.workTime" type="datetimerange" rangeSeparator="-" />
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>重量：</p>
|
||
<uni-number-box v-model="otherObj.zlValue" />
|
||
</li>
|
||
<li>
|
||
<p class="liTitle"><span class="required">*</span>体积：</p>
|
||
<uni-number-box v-model="otherObj.tjValue" />
|
||
</li>
|
||
<li>
|
||
<p class="liTitle">描述：</p>
|
||
<uni-easyinput type="textarea" autoHeight v-model="otherObj.describe"
|
||
placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
|
||
</li>
|
||
</ul>
|
||
<p class="title">待工作业</p>
|
||
<ul>
|
||
<li>
|
||
<p class="liTitle">描述：</p>
|
||
<uni-easyinput type="textarea" autoHeight v-model="otherObj.dgWork"
|
||
placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
|
||
</li>
|
||
</ul>
|
||
<p class="title">作业备注</p>
|
||
<ul>
|
||
<li>
|
||
<p class="liTitle">描述：</p>
|
||
<uni-easyinput type="textarea" autoHeight v-model="otherObj.notes"
|
||
placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
|
||
</li>
|
||
</ul>
|
||
</view>
|
||
</template>
|
||
<view class="btnList">
|
||
<van-button type="default" @click="cancel">取消</van-button>
|
||
<van-button type="info" @click="save">保存</van-button>
|
||
<van-button type="info" @click="next" v-if="active < 2">下一步</van-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
obj: {},
|
||
active: 0,
|
||
stepList: [{
|
||
title: '工班信息'
|
||
}, {
|
||
title: '翻舱信息'
|
||
}, {
|
||
title: '其他信息'
|
||
}],
|
||
|
||
// 工班信息
|
||
// 航次下拉框
|
||
hcValue: "",
|
||
hcList: [{
|
||
value: "航次0",
|
||
text: "航次0"
|
||
},
|
||
{
|
||
value: "航次1",
|
||
text: "航次1"
|
||
},
|
||
{
|
||
value: "航次2",
|
||
text: "航次2"
|
||
},
|
||
],
|
||
// 装卸类型下拉框
|
||
zxValue: "",
|
||
zxList: [{
|
||
value: "装卸类型0",
|
||
text: "装卸类型0"
|
||
},
|
||
{
|
||
value: "装卸类型1",
|
||
text: "装卸类型1"
|
||
},
|
||
{
|
||
value: "装卸类型2",
|
||
text: "装卸类型2"
|
||
},
|
||
],
|
||
ulList1: [{
|
||
gbValue: "",
|
||
dataTime: ""
|
||
}],
|
||
// 工班下拉框
|
||
gbList: [{
|
||
value: "工班0",
|
||
text: "工班0"
|
||
},
|
||
{
|
||
value: "工班1",
|
||
text: "工班1"
|
||
},
|
||
{
|
||
value: "工班2",
|
||
text: "工班2"
|
||
},
|
||
],
|
||
ulList2: [{
|
||
cxValue: "",
|
||
numValue: 0,
|
||
fsValue: "",
|
||
notes: "",
|
||
}],
|
||
// 车型下拉
|
||
cxList: [{
|
||
value: "车型0",
|
||
text: "车型0"
|
||
},
|
||
{
|
||
value: "车型1",
|
||
text: "车型1"
|
||
},
|
||
{
|
||
value: "车型2",
|
||
text: "车型2"
|
||
},
|
||
],
|
||
// 装卸方式下拉
|
||
fsList: [{
|
||
value: "装卸方式0",
|
||
text: "装卸方式0"
|
||
},
|
||
{
|
||
value: "装卸方式1",
|
||
text: "装卸方式1"
|
||
},
|
||
{
|
||
value: "装卸方式2",
|
||
text: "装卸方式2"
|
||
},
|
||
],
|
||
|
||
// 翻仓信息
|
||
// 翻仓类型下拉
|
||
fcList: [{
|
||
value: "翻仓类型0",
|
||
text: "翻仓类型0"
|
||
},
|
||
{
|
||
value: "翻仓类型1",
|
||
text: "翻仓类型1"
|
||
},
|
||
{
|
||
value: "翻仓类型2",
|
||
text: "翻仓类型2"
|
||
},
|
||
],
|
||
fcUlList: [{
|
||
fcValue: "",
|
||
fcUlList2: [{
|
||
qdValue: "",
|
||
zdValue: "",
|
||
gbValue: "",
|
||
dataTime: "",
|
||
numValue: 0,
|
||
tjValue: 0,
|
||
zlValue: 0
|
||
}],
|
||
}],
|
||
|
||
// 其他信息
|
||
otherObj: {
|
||
jsWorker: 0,
|
||
ptworker: 0,
|
||
workTime: "",
|
||
zlValue: 0,
|
||
tjValue: 0,
|
||
describe: "",
|
||
dgWork: "",
|
||
notes: "",
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if ('params' in options) {
|
||
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||
}
|
||
},
|
||
methods: {
|
||
// 工班信息相关
|
||
// 航次下拉
|
||
hcChange(e) {
|
||
this.hcValue = e;
|
||
},
|
||
// 装卸类型下拉
|
||
zxChange(e) {
|
||
this.zxValue = e;
|
||
},
|
||
// 点击第一个添加
|
||
ulAdd1() {
|
||
this.ulList1.push({
|
||
gbValue: "",
|
||
dataTime: ""
|
||
})
|
||
},
|
||
// 工班下拉
|
||
gbChange(e) {},
|
||
// 作业时间
|
||
changeLog(e) {},
|
||
// 点击第二个添加
|
||
ulAdd2() {
|
||
this.ulList2.push({
|
||
cxValue: "",
|
||
numValue: 0,
|
||
fsValue: "",
|
||
notes: "",
|
||
})
|
||
},
|
||
del() {
|
||
this.ulList2.splice(0, 1)
|
||
},
|
||
// 车型下拉
|
||
cxChange(e) {},
|
||
// 数量
|
||
numChange(val) {},
|
||
// 装卸方式下拉
|
||
fsChange(e) {},
|
||
|
||
// 翻仓信息
|
||
// 翻仓类型下拉
|
||
fcChange(e) {},
|
||
// 翻仓add
|
||
fcAdd() {
|
||
this.fcUlList.push({
|
||
fcValue: "",
|
||
fcUlList2: [{
|
||
qdValue: "",
|
||
zdValue: "",
|
||
gbValue: "",
|
||
dataTime: "",
|
||
numValue: 12,
|
||
tjValue: 12,
|
||
zlValue: 12
|
||
}]
|
||
})
|
||
},
|
||
fcAdd2(index) {
|
||
this.fcUlList[index].fcUlList2.push({
|
||
qdValue: "",
|
||
zdValue: "",
|
||
gbValue: "",
|
||
dataTime: "",
|
||
numValue: 0,
|
||
tjValue: 0,
|
||
zlValue: 0
|
||
})
|
||
},
|
||
// 翻仓删除
|
||
delFc(index, index2) {
|
||
this.fcUlList[index].fcUlList2.splice(index2, 1)
|
||
},
|
||
|
||
// 取消
|
||
cancel() {
|
||
uni.navigateTo({
|
||
url: '/pages/shipWork/mixWork'
|
||
})
|
||
},
|
||
// 保存
|
||
save() {},
|
||
// 下一步
|
||
next() {
|
||
this.active = this.active + 1
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.shiftAdd {
|
||
.container {
|
||
padding: 30px 20px;
|
||
background-color: #fff;
|
||
|
||
/deep/.uni-steps__row-title {
|
||
font-size: 20px;
|
||
}
|
||
|
||
/deep/.uni-icons {
|
||
font-size: 20px !important;
|
||
}
|
||
|
||
/deep/.uni-steps__row-container {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.line {
|
||
width: 100%;
|
||
height: 10px;
|
||
background: #f2f2f2;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.ulTop {
|
||
width: 100%;
|
||
padding: 20px;
|
||
text-align: right;
|
||
border-top: 1px solid #ccc;
|
||
|
||
|
||
span {
|
||
color: #2979ff;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
span:nth-of-type(2) {
|
||
color: red;
|
||
}
|
||
}
|
||
|
||
.fcUl {
|
||
li {
|
||
border: none;
|
||
margin-bottom: 0;
|
||
|
||
.liTitle {
|
||
width: 120px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fcUl2 {
|
||
.liTitle {
|
||
width: 120px;
|
||
}
|
||
}
|
||
|
||
ul {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
|
||
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;
|
||
}
|
||
|
||
.liTitle {
|
||
min-width: 85px;
|
||
text-align: right;
|
||
}
|
||
|
||
/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;
|
||
}
|
||
}
|
||
|
||
.widthLi {
|
||
width: 100%;
|
||
}
|
||
|
||
}
|
||
|
||
.ul2 {
|
||
padding: 0;
|
||
margin-top: 0;
|
||
|
||
li {
|
||
border: none;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.otherWork {
|
||
padding: 0 20px;
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
padding-left: 10px;
|
||
border-left: 5px solid #2979ff;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
ul {
|
||
li {
|
||
border: none;
|
||
}
|
||
|
||
li:last-child {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btnList {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
|
||
/deep/ .van-button {
|
||
margin: 30px 20px;
|
||
width: 120px;
|
||
height: 50px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |