563 lines
13 KiB
Vue
563 lines
13 KiB
Vue
<template>
|
|
<view class="brandDetails">
|
|
<head-view :title="title" url="/pages/shipWork/documentList"></head-view>
|
|
<view class="container contentFixed">
|
|
<view class="topBox">
|
|
<view class="leftInput">
|
|
<uni-easyinput suffixIcon="search" v-model="searchValue" placeholder="品牌/提单号"
|
|
@iconClick="iconClick"></uni-easyinput>
|
|
</view>
|
|
<text @click="screen">筛选</text>
|
|
</view>
|
|
<uni-drawer ref="showRight" mode="right" :mask-click="false">
|
|
<view class="scroll-view">
|
|
<scroll-view class="scroll-view-box" scroll-y="true">
|
|
<view class="drawerTop" @click="back">
|
|
<image src="../../static/images/leftJt.png" mode=""></image>
|
|
<text>返回</text>
|
|
</view>
|
|
<view class="drawerTitle">
|
|
型号
|
|
</view>
|
|
<view class="selectBox">
|
|
<view class="boxContent" v-for="(item,index) in modelList" :key="index"
|
|
:class="{active:activeIndex == index}" @click="clickModel(item,index)">
|
|
{{item.text}}
|
|
</view>
|
|
</view>
|
|
<view class="drawerTitle">
|
|
品牌
|
|
</view>
|
|
<superwei-combox :candidates="brdList" :isJSON="true" keyName="text" placeholder="请选择品牌"
|
|
v-model="brdName" @select="brdSelect"></superwei-combox>
|
|
<view class="drawerTitle">
|
|
车型
|
|
</view>
|
|
<superwei-combox :candidates="bvmList" :isJSON="true" keyName="text" placeholder="请选择车型"
|
|
v-model="bvmName" @select="bvmSelect"></superwei-combox>
|
|
<view class="drawerTitle">
|
|
港口
|
|
</view>
|
|
<superwei-combox :candidates="potList" :isJSON="true" keyName="text" placeholder="请选择车型"
|
|
v-model="potName" @select="potSelect"></superwei-combox>
|
|
<view class="drawerTitle">
|
|
重量
|
|
</view>
|
|
<view class="qjBox">
|
|
<uni-easyinput v-model="minTon" class="input" type="number"></uni-easyinput>
|
|
<text>吨</text>
|
|
<text> - </text>
|
|
<uni-easyinput v-model="maxTon" class="input" type="number"></uni-easyinput>
|
|
<text>吨</text>
|
|
</view>
|
|
<view class="drawerTitle">
|
|
宽
|
|
</view>
|
|
<view class="qjBox">
|
|
<uni-easyinput v-model="minWidth" class="input" type="number"></uni-easyinput>
|
|
<text>m</text>
|
|
<text> - </text>
|
|
<uni-easyinput v-model="maxWidth" class="input" type="number"></uni-easyinput>
|
|
<text>m</text>
|
|
</view>
|
|
<view class="drawerTitle">
|
|
高
|
|
</view>
|
|
<view class="qjBox">
|
|
<uni-easyinput v-model="minHeight" class="input" type="number"></uni-easyinput>
|
|
<text>m</text>
|
|
<text> - </text>
|
|
<uni-easyinput v-model="maxHeight" class="input" type="number"></uni-easyinput>
|
|
<text>m</text>
|
|
</view>
|
|
<view class="bottomBtn">
|
|
<view class="btn czBtn" @click="reset">
|
|
重置
|
|
</view>
|
|
<view class="btn qrBtn" @click="confirm">
|
|
确认
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</uni-drawer>
|
|
<template v-if=" listInfo.length> 0">
|
|
<view class="ul">
|
|
<view class="li" v-for="(item,index) in listInfo" :key="index" @click="togoCar(item)">
|
|
<view class="liTitle">
|
|
<image class="titleImg" src="../../static/images/zlIcon.png" mode="widthFix">
|
|
</image>
|
|
<p>品牌：{{item.brdName}}</p>
|
|
</view>
|
|
<view class="liContent">
|
|
<p>提单号：{{item.mnfBl}}</p>
|
|
<p>源类型：{{item.sourceType}}</p>
|
|
<p>场位：{{item.yardPos}}</p>
|
|
<p>数量：{{item.amount}}</p>
|
|
<p>航次：{{item.vvyName}}</p>
|
|
<p>港口：{{item.potName}}</p>
|
|
<p>报关状态：{{item.customsDeclareStatus}}</p>
|
|
<p>车型：{{item.bvmName}}</p>
|
|
<p>报关单号：{{item.customsDeclareNo}}</p>
|
|
<p>车型明细：{{item.bvdName}}</p>
|
|
<p>货代：{{item.agentName}}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pageBox" v-if="total > 0">
|
|
<uni-pagination :show-icon="true" :total="total" :pageSize="pageSize" :current="current"
|
|
@change="changePage" />
|
|
</view>
|
|
</template>
|
|
<o-empty v-else height="70vh" bg="#fff" />
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import sqlite from "../../common/sqlite.js"
|
|
import api from "../../common/api.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: "船名 - 品牌明细",
|
|
searchValue: "",
|
|
listInfo: [],
|
|
allList: [],
|
|
vtpId: "",
|
|
|
|
// 抽屉内容
|
|
// 型号
|
|
modelId: "",
|
|
modelName: "",
|
|
modelList: [],
|
|
activeIndex: -1,
|
|
// 品牌
|
|
brdId: "",
|
|
brdName: "",
|
|
brdList: [],
|
|
// 车型
|
|
bvmId: "",
|
|
bvmName: "",
|
|
bvmList: [],
|
|
// 港口
|
|
potId: "",
|
|
potName: "",
|
|
potList: [],
|
|
// 最小吨
|
|
minTon: "",
|
|
// 最大吨
|
|
maxTon: "",
|
|
// 最小宽度
|
|
minWidth: "",
|
|
// 最大宽度
|
|
maxWidth: "",
|
|
// 最小高度
|
|
minHeight: "",
|
|
// 最大高度
|
|
maxHeight: "",
|
|
|
|
// 分页
|
|
total: 0,
|
|
pageSize: 3,
|
|
current: 1,
|
|
}
|
|
},
|
|
mounted() {
|
|
let title = uni.getStorageSync('shipWorkTitle')
|
|
this.title = `${title} / 品牌明细 `
|
|
this.vtpId = uni.getStorageSync('vtpId')
|
|
this.executeSql1('shipmentShipLoadPlansRespList')
|
|
this.executeSql1('shipInfoTable')
|
|
},
|
|
methods: {
|
|
// 查
|
|
executeSql1(tableName) {
|
|
let sql = `select * from ${tableName} WHERE vtpId = '${this.vtpId}'`
|
|
sqlite.executeSqlCeshi(sql).then((value) => {
|
|
// 在resolve时执行的回调函数
|
|
if (tableName == "shipInfoTable") {
|
|
this.shipInfo = value[0]
|
|
} else {
|
|
console.log(value)
|
|
this.allList = value
|
|
this.total = value.length
|
|
let newArr = this.getMapping(value, this.pageSize)
|
|
this.listInfo = newArr[this.current - 1];
|
|
this.listInfo.forEach(v => {
|
|
if (v.brdName == "null") {
|
|
this.$set(v, "brdName", "-")
|
|
}
|
|
if (v.mnfBl == "null") {
|
|
this.$set(v, "mnfBl", "-")
|
|
}
|
|
if (v.sourceType == "null") {
|
|
this.$set(v, "sourceType", "-")
|
|
}
|
|
if (v.yardPos == "null") {
|
|
this.$set(v, "yardPos", "-")
|
|
}
|
|
if (v.vvyName == "null") {
|
|
this.$set(v, "vvyName", "-")
|
|
}
|
|
if (v.customsDeclareStatus == "null") {
|
|
this.$set(v, "customsDeclareStatus", "-")
|
|
}
|
|
if (v.bvmName == "null") {
|
|
this.$set(v, "bvmName", "-")
|
|
}
|
|
if (v.amount == "null") {
|
|
this.$set(v, "amount", "-")
|
|
}
|
|
if (v.potName == "null") {
|
|
this.$set(v, "potName", "-")
|
|
}
|
|
if (v.customsDeclareNo == "null") {
|
|
this.$set(v, "customsDeclareNo", "-")
|
|
}
|
|
if (v.bvdName == "null") {
|
|
this.$set(v, "bvdName", "-")
|
|
}
|
|
if (v.agentName == "null") {
|
|
this.$set(v, "agentName", "-")
|
|
}
|
|
})
|
|
this.allList.forEach(v => {
|
|
// 型号
|
|
if (v.model != "null") {
|
|
this.modelList.push({
|
|
id: v.model,
|
|
text: v.model
|
|
})
|
|
}
|
|
// 品牌
|
|
if (v.brdId != "null" && v.brdName != "null") {
|
|
this.brdList.push({
|
|
id: v.brdId,
|
|
text: v.brdName
|
|
})
|
|
}
|
|
// 车型
|
|
if (v.bvmId != "null" && v.bvmName != "null") {
|
|
this.bvmList.push({
|
|
id: v.bvmId,
|
|
text: v.bvmName
|
|
})
|
|
}
|
|
// 港口
|
|
if (v.potId != "null" && v.potName != "null") {
|
|
this.potList.push({
|
|
id: v.potId,
|
|
text: v.potName
|
|
})
|
|
}
|
|
})
|
|
this.modelList = api.arrFrom(this.modelList, "text")
|
|
this.brdList = api.arrFrom(this.brdList, "text")
|
|
this.bvmList = api.arrFrom(this.bvmList, "text")
|
|
this.potList = api.arrFrom(this.potList, "text")
|
|
}
|
|
}).catch((error) => {
|
|
// 在reject时执行的回调函数
|
|
console.error(error);
|
|
});
|
|
},
|
|
// 分页切割数组(数组，分割个数)
|
|
getMapping(list, num) {
|
|
let len = list.length
|
|
let newList = []
|
|
if (len) {
|
|
var chunk = num
|
|
for (var i = 0, j = len; i < j; i += chunk) {
|
|
newList.push(list.slice(i, i + chunk))
|
|
}
|
|
}
|
|
return newList
|
|
},
|
|
changePage(e) {
|
|
this.current = e.current;
|
|
this.executeSql1('shipmentShipLoadPlansRespList')
|
|
},
|
|
// 点击搜索右侧图标
|
|
iconClick() {
|
|
if (this.searchValue != "") {
|
|
let listIndexArr = []
|
|
let newArr = []
|
|
this.allList.forEach((v, index) => {
|
|
if (v.brdName.indexOf(this.searchValue) != -1 || v.mnfBl.indexOf(this.searchValue) != -1) {
|
|
listIndexArr.push(index)
|
|
}
|
|
})
|
|
if (listIndexArr.length > 0) {
|
|
listIndexArr.forEach((v, index) => {
|
|
newArr.push(this.allList[v])
|
|
})
|
|
this.listInfo = newArr
|
|
} else {
|
|
this.listInfo = []
|
|
}
|
|
} else {
|
|
this.executeSql1('shipmentShipLoadPlansRespList')
|
|
}
|
|
},
|
|
// 点击筛选
|
|
screen() {
|
|
this.$refs.showRight.open();
|
|
},
|
|
// 返回
|
|
back() {
|
|
this.$refs.showRight.close();
|
|
},
|
|
// 点击型号
|
|
clickModel(item, index) {
|
|
this.activeIndex = index
|
|
},
|
|
// 品牌下拉
|
|
brdSelect(e) {
|
|
this.brdId = e.id
|
|
this.brdName = e.text
|
|
},
|
|
// 车型下拉
|
|
bvmSelect(e) {
|
|
this.bvmId = e.id
|
|
this.bvmName = e.text
|
|
},
|
|
// 港口下拉
|
|
potSelect(e) {
|
|
this.potId = e.id
|
|
this.potName = e.text
|
|
},
|
|
// 重置
|
|
reset() {
|
|
this.modelId = ""
|
|
this.modelName = ""
|
|
this.activeIndex = -1
|
|
this.brdId = ""
|
|
this.brdName = ""
|
|
this.bvmId = ""
|
|
this.bvmName = ""
|
|
this.potId = ""
|
|
this.potName = ""
|
|
this.minTon = ""
|
|
this.maxTon = ""
|
|
this.minWidth = ""
|
|
this.maxWidth = ""
|
|
this.minHeight = ""
|
|
this.maxHeight = ""
|
|
},
|
|
// 确认
|
|
confirm() {
|
|
this.$refs.showRight.close();
|
|
},
|
|
// 跳转车型明细
|
|
togoCar(item) {
|
|
let obj = {
|
|
id: item.webId,
|
|
}
|
|
const params = encodeURIComponent(JSON.stringify(obj));
|
|
uni.navigateTo({
|
|
url: `/pages/shipWork/carDetails?params=${params}`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.brandDetails {
|
|
.container {
|
|
padding-bottom: 30px;
|
|
background-color: #F6F7F9;
|
|
|
|
.topBox {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #FAFAFA;
|
|
border-top: 1px solid #EEEEEE;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
padding: 5px 10px;
|
|
|
|
.leftInput {
|
|
width: 400px;
|
|
}
|
|
|
|
/deep/.uni-easyinput {
|
|
width: 400px;
|
|
|
|
/deep/.content-clear-icon {
|
|
padding-right: 16px;
|
|
}
|
|
}
|
|
|
|
/deep/.is-input-border {
|
|
border-radius: 18.5px;
|
|
}
|
|
|
|
text {
|
|
margin-right: 10px;
|
|
color: #2979ff;
|
|
line-height: 36px;
|
|
}
|
|
}
|
|
|
|
/deep/.uni-drawer__content {
|
|
width: 300px;
|
|
}
|
|
|
|
.scroll-view {
|
|
/* #ifndef APP-NVUE */
|
|
width: 100%;
|
|
height: 100%;
|
|
/* #endif */
|
|
flex: 1
|
|
}
|
|
|
|
// 处理抽屉内容滚动
|
|
.scroll-view-box {
|
|
flex: 1;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 0 16px;
|
|
|
|
.drawerTop {
|
|
display: flex;
|
|
margin-top: 55px;
|
|
margin-bottom: 30px;
|
|
|
|
image {
|
|
width: 14px;
|
|
height: 24px;
|
|
margin-right: 16px;
|
|
margin-top: 3px;
|
|
}
|
|
|
|
text {
|
|
font-size: 20px;
|
|
color: #23262E;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.drawerTitle {
|
|
font-size: 14px;
|
|
color: #23262E;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.selectBox {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.boxContent {
|
|
width: 76px;
|
|
height: 32px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
border-radius: 4px;
|
|
border: 1px solid #EEEEEE;
|
|
color: #23262E;
|
|
line-height: 14px;
|
|
margin-right: 10px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.active {
|
|
background-color: rgba(0, 103, 207, .05);
|
|
color: #0267CF;
|
|
}
|
|
}
|
|
|
|
.qjBox {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
/deep/.uni-easyinput {
|
|
width: 96px;
|
|
flex: none;
|
|
}
|
|
|
|
/deep/.uni-easyinput__content {
|
|
width: 96px;
|
|
}
|
|
|
|
text {
|
|
line-height: 35px;
|
|
}
|
|
}
|
|
|
|
.bottomBtn {
|
|
width: 100%;
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
|
|
position: fixed;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
|
|
.btn {
|
|
width: 116px;
|
|
height: 36px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.czBtn {
|
|
color: #0067CF;
|
|
border: 1px solid #0067CF;
|
|
}
|
|
|
|
.qrBtn {
|
|
color: #fff;
|
|
background: #0067CF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ul {
|
|
padding: 16px;
|
|
|
|
.li {
|
|
background-color: #fff;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
|
|
.liTitle {
|
|
display: flex;
|
|
font-size: 16px;
|
|
color: #23262E;
|
|
font-weight: bold;
|
|
|
|
.titleImg {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 5px;
|
|
margin-top: 2px;
|
|
}
|
|
}
|
|
|
|
.liContent {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
p {
|
|
width: 22%;
|
|
margin: 10px;
|
|
color: rgba(0, 0, 0, .5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |