<template>
|
<scroll-view scroll-y>
|
<view>
|
<view class="container">
|
<view class="text-box">
|
<view class="text-title"><text>物料号</text></view>
|
<view class="text-title"><text>{{matData.matnr}}</text></view>
|
</view>
|
<view class="text-box">
|
<view class="text-title"><text>物料名</text></view>
|
<view class="text-title">{{matData.maktx}}</view>
|
</view>
|
<view class="text-box">
|
<view class="text-title"><text>规格</text></view>
|
<view class="text-title">{{matData.specs}}</view>
|
</view>
|
<view class="text-box">
|
<view class="text-title"><text>批号</text></view>
|
<view class="text-title"><input type="text" v-model="matData.batch"></view>
|
</view>
|
<view class="text-box">
|
<view class="text-title">
|
<text style="font-size: 24rpx;">属性</text>
|
</view>
|
|
<view class="attr-row">
|
<picker
|
:range="commonProps"
|
:value="selectedIndex"
|
@change="onPropChange"
|
class="half-box"
|
>
|
<view class="picker-box">
|
<text>{{ matData.proType || '请选择属性' }}</text>
|
</view>
|
</picker>
|
|
<input
|
type="text"
|
v-model="matData.proType"
|
placeholder="手动输入其他属性"
|
class="half-box"
|
/>
|
|
</view>
|
</view>
|
|
|
<view class="text-box">
|
<view class="text-title"><text>客户图号</text></view>
|
<view class="text-title"><input type="text" v-model="matData.temp2"></view>
|
</view>
|
<view class="text-box">
|
<view class="text-title"><text>合同号</text></view>
|
<view class="text-title"><input type="text" v-model="matData.outOrderNo"></view>
|
</view>
|
<view class="text-box">
|
<view class="text-title"><text>数量</text></view>
|
<view class="text-title">
|
<view>
|
<uni-number-box :value="matData.anfme" :max="999999999" :step="1" color="#747474" @change="changeValue"/>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="foot flex justify-center">
|
<label>
|
<button class="cu-btn bg-blue" @click="back()">提取</button>
|
</label>
|
</view>
|
</scroll-view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
const now = new Date();
|
const formatTime = (date) => {
|
return {
|
year: String(date.getFullYear()),
|
month: String(date.getMonth() + 1).padStart(2, '0'),
|
day: String(date.getDate()).padStart(2, '0'),
|
hour: String(date.getHours()).padStart(2, '0'),
|
minute: String(date.getMinutes()).padStart(2, '0'),
|
second: String(date.getSeconds()).padStart(2, '0'),
|
};
|
};
|
return {
|
matData: {
|
matnr: null,
|
maktx: null,
|
batch: null,
|
anfme: null,
|
unit: null,
|
proType: null,
|
temp2: null,
|
outOrderNo:null,
|
startTime: '',
|
endTime: ''
|
},
|
commonProps: [
|
'4Ni','6Ni', '8Ni', '10Ni', '镀铬', '本色',
|
'镀镍', '电镀', '玫瑰金', 'PVD拉丝金封哑油', 'PVD拉丝镍封哑油',
|
'电泳亚黑', '水镀枪灰', '拉丝', '钛金', '亮白',
|
'体抛沙铜本色', '抛光', '过砂'
|
],
|
selectedIndex: -1,
|
startTime: formatTime(now),
|
endTime: formatTime(now),
|
baseIP: '',
|
basePORT: '',
|
};
|
},
|
onLoad(option) {
|
let that = this;
|
|
// #ifdef APP-NVUE
|
const eventChannel = this.$scope.eventChannel;
|
// #endif
|
// #ifndef APP-NVUE
|
const eventChannel = this.getOpenerEventChannel();
|
// #endif
|
|
eventChannel.on('matData', function (data) {
|
Object.assign(that.matData, data.data); // 保持响应式
|
that.matData.anfme = 1;
|
|
if (that.matData.proType) {
|
that.selectedIndex = that.commonProps.indexOf(that.matData.proType);
|
}
|
});
|
},
|
|
methods: {
|
onPropChange(e) {
|
this.selectedIndex = e.detail.value;
|
this.matData.proType = this.commonProps[this.selectedIndex];
|
},
|
|
validateNumber(field, type) {
|
const value = this[type][field];
|
// 只允许输入数字
|
if (!/^\d*$/.test(value)) {
|
this[type][field] = value.replace(/\D/g, ''); // 去除非数字字符
|
}
|
|
let max = 59; // 默认最大值
|
if (field === 'year') max = 9999; // 年最大值为 9999
|
if (field === 'month') max = 12; // 月最大值为 12
|
if (field === 'day') max = 31; // 日最大值为 31
|
if (field === 'hour') max = 23; // 小时最大值为 23
|
if (field === 'minute' || field === 'second') max = 59; // 分钟和秒最大值为 59
|
|
// 限制输入范围
|
if (parseInt(value, 10) > max) {
|
this[type][field] = max.toString(); // 如果超出范围，设置为最大值
|
}
|
|
// 自动更新完整时间
|
this.updateFullDate(type);
|
},
|
clearInput(field, type) {
|
this[type][field] = ''; // 清空指定字段的值
|
},
|
updateFullDate(type) {
|
const timeData = this[type];
|
const { year, month, day, hour, minute, second } = timeData;
|
if (
|
year.length === 4 &&
|
month.length === 2 &&
|
day.length === 2 &&
|
hour.length === 2 &&
|
minute.length === 2 &&
|
second.length === 2
|
) {
|
// 拼装为完整时间
|
const fullDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
|
// 验证是否符合有效的时间格式
|
if (this.isValidDate(fullDate)) {
|
this.matData[type === 'startTime' ? 'startTime' : 'endTime'] = fullDate;
|
} else {
|
uni.showToast({ title: '时间格式错误', icon: 'none', duration: 2000 });
|
}
|
}
|
},
|
|
isValidDate(dateStr) {
|
const date = new Date(dateStr);
|
return date.toString() !== 'Invalid Date' && dateStr === this.formatDateTime(date);
|
},
|
|
formatDateTime(date) {
|
const yyyy = date.getFullYear();
|
const MM = String(date.getMonth() + 1).padStart(2, '0');
|
const dd = String(date.getDate()).padStart(2, '0');
|
const HH = String(date.getHours()).padStart(2, '0');
|
const mm = String(date.getMinutes()).padStart(2, '0');
|
const ss = String(date.getSeconds()).padStart(2, '0');
|
return `${yyyy}-${MM}-${dd} ${HH}:${mm}:${ss}`;
|
},
|
blur() { },
|
focus() { },
|
changeLog() { },
|
changeValue(value) {
|
this.matData.anfme = value;
|
},
|
back() {
|
if (this.matData.anfme === 0) {
|
uni.showToast({ title: '请输入数量', icon: 'none', position: 'top' });
|
return;
|
}
|
this.getOpenerEventChannel().emit('matList', { data: this.matData });
|
uni.vibrateShort();
|
uni.navigateBack({});
|
},
|
},
|
};
|
</script>
|
|
|
<style>
|
.attr-row {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.half-box {
|
width: 50%;
|
box-sizing: border-box;
|
border: 1rpx solid #ccc;
|
height: 60rpx;
|
border-radius: 8rpx;
|
background-color: #f9f9f9;
|
font-size: 24rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 10rpx;
|
/* 统一字体大小，左右内边距，去掉上下内边距确保垂直居中 */
|
}
|
|
.picker-box {
|
width: 100%;
|
/* 让picker内容撑满盒子 */
|
height: 60rpx;
|
line-height: 60rpx;
|
/* 行高垂直居中 */
|
}
|
|
input.half-box {
|
border: none;
|
outline: none;
|
/* 去掉input默认边框 */
|
background-color: transparent;
|
/* 背景透明，让input背景跟父盒子一致 */
|
font-size: 24rpx;
|
/* 继承字体大小 */
|
height: 60rpx;
|
line-height: 60rpx;
|
/* 让文字垂直居中 */
|
}
|
|
.container {
|
width: 100%;
|
height: 100%;
|
background-color: #ffffff;
|
}
|
.text-box {
|
height: 100rpx;
|
line-height: 100rpx;
|
margin-top: 20rpx;
|
margin-left: 10%;
|
width: 80%;
|
font-size: 32rpx;
|
font-weight: 400;
|
color: #434343;
|
border-bottom: 1rpx solid #e8e8e8;
|
}
|
.text-box:last-child {
|
border-bottom: none;
|
}
|
.text-box .text-title {
|
width: 30%;
|
height: 100rpx;
|
float: left;
|
display: inline-block;
|
}
|
.text-box .text-title:last-child {
|
display: inline-block;
|
margin-left: 2%;
|
width: 72%;
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #747474;
|
display: flex;
|
align-items: center;
|
}
|
.text-box .text-title:last-child input {
|
border-bottom: 1rpx solid #e8e8e8 ;
|
width: 100%;
|
}
|
.text-title input {
|
text-align: center;
|
border: 1rpx solid #e8e8e8;
|
border-radius: 5rpx;
|
padding: 5rpx;
|
font-size: 28rpx;
|
color: #747474;
|
}
|
.text-title text {
|
font-size: 28rpx;
|
color: #434343;
|
}
|
.text-title year{
|
display: inline-block;
|
margin-left: 2%;
|
width: 72%;
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #747474;
|
}
|
|
|
|
|
.foot {
|
width: 100%;
|
height: 100rpx;
|
line-height: 100rpx;
|
background-color: rgba(255,255,255,1);
|
position: fixed;
|
bottom: 0%;
|
border-top: 1px solid #d8d8d8;
|
z-index: 1;
|
}
|
.text-box {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 20rpx;
|
margin-left: 10%;
|
width: 80%;
|
border-bottom: 1rpx solid #e8e8e8;
|
padding-bottom: 10rpx;
|
}
|
|
/* 标签部分样式 */
|
.label {
|
width: 20%;
|
font-size: 30rpx;
|
color: #434343;
|
}
|
|
|
</style>
|
