380 lines
8.9 KiB
Vue
380 lines
8.9 KiB
Vue
<template>
|
|
<view class="app">
|
|
<head-info :navIndex="1"></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="shipList" :isJSON="true" keyName="vvyShip"
|
|
placeholder="请选择船名/航次" v-model="vvyShip" @select="shipSelect"
|
|
@input="shipInput"></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.spmIdDesc}}
|
|
</view>
|
|
</view>
|
|
<view class="status">
|
|
<text v-if="item.vvyStatus==0" class="nStarted">● {{item.vvyStatusName}}</text>
|
|
<text v-if="item.vvyStatus==1" class="green">● {{item.vvyStatusName}}</text>
|
|
<text v-if="item.vvyStatus==2" class="complete">● {{item.vvyStatusName}}</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.importExportFlag}}</text>
|
|
</view>
|
|
<view class="nitem">
|
|
泊位: <text>{{item.actualBerthageDesc}}</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>
|
|
<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import HeadInfo from '@/components/head-info/head-info';
|
|
import api from "../../common/api.js"
|
|
import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
|
|
let timers = null;
|
|
export default {
|
|
data() {
|
|
return {
|
|
loginObj: {},
|
|
itemList: [],
|
|
tradeName: "外贸",
|
|
tradeType: "W",
|
|
tradeItem: {},
|
|
tradeList: [{
|
|
value: "1",
|
|
name: "外贸"
|
|
},
|
|
{
|
|
value: "2",
|
|
name: "内贸"
|
|
}
|
|
],
|
|
vvyShip: "",
|
|
vvyId: "",
|
|
shipId: "",
|
|
shipName: '',
|
|
shipValue: "",
|
|
shipList: [],
|
|
|
|
// 分页
|
|
total: 0,
|
|
pageSize: 12,
|
|
current: 1,
|
|
|
|
// 港区信息
|
|
portObj: {},
|
|
|
|
lotusLoadingData: {
|
|
isShow: false //设置显示加载中组件true显示false隐藏
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.portObj = uni.getStorageSync('portObj')
|
|
this.loginObj = uni.getStorageSync('loginObj')
|
|
this.getShip()
|
|
},
|
|
onReachBottom() {
|
|
this.current++
|
|
this.initData()
|
|
this.lotusLoadingData.isShow = true
|
|
},
|
|
onBackPress(options) {
|
|
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
|
if (options.from == 'backbutton') {
|
|
return true;
|
|
} else if (options.from == 'navigateBack') {
|
|
return false;
|
|
}
|
|
},
|
|
components: {
|
|
HeadInfo,
|
|
LotusLoading
|
|
},
|
|
mounted() {
|
|
this.initData()
|
|
},
|
|
methods: {
|
|
// 切换贸易类型
|
|
tradeSelect(e) {
|
|
this.tradeItem = e
|
|
this.tradeName = 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
|
|
},
|
|
// 选择船输入框
|
|
shipInput(e) {
|
|
this.shipValue = e
|
|
if (e == "") {
|
|
this.vvyId = ""
|
|
this.vvyShip = ""
|
|
this.shipId = ""
|
|
this.shipName = ""
|
|
}
|
|
this.getShip()
|
|
},
|
|
// 获取船舶
|
|
getShip() {
|
|
if (this.tradeName == '外贸') {
|
|
this.tradeType = "W"
|
|
} else {
|
|
this.tradeType = "N"
|
|
}
|
|
let ieType = "I"
|
|
let key = ""
|
|
let spmId = ""
|
|
uni.request({
|
|
url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${this.shipValue}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${this.tradeType}`,
|
|
header: {
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|
},
|
|
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.current = 1
|
|
this.itemList = []
|
|
this.initData()
|
|
},
|
|
initData() {
|
|
if (this.tradeName == '外贸') {
|
|
this.tradeType = "W"
|
|
} else {
|
|
this.tradeType = "N"
|
|
}
|
|
uni.request({
|
|
url: `${this.$local}/api/unload/command/queryUnloadVoyages?pamId=${this.portObj.portId}&vvyId=${this.vvyId}&tradeType=${this.tradeType}&size=${this.pageSize}¤t=${this.current}`,
|
|
header: {
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|
},
|
|
method: 'GET', //请求方式，必须为大写
|
|
success: (res) => {
|
|
this.lotusLoadingData.isShow = false
|
|
this.total = res.data.data.total
|
|
this.itemList.push(...res.data.data.records)
|
|
}
|
|
})
|
|
},
|
|
// 点击分页
|
|
changePage(e) {
|
|
this.current = e.current;
|
|
this.initData()
|
|
},
|
|
toDetails(item) {
|
|
let obj = {
|
|
shipInfo: item,
|
|
tradeType: this.tradeType
|
|
}
|
|
const params = encodeURIComponent(JSON.stringify(obj));
|
|
uni.navigateTo({
|
|
url: '/pages/discharge/instruct?params=' + params
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.content {
|
|
padding: 20px;
|
|
min-height: calc(100vh - 68px - 40px);
|
|
margin-top: 66px;
|
|
margin-bottom: 20px;
|
|
|
|
.form {
|
|
width: 100%;
|
|
height: 50px;
|
|
background: #f5f6fa;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
position: fixed;
|
|
top: 66px;
|
|
right: 0;
|
|
z-index: 995;
|
|
|
|
.end {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.input {
|
|
width: 200px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
padding-left: 10px;
|
|
margin-right: 15px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.btn {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
margin-left: 0;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
background-color: #0067CF;
|
|
margin-right: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.itemList {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
margin-top: 40px;
|
|
|
|
/deep/.o-empty {
|
|
width: 100%;
|
|
}
|
|
|
|
.item {
|
|
width: calc(33.3% - 16px);
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 10px 20px;
|
|
position: relative;
|
|
margin-bottom: 16px;
|
|
|
|
.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: 49%;
|
|
|
|
.text {
|
|
color: #929292;
|
|
}
|
|
}
|
|
|
|
.nitem:nth-of-type(2n) {
|
|
width: 35%;
|
|
}
|
|
|
|
.nitem:nth-of-type(2n - 1) {
|
|
width: 63%;
|
|
}
|
|
}
|
|
|
|
.status {
|
|
margin-top: 5px;
|
|
font-size: 16px;
|
|
|
|
.nStarted {
|
|
color: #bbb;
|
|
}
|
|
|
|
.complete {
|
|
color: #0067CF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item:nth-child(3n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.pageBox {
|
|
width: 100%;
|
|
height: 50px;
|
|
background-color: #fff;
|
|
margin-top: 20px;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style> |