pad-app/pages/shipWork/mafiSign.vue

431 lines
9.0 KiB
Vue

<template>
<view class="noticeSign">
<head-view :title="title" url="/pages/shipWork/mafi"></head-view>
<view class="contentFixed">
<view style="padding: 16px; padding-bottom: 0;">
<view class="container">
<view class="head">
<view class="leftHead">
<image id="HT-logo" src="../../static/images/theme/logo.png" mode="widthFix">
</view>
<view class="rightHead">
<p>上海海通国际汽车码头有限公司</p>
<text>SHANGHAI HAITONG INTERNATIONAL AUTOMOTIVE TERMINAL CO. LTD.</text>
</view>
</view>
<view class="headTItle">
<view class="titleLeft"></view>
<view class="title">
<p>海通码头MAFI清单</p>
<text>MAFI RECEPTION LIST</text>
</view>
<view class="titleRight">
<view>
<text>编号/N0:</text>
<text>QR-7.5.1-01-05-M</text>
</view>
</view>
</view>
<view class="ul">
<view class="li">
<p>船名/Name of Ship:</p>
<p>{{shipInfo.vslCnname}}</p>
</view>
<view class="li">
<p>航次/voy No:</p>
<p>{{vvyName}}</p>
</view>
<view class="li">
<p>日期/Date:</p>
<p>{{workDate}}</p>
</view>
</view>
<table id="t-mafi">
<tbody>
<tr class="headTable">
<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'">FULL</text>
<text v-if="item.type == 'EMPTY'">EMPTY</text>
</td>
<td>
<text v-if="item.loaderTypeId == 'LOAD'">LOAD</text>
<text v-if="item.loaderTypeId == 'DISC'">DISC</text>
</td>
</tr>
</tbody>
</table>
</view>
<view class="signBox">
<view class="signContent">
<view class="signTitle">
<p>单船指导员签名:</p>
<p>Signature of Foreman:</p>
</view>
<view class="signInfo" v-if="zdySign.url == ''" @click="togoSign('0')">
去签名
</view>
<view class="signImg" v-else>
<image :src="zdySign.url"></image>
</view>
</view>
<view class="row"></view>
<view class="signContent">
<view class="signTitle">
<p>船长/大副:</p>
<p>Capt/Chief Mate:</p>
</view>
<view class="signInfo" v-if="czSign.url == ''" @click="togoSign('1')">
去签名
</view>
<view class="signImg" v-else>
<image :src="czSign.url"></image>
</view>
</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>
</view>
</template>
<script>
import sqlite from "../../common/sqlite.js"
export default {
data() {
return {
title: "MAFI清单签名",
// 船舶信息
shipInfo: {},
// 表内数据
tableInfo: [],
// 签名信息
zdySign: {
url: "",
id: ""
},
czSign: {
url: "",
id: ""
},
delId: "",
vtpId: "",
vvyId: "",
vvyName: "",
workDate: "",
}
},
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('mafiListRespList')
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 查mafi清单信息
executeSql1(tableName) {
let sql =
`select * from ${tableName} WHERE vtpId='${this.vtpId}' ORDER BY mafiListRespList.loadType ASC, mafiListRespList.type DESC, mafiListRespList.size ASC`
sqlite.executeSqlCeshi(sql).then((value) => {
// 在resolve时执行的回调函数
this.tableInfo = value
this.vvyId = this.tableInfo[0].vvyId
this.executeSql2(this.vvyId)
this.vvyName = this.tableInfo[0].vvyName
this.workDate = this.tableInfo[0].workDate
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 查单证签字表
executeSql2(vvyId) {
let sql = `select * from workSignTable WHERE vtpId = '${this.vtpId}' and bizType = '9';`
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: "mafiSign",
signType: Number(signType), // 0 指导员 1 船长/大副
signTable: "9",
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(this.vvyId)
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
}
}
</script>
<style lang="less" scoped>
@import "../../style/css/main-dz.css";
#t-mafi {
border-collapse: collapse;
tr:nth-of-type(2n - 1) {
background: #FAFAFA;
border: 1px solid #EEEEEE;
}
.headTable {
background-color: #E9E9E9 !important;
border: none !important;
}
}
#t-mafi td {
padding: 0px 10px;
text-align: center;
height: 36px;
}
.container {
padding: 0px 16px;
background: #FFFFFF;
border-radius: 8px;
.head {
height: 85px;
padding: 16px 0;
margin: 0 8px;
border-bottom: 1px solid #999;
display: flex;
justify-content: space-between;
.rightHead {
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
p {
font-size: 22px;
color: #0052A4;
font-weight: bold;
}
text {
font-size: 14px;
color: #666666;
}
}
}
.headTItle {
display: flex;
justify-content: space-around;
padding: 36px 0;
margin: 0 8px;
border-bottom: 1px solid #EEEEEE;
.title {
flex: 3;
text-align: center;
p {
font-size: 24px;
color: #23262E;
font-weight: bold;
}
text {
font-size: 18px;
color: #23262E;
}
}
.titleLeft {
flex: 1;
}
.titleRight {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
text:first-child {
font-size: 14px;
color: #666666;
}
text:last-child {
font-size: 18px;
color: #0052A4;
font-weight: bold;
}
}
}
.ul {
display: flex;
flex-wrap: wrap;
padding: 16px 0;
.li {
min-width: 33%;
display: flex;
justify-content: center;
p {
display: flex;
flex-direction: column;
justify-content: center;
}
p:last-child {
color: #23262E;
font-weight: bold;
font-size: 14px;
margin-left: 8px;
margin-top: 2px;
}
}
}
.textContent {
padding: 24px 0;
border-top: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
font-size: 16px;
color: #23262E;
line-height: 24px;
margin-top: 10px;
.text {
margin-bottom: 10px;
}
}
}
.signBox {
width: 100%;
height: 66px;
background: #FFFFFF;
border: 1px solid #E1E5ED;
box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.05);
display: flex;
justify-content: flex-end;
padding: 0 70px;
.row {
width: 1px;
height: 30px;
background-color: #ccc;
margin-top: 18px;
}
.signContent {
display: flex;
margin: 0 54px;
.signTitle {
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
}
.signInfo {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 18px;
color: #0052A4;
margin-left: 16px;
}
.signImg {
width: 100px;
height: 54px;
margin-top: 5px;
margin-left: 10px;
}
}
.signContent:last-child {
margin-right: 0;
}
}
</style>