350 lines
8.1 KiB
Vue
350 lines
8.1 KiB
Vue
<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>
|
|
|
|
<script>
|
|
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: 6,
|
|
current: 1,
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loginObj = uni.getStorageSync('loginObj')
|
|
this.portObj = uni.getStorageSync('portObj')
|
|
this.getShip()
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
// 切换贸易类型
|
|
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}/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: 'GET', //请求方式，必须为大写
|
|
success: (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 lang="less" scoped>
|
|
.content {
|
|
padding: 20px;
|
|
min-height: calc(100vh - 68px - 40px);
|
|
margin-top: 68px;
|
|
|
|
.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> |