pad-app/pages/shipWork/noticeSign.vue

<template>
	<view class="noticeSign">
		<head-view :title="title" url="/pages/shipWork/notice"></head-view>
		<view class="container contentFixed">
			<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">海通码头船舶装/卸货通知单</p>
							<p class="ename-dz">Vessel Operation Notic</p>
						</td>
					</tr>
				</tbody>
			</table>
			<table id="t-xjl">
				<tbody>
					<tr>
						<td class="td1">船名(M/V):</td>
						<td class="td2">{{shipInfo.vslCnname}}</td>
						<td class="td1">航次(Voy):</td>
						<td class="td2">{{vvyName}}</td>
						<td class="td1">日期Date:</td>
						<td class="td2">{{date}}</td>
					</tr>
				</tbody>
			</table>
			<table id="t-main">
				<tbody>
					<tr>
						<td class="td1h">检查项目(Check List)</td>
						<td class="td2">YES</td>
						<td class="td3">NO</td>
					</tr>
					<tr>
						<td class="td1">
							<p> 1.Was the effective cushion put under ramp?</p>
							<p>有效衬垫物已放在跳板下？</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</td>
					</tr>
					<tr>
						<td class="td1">
							<p> 2.The ship's height and with of deck、slope、passage、route way ete.should be
								accorded with
								the loading/unloading?</p>
							<p>船舶装卸货物的甲板高度、宽度、通道等入口应当符合此次装/卸货物的安全要求？</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</td>
					</tr>
					<tr>
						<td class="td1">
							<p> 3.Has the following equipments been propared and checked?</p>
							<p>下列设备已备好并检查？</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</td>
					</tr>
					<tr>
						<td class="td1">
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1）Ship's ramp,including
								stem-ramp、side-ramp、and
								inner-ramp.</p>
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;船舶所有跳板处于有效、可用的工作状态</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</td>
					</tr>
					<tr>
						<td class="td1">
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2）The deck of loaded cargo has been using in
								condition.</p>
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;装卸货的甲板处于良好、可用的状态</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</td>
					</tr>
					<tr>
						<td class="td1">
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3）All of the rout way is clear and effective
								in
								loaded cargo deck.</p>
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所有通道保持有效的畅通</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</td>
					</tr>
					<tr>
						<td class="td1">
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4）Ventilation equipment are guarantced and
								keep
								ready.</p>
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;通风设备已经开启并且设备良好</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</td>
					</tr>
					<tr>
						<td class="td1">
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5）The illuminative equipment are in good
								condition.
							</p>
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;创仓内照明设备良好</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</td>
					</tr>
					<tr>
						<td class="td1">
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6）Claspers、chain、cloth mat、rubber mat and
								wooden
								place are enough and effective.</p>
							<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;绑扎帯、绑扎链条等绑扎材料、垫衬和垫料是足够且可用</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</td>
					</tr>
					<tr>
						<td class="td1">
							<p>4.Are the safe working load of stern ramp/side ramp safety and effective for this
								cargo
								operation.</p>
							<p>尾跳和中跳的安全符合此次的装货的要求</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</td>
					</tr>
					<tr>
						<td class="td1">
							<p>5.Pay attention to stevedores working area.</p>
							<p>船员在工人作业区域要高度注意安全</p>
						</td>
						<td class="td2">
							<radio :checked="true" :disabled="true" />
						</td>
						<td class="td3">
							<radio :checked="false" :disabled="true" />
						</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>Signature of Duty manger(值班经理签名):</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: "装卸货通知单签名",
				// 船舶信息
				shipInfo: {},
				// 签名信息
				zdySign: {
					url: "",
					id: ""
				},
				czSign: {
					url: "",
					id: ""
				},
				delId: "",

				vvyId: "",
				vvyName: "",
				date: "",
				vtpId: "",
			}
		},
		mounted() {
			this.vtpId = uni.getStorageSync('vtpId')
			this.executeSql('shipInfoTable')
		},
		methods: {
			// 查船舶信息
			executeSql(tableName) {
				let sql = `select * from ${tableName} WHERE vtpId = '${this.vtpId}'`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.shipInfo = value[0]
					this.executeSql1('shipmentLoadUnloadNoticeRespList')
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 查通知单信息
			executeSql1(tableName) {
				let sql =
					`select * from ${tableName} WHERE vtpId='${this.vtpId}'`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.tableInfo = value
					this.vvyId = value[0].vvyId
					this.vvyName = value[0].vvyName
					this.date = value[0].workDate
					this.executeSql2()
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 查单证签字表
			executeSql2() {
				let that = this
				let sql = `select * from workSignTable WHERE bizId = '${that.vvyId}' and bizType = '5';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					let zdyList = []
					let czList = []
					if (value.length > 0) {
						value.forEach(v => {
							if (v.sort == '0') {
								this.zdySign = {
									url: v.signFile,
									id: v.webId
								}
								zdyList.push(v)
							} else {
								this.czSign = {
									url: v.signFile,
									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.vvyId,
					url: "noticeSign",
					signType: Number(signType), // 0 指导员  1 船长/大副
					signTable: "5",
					vvyId: this.vvyId,
				}
				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: 0px 20px;
	}

	#t-xjl {
		margin-bottom: 50px;
	}

	#t-xjl .td1 {
		width: 150px;
		text-align: right;
	}

	#t-xjl .td2 {
		text-align: left;
		border-bottom: #000000 solid 1px;
	}

	#t-main {
		border-collapse: collapse;
		border: #000000 solid 1px;
		border-spacing: 0px;
	}

	#t-main td {
		border: #000000 solid 1px;
		padding: 0px 10px;
	}

	#t-main .td1 {
		width: 1200px;
		height: 80px;
		vertical-align: top;
	}

	#t-main .td2 {
		width: 200px;
		text-align: center;
	}

	#t-main .td3 {
		width: 200px;
		text-align: center;
	}

	#t-main .td1h {
		text-align: center;
		height: 50px;
	}

	.sginBox {
		display: flex;

		.box {
			flex: 1;
			display: flex;

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

			.del {
				color: red;
			}
		}
	}

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