<template>
|
<view class="work-order-list">
|
<view class="page-head">
|
<u-navbar title="工单列表" :border-bottom="false"
|
:background="background"
|
:title-bold="true" title-color="#000"
|
back-icon-color="#000" />
|
<view class="search">
|
<u-search placeholder="请输入销售订单号搜索" v-model="query.keyWord" bgColor="#fff"
|
placeholderColor="#999999" :showAction="false" style="margin: 35rpx;"
|
searchIconColor="#6A6A6A" height="74" @search="search" @change="search"></u-search>
|
<u-icon name="scan" color="#2979ff" size="40" class="icon" @click="scanCode"></u-icon>
|
</view>
|
<view class="tab">
|
<span v-for="(item,index) in tabs" :key="index" @click="changeTab(item)" :class="{active:currentTab===item.value}">{{ item.label }}</span>
|
</view>
|
</view>
|
<scroll-view class="scroll-list" scroll-y="true">
|
<view v-for="(item,index) in list" :key="'item'+index" class="list-item">
|
<view class="work" @click="goWorkReporting(item)">
|
<span>报工</span>
|
<u-icon class="icon_right" size="24rpx"/>
|
</view>
|
<h4>
|
<u-icon class="icon_5" size="24rpx"/>
|
<text selectable="true">{{ item.optaskNo }}</text>
|
</h4>
|
<view class="item-box">
|
<p>
|
<u-icon class="icon_7" size="24rpx"/>
|
<text selectable="true">图号：{{item.drawNo}}</text>
|
</p>
|
<p>
|
<u-icon class="icon_6" size="24rpx"/>
|
<text selectable="true">零件名称：{{item.partName}}</text>
|
</p>
|
<p>
|
<u-icon class="icon_8" size="24rpx"/>
|
<text selectable>计划完成时间：{{item.plannedFinishDate}}</text>
|
</p>
|
<view class="progress">
|
<u-line-progress :percent="(item.completedQuantity/item.plannedQuantity)*100" :show-percent="false" :round="false"
|
active-color="#214DED" height="23" style="margin-left: 30rpx;"></u-line-progress>
|
<span style="font-weight: 500;font-size: 26rpx;color: #999999;margin-left: 18rpx;"><span style="color: #333333;">{{ item.completedQuantity }}</span>/{{ item.plannedQuantity }}</span>
|
</view>
|
</view>
|
</view>
|
<p v-if="list.length === 0" style="text-align: center;margin-top: 100rpx;color: rgb(96, 98, 102);
|
font-size: 28rpx;">暂无数据</p>
|
</scroll-view>
|
|
</view>
|
</template>
|
|
<script>
|
import content_bg from '@/static/custom/daily/img8.png'
|
import UIcon from "../../../uview-ui/components/u-icon/u-icon.vue";
|
|
export default {
|
components: {UIcon},
|
data() {
|
return {
|
background: {
|
// background:'transparent'
|
backgroundImage: `url(${content_bg})`,
|
backgroundAttachment: 'fixed',
|
backgroundSize: '100% auto',
|
backgroundRepeat: 'no-repeat',
|
},
|
tabs:[
|
{
|
label: '全部',
|
value: ''
|
},
|
{
|
label: '待开始',
|
value: '01pending'
|
},
|
{
|
label: '进行中',
|
value: '02inProgress'
|
},
|
],
|
currentTab: '',
|
loadStatus: 'loadmore',
|
total:0,
|
query:{
|
workstationId: '',
|
toId: '',
|
clazzType: '',
|
state: '',
|
keyWord: ''
|
},
|
list:[],
|
toId: '',
|
workstationId: '',
|
dutyNo: '',
|
clazzType: '',
|
userStaffNo: [],
|
workstationName: '',
|
staffNameJoin: ''
|
}
|
},
|
onLoad(e) {
|
this.workstationId = e.workstationId
|
this.toId = e.toId
|
this.clazzType = e.clazzType
|
this.dutyNo = e.dutyNo
|
this.userStaffNo = e.userStaffNo
|
this.workstationName = e.workstationName
|
this.staffNameJoin = e.staffNameJoin
|
|
this.query = {
|
workstationId: this.workstationId,
|
toId: this.toId,
|
clazzType: this.clazzType
|
}
|
this.loadList();
|
},
|
onShow () {
|
this.loadList();
|
},
|
methods: {
|
changeTab(item){
|
this.currentTab = item.value;
|
this.search()
|
},
|
// 在此加载列表
|
loadList(){
|
this.$u.api.dailyPaper.getOperationTask(this.query).then(res => {
|
console.log(res)
|
if (res.code === 0) {
|
this.list = res.data
|
this.list.forEach(item => {
|
item.plannedFinishDate = item.plannedFinishDate.slice(0,10)
|
})
|
}
|
});
|
},
|
// 搜索
|
search(e){
|
if (e) {
|
this.query.keyWord = e
|
} else {
|
this.query = {
|
workstationId: this.workstationId,
|
toId: this.toId,
|
clazzType: this.clazzType,
|
state: this.currentTab
|
}
|
}
|
this.loadList()
|
},
|
scanCode() {
|
uni.scanCode({
|
success: async (res) => {
|
// 扫描结果处理逻辑
|
uni.showToast({
|
title: '扫码成功',
|
icon: 'success'
|
})
|
// 将扫码结果保存到scanResult变量中
|
var jsonObject = JSON.parse(res.result);
|
this.query.keyWord = jsonObject.order_no
|
this.search(jsonObject.order_no)
|
},
|
fail: (err) => {
|
console.error('扫描失败：' + err);
|
}
|
});
|
},
|
goWorkReporting (item) {
|
item.workstationId = this.workstationId
|
item.clazzType = this.clazzType
|
item.dutyNo = this.dutyNo
|
item.userStaffNo = this.userStaffNo
|
item.workstationName = this.workstationName
|
item.staffNameJoin = this.staffNameJoin
|
uni.navigateTo({
|
url: '/pages/daily/common/work-reporting?info=' + encodeURIComponent(JSON.stringify(item))
|
})
|
},
|
goWorkReportingDetail (item) {
|
if(item.workCenter == 'TX-01'&&item.operationName=="横剪"){
|
item.workstationId = this.workstationId
|
item.clazzType = this.clazzType
|
item.dutyNo = this.dutyNo
|
item.userStaffNo = this.userStaffNo
|
item.workstationName = this.workstationName
|
item.staffNameJoin = this.staffNameJoin
|
uni.navigateTo({
|
url: '/pages/daily/common/work-reporting-detail?info=' + encodeURIComponent(JSON.stringify(item))
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.work-order-list{
|
width: 100%;
|
height: 100vh;
|
background: #E6EFFF;
|
overflow-y: auto;
|
box-sizing: border-box;
|
padding-bottom: 24rpx;
|
position: relative;
|
.page-head{
|
height: 376rpx;
|
display: flex;
|
flex-direction: column;
|
//justify-content: flex-start;
|
background-image: url('~@/static/custom/daily/img8.png');
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
position: fixed;
|
width: 100%;
|
z-index: 99;
|
.search{
|
position: relative;
|
.icon{
|
position: absolute;
|
right: 60rpx;
|
top: 50%;
|
transform: translate(0,-50%);
|
}
|
}
|
.tab{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
box-sizing: border-box;
|
padding: 0 32rpx;
|
font-weight: 500;
|
font-size: 36rpx;
|
color: #333333;
|
span.active{
|
color: #214DED;
|
}
|
}
|
}
|
.scroll-list{
|
box-sizing: border-box;
|
padding: 0 32rpx;
|
top: 376rpx;
|
overflow-y: auto;
|
position: absolute;
|
.list-item{
|
background: #FFFFFF;
|
border-radius: 10rpx;
|
box-sizing: border-box;
|
padding: 32rpx 16rpx;
|
margin-bottom: 20rpx;
|
position: relative;
|
h4{
|
display: flex;
|
align-items: center;
|
font-weight: bold;
|
font-size: 28rpx;
|
color: #333333;
|
margin-bottom: 25rpx;
|
.icon_5 {
|
background-image: url('~@/static/custom/daily/icon_5.png');
|
background-repeat: no-repeat;
|
background-size: cover;
|
height: 24rpx;
|
width: 24rpx;
|
margin-right: 6rpx;
|
position: relative;
|
}
|
}
|
.item-box{
|
background: #F5F9FF;
|
border-radius: 10rpx;
|
box-sizing: border-box;
|
padding: 30rpx 24rpx;
|
p{
|
font-weight: 500;
|
font-size: 26rpx;
|
color: #333333;
|
margin-bottom: 24rpx;
|
.icon_7 {
|
background-image: url('~@/static/custom/daily/icon_7.png');
|
background-repeat: no-repeat;
|
background-size: cover;
|
height: 24rpx;
|
width: 24rpx;
|
margin-right: 6rpx;
|
margin-bottom: 6rpx;
|
vertical-align: middle;
|
position: relative;
|
}
|
.icon_6 {
|
background-image: url('~@/static/custom/daily/icon_6.png');
|
background-repeat: no-repeat;
|
background-size: cover;
|
height: 24rpx;
|
width: 24rpx;
|
margin-right: 6rpx;
|
margin-bottom: 6rpx;
|
vertical-align: middle;
|
position: relative;
|
}
|
.icon_8 {
|
background-image: url('~@/static/custom/daily/icon_8.png');
|
background-repeat: no-repeat;
|
background-size: cover;
|
height: 24rpx;
|
width: 24rpx;
|
margin-right: 6rpx;
|
margin-bottom: 6rpx;
|
vertical-align: middle;
|
position: relative;
|
}
|
}
|
.progress{
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
}
|
.work{
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 136rpx;
|
height: 56rpx;
|
background-image: url('~@/static/custom/daily/icon_bt_bg.png');
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
color: #FFFFFF;
|
font-weight: 500;
|
font-size: 30rpx;
|
.icon_right {
|
background-image: url('~@/static/custom/daily/icon_right.png');
|
background-repeat: no-repeat;
|
background-size: cover;
|
height: 24rpx;
|
width: 24rpx;
|
margin-left: 10rpx;
|
margin-top: 4rpx;
|
position: relative;
|
}
|
}
|
}
|
}
|
}
|
::v-deep.u-close-wrap {
|
position: absolute;
|
right: 110rpx;
|
}
|
::v-deep.uni-input-input {
|
width: 82%;
|
}
|
</style>
|
