lty
2026-02-03 7437dd7b944aaeb64e98a1e0a5943ec88db4afab
pages/basics/matQuery.vue
@@ -3,30 +3,46 @@
      <view>
         <view class="container">
            <view class="text-box">
               <view class="text-title"><text>商品编码</text></view>
               <view class="text-title"><text>Item Code</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"><text>Item Name</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 class="text-box">
               <view class="text-title"><text>Customer PO</text></view>
               <view class="text-title"><input type="text" v-model="matData.standby1"></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 class="text-title"><text>Barcode UPC</text></view>
               <view class="text-title"><input type="text" v-model="matData.standby2"></view>
            </view>
            <view class="text-box">
               <view class="text-title"><text>单位</text></view>
               <view class="text-title"><input type="text" v-model="matData.unit"></view>
               <view class="text-title"><text>Customer SKU</text></view>
               <view class="text-title"><input type="text" v-model="matData.standby3"></view>
            </view>
            <view class="text-box">
               <view class="text-title"><text>数量</text></view>
               <view class="text-title"><text>Owner Name</text></view>
               <view class="text-title"><input type="text" v-model="matData.boxType1"></view>
            </view>
            <view class="text-box">
               <view class="text-title"><text>Supplier</text></view>
               <view class="text-title"><input type="text" v-model="matData.supp"></view>
            </view>
            <view class="text-box">
               <view class="text-title"><text>PO Number</text></view>
               <view class="text-title"><input type="text" v-model="matData.boxType3"></view>
            </view> -->
            <view class="text-box">
               <view class="text-title"><text>Remark</text></view>
               <view class="text-title"><input type="text" v-model="matData.memo"></view>
            </view>
            <view class="text-box">
               <view class="text-title"><text>Quantity</text></view>
               <view class="text-title">
                  <view>
                     <uni-number-box :value="matData.anfme" :max="999999999" :step="0.0001"  color="#747474" @change="changeValue"/>
                     <uni-number-box :value="matData.anfme" :max="999999999" :step="1"  color="#747474" @change="changeValue"/>
                  </view>
               </view>
            </view>
@@ -34,78 +50,211 @@
      </view>
      <view class="foot flex justify-center">
         <label>
            <button class="cu-btn bg-blue" @click="back()">提取</button>
            <button class="cu-btn bg-blue" @click="back()">Extract</button>
         </label>
      </view>
   </scroll-view>
</template>
<script>
   export default {
      data() {
         return {
            matData: {
               matnr: null,
               maktx: null,
               batch: null,
               anfme: null,
               unit: null,
            },
            baseIP:'',
            basePORT:'',
         }
      },
      onLoad(option) {
         let that = this
         // #ifdef APP-NVUE
         const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
         // #endif
         // #ifndef APP-NVUE
         const eventChannel = this.getOpenerEventChannel();
         // #endif
         // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
         eventChannel.on('matData', function(data) {
         that.matData = data.data
         that.matData.anfme = 66
         })
      },
      methods: {
         blur() {
         },
         focus() {
         },
         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({
            })
         }
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,
                standby1: null,
                anfme: null,
                standby2: null,
            standby3: null,
            supp: null,
            boxType1: null,
            boxType3: null,
            memo:null,
                startTime: '',
                endTime: ''
            },
         commonProps: [
           '4Ni','6Ni', '8Ni', '10Ni', 'Chrome Plating', 'Natural Color',
           'Nickel Plating', 'Electroplating', 'Rose Gold', 'PVD Brushed Gold Matte Oil', 'PVD Brushed Nickel Matte Oil',
           'Electrophoresis Matte Black', 'Water Plating Gun Grey', 'Brushed', 'Titanium Gold', 'Bright White',
           'Body Polished Sand Copper Natural', 'Polished', 'Sanded'
         ],
         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);  // Maintain reactivity
      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];
            // Only allow numbers
            if (!/^\d*$/.test(value)) {
                this[type][field] = value.replace(/\D/g, ''); // Remove non-numeric characters
            }
            let max = 59; // Default max value
            if (field === 'year') max = 9999; // Max year is 9999
            if (field === 'month') max = 12; // Max month is 12
            if (field === 'day') max = 31; // Max day is 31
            if (field === 'hour') max = 23; // Max hour is 23
            if (field === 'minute' || field === 'second') max = 59; // Max minute and second is 59
            // Limit input range
            if (parseInt(value, 10) > max) {
                this[type][field] = max.toString(); // Set to max if out of range
            }
            // Automatically update full date
            this.updateFullDate(type);
        },
      clearInput(field, type) {
         this[type][field] = ''; // Clear value of specified 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: 'Please enter quantity', 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;
     /* Unified font size, left/right padding, remove top/bottom padding to ensure vertical centering */
   }
   .picker-box {
     width: 100%;
     /* Let picker content fill the box */
     height: 60rpx;
     line-height: 60rpx;
     /* Line height vertical centering */
   }
   input.half-box {
     border: none;
     outline: none;
     /* Remove default input border */
     background-color: transparent;
     /* Transparent background, match input background with parent box */
     font-size: 24rpx;
     /* Inherit font size */
     height: 60rpx;
     line-height: 60rpx;
     /* Vertical center text */
   }
   .container {
      width: 100%;
      height: 100%;
      background-color: #ffffff;
   }
   .text-box {
      height: 100rpx;
      line-height: 100rpx;
      min-height: 100rpx;
      margin-top: 20rpx;
      margin-left: 10%;
      width: 80%;
@@ -113,30 +262,52 @@
      font-weight: 400;
      color: #434343;
      border-bottom: 1rpx solid #e8e8e8;
      display: flex;
      align-items: center;
      padding: 10rpx 0;
   }
   .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: 5%;
      width: 65%;
      margin-left: 2%;
      flex: 1;
      font-size: 30rpx;
      font-weight: 400;
      color: #747474;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
   }
   .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 {
@@ -149,4 +320,23 @@
      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>