<template>
|
<view class="">
|
<view class="customer-index">
|
<view class="customer-index_body">
|
<view class="wait-collection"
|
style="background: url('https://mr1.res.jzeg.cn:9096/appimg/image/banner/customerbanner.png') no-repeat;background-size:100% 100%">
|
</view>
|
<!-- <view style="position: relative;top: -120px;">
|
<u-empty mode="data"
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
textSize="30"
|
iconSize="1000"
|
v-if="CoalNameList.length == 0"></u-empty>
|
</view> -->
|
|
<view class="title"><u-icon size='26' color="#" name="order"></u-icon><i>待检区</i></view>
|
<view class="body">
|
<!-- <selectTarget ref='selectTarget'></selectTarget> -->
|
<view class="collection-form">
|
<u-tabs :list="tabList" :activeStyle="{fontSize:'26rpx'} " :itemStyle="{fontSize:'16px'
|
}" @click="tabClick"
|
lineWidth="50"
|
lineHeight="2"></u-tabs>
|
<view style="position: relative;">
|
<u-empty mode="data"
|
icon="http://cdn.uviewui.com/uview/empty/data.png"
|
textSize="30"
|
iconSize="1000"
|
text="暂无待检数据"
|
v-if="orderPlanData.length == 0"></u-empty>
|
</view>
|
<view class="collection-form-item"
|
v-for="(item, index) in orderPlanData"
|
:key="index">
|
<view class="first-line">
|
<view class="dispatch-receive">
|
<view class="dispatch-orderCode">编号：{{ item.code }}</view>
|
</view>
|
</view>
|
<view class="first-line">
|
|
<view class="dispatch-orderCode" style="font-size: 25rpx;">客户名称：{{ item.customerName }}</view>
|
|
</view>
|
<view class="second-line">
|
<view style="font-size: 20rpx;">{{ item.carNo }}</view>
|
</view>
|
<view class="first-line">
|
<view class="dispatch-receive">
|
<view class="dispatch-dept">{{ item.deptName }}</view>
|
<view class="black-bar"></view>
|
<view class="dispatch">{{ item.filedName }}</view>
|
</view>
|
<view class="point-number">
|
<text class="residue">{{ item.inspectionStatus === 0 ? '无需检验' :
|
item.inspectionStatus === 1 ? '需检验' :
|
item.inspectionStatus === 2 ? '待检验' :
|
item.inspectionStatus === 3 ? '检验合格' : ''
|
}}</text>
|
</view>
|
</view>
|
<view class="second-line"
|
style="width: 94%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
|
v-if="item.orderType==='内销'||item.orderType==='外购'">
|
{{item.customerName}}
|
</view>
|
<view class="second-line">
|
<view class="coal-name">
|
<view class="">{{ item.coalName }}</view>
|
<view class="black-bar"></view>
|
<view class="coal-type"
|
v-if="item.orderType">{{ item.orderType }}</view>
|
</view>
|
</view>
|
<view class="second-line" style="font-size: 20rpx;">
|
{{item.orderCode}}
|
</view>
|
<view class="third-line">
|
<view class="time-icon">
|
<view
|
style="width: 24rpx;height: 24rpx;line-height: 24rpx;background: url('https://mr1.res.jzeg.cn:9096/appimg/image/banner/clock.png') no-repeat;background-size: cover">
|
</view>
|
</view>
|
<view class="send-date">{{ item.sendDate }}</view>
|
</view>
|
<view class="fourth-line">
|
|
<view class="forward"
|
v-if="item.inspectionStatus!==3"
|
@click.stop="forwardClick(item)">
|
<u-button type="primary" text="确认取样"></u-button>
|
</view>
|
</view>
|
</view>
|
<view class="bottom"></view>
|
|
</view>
|
</view>
|
</view>
|
</view>
|
<u-modal :show="showFlag"
|
:title="'确认取样完成？'"
|
:cancelText="'取消'"
|
showCancelButton
|
:closeOnClickOverlay="true"
|
@close="showFlag = false"
|
@cancel="showFlag = false"
|
@confirm="popupDetermineClick">
|
</u-modal>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
components: {
|
|
},
|
watch:{
|
samplingData: {
|
handler(v) {
|
this.orderPlanData = v;
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
data() {
|
return {
|
orderPlanData:[],
|
tagName:'外销',
|
activeObj:{},
|
timer:null,
|
showFlag:false,
|
tabList:[{
|
name:'外销'
|
},
|
{
|
name:'外购'
|
}]
|
};
|
},
|
onLoad() {
|
this.init()
|
},
|
methods: {
|
init() {
|
this.$nextTick(() => {
|
if(this.tagName == '外购'){
|
this.getWaiData();
|
}else{
|
this.getListData();
|
}
|
|
})
|
},
|
getListData(){
|
this.$reqGet('inspectedTaskPage',{inspectionStatus:2}).then(res=>{
|
console.log(res,'result');
|
if(res.code == 0){
|
if(res.data.records.length){
|
this.orderPlanData = [res.data.records[0]]
|
}else{
|
this.orderPlanData = [];
|
}
|
|
}
|
|
})
|
},
|
//确认取样
|
forwardClick(item){
|
this.showFlag = true;
|
this.activeObj = item;
|
|
},
|
popupDetermineClick(){
|
this.$reqPut('updateInspectionStatus',{inspectionStatus:3,id:this.activeObj.id},'params').then(res=>{
|
console.log(res,'result');
|
if(res.code == 0){
|
this.$u.toast('确认取样完成！')
|
this.showFlag = false;
|
this.init();
|
}else{
|
this.$u.toast(res.msg || '请求失败')
|
this.showFlag = false;
|
}
|
|
})
|
|
},
|
//定时查询任务
|
timerFun(){
|
this.timer = window.setInterval(() => {
|
setTimeout(() => {
|
if(this.tagName == '外购'){
|
this.getWaiData()
|
}else{
|
this.getListData() //调用接口的方法
|
}
|
console.log(1111111111)
|
}, 0)
|
}, 60000);
|
},
|
clearTime(){
|
window.clearInterval(this.timer)
|
},
|
tabClick(val){
|
console.log(val,'valll')
|
this.tagName = val.name;
|
if(val.name == '外购'){
|
this.getWaiData();
|
}else{
|
this.getListData();
|
}
|
|
|
},
|
getWaiData(){
|
this.$reqGet('inspectedTaskPage',{inspectionStatus:1,status:5,orderType:'外购'}).then(res=>{
|
if(res.code == 0){
|
if(res.data.records.length){
|
this.orderPlanData = res.data.records;
|
}else{
|
this.orderPlanData = [];
|
}
|
|
}
|
})
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss"
|
scoped>
|
/* 大型设备（大台式电脑，1201px 起）*/
|
@media screen and (min-width: 1201px) {
|
.wait-collection{
|
min-height: 1800rpx!important;
|
}
|
}
|
|
/* 中型设备（台式电脑，992px 起） */
|
@media screen and (min-width: 991px) and (max-width: 1200px) {
|
.wait-collection{
|
min-height: 1400rpx!important;
|
}
|
}
|
|
|
/* 小型设备（平板电脑，768px 起） */
|
@media screen and (min-width: 768px) and (max-width: 990px) {
|
.wait-collection{
|
min-height: 600rpx!important;
|
}
|
}
|
|
/* 超小设备（手机，小于 768px）*/
|
@media only screen and (max-height: 767px) {
|
.wait-collection{
|
min-height: 600rpx!important;
|
}
|
}
|
@mixin flex {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.wait-collection {
|
width: 100%;
|
height: 600rpx;
|
position: relative;
|
top: vww(-10);
|
z-index: 0;
|
}
|
|
.customer-index {
|
width: 100%;
|
margin: 0 auto;
|
|
}
|
.body{
|
position: absolute;
|
top: 38%;
|
width: 97%;
|
left: 50%;
|
margin-left: -47%;
|
|
// box-shadow: 0 2px 18px 0 rgba(0, 0, 0, .2);
|
// background: #fff;
|
border-radius: 20rpx;
|
}
|
.bottom{
|
height: 200rpx;
|
}
|
.title{
|
position: absolute;
|
top: 34%;
|
left: 50%;
|
transform: translateX(-50%);
|
color: #fff;
|
font-size: 25rpx;
|
display: flex;
|
}
|
.collection-form {
|
|
margin: 0 vww(15);
|
position: relative;
|
transform: translateX(-20rpx);
|
|
|
.collection-form-item {
|
width: 100%;
|
height: 400rpx;
|
background: #ffffff;
|
box-shadow: 4rpx 6rpx 25rpx 0rpx rgba(73, 120, 240, 0.15);
|
border-radius: 20rpx;
|
overflow: hidden;
|
@include flex;
|
flex-direction: column;
|
position: relative;
|
align-items: flex-start;
|
margin-top: vww(10);
|
|
.first-line {
|
width: 94%;
|
height: vww(30);
|
margin: vww(10) vww(16) 0 vww(16);
|
display: flex;
|
justify-content: space-between;
|
|
.dispatch-receive {
|
width: 70%;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
|
.dispatch-dept {
|
font-size: 25rpx;
|
|
display: flex;
|
align-items: center;
|
}
|
.dispatch-orderCode{
|
width: 100%;
|
font-size: 25rpx;
|
}
|
|
.black-bar {
|
width: 2rpx;
|
font-size: 25rpx;
|
height: 30rpx;
|
background: #515151;
|
margin-left: vww(12);
|
}
|
|
.dispatch {
|
font-size: 25rpx;
|
margin-left: vww(12);
|
min-width: vww(50);
|
}
|
|
}
|
|
.point-number {
|
width: 15%;
|
|
text {
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #c78a64;
|
}
|
|
.residue {
|
font-size: 23rpx;
|
font-weight: 400;
|
color: #f81414;
|
}
|
}
|
}
|
|
.second-line {
|
width: 100%;
|
height: vww(30);
|
margin-left: vww(16);
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
|
.coal-name {
|
flex-grow: 1;
|
height: 30rpx;
|
font-size: 30rpx;
|
font-weight: 300;
|
color: #515151;
|
position: relative;
|
display: flex;
|
align-items: center;
|
|
.black-bar {
|
width: 2rpx;
|
height: 30rpx;
|
background: #515151;
|
margin-left: vww(12);
|
}
|
|
.coal-type {
|
margin-left: vww(12);
|
min-width: vww(50);
|
height: 30rpx;
|
line-height: 30rpx;
|
font-size: 30rpx;
|
font-weight: 300;
|
color: #515151;
|
}
|
}
|
}
|
|
.third-line {
|
width: 40%;
|
height: vww(30);
|
margin-left: vww(15);
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
|
.send-date {
|
margin-left: vww(14);
|
width: 168rpx;
|
height: 24rpx;
|
line-height: 24rpx;
|
font-size: 28rpx;
|
font-weight: 300;
|
color: #515151;
|
}
|
}
|
|
.fourth-line {
|
width: 100%;
|
height: vww(30);
|
@include flex;
|
justify-content: flex-start;
|
position: relative;
|
bottom: vww(10);
|
left: 25%;
|
|
.receive,
|
.forward {
|
width: vww(123);
|
height: vww(48);
|
@include flex;
|
justify-content: center;
|
color: #ffffff;
|
font-size: 28rpx;
|
position: absolute;
|
|
.button-image {
|
width: 100%;
|
height: 100%;
|
// background: url('../../../static/image/banner/button.png') no-repeat;
|
background-size: cover;
|
font-size: 28rpx;
|
font-weight: 300;
|
color: #ffffff;
|
text-align: center;
|
line-height: vww(45);
|
}
|
}
|
|
.receive {
|
left: vww(20);
|
}
|
|
.forward {
|
width: vww(106);
|
left: vww(140);
|
|
.button-image {
|
width: 100%;
|
height: 100%;
|
// background: url('../../../static/image/banner/transpartent.png') no-repeat;
|
background-size: cover;
|
font-size: 28rpx;
|
font-weight: 300;
|
color: #3b56eb;
|
text-align: center;
|
line-height: vww(45);
|
}
|
}
|
}
|
}
|
}
|
.receiverPopup {
|
height: vww(110);
|
width: 400rpx;
|
|
.receiverPopup__title {
|
|
width: 80%;
|
text-align: center;
|
}
|
|
.receiverPopup__input {
|
width: 80%;
|
margin: vww(10) auto 0;
|
|
.u-input {
|
border: 1px solid #dddddd;
|
}
|
}
|
|
&__btn {
|
margin: vww(10) auto;
|
width: 50%;
|
|
.u-button {
|
height: vww(20);
|
}
|
}
|
}
|
|
</style>
|
