678 lines
17 KiB
Vue
678 lines
17 KiB
Vue
<template>
|
||
<view class="shiftAdd">
|
||
<view class="container">
|
||
<uni-steps :options="stepList" :active="active" />
|
||
<view class="line"></view>
|
||
<!-- 工班信息 -->
|
||
<template v-if="active == 0">
|
||
<view class="ul ul1">
|
||
<view class="li">
|
||
<p>船名：</p>
|
||
<text>{{shipInfo.voyageScheduleDataList[0].spmName}}</text>
|
||
</view>
|
||
<view class="li">
|
||
<p><text class="required">*</text>航次：</p>
|
||
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"></uni-data-select>
|
||
</view>
|
||
<view class="li">
|
||
<p>进出口：</p>
|
||
<text>{{shipInfo.voyageScheduleDataList[0].importExportFlagName}}</text>
|
||
</view>
|
||
<view class="li">
|
||
<p>贸易类型：</p>
|
||
<text>{{shipInfo.voyageScheduleDataList[0].tradeTypeName}}</text>
|
||
</view>
|
||
<view class="li">
|
||
<p><text class="required">*</text>装卸类型：</p>
|
||
<uni-data-select v-model="zxValue" :localdata="zxList" @change="zxChange"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="ulTop"><text @click="ulAdd1">添加</text><van-icon name="arrow-down" /></view>
|
||
<view class="ul ul2" v-for="(item,index) in ulList1" :key="index+'ul'">
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>工班：</p>
|
||
<uni-data-select v-model="item.gbValue" :localdata="gbList"
|
||
@change="gbChange(item,index)"></uni-data-select>
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>作业时间 ：</p>
|
||
<uni-datetime-picker v-model="item.datetime" type="datetimerange" rangeSeparator="-"
|
||
@change="changeLog(item)" />
|
||
</view>
|
||
</view>
|
||
<view class="ulTop"><text @click="ulAdd2">添加</text><text @click="del">删除</text><van-icon
|
||
name="arrow-down" /></view>
|
||
<view class="ul ul2" v-for="(item,index) in ulList2" :key="index+'ul2'">
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>车型：</p>
|
||
<uni-data-select v-model="item.cxValue" :localdata="cxList"
|
||
@change="cxChange(item,index)"></uni-data-select>
|
||
</view>
|
||
<view class="li">
|
||
<p><text class="required">*</text>数量：</p>
|
||
<uni-number-box @change="numChange" v-model="item.numValue" />
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>装卸方式：</p>
|
||
<uni-data-select v-model="item.fsValue" :localdata="fsList"
|
||
@change="fsChange(item,index)"></uni-data-select>
|
||
</view>
|
||
<view class="li widthLi">
|
||
<p class="liTitle">备注：</p>
|
||
<uni-easyinput type="textarea" autoHeight v-model="item.notes" placeholder="请输入任务描述(200字以内)"
|
||
maxlength="200"></uni-easyinput>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 翻仓信息 -->
|
||
<template v-if="active == 1">
|
||
<view v-for="(item,index) in fcUlList" :key="index + 'fc'">
|
||
<view class="ulTop"><text @click="fcAdd">添加</text><van-icon name="arrow-down" /></view>
|
||
<view class="ul fcUl">
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>翻仓类型：</p>
|
||
<uni-data-select v-model="item.fcValue" :localdata="fcList"
|
||
@change="fcChange(item,index)"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view v-for="(item2,index2) in item.fcUlList2" :key="index2 + 'fc2'">
|
||
<view class="ulTop"><text @click="fcAdd2(index)">添加</text></text><text v-if="index2 > 0"
|
||
@click="delFc(index,index2)">删除</text><van-icon name="arrow-down" /></view>
|
||
<view class="ul ul2 fcUl2">
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>翻舱起点位置：</p>
|
||
<uni-easyinput v-model="item2.qdValue" placeholder="请输入翻舱起点位置"></uni-easyinput>
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>翻舱终点位置：</p>
|
||
<uni-easyinput v-model="item2.zdValue" placeholder="请输入翻舱终点位置"></uni-easyinput>
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>工班：</p>
|
||
<uni-data-select v-model="item2.gbValue" :localdata="gbList"
|
||
@change="fcgbChange(index,item2,index2)"></uni-data-select>
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>作业时间 ：</p>
|
||
<uni-datetime-picker v-model="item2.datetime" type="datetimerange" rangeSeparator="-"
|
||
@change="changeLog(item2)" />
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>数量：</p>
|
||
<uni-number-box v-model="item2.numValue" />
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>体积：</p>
|
||
<uni-number-box v-model="item2.tjValue" />
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>重量：</p>
|
||
<uni-number-box v-model="item2.zlValue" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<!-- 其他信息 -->
|
||
<template v-if="active == 2">
|
||
<view class="otherWork">
|
||
<p class="title">辅助作业</p>
|
||
<view class="ul">
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>技术工人：</p>
|
||
<uni-number-box v-model="otherObj.jsWorker" />
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>普通工人：</p>
|
||
<uni-number-box v-model="otherObj.ptworker" />
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>作业时间 ：</p>
|
||
<uni-datetime-picker v-model="otherObj.datetime" type="datetimerange" rangeSeparator="-"
|
||
@change="changeLog(otherObj)" />
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>重量：</p>
|
||
<uni-number-box v-model="otherObj.zlValue" />
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle"><text class="required">*</text>体积：</p>
|
||
<uni-number-box v-model="otherObj.tjValue" />
|
||
</view>
|
||
<view class="li">
|
||
<p class="liTitle">描述：</p>
|
||
<uni-easyinput type="textarea" autoHeight v-model="otherObj.describe"
|
||
placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
|
||
</view>
|
||
</view>
|
||
<p class="title">待工作业</p>
|
||
<view class="ul">
|
||
<view class="li">
|
||
<p class="liTitle">描述：</p>
|
||
<uni-easyinput type="textarea" autoHeight v-model="otherObj.dgWork"
|
||
placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
|
||
</view>
|
||
</view>
|
||
<p class="title">作业备注</p>
|
||
<view class="ul">
|
||
<view class="li">
|
||
<p class="liTitle">描述：</p>
|
||
<uni-easyinput type="textarea" autoHeight v-model="otherObj.notes"
|
||
placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<view class="btnList">
|
||
<van-button type="default" @click="cancel">取消</van-button>
|
||
<van-button type="info" @click="back" v-if="active > 0">上一步</van-button>
|
||
<van-button type="info" @click="save" v-if="active == 2">保存</van-button>
|
||
<van-button type="info" @click="next" v-if="active < 2">下一步</van-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
shipInfo: {
|
||
voyageScheduleDataList: [{
|
||
spmName: "",
|
||
importExportFlagName: "",
|
||
tradeTypeName: ""
|
||
}]
|
||
},
|
||
obj: {},
|
||
dataInfo: {},
|
||
shiftRowIndex: 0,
|
||
active: 0,
|
||
stepList: [{
|
||
title: '工班信息'
|
||
},
|
||
{
|
||
title: '翻舱信息'
|
||
},
|
||
{
|
||
title: '其他信息'
|
||
}
|
||
],
|
||
|
||
// 工班信息
|
||
// 航次下拉框
|
||
hcValue: "",
|
||
hcTextValue: "",
|
||
hcList: [],
|
||
// 装卸类型下拉框
|
||
zxValue: "",
|
||
zxTextValue: "",
|
||
zxList: [],
|
||
ulList1: [{
|
||
gbValue: "",
|
||
gbTextValue: "",
|
||
datetime: ['', ''],
|
||
startTime: "",
|
||
endTime: "",
|
||
}],
|
||
// 工班下拉框
|
||
gbList: [],
|
||
ulList2: [{
|
||
cxValue: "",
|
||
cxTextValue: "",
|
||
numValue: 0,
|
||
fsValue: "",
|
||
fsTextValue: "",
|
||
notes: "",
|
||
}],
|
||
// 车型下拉
|
||
cxList: [],
|
||
// 装卸方式下拉
|
||
fsList: [],
|
||
|
||
// 翻仓信息
|
||
// 翻仓类型下拉
|
||
fcList: [],
|
||
fcUlList: [{
|
||
fcValue: "",
|
||
fcTextValue: "",
|
||
fcUlList2: [{
|
||
qdValue: "",
|
||
zdValue: "",
|
||
gbValue: "",
|
||
gbTextValue: "",
|
||
datetime: ['', ''],
|
||
startTime: "",
|
||
endTime: "",
|
||
numValue: 0,
|
||
tjValue: 0,
|
||
zlValue: 0
|
||
}],
|
||
}],
|
||
|
||
// 其他信息
|
||
otherObj: {
|
||
jsWorker: 0,
|
||
ptworker: 0,
|
||
datetime: ['', ''],
|
||
startTime: "",
|
||
endTime: "",
|
||
zlValue: 0,
|
||
tjValue: 0,
|
||
describe: "",
|
||
dgWork: "",
|
||
notes: "",
|
||
}
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if ('params' in options) {
|
||
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||
}
|
||
},
|
||
mounted() {
|
||
if (this.obj.state == 'edit') {
|
||
this.editData();
|
||
}
|
||
this.getShip()
|
||
},
|
||
methods: {
|
||
// 获取船只信息
|
||
getShip() {
|
||
this.shipInfo = uni.getStorageSync('shipInfo')
|
||
// 航次数据
|
||
this.shipInfo.voyageScheduleDataList.forEach((v, index) => {
|
||
this.hcList.push({
|
||
text: v.vvyName,
|
||
value: v.vvyId
|
||
})
|
||
})
|
||
// 装卸类型数据
|
||
this.shipInfo.handTypeList.forEach((v, index) => {
|
||
this.zxList.push({
|
||
text: v.ptrDesc,
|
||
value: v.ptrCode
|
||
})
|
||
})
|
||
// 工班数据
|
||
this.shipInfo.shipmentBasicShiftList.forEach((v, index) => {
|
||
this.gbList.push({
|
||
text: v.pwcTypeDesc,
|
||
value: v.pwcId
|
||
})
|
||
})
|
||
// 车型数据
|
||
this.shipInfo.shipmentVehicleModeList.forEach((v, index) => {
|
||
this.cxList.push({
|
||
text: v.bvmName,
|
||
value: v.bvmId
|
||
})
|
||
})
|
||
// 装卸方式
|
||
this.shipInfo.loadTypeList.forEach((v, index) => {
|
||
this.fsList.push({
|
||
text: v.ptrDesc,
|
||
value: v.ptrCode
|
||
})
|
||
})
|
||
// 翻仓类型
|
||
this.shipInfo.turnoverTypeList.forEach((v, index) => {
|
||
this.fcList.push({
|
||
text: v.ptrDesc,
|
||
value: v.ptrCode
|
||
|
||
})
|
||
})
|
||
},
|
||
//状态为编辑获取数据
|
||
editData() {
|
||
this.dataInfo = uni.getStorageSync('shiftRow')
|
||
this.shiftRowIndex = uni.getStorageSync('shiftRowIndex')
|
||
this.hcValue = this.dataInfo.vvyId
|
||
this.hcTextValue = this.dataInfo.vvyName
|
||
this.zxValue = this.dataInfo.zxId
|
||
this.zxTextValue = this.dataInfo.zxTextValue
|
||
this.ulList1 = this.dataInfo.shiftList
|
||
this.ulList2 = this.dataInfo.shiftList2
|
||
this.fcUlList = this.dataInfo.fcList
|
||
this.otherObj = this.dataInfo.otherList
|
||
},
|
||
// 工班信息相关
|
||
// 航次下拉
|
||
hcChange(e) {
|
||
this.hcValue = e;
|
||
this.hcList.forEach(v => {
|
||
if (v.value == e) {
|
||
this.hcTextValue = v.text
|
||
}
|
||
})
|
||
},
|
||
// 装卸类型下拉
|
||
zxChange(e) {
|
||
this.zxValue = e;
|
||
this.zxList.forEach(v => {
|
||
if (v.value == e) {
|
||
this.zxTextValue = v.text
|
||
}
|
||
})
|
||
},
|
||
// 点击第一个添加
|
||
ulAdd1() {
|
||
this.ulList1.push({
|
||
datetime: ['', ''],
|
||
gbValue: "",
|
||
gbTextValue: ""
|
||
|
||
})
|
||
},
|
||
// 工班下拉
|
||
gbChange(item, index) {
|
||
this.ulList1[index].gbValue = item.gbValue
|
||
this.gbList.forEach(v => {
|
||
if (v.value == item.gbValue) {
|
||
item.gbTextValue = v.text
|
||
}
|
||
})
|
||
},
|
||
// 作业时间
|
||
changeLog(item) {
|
||
item.startTime = item.datetime[0].slice(0, item.datetime[0].length - 3)
|
||
item.endTime = item.datetime[1].slice(0, item.datetime[1].length - 3)
|
||
},
|
||
// 点击第二个添加
|
||
ulAdd2() {
|
||
this.ulList2.push({
|
||
cxValue: "",
|
||
numValue: 0,
|
||
fsValue: "",
|
||
notes: "",
|
||
})
|
||
},
|
||
del() {
|
||
this.ulList2.splice(0, 1)
|
||
},
|
||
// 车型下拉
|
||
cxChange(item, index) {
|
||
this.ulList2[index].cxValue = item.cxValue
|
||
this.cxList.forEach(v => {
|
||
if (v.value == item.cxValue) {
|
||
item.cxTextValue = v.text
|
||
}
|
||
})
|
||
},
|
||
// 数量
|
||
numChange(val) {},
|
||
// 装卸方式下拉
|
||
fsChange(item, index) {
|
||
this.ulList2[index].fsValue = item.fsValue
|
||
this.fsList.forEach(v => {
|
||
if (v.value == item.fsValue) {
|
||
item.fsTextValue = v.text
|
||
}
|
||
})
|
||
},
|
||
|
||
// 翻仓信息
|
||
// 翻仓类型下拉
|
||
fcChange(item, index) {
|
||
this.fcUlList[index].fcValue = item.fcValue
|
||
this.fcList.forEach(v => {
|
||
if (v.value == item.fcValue) {
|
||
item.fcTextValue = v.text
|
||
}
|
||
})
|
||
},
|
||
// 翻仓工班
|
||
fcgbChange(index, item2, index2) {
|
||
this.fcUlList[index].fcUlList2[index2].gbValue = item2.gbValue
|
||
this.gbList.forEach(v => {
|
||
if (v.value == item2.gbValue) {
|
||
item2.gbTextValue = v.text
|
||
}
|
||
})
|
||
},
|
||
// 翻仓add
|
||
fcAdd() {
|
||
this.fcUlList.push({
|
||
fcValue: "",
|
||
fcTextValue: "",
|
||
fcUlList2: [{
|
||
qdValue: "",
|
||
zdValue: "",
|
||
gbValue: "",
|
||
gbTextValue: "",
|
||
datetime: ['', ''],
|
||
startTime: "",
|
||
endTime: "",
|
||
numValue: 0,
|
||
tjValue: 0,
|
||
zlValue: 0
|
||
}],
|
||
})
|
||
},
|
||
fcAdd2(index) {
|
||
this.fcUlList[index].fcUlList2.push({
|
||
qdValue: "",
|
||
zdValue: "",
|
||
gbValue: "",
|
||
gbTextValue: "",
|
||
datetime: ['', ''],
|
||
startTime: "",
|
||
endTime: "",
|
||
numValue: 0,
|
||
tjValue: 0,
|
||
zlValue: 0
|
||
})
|
||
},
|
||
// 翻仓删除
|
||
delFc(index, index2) {
|
||
this.fcUlList[index].fcUlList2.splice(index2, 1)
|
||
},
|
||
|
||
// 取消
|
||
cancel() {
|
||
uni.navigateTo({
|
||
url: '/pages/shipWork/mixWork?infoType=1'
|
||
})
|
||
},
|
||
// 上一步
|
||
back() {
|
||
this.active = this.active - 1
|
||
},
|
||
// 下一步
|
||
next() {
|
||
this.active = this.active + 1
|
||
},
|
||
// 保存
|
||
save() {
|
||
let addShiftArr = uni.getStorageSync('addShiftArr')
|
||
let addShiftObj = {
|
||
vvyName: this.hcTextValue,
|
||
vvyId: this.hcValue,
|
||
zxName: this.zxTextValue,
|
||
zxId: this.zxValue,
|
||
shiftList: this.ulList1,
|
||
shiftList2: this.ulList2,
|
||
fcList: this.fcUlList,
|
||
otherList: this.otherObj
|
||
}
|
||
if (this.obj.state == 'add') {
|
||
if (addShiftArr != "") {
|
||
addShiftArr.push(addShiftObj)
|
||
uni.setStorageSync('addShiftArr', addShiftArr);
|
||
} else {
|
||
addShiftArr = []
|
||
addShiftArr.push(addShiftObj)
|
||
uni.setStorageSync('addShiftArr', addShiftArr);
|
||
}
|
||
} else {
|
||
addShiftArr[this.shiftRowIndex] = addShiftObj;
|
||
uni.setStorageSync('addShiftArr', addShiftArr);
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/shipWork/mixWork?infoType=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;
|
||
|
||
|
||
text {
|
||
color: #2979ff;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
text: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> |