pad-app/pages/shipWork/opinionSign.vue

741 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="opinionSign">
<head-view :title="title" url="/pages/shipWork/opinion"></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">
</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">Form Seeking Advice On The Quality Of Vessel
Loading/Discharge
</p>
</td>
</tr>
</tbody>
</table>
<table id="t-xjl">
<tbody>
<tr>
<td class="td1">泊位(Berth No):</td>
<td class="td2">{{tableInfo.bthIdName}}</td>
<td class="td1">日期Date:</td>
<td class="td2">{{tableInfo.operationDate}}</td>
</tr>
</tbody>
</table>
<table class="t-zx">
<tbody>
<tr>
<td class="n-chuanming">船名(Name Of vessel)</td>
<td class="n-hangci">航次(Voyage No.)</td>
<td class="n-shuliang">备件数量</td>
</tr>
<tr>
<td class="v-chuanming">{{shipInfo.vslCnname}}</td>
<td class="v-hangci">{{tableInfo.vvyName}}</td>
<td class="v-shuliang">
<p>{{tableInfo.spareNumber}}</p>
</td>
</tr>
<tr class="td-ac">
<td colspan="3">
<p>Following Blanks are to Be Filled in by the carrier</p>
<p>(以下请船方填写)</p>
</td>
</tr>
<tr class="td-ac">
<td colspan="3">
<p>1.Did our terminal operation meet the requiremants of the carrier?</p>
<p>(港方按照船方实施装/)</p>
<radio-group @change="radioChange" class="radioBox">
<label class="radioinfo" v-for="(item, index) in items" :key="item.value">
<p>{{item.name}}</p>
<view>
<radio :value="item.value" :checked="index === current"
:disabled="item.disabled" />
</view>
</label>
</radio-group>
</td>
</tr>
<tr class="td-ac">
<td colspan="3">
<p>2.Did the vehicle travel following the linited speed in cargo hold?</p>
<p>(船舱内按照规定速度行驶?)</p>
<radio-group @change="radioChange2" class="radioBox">
<label class="radioinfo" v-for="(item, index) in items2" :key="item.value">
<p>{{item.name}}</p>
<view>
<radio :value="item.value" :checked="index === current2"
:disabled="item.disabled" />
</view>
</label>
</radio-group>
</td>
</tr>
<tr class="td-ac">
<td colspan="3">
<p>3.Not founded The roughly opertions?</p>
<p>(无野蛮作业?)</p>
<radio-group @change="radioChange3" class="radioBox">
<label class="radioinfo" v-for="(item, index) in items3" :key="item.value">
<p>{{item.name}}</p>
<view>
<radio :value="item.value" :checked="index === current3"
:disabled="item.disabled" />
</view>
</label>
</radio-group>
</td>
</tr>
<tr class="td-ac">
<td colspan="3">
<p>4.Did the Terminal Cooperated other requirmants of Carrier?</p>
<p>(积极配合船方的其他要求?)</p>
<radio-group @change="radioChange4" class="radioBox">
<label class="radioinfo" v-for="(item, index) in items4" :key="item.value">
<p>{{item.name}}</p>
<view>
<radio :value="item.value" :checked="index === current4"
:disabled="item.disabled" />
</view>
</label>
</radio-group>
</td>
</tr>
<tr>
<td class="td-ac" colspan="3">
<p>POINT SCORING: -1 poor -2 below average -3 average -4 good -5 excellent</p>
</td>
</tr>
<tr>
<td colspan="3">
<p>Other coments:</p>
<p>(其他意见)</p>
<uni-easyinput type="textarea" autoHeight v-model="remake" placeholder="请输入内容"
:disabled="remakeDisabled" disableColor="#fff"></uni-easyinput>
</td>
</tr>
</tbody>
</table>
<view class="sginBox">
<view class="box">
<p>Captain/Chief Officer(船方签章):</p>
<!-- <view class="boxtText">
<p>船方签章:</p>
<p>Captain/Chief Officer:</p>
</view> -->
<p class="sign" @click="togoSign('2')" v-if="cfSign.url == ''">点击签名</p>
<template v-else>
<image :src="cfSign.url"></image>
<text class="del" @click="delSign(cfSign.id)">删除</text>
</template>
</view>
<view class="box">
<!-- <view class="boxtText">
<p>单船指导员签名:</p>
<p>Signature of Foreman:</p>
</view> -->
<p>Signature of Foreman(单船指导员签名):</p>
<p class="sign" @click="togoSign('0')" v-if="zdySign.url == ''">点击签名</p>
<template v-else>
<image :src="zdySign.url"></image>
<text class="del" @click="delSign(zdySign.id)">删除</text>
</template>
</view>
<view class="box">
<!-- <view class="boxtText">
<p>值班经理签名:</p>
<p>Signature of Duty manger:</p>
</view> -->
<p>Signature of Duty manger(值班经理签名):</p>
<p class="sign" @click="togoSign('1')" v-if="czSign.url == ''">点击签名</p>
<template v-else>
<image :src="czSign.url"></image>
<text class="del" @click="delSign(czSign.id)">删除</text>
</template>
</view>
</view>
<table>
<tbody>
<tr>
<td>
<p>地址(Address):上海浦东港建路1919号1919 GangJian Road,PuDong ShangHai</p>
<p>电话(Tel):203009604&68685186</p>
</td>
</tr>
</tbody>
</table>
</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"
import api from "../../common/api.js"
import {
v4 as uuidv4
} from 'uuid';
export default {
data() {
return {
title: "质量意见征询签名",
tabsValue: 0,
tabsList: [],
// 船舶信息
vvyId: "",
shipInfo: {},
// 表内数据
tableInfo: [],
// 签名信息
zdySign: {
url: "",
id: ""
},
czSign: {
url: "",
id: ""
},
cfSign: {
url: "",
id: ""
},
delId: "",
// 单选框数据
items: [{
value: '1',
name: '1',
disabled: false,
},
{
value: '2',
name: '2',
disabled: false,
},
{
value: '3',
name: '3',
disabled: false,
},
{
value: '4',
name: '4',
disabled: false,
},
{
value: '5',
name: '5',
disabled: false,
},
],
current: 0,
evaluate: "1",
items2: [{
value: '1',
name: '1',
disabled: false,
},
{
value: '2',
name: '2',
disabled: false,
},
{
value: '3',
name: '3',
disabled: false,
},
{
value: '4',
name: '4',
disabled: false,
},
{
value: '5',
name: '5',
disabled: false,
},
],
current2: 0,
evaluate2: "1",
items3: [{
value: '1',
name: '1',
disabled: false,
},
{
value: '2',
name: '2',
disabled: false,
},
{
value: '3',
name: '3',
disabled: false,
},
{
value: '4',
name: '4',
disabled: false,
},
{
value: '5',
name: '5',
disabled: false,
},
],
current3: 0,
evaluate3: "1",
items4: [{
value: '1',
name: '1',
disabled: false,
},
{
value: '2',
name: '2',
disabled: false,
},
{
value: '3',
name: '3',
disabled: false,
},
{
value: '4',
name: '4',
disabled: false,
},
{
value: '5',
name: '5',
disabled: false,
},
],
current4: 0,
evaluate4: "1",
evaluateList: [],
// 其他意见
remake: "",
vtpId: "",
remakeDisabled: false,
// 是否签字提交
isSgin: false,
}
},
onLoad(option) {
if ('params' in option) {
this.tabsValue = JSON.parse(decodeURIComponent(option.params)).tabsValue
}
},
mounted() {
this.vtpId = uni.getStorageSync('vtpId')
this.evaluate = uni.getStorageSync("evaluate")
this.current = uni.getStorageSync("current")
this.evaluate2 = uni.getStorageSync("evaluate2")
this.current2 = uni.getStorageSync("current2")
this.evaluate3 = uni.getStorageSync("evaluate3")
this.current3 = uni.getStorageSync("current3")
this.evaluate4 = uni.getStorageSync("evaluate4")
this.current4 = uni.getStorageSync("current4")
this.remake = uni.getStorageSync("remake")
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('shipmentQualityConsultationRespList', 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]
this.vvyId = value[0].vvyId
value.forEach((v, index) => {
let obj = {
name: `质量意见征询${index + 1}`,
}
this.tabsList.push(obj)
})
this.executeSql2()
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 查单证签字表
executeSql2() {
let that = this
let sql = `select * from workSignTable WHERE bizId = '${this.tableInfo.vqcId}';`
sqlite.executeSqlCeshi(sql).then((value) => {
// 在resolve时执行的回调函数
let zdyList = []
let czList = []
let cfList = []
if (value.length > 0) {
value.forEach(v => {
if (v.sort == '0') {
this.zdySign = {
url: v.signFile,
id: v.webId
}
zdyList.push(v)
} else if (v.sort == '1') {
this.czSign = {
url: v.signFile,
id: v.webId
}
czList.push(v)
} else if (v.sort == '2') {
this.cfSign = {
url: v.signFile,
id: v.webId
}
cfList.push(v)
}
})
}
if (zdyList.length == 0) {
this.zdySign = {
url: "",
id: ""
}
}
if (czList.length == 0) {
this.czSign = {
url: "",
id: ""
}
}
if (cfList.length == 0) {
this.cfSign = {
url: "",
id: ""
}
}
if (this.zdySign.url != "" && this.czSign.url != "" && this.cfSign.url != "") {
this.items.forEach(v => {
v.disabled = true
})
this.items2.forEach(v => {
v.disabled = true
})
this.items3.forEach(v => {
v.disabled = true
})
this.items4.forEach(v => {
v.disabled = true
})
this.remakeDisabled = true
this.executeSq4()
if (this.evaluateList.length == 0) {
let webId = uuidv4()
let date = new Date().getTime()
let webDate = api.getDate(date)
let webStatus = 0
let sql =
`insert into evaluateTable values('${webId}','${this.shipInfo.vtpId}','${this.tableInfo.vqcId}','${this.evaluate}',
'${this.evaluate2}','${this.evaluate3}','${this.evaluate4}','${this.remake}','${webStatus}','${webDate}')`
this.executeSql3(sql)
}
} else {
this.items.forEach(v => {
v.disabled = false
})
this.items2.forEach(v => {
v.disabled = false
})
this.items3.forEach(v => {
v.disabled = false
})
this.items4.forEach(v => {
v.disabled = false
})
this.remakeDisabled = false
}
}).catch((error) => {
// 在reject时执行的回调函数
console.error(error);
});
},
// 查询数据库
executeSql3(sql, tableName) {
sqlite.executeSqlCeshi(sql).then((value) => {
if (tableName == "evaluateTable") {
console.log(value)
if (value.length > 0) {
this.evaluateList = value
this.evaluate = value[0].evaluate
this.current = value[0].evaluate - 1
this.evaluate2 = value[0].evaluate2
this.current2 = value[0].evaluate2 - 1
this.evaluate3 = value[0].evaluate3
this.current3 = value[0].evaluate3 - 1
this.evaluate4 = value[0].evaluate4
this.current4 = value[0].evaluate4 - 1
this.remake = value[0].remake
}
}
}).catch((error) => {
console.error(error);
});
},
// 查询评价表
executeSq4() {
let sql = `select * from evaluateTable WHERE sign = '${this.tableInfo.vqcId}';`
this.executeSql3(sql, "evaluateTable")
},
// 标签切换
tabsChange(e) {
this.tabsValue = e.value
this.executeSql1('shipmentQualityConsultationRespList', e.value)
this.evaluate = "1"
this.current = 0
uni.setStorageSync('evaluate', "1")
uni.setStorageSync('current', 0)
this.evaluate2 = "1"
this.current2 = 0
uni.setStorageSync('evaluate2', "1")
uni.setStorageSync('current2', 0)
this.evaluate3 = "1"
this.current3 = 0
uni.setStorageSync('evaluate3', "1")
uni.setStorageSync('current3', 0)
this.evaluate4 = "1"
this.current4 = 0
uni.setStorageSync('evaluate4', "1")
uni.setStorageSync('current4', 0)
this.remake = ""
uni.setStorageSync('remake', "")
},
// 点击签名
togoSign(signType) {
uni.setStorageSync('remake', this.remake)
let obj = {
id: this.tableInfo.vqcId,
url: "opinionSign",
signType: Number(signType), // 0 指导员 1 船长/大副
signTable: "4",
tabsValue: this.tabsValue,
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);
});
},
radioChange: function(evt) {
this.evaluate = evt.detail.value
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === evt.detail.value) {
this.current = i;
break;
}
}
uni.setStorageSync('evaluate', this.evaluate)
uni.setStorageSync('current', this.current)
},
radioChange2: function(evt) {
this.evaluate2 = evt.detail.value
for (let i = 0; i < this.items2.length; i++) {
if (this.items2[i].value === evt.detail.value) {
this.current2 = i;
break;
}
}
uni.setStorageSync('evaluate2', this.evaluate2)
uni.setStorageSync('current2', this.current2)
},
radioChange3: function(evt) {
this.evaluate3 = evt.detail.value
for (let i = 0; i < this.items3.length; i++) {
if (this.items3[i].value === evt.detail.value) {
this.current3 = i;
break;
}
}
uni.setStorageSync('evaluate3', this.evaluate3)
uni.setStorageSync('current3', this.current3)
},
radioChange4: function(evt) {
this.evaluate4 = evt.detail.value
for (let i = 0; i < this.items4.length; i++) {
if (this.items4[i].value === evt.detail.value) {
this.current4 = i;
break;
}
}
uni.setStorageSync('evaluate4', this.evaluate4)
uni.setStorageSync('current4', this.current4)
}
}
}
</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;
}
.n-chuanming {
width: 500px;
height: 50px;
text-align: center;
}
.n-hangci {
width: 500px;
text-align: center;
}
.n-shuliang {
width: 600px;
text-align: center;
}
.v-chuanming {
height: 50px;
text-align: center;
}
.v-hangci {
text-align: center;
}
.v-shuliang {
text-align: center;
}
.t-zx .td-ar {
text-align: left;
}
.td-ac {
padding: 10px 0;
}
.radioBox {
display: flex;
justify-content: flex-end;
margin: 10px;
.radioinfo {
display: flex;
p {
margin-left: 10px;
margin-right: 3px;
margin-top: 3px;
}
}
}
.sginBox {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
.box {
width: 50%;
display: flex;
margin-bottom: 20px;
.boxtText {
text-align: right;
}
image {
width: 100px;
height: 50px;
}
.del {
color: red;
}
}
}
.sign {
color: #2979ff;
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>