1.沣沣APP 更新优化

小小儁爺

2024-10-22 162eddd7467adfe5de7a1a468e54ea00b2febce3

 pages/mjgl/mjby.vue

@@ -1,180 +1,69 @@
<template>
   <view>
      <page-nav title="模具保养"></page-nav>
      <view v-show="topContent.length===0">
         <div class="sacnBody">
            <div class="scanImg" @click="topScanClick"></div>
            <div class="scanText">扫描模具编号二维码</div>
         </div>
      </view>
      <view v-show="topContent.length!==0">
         <view class="mainContent">
            <view>
               <u-gap height="10" bgColor="#eff0f1"></u-gap>
               <view class="head">
                  <view class="head_block">
                     <view class="head_left">
                        <view class="head_bar"></view>
                        <view class="head_title">
                           模具信息
                        </view>
                     </view>

                     <view class="marginRight20">
                        <u-icon name="scan" @click="topScanClick" color="red" size="24"></u-icon>
                     </view>

                  </view>
                  <view class=" flex_column" style="max-height: 180rpx;overflow:auto;padding: 20rpx;">
      <!-- <view v-if="purchorderArrAll.length>0"> -->

                     <view class="flex_between" v-for="item in topContent" :key="item.code">

      <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>



      <scroll-view class="container" scroll-y="true" @scroll="scroll">
         <!-- 虚拟列表总高度 -->
         <view :style="{'height': `${totalHeight}rpx`, 'position': 'relative'}">
            <!-- 可视渲染区 -->
            <view :style="{'top': `${top}px`}" style="width: 100%;position:absolute">
               <!--在这里自定义你数据的展示结构和样式,itemHeight为这里的总高度-->

               <view class="radioGroupClass">
                  <view v-for="(item,index) in purchorderArr" :key="item.code" class="item">
                     <view @click="highlightClick(item.code)" :style="{color:selectedCode===item.code?'#fff':'#000',
                              background:selectedCode===item.code?'#3c9cff':'#fff'
                        }">

                        <view style="display: flex;">
                           <view class="flex_column titleFont">
                              <view>模具编码：</view>
                              <view>模具名称：</view>
                              <view>规格型号：</view>
                           <view style="text-align: center;margin-right: 20rpx;">{{item.code}}
                           </view>
                           <view class="flex_column contentFont">
                              <view>{{item.code}}</view>
                              <view>{{item.name}}</view>
                              <view>{{item.spec?item.spec:'/'}}</view>
                           </view>
                        </view>
                     </view>
                           <view style="">{{item.name}}</view>
                           <view style="margin-left: 20rpx;">{{item.spec}}</view>

                  </view>

               </view>
               <u-gap height="10" bgColor="#eff0f1"></u-gap>

               <view class="head" style="height: 80rpx;justify-content: center;">
                  <view class="head_block">
                     <view class="head_left" style="margin-bottom: 10rpx;">
                        <view class="head_bar"></view>
                        <view class="head_title" style="margin-right: 50rpx;">
                           保养标准
                        </view>


                        <view>
                           {{selectValue}}
                        </view>

                     </view>



                  <view class="marginRight20 marginBottom10" v-if='standardArr.length>0'>
                     <u-button @click="show = true" type='primary' size="small" plain
                        shape='circle'>请选择</u-button>
                  </view>
						
                  <view class="marginRight20 marginBottom10" v-if='standardArr.length===0'>
                     暂无关联标准,请先关联
                  </view>

                  </view>


               </view>
               <u-gap height="10" bgColor="#eff0f1"></u-gap>

               <view class="head" style="" v-show='centerContent.length!==0'>
                  <view class="head_block">
                     <view class="head_left">
                        <view class="head_bar"></view>
                        <view class="head_title">
                           保养项目内容
                        </view>
                     </view>
                  </view>

                  <view :style="{maxHeight:'700rpx',overflow: 'scroll'}">

                     <view class="center_border flex_column" style="margin: 10rpx;" v-for="item in centerContent"
                        :key="item.code">

                        <view class="flex_between marginBottom10">
                           <view class="center_title">{{item.name}}</view>
                           <!-- <view class="marginRight20" v-if="item.isscan==='Y'">
                              <u-icon name="scan" @click="centerScanClick(item.code)" color="red" size="56">
                              </u-icon>
                           </view> -->
                        </view>
                        <view class="flex_between marginBottom10">
                           <view class='inputClass marginTop10'>
                              <u--input placeholder="请输入" border="surround"
                                 v-model="item.inputValue"></u--input>
                           </view>


                           <view class="flex_center " style="margin-right:8rpx;">
                              <u-button type="primary" :plain="item.isOK!=='OK'" shape='circle' size="small"
                                 text="正常" style="margin-right:5rpx;" @click="bwClick(item,'OK')">
                              </u-button>
                              <u-button type="warning" :plain="item.isOK!=='NG'" shape='circle' size="small"
                                 text="异常" @click="bwClick(item,'NG')">
                              </u-button>
                           </view>
                        </view>
                        <view class="titleFont">
                           {{item.chkdesc}}
                        </view>
                     </view>
                  </view>

               </view>

               <u-gap height="10" bgColor="#eff0f1"></u-gap>


               <view class="head" v-show='centerContent.length!==0'>
                  <view class="head_block" style="align-items: center;height: 80rpx;">
                     <view class="head_left" style="margin-bottom: 10rpx;">
                        <view class="head_bar"></view>
                        <view class="head_title">
                           保养结果
                        </view>
                     </view>

                     <view class="flex_center marginBottom10" style="margin-right:8rpx;">
                        <u-button type="primary" :plain="resultValue!=='OK'" shape='circle' size="small"
                           text="正常"
                           :disabled="centerContent.filter(i=>i.isOK==='OK'||i.isOK==='NG').length!==centerContent.length"
                           style="margin-right:5rpx;" @click="resultClick('OK')"></u-button>
                        <u-button type="warning" :plain="resultValue!=='NG'" shape='circle' size="small"
                           text="异常"
                           :disabled="centerContent.filter(i=>i.isOK==='OK'||i.isOK==='NG').length!==centerContent.length"
                           @click="resultClick('NG')"></u-button>
                     </view>
                  </view>
               </view>



            </view>





         </view>
      </scroll-view>


         <view class="footer" v-show='centerContent.length!==0'>
            <u-button size="large" :loading="isDisabledSubmitButton" loadingText="正在提交,请稍等..." type="primary"
               :disabled="centerContent.filter(i=>i.isOK==='OK'||i.isOK==='NG').length!==centerContent.length"
               @click="submit" text="确认提交">
            </u-button>
         </view>


      <view class="footer" style="min-height:62rpx;">
         <u-button type="primary" size='large' :hairline="true" @click="navigateTo" text="下一步"></u-button>
      </view>
      <!-- </view> -->


      <u-action-sheet :actions="standardArr" @select="selectClick" round='20' :closeOnClickOverlay='true'
         @close="show=false" :closeOnClickAction="true" :safeAreaInsetBottom='true' :show="show"></u-action-sheet>

      <!--    <view v-if="purchorderArrAll.length===0">
         <div class="sacnBody">
            <div class="boxImg"></div>
            <div class="scanText">暂无模具信息</div>
         </div>
      </view> -->

   </view>
</template>
@@ -182,15 +71,10 @@

<script>
   import {
      RepairScanMouldQrCodeData,
      RepairScanMouldTemp,
      RepairSelectScanMouldQrCodeItem,
      MouldRepairSave
      ScanMouldQrCodeMessageData,
      ScanMouldQrCodeMessageSubData
   } from '../../config/api.js';
   export default {
      onLoad(option) {

      },

      onPullDownRefresh() {
         setTimeout(() => {
@@ -202,13 +86,37 @@

      data() {
         return {
            isDisabledSubmitButton: false,
            topContent: [],
            standardArr: [], //点检标准
            show: false,
            selectValue: '',
            centerContent: [],
            resultValue: ''

            inputBoxValue: '', //输入框值

            title: 0,

            purchorderArr: [],

            purchorderArrAll: [],

            allList: [], //原始数据列表
            //虚拟列表
            showList: [], //可视区域显示的数据
            itemHeight: 100, //每条数据所占高度
            showNum: 0, //可视区域显示的最大条数
            top: 0, //偏移量
            scrollTop: 0, //卷起的高度
            startIndex: 0, //可视区域第一条数据的索引
            endIndex: 0, //可视区域最后一条数据的索引+1，

            selectedCode: ''

         }
      },

      onShow() {
         //第一次时调用一下,且uni.createSelectorQuery()需要在生命周期mounted之后使用
         // this.scroll()
      },
      computed: {
         totalHeight() {
            return this.allList.length * this.itemHeight * 2 //因为rpx和px的关系
         }
      },
      created() {
@@ -216,48 +124,63 @@
      },
      mounted() {
         this.init()

         this.getScanMouldQrCodeMessageData()
      },
      methods: {

         //虚拟列表
         getShowList() {
            //可视区域能出现的数据条数
            this.showNum = Math.ceil(this.contentHeight / this.itemHeight);
            // console.log('可视数量', this.showNum)

            //可视区域第一条数据的索引
            this.startIndex = Math.floor(this.scrollTop / this.itemHeight);
            // console.log('初始索引',this.startIndex)

            //可视区域最后一条数据的下一条数据
            this.endIndex = this.startIndex + this.showNum;

            //可视区数据，会比实际可视多渲染一条		
            this.showList = this.allList.slice(this.startIndex, this.endIndex)
            // console.log(this.showList)

            //保证滑动时第一条数据完整展示
            let offsetY = this.scrollTop - (this.scrollTop % this.itemHeight);

            this.top = offsetY;
         },
         scroll() {
            // 利用uniapp提供的接口获取可视区域的高度和滚动高度
            let query = uni.createSelectorQuery()
            let container = query.select('.container');
            container.fields({
               // rect:true,   //是否返回节点布局位置信息{left,top,right,bottom}
               size: true, //是否返回节点尺寸信息{width，height}
               scrollOffset: true //是否返回节点滚动信息{scrollLeft,scrollTop}
            }, (res) => {
               // console.log(res)
               this.scrollTop = res.scrollTop
               this.contentHeight = res.height
               this.getShowList(); //因为所在函数是异步
            }).exec()
         },
         highlightClick(code) {
            this.selectedCode = code
         },


         init() {
            uni.stopPullDownRefresh();

            // this.getRepairScanMouldQrCodeData('001')
            // this.getRepairScanMouldTemp('001')
            // this.getRepairSelectScanMouldQrCodeItem('001', '001')
         },
         async getRepairScanMouldQrCodeData(mouldcode) {
            const {
               data: res
            } = await RepairScanMouldQrCodeData({
               mouldcode: mouldcode
            })
            this.topContent = res
         },
         async getRepairScanMouldTemp(mouldcode) {
            const {
               data: res
            } = await RepairScanMouldTemp({
               mouldcode: mouldcode
            })
            this.standardArr = res

            this.centerContent = []
            this.resultValue = ''
            this.selectValue = ''
         },
         async getRepairSelectScanMouldQrCodeItem(mouldcode, repartempcode) {
            const {
               data: res
            } = await RepairSelectScanMouldQrCodeItem({
               mouldcode: mouldcode,
               repartempcode: repartempcode
            })

            this.centerContent = res
         },
         // 扫码工位  的扫码框点击
         topScanClick() {
            let that = this;
            // if (this.topContent.length > 0) {
            //    return uni.$u.toast('请先提交此维修申请！')
            // }

            let that = this;
            uni.scanCode({
               onlyFromCamera: true,
               // scanType: ['barCode', 'qrCode'],
@@ -266,19 +189,11 @@
                  console.log('条码类型：' + res.scanType);
                  console.log('条码内容：' + res.result);
                  that.scanContent = res.result;
                  let flag = false
                  that.topContent.forEach(item => {
                     if (item.code === res.result) {
                        flag = true
                     }
                  })
                  if (flag) {
                     that.$u.toast('此条码已扫描，已在列表中！')
                  } else {
                     //处理扫码事件
                     that.getRepairScanMouldQrCodeData(that.scanContent);
                     that.getRepairScanMouldTemp(that.scanContent);
                  }
                  that.inputBoxValue = res.result;

                  //处理扫码事件
                  that.changeInputBoxValue(that.scanContent);

               },
               complete: function(res) {

@@ -290,59 +205,34 @@

            });
         },
         selectClick(val) {
            this.resultValue = ''
            this.selectValue = val.name
            this.getRepairSelectScanMouldQrCodeItem(this.topContent[0].code, val.code)

         },
         bwClick(item, val) {
            item.isOK = val
            if (this.centerContent.every(item => item.isOK !== '')) {
               if (this.centerContent.every(item => item.isOK === 'OK')) {
                  this.resultValue = 'OK'
               } else if (this.centerContent.some(item => item.isOK === 'NG')) {
                  this.resultValue = 'NG'
               }
            }
            this.$forceUpdate() //强制视图更新
         },
         resultClick(val) {
            this.resultValue = val
            this.$forceUpdate() //强制视图更新
         },
         async submit() {

            const children = []
            this.centerContent.forEach((i, index) => {
               children.push({
                  seq: index + 1,
                  itemcode: i.code,
                  cycle: '',
                  value: i.inputValue,
                  result: i.isOK
               })
         changeInputBoxValue(val) {
            this.purchorderArr = this.purchorderArrAll.filter((p) => {
               return p.code.indexOf(val) !== -1 || p.name.indexOf(val) !== -1 || p.spec.indexOf(val) !== -1
            })

            const data = {
               code: this.topContent[0].code,
               name: this.topContent[0].name,
               standcode: this.selectValue,
               result: this.resultValue,
               children
            }

            this.isDisabledSubmitButton = true
            const res = await MouldRepairSave('2502', data)
            if (res.code === '200') {
               uni.$u.toast('提交成功！')
               this.isDisabledSubmitButton = false
               this.topContent = []
               this.selectValue = ''
               this.centerContent = []
               this.resultValue = ''
            }
            this.selectedCode = this.purchorderArr[0].code
            this.$forceUpdate()
         },
         inputBoxValueClear() {
            this.inputBoxValue = ''
         },

         navigateTo() {
            uni.navigateTo({
               url: './mjby2?code=' + this.selectedCode
            });
         },
         async getScanMouldQrCodeMessageData() {
            const res = await ScanMouldQrCodeMessageData()

            this.purchorderArrAll = res.data

            this.purchorderArr = res.data

            this.title = res.data.length

            this.selectedCode = res.data[0].code

         }
      }
   }
</script>
@@ -350,7 +240,53 @@
<style lang="scss" scoped>
   @import url('@/style/global.css');

   .container {
      width: 100%;
      height: 70vh;
      /*原生一定得有这个overflow的hidden效果,此处用了scroll-view所以不需要*/
      /*overflow:auto;*/
   }

   .item {
      /* 按照实际需求写css */
      width: 100%;
      height: 200rpx;
      line-height: 90rpx;
      /* 要对应上itemHeight */
      border: 1px solid #c8c8c8;
   }

   ::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: 1100rpx;
      margin-top: 20rpx;
   }

   ::v-deep .u-radio-label--right {
      height: 90rpx;
      line-height: 90rpx;
      width: 92%;
      margin-left: 4%;
      // padding: 0 50rpx;
   }
</style>