<template>
|
<view>
|
<page-nav title="生产进度"></page-nav>
|
|
|
<view class="flex_center" style="margin: 20rpx;">
|
|
<!-- #ifdef H5 -->
|
<u--input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" :placeholder="placeholder"
|
style="width:100%;background-color: #fff;border-radius: 40rpx;" border="surround" suffixIcon="scan"
|
suffixIconStyle="color: #909399;font-size: 22px;" v-model="inputBoxValue"
|
@change="confirmInputBoxValue">
|
<template slot="suffix">
|
<u-icon name="scan" color="#909399" size="24" @click="scanClick"></u-icon>
|
</template>
|
</u--input>
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
<u-input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" :placeholder="placeholder"
|
style="width:100%;background-color: #fff;border-radius: 40rpx;" border="surround" suffixIcon="scan"
|
suffixIconStyle="color: #909399;font-size: 22px;" v-model="inputBoxValue"
|
@change="confirmInputBoxValue">
|
<template slot="suffix">
|
<u-icon name="scan" color="#909399" size="24" @click="scanClick"></u-icon>
|
</template>
|
</u-input>
|
<!-- #endif -->
|
|
<view class="flex_center marginLeft20" @click="popupShow=true">
|
<u--text size='16' color='#909399' text="筛选"></u--text>
|
<u--image :showLoading="true" src="../../static/img/sift.png" width="20px" height="20px"></u--image>
|
</view>
|
</view>
|
|
|
<u-alert :title="alertTitle" type="info"></u-alert>
|
|
|
<!-- 折叠面板 -->
|
<!-- <u-collapse @change="change" @close="close" @open="open"> -->
|
<!-- @change="collapseChange" -->
|
<u-collapse style="max-height: 590px;overflow: auto;">
|
<!-- :value='parseFloat(item.ordergoodqty)+"/"+parseFloat(item.orderqty)' -->
|
<u-collapse-item style="position: relative;" :title="item.ordercode" :name='item.ordercode'
|
:value='parseFloat(item.ordergoodqty)+"/"+parseFloat(item.orderqty)'
|
:label="item.children.length===0?'未派发':''" :disabled='item.children.length===0'
|
v-for="item in collapseArr" :key="item.ordercode">
|
|
|
<view style="position: absolute;width: 200rpx;left: 30rpx;top:34px;font-size: 24rpx;color: #999;">
|
{{item.partname}} {{item.partspec}}
|
</view>
|
|
<!-- <view style="position: absolute;width: 26%;left: 44%;top:16px;"> -->
|
<view style="position: absolute;width: 120px;left: 44%;top:16px;color:#0659ff"
|
@click="progressClick(item.ordercode)">
|
<!-- {{item.partname}}{{item.partspec}} -->
|
<u-line-progress :percentage="parseFloat((item.ordergoodqty*100/item.orderqty).toFixed(2))"
|
inactiveColor="#d1d6f5" height="10" activeColor="#0659ff"></u-line-progress>
|
</view>
|
|
<!-- <view style="position: absolute;width: 100px;right: 33px; top:13px; ">
|
<view class="" style="display: flex;justify-content: flex-end;">
|
<view style="color: #0659ff;">
|
{{parseFloat(item.ordergoodqty)}}
|
</view>
|
<view>
|
/{{ parseFloat(item.orderqty)}}
|
</view>
|
</view>
|
</view>
|
-->
|
|
|
<view v-if="radiovalue==='生产工单'" style="margin:0 0 5px">
|
<view class="flex_column">
|
<view style="display:flex">
|
<view class="titleFont" style="font-size: 14px;">产品编码：</view>
|
<view class="contentFont" style="font-size: 14px;">{{item.partcode}}</view>
|
</view>
|
<view style="display:flex">
|
<view class="titleFont" style="font-size: 14px;">产品名称：</view>
|
<view class="contentFont" style="font-size: 14px;">{{item.partname}}</view>
|
</view>
|
<view style="display:flex">
|
<view class="titleFont" style="font-size: 14px;">产品规格：</view>
|
<view class="contentFont" style="font-size: 14px;">{{item.partspec?item.partspec:'/'}}
|
</view>
|
</view>
|
</view>
|
</view>
|
|
|
<!-- {{item.children}} -->
|
<!-- <u--text class="u-collapse-content"> -->
|
<u-steps :current="-1" inactiveColor='#0659FF' direction="column">
|
<view v-for="(it,ind) in item.children" :key="item.ordercode+it.name+ind"
|
style="display: flex;align-items: center;">
|
|
<u-steps-item :title="it.code+'/'+it.name+it.spec"></u-steps-item>
|
<view class="" style="width: 100px;">
|
<u-line-progress :percentage="parseFloat((it.goodqty*100/it.planqty).toFixed(2))"
|
inactiveColor="#d1d6f5" height="10" activeColor="#0659ff"></u-line-progress>
|
</view>
|
<view style="width: 30%;text-align: right;">
|
<view class="" style="display: flex;justify-content: flex-end;">
|
<view style="color: #0659ff;">
|
{{parseFloat(it.goodqty)}}
|
</view>
|
<view>
|
/{{ parseFloat(it.planqty)}}
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</u-steps>
|
<!-- </u--text> -->
|
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
|
<!-- 弹出层 -->
|
<!-- closeIconPos='top-left' closeOnClickOverlay closeable='true' -->
|
<u-popup :show="popupShow" mode="right" @close="popupClose" @open="popupOpen">
|
<view style="margin: 120px 10px 20px;" class="flex_column">
|
|
<view style="display: flex;">
|
<view>
|
单据类型：
|
</view>
|
|
<u-radio-group v-model="radiovalue" placement="column" @change="groupChange"
|
style="margin-top: 4px;">
|
<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist"
|
:key="index+item.name" :label="item.name" iconSize='16' labelSize='16' :name="item.name">
|
<!-- @change="radioChange" -->
|
</u-radio>
|
</u-radio-group>
|
</view>
|
|
<view style="margin-top: 20px;display: flex;align-items: center;">
|
|
<view class="">
|
产品信息：
|
</view>
|
<view class="">
|
<u-button :hairline="true" shape="circle" icon="map" :plain="true"
|
style="width: 100px;height: 26px;" type="primary" text="选择产品" @click="chosePart"></u-button>
|
</view>
|
|
</view>
|
|
<view style="display: flex;flex-wrap: wrap;">
|
<u-tag style="width:220rpx;" :text="item.name" v-for="item in tagArr" :key="item.code"
|
:closable="true" :show="item.close" @close="tagClose(item)"></u-tag>
|
</view>
|
|
|
|
<view class="head" style="margin-top: 10px;">
|
<view class="head_block" style="height: 80rpx; display: flex;justify-content: space-around;">
|
<u-button :plain='today' style="width: 70px;height: 25px;" @click="dateChange('today')"
|
type="primary" shape="circle" text="今日">
|
</u-button>
|
<u-button :plain='month' style="width: 70px;height: 25px;" @click="dateChange('month')"
|
type="primary" shape="circle" text="本月">
|
</u-button>
|
<u-button :plain='custom' style="width: 70px;height: 25px;" @click="dateChange('custom')"
|
type="primary" shape="circle" text="自定义"></u-button>
|
</view>
|
</view>
|
|
<view v-if="!custom" class="flex_column"
|
style="display: flex;justify-content: space-around;width: 100%;">
|
<view class="" style="display: flex;justify-content: space-evenly;width: 100%;">
|
<view class="titleFont">开始日期</view>
|
<view class="titleFont">~</view>
|
<view class="titleFont">结束日期</view>
|
</view>
|
|
<u-button type="info" icon='calendar' iconColor="#0659FF" size="" @click="calendarClick"
|
:text="calendarRange">
|
</u-button>
|
</view>
|
|
<uni-calendar ref="calendar" :range='true' :insert="false" @confirm="calendarConfirm" />
|
|
</view>
|
</u-popup>
|
|
|
|
</view>
|
</template>
|
|
|
<script>
|
import {
|
ProductionScheduleKanban
|
} from '../../config/api.js';
|
export default {
|
onLoad(option) {
|
|
const _this = this
|
uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
|
uni.$on('scancodedate', function(content) {
|
console.log("扫描到的内容为:", content)
|
_this.getCheckScanDeviceQrCodeData(content)
|
})
|
|
|
console.log(option, 8)
|
},
|
|
onPullDownRefresh() {
|
setTimeout(() => {
|
this.init(() => {
|
uni.stopPullDownRefresh();
|
})
|
}, 1000);
|
},
|
|
data() {
|
return {
|
topRightMessageCount: '',
|
inputBoxValue: '',
|
alertTitle: '',
|
popupShow: false, //弹出层是否显示
|
collapseArr: [ //折叠面板数据
|
],
|
collapseArrAll: [], //所有
|
placeholder: '请输入工单信息',
|
radiovalue: '生产工单', //单据类型
|
// SO：销售订单 MO：生产订单 PO：生产工单
|
radiolist: [{
|
name: '销售订单'
|
},
|
{
|
name: '生产订单'
|
},
|
{
|
name: '生产工单'
|
},
|
],
|
|
today: true,
|
month: false,
|
custom: true,
|
|
// calendarRange: new Date().toISOString().slice(0, 10) + '~' + new Date().toISOString().slice(0,
|
// 10), //系统当前日期
|
calendarRange: new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(
|
2, '0') + '-01' + '~' + new Date().toISOString().slice(0, 10), //当月日期
|
|
|
|
tagArr: [
|
// {
|
// close: true,
|
// name: '电池包',
|
// code: '1002'
|
// }, {
|
// close: true,
|
// name: '电脑',
|
// code: '1003'
|
// }, {
|
// close: true,
|
// name: '8054光机',
|
// code: '1004'
|
// }, {
|
// close: true,
|
// name: 'G71674冲锋枪',
|
// code: '1005'
|
// }, {
|
// close: true,
|
// name: '8051光机',
|
// code: '1006'
|
// },
|
], //已选中的产品标签
|
|
|
}
|
},
|
created() {
|
|
},
|
mounted() {
|
this.init()
|
|
this.getProductionScheduleKanban()
|
},
|
methods: {
|
init() {
|
uni.stopPullDownRefresh();
|
},
|
|
|
getCheckboxValue(val) {
|
this.tagArr = []
|
val.forEach(i => {
|
this.tagArr.push({
|
close: true,
|
name: i.split('/')[1].trim(),
|
code: i.split('/')[0].trim()
|
})
|
})
|
},
|
|
// 接口获取
|
async getProductionScheduleKanban() {
|
let ordertype = '' // SO：销售订单 MO：生产订单 PO：生产工单
|
switch (this.radiovalue) {
|
case '生产工单':
|
this.alertTitle = '工单数量（共/个）'
|
this.placeholder = '请输入工单信息'
|
ordertype = 'PO'
|
break
|
case '生产订单':
|
this.alertTitle = '生产订单数量（共/个）'
|
this.placeholder = '请输入生产订单信息'
|
ordertype = 'MO'
|
break
|
case '销售订单':
|
this.alertTitle = '销售订单数量（共/个）'
|
this.placeholder = '请输入销售订单信息'
|
ordertype = 'SO'
|
break
|
}
|
|
|
const data = {
|
ordertype,
|
partcode: this.tagArr.map(i => i.code).join(','),
|
Ratetime: this.calendarRange,
|
|
}
|
const {
|
data: res
|
} = await ProductionScheduleKanban(data)
|
|
this.collapseArr = res
|
this.collapseArrAll = res
|
this.alertTitle = this.alertTitle.split('/')[0] + this.collapseArr.length + this.alertTitle.split('/')[
|
1]
|
|
},
|
|
|
//输入框回车确认事件
|
confirmInputBoxValue(val) {
|
this.collapseArr = this.collapseArrAll.filter((p) => {
|
return p.ordercode.indexOf(val) !== -1
|
})
|
|
|
switch (this.radiovalue) {
|
case '生产工单':
|
this.alertTitle = '工单数量（共/个）'
|
break
|
case '生产订单':
|
this.alertTitle = '生产订单数量（共/个）'
|
break
|
case '销售订单':
|
this.alertTitle = '销售订单数量（共/个）'
|
break
|
}
|
this.alertTitle = this.alertTitle.split('/')[0] + this.collapseArr.length + this.alertTitle.split('/')[
|
1]
|
|
},
|
|
// 点击扫码
|
scanClick() {
|
this.topScanClick()
|
},
|
|
// 扫码框点击
|
topScanClick() {
|
let that = this;
|
|
uni.scanCode({
|
onlyFromCamera: true,
|
// scanType: ['barCode', 'qrCode'],
|
scanType: ['qrCode'],
|
success: function(res) {
|
console.log('条码类型：' + res.scanType);
|
console.log('条码内容：' + res.result);
|
that.scanContent = res.result;
|
|
that.getCheckScanDeviceQrCodeData(that.scanContent);
|
},
|
complete: function(res) {
|
|
},
|
fail: function(res) {
|
console.log('条码类型：' + res.scanType);
|
console.log('条码内容：' + res.result);
|
}
|
|
});
|
},
|
|
getCheckScanDeviceQrCodeData(code) {
|
this.inputBoxValue = code
|
this.confirmInputBoxValue(this.inputBoxValue)
|
},
|
|
|
// 弹出层收起
|
popupClose() {
|
this.getProductionScheduleKanban()
|
this.popupShow = false
|
},
|
|
// 弹出层弹出
|
popupOpen() {
|
|
},
|
|
// 选择产品
|
chosePart() {
|
let arr = []
|
this.tagArr.forEach(i => {
|
arr.push(i.code + '/' + i.name)
|
})
|
uni.navigateTo({
|
url: './chda?param=' + JSON.stringify(arr)
|
});
|
},
|
|
// tag标签关闭
|
tagClose(val) {
|
this.tagArr.forEach((i, j) => {
|
if (i.code === val.code) {
|
i.close = false
|
this.tagArr.splice(j, 1)
|
}
|
})
|
},
|
|
// 时间范围切换
|
dateChange(val) {
|
if (val === 'today') {
|
this.today = false
|
this.month = true
|
this.custom = true
|
this.calendarRange = new Date().toISOString().slice(0, 10) + '~' + new Date().toISOString().slice(0,
|
10)
|
} else if (val === 'month') {
|
this.today = true
|
this.month = false
|
this.custom = true
|
|
this.calendarRange = new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(
|
2, '0') + '-01' + '~' + new Date().toISOString().slice(0, 10)
|
|
} else if (val === 'custom') {
|
this.today = true
|
this.month = true
|
this.custom = false
|
this.calendarRange = new Date().getFullYear() + '-' + (new Date().getMonth() + 1).toString().padStart(
|
2, '0') + '-01' + '~' + new Date().toISOString().slice(0, 10)
|
}
|
},
|
|
// 日历时间点击
|
calendarClick() {
|
this.$refs.calendar.open();
|
},
|
|
// 日历确定事件点击
|
calendarConfirm(val) {
|
if (val.range.before < val.range.after) {
|
this.calendarRange = val.range.before + '~' + val.range.after
|
} else {
|
this.calendarRange = val.range.after + '~' + val.range.before
|
}
|
|
if (val.range.before === '') {
|
this.calendarRange = new Date().toISOString().slice(0, 10) + '~' + val.range.after
|
}
|
if (val.range.after === '') {
|
this.calendarRange = val.range.before + '~' + new Date().toISOString().slice(0, 10)
|
}
|
if (val.range.before === '' && val.range.after === '') {
|
this.calendarRange = new Date().toISOString().slice(0, 10) + '~' + new Date().toISOString().slice(0,
|
10)
|
}
|
// this.getData()
|
},
|
|
|
// 单选按钮切换
|
groupChange(val) {
|
console.log(val)
|
},
|
|
|
|
|
|
|
|
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import url('@/style/global.css');
|
|
::v-deep .uicon-arrow-left>span {
|
display: block;
|
}
|
|
::v-deep .u-alert__text--info--light {
|
margin-bottom: 0;
|
font-size: 32rpx !important;
|
padding-left: 10rpx;
|
color: #212121 !important;
|
font-weight: lighter;
|
}
|
|
::v-deep .u-alert--info--light {
|
background-color: rgba(255, 255, 255, 0.7);
|
}
|
|
::v-deep .u-steps-item__wrapper {
|
background-color: #eee;
|
}
|
|
::v-deep .u-steps-item__line--column {
|
display: none;
|
}
|
|
::v-deep .u-slide-right-enter-active {
|
width: 70%;
|
}
|
|
::v-deep .uicon-calendar {
|
font-size: 36rpx !important;
|
}
|
|
::v-deep .u-cell__title-text {
|
font-size: 28rpx;
|
color: #212121;
|
}
|
|
::v-deep .u-cell__value {
|
font-size: 28rpx;
|
// color: transparent;
|
color: #212121;
|
|
}
|
|
::v-deep .u-cell__label {
|
margin-top: 0;
|
line-height: 12px;
|
}
|
|
::v-deep .uicon-arrow-right {
|
font-size: 14px !important;
|
color: #212121 !important;
|
}
|
|
::v-deep .u-line-progress__text {
|
// margin-right: -20px;
|
// color: #212121;
|
// width: 100px;
|
// margin-top: 10px;
|
display: none;
|
|
}
|
|
::v-deep .u-text__value--content {
|
font-size: 12px !important;
|
}
|
|
::v-deep .u-tag__close {
|
background: #436df5 !important;
|
}
|
|
::v-deep .u-cell__body {
|
padding-bottom: 40rpx;
|
}
|
</style>
|
