#

lty

1 天以前 fbbbc66329808249c7a0689f2efca6c79a6bf892

 pages/basics/matQuery.vue

@@ -1,34 +1,357 @@
<template>
   <view>
      <view class="cu-form-group margin-top">
         <text class="title">产品代号</text>
         <input type="text" placeholder="扫码 / 输入" name="input" autocomplete="off">
   <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="cu-form-group margin-top">
         <text class="title">产品名称</text>
         <input type="text" name="input" autocomplete="off">
      <view class="foot flex justify-center">
         <label>
            <button class="cu-btn bg-blue" @click="back()">提取</button>
         </label>
      </view>
      <view class="cu-form-group margin-top">
         <text class="title">单位</text>
         <input type="text" name="input" autocomplete="off">
      </view>
      <view class="cu-form-group margin-top">
         <text class="title">数量</text>
         <uni-number-box @change="changeValue" />
      </view>
      <button class="cu-btn bg-yellow pda-btn2">提取</button>
   </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>
   .pda-btn2{
      margin-left:auto;
      margin-right: auto;
      margin-top: 150rpx;
      width: 200rpx;
      height: 80rpx;
   .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>