11.7
Panzihang
parent
61ac97d239
commit
50c0452f43
|
|
@ -97,6 +97,7 @@
|
|||
portId: "",
|
||||
portName: "",
|
||||
activeIndex: 0,
|
||||
mediaType: "pad",
|
||||
navList: [{
|
||||
url: "/pages/index/index",
|
||||
name: "装船指令",
|
||||
|
|
@ -129,13 +130,13 @@
|
|||
imageUrl: "../../static/images/theme/jcIcon1-1.png",
|
||||
imageUrl2: "../../static/images/theme/jcIcon1-2.png"
|
||||
},
|
||||
// {
|
||||
// url: "/pages/receipt/index",
|
||||
// name: "进出口货物交接单",
|
||||
// type: false,
|
||||
// imageUrl: "../../static/images/theme/jckIcon1-1.png",
|
||||
// imageUrl2: "../../static/images/theme/jckIcon1-2.png"
|
||||
// }
|
||||
{
|
||||
url: "/pages/receipt/index",
|
||||
name: "进出口货物交接单",
|
||||
type: false,
|
||||
imageUrl: "../../static/images/theme/jckIcon1-1.png",
|
||||
imageUrl2: "../../static/images/theme/jckIcon1-2.png"
|
||||
}
|
||||
],
|
||||
lotusLoadingData: {
|
||||
isShow: false //设置显示加载中组件true显示false隐藏
|
||||
|
|
|
|||
12
pages.json
12
pages.json
|
|
@ -279,6 +279,18 @@
|
|||
"navigationBarTitleText": "进出口货物交接单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/receipt/details",
|
||||
"style": {
|
||||
"navigationBarTitleText": "装卸货物交接计数单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/receipt/sign",
|
||||
"style": {
|
||||
"navigationBarTitleText": "进出口货物交接单签字"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/test/ceshi",
|
||||
"style": {
|
||||
|
|
|
|||
|
|
@ -75,11 +75,11 @@
|
|||
tradeItem: {},
|
||||
tradeList: [{
|
||||
value: "1",
|
||||
name: "内贸"
|
||||
name: "外贸"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
name: "外贸"
|
||||
name: "内贸"
|
||||
}
|
||||
],
|
||||
vvyShip: "",
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
|
||||
// 分页
|
||||
total: 0,
|
||||
pageSize: 6,
|
||||
pageSize: 9,
|
||||
current: 1,
|
||||
|
||||
// 港区信息
|
||||
|
|
@ -200,7 +200,6 @@
|
|||
uni.navigateTo({
|
||||
url: '/pages/discharge/instruct?params=' + params
|
||||
})
|
||||
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
@ -251,6 +250,8 @@
|
|||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
gap: 16px;
|
||||
|
||||
/deep/.o-empty {
|
||||
width: 100%;
|
||||
|
|
@ -258,12 +259,10 @@
|
|||
}
|
||||
|
||||
.item {
|
||||
width: 32%;
|
||||
margin-top: 15px;
|
||||
margin-right: 2%;
|
||||
width: 32.2%;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -788,7 +788,6 @@
|
|||
|
||||
<script>
|
||||
import HeadView from '@/components/head-view/head-view.vue';
|
||||
import HeadInfo from '@/components/head-info/head-info';
|
||||
import place from './place.vue';
|
||||
let timers = null;
|
||||
export default {
|
||||
|
|
@ -901,7 +900,6 @@
|
|||
},
|
||||
components: {
|
||||
HeadView,
|
||||
HeadInfo,
|
||||
place,
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -75,11 +75,11 @@
|
|||
tradeItem: {},
|
||||
tradeList: [{
|
||||
value: "1",
|
||||
name: "内贸"
|
||||
name: "外贸"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
name: "外贸"
|
||||
name: "内贸"
|
||||
}
|
||||
],
|
||||
vvyShip: "",
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
|
||||
// 分页
|
||||
total: 0,
|
||||
pageSize: 6,
|
||||
pageSize: 9,
|
||||
current: 1,
|
||||
|
||||
// 港区信息
|
||||
|
|
@ -258,6 +258,8 @@
|
|||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
gap: 16px;
|
||||
|
||||
/deep/.o-empty {
|
||||
width: 100%;
|
||||
|
|
@ -265,12 +267,10 @@
|
|||
}
|
||||
|
||||
.item {
|
||||
width: 32%;
|
||||
margin-top: 15px;
|
||||
margin-right: 2%;
|
||||
width: 32.2%;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>canvas 涂鸦测试页面</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<canvas id="cvs" width="1200" height="332"></canvas>
|
||||
<div onClick="blobImg();">保存</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script type="application/javascript">
|
||||
var canvas = document.getElementById('cvs');
|
||||
var ctx = canvas.getContext('2d');
|
||||
let isDownin = false;
|
||||
|
||||
var img = new Image();
|
||||
img.src = "zs.png";
|
||||
img.onload = function() {
|
||||
ctx.fillStyle = ctx.createPattern(img, 'no-repeat');
|
||||
ctx.fillRect(0, 0, 1200, 332);
|
||||
ctx.strokeStyle = "#FF0000"; //设置画笔颜色
|
||||
ctx.lineWidth = 5; //设置线的粗细
|
||||
}
|
||||
|
||||
canvas.addEventListener('mousedown', (e) => {
|
||||
isDownin = true
|
||||
ctx.moveTo(e.pageX, e.pageY)
|
||||
});
|
||||
canvas.addEventListener('mousemove', (e) => {
|
||||
if(!isDownin) return
|
||||
ctx.lineTo(e.pageX, e.pageY)
|
||||
ctx.stroke()
|
||||
});
|
||||
canvas.addEventListener('mouseup', (e) => {
|
||||
isDownin = false
|
||||
});
|
||||
|
||||
function blobImg(){
|
||||
canvas.toBlob((blob) => {
|
||||
const a = document.createElement('a');
|
||||
document.body.append(a);
|
||||
a.download = '质损.png';
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.click();
|
||||
a.remove();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,532 @@
|
|||
<template>
|
||||
<view class="details">
|
||||
<head-view :title="title"></head-view>
|
||||
<view class="container">
|
||||
<view class="topBox">
|
||||
<view class="topImg">
|
||||
<image src="../../static/images/theme/logo.png"></image>
|
||||
<view class="rightTitle">
|
||||
<text>上海海通国际汽车码头有限公司</text>
|
||||
<text>SHANGHAI HAITONG INTERNATIONAL AUTOMOTIVE TERMINAL CO.</text>
|
||||
</view>
|
||||
</view>
|
||||
<p class="title">装卸货物交接计数单</p>
|
||||
<p class="bh">编号/N0:<text>QR-7.5.1-01-05-M</text></p>
|
||||
<view class="infoList">
|
||||
<view class="li">
|
||||
<p class="liTitle">船名：</p>
|
||||
<text>{{shipInfo.spmName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p class="liTitle">航次：</p>
|
||||
<text>{{shipInfo.vvyName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p class="liTitle">进出口：</p>
|
||||
<text>{{shipInfo.importExportFlagName}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p class="liTitle">贸易类型：</p>
|
||||
<text>{{shipInfo.tradeType}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p class="liTitle">完工时间：</p>
|
||||
<text>{{shipInfo.actualFinishTime}}</text>
|
||||
</view>
|
||||
<view class="li">
|
||||
<p class="liTitle">工班：</p>
|
||||
<text>{{shipInfo.gb}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="listBox">
|
||||
<view class="listTitle">
|
||||
<image src="../../static/images/goodsImg2.png" mode=""></image>
|
||||
<p>货物明细</p>
|
||||
<view class="total">
|
||||
<text>总计：</text>
|
||||
<text>车辆数：{{totalObj.carAmount}}</text>
|
||||
<text>备件数：{{totalObj.partAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table">
|
||||
<view class="tableTop">
|
||||
<view class="tableHead" v-for="(item,index) in tableHead" :key="index">
|
||||
<p>{{item}}</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tableInfo" v-for="(item,index) in tableData" :key="index">
|
||||
<view class="li">
|
||||
{{item.mnfBl}}
|
||||
</view>
|
||||
<view class="li">
|
||||
{{item.mnfMk}}
|
||||
</view>
|
||||
<view class="li">
|
||||
{{item.brdName}}
|
||||
</view>
|
||||
<view class="li">
|
||||
{{item.carAmount}}
|
||||
</view>
|
||||
<view class="li">
|
||||
{{item.partAmount}}
|
||||
</view>
|
||||
<view class="li" @click="toDetails(item)">
|
||||
详情
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="signBox">
|
||||
<view class="signContent">
|
||||
<view class="signTitle">
|
||||
<p>堆场员签名:</p>
|
||||
<p>Yard staff:</p>
|
||||
</view>
|
||||
<view class="signInfo" v-if="shipInfo.yardSignUrl == null" @click="toSign('0')">
|
||||
去签名
|
||||
</view>
|
||||
<view class="signImg" v-else>
|
||||
<image :src="yardSignUrl" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row"></view>
|
||||
<view class="signContent" v-if="shipInfo.tradeType == '外贸'">
|
||||
<view class="signTitle">
|
||||
<p>理货员签名:</p>
|
||||
<p>tally clerk:</p>
|
||||
</view>
|
||||
<view class="signInfo" v-if="shipInfo.tallySignUrl == null" @click="toSign('1')">
|
||||
去签名
|
||||
</view>
|
||||
<view class="signImg" v-else>
|
||||
<image :src="tallySignUrl" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="signContent" v-else>
|
||||
<view class="signTitle">
|
||||
<p>船方:</p>
|
||||
<p>the ship:</p>
|
||||
</view>
|
||||
<view class="signInfo" v-if="shipInfo.shipSignUrl == null" @click="toSign('2')">
|
||||
去签名
|
||||
</view>
|
||||
<view class="signImg" v-else>
|
||||
<image :src="shipSignUrl" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="popup" background-color="#fff">
|
||||
<view class="table rowTable">
|
||||
<view class="tableTop">
|
||||
<view class="tableHead" v-for="(item,index) in rowTableHead" :key="index">
|
||||
<p>{{item}}</p>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tableInfo" v-for="(item,index) in rowTableData" :key="index">
|
||||
<view class="li">
|
||||
{{index + 1}}
|
||||
</view>
|
||||
<view class="li">
|
||||
{{item.vinCode}}
|
||||
</view>
|
||||
<view class="li">
|
||||
{{item.qdLinkName}}
|
||||
</view>
|
||||
<view class="li">
|
||||
{{item.disposalSituationName}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeadView from '@/components/head-view/head-view.vue';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginObj: {},
|
||||
portObj: {},
|
||||
title: "",
|
||||
shipInfo: {},
|
||||
totalObj: {},
|
||||
tableHead: ["提单号", "唛头", "品牌", "车辆数", "备件数", "原残具体情况"],
|
||||
tableData: [],
|
||||
rowTableHead: ["序号", "车架号", "质损发生环节", "损伤情况"],
|
||||
rowTableData: [],
|
||||
// 堆场员签名
|
||||
yardSignUrl: "",
|
||||
// 理货员签名
|
||||
tallySignUrl: "",
|
||||
// 船方签名
|
||||
shipSignUrl: "",
|
||||
|
||||
vvyId: "",
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if ('params' in options) {
|
||||
this.vvyId = JSON.parse(decodeURIComponent(options.params)).vvyId
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
this.portObj = uni.getStorageSync('portObj')
|
||||
this.initData()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取当前航次的船信息
|
||||
initData() {
|
||||
uni.request({
|
||||
url: `${this.$local}/shp/iEDeliverySlipController/page?vvyId=${this.vvyId}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
if (res.statusCode == 200) {
|
||||
this.shipInfo = res.data.data.records[0]
|
||||
console.log(this.shipInfo)
|
||||
this.title = `船名：${this.shipInfo.spmName} / 航次：${this.shipInfo.vvyName} 装卸货物交接计数单`
|
||||
this.getInfo()
|
||||
this.getSgin()
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取数据
|
||||
getInfo() {
|
||||
uni.request({
|
||||
url: `${this.$local}/shp/iEDeliverySlipController/planPage?vvyId=${this.shipInfo.vvyId}&importExportFlag=${this.shipInfo.importExportFlag}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
this.tableData = res.data.data.plan.records
|
||||
this.totalObj = res.data.data.count
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取当前行的数据
|
||||
toDetails(item) {
|
||||
this.$refs.popup.open('center')
|
||||
let obj = {
|
||||
splId: item.splId,
|
||||
importExportFlag: this.shipInfo.importExportFlag
|
||||
}
|
||||
uni.request({
|
||||
url: `${this.$local}/shp/iEDeliverySlipController/iEDeliverySlipPlanDamage`,
|
||||
data: obj,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'POST', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
this.rowTableData = res.data.data
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 获取堆场员，理货员，船方签名
|
||||
getSgin() {
|
||||
let arr = [{
|
||||
type: 0,
|
||||
url: this.shipInfo.yardSignUrl,
|
||||
}, {
|
||||
type: 1,
|
||||
url: this.shipInfo.tallySignUrl,
|
||||
}, {
|
||||
type: 2,
|
||||
url: this.shipInfo.shipSignUrl
|
||||
}]
|
||||
arr.forEach(v => {
|
||||
if (v != null) {
|
||||
this.initImg(v)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 调用获取图片接口
|
||||
initImg(v) {
|
||||
uni.request({
|
||||
url: `${this.$local}/api/file/url/?fileName=${v.url}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
if (v.type == 0) {
|
||||
this.yardSignUrl = res.data
|
||||
} else if (v.type == 1) {
|
||||
this.tallySignUrl = res.data
|
||||
} else {
|
||||
this.shipSignUrl = res.data
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击签字
|
||||
toSign(type) {
|
||||
this.shipInfo['type'] = type
|
||||
const params = encodeURIComponent(JSON.stringify(this.shipInfo));
|
||||
uni.navigateTo({
|
||||
url: '/pages/receipt/sign?params=' + params
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.details {
|
||||
background-color: #F6F7F9;
|
||||
|
||||
.container {
|
||||
padding: 16px;
|
||||
margin-top: 68px;
|
||||
|
||||
.topBox {
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
padding: 16px 24px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.topImg {
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
image {
|
||||
width: 270px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.rightTitle {
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
text:first-child {
|
||||
font-size: 22px;
|
||||
color: #0052A4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
margin-top: 24px;
|
||||
font-size: 24px;
|
||||
color: #23262E;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bh {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
padding-bottom: 16.5px;
|
||||
border-bottom: 1px solid #eee;
|
||||
|
||||
text {
|
||||
font-size: 18px;
|
||||
color: #0052A4;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.infoList {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
color: #23262E;
|
||||
margin-top: 15.5px;
|
||||
padding: 0 60px;
|
||||
|
||||
.li {
|
||||
display: flex;
|
||||
width: 33%;
|
||||
margin-bottom: 6px;
|
||||
text-align: center;
|
||||
|
||||
.liTitle {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
text {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listBox {
|
||||
padding: 24px 18px;
|
||||
margin-bottom: 70px;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.listTitle {
|
||||
display: flex;
|
||||
margin-bottom: 25px;
|
||||
|
||||
image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
color: #23262E;
|
||||
font-weight: bold;
|
||||
margin-left: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.total {
|
||||
padding: 7.5px 16px;
|
||||
background: #FFF8F4;
|
||||
font-size: 16px;
|
||||
color: #FF6400;
|
||||
margin-left: 16px;
|
||||
|
||||
text:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
margin-left: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.signBox {
|
||||
width: 100%;
|
||||
height: 66px;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E1E5ED;
|
||||
box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, 0.05);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
.tableTop {
|
||||
display: flex;
|
||||
background: #F4F4F4;
|
||||
padding: 8px 16px;
|
||||
|
||||
.tableHead {
|
||||
flex: 1;
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
color: #0B266A;
|
||||
padding-left: 9px;
|
||||
height: 20px;
|
||||
border-left: 1px solid #0B266A;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableInfo {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid #E9ECF1;
|
||||
|
||||
.li {
|
||||
flex: 1;
|
||||
padding-left: 9px;
|
||||
}
|
||||
|
||||
.li:last-child {
|
||||
color: #0067CF;
|
||||
}
|
||||
}
|
||||
|
||||
.tableInfo:nth-of-type(2n) {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.tableInfo:nth-of-type(2n-1) {
|
||||
background: #FAFAFA;
|
||||
}
|
||||
}
|
||||
|
||||
.rowTable {
|
||||
width: 600px;
|
||||
height: 400px;
|
||||
overflow: scroll;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,66 @@
|
|||
<template>
|
||||
<view class="app">
|
||||
<head-info :navIndex="5"></head-info>
|
||||
<view class="container">
|
||||
<view class="content">
|
||||
<view class="form">
|
||||
<view class="end">
|
||||
<superwei-combox class="input" :candidates="tradeList" :isJSON="true" keyName="name"
|
||||
placeholder="请选择贸易类型" v-model="tradeName" @select="tradeSelect"></superwei-combox>
|
||||
</uni-easyinput>
|
||||
<superwei-combox class="input" :candidates="importExportList" :isJSON="true" keyName="name"
|
||||
placeholder="请选择进出口" v-model="importExport" @select="importExportSelect"></superwei-combox>
|
||||
</uni-easyinput>
|
||||
<superwei-combox class="input" :candidates="shipList" :isJSON="true" keyName="vvyShip"
|
||||
placeholder="请选择船名/航次" v-model="vvyShip" @select="shipSelect"></superwei-combox>
|
||||
</uni-easyinput>
|
||||
<button class="btn" @click="onSearch">搜索</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="itemList">
|
||||
<template v-if="itemList.length > 0">
|
||||
<view v-for="(item, index) in itemList" :key="index" class="item">
|
||||
<view @click="toDetails(item)">
|
||||
<view class="title">
|
||||
<view class="titleft">
|
||||
<image src="../../static/images/ship.png" mode="widthFix"></image>
|
||||
<view class="name">
|
||||
{{item.spmName}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="status">
|
||||
<text v-if="item.handoverStatus==0" class="nStarted">● 未完成</text>
|
||||
<text v-if="item.handoverStatus==1" class="green">● 进行中 </text>
|
||||
<text v-if="item.handoverStatus==2" class="complete">● 已完成</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nitem">
|
||||
航次: <text>{{item.vvyName}}</text>
|
||||
</view>
|
||||
<view class="nitem">
|
||||
贸易类型: <text>{{item.tradeType}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row">
|
||||
<view class="nitem">
|
||||
进出口: <text>{{item.importExportFlagName}}</text>
|
||||
</view>
|
||||
<view class="nitem">
|
||||
完工时间: <text>{{item.actualFinishTimeFmt}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<o-empty v-else height="70vh" bg="#f5f6fa" />
|
||||
</view>
|
||||
<view class="pageBox" v-if="itemList.length > 0">
|
||||
<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
|
||||
@change="changePage" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,39 +68,287 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 登录信息
|
||||
loginObj: {},
|
||||
// 港区信息
|
||||
portObj: {},
|
||||
// 进出口
|
||||
importExport: "出口",
|
||||
importExportList: [{
|
||||
value: "E",
|
||||
name: "出口"
|
||||
},
|
||||
{
|
||||
value: "I",
|
||||
name: "进口"
|
||||
}
|
||||
],
|
||||
// 内外贸
|
||||
tradeName: "外贸",
|
||||
tradeList: [{
|
||||
value: "1",
|
||||
name: "外贸"
|
||||
},
|
||||
{
|
||||
value: "2",
|
||||
name: "内贸"
|
||||
}
|
||||
],
|
||||
// 船名航次
|
||||
vvyShip: "",
|
||||
vvyId: "",
|
||||
shipId: "",
|
||||
shipName: '',
|
||||
shipList: [],
|
||||
|
||||
itemList: [],
|
||||
|
||||
// 分页
|
||||
total: 0,
|
||||
pageSize: 9,
|
||||
current: 1,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
this.getInfo()
|
||||
this.portObj = uni.getStorageSync('portObj')
|
||||
this.getShip()
|
||||
this.initData()
|
||||
},
|
||||
methods: {
|
||||
getInfo() {
|
||||
// 一级页面 /shp/iEDeliverySlipController/page GET
|
||||
// 二级页面 /shp/iEDeliverySlipController/planPage?vvyId=2455a195e549db737fa4431f91995e46&importExportFlag=E 航次 进出口标识 GET
|
||||
// 二级页面质损 /shp/iEDeliverySlipController/iEDeliverySlipPlanDamage splId 进出口标识 POST
|
||||
// 提交签名 /vesselVoyages/vvyId 根据ID更新 可修改总指令装船要求 PUT
|
||||
let obj = {
|
||||
splId: "b3a2141b0ec99635f7bd69d1bd3b4a8a",
|
||||
importExportFlag: "E"
|
||||
// 切换贸易类型
|
||||
tradeSelect(e) {
|
||||
this.tradeName = e.name
|
||||
this.shipId = ""
|
||||
this.shipName = ""
|
||||
this.vvyId = ""
|
||||
this.vvyShip = ""
|
||||
this.getShip()
|
||||
},
|
||||
// 切换进出口
|
||||
importExportSelect(e) {
|
||||
this.importExport = e.name
|
||||
this.shipId = ""
|
||||
this.shipName = ""
|
||||
this.vvyId = ""
|
||||
this.vvyShip = ""
|
||||
this.getShip()
|
||||
},
|
||||
// 选择船
|
||||
shipSelect(e) {
|
||||
this.shipId = e.spmId
|
||||
this.shipName = e.vslCnname
|
||||
this.vvyId = e.vvyId
|
||||
this.vvyShip = e.vvyShip
|
||||
},
|
||||
// 获取船舶
|
||||
getShip() {
|
||||
if (this.tradeName == '外贸') {
|
||||
this.tradeType = "W"
|
||||
} else {
|
||||
this.tradeType = "N"
|
||||
}
|
||||
let ieType = ""
|
||||
if (this.importExport == '出口') {
|
||||
ieType = "E"
|
||||
} else {
|
||||
ieType = "I"
|
||||
}
|
||||
let key = ""
|
||||
let spmId = ""
|
||||
uni.request({
|
||||
url: `${this.$local}/shp/iEDeliverySlipController/iEDeliverySlipPlanDamage`,
|
||||
data: obj,
|
||||
url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'POST', //请求方式，必须为大写
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
if (res.data.status == "200") {
|
||||
this.shipList = res.data.data
|
||||
this.shipList.forEach(v => {
|
||||
let vvyShip = `${v.vslCnname}/${v.vvyName}`
|
||||
this.$set(v, "vvyShip", vvyShip)
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 点击搜索
|
||||
onSearch() {
|
||||
this.initData()
|
||||
},
|
||||
// 获取船只
|
||||
initData() {
|
||||
// 一级页面 /shp/iEDeliverySlipController/page GET
|
||||
// 二级页面 /shp/iEDeliverySlipController/planPage?vvyId=2455a195e549db737fa4431f91995e46&importExportFlag=E 航次 进出口标识 GET
|
||||
// 二级页面质损 /shp/iEDeliverySlipController/iEDeliverySlipPlanDamage splId 进出口标识 POST
|
||||
// 提交签名 /vesselVoyages/vvyId 根据ID更新 可修改总指令装船要求 PUT
|
||||
let importExportFlag = ""
|
||||
if (this.importExport == '出口') {
|
||||
importExportFlag = "E"
|
||||
} else {
|
||||
importExportFlag = "I"
|
||||
}
|
||||
let tradType = ""
|
||||
if (this.tradeName == '外贸') {
|
||||
tradType = "W"
|
||||
} else {
|
||||
tradType = "N"
|
||||
}
|
||||
uni.request({
|
||||
url: `${this.$local}/shp/iEDeliverySlipController/page?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&size=${this.pageSize}¤t=${this.current}&importExportFlag=${importExportFlag}&tradType=${tradType}`,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||||
},
|
||||
method: 'GET', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
this.total = res.data.data.total
|
||||
this.itemList = res.data.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击分页
|
||||
changePage(e) {
|
||||
this.current = e.current;
|
||||
this.initData()
|
||||
},
|
||||
// 点击进入详情
|
||||
toDetails(item) {
|
||||
let obj = {
|
||||
vvyId: item.vvyId,
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: '/pages/receipt/details?params=' + params
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 68px - 40px);
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.end {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.input {
|
||||
width: 200px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding-left: 10px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-left: 0;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
background-color: #0067CF;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.itemList {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
gap: 16px;
|
||||
|
||||
/deep/.o-empty {
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 32.2%;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
justify-content: space-between;
|
||||
|
||||
.titleft {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
color: #23262E;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
|
||||
.nitem {
|
||||
width: 46%;
|
||||
|
||||
.text {
|
||||
color: #929292;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 5px;
|
||||
font-size: 16px;
|
||||
|
||||
.nStarted {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.complete {
|
||||
color: #0067CF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pageBox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
<template>
|
||||
<view class="sign">
|
||||
<head-view title="签名"></head-view>
|
||||
<view class="containe contentFixedr">
|
||||
<view class="sign-box">
|
||||
<canvas class="mycanvas" :style="{width:width +'px',height:height +'px'}" canvas-id="mycanvas"
|
||||
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
|
||||
<canvas canvas-id="camCacnvs" :style="{width:height +'px',height:width +'px'}"
|
||||
class="canvsborder"></canvas>
|
||||
</view>
|
||||
<view class="sigh-btns">
|
||||
<van-button class="btn" type="default" @tap="handleCancel">取消</van-button>
|
||||
<van-button class="btn" type="default" @tap="handleReset">重写</van-button>
|
||||
<van-button class="btn" type="default" @tap="handleConfirm">确认</van-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
pathToBase64,
|
||||
base64ToPath
|
||||
} from '../../js_sdk/mmmm-image-tools/index.js'
|
||||
import {
|
||||
compressImgBySize
|
||||
} from '@/common/compressImg'
|
||||
import utils from '@/common/util.js';
|
||||
var x = 20;
|
||||
var y = 20;
|
||||
var tempPoint = []; //用来存放当前画纸上的轨迹点
|
||||
var id = 0;
|
||||
var type = '';
|
||||
let that;
|
||||
let canvasw;
|
||||
let canvash;
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ctx: '', //绘图图像
|
||||
points: [], //路径点集合,
|
||||
width: 0,
|
||||
height: 0,
|
||||
loginObj: {},
|
||||
signImg: "",
|
||||
shipInfo: "",
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
that = this;
|
||||
// id = option.id;
|
||||
// type = option.type;
|
||||
this.shipInfo = JSON.parse(decodeURIComponent(option.params))
|
||||
console.log(this.shipInfo)
|
||||
this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
|
||||
//设置画笔样式
|
||||
this.ctx.lineWidth = 4;
|
||||
this.ctx.lineCap = 'round';
|
||||
this.ctx.lineJoin = 'round';
|
||||
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
console.log(res);
|
||||
that.width = res.windowWidth * 0.8;
|
||||
that.height = res.windowHeight * 0.85;
|
||||
}
|
||||
});
|
||||
|
||||
this.loginObj = uni.getStorageSync('loginObj')
|
||||
},
|
||||
methods: {
|
||||
//触摸开始，获取到起点
|
||||
touchstart: function(e) {
|
||||
let startX = e.changedTouches[0].x;
|
||||
let startY = e.changedTouches[0].y;
|
||||
let startPoint = {
|
||||
X: startX,
|
||||
Y: startY
|
||||
};
|
||||
|
||||
/* **************************************************
|
||||
#由于uni对canvas的实现有所不同，这里需要把起点存起来
|
||||
* **************************************************/
|
||||
this.points.push(startPoint);
|
||||
|
||||
//每次触摸开始，开启新的路径
|
||||
this.ctx.beginPath();
|
||||
},
|
||||
|
||||
//触摸移动，获取到路径点
|
||||
touchmove: function(e) {
|
||||
let moveX = e.changedTouches[0].x;
|
||||
let moveY = e.changedTouches[0].y;
|
||||
let movePoint = {
|
||||
X: moveX,
|
||||
Y: moveY
|
||||
};
|
||||
this.points.push(movePoint); //存点
|
||||
let len = this.points.length;
|
||||
if (len >= 2) {
|
||||
this.draw(); //绘制路径
|
||||
}
|
||||
tempPoint.push(movePoint);
|
||||
},
|
||||
|
||||
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
|
||||
touchend: function() {
|
||||
this.points = [];
|
||||
},
|
||||
|
||||
/* ***********************************************
|
||||
# 绘制笔迹
|
||||
# 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
|
||||
# 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
|
||||
# 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
|
||||
************************************************ */
|
||||
draw: function() {
|
||||
let point1 = this.points[0];
|
||||
let point2 = this.points[1];
|
||||
this.points.shift();
|
||||
this.ctx.moveTo(point1.X, point1.Y);
|
||||
this.ctx.lineTo(point2.X, point2.Y);
|
||||
this.ctx.stroke();
|
||||
this.ctx.draw(true);
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
uni.navigateBack({
|
||||
delta: 1
|
||||
});
|
||||
},
|
||||
|
||||
//清空画布
|
||||
handleReset: function() {
|
||||
that.ctx.clearRect(0, 0, that.width, that.height);
|
||||
that.ctx.draw(true);
|
||||
tempPoint = [];
|
||||
},
|
||||
|
||||
//将签名笔迹上传到服务器，并将返回来的地址存到本地
|
||||
handleConfirm: function() {
|
||||
let that = this
|
||||
if (tempPoint.length == 0) {
|
||||
uni.showToast({
|
||||
title: '请先签名',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
let that = this
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'mycanvas',
|
||||
success: function(e) {
|
||||
let timestamp = new Date().getTime();
|
||||
let sunumber = Math.floor(Math.random() * 999);
|
||||
var file = that.base64ToFile(e.tempFilePath, timestamp + sunumber)
|
||||
uni.uploadFile({
|
||||
url: `${that.$local}/api/file/upload`, //上传图片api
|
||||
header: {
|
||||
'Authorization': `Bearer ${that.loginObj.access_token}`
|
||||
},
|
||||
file: file,
|
||||
fileType: 'image',
|
||||
name: 'file',
|
||||
success: (res) => {
|
||||
that.signImg = JSON.parse(res.data).data.filePath
|
||||
let reqDTO = {}
|
||||
if (that.shipInfo.type == '0') {
|
||||
reqDTO = {
|
||||
yardSignFg: 1,
|
||||
yardSignUrl: that.signImg,
|
||||
vvyId: that.shipInfo.vvyId,
|
||||
}
|
||||
} else if (that.shipInfo.type == '1') {
|
||||
reqDTO = {
|
||||
tallySignFg: 1,
|
||||
tallySignUrl: that.signImg,
|
||||
vvyId: that.shipInfo.vvyId,
|
||||
}
|
||||
} else {
|
||||
reqDTO = {
|
||||
shipSignFg: 1,
|
||||
shipSignUrl: that.signImg,
|
||||
vvyId: that.shipInfo.vvyId,
|
||||
}
|
||||
}
|
||||
console.log(reqDTO)
|
||||
uni.request({
|
||||
url: `${that.$local}/shp/vesselVoyages/writeNameUrl`,
|
||||
data: reqDTO,
|
||||
header: {
|
||||
'Content-Type': 'application/json', //自定义请求头信息
|
||||
'Authorization': `Bearer ${that.loginObj.access_token}`
|
||||
},
|
||||
method: 'POST', //请求方式，必须为大写
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
let obj = {
|
||||
vvyId: that.shipInfo.vvyId,
|
||||
}
|
||||
const params = encodeURIComponent(JSON
|
||||
.stringify(obj));
|
||||
uni.navigateTo({
|
||||
url: '/pages/receipt/details?params=' +
|
||||
params
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err)
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
base64ToFile(base64, name) {
|
||||
if (typeof base64 != 'string') {
|
||||
return;
|
||||
}
|
||||
var arr = base64.split(',')
|
||||
var type = arr[0].match(/:(.*?);/)[1]
|
||||
var fileExt = type.split('/')[1]
|
||||
var bstr = atob(arr[1])
|
||||
var n = bstr.length
|
||||
var u8arr = new Uint8Array(n)
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n)
|
||||
}
|
||||
return new File([u8arr], `${name}.` + fileExt, {
|
||||
type: type
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
height: calc(100vh - 68px);
|
||||
padding-bottom: 30px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.sign-box {
|
||||
height: 90%;
|
||||
margin-left: 10%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sign-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sigh-btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 10px 10px 0;
|
||||
}
|
||||
|
||||
/deep/.van-button {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.mycanvas {
|
||||
margin: auto 0rpx;
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.canvsborder {
|
||||
border: 1rpx solid #333;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 10000rpx;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue