pad-app/pages/shipWork/supplySign.vue

<template>
	<view class="supplySign">
		<head-view :title="title" url="/pages/shipWork/supply"></head-view>
		<view class="contentFixed">
			<custom-tabs type="c1" :value="tabsValue" @change="tabsChange">
				<custom-tab-pane :label="item.name" v-for="(item,index) in tabsList" :name="'c1_'+index" :key="index">
					<view></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">供给作业单</p>
										<p class="ename-dz">FRESH WTAER SUPPLIED EX WHARF</p>
									</td>
								</tr>
							</tbody>
						</table>
						<table id="t-main2">
							<tbody>
								<tr>
									<td class="td1">
										<p>船名：</p>
										<p>Name of Ship&nbsp;&nbsp;</p>
									</td>
									<td class="td2">{{shipInfo.vslCnname}}</td>
									<td class="td1">
										<p>{{tableInfo.supplyType}}</p>
										<p>Fresh Supply</p>
									</td>
									<td class="td2">{{tableInfo.supplyAmount}}</td>
									<td class="td3">
										<p>吨</p>
										<p>Tons</p>
									</td>
								</tr>
								<tr>
									<td colspan="6" class="tr0">&nbsp;</td>
								</tr>
								<tr>
									<td class="td1">
										<p>航次：</p>
										<p>voy No&nbsp;&nbsp;</p>
									</td>
									<td class="td2">{{tableInfo.vvyName}}</td>
									<td class="td1">
										<p>泊位：</p>
										<p>Berth&nbsp;&nbsp;</p>
									</td>
									<td class="td2">{{tableInfo.stopBerthageName}}</td>
									<td class="td1">
										<p>日期：</p>
										<p>Date&nbsp;&nbsp;</p>
									</td>
									<td class="td2">{{tableInfo.supplyDate}}</td>
								</tr>
							</tbody>
						</table>
						<view class="sginBox">
							<view class="box">
								<p>Capt/Chief Mate(船长/大副):</p>
								<p class="sign" @click="togoSign('1')" v-if="czSign.signFile == ''">点击签名</p>
								<template v-else>
									<image :src="czSign.signFile" mode="widthFix"></image>
									<!-- <text class="del" @click="delSign(czSign.webId)">删除</text> -->
								</template>
							</view>
						</view>
					</view>
				</custom-tab-pane>
			</custom-tabs>
		</view>
		<uni-popup ref="delPopup" type="dialog">
			<uni-popup-dialog type="error" confirmText="确定" title="通知" content="是否删除此条数据"
				@confirm="delConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	export default {
		data() {
			return {
				title: "供给签名",
				tabsValue: 0,
				tabsList: [],
				// 船舶信息
				shipInfo: {},
				// 表内数据
				tableInfo: [],
				// 签名信息
				czSign: {},
				delId: "",
				vtpId: "",
			}
		},
		onLoad(option) {
			if ('params' in option) {
				this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
			}
		},
		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('shipmentShipSupplyRespList', this.tabsValue)
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 查供给信息
			executeSql1(tableName, tabsValue) {
				let sql = `select * from ${tableName} WHERE vtpId='${this.vtpId}'`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.tabsList = []
					this.tableInfo = value[tabsValue]
					value.forEach((v, index) => {
						let obj = {
							name: `供水${index + 1}`,
						}
						this.tabsList.push(obj)
					})
					this.executeSql2()
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 查单证签字表
			executeSql2() {
				let sql = `select * from workSignTable WHERE bizId = '${this.tableInfo.sssId}';`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					if (value.length > 0) {
						this.czSign = value[0]
					} else {
						this.czSign = {
							signFile: ""
						}
					}
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 标签切换
			tabsChange(e) {
				this.tabsValue = e.value
				this.executeSql1('shipmentShipSupplyRespList', e.value)
			},
			// 点击签名
			togoSign(signType) {
				let obj = {
					id: this.tableInfo.sssId,
					url: "supplySign",
					signType: Number(signType), // 0 指导员  1 船长/大副
					signTable: "7",
					tabsValue: this.tabsValue,
					vvyId: this.tableInfo.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;
	}

	.sginBox {
		width: 100%;
		display: flex;
		justify-content: flex-end;

		.box {
			display: flex;
			margin-right: 80px;

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

			.del {
				color: red;
			}
		}

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