651 lines
15 KiB
Vue
651 lines
15 KiB
Vue
<template>
|
|
<view class="app">
|
|
<head-info :navIndex="3"></head-info>
|
|
<view class="container">
|
|
<view class="content">
|
|
<view class="addBtn" @click="modify('add')">+ 新增</view>
|
|
<view class="form">
|
|
<view class="left">
|
|
<uni-easyinput suffixIcon="search" v-model="carValue" placeholder="请输入车架号"
|
|
@iconClick="iconClick" @input="inputChange">
|
|
</uni-easyinput>
|
|
</view>
|
|
<view class="right" @click="screen">
|
|
<p>船名/航次<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
|
<p>质损环节<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
|
<p>品牌<uni-icons type="bottom" style="margin-left: 5px;" size="16"></uni-icons></p>
|
|
</view>
|
|
</view>
|
|
<view class="itemList">
|
|
<template v-if="itemList.length > 0">
|
|
<view class="item" v-for="(item,index) in itemList" :key="index" @click="details(item)">
|
|
<view class="headTop">
|
|
<view class="leftHead">
|
|
<image src="../../static/images/zlIcon.png" mode=""></image>
|
|
<text>{{item.vinCode}}</text>
|
|
</view>
|
|
<view class="rightHead">
|
|
<view class="delBtn" @click.stop="del(item)" v-if="item.removableFlag == 1">
|
|
<image src="../../static/images/delBtn.png"></image>
|
|
<text>删除</text>
|
|
</view>
|
|
<view class="editBtn" @click.stop="modify('edit',item)">
|
|
<image src="../../static/images/editBtn.png"></image>
|
|
<text>编辑</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="col">
|
|
<text
|
|
v-if="item.spmIdAndVvyId != null && item.spmIdAndVvyId != ''">船名/航次：{{item.spmIdAndVvyId}}</text>
|
|
<text v-else>船名/航次：暂无计划</text>
|
|
</view>
|
|
<view class="col">
|
|
作业时间：{{item.workTime}}
|
|
</view>
|
|
|
|
</view>
|
|
<view class="row">
|
|
<view class="col">
|
|
货物状态：{{item.godStatusName}}
|
|
</view>
|
|
<view class="col">
|
|
质损概况：{{item.damageSituationName}}
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="col">
|
|
质损发生环节：{{item.qdLinkName}}
|
|
</view>
|
|
<view class="col">
|
|
车型：{{item.bvmName}}
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="col">
|
|
品牌：{{item.brdName}}
|
|
</view>
|
|
<view class="col">
|
|
场位：{{item.pos}}
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="col">
|
|
作业人：{{item.qdLiablePerson}}
|
|
</view>
|
|
<view class="col">
|
|
处置情况：{{item.disposalSituationName}}
|
|
</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>
|
|
<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>
|
|
<superwei-combox class="select" :candidates="shipList" :isJSON="true" keyName="shipVvy"
|
|
placeholder="船名/航次" v-model="shipValue" @select="shipChange"
|
|
@input="shipInput"></superwei-combox>
|
|
<view class="drawerTitle">
|
|
质损环节
|
|
</view>
|
|
<superwei-combox class="select" :candidates="zshjList" :isJSON="true" keyName="name"
|
|
placeholder="质损环节" v-model="zshjName" @select="zshjChange"></superwei-combox>
|
|
<view class="drawerTitle">
|
|
品牌
|
|
</view>
|
|
<superwei-combox class="select" :candidates="brandList" :isJSON="true" keyName="brdName"
|
|
placeholder="品牌" v-model="brandValue" @select="brandChange"></superwei-combox>
|
|
<view class="bottomBtn">
|
|
<view class="btn czBtn" @click="reset">
|
|
重置
|
|
</view>
|
|
<view class="btn qrBtn" @click="confirm">
|
|
确认
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</uni-drawer>
|
|
<uni-popup ref="popup" type="dialog">
|
|
<uni-popup-dialog confirmText="确定" content="是否删除该条数据？" @confirm="delConfirm"></uni-popup-dialog>
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import HeadInfo from '@/components/head-info/head-info';
|
|
let timerId
|
|
export default {
|
|
data() {
|
|
return {
|
|
loginObj: {},
|
|
// 查询值(车架号)
|
|
carValue: '',
|
|
// 品牌下拉
|
|
brandId: "",
|
|
brandValue: "",
|
|
brandList: [],
|
|
// 列表数据
|
|
itemList: [],
|
|
// 分页
|
|
total: 0,
|
|
pageSize: 10,
|
|
current: 1,
|
|
// 当前行数据
|
|
rowInfo: {},
|
|
|
|
// 港区信息
|
|
portObj: {},
|
|
|
|
// 船名下拉
|
|
shipList: [],
|
|
shipId: "",
|
|
shipValue: "",
|
|
shipSr: "",
|
|
vvyId: "",
|
|
|
|
// 质损发生环节下拉
|
|
zshjList: [],
|
|
zshjId: "",
|
|
zshjName: "",
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loginObj = uni.getStorageSync('loginObj')
|
|
this.portObj = uni.getStorageSync('portObj')
|
|
uni.setStorageSync('signImg', "")
|
|
uni.setStorageSync('hzzsImg', "")
|
|
uni.setStorageSync('isSign', true)
|
|
this.initData()
|
|
this.getBrand()
|
|
this.getShip()
|
|
this.getRadio()
|
|
},
|
|
onBackPress(options) {
|
|
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
|
if (options.from == 'backbutton') {
|
|
return true;
|
|
} else if (options.from == 'navigateBack') {
|
|
return false;
|
|
}
|
|
},
|
|
components: {
|
|
HeadInfo
|
|
},
|
|
methods: {
|
|
// 点击图标搜索
|
|
iconClick() {
|
|
this.initData()
|
|
},
|
|
// 点击筛选
|
|
screen() {
|
|
this.$refs.showRight.open();
|
|
},
|
|
// 返回
|
|
back() {
|
|
this.$refs.showRight.close();
|
|
},
|
|
// 重置
|
|
reset() {
|
|
// 船名/航次
|
|
this.shipId = ""
|
|
this.shipValue = ""
|
|
this.vvyId = ""
|
|
// 质损环节下拉
|
|
this.zshjId = ""
|
|
this.zshjName = ""
|
|
// 品牌
|
|
this.brandId = ""
|
|
this.brandValue = ""
|
|
},
|
|
// 筛选确认
|
|
confirm() {
|
|
this.current = 1
|
|
this.initData()
|
|
this.$refs.showRight.close();
|
|
},
|
|
// 获取列表数据
|
|
initData() {
|
|
uni.request({
|
|
url: `${this.$local}/api/goodsQuality/page?current=${this.current}&page=${this.pageSize}&brdId=${this.brandId}&vvyId=${this.vvyId}&qdLink=${this.zshjId}&vinCode=${this.carValue}`,
|
|
header: {
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|
},
|
|
method: 'GET', //请求方式，必须为大写
|
|
success: (res) => {
|
|
if (res.statusCode == 200) {
|
|
this.itemList = res.data.data.records
|
|
this.total = res.data.data.total
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 获取船名
|
|
getShip() {
|
|
let ieType = ""
|
|
let pamId = this.portObj.portId
|
|
let spmId = ""
|
|
let tradeType = ""
|
|
uni.request({
|
|
url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${this.shipSr}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${tradeType}`,
|
|
header: {
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|
},
|
|
method: 'GET', //请求方式，必须为大写
|
|
success: (res) => {
|
|
if (res.statusCode == 200) {
|
|
this.shipList = res.data.data
|
|
this.shipList.forEach(v => {
|
|
this.$set(v, "shipVvy", `${v.vslCnname} / ${v.vvyName} `)
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 船名/航次
|
|
shipChange(e) {
|
|
this.shipId = e.vslCd
|
|
this.shipValue = e.shipVvy
|
|
this.vvyId = e.vvyId
|
|
},
|
|
// 质损环节下拉
|
|
zshjChange(e) {
|
|
this.zshjId = e.value
|
|
this.zshjName = e.name
|
|
},
|
|
// 获取枚举(质损发生环节)
|
|
getRadio() {
|
|
uni.request({
|
|
url: this.$local + '/api/miniapp/typeRef/domain/QUALITY_DAMAGE_LINK',
|
|
header: {
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|
},
|
|
method: 'GET', //请求方式，必须为大写
|
|
success: (res) => {
|
|
if (res.data.status == 200) {
|
|
res.data.data.forEach(v => {
|
|
this.zshjList.push({
|
|
value: v.ptrCode,
|
|
name: v.ptrDesc
|
|
})
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 选择船输入框
|
|
shipInput(e) {
|
|
this.shipSr = e
|
|
if (e == '') {
|
|
this.vvyId = ""
|
|
this.vvyName = ""
|
|
this.shipId = ""
|
|
}
|
|
this.getShip()
|
|
},
|
|
// 获取品牌
|
|
getBrand() {
|
|
uni.request({
|
|
url: `${this.$local}/api/miniapp/queryBrand`,
|
|
header: {
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|
},
|
|
method: 'GET', //请求方式，必须为大写
|
|
success: (res) => {
|
|
if (res.statusCode == 200) {
|
|
this.brandList = res.data.data
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 品牌下拉选择
|
|
brandChange(e) {
|
|
this.brandId = e.brdId
|
|
this.brandValue = e.brdName
|
|
},
|
|
// 点击新增/编辑
|
|
modify(type, item) {
|
|
if (type == 'edit') {
|
|
let obj = {
|
|
type: "edit",
|
|
ygqId: item.ygqId
|
|
}
|
|
const params = encodeURIComponent(JSON.stringify(obj));
|
|
uni.navigateTo({
|
|
url: `/pages/quality/edit?params=${params}`
|
|
})
|
|
} else {
|
|
let obj = {
|
|
type: "add",
|
|
ygqId: ""
|
|
}
|
|
const params = encodeURIComponent(JSON.stringify(obj));
|
|
uni.navigateTo({
|
|
url: `/pages/quality/edit?params=${params}`
|
|
})
|
|
}
|
|
},
|
|
// 点击详情
|
|
details(item) {
|
|
let obj = {
|
|
ygqId: item.ygqId
|
|
}
|
|
const params = encodeURIComponent(JSON.stringify(obj));
|
|
uni.navigateTo({
|
|
url: `/pages/quality/details?params=${params}`
|
|
|
|
})
|
|
},
|
|
// 点击删除
|
|
del(item) {
|
|
this.$refs.popup.open()
|
|
this.rowInfo = item
|
|
},
|
|
// 删除确认
|
|
delConfirm() {
|
|
uni.request({
|
|
url: `${this.$local}/api/goodsQuality/delQuality/${this.rowInfo.ygqId}`,
|
|
header: {
|
|
'Content-Type': 'application/json', //自定义请求头信息
|
|
'Authorization': `Bearer ${this.loginObj.access_token}`
|
|
},
|
|
method: 'DELETE', //请求方式，必须为大写
|
|
success: (res) => {
|
|
console.log('接口返回------', res);
|
|
if (res.statusCode == 200) {
|
|
uni.showToast({
|
|
icon: 'success',
|
|
title: '删除成功'
|
|
});
|
|
this.initData()
|
|
} else {
|
|
uni.showModal({
|
|
title: '提示',
|
|
showCancel: false,
|
|
content: `${res.data.error_description}`
|
|
})
|
|
this.initData()
|
|
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 点击分页
|
|
changePage(e) {
|
|
this.current = e.current;
|
|
this.initData()
|
|
},
|
|
// 输入框值发生改变
|
|
inputChange(e) {
|
|
clearTimeout(timerId)
|
|
timerId = setTimeout(() => {
|
|
this.carValue = e
|
|
this.confirm()
|
|
},1000)
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.content {
|
|
flex: 1;
|
|
padding-bottom: 20px;
|
|
margin-top: 115px;
|
|
|
|
.addBtn {
|
|
position: fixed;
|
|
right: 50px;
|
|
bottom: 50px;
|
|
width: 90px;
|
|
height: 90px;
|
|
border-radius: 50%;
|
|
background-color: #2979ff;
|
|
color: #fff;
|
|
font-size: 22px;
|
|
text-align: center;
|
|
line-height: 90px;
|
|
font-weight: bold;
|
|
z-index: 999;
|
|
}
|
|
|
|
.form {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: #FAFAFA;
|
|
border-top: 1px solid #EEEEEE;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
padding: 10px 16px;
|
|
position: fixed;
|
|
top: 66px;
|
|
z-index: 995;
|
|
|
|
.button {
|
|
width: 90px;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
.left {
|
|
display: flex;
|
|
|
|
/deep/.is-input-border {
|
|
border-radius: 20px;
|
|
width: 300px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/deep/.uni-easyinput__placeholder-class {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
/deep/.content-clear-icon {
|
|
display: none;
|
|
}
|
|
|
|
/deep/.uni-easyinput__placeholder-class {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.btn {
|
|
height: 35px;
|
|
line-height: 35px;
|
|
margin-left: 0;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
background-color: #0067CF;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
display: flex;
|
|
|
|
p {
|
|
margin-left: 10px;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.itemList {
|
|
padding: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.item {
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 14px;
|
|
color: #23262E;
|
|
margin-bottom: 16px;
|
|
|
|
.headTop {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
|
|
.leftHead {
|
|
font-size: 16px;
|
|
color: #23262E;
|
|
font-weight: bold;
|
|
display: flex;
|
|
|
|
image {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 7px;
|
|
}
|
|
}
|
|
|
|
.rightHead {
|
|
font-size: 16px;
|
|
color: #1677FF;
|
|
display: flex;
|
|
|
|
.delBtn {
|
|
display: flex;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.editBtn {
|
|
display: flex;
|
|
}
|
|
|
|
image {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 8px;
|
|
margin-top: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.row {
|
|
width: 18%;
|
|
flex-direction: column;
|
|
display: flex;
|
|
}
|
|
|
|
.col {
|
|
margin-bottom: 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 右侧抽屉筛选
|
|
/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 80px;
|
|
|
|
.drawerTop {
|
|
display: flex;
|
|
margin-top: 24px;
|
|
margin-bottom: 30px;
|
|
|
|
image {
|
|
width: 10px;
|
|
height: 14px;
|
|
margin-right: 10px;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
text {
|
|
font-size: 20px;
|
|
color: #23262E;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.drawerTitle {
|
|
font-size: 14px;
|
|
color: #23262E;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |