pad-app/pages/shipWork/shiftDetails.vue

<template>
	<view class="shiftDetails">
		<view class="container">
			<custom-tabs type="c1" :value="tabsValue" @change="changeIndex">
				<custom-tab-pane label="工班信息" name="c1_1">
					<view></view>
					<view class="ul">
						<view class="li">
							<p>船名：</p>
							<text>{{dataInfo[0].spmName}}</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>{{dataInfo[0].tradeTypeName}}</text>
						</view>
						<view class="li">
							<p>装卸类型：</p>
							<text> {{dataInfo[0].loadTypeName}}</text>
						</view>
					</view>
					<view class="ul bUl borTop" v-for="(item,index) in shiftInfo" :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 bUl" 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>{{item2.remark}}</text>
							</view>
						</view>
					</view>
				</custom-tab-pane>
				<custom-tab-pane label="翻仓信息" name="c1_2">
					<view class="fcInfo" v-for="(item,index) in this.fcList" :key="index">
						<view class="fcBox">
							<p>翻舱类型：</p>
							<text>{{item.retallyTypeName}}</text>
						</view>
						<view class="ul" v-for="(item2,index2) in item.fcInfo" :key="index2">
							<view class="li">
								<p>航次：</p>
								<text>{{item2.vvyName}}</text>
							</view>
							<view class="li">
								<p>翻舱起点：</p>
								<text>{{item2.retallyOrigin}}</text>
							</view>
							<view class="li">
								<p>翻舱终点：</p>
								<text>{{item2.retallyTerminus}}</text>
							</view>
							<view class="li">
								<p>作业时间：</p>
								<text>{{item2.retallyStartTime}} - {{item2.retallyEndTime}}</text>
							</view>
							<view class="li">
								<p>数量：</p>
								<text>{{item2.goodsNumber}}</text>
							</view>
							<view class="li">
								<p>体积：</p>
								<text>{{item2.goodsVolume}}</text>
							</view>
							<view class="li">
								<p>重量：</p>
								<text>{{item2.goodsWeight}}</text>
							</view>
						</view>
					</view>
				</custom-tab-pane>
				<custom-tab-pane label="其他信息" name="c1_3">
					<view class="otherInfo">
						<p class="title">辅助作业</p>
						<view class="ul">
							<view class="li">
								<p>技术工人：</p>
								<text>{{otherList.tecNum}}</text>
							</view>
							<view class="li">
								<p>作业时间：</p>
								<text>{{otherList.tecStartTm}} - {{otherList.tecEndTm}}</text>
							</view>
							<view class="li">
								<p>重量：</p>
								<text>{{otherList.tecWeight}}</text>
							</view>
							<view class="li">
								<p>体积：</p>
								<text>{{otherList.tecVolume}}</text>
							</view>
							<view class="li">
								<p>普通工人：</p>
								<text>{{otherList.genNum}}</text>
							</view>
							<view class="li">
								<p>作业时间：</p>
								<text>{{otherList.genStartTm}} - {{otherList.genEndTm}}</text>
							</view>
							<view class="li">
								<p>重量：</p>
								<text>{{otherList.genWeight}}</text>
							</view>
							<view class="li">
								<p>体积：</p>
								<text>{{otherList.genVolume}}</text>
							</view>
							<view class="li wLi">
								<p>描述：</p>
								<text>{{otherList.auxRemark}}</text>
							</view>
						</view>
						<p class="title">待工作业</p>
						<view class="ul">
							<view class="li wLi">
								<p>描述：</p>
								<text>{{otherList.waitRemark}}</text>
							</view>
						</view>
						<p class="title">作业备注</p>
						<view class="ul">
							<view class="li wLi">
								<p>描述：</p>
								<text>{{otherList.workRemark}}</text>
							</view>
						</view>
					</view>
				</custom-tab-pane>
			</custom-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">
				<van-button type="default" @click="cancel">取消</van-button>
				<van-button type="danger" @click="del">删除</van-button>
				<van-button type="info" @click="edit('edit')">编辑</van-button>
			</view>
		</view>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	export default {
		data() {
			return {
				tabsValue: 0,
				dataInfo: [{
					spmName: "",
					importExportFlagName: "",
					tradeTypeName: ""
				}],
				shiftInfo: [],
				fcList: [],
				otherList: {},
				shiftRowIndex: 0,
				contactId: "",
			}
		},
		mounted() {
			this.dataInfo = uni.getStorageSync('shiftRow')
			this.contactId = this.dataInfo[0].contactId
			this.initData()
		},
		methods: {
			// 查
			executeSql1(tableName) {
				let sql = `select * from ${tableName} WHERE contactId = '${this.contactId}';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					if (tableName == 'workMessageRespList') {
						this.shiftInfo = []
						value.forEach(v => {
							this.executeSql2('workMessageRespInfoList', v)
						})
					} else if (tableName == 'retallyMessageRespList') {
						// console.log(value)
						let arr = []
						value.forEach(item => {
							if (!arr[item.retallyType]) {
								arr[item.retallyType] = {
									retallyType: item.retallyType,
									retallyTypeName: item.retallyTypeName,
									fcInfo: []
								};
							}
							arr[item.retallyType].fcInfo.push({
								vvyId: item.vvyId,
								vvyName: item.vvyName,
								retallyOrigin: item.retallyOrigin,
								retallyTerminus: item.retallyTerminus,
								carType: item.carType,
								carTypeName: item.carTypeName,
								datetime: [item.retallyStartTime, item.retallyEndTime],
								retallyStartTime: item.retallyStartTime,
								retallyEndTime: item.retallyEndTime,
								goodsNumber: item.goodsNumber,
								goodsVolume: item.goodsVolume,
								goodsWeight: item.goodsWeight
							});
						});
						this.fcList = Object.values(arr)
					} else if (tableName == 'infoRespList') {
						this.otherList = value[0]
					}
				}).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);
				});
			},
			initData() {
				// 获取工班信息
				this.executeSql1('workMessageRespList')
				this.executeSql1('retallyMessageRespList')
				this.executeSql1('infoRespList')
			},
			// 删除
			executeSql(tableName) {
				let sql = `DELETE FROM ${tableName} WHERE contactId = '${this.contactId}';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					console.log(value);
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 点击tabs
			changeIndex(e) {},
			// 取消
			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);
				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}`
				})
			},
			onBackPress(event) {
				uni.setStorageSync('tabsType', 1);
				uni.navigateTo({
					url: '/pages/shipWork/mixWork'
				})
				return true;
			},
		}
	}
</script>

<style lang="less" scoped>
	.shiftDetails {
		.container {
			padding: 30px 20px;
			background-color: #fff;

			.fcInfo {
				padding-bottom: 20px;
				border-bottom: 1px solid #ccc;

				.fcBox {
					display: flex;
					padding: 10px 20px;
					line-height: 35px;
					font-size: 16px;
				}
			}

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

			.ul {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.li {
					width: 50%;
					display: flex;
					padding: 10px 20px;
					line-height: 35px;
					font-size: 16px;

					p {
						min-width: 85px;
						text-align: right;
					}
				}

				.wLi {
					width: calc(100% - 150px);
				}
			}

			.bUl {
				width: 100%;
			}

			.borTop {
				border-top: 1px solid #999;
			}

			.borBtm {
				border-bottom: 1px solid #999;
			}

			.btnList {
				display: flex;
				justify-content: center;
				margin-top: 20px;

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