loulijun2021
2023-10-20 a43c253d30dbb8cef1760e19cb3d290a2dd3b759
pages/mjgl/mjcx.vue
@@ -1,8 +1,195 @@
<template>
   <view>
      <page-nav title="模具列表"></page-nav>
      <view v-if="purchorderArrAll.length>0">
         <u-input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="扫描模具编码/输入模具信息"
            clearable border="surround" @clear='inputBoxValueClear' v-model="inputBoxValue"
            @change="changeInputBoxValue">
            <template slot="suffix">
               <u-icon name="scan" color="#909399" size="24" @click="topScanClick"></u-icon>
            </template>
         </u-input>
         <u-alert :title="'模具数(共'+title+'个)'" type="primary"></u-alert>
         <u-radio-group v-model="radioValue" iconPlacement="right" @change="radioValueClick" class="radioGroupClass">
            <view v-for="(item,index) in purchorderArr" :key="item.code">
               <!-- @click="radioValueClick(item.code)" -->
               <view>
                  <u-radio activeColor="red" size="18" labelSize='16' :name='item.code'
                     :label="item.code+' ' + item.name +' '+item.spec "></u-radio>
               </view>
               <u-line v-if="index!==purchorderArr.length-1" color="#2979ff"></u-line>
            </view>
         </u-radio-group>
         <view style="height: 120rpx;"></view>
         <view class="footer" style="min-height:62rpx;">
            <u-button type="primary" size='large' :hairline="true" @click="navigateTo" text="下一步"></u-button>
         </view>
      </view>
      <view v-if="purchorderArrAll.length===0">
         <div class="sacnBody">
            <div class="boxImg"></div>
            <div class="scanText">暂无模具信息</div>
         </div>
      </view>
   </view>
</template>
<script>
   import {
      ScanMouldQrCodeMessageData,
      ScanMouldQrCodeMessageSubData
   } from '../../config/api.js';
   export default {
      onLoad(option) {},
      onPullDownRefresh() {
         setTimeout(() => {
            this.init(() => {
               uni.stopPullDownRefresh();
            })
         }, 1000);
      },
      data() {
         return {
            inputBoxValue: '', //输入框值
            title: 0,
            radioValue: '',
            purchorderArr: [],
            purchorderArrAll: []
         }
      },
      created() {
      },
      mounted() {
         this.init()
         this.getScanMouldQrCodeMessageData()
      },
      methods: {
         init() {
            uni.stopPullDownRefresh();
         },
         // 扫码工位  的扫码框点击
         topScanClick() {
            // if (this.topContent.length > 0) {
            //    return uni.$u.toast('请先提交此维修申请!')
            // }
            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.inputBoxValue = res.result;
                  //处理扫码事件
                  that.changeInputBoxValue(that.scanContent);
               },
               complete: function(res) {
               },
               fail: function(res) {
                  console.log('条码类型:' + res.scanType);
                  console.log('条码内容:' + res.result);
               }
            });
         },
         changeInputBoxValue(val) {
            this.purchorderArr = this.purchorderArrAll.filter((p) => {
               return p.code.indexOf(val) !== -1 || p.name.indexOf(val) !== -1 || p.spec.indexOf(val) !== -1
            })
            this.radioValue = this.purchorderArr[0].code
            this.$forceUpdate()
         },
         inputBoxValueClear() {
            this.inputBoxValue = ''
         },
         radioValueClick(val) {
            this.radioValue = val
         },
         navigateTo() {
            uni.navigateTo({
               url: './mjcx2?code=' + this.radioValue
            });
         },
         async getScanMouldQrCodeMessageData() {
            const res = await ScanMouldQrCodeMessageData()
            this.purchorderArrAll = res.data
            this.purchorderArr = res.data
            this.title = res.data.length
            this.radioValue = res.data[0].code
         }
      }
   }
</script>
<style>
<style lang="scss" scoped>
   @import url('@/style/global.css');
   ::v-deep .uicon-arrow-left>span {
      display: block;
   }
   .u-input--square {
      margin: 20rpx 10rpx;
      border-radius: 40rpx;
      background-color: #fff;
      border: 1px solid #c8c8c8;
   }
   ::v-deep .u-alert__text--primary--light {
      margin-bottom: 0;
      font-size: 32rpx !important;
   }
   .radioGroupClass {
      display: flex;
      flex-direction: column;
      background-color: #fff;
      overflow-y: auto;
      max-height: 1140rpx;
      margin-top: 20rpx;
   }
   ::v-deep .u-radio-label--right {
      height: 90rpx;
      line-height: 90rpx;
      width: 92%;
      margin-left: 4%;
      // padding: 0 50rpx;
   }
</style>