315 lines
6.9 KiB
Vue
315 lines
6.9 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="searchBox">
|
|
<uni-easyinput suffixIcon="search" v-model="searchValue" placeholder="品牌/提单号"
|
|
@iconClick="iconClick"></uni-easyinput>
|
|
<text @tap="screen">筛选</text>
|
|
<fjj-condition ref='condition' @touchmove.stop :color="color" :list="menuList"
|
|
:defaultValue="defaultValue" @result="resultConditon" />
|
|
</view>
|
|
</view>
|
|
<template v-if="listInfo.length > 0">
|
|
<view class="ul">
|
|
<view class="li" v-for="(item,index) in listInfo" :key="index" @click="togoCar(item)">
|
|
<p class="title">品牌：{{item.brdName}}</p>
|
|
<p>提单号：{{item.mnfBl}}</p>
|
|
<p>源类型：{{item.sourceType}}</p>
|
|
<p>场位：{{item.yardPos}}</p>
|
|
<p>航次：{{item.vvyName}}</p>
|
|
<p>报关状态：{{item.customsDeclareStatus}}</p>
|
|
<p>车型：{{item.bvmName}}</p>
|
|
<p>数量：{{item.amount}}</p>
|
|
<p>港口：{{item.potName}}</p>
|
|
<p>报关单号：{{item.customsDeclareNo}}</p>
|
|
<p>车型明细：{{item.bvdName}}</p>
|
|
<p>货代：{{item.agentName}}</p>
|
|
</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"
|
|
export default {
|
|
data() {
|
|
return {
|
|
title: "船名 - 品牌明细",
|
|
searchValue: "",
|
|
color: '#4D7BFE',
|
|
hasChoose: false,
|
|
menuList: [],
|
|
defaultValue: {},
|
|
listInfo: [],
|
|
allList: [],
|
|
vtpId: "",
|
|
|
|
// 分页
|
|
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')
|
|
setTimeout(() => {
|
|
this.menuList = [{
|
|
'title': '按港口',
|
|
'type': 'custom',
|
|
'key': 'custom1',
|
|
'isMutiple': true, //多选
|
|
'detailList': [{
|
|
title: '港口1',
|
|
value: "1",
|
|
isSelected: true
|
|
}, {
|
|
title: '港口2',
|
|
value: "2",
|
|
}, {
|
|
title: '港口3',
|
|
value: "3",
|
|
}, {
|
|
title: '港口4',
|
|
value: "4",
|
|
}, {
|
|
title: '港口5',
|
|
value: "5",
|
|
}, {
|
|
title: '港口6',
|
|
value: "6",
|
|
}],
|
|
}, {
|
|
'title': '按车型',
|
|
'type': 'custom',
|
|
'key': 'custom2',
|
|
'isMutiple': true, //多选
|
|
'detailList': [{
|
|
title: '车型1',
|
|
value: "1",
|
|
}, {
|
|
title: '车型2',
|
|
value: "2",
|
|
}, {
|
|
title: '车型3',
|
|
value: "3",
|
|
}, {
|
|
title: '车型4',
|
|
value: "4",
|
|
}, {
|
|
title: '车型5',
|
|
value: "5",
|
|
}, {
|
|
title: '车型6',
|
|
value: "6",
|
|
}, {
|
|
title: '车型7',
|
|
value: "7",
|
|
}],
|
|
}, {
|
|
'title': '按品牌',
|
|
'type': 'custom',
|
|
'key': 'custom3',
|
|
'isMutiple': true, //多选
|
|
'detailList': [{
|
|
title: '品牌1',
|
|
value: "1",
|
|
}, {
|
|
title: '品牌2',
|
|
value: "2",
|
|
}, {
|
|
title: '品牌3',
|
|
value: "3",
|
|
}, {
|
|
title: '品牌4',
|
|
value: "4",
|
|
}, {
|
|
title: '品牌5',
|
|
value: "5",
|
|
}, {
|
|
title: '品牌6',
|
|
value: "6",
|
|
}],
|
|
}, {
|
|
'title': '按型号',
|
|
'type': 'custom',
|
|
'key': 'custom4',
|
|
'isMutiple': true, //多选
|
|
'detailList': [{
|
|
title: '型号1',
|
|
value: "1",
|
|
}, {
|
|
title: '型号2',
|
|
value: "2",
|
|
}, {
|
|
title: '型号3',
|
|
value: "3",
|
|
}, {
|
|
title: '型号4',
|
|
value: "4",
|
|
}, {
|
|
title: '型号5',
|
|
value: "5",
|
|
}, {
|
|
title: '型号6',
|
|
value: "6",
|
|
}],
|
|
}, {
|
|
'title': '单选',
|
|
'type': 'custom',
|
|
'key': 'custom5',
|
|
'isMutiple': false, //单选
|
|
'detailList': [{
|
|
title: '选项1',
|
|
value: "1",
|
|
}, {
|
|
title: '选项2',
|
|
value: "2",
|
|
}],
|
|
}, ]
|
|
this.defaultValue = {
|
|
custom1: ['1'],
|
|
custom5: 1,
|
|
};
|
|
}, 2000)
|
|
},
|
|
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 {
|
|
this.allList = value
|
|
this.total = value.length
|
|
let newArr = this.getMapping(value, this.pageSize)
|
|
this.listInfo = newArr[this.current - 1];
|
|
}
|
|
}).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
|
|
this.total = 0
|
|
}
|
|
} else {
|
|
this.executeSql1('shipmentShipLoadPlansRespList')
|
|
}
|
|
},
|
|
// 点击筛选
|
|
screen() {
|
|
this.$refs.condition.visibleDrawer = true;
|
|
},
|
|
resultConditon(obj) {
|
|
this.$refs.condition.visibleDrawer = false;
|
|
this.hasChoose = obj.hasChoose;
|
|
},
|
|
// 跳转车型明细
|
|
togoCar(item) {
|
|
uni.setStorageSync('brandRow', item);
|
|
uni.navigateTo({
|
|
url: `/pages/shipWork/carDetails`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.brandDetails {
|
|
.container {
|
|
padding: 30px 20px;
|
|
background-color: #fff;
|
|
|
|
.topBox {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.searchBox {
|
|
width: 33%;
|
|
display: flex;
|
|
|
|
text {
|
|
margin-left: 10px;
|
|
color: #2979ff;
|
|
line-height: 36px;
|
|
}
|
|
|
|
/deep/.uni-drawer__content {
|
|
width: 500px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ul {
|
|
padding: 20px 0;
|
|
|
|
.li {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #ccc;
|
|
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
|
|
p {
|
|
width: 22%;
|
|
margin: 10px;
|
|
color: rgba(0, 0, 0, .5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |