pad-app/pages/shipWork/opinionSign.vue

933 lines
21 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></view>
<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>海通码头船舶装/卸质量意见征询单</p>
<text>Form Seeking Advice On The Quality Of Vessel Loading/Discharge</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>航次/Voyage No.:</p>
<p>{{tableInfo.vvyName}}</p>
</view>
<view class="li">
<p>装卸量/Qualitu/Pkgs:</p>
<p>{{tableInfo.spareNumber}}</p>
</view>
<view class="li">
<p>泊位/Berth:</p>
<p>{{tableInfo.bthIdName}}</p>
</view>
<view class="li">
<p>日期Date:</p>
<p>{{tableInfo.operationDate}}</p>
</view>
</view>
<view class="listTitle">
<p>Following Blanks are to Be Filled in by the carrier(以下请船方填写)</p>
</view>
<table class="t-main">
<tbody>
<tr>
<td class="content">
<view class="leftTitle">
<p class="xh">1</p>
<view>
<p>Did our terminal operation meet the requiremants of the carrier?
</p>
<p>(港方按照船方实施装/)</p>
</view>
</view>
<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>
<td class="content">
<view class="leftTitle">
<p class="xh">2</p>
<view>
<p>Did the vehicle travel following the linited speed in cargo hold?
</p>
<p>(船舱内按照规定速度行驶?)</p>
</view>
</view>
<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>
<td class="content">
<view class="leftTitle">
<p class="xh">3</p>
<view>
<p>Not founded The roughly opertions?</p>
<p>(无野蛮作业?)</p>
</view>
</view>
<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>
<td class="content">
<view class="leftTitle">
<p class="xh">4</p>
<view>
<p>Did the Terminal Cooperated other requirmants of Carrier?</p>
<p>(积极配合船方的其他要求?)</p>
</view>
</view>
<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="inputTr">
<view class="inputTitle">
<p>Other coments(其他意见):</p>
</view>
<uni-easyinput type="textarea" autoHeight v-model="remake"
placeholder="请输入内容" :disabled="remakeDisabled"
disableColor="#fff"></uni-easyinput>
</td>
</tr>
</tbody>
</table>
<view class="bottomContent">
<p>地址Adress:上海浦东港建路1919号1919GangJian Road,PuDong ShangHai</p>
<p>电话Tel:203009604&68685186</p>
</view>
</view>
</view>
<view class="signBox">
<view class="signContent">
<view class="signTitle">
<p>船方签章:</p>
<p>Captain/Chief Officer:</p>
</view>
<view class="signInfo" v-if="cfSign.url == ''" @click="togoSign('2')">
去签名
</view>
<view class="signImg" v-else>
<image :src="cfSign.url"></image>
</view>
</view>
<view class="row"></view>
<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>Signature of Duty manger:</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>
</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.executeSq4()
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
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") {
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 signId = '${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', "")
this.executeSql('shipInfoTable')
},
// 点击签名
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";
.contentFixed {
margin-top: 68px !important;
/deep/.tab .tab-bar {
height: 66px;
line-height: 66px;
position: relative;
}
/deep/.tab .tab-bar-item {
height: 66px;
line-height: 66px;
font-size: 18px;
color: #23262E;
font-weight: bold;
font-family: PingFangSC-Semibold;
padding: 0 24px !important;
}
/deep/.tab .tab-bar-item.active {
color: #0067CF
}
/deep/.tab .tab-bar-item .active-line {
color: #0067CF;
width: 54px;
height: 4px;
}
/deep/.tab-pane {
width: 100%;
}
/deep/.tab .tab-cont {
padding-bottom: 0;
}
}
.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: 24px 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: 15px 0;
.li {
min-width: 33%;
display: flex;
justify-content: center;
margin-bottom: 24px;
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;
}
}
}
}
.listTitle {
width: 100%;
padding: 7px 16px;
background: #E9E9E9;
font-size: 18px;
color: #23262E;
}
table {
margin-bottom: 0 !important;
tr {
margin: 0 !important;
padding: 0 !important;
}
}
#t-main {
border-collapse: collapse;
border-spacing: 0px;
td {
padding: 0px 10px;
}
}
.content {
display: flex;
justify-content: space-between;
height: auto;
width: 100%;
min-height: 100%;
.leftTitle {
display: flex;
.xh {
width: 42px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
background: rgba(233, 233, 233, 0.30);
}
view {
padding-left: 20px;
}
}
}
.inputTr {
.inputTitle {
margin-bottom: 5px;
width: 100%;
padding: 7px 16px;
background: #E9E9E9;
font-size: 18px;
color: #23262E;
}
}
.bottomContent {
padding: 10px 0;
p {
margin: 5px 0;
}
}
.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 50px;
.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;
}
}
.radioBox {
display: flex;
justify-content: flex-end;
padding: 10px;
background: rgba(233, 233, 233, 0.30);
.radioinfo {
display: flex;
p {
margin: 3px 10px;
}
}
}
/deep/uni-radio .uni-radio-input {
border-radius: 4px;
border-color: transparent !important;
}
</style>