pad-app/components/head-view/head-view.vue

<template>
	<view class="headInfo">
		<view>
			<uni-icons class="icon" type="back" size="16" @click="toBack" />
			<text @click="tabsPort('center')">{{title}}</text>
			<uni-icons class="bottom" type="bottom" size="18" v-if="type" />
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popupBox">
				<view class="popupTitle">
					请选择船只
				</view>
				<view class="ul">
					<view class="li" v-for="(item,index) in shipList" :key="index"
						:class="{active:activeIndex == index}" @click="selectPort(item,index)">
						<text>{{item.shipName}} 进口航次：{{item.inVvyName}} / 出口航次：{{item.outVvyName}}</text>
					</view>
				</view>
				<view class="btnBox">
					<button class="btn" type="primary" @click="toGo">确 定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	export default {
		name: "headView",
		props: {
			title: {
				type: String
			},
			type: {
				type: Boolean,
				default: () => false
			},
			special: {
				type: String,
				default: () => ""
			},
			url: {
				type: String,
				default: () => ""
			},
		},
		data() {
			return {
				shipList: [],
				activeIndex: 0,
				vtpId: "",
				inVvyId: "",
				inVvyName: "",
				outVvyId: "",
				outVvyName: "",
				shipName: "",
			}
		},
		mounted() {
			this.vtpId = uni.getStorageSync('vtpId')
			this.executeSql1("voyageScheduleDataDetailRespDTOList")
			let that = this
			setTimeout(function() {
				that.shipList.forEach((v, index) => {
					if (v.vtpId == that.vtpId) {
						that.activeIndex = index
					}
				})
			}, 100)
		},
		methods: {
			// 船只
			tabsPort(type) {
				if (this.type) {
					this.$refs.popup.open(type)
					this.vtpId = this.shipList[0].vtpId
					this.shipName = this.shipList[0].shipName
					this.inVvyId = this.shipList[0].inVvyId
					this.inVvyName = this.shipList[0].inVvyName
					this.outVvyId = this.shipList[0].outVvyId
					this.outVvyName = this.shipList[0].outVvyName
				}
			},
			// 选择弹框内容
			selectPort(item, index) {
				this.activeIndex = index
				this.vtpId = item.vtpId
				this.shipName = item.shipName
				this.inVvyId = item.inVvyId
				this.inVvyName = item.inVvyName
				this.outVvyId = item.outVvyId
				this.outVvyName = item.outVvyName
			},
			// 点击确认
			toGo() {
				uni.setStorageSync('vtpId', this.vtpId)
				this.$refs.popup.close()
				this.title = `${this.shipName} 进口航次：${this.inVvyName} / 出口航次：${this.outVvyName}`
				uni.setStorageSync('shipWorkTitle', this.title)
				this.$emit("isPreview", this.title)
			},
			// 查
			executeSql(sql) {
				sqlite.executeSqlCeshi(sql).then((value) => {
					value.forEach(v => {
						this.inVvyId = ""
						this.inVvyName = ""
						this.outVvyId = ""
						this.outVvyName = ""
						if (v.importExportFlagName == '出口') {
							this.outVvyId = v.vvyId
							this.outVvyName = v.vvyName
						} else {
							this.inVvyId = v.vvyId
							this.inVvyName = v.vvyName
						}
						let obj = {
							inVvyId: this.inVvyId,
							inVvyName: this.inVvyName,
							outVvyId: this.outVvyId,
							outVvyName: this.outVvyName,
							shipName: v.spmName,
							vtpId: v.vtpId
						}
						this.shipList.unshift(obj)
					})
					const array = this.shipList
					const mergedArray = array.reduce((accumulator, currentValue) => {
						const existingValue = accumulator.find(item => item.vtpId === currentValue.vtpId);
						if (existingValue) {
							// 如果找到了具有相同 vtpId 的元素，则合并它们的值
							if (existingValue.inVvyId == "") {
								existingValue.inVvyId = currentValue.inVvyId;
							}
							if (existingValue.inVvyName == "") {
								existingValue.inVvyName = currentValue.inVvyName;
							}
							if (existingValue.outVvyId == "") {
								existingValue.outVvyId = currentValue.outVvyId;
							}
							if (existingValue.outVvyName == "") {
								existingValue.outVvyName = currentValue.outVvyName;
							}
						} else {
							// 如果没有找到具有相同 vtpId 的元素，则将当前元素添加到 accumulator 中
							accumulator.push(currentValue);
						}
						return accumulator;
					}, []);
					this.shipList = mergedArray
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			executeSql1(tableName) {
				let sql = `select * from ${tableName}`
				this.executeSql(sql)
			},
			toBack() {
				if (this.url != "") {
					uni.redirectTo({
						url: `${this.url}`
					})
				} else {
					uni.navigateBack('-1')
				}
				if (this.special == 1) {
					uni.setStorageSync('tabsType', 0);
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.headInfo {
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		height: 68px;
		line-height: 68px;
		font-size: 20px;
		color: #23262E;
		text-align: center;
		font-weight: bold;
		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
		z-index: 997;

		.icon {
			position: absolute;
			left: 30px;
		}

		.bottom {
			margin-left: 6px;
		}

		/deep/.uni-popup .uni-popup__wrapper {
			border-radius: 8px;
		}

		.popupBox {
			min-width: 500px;

			.popupTitle {
				width: 100%;
				height: 48px;
				line-height: 48px;
				text-align: center;
				font-size: 18px;
				color: #23262E;
				border-bottom: 1px solid #eee;
			}

			.ul {
				padding: 30px;
				max-height: 310px;
				overflow: scroll;

				.li {
					height: 46px;
					line-height: 46px;
					text-align: center;
					border: 1px solid #e7e7e7;
					margin-bottom: 10px;
					font-size: 14px;
					border-radius: 4px;
				}

				.active {
					color: #0079fe;
					border-color: #0079fe;
				}
			}

			.btnBox {
				height: 46px;
				display: flex;
				justify-content: center;
				box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
				border-radius: 0 0 16px 16px;

				.btn {
					width: 170px;
					font-size: 16px;
					padding: 10px;
					margin: 5px;
					height: 36px;
					line-height: 18px;
					background-color: #fff;
					border: 1px solid rgba(0, 0, 0, .1);
				}

				.btn:last-child {
					color: #fff;
					background-color: #0067CF;
				}
			}
		}
	}
</style>