pad-app/pages/shipWork/brandDetails.vue

<template>
	<view class="brandDetails">
		<view class="container">
			<view class="topBox">
				<view class="searchBox">
					<uni-easyinput suffixIcon="search" v-model="searchValue" placeholder="品牌/提单号"
						@iconClick="iconClick"></uni-easyinput>
					<text @tap="screen">筛选</text>
					<fjj-condition ref='condition' @touchmove.stop :color="color" :list="menuList"
						:defaultValue="defaultValue" @result="resultConditon" />
				</view>
			</view>
			<template v-if="listInfo.length > 0">
				<view class="ul">
					<view class="li" v-for="(item,index) in listInfo" :key="index" @click="togoCar(item)">
						<p class="title">品牌：{{item.brdName}}</p>
						<p>提单号：{{item.mnfBl}}</p>
						<p>源类型：{{item.sourceType}}</p>
						<p>场位：{{item.yardPos}}</p>
						<p>航次：{{item.vvyName}}</p>
						<p>报关状态：{{item.customsDeclareStatus}}</p>
						<p>车型：{{item.bvmName}}</p>
						<p>数量：{{item.amount}}</p>
						<p>港口：{{item.potName}}</p>
						<p>报关单号：{{item.customsDeclareNo}}</p>
						<p>车型明细：{{item.bvdName}}</p>
						<p>货代：{{item.agentName}}</p>
					</view>
				</view>
			</template>
			<o-empty v-else height="70vh" bg="#fff" />
		</view>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	export default {
		data() {
			return {
				searchValue: "",
				color: '#4D7BFE',
				hasChoose: false,
				menuList: [],
				defaultValue: {},
				listInfo: []
			}
		},
		mounted() {
			this.executeSql1('shipmentShipLoadPlansRespList')
			setTimeout(() => {
				this.menuList = [{
					'title': '按港口',
					'type': 'custom',
					'key': 'custom1',
					'isMutiple': true, //多选
					'detailList': [{
						title: '港口1',
						value: "1",
						isSelected: true
					}, {
						title: '港口2',
						value: "2",
					}, {
						title: '港口3',
						value: "3",
					}, {
						title: '港口4',
						value: "4",
					}, {
						title: '港口5',
						value: "5",
					}, {
						title: '港口6',
						value: "6",
					}],
				}, {
					'title': '按车型',
					'type': 'custom',
					'key': 'custom2',
					'isMutiple': true, //多选
					'detailList': [{
						title: '车型1',
						value: "1",
					}, {
						title: '车型2',
						value: "2",
					}, {
						title: '车型3',
						value: "3",
					}, {
						title: '车型4',
						value: "4",
					}, {
						title: '车型5',
						value: "5",
					}, {
						title: '车型6',
						value: "6",
					}, {
						title: '车型7',
						value: "7",
					}],
				}, {
					'title': '按品牌',
					'type': 'custom',
					'key': 'custom3',
					'isMutiple': true, //多选
					'detailList': [{
						title: '品牌1',
						value: "1",
					}, {
						title: '品牌2',
						value: "2",
					}, {
						title: '品牌3',
						value: "3",
					}, {
						title: '品牌4',
						value: "4",
					}, {
						title: '品牌5',
						value: "5",
					}, {
						title: '品牌6',
						value: "6",
					}],
				}, {
					'title': '按型号',
					'type': 'custom',
					'key': 'custom4',
					'isMutiple': true, //多选
					'detailList': [{
						title: '型号1',
						value: "1",
					}, {
						title: '型号2',
						value: "2",
					}, {
						title: '型号3',
						value: "3",
					}, {
						title: '型号4',
						value: "4",
					}, {
						title: '型号5',
						value: "5",
					}, {
						title: '型号6',
						value: "6",
					}],
				}, {
					'title': '单选',
					'type': 'custom',
					'key': 'custom5',
					'isMutiple': false, //单选
					'detailList': [{
						title: '选项1',
						value: "1",
					}, {
						title: '选项2',
						value: "2",
					}],
				}, ]
				this.defaultValue = {
					custom1: ['1'],
					custom5: 1,
				};
			}, 2000)
		},
		methods: {
			// 查
			executeSql1(tableName) {
				let sql = `select * from ${tableName}`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.listInfo = value
					console.log(this.listInfo)
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 点击搜索右侧图标
			iconClick() {
				if (this.searchValue != "") {
					let listIndexArr = []
					let newArr = []
					this.listInfo.forEach((v, index) => {
						if (v.brdName.indexOf(this.searchValue) != -1 || v.mnfBl.indexOf(this.searchValue) != -1) {
							console.log(index)
							listIndexArr.push(index)
						}
					})
					console.log(listIndexArr)
					if (listIndexArr.length > 0) {
						listIndexArr.forEach((v, index) => {
							newArr.push(this.listInfo[v])
						})
						this.listInfo = newArr
						console.log(this.listInfo)
					}
				} else {
					this.initData()
				}
			},
			// 点击筛选
			screen() {
				this.$refs.condition.visibleDrawer = true;
			},
			resultConditon(obj) {
				this.$refs.condition.visibleDrawer = false;
				this.hasChoose = obj.hasChoose;
			},
			// 跳转车型明细
			togoCar(item) {
				uni.setStorageSync('brandRow', item);
				uni.navigateTo({
					url: `/pages/shipWork/carDetails`
				})
			},
			onBackPress(event) {
				uni.navigateTo({
					url: '/pages/shipWork/documentList'
				})
				return true;
			},
		}
	}
</script>

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

			.topBox {
				display: flex;
				justify-content: flex-end;

				.searchBox {
					width: 33%;
					display: flex;

					text {
						margin-left: 10px;
						color: #2979ff;
						line-height: 36px;
					}

					/deep/.uni-drawer__content {
						width: 500px;
					}
				}
			}

			.ul {
				padding: 20px 0;

				.li {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					border-bottom: 1px solid #ccc;


					.title {
						font-size: 16px;
						font-weight: bold;
						color: #000;
					}

					p {
						width: 22%;
						margin: 10px;
						color: rgba(0, 0, 0, .5);
					}
				}
			}
		}
	}
</style>