pad-app/pages/quality/index.vue

358 lines
8.3 KiB
Vue

<template>
<view class="app">
<head-info :navIndex="3"></head-info>
<view class="container">
<view class="content">
<view class="form">
<button type="primary" class="button" @click="modify('add','')">
<uni-icons type="plusempty" color="#fff" size="20"></uni-icons>
</button>
<view class="right">
<superwei-combox class="select" :candidates="shipList" :isJSON="true" keyName="vslCnname"
placeholder="请选择船名" v-model="shipValue" @select="shipChange"></superwei-combox>
<superwei-combox class="select" :candidates="brandList" :isJSON="true" keyName="brdName"
placeholder="请选择品牌" v-model="brandValue" @select="brandChange"></superwei-combox>
</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="row">
<view class="col weight">
{{item.vinCode}}
</view>
<view class="col">
品牌:{{item.brdName}}
</view>
<view class="col">
货物状态:{{item.godStatusName}}
</view>
</view>
<view class="row">
<view class="col">
航次/船名:{{item.spmIdAndVvyId}}
</view>
<view class="col">
车型:{{item.bvmName}}
</view>
<view class="col">
场位:{{item.pos}}
</view>
</view>
<view class="row">
<view class="col">
作业时间:{{item.workTime}}
</view>
<view class="col">
作业人:{{item.qdLiablePerson}}
</view>
<view class="col">
质损发生环节:{{item.qdLinkName}}
</view>
</view>
<view class="row">
<view class="col">
质损概况:{{item.damageSituationName}}
</view>
<view class="col">
处置情况:{{item.disposalSituationName}}
</view>
</view>
<view class="rowFoot">
<view class="col" @click.stop="modify('edit',item)">
编辑
</view>
<view class="col" @click.stop="del(item)">
删除
</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-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';
export default {
data() {
return {
loginObj: {},
// 查询值
queryValue: '',
// 品牌下拉
brandId: "",
brandValue: "",
brandList: [],
// 列表数据
itemList: [],
// 分页
total: 0,
pageSize: 10,
current: 1,
// 当前行数据
rowInfo: {},
// 港区信息
portObj: {},
// 船名下拉
shipList: [],
shipId: "",
shipValue: "",
vvyId: "",
}
},
onLoad() {
this.loginObj = uni.getStorageSync('loginObj')
this.portObj = uni.getStorageSync('portObj')
uni.setStorageSync('signObj', "")
this.initData()
this.getBrand()
this.getShip()
},
onBackPress(options) {
// 触发返回就会调用此方法,这里实现的是禁用物理返回,顶部导航栏的自定义返回 uni.navigateBack 仍可使用
if (options.from == 'backbutton') {
return true;
} else if (options.from == 'navigateBack') {
return false;
}
},
components: {
HeadInfo
},
methods: {
// 获取列表数据
initData() {
uni.request({
url: `${this.$local}/api/goodsQuality/page?current=${this.current}&page=${this.pageSize}&brdId=${this.brandId}&vvyId=${this.vvyId}`,
header: {
'Content-Type': 'application/json', //自定义请求头信息
'Authorization': `Bearer ${this.loginObj.access_token}`
},
method: 'GET', //请求方式,必须为大写
success: (res) => {
console.log('接口返回------', res);
if (res.statusCode == 200) {
this.itemList = res.data.data.records
this.total = res.data.data.total
}
}
})
},
// 获取船名
getShip() {
let ieType = ""
let key = ""
let pamId = this.portObj.portId
let spmId = ""
let tradeType = ""
uni.request({
url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&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) {
console.log(res)
this.shipList = res.data.data
}
}
})
},
// 船名/航次
shipChange(e) {
this.shipId = e.vslCd
this.shipValue = e.vslCnname
this.vvyId = e.vvyId
this.current = 1
this.initData()
},
// 获取品牌
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
this.current = 1
this.initData()
},
// 点击新增/编辑
modify(type, item) {
let obj = {
type: type,
ygqId: item.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.showToast({
icon: 'error',
title: `${res.data.error_description}`
});
this.initData()
}
}
})
},
// 点击分页
changePage(e) {
this.current = e.current;
this.initData()
},
}
};
</script>
<style lang="less" scoped>
.container {
display: flex;
}
.content {
flex: 1;
padding: 20px;
.form {
display: flex;
justify-content: space-between;
height: 40px;
line-height: 40px;
.button {
width: 90px;
height: 35px;
line-height: 35px;
text-align: center;
margin: 0;
}
.right {
display: flex;
justify-content: space-between;
.select {
width: 130px;
height: 35px;
margin-left: 20px;
}
/deep/.is-input-border {
height: 35px;
}
}
}
.itemList {
margin-top: 30px;
.item {
padding: 20px 0;
border-bottom: 2px solid #e9e9e9;
display: flex;
justify-content: space-between;
.weight {
font-weight: 900;
}
.row {
width: 22%;
flex-direction: column;
display: flex;
}
.col {
margin-bottom: 10px;
}
.rowFoot {
width: 12%;
display: flex;
justify-content: space-around;
color: #1890ff;
.col {
display: flex;
flex-direction: column;
justify-content: center;
}
.col:last-child {
color: red;
}
}
}
}
.pageBox {
margin-top: 20px;
}
}
</style>