pad-app/pages/shipWork/documentList.vue

<template>
	<view class="documentList">
		<view class="container">
			<p class="title">作业单证</p>
			<view class="ul">
				<view class="li" v-for="(item,index) in infoList" :key="index" @click="toGo(item.url)">
					<view class="round"></view>
					<p>{{item.name}}</p]>
				</view>
			</view>
			<p class="title">其他作业</p>
			<view class="ul">
				<view class="li" v-for="(item,index) in otherListh" :key="index" @click="toGo(item.url)">
					<view class="round"></view>
					<p>{{item.name}}</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	export default {
		data() {
			return {
				infoList: [{
						name: "杂项作业单",
						url: "mixWork"
					},
					{
						name: "系解缆",
						url: "untieCord"
					},
					{
						name: "供给",
						url: "supply"
					},
					{
						name: "指导员作业布置",
						url: "workAssign"
					},
					{
						name: "船舶装卸通知单",
						url: "notice"
					},
					{
						name: "质量意见征询",
						url: "opinion"
					},
					{
						name: "异常情况",
						url: "abnormal"
					},
					{
						name: "MAFI清单",
						url: "mafi"
					}
				],
				otherListh: [{
						name: "安全巡检",
						url: "patrol"
					},
					{
						name: "船舶资料",
						url: "shipInfo"
					},
					{
						name: "船舶计划",
						url: "shipPlan"
					},
					{
						name: "作业查询",
						url: "brandDetails"
					}
				],
			}
		},
		mounted() {
			this.executeSql1('shipOption')
		},
		methods: {
			// 查
			executeSql1(tableName) {
				let sql = `select * from ${tableName}`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					console.log(value)
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			toGo(url) {
				uni.navigateTo({
					url: `/pages/shipWork/${url}`
				})
			},
			onBackPress(event) {
				uni.navigateTo({
					url: '/pages/shipWork/index'
				})
				return true;
			},
		}
	}
</script>

<style lang="less" scoped>
	.documentList {
		.container {
			padding: 30px 20px;

			.title {
				font-size: 20px;
				font-weight: bold;
			}

			.ul {
				display: flex;
				flex-wrap: wrap;
				padding: 20px;
				margin-bottom: 20px;

				.li {
					margin: 10px 20px;

					.round {
						width: 80px;
						height: 80px;
						background: #ccc;
						border-radius: 50%;
						margin: 10px auto;
					}

					p {
						text-align: center;
						font-size: 16px;
						margin-top: 10px;
					}
				}
			}
		}
	}
</style>