pad-app/pages/shipWork/shiftAdd.vue

<template>
	<view class="shiftAdd">
		<head-view :title="title"></head-view>
		<view class="container contentFixed">
			<view class="paddingBox">
				<view class="ul ulInfo">
					<view class="li">
						<p>船名：</p>
						<text>{{shipInfo.vslCnname}}</text>
					</view>
					<view class="li">
						<p><text class="required">*</text>航次：</p>
						<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange" placeholder="请选择航次"
							:disabled="jzXgType"></uni-data-select>
					</view>
					<view class="li">
						<p>进出口：</p>
						<text>{{importExportFlagName}}</text>
					</view>
					<view class="li">
						<p>贸易类型：</p>
						<text>{{spmTradeName}}</text>
					</view>
					<view class="li">
						<p><text class="required">*</text>装卸类型：</p>
						<uni-data-select v-model="zxValue" :localdata="zxList" @change="zxChange" placeholder="请选择装卸类型"
							:disabled="jzXgType"></uni-data-select>
					</view>
				</view>
			</view>
			<van-tabs v-model="active" @click="onTabs" line-width="100px" line-height="5px" color="#0067CF"
				title-active-color="#0067CF">
				<van-tab title="工班信息">
					<view class="masonry">
						<view class="addBox" @click="ulAdd1" v-if=" ulList1.length == 0">
							<view class="imgBox">
								<image src="../../static/images/addIcon.png" mode=""></image>
								<p>添加工班</p>
							</view>
						</view>
						<view class="masonryLi" v-for="(item,index) in ulList1" :key="index+'ul'">
							<view class="addBox" @click="ulAdd1" v-if="index == 0">
								<view class="imgBox">
									<image src="../../static/images/addIcon.png" mode=""></image>
									<p>添加工班</p>
								</view>
							</view>
							<view class="ul">
								<view class="delBox" @click="delGb(item,index)">×</view>
								<view class="li widthLi">
									<p class="liTitle"><text class="required">*</text>工班：</p>
									<uni-data-select v-model="item.gbValue" :localdata="gbList"
										@change="gbChange(item,index)" placeholder="请选择工班"></uni-data-select>
								</view>
								<view class="li widthLi">
									<p class="liTitle"><text class="required">*</text>作业时间 ：</p>
									<uni-datetime-picker v-if="flag" v-model="item.datetime" type="datetimerange"
										rangeSeparator="-" @change="changeLog(item,'gb')" :hide-second="true"
										:border="false" />
								</view>
								<view class="carAddBox" @click="ulAdd2(index)" v-if="item.ulList2.length == 0">
									<view class="imgBox">
										<image src="../../static/images/addIcon.png" mode=""></image>
										<p>添加工班信息</p>
									</view>
								</view>
								<view class="widthLi" v-for="(item2,index2) in item.ulList2" :key="index2+'ul2'">
									<view class="carAddBox" @click="ulAdd2(index)">
										<view class="imgBox">
											<image src="../../static/images/addIcon.png" mode=""></image>
											<p>添加工班信息</p>
										</view>
									</view>
									<view class="ul carLi">
										<view class="delBox" @click="delGb2(item2,index,index2)">×</view>
										<view class="li widthLi">
											<p class="liTitle"><text class="required">*</text>车型：</p>
											<uni-data-select v-model="item2.carType" :localdata="cxList"
												@change="cxChange(item,index,item2,index2)"
												placeholder="请选择车型"></uni-data-select>
										</view>
										<view class="li widthLi">
											<p><text class="required">*</text>数量：</p>
											<uni-number-box v-model="item2.goodsNumber" :max="1000000000" />
										</view>
										<view class="li widthLi">
											<p class="liTitle"><text class="required">*</text>装卸方式：</p>
											<uni-data-select v-model="item2.loadingType" :localdata="fsList"
												@change="fsChange(item,index,item2,index2)"
												placeholder="请选择装卸方式"></uni-data-select>
										</view>
										<view class="li widthLi iLi">
											<p class="liTitle">备注：</p>
											<uni-easyinput type="textarea" autoHeight v-model="item2.remark"
												placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="翻仓信息">
					<view class="masonry">
						<view class="addBox" @click="fcAdd" v-if=" fcUlList.length == 0">
							<view class="imgBox">
								<image src="../../static/images/addIcon.png" mode=""></image>
								<p>添加翻仓</p>
							</view>
						</view>
						<view class="masonryLi" v-for="(item,index) in fcUlList" :key="index + 'fc'">
							<view class="addBox" @click="fcAdd" v-if="index == 0">
								<view class="imgBox">
									<image src="../../static/images/addIcon.png" mode=""></image>
									<p>添加翻仓</p>
								</view>
							</view>
							<view class="ul">
								<view class="delBox" @click="delFc(item,index)">×</view>
								<view class="li">
									<p class="liTitle"><text class="required">*</text>翻仓类型：</p>
									<uni-data-select v-model="item.retallyType" :localdata="fcList"
										@change="fcChange(item,index)"></uni-data-select>
								</view>
								<view class="li">
									<p class="liTitle"><text class="required">*</text>翻舱起点位置：</p>
									<uni-easyinput v-model="item.retallyOrigin" placeholder="请输入翻舱起点位置"></uni-easyinput>
								</view>
								<view class="li">
									<p class="liTitle"><text class="required">*</text>翻舱终点位置：</p>
									<uni-easyinput v-model="item.retallyTerminus"
										placeholder="请输入翻舱终点位置"></uni-easyinput>
								</view>
								<view class="li">
									<p class="liTitle"><text class="required">*</text>作业时间 ：</p>
									<uni-datetime-picker v-if="flag" v-model="item.datetime" type="datetimerange"
										rangeSeparator="-" @change="changeLog(item,'fc')" :hide-second="true"
										:border="false" />
								</view>
								<view class="li">
									<p class="liTitle"><text class="required">*</text>车型：</p>
									<uni-data-select v-model="item.carType" :localdata="cxList"
										@change="fccxChange(item,index)"></uni-data-select>
								</view>
								<view class="li">
									<p class="liTitle"><text class="required" v-if="!item.mfType">*</text>数量：</p>
									<uni-number-box v-model="item.goodsNumber" :max="1000000000" />
								</view>
								<view class="li" v-if="item.mfType">
									<p class="liTitle"><text class="required">*</text>组数：</p>
									<uni-number-box v-model="item.mafiGroupNum" :max="1000000000" />
								</view>
								<view class="li">
									<p class="liTitle"><text class="required" v-if="!item.mfType">*</text>体积：</p>
									<uni-number-box v-model="item.goodsVolume" :max="1000000000" />
								</view>
								<view class="li">
									<p class="liTitle"><text class="required" v-if="!item.mfType">*</text>重量：</p>
									<uni-number-box v-model="item.goodsWeight" :max="1000000000" />
								</view>
							</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="其他信息">
					<view class="masonry">
						<view class="addBox" @click="qtAdd" v-if=" otherArr.length == 0">
							<view class="imgBox">
								<image src="../../static/images/addIcon.png" mode=""></image>
								<p>添加其他</p>
							</view>
						</view>
						<view class="masonryLi qtUl" v-for="(item,index) in otherArr" :key="index">
							<view class="addBox" @click="qtAdd" v-if=" index == 0">
								<view class="imgBox">
									<image src="../../static/images/addIcon.png" mode=""></image>
									<p>添加其他</p>
								</view>
							</view>
							<view class="ul">
								<p class="title">辅助作业</p>
								<view class="delBox" @click="delQt(item,index)">×</view>
								<view class="li">
									<p class="liTitle">技术工人：</p>
									<uni-number-box v-model="item.jsworker" :max="1000000000" />
								</view>
								<view class="li">
									<p class="liTitle">作业时间 ：</p>
									<uni-datetime-picker v-if="flag" v-model="item.datetime" type="datetimerange"
										rangeSeparator="-" @change="changeLog(item,'other')" :hide-second="true"
										:border="false" />
								</view>
								<view class="li">
									<p class="liTitle">重量：</p>
									<uni-number-box v-model="item.zlValue" :max="1000000000" />
								</view>
								<view class="li">
									<p class="liTitle">体积：</p>
									<uni-number-box v-model="item.tjValue" :max="1000000000" />
								</view>
								<view class="li">
									<p class="liTitle">普通工人：</p>
									<uni-number-box v-model="item.ptworker" :max="1000000000" />
								</view>
								<view class="li">
									<p class="liTitle">作业时间 ：</p>
									<uni-datetime-picker v-if="flag" v-model="item.datetime2" type="datetimerange"
										rangeSeparator="-" @change="changeLog(item,'other2')" :hide-second="true"
										:border="false" />
								</view>
								<view class="li">
									<p class="liTitle">重量：</p>
									<uni-number-box v-model="item.zlValue2" :max="1000000000" />
								</view>
								<view class="li">
									<p class="liTitle">体积：</p>
									<uni-number-box v-model="item.tjValue2" :max="1000000000" />
								</view>
								<view class="li iLi">
									<p class="liTitle">描述：</p>
									<uni-easyinput type="textarea" autoHeight v-model="item.describe"
										placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
								</view>
								<p class="title">待工作业</p>
								<view class="li iLi">
									<p class="liTitle">描述：</p>
									<uni-easyinput type="textarea" autoHeight v-model="item.dgWork"
										placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
								</view>
								<p class="title">作业备注</p>
								<view class="li iLi">
									<p class="liTitle">描述：</p>
									<uni-easyinput type="textarea" autoHeight v-model="item.remark"
										placeholder="请输入任务描述(200字以内)" maxlength="200"></uni-easyinput>
								</view>
							</view>
						</view>
					</view>
				</van-tab>
			</van-tabs>
		</view>
		<view class="btnList">
			<van-button type="default" @click="cancel">取消</van-button>
			<van-button type="info" @click="save">保存</van-button>
		</view>
		<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	import api from "../../common/api.js"
	import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
	import {
		v4 as uuidv4
	} from 'uuid';
	export default {
		data() {
			return {
				title: "",
				shipInfo: {},
				obj: {},
				vtpId: "",
				dataInfo: {},
				shiftRowIndex: 0,
				active: 0,
				infoVvyArr: [], // 工班信息已有航次
				jzXgType: false, // 编辑状态禁止修改内容

				// 工班信息
				// 航次下拉框
				hcValue: "",
				hcTextValue: "",
				hcList: [],
				// 装卸类型下拉框
				zxValue: "",
				zxTextValue: "",
				zxList: [],
				ulList1: [],
				// 工班基本信息
				jbGbList: [],
				// 工班下拉框
				gbList: [],
				// 工班固定开始时间
				sShiftDate: "",
				// 工班开始时间时间戳
				ksTime: "",
				// 工班固定结束时间
				eShiftDate: "",
				// 工班结束时间时间戳
				jsTime: "",
				// 车型下拉
				cxList: [],
				// 装卸方式下拉
				fsList: [],

				// 翻仓信息
				// 翻仓类型下拉
				fcList: [],
				fcUlList: [],

				// 其他信息
				otherArr: [],
				// 下拉数据
				optionData: [],

				// 删除翻仓信息展示id
				delSrmIds: [],
				// 删除其他信息id
				delSoiIds: [],

				vvyInfo: [],
				importExportFlagName: "",
				spmTradeName: "",

				contactId: "",
				aId: "",
				// 工班删除ids
				shiftDelList: [],
				// 工班信息删除ids
				shiftInfoDelList: [],
				// 翻仓信息删除ids
				fcInfoDelList: [],
				// 其他信息删除ids
				otherDelList: [],

				// 作业开始时间
				beginDate: "",
				// 作业结束时间
				endDate: "",
				flag: true,

				lotusLoadingData: {
					isShow: false //设置显示加载中组件true显示false隐藏
				}
			}
		},
		components: {
			LotusLoading
		},
		onLoad(options) {
			if ('params' in options) {
				// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
				this.obj = JSON.parse(decodeURIComponent(options.params))
			}
		},
		mounted() {
			this.vtpId = uni.getStorageSync('vtpId')
			this.delSrmIds = uni.getStorageSync("delSrmIds")
			this.delSoiIds = uni.getStorageSync("delSoiIds")
			this.executeSql2('shipOption')
			this.executeSql2('shipInfoTable')
			this.executeSql2('shipmentBasicShiftList')
			this.executeSql2("voyageScheduleDataDetailRespDTOList")
			this.executeSql2("workMessageRespList")
			if (this.obj.state == 'edit') {
				this.title = "编辑工班信息"
				this.dataInfo = uni.getStorageSync('shiftRow')
				this.contactId = this.dataInfo[0].contactId
				this.aId = this.dataInfo[0].aId
				this.ulList1 = []
				this.editData();
				this.jzXgType = true
			} else if (this.obj.state == 'add') {
				this.title = "新增工班信息"
				this.ulList1 = [{
					gbValue: "",
					gbTextValue: "",
					datetime: ['', ''],
					startTime: "",
					endTime: "",
					ulList2: [{
						carType: "",
						carTypeName: "",
						goodsNumber: 0,
						loadingType: "",
						loadingTypeName: "",
						remark: "",
					}]
				}]
			}
		},
		methods: {
			// 查
			executeSql2(tableName) {
				let sql = `select * from ${tableName}  WHERE vtpId = '${this.vtpId}';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					if (tableName == 'shipOption') {
						this.optionData = value
						this.getShip()
					} else if (tableName == 'shipInfoTable') {
						this.shipInfo = value[0]
					} else if (tableName == 'voyageScheduleDataDetailRespDTOList') {
						this.vvyInfo = value
						value.forEach((v, index) => {
							this.hcList.push({
								text: v.vvyName,
								value: v.vvyId
							})
						})
					} else if (tableName == "shipmentBasicShiftList") {
						this.jbGbList = value
						let gbOption = []
						this.jbGbList.forEach((v, index) => {
							gbOption.push(v)
						})
						gbOption.forEach((v, index) => {
							this.gbList.push({
								text: v.pwcTypeDesc,
								value: v.pwcCode,
							})
						})

						this.beginDate = this.jbGbList[0].beginTime
						this.endDate = this.jbGbList[2].endTime
					} else if (tableName == "workMessageRespList") {
						value.forEach(v => {
							this.infoVvyArr.push(v.vvyId)
						})
					}
				})
			},
			executeSql1(tableName) {
				let sql = `select * from ${tableName} WHERE aId = '${this.aId}';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					if (tableName == 'workMessageRespList') {
						this.hcValue = value[0].vvyId
						this.hcTextValue = value[0].vvyName
						this.importExportFlagName = value[0].importExportFlagName
						this.zxValue = value[0].loadType
						this.zxTextValue = value[0].loadTypeName
						this.ulList1 = []
						value.forEach((v, index) => {
							let obj = {
								webId: v.webId,
								contactId: v.contactId,
								datetime: [v.workStartTime, v.workEndTime],
								startTime: v.workStartTime,
								endTime: v.workEndTime,
								gbValue: v.pwcType,
								gbTextValue: v.pwcTypeName,
								ulList2: []
							}
							this.getData(obj)
						})
					} else if (tableName == 'retallyMessageRespList') {
						if (value.length > 0) {
							this.fcUlList = value
							this.fcUlList.forEach(v => {
								this.$set(v, "datetime", [v.retallyStartTime, v.retallyEndTime])
								this.$set(v, "mfType", false)
								if (v.carTypeName == '空马菲') {
									this.$set(v, "mfType", true)
								}
							})
						} else {
							this.fcUlList = [{
								retallyType: "",
								retallyTypeName: "",
								retallyOrigin: "",
								retallyTerminus: "",
								carType: "",
								carTypeName: "",
								datetime: ['', ''],
								retallyStartTime: "",
								retallyEndTime: "",
								goodsNumber: 0,
								goodsVolume: 0,
								goodsWeight: 0,
								mafiGroupNum: 0,
								mfType: false,
								editStatus: 0,
							}]
						}
					} else if (tableName == 'infoRespList') {
						if (value.length == 0) {
							this.otherArr = [{
								webId: '',
								contactId: '',
								jsworker: 0,
								datetime: ['', ''],
								startTime: '',
								endTime: '',
								zlValue: 0,
								tjValue: 0,
								ptworker: 0,
								datetime2: ['', ''],
								startTime2: '',
								endTime2: '',
								zlValue2: 0,
								tjValue2: 0,
								describe: '',
								dgWork: '',
								remark: ''
							}]
						} else {
							this.otherArr = []
						}
						value.forEach(v => {
							let obj = {
								webId: v.webId,
								contactId: v.contactId,
								jsworker: v.tecNum,
								datetime: [v.startTm, v.endTm],
								startTime: v.startTm,
								endTime: v.endTm,
								zlValue: v.weight,
								tjValue: v.volume,
								ptworker: v.genNum,
								datetime2: [v.startTmPt, v.endTmPt],
								startTime2: v.startTmPt,
								endTime2: v.endTmPt,
								zlValue2: v.weightPt,
								tjValue2: v.volumePt,
								describe: v.auxRemark,
								dgWork: v.waitRemark,
								remark: v.workRemark,
							}
							if (v.webId != '') {
								this.otherArr.push(obj)
							}
						})
					}
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			getData(obj) {
				let sql = `select * from workMessageRespInfoList WHERE contactId = '${obj.webId}';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					obj.ulList2 = value
					this.ulList1.push(obj)
					let sDate = ""
					let eDate = ""
					this.ulList1.forEach(v => {
						this.jbGbList.forEach(v2 => {
							if (v.gbValue == v2.pwcCode) {
								sDate = v2.beginTime
								eDate = v2.endTime
								this.$set(v, "sDate", sDate)
								this.$set(v, "eDate", eDate)
							}
						})
					})
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 获取船只信息
			getShip() {
				// 装卸类型数据
				let zxOption = []
				this.optionData.forEach((v, index) => {
					if (v.dictionariesName == 'handTypeList') {
						zxOption.push(v)
					}
				})
				zxOption.forEach((v, index) => {
					this.zxList.push({
						text: v.ptrDesc,
						value: v.ptrCode
					})
				})
				// 车型数据
				let cxOption = []
				this.optionData.forEach((v, index) => {
					if (v.dictionariesName == 'carList') {
						cxOption.push(v)
					}
				})
				cxOption.forEach((v, index) => {
					this.cxList.push({
						text: v.ptrDesc,
						value: v.ptrCode
					})
				})
				// 装卸方式
				let fsOption = []
				this.optionData.forEach((v, index) => {
					if (v.dictionariesName == 'loadTypeList') {
						fsOption.push(v)
					}
				})
				fsOption.forEach((v, index) => {
					this.fsList.push({
						text: v.ptrDesc,
						value: v.ptrCode
					})
				})
				// 翻仓类型
				let fcOption = []
				this.optionData.forEach((v, index) => {
					if (v.dictionariesName == 'turnoverTypeList') {
						fcOption.push(v)
					}
				})
				fcOption.forEach((v, index) => {
					this.fcList.push({
						text: v.ptrDesc,
						value: v.ptrCode
					})
				})
			},
			//状态为编辑获取数据
			editData() {
				this.executeSql1('workMessageRespList')
				this.executeSql1('retallyMessageRespList')
				this.executeSql1('infoRespList')
			},
			// 切换标签
			onTabs(e) {
				this.active = e.detail.index
			},
			// 工班信息相关
			// 航次下拉
			hcChange(e) {
				this.hcValue = e;
				this.hcList.forEach(v => {
					if (v.value == e) {
						this.hcTextValue = v.text
					}
				})
				this.vvyInfo.forEach(v => {
					if (v.vvyId == e) {
						this.importExportFlagName = v.importExportFlagName
						this.spmTradeName = v.tradeTypeName
					}
				})
			},
			// 装卸类型下拉
			zxChange(e) {
				this.zxValue = e;
				this.zxList.forEach(v => {
					if (v.value == e) {
						this.zxTextValue = v.text
					}
				})
			},
			// 工班信息添加
			ulAdd1() {
				this.ulList1.push({
					datetime: ['', ''],
					startTime: "",
					endTime: "",
					gbValue: "",
					gbTextValue: "",
					ulList2: [{
						carType: "",
						carTypeName: "",
						goodsNumber: 0,
						loadingType: "",
						loadingTypeName: "",
						remark: "",
					}],
				})
				uni.showToast({
					icon: 'none',
					title: '添加工班成功'
				});
			},
			ulAdd2(index) {
				this.ulList1[index].ulList2.push({
					carType: "",
					carTypeName: "",
					goodsNumber: 0,
					loadingType: "",
					loadingTypeName: "",
					remark: "",
				})
				uni.showToast({
					icon: 'none',
					title: '添加工班信息成功'
				});
			},
			// 工班下拉
			gbChange(e, index) {
				this.ulList1[index].gbValue = e.gbValue
				this.gbList.forEach(v => {
					if (v.value == e.gbValue) {
						e.gbTextValue = v.text
					}
				})
				let beginTime = ""
				let endTime = ""
				this.jbGbList.forEach(v => {
					if (v.pwcCode == e.gbValue) {
						beginTime = v.beginTime
						endTime = v.endTime
					}
				})
				this.sShiftDate = beginTime
				this.eShiftDate = endTime

			},
			// 作业时间
			changeLog(item, type) {
				this.lotusLoadingData.isShow = true
				if (item.sDate != undefined) {
					this.sShiftDate = item.sDate
					this.eShiftDate = item.eDate
				}
				let that = this
				// 选择开始结束时间时分
				let sTime = item.datetime[0].slice(item.datetime[0].length - 5)
				let eTime = item.datetime[1].slice(item.datetime[1].length - 5)
				// 获取开始结束时间年月日
				let sYMD = item.datetime[0].split(' ')[0]
				let eYMD = item.datetime[1].split(' ')[0]
				// 工班作业时间
				if (this.active == 0) {
					if (item.gbValue != "") {
						let sresDate = api.HMS_daxiao(this.sShiftDate, sTime)
						let eresDate = api.HMS_daxiao(this.eShiftDate, eTime)
						if (sYMD != eYMD) {
							if (sresDate <= 0 && eresDate >= 0) {
								that.flag = true
								item.startTime = item.datetime[0]
								item.endTime = item.datetime[1]
								that.lotusLoadingData.isShow = false
							} else {
								item.datetime = ["", ""]
								item.startTime = ""
								item.endTime = ""
								that.flag = false
								setTimeout(function() {
									that.flag = true
									that.lotusLoadingData.isShow = false
								}, 200)
								uni.showToast({
									title: `请输入正确的工班作业时间范围`,
									icon: 'none',
									duration: 2000
								})
							}
						} else {
							if (item.gbTextValue == "一工班") {
								if (sresDate >= 0 && eresDate >= 0) {
									that.flag = true
									item.startTime = item.datetime[0]
									item.endTime = item.datetime[1]
									that.lotusLoadingData.isShow = false
								} else {
									item.datetime = ["", ""]
									item.startTime = ""
									item.endTime = ""
									that.flag = false
									setTimeout(function() {
										that.flag = true
										that.lotusLoadingData.isShow = false
									}, 200)
									uni.showToast({
										title: `请输入正确的工班作业时间范围`,
										icon: 'none',
										duration: 2000
									})
								}
							} else {
								if (sresDate <= 0 && eresDate >= 0) {
									that.flag = true
									item.startTime = item.datetime[0]
									item.endTime = item.datetime[1]
									that.lotusLoadingData.isShow = false
								} else {
									item.datetime = ["", ""]
									item.startTime = ""
									item.endTime = ""
									that.flag = false
									setTimeout(function() {
										that.flag = true
										that.lotusLoadingData.isShow = false
									}, 200)
									uni.showToast({
										title: `请输入正确的工班作业时间范围`,
										icon: 'none',
										duration: 2000
									})
								}
							}
						}
					} else {
						this.lotusLoadingData.isShow = false
						uni.showToast({
							title: `请先选择工班`,
							icon: 'none',
							duration: 2000
						})
					}
				}

				// 获取开始结束时间的时间戳
				let sT = Date.parse(item.datetime[0])
				let eT = Date.parse(item.datetime[1])
				// 获取开始结束时间时分转数字
				let nsTime = Number((sTime.split(':')).join(''))
				let neTime = Number((eTime.split(':')).join(''))
				// 获取限定范围开始结束时间时分转数字
				let xsTime = Number((this.beginDate.split(':')).join(''))
				let xeTime = Number((this.endDate.split(':')).join(''))

				// 翻仓作业时间
				if (this.active == 1) {
					if (eT - sT <= 86400000 && eT - sT >= 0) {
						if (sYMD != eYMD) {
							if (nsTime >= xsTime) {
								that.flag = true
								item.retallyStartTime = item.datetime[0]
								item.retallyEndTime = item.datetime[1]
								that.lotusLoadingData.isShow = false
							} else {
								item.datetime = ["", ""]
								item.retallyStartTime = ""
								item.retallyEndTime = ""
								that.flag = false
								setTimeout(function() {
									that.flag = true
									that.lotusLoadingData.isShow = false
								}, 200)
								uni.showToast({
									title: `请输入正确的作业时间范围`,
									icon: 'none',
									duration: 2000
								})
							}
						} else {
							if (neTime <= xeTime) {
								that.flag = true
								item.retallyStartTime = item.datetime[0]
								item.retallyEndTime = item.datetime[1]
								that.lotusLoadingData.isShow = false
							} else {
								item.datetime = ["", ""]
								item.retallyStartTime = ""
								item.retallyEndTime = ""
								that.flag = false
								setTimeout(function() {
									that.flag = true
									that.lotusLoadingData.isShow = false
								}, 200)
								uni.showToast({
									title: `请输入正确的作业时间范围`,
									icon: 'none',
									duration: 2000
								})
							}
						}
					} else {
						item.datetime = ["", ""]
						item.retallyStartTime = ""
						item.retallyEndTime = ""
						that.flag = false
						setTimeout(function() {
							that.flag = true
							that.lotusLoadingData.isShow = false
						}, 200)
						uni.showToast({
							title: `请输入正确的作业时间范围`,
							icon: 'none',
							duration: 2000
						})
					}
				}

				//其他信息作业时间
				if (this.active == 2) {
					if (type = 'other') {
						// 取技工开始结束年月日
						let sNyr = item.datetime[0].slice(0, 10)
						let eNyr = item.datetime[1].slice(0, 10)
					} else if (type == 'other2') {
						// 取技工开始结束年月日
						let sNyr2 = item.datetime2[0].slice(0, 10)
						let eNyr2 = item.datetime2[1].slice(0, 10)
						// 取技工开始结束时分秒
						let sSfm2 = item.datetime2[0].slice(item.datetime2[0].length - 5)
						let eSfm2 = item.datetime2[1].slice(item.datetime2[1].length - 5)
					}
					// let isType = false
					// if (sSfm2 >= xsTime && eSfm2 < xeTime) {
					// 	if (sNyr == sNyr2) {
					// 		isType = true
					// 	} else {
					// 		isType = false
					// 		uni.showToast({
					// 			title: `请跟技工时间在同一昼夜`,
					// 			icon: 'none',
					// 			duration: 2000
					// 		})
					// 	}
					// }
					if (type == 'other') {
						if (eT - sT <= 86400000 && eT - sT >= 0) {
							if (sYMD != eYMD) {
								if (nsTime >= xsTime) {
									that.flag = true
									item.startTime = item.datetime[0]
									item.endTime = item.datetime[1]
									that.lotusLoadingData.isShow = false
								} else {
									item.datetime = ["", ""]
									item.startTime = ""
									item.endTime = ""
									that.flag = false
									setTimeout(function() {
										that.flag = true
										that.lotusLoadingData.isShow = false
									}, 200)
									uni.showToast({
										title: `请输入正确的作业时间范围`,
										icon: 'none',
										duration: 2000
									})
								}
							} else {
								if (neTime <= xeTime) {
									that.flag = true
									item.startTime = item.datetime[0]
									item.endTime = item.datetime[1]
									that.lotusLoadingData.isShow = false
								} else {
									item.datetime = ["", ""]
									item.startTime = ""
									item.endTime = ""
									that.flag = false
									setTimeout(function() {
										that.flag = true
										that.lotusLoadingData.isShow = false
									}, 200)
									uni.showToast({
										title: `请输入正确的作业时间范围`,
										icon: 'none',
										duration: 2000
									})
								}
							}
						} else {
							item.datetime = ["", ""]
							item.startTime = ""
							item.endTime = ""
							that.flag = false
							setTimeout(function() {
								that.flag = true
								that.lotusLoadingData.isShow = false
							}, 200)
							uni.showToast({
								title: `请输入正确的作业时间范围`,
								icon: 'none',
								duration: 2000
							})
						}
					} else if (type == 'other2') {
						let sTime2 = item.datetime2[0].slice(item.datetime2[0].length - 5)
						let eTime2 = item.datetime2[1].slice(item.datetime2[1].length - 5)
						// 获取开始结束时间的时间戳
						let sT2 = Date.parse(item.datetime2[0])
						let eT2 = Date.parse(item.datetime2[1])
						// 获取开始结束时间年月日
						let sYMD2 = item.datetime2[0].split(' ')[0]
						let eYMD2 = item.datetime2[1].split(' ')[0]
						// 获取开始结束时间时分转数字
						let nsTime2 = Number((sTime2.split(':')).join(''))
						let neTime2 = Number((eTime2.split(':')).join(''))
						// 获取限定范围开始结束时间时分转数字
						let xsTime2 = Number((this.beginDate.split(':')).join(''))
						let xeTime2 = Number((this.endDate.split(':')).join(''))
						if (eT2 - sT2 <= 86400000 && eT2 - sT2 >= 0) {
							if (sYMD2 != eYMD2) {
								if (nsTime2 >= xeTime2) {
									that.flag = true
									item.startTime2 = item.datetime2[0]
									item.endTime2 = item.datetime2[1]
									that.lotusLoadingData.isShow = false
								} else {
									item.datetime2 = ["", ""]
									item.startTime2 = ""
									item.endTime2 = ""
									that.flag = false
									setTimeout(function() {
										that.flag = true
										that.lotusLoadingData.isShow = false
									}, 200)
									uni.showToast({
										title: `请输入正确的作业时间范围`,
										icon: 'none',
										duration: 2000
									})
								}
							} else {
								if (neTime2 <= xeTime2) {
									that.flag = true
									item.startTime2 = item.datetime2[0]
									item.endTime2 = item.datetime2[1]
									that.lotusLoadingData.isShow = false
								} else {
									item.datetime2 = ["", ""]
									item.startTime2 = ""
									item.endTime2 = ""
									that.flag = false
									setTimeout(function() {
										that.flag = true
										that.lotusLoadingData.isShow = false
									}, 200)
									uni.showToast({
										title: `请输入正确的作业时间范围`,
										icon: 'none',
										duration: 2000
									})
								}
							}
						} else {
							item.datetime2 = ["", ""]
							item.startTime2 = ""
							item.endTime2 = ""
							that.flag = false
							setTimeout(function() {
								that.flag = true
								that.lotusLoadingData.isShow = false
							}, 200)
							uni.showToast({
								title: `请输入正确的作业时间范围`,
								icon: 'none',
								duration: 2000
							})
						}
					}
				}

			},
			// 工班信息删除
			delGb(item, index) {
				this.ulList1.splice(index, 1)
				if (item.webId != null) {
					this.shiftDelList.push(item.webId)
					this.shiftDelList = Array.from(new Set(this.shiftDelList))
					item.ulList2.forEach(v => {
						this.shiftInfoDelList.push(v.webId)
					})
					this.shiftInfoDelList = Array.from(new Set(this.shiftInfoDelList))
				}
				uni.showToast({
					icon: 'none',
					title: '删除工班成功'
				});
			},
			delGb2(item2, index, index2) {
				this.ulList1[index].ulList2.splice(index2, 1)
				if (item2.webId != null) {
					this.shiftInfoDelList.push(item2.webId)
					this.shiftInfoDelList = Array.from(new Set(this.shiftInfoDelList))
				}
				uni.showToast({
					icon: 'none',
					title: '删除工班信息成功'
				});
			},
			// 车型下拉
			cxChange(item, index, item2, index2) {
				this.ulList1[index].ulList2[index2].carType = item2.carType
				this.cxList.forEach(v => {
					if (v.value == item2.carType) {
						item2.carTypeName = v.text
					}
				})
			},
			// 装卸方式下拉
			fsChange(item, index, item2, index2) {
				this.ulList1[index].ulList2[index2].loadingType = item2.loadingType
				this.fsList.forEach(v => {
					if (v.value == item2.loadingType) {
						item2.loadingTypeName = v.text
					}
				})
			},

			// 翻仓信息
			// 翻仓类型下拉
			fcChange(item, index) {
				this.fcUlList[index].retallyType = item.retallyType
				this.fcList.forEach(v => {
					if (v.value == item.retallyType) {
						item.retallyTypeName = v.text
					}
				})
			},
			// 翻仓车型
			fccxChange(item, index) {
				this.fcUlList[index].carType = item.carType
				this.cxList.forEach(v => {
					if (v.value == item.carType) {
						item.carTypeName = v.text
					}
				})
				if (item.carTypeName == '空马菲') {
					item.mfType = true
				} else {
					item.mfType = false
				}
			},
			// 翻仓add
			fcAdd() {
				this.fcUlList.push({
					retallyType: "",
					retallyTypeName: "",
					retallyOrigin: "",
					retallyTerminus: "",
					carType: "",
					carTypeName: "",
					datetime: ["", ""],
					retallyStartTime: "",
					retallyEndTime: "",
					goodsNumber: 0,
					goodsVolume: 0,
					goodsWeight: 0,
					mafiGroupNum: 0,
					mfType: false,
					editStatus: 0,
				})
				uni.showToast({
					icon: 'none',
					title: '添加翻仓成功'
				});
			},
			// 翻仓删除
			delFc(item, index) {
				this.fcUlList.splice(index, 1)
				if (item.webId != null) {
					this.fcInfoDelList.push(item.webId)
					this.fcInfoDelList = Array.from(new Set(this.fcInfoDelList))
				}
				if (item.webId != undefined) {
					this.delSrmIds.push(item.webId)
					uni.setStorageSync('delSrmIds', this.delSrmIds);
				}
				uni.showToast({
					icon: 'none',
					title: '删除翻仓成功'
				});
			},

			// 其他信息
			// 其他add
			qtAdd() {
				this.otherArr.push({
					webId: '',
					contactId: '',
					jsworker: 0,
					datetime: ["", ""],
					startTime: "",
					endTime: "",
					zlValue: 0,
					tjValue: 0,
					ptworker: 0,
					datetime2: ["", ""],
					startTime2: "",
					endTime2: "",
					zlValue2: 0,
					tjValue2: 0,
					describe: '',
					dgWork: '',
					remark: ''
				})
				uni.showToast({
					icon: 'none',
					title: '添加其他信息成功'
				});
			},
			// 其他删除
			delQt(item, index) {
				this.otherArr.splice(index, 1)
				if (item.webId != null) {
					this.otherDelList.push(item.webId)
					this.otherDelList = Array.from(new Set(this.otherDelList))
				}
				if (item.webId != undefined) {
					this.delSoiIds.push(item.webId)
					uni.setStorageSync('delSoiIds', this.delSoiIds);
				}
				uni.showToast({
					icon: 'none',
					title: '删除其他信息成功'
				});
			},

			// 取消
			cancel() {
				uni.navigateTo({
					url: '/pages/shipWork/mixWork'
				})
			},
			// 保存
			save() {
				if (this.hcValue == "" || this.zxValue == "") {
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: '请输入必填项！'
					})
				} else {
					let date = new Date().getTime()
					let contactId = this.shipInfo.webId
					let webStatus = "0"
					let editStatus = 1
					let isVvyType = 0
					this.infoVvyArr.forEach(v => {
						if (v == this.hcValue) {
							isVvyType++
						}
					})
					if (this.obj.state == "edit") {
						// 工班信息
						for (let i = 0; i < this.ulList1.length; i++) {
							if (this.ulList1[i].webId != '' && this.ulList1[i].webId != null) {
								let webDate = api.getDate(date)
								let sql =
									`UPDATE workMessageRespList SET vvyId = '${this.hcValue}',vvyName = '${this.hcTextValue}',importExportFlagName = '${this.importExportFlagName}',
									loadType = '${this.zxValue}',loadTypeName = '${this.zxTextValue}',pwcType = '${this.ulList1[i].gbValue}',
									pwcTypeName = '${this.ulList1[i].gbTextValue}',workStartTime = '${this.ulList1[i].startTime}',
									workEndTime = '${this.ulList1[i].endTime}',webStatus = '${webStatus}',webDate = '${webDate}' WHERE webId = '${this.ulList1[i].webId}';`
								this.executeSql(sql)
								for (let j = 0; j < this.ulList1[i].ulList2.length; j++) {
									if (this.ulList1[i].ulList2[j].webId != '' && this.ulList1[i].ulList2[j]
										.webId !=
										null) {
										let sql2 =
											`UPDATE workMessageRespInfoList SET carType = '${this.ulList1[i].ulList2[j].carType}',carTypeName = '${this.ulList1[i].ulList2[j].carTypeName}',
											goodsNumber = '${this.ulList1[i].ulList2[j].goodsNumber}', loadingType = '${this.ulList1[i].ulList2[j].loadingType}',
											loadingTypeName = '${this.ulList1[i].ulList2[j].loadingTypeName}', remark = '${this.ulList1[i].ulList2[j].remark}', 
											webStatus = '${webStatus}', webDate = '${webDate}' WHERE webId = '${this.ulList1[i].ulList2[j].webId}';`
										this.executeSql(sql2)
									} else {
										let webId2 = uuidv4()
										let webDate = api.getDate(date)
										let sql2 =
											`insert into workMessageRespInfoList values('${webId2}','${this.vtpId}','${this.ulList1[i].webId}','${this.ulList1[i].ulList2[j].carType}',
											'${this.ulList1[i].ulList2[j].carTypeName}','${this.ulList1[i].ulList2[j].goodsNumber}','${this.ulList1[i].ulList2[j].loadingType}',
											'${this.ulList1[i].ulList2[j].loadingTypeName}','${this.ulList1[i].ulList2[j].remark}','${webStatus}','${webDate}')`
										this.executeSql(sql2)
									}
								}
							} else {
								let webId = uuidv4()
								let webDate = api.getDate(date)
								let sql = `insert into workMessageRespList values('${webId}','${this.vtpId}','${contactId}','${this.aId}','${this.hcValue}',
									'${this.hcTextValue}','${this.importExportFlagName}','${this.zxValue}','${this.zxTextValue}','${this.ulList1[i].gbValue}',
									'${this.ulList1[i].gbTextValue}','${this.ulList1[i].startTime}','${this.ulList1[i].endTime}','${0}',
									'${webStatus}','${webDate}')`
								this.executeSql(sql)
								for (let j = 0; j < this.ulList1[i].ulList2.length; j++) {
									if (this.ulList1[i].ulList2[j].webId != '' && this.ulList1[i].ulList2[j]
										.webId !=
										null) {
										let sql2 =
											`UPDATE workMessageRespInfoList SET carType = '${this.ulList1[i].ulList2[j].carType}',carTypeName = '${this.ulList1[i].ulList2[j].carTypeName}',
											goodsNumber = '${this.ulList1[i].ulList2[j].goodsNumber}', loadingType = '${this.ulList1[i].ulList2[j].loadingType}',
											loadingTypeName = '${this.ulList1[i].ulList2[j].loadingTypeName}', remark = '${this.ulList1[i].ulList2[j].remark}', 
											webStatus = '${webStatus}', webDate = '${webDate}' WHERE webId = '${this.ulList1[i].ulList2[j].webId}';`
										this.executeSql(sql2)
									} else {
										let webId2 = uuidv4()
										let webDate = api.getDate(date)
										let sql2 =
											`insert into workMessageRespInfoList values('${webId2}','${this.vtpId}','${webId}','${this.ulList1[i].ulList2[j].carType}',
											'${this.ulList1[i].ulList2[j].carTypeName}','${this.ulList1[i].ulList2[j].goodsNumber}','${this.ulList1[i].ulList2[j].loadingType}',
											'${this.ulList1[i].ulList2[j].loadingTypeName}','${this.ulList1[i].ulList2[j].remark}','${webStatus}','${webDate}')`
										this.executeSql(sql2)
									}
								}
							}
						}
						// 翻仓信息
						for (let i = 0; i < this.fcUlList.length; i++) {
							if (this.fcUlList[i].webId != null) {
								let sql =
									`UPDATE retallyMessageRespList SET reyVvyId = '${this.hcValue}', vvyName = '${this.hcTextValue}', 
											retallyType = '${this.fcUlList[i].retallyType}',retallyTypeName = '${this.fcUlList[i].retallyTypeName}',
											retallyOrigin = '${this.fcUlList[i].retallyOrigin}', retallyTerminus = '${this.fcUlList[i].retallyTerminus}',
											retallyStartTime = '${this.fcUlList[i].retallyStartTime}', retallyEndTime = '${this.fcUlList[i].retallyEndTime}', 
											carType = '${this.fcUlList[i].carType}',carTypeName = '${this.fcUlList[i].carTypeName}',
											goodsNumber = '${this.fcUlList[i].goodsNumber}', goodsVolume = '${this.fcUlList[i].goodsVolume}',
											goodsWeight = '${this.fcUlList[i].goodsWeight}',mafiGroupNum = '${this.fcUlList[i].mafiGroupNum}', webStatus = '${webStatus}', 
											webDate = '${webDate}' WHERE webId = '${this.fcUlList[i].webId}';`
								this.executeSql(sql)
							} else {
								let webId = uuidv4()
								let webDate = api.getDate(date)
								let sql =
									`insert into retallyMessageRespList values('${webId}','${this.vtpId}','${contactId}','${this.aId}','${this.hcValue}','${this.hcTextValue}','${this.fcUlList[i].retallyType}',
										'${this.fcUlList[i].retallyTypeName}','${this.fcUlList[i].retallyOrigin}','${this.fcUlList[i].retallyTerminus}',
										'${this.fcUlList[i].retallyStartTime}','${this.fcUlList[i].retallyEndTime}','${this.fcUlList[i].carType}',
										'${this.fcUlList[i].carTypeName}','${this.fcUlList[i].goodsNumber}','${this.fcUlList[i].goodsVolume}',
										'${this.fcUlList[i].goodsWeight}','${this.fcUlList[i].mafiGroupNum}','${editStatus}','${webStatus}','${webDate}')`
								this.executeSql(sql)
							}
						}
						// 其他信息
						let webDate = api.getDate(date)
						this.otherArr.forEach(v => {
							let webId = uuidv4()
							let sql = ""
							if (v.webId == '') {
								sql =
									`insert into infoRespList values('${webId}','${this.vtpId}','${contactId}','${this.aId}','${this.hcValue}','${this.hcTextValue}','${v.jsworker}',
									'${v.startTime}','${v.endTime}','${v.zlValue}','${v.tjValue}','${v.ptworker}',
									'${v.startTime2}','${v.endTime2}','${v.zlValue2}','${v.tjValue2}','${v.describe}',
									'${v.dgWork}','${v.remark}','${webStatus}','${webDate}')`
							} else {
								sql =
									`UPDATE infoRespList SET vvyId = '${this.hcValue}', vvyName = '${this.hcTextValue}', tecNum = '${v.jsworker}',
										startTm = '${v.startTime}', endTm = '${v.endTime}', weight = '${v.zlValue}', 
										volume = '${v.tjValue}', genNum = '${v.ptworker}',
										startTmPt = '${v.startTime2}', endTmPt = '${v.endTime2}', weightPt = '${v.zlValue2}',
										volumePt = '${v.tjValue2}', auxRemark = '${v.describe}', waitRemark = '${v.dgWork}',
										workRemark = '${v.remark}', webStatus = '${webStatus}', webDate = '${webDate}'  WHERE webId = '${v.webId}';`
							}
							this.executeSql(sql)
						})

						// 删除工班信息
						this.shiftDelList.forEach(v => {
							let sql = `DELETE FROM workMessageRespList WHERE webId = '${v}';`
							this.executeSql(sql)
						})
						// 删除工班详细信息
						this.shiftInfoDelList.forEach(v => {
							let sql = `DELETE FROM workMessageRespInfoList WHERE webId = '${v}';`
							this.executeSql(sql)
						})
						// 删除翻仓信息
						this.fcInfoDelList.forEach(v => {
							let sql = `DELETE FROM retallyMessageRespList WHERE webId = '${v}';`
							this.executeSql(sql)
						})
						// 删除其他信息
						this.otherDelList.forEach(v => {
							let sql = `DELETE FROM infoRespList WHERE webId = '${v}';`
							this.executeSql(sql)
						})

						uni.navigateTo({
							url: '/pages/shipWork/mixWork'
						})
					} else if (this.obj.state == "add") {
						if (isVvyType == 0) {
							let aId = uuidv4()
							// 工班信息
							for (let i = 0; i < this.ulList1.length; i++) {
								let webId = uuidv4()
								let webDate = api.getDate(date)
								let sql = `insert into workMessageRespList values('${webId}','${this.vtpId}','${contactId}','${aId}','${this.hcValue}',
								'${this.hcTextValue}','${this.importExportFlagName}','${this.zxValue}','${this.zxTextValue}','${this.ulList1[i].gbValue}',
								'${this.ulList1[i].gbTextValue}','${this.ulList1[i].startTime}','${this.ulList1[i].endTime}','${0}',
								'${webStatus}','${webDate}')`
								this.executeSql(sql)
								for (let j = 0; j < this.ulList1[i].ulList2.length; j++) {
									let webId2 = uuidv4()
									let webDate = api.getDate(date)
									let sql2 =
										`insert into workMessageRespInfoList values('${webId2}','${this.vtpId}','${webId}','${this.ulList1[i].ulList2[j].carType}',
									'${this.ulList1[i].ulList2[j].carTypeName}','${this.ulList1[i].ulList2[j].goodsNumber}','${this.ulList1[i].ulList2[j].loadingType}',
									'${this.ulList1[i].ulList2[j].loadingTypeName}','${this.ulList1[i].ulList2[j].remark}','${webStatus}','${webDate}')`
									this.executeSql(sql2)
								}
							}
							// 翻仓信息
							for (let i = 0; i < this.fcUlList.length; i++) {
								let webId = uuidv4()
								let webDate = api.getDate(date)
								let sql =
									`insert into retallyMessageRespList values('${webId}','${this.vtpId}','${contactId}','${aId}','${this.hcValue}','${this.hcTextValue}','${this.fcUlList[i].retallyType}',
									'${this.fcUlList[i].retallyTypeName}','${this.fcUlList[i].retallyOrigin}','${this.fcUlList[i].retallyTerminus}',
									'${this.fcUlList[i].retallyStartTime}','${this.fcUlList[i].retallyEndTime}','${this.fcUlList[i].carType}',
									'${this.fcUlList[i].carTypeName}','${this.fcUlList[i].goodsNumber}','${this.fcUlList[i].goodsVolume}',
									'${this.fcUlList[i].goodsWeight}','${this.fcUlList[i].mafiGroupNum}','${editStatus}','${webStatus}','${webDate}')`
								this.executeSql(sql)
							}
							// 其他信息
							this.otherArr.forEach(v => {
								let webId = uuidv4()
								let webDate = api.getDate(date)
								let sql =
									`insert into infoRespList values('${webId}','${this.vtpId}','${contactId}','${aId}','${this.hcValue}','${this.hcTextValue}','${v.jsworker}',
									'${v.startTime}','${v.endTime}','${v.zlValue}','${v.tjValue}','${v.ptworker}',
									'${v.startTime2}','${v.endTime2}','${v.zlValue2}','${v.tjValue2}','${v.describe}',
									'${v.dgWork}','${v.remark}','${webStatus}','${webDate}')`
								this.executeSql(sql)
							})
							uni.navigateTo({
								url: '/pages/shipWork/mixWork'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '该航次已有已录，请选择其他航次'
							});
						}
					}
				}
			},
			executeSql(sql) {
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.shiftAdd {
		.container {
			min-height: 100vh;
			background-color: #F6F7F9;

			.masonry {
				background-color: #F6F7F9;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 16px;
				grid-auto-flow: row dense;
				padding: 0 16px 100px;

				.masonryLi {
					.ul {
						margin-top: 21px;
						position: relative;
						padding: 16px;
					}
				}

				.addBox {
					width: 100%;
					height: 132px;
					background-color: #fff;
					border-radius: 8px;
					margin: 21px 0;
					display: flex;
					justify-content: center;

					.imgBox {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin: 0 auto;
						text-align: center;

						image {
							width: 36px;
							height: 36px;
						}

						p {
							font-size: 14px;
							color: #0067CF;
							font-weight: bold;
							margin-top: 8px;
							margin-left: -10px;
						}
					}
				}

				// .masonryLi:nth-of-type(2n + 1) {
				// 	grid-row: auto / span 1;
				// }

				// .masonryLi:nth-of-type(2n + 2) {
				// 	grid-row: auto / span 2;
				// }
			}

			.delBox {
				width: 18px;
				height: 18px;
				text-align: center;
				line-height: 18px;
				background-color: #999;
				color: #fff;
				border-radius: 50%;
				position: absolute;
				right: -8px;
				top: -8px;
			}


			/deep/.van-tab {
				padding-top: 10px;
			}

			/deep/.tab-pane {
				width: 100%;
			}

			/deep/.van-ellipsis {
				font-size: 18px;
				font-weight: bold;
			}

			/deep/.van-tab--active {
				font-size: 18px;
				font-weight: bold;
			}

			/deep/ .van-tabs--line {
				height: 60px;
			}

			/deep/ .van-tabs__wrap {
				height: 60px;
			}

			.paddingBox {
				padding: 16px;
			}

			.ulInfo {
				padding: 0 16px;

				.li {
					width: 49% !important;
				}
			}

			/deep/.uni-numbox {
				border: 1px solid #ccc;
				box-sizing: border-box;
				height: 38px;
				margin-top: 8px;
			}

			/deep/.uni-numbox-btns {
				padding: 0 14px;
				box-sizing: border-box;
			}

			/deep/.uni-numbox__value {
				width: 100px;
				height: 35px;
				line-height: 35px;
				background-color: #fff !important;
			}

			/deep/.uni-date {
				flex: none;
				width: 52%;
				text-align: right;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			/deep/.uni-date-x .icon-calendar {
				display: none;
			}

			/deep/.uni-date-x {
				height: 38px;
				margin-top: 8px;
			}

			/deep/.uni-stat__select {
				flex: none;
				width: 30%;
			}

			/deep/.uni-select {
				border: none;
			}

			/deep/.uni-select__input-text {
				text-align: right;
				padding-right: 10px;
			}

			/deep/.is-input-border {
				margin-top: 10px;
				height: 35px;
			}

			.ulTop {
				width: 100%;
				padding: 15px;
				text-align: right;

				text {
					color: #2979ff;
					margin-right: 10px;
				}

				text:nth-of-type(2) {
					color: red;
				}
			}

			.ulTop:first-child {
				border-top: none;
			}

			.ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 8px;

				.li {
					width: 100%;
					display: flex;
					justify-content: space-between;
					height: 56px;
					line-height: 56px;

					.required {
						color: red;
						margin-right: 5px;
					}

					.liTitle {
						text-align: right;
					}

					/deep/.uni-numbox {
						border: 1px solid #ccc;
						box-sizing: border-box;
					}

					/deep/.uni-numbox-btns {
						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%;
				}

				.carAddBox {
					width: 100%;
					height: 60px;
					line-height: 60px;
					background: #F7F7F7;
					border-radius: 4px;
					margin: 21px 0;
					display: flex;
					flex-direction: column;
					justify-content: center;

					.imgBox {
						height: 100%;
						display: flex;
						justify-content: center;
						text-align: center;

						image {
							width: 20px;
							height: 20px;
							margin: auto 0;
						}

						p {
							font-size: 14px;
							color: #0067CF;
							font-weight: bold;
							margin-left: 8px;
						}
					}
				}

				.carLi {
					background: #F7F7F7;
					border-radius: 4px;
					position: relative;

					/deep/.uni-stat__select {
						flex: 1;
					}
				}

				.iLi {
					height: 120px;
					justify-content: flex-start !important;

					/deep/.is-input-border {
						margin-top: 10px;
						height: 100px;
					}
				}
			}

			.qtUl {
				.title {
					font-size: 16px;
					font-weight: bold;
					padding-left: 10px;
					border-left: 5px solid #2979ff;
					margin: 20px 0;
				}
			}
		}

		.btnList {
			display: flex;
			justify-content: center;
			margin-top: 20px;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 80px;
			line-height: 80px;
			background-color: #fff;
			box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);

			/deep/ .van-button {
				margin: 0px 20px;
				width: 120px;
				height: 50px;
			}
		}
	}
</style>