pad-app/pages/index/index.vue

<template>
	<view class="app">
		<head-info></head-info>
		<view class="container">
			<side-bar path='1'></side-bar>
			<view class="content">
				<view class="form">
					<view class="end">
						<superwei-combox class="input" :candidates="portList" :isJSON="true" keyName="pamName"
							placeholder="港区" v-model="portName" @input="portInput"
							@select="portSelect"></superwei-combox>
						<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyName"
							placeholder="船名/航次" v-model="shipName" @input="shipInput"
							@select="shipSelect"></superwei-combox>
						</uni-easyinput>
						<button class="btn" @click="onSearch">搜索</button>
						<button class="btn" @click="open">打开</button>
						<button class="btn" @click="isOpenDatabase">判断</button>
						<button class="btn" @click="createTable">创建表</button>
						<button class="btn" @click="dropTable">删除表</button>
						<button class="btn" @click="insertChatRow">增</button>
						<button class="btn" @click="executeSql1">查</button>
					</view>
				</view>
				<view class="itemList">
					<view v-for="(item, index) in ltemList" :key="index" class="item" @click="toDetails(item.spmId)">
						<view class="title">
							<view class="name">
								海王星领袖
							</view>
							<view class="status">
								<text v-if="item.vvyStatus==2" class="green">● 作业中</text>
								<text v-else>● 已完成</text>
							</view>
						</view>
						<view class="table">
							<view class="row">
								<view class="nitem">
									航次: <text>735546</text>
								</view>
								<view class="nitem">
									贸易类型: <text>{{item.tradeType}}</text>
								</view>
							</view>
							<view class="row">
								<view class="nitem">
									进出口: <text>{{item.importExportFlag}}</text>
								</view>
								<view class="nitem">
									泊位: <text>{{item.actualBerthage}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import SideBar from '@/components/sider-bar/slider-bar';
	import HeadInfo from '@/components/head-info/head-info';
	import sqlite from "../../common/sqlite.js"
	import {
		mapActions
	} from 'vuex'
	let timers = null;
	export default {
		data() {
			return {
				ltemList: [],
				portName: '',
				portItem: {},
				portList: [],
				shipName: '',
				shipItem: {},
				shipList: []
			}
		},
		onLoad() {
			// this.loadList()
		},
		components: {
			SideBar,
			HeadInfo
		},
		methods: {
			...mapActions([
				'majax',
				'najax'
			]),
			open() {
				plus.sqlite.openDatabase({
					name: 'dianji_chat',
					path: '_doc/dianji_chat.db',
					success: function(e) {
						console.log('打开数据库成功')
					},
					fail: function(e) {
						console.log(e, '打开数据库失败')
					}
				});
			},
			isOpenDatabase() {
				let res = plus.sqlite.isOpenDatabase({
					name: 'dianji_chat',
					path: '_doc/dianji_chat.db',
				});
				if (res) {
					uni.showToast({
						icon: 'none',
						title: '数据库已打开'
					});
					return;
				} else {
					uni.showToast({
						icon: 'none',
						title: '数据库未打开'
					});
					return;
				}
			},
			createTable() {
				console.log('创建表');
				let sql =
					'CREATE TABLE if not exists cesTable ( "id" varchar(32) NOT NULL,"content" varchar(1024),"fromId" varchar(32), "toId" varchar(32), "flag" varchar(2), PRIMARY KEY ("id"));'
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					console.log(value); // 输出：Hello, World!
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			dropTable() {
				console.log('删除表');
				let sql = 'DROP TABLE cesTable;'
				plus.sqlite.executeSql({
					name: 'dianji_chat',
					sql: sql,
					success: function(e) {
						console.log("删除数据表成功");
					},
					fail: function(e) {
						console.log('executeSql failed: ' + JSON.stringify(e));
					}
				})
			},
			insertChatRow() {
				let data = {
					id: 1,
					fromId: '123',
					toId: '321',
					content: 'bihao1',
					flag: 1
				}
				data.id = Math.floor(Math.random() * 100);
				let dbTable = 'cesTable'
				// let sql = "insert into " + this.dbTable + " values('" + data.id + "','" + data.content +
				// 	"','" + data.fromId + "','" + data.toId + "'," + data.flag + ")";
				let sql = "insert into " + dbTable + " values('" + data.id + "','" +
					data.content + "','" + data.fromId + "','" + data.toId + "','" + data.flag + "')";
				this.executeSql(sql)
			},
			// 查
			executeSql(sql) {
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					// this.sqlData = value
					console.log(value); // 输出：Hello, World!
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			executeSql1() {
				let sql = 'select * from cesTable'
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					// this.sqlData = value
					console.log(value); // 输出：Hello, World!
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			portInput(e) {
				clearTimeout(timers)
				timers = setTimeout(() => {
					this.getPort(e)
				}, 500)
			},
			portSelect(e) {
				this.portItem = e
				this.shipName = ''
				this.shipItem = {}
			},
			// 获取港口
			getPort(keyWords) {
				let data = {}
				data.pamName = keyWords
				this.majax({
					url: this.$local + "/api/miniapp/portAreaManage/getPortArea",
					params: data,
					method: 'GET'
				}).then(res => {
					this.portList = res.data
				})
				// 模拟
				this.portList = [{
					potId: 1123,
					pamName: '测试港口'
				}]
			},
			shipInput(e) {
				clearTimeout(timers)
				timers = setTimeout(() => {
					this.getShip(e)
				}, 500)
			},
			shipSelect(e) {
				this.shipItem = e
			},
			// 获取船舶
			getShip(keyWords) {
				console.log(this.portName);
				let data = {}
				data.ieType = 'I' // I进口 E出口 暂无法区分
				data.key = keyWords
				data.pamId = this.portItem.pamId
				this.majax({
					url: this.$local + "/api/shipInstructions/queryByKey",
					params: data,
					method: 'GET'
				}).then(res => {
					this.shipList = res.data
				})
				// 模拟
				this.shipList = [{
					vvyId: 1123,
					vvyName: '测试航次'
				}]
			},
			onSearch() {
				let data = {}
				data.tradeType = '外贸' // I进口 E出口 暂无法区分
				data.vvyId = this.shipItem.vvyId
				data.pamId = this.portItem.pamId
				this.majax({
					url: this.$local + "/api/shipInstructions/queryStowageVoyages",
					params: data,
					method: 'GET'
				}).then(res => {
					this.ltemList = res.data.records
				})
				// 模拟
				this.ltemList = [{
					actualBerthage: "一号位置",
					actualBerthageDesc: "",
					importExportFlag: "出口",
					spmId: "spm1112",
					spmIdDesc: "331122",
					tradeType: "内贸",
					vvyId: "11231",
					vvyName: "海王星领袖",
					vvyStatus: "2",
					vvyStatusName: "作业中",
				}]
			},

			toDetails(id) {
				uni.navigateTo({
					url: '/pages/index/instruct?id=' + id
				})
			},
		}
	};
</script>

<style lang="less">
	.container {
		display: flex;
	}

	.content {
		flex: 1;
		padding: 20px;

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

			.end {
				width: 500px;
				display: flex;
				justify-content: space-between;

				.input {
					width: 200px;
					height: 35px;
					line-height: 35px;
					padding-left: 10px;
					margin-left: 15px;
				}

				.btn {
					height: 35px;
					line-height: 35px;
					margin-left: 20px;
				}
			}

		}

		.itemList {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.item {
				width: 32%;
				margin-top: 15px;
				margin-right: 2%;
				height: 160px;
				border: 1px solid #c9cacb;
				padding: 22px 15px;

				.title {
					display: flex;
					justify-content: space-between;
					font-size: 21px;
					margin-bottom: 20px;
					font-weight: 700;
				}

				.status {
					font-size: 16px;
					font-weight: 400;
				}


				.row {
					display: flex;
					justify-content: space-between;
					font-size: 18px;
					margin: 10px 0;

					.nitem {
						width: 46%;

						text {
							color: #929292;
						}
					}

				}
			}

			.item:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
</style>