pad-app/pages/shipWork/shiftDetails.vue

<template>
	<view class="shiftDetails">
		<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>航次：</p>
						<text>{{dataInfo[0].vvyName}}</text>
					</view>
					<view class="li">
						<p>进出口：</p>
						<text>{{dataInfo[0].importExportFlagName}}</text>
					</view>
					<view class="li">
						<p>贸易类型：</p>
						<text>{{shipInfo.spmTradeName}}</text>
					</view>
					<view class="li">
						<p>装卸类型：</p>
						<text> {{dataInfo[0].loadTypeName}}</text>
					</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="shiftCss">
						<view class="smasonry">
							<view class="ul" v-for="(item,index) in shiftInfo1" :key="index + 'a'">
								<view class="li">
									<p>工班：</p>
									<text> {{item.pwcTypeName}}</text>
								</view>
								<view class="li">
									<p>作业时间：</p>
									<text> {{item.workStartTime}} - {{item.workEndTime}}</text>
								</view>
								<view class="ul aUl" v-for="(item2,index2) in item.shiftInfoList" :key="index2 + 'b'">
									<view class="li">
										<p>车型：</p>
										<text>{{item2.carTypeName}}</text>
									</view>
									<view class="li">
										<p>数量：</p>
										<text>{{item2.goodsNumber}}</text>
									</view>
									<view class="li">
										<p>装卸方式：</p>
										<text>{{item2.loadingTypeName}}</text>
									</view>
									<view class="li wLi">
										<p>备注：</p>
										<text class="remark">{{item2.remark}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="smasonry">
							<view class="ul" v-for="(item,index) in shiftInfo2" :key="index + 'c'">
								<view class="li">
									<p>工班：</p>
									<text> {{item.pwcTypeName}}</text>
								</view>
								<view class="li">
									<p>作业时间：</p>
									<text> {{item.workStartTime}} - {{item.workEndTime}}</text>
								</view>
								<view class="ul aUl" v-for="(item2,index2) in item.shiftInfoList" :key="index2 + 'b'">
									<view class="li">
										<p>车型：</p>
										<text>{{item2.carTypeName}}</text>
									</view>
									<view class="li">
										<p>数量：</p>
										<text>{{item2.goodsNumber}}</text>
									</view>
									<view class="li">
										<p>装卸方式：</p>
										<text>{{item2.loadingTypeName}}</text>
									</view>
									<view class="li wLi">
										<p>备注：</p>
										<text class="remark">{{item2.remark}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="翻仓信息">
					<view class="masonry">
						<view class="masonryLi" v-for="(item,index) in this.fcList" :key="index">
							<view class="ul">
								<view class="li">
									<p>翻舱类型：</p>
									<text>{{item.retallyTypeName}}</text>
								</view>
								<view class="li">
									<p>翻舱起点：</p>
									<text>{{item.retallyOrigin}}</text>
								</view>
								<view class="li">
									<p>翻舱终点：</p>
									<text>{{item.retallyTerminus}}</text>
								</view>
								<view class="li">
									<p>作业时间：</p>
									<text>{{item.retallyStartTime}} - {{item.retallyEndTime}}</text>
								</view>
								<view class="li">
									<p>车型：</p>
									<text>{{item.carTypeName}}</text>
								</view>
								<view class="li" v-if="item.carTypeName == '空马菲'">
									<p>组数：</p>
									<text>{{item.mafiGroupNum}}</text>
								</view>
								<view class="li">
									<p>数量：</p>
									<text>{{item.goodsNumber}}</text>
								</view>
								<view class="li">
									<p>体积：</p>
									<text>{{item.goodsVolume}}</text>
								</view>
								<view class="li">
									<p>重量：</p>
									<text>{{item.goodsWeight}}</text>
								</view>
							</view>
						</view>
					</view>
				</van-tab>
				<van-tab title="其他信息">
					<view class="masonry">
						<view class="otherInfo masonryLi" v-for="(item,index) in otherList" :key="index">
							<view class="ul">
								<p class="title">辅助作业</p>
								<view class="li">
									<p>技术工人：</p>
									<text>{{item.tecNum}}</text>
								</view>
								<view class="li">
									<p>作业时间：</p>
									<text>{{item.startTm}} - {{item.endTm}}</text>
								</view>
								<view class="li">
									<p>重量：</p>
									<text>{{item.weight}}</text>
								</view>
								<view class="li">
									<p>体积：</p>
									<text>{{item.volume}}</text>
								</view>
								<view class="li">
									<p>普通工人：</p>
									<text>{{item.genNum}}</text>
								</view>
								<view class="li">
									<p>作业时间：</p>
									<text>{{item.startTmPt}} - {{item.endTmPt}}</text>
								</view>
								<view class="li">
									<p>重量：</p>
									<text>{{item.weightPt}}</text>
								</view>
								<view class="li">
									<p>体积：</p>
									<text>{{item.volumePt}}</text>
								</view>
								<view class="li wLi">
									<p>描述：</p>
									<text>{{item.auxRemark}}</text>
								</view>
								<p class="title">待工作业</p>
								<view class="li wLi">
									<p>描述：</p>
									<text>{{item.waitRemark}}</text>
								</view>
								<p class="title">作业备注</p>
								<view class="li wLi">
									<p>描述：</p>
									<text>{{item.workRemark}}</text>
								</view>
							</view>
						</view>
					</view>
				</van-tab>
			</van-tabs>
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
					@confirm="delConfirm"></uni-popup-dialog>
			</uni-popup>
			<view class="btnList">
				<view class="btn qx" @click="cancel">取消</view>
				<template v-if="status == 0 || status == 4 || status == 5 || status == 'null'">
					<!-- <view class="btn sc" @click="del">删除</view> -->
					<view class="btn bc" @click="edit('edit')">编辑</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	export default {
		data() {
			return {
				title: "工班信息详情",
				active: 0,
				dataInfo: [{
					spmName: "",
					importExportFlagName: "",
					tradeTypeName: ""
				}],
				shipInfo: {},
				shiftInfo: [],
				shiftInfo1: [],
				shiftInfo2: [],
				fcList: [],
				otherList: [],
				shiftRowIndex: 0,
				contactId: "",
				aId: "",
				vtpId: "",

				// 审核状态
				status: 0,

				// 删除工班信息id
				delSwmIds: [],
			}
		},
		mounted() {
			this.vtpId = uni.getStorageSync('vtpId')
			this.dataInfo = uni.getStorageSync('shiftRow')
			this.contactId = this.dataInfo[0].contactId
			this.aId = this.dataInfo[0].aId
			this.status = this.dataInfo[0].status
			this.delSwmIds = uni.getStorageSync("delSwmIds")
			this.initData()
			let that = this
			setTimeout(function() {
				that.shiftInfo.forEach((v, index) => {
					if (index % 2 == 0) {
						that.shiftInfo1.push(v)
					} else {
						that.shiftInfo2.push(v)
					}
				})
			}, 200)
		},
		methods: {
			// 查
			executeSql1(tableName) {
				let sql = `select * from ${tableName} WHERE aId = '${this.aId}';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					if (tableName == 'workMessageRespList') {
						this.shiftInfo = []
						value.forEach(v => {
							this.executeSql2('workMessageRespInfoList', v)
						})
					} else if (tableName == 'retallyMessageRespList') {
						this.fcList = value
					} else if (tableName == 'infoRespList') {
						this.otherList = value
					}
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			executeSql2(tableName, item) {
				let sql = `select * from ${tableName} WHERE contactId = '${item.webId}';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					item["shiftInfoList"] = []
					value.forEach(v => {
						item["shiftInfoList"].push(v)
					})
					this.shiftInfo.push(item)
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			executeSql3(tableName) {
				let sql = `select * from ${tableName} WHERE vtpId = '${this.vtpId}'`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.shipInfo = value[0]
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			initData() {
				this.executeSql3('shipInfoTable')
				// 获取工班信息
				this.executeSql1('workMessageRespList')
				this.executeSql1('retallyMessageRespList')
				this.executeSql1('infoRespList')
			},
			// 切换标签
			onTabs(e) {
				this.active = e.detail.index
			},
			// 删除
			executeSql(tableName) {
				let sql = ""
				if (tableName == "workMessageRespInfoList") {
					sql = `DELETE FROM ${tableName} WHERE contactId = '${this.contactId}';`
				} else {
					sql = `DELETE FROM ${tableName} WHERE aId = '${this.aId}';`
				}
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 取消
			cancel() {
				uni.setStorageSync('tabsType', 1);
				uni.navigateTo({
					url: '/pages/shipWork/mixWork'
				})
			},
			// 弹框删除
			delConfirm() {
				this.executeSql('workMessageRespList')
				this.executeSql('workMessageRespInfoList')
				this.executeSql('retallyMessageRespList')
				this.executeSql('infoRespList')
				uni.setStorageSync('tabsType', 1)
				this.dataInfo.forEach(v => {
					let reg = RegExp(/-/)
					if (reg.test(v.webId) == false) {
						this.delSwmIds.push(v.webId)
					}
				})
				uni.setStorageSync('delSwmIds', this.delSwmIds);
				uni.navigateTo({
					url: '/pages/shipWork/mixWork'
				})
			},
			// 删除
			del() {
				this.$refs.popup.open()
			},
			// 编辑
			edit(state) {
				this.obj = {
					state: state
				};
				const params = encodeURIComponent(JSON.stringify(this.obj));
				uni.navigateTo({
					url: `/pages/shipWork/shiftAdd?params=${params}`
				})
			},
		}
	}
</script>

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

			.paddingBox {
				padding: 16px;
			}

			.ulInfo {
				padding: 0 16px;

				.li {
					width: 49% !important;
					height: 56px;
					line-height: 56px;
				}
			}

			/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;
			}

			.masonry {
				background-color: #F6F7F9;
				padding: 16px 16px 100px;
				display: flex;
				flex-wrap: wrap;
				align-items: baseline;
				gap: 16px;
                justify-content: space-between;
				.masonryLi {
					width: 49%;
					height: auto;
				}
			}

			.shiftCss {
				display: flex;

				.smasonry {
					width: 49%;
					flex: 1;
					display: flex;
					flex-direction: column;
					gap: 16px;
					background-color: #F6F7F9;
					padding: 16px 16px 100px;
					align-items: baseline;
					.remark{
						word-break: break-all;
					}
				}
			}

			.otherInfo {
				padding-bottom: 20px;

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

			.ul {
				background-color: #fff;
				border-radius: 8px;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0 16px 16px;
				margin-bottom: 16px;
				.li {
					width: 100%;
					display: flex;
					justify-content: space-between;
					min-height: 50px;
					line-height: 50px;
					font-size: 16px;
				}
				// .wLi {
				// 	width: 100%;
				// 	min-height: 50px;
				// }
			}

			.aUl {
				padding: 16px;
				width: 100%;
				background: #F7F7F7;
				border-radius: 4px;
				margin-top: 16px;
			}

			.btnList {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				height: 80px;
				background-color: #fff;
				display: flex;
				justify-content: center;
				box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);

				.btn {
					margin: 15.5px 17px;
					width: 200px;
					height: 49px;
					border-radius: 2px;
					font-size: 18px;
					text-align: center;
					line-height: 49px;
				}

				.qx {
					background-color: #eee;
				}

				.sc {
					background-color: #E50101;
					color: #fff;
				}

				.bc {
					color: #fff;
					background: #0067CF;
				}
			}
		}
	}
</style>