pad-app/pages/shipWork/mafiSign.vue

<template>
	<view class="noticeSign">
		<head-view :title="title" url="/pages/shipWork/mafi"></head-view>
		<view class="container">
			<table>
				<tbody>
					<tr>
						<td class="h-l1r1">
							<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix"></image>
						</td>
						<td class="h-l1r2">&nbsp;</td>
						<td class="h-l1r3">
							<p>上海海通国际汽车码头有限公司</p>
							<p>Shanghai HaiTong International Automotive Terminal Co.,Ltd.</p>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<p class="bh-dz">QR-7.5.1-01-11-M</p>
						</td>
					</tr>
					<tr>
						<td colspan="3" class="h-l2r1">
							<p class="name-dz">海通码头MAFI清单</p>
							<p class="ename-dz">MAFI RECEPTION LIST</p>
						</td>
					</tr>
				</tbody>
			</table>
			<table id="t-main2">
				<tbody>
					<tr>
						<td class="td1">
							<p>航次：</p>
							<p>voy No&nbsp;&nbsp;</p>
						</td>
						<td class="td2">{{shipInfo.vvyName}}</td>
						<td class="td1">
							<p>日期：</p>
							<p>Date&nbsp;&nbsp;</p>
						</td>
						<td class="td2">2023-11-11</td>
					</tr>
				</tbody>
			</table>
			<table id="t-mafi">
				<tbody>
					<tr>
						<td>NO.</td>
						<td>Equipment NO.</td>
						<td>SIZE</td>
						<td>FULL/Empty</td>
						<td>LOAD/DISC</td>
					</tr>
					<tr v-for="(item,index) in tableInfo" :key="index">
						<td>{{index + 1}}</td>
						<td>{{item.mafiBarcode}}</td>
						<td>{{item.size}}</td>
						<td>
							<text v-if="item.type == '重板'">FULL</text>
							<text v-if="item.type == '空板'">Empty</text>
						</td>
						<td>
							<text v-if="item.loaderType == '装货'">LOAD</text>
							<text v-if="item.loaderType == '卸货'">DISC</text>
						</td>
					</tr>
				</tbody>
			</table>
			<view class="sginBox">
				<view class="box">
					<p>Foreman(指导员):</p>
					<p class="sign" @click="togoSign('0')" v-if="zdySign.url == ''">点击签名</p>
					<template v-else>
						<image :src="zdySign.url" mode="widthFix"></image>
						<text class="del" @click="delSign(zdySign.id)">删除</text>
					</template>
				</view>
				<view class="box">
					<p>Capt/Chief Mate(船长/大副):</p>
					<p class="sign" @click="togoSign('1')" v-if="czSign.url == ''">点击签名</p>
					<template v-else>
						<image :src="czSign.url" mode="widthFix"></image>
						<text class="del" @click="delSign(czSign.id)">删除</text>
					</template>
				</view>
			</view>
			<uni-popup ref="delPopup" type="dialog">
				<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
					@confirm="delConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	export default {
		data() {
			return {
				title: "MAFI清单签名",
				// 船舶信息
				shipInfo: {},
				// 表内数据
				tableInfo: [],
				// 签名信息
				zdySign: {
					url: "",
					id: ""
				},
				czSign: {
					url: "",
					id: ""
				},
				delId: "",
			}
		},
		mounted() {
			this.executeSql('shipInfoTable')
		},
		methods: {
			// 查船舶信息
			executeSql(tableName) {
				let sql = `select * from ${tableName}`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.shipInfo = value[0]
					this.executeSql1('mafiListRespList')
					this.executeSql2()
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 查mafi清单信息
			executeSql1(tableName) {
				let sql =
					`select * from ${tableName} WHERE vvyId='${this.shipInfo.vvyId}' ORDER BY mafiListRespList.loaderType ASC, mafiListRespList.type DESC, mafiListRespList.size ASC`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.tableInfo = value
					console.log(this.tableInfo)
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 查单证签字表
			executeSql2() {
				let sql = `select * from workSignTable WHERE signId = '${this.shipInfo.vvyId}';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					console.log(value)
					let zdyList = []
					let czList = []
					if (value.length > 0) {
						value.forEach(v => {
							if (v.signType == '0') {
								this.zdySign = {
									url: v.url,
									id: v.webId
								}
								zdyList.push(v)
							} else {
								this.czSign = {
									url: v.url,
									id: v.webId
								}
								czList.push(v)
							}
						})
					}
					if (zdyList.length == 0) {
						this.zdySign = {
							url: "",
							id: ""
						}
					}
					if (czList.length == 0) {
						this.czSign = {
							url: "",
							id: ""
						}
					}
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 点击签名
			togoSign(signType) {
				let obj = {
					id: this.shipInfo.vvyId,
					url: "mafiSign",
					signType: signType, // 0 指导员  1 船长/大副
					signTable: "mafi",
				}
				const params = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url: `/pages/shipWork/sign?params=${params}`
				})
			},
			// 删除当前签名
			delSign(id) {
				this.$refs.delPopup.open()
				this.delId = id
			},
			// 弹框删除
			delConfirm() {
				let sql = `DELETE FROM workSignTable WHERE webId = '${this.delId}';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.executeSql2()
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	@import "../../style/css/main-dz.css";

	.container {
		padding: 10px 20px;
	}

	#t-mafi {
		border-collapse: collapse;
		border: #000000 solid 1px;
		border-spacing: 0px;
		margin-bottom: 50px;
	}

	#t-mafi td {
		border: #000000 solid 1px;
		padding: 0px 10px;
		text-align: center;
		height: 30px;
	}

	.sginBox {
		display: flex;

		.box {
			flex: 1;
			display: flex;

			image {
				width: 200px;
				height: 50px;
			}

			.del {
				color: red;
			}
		}
	}

	.sign {
		color: #2979ff;
		margin-left: 10px;
	}
</style>