1.模具点检 静态页面基本实现

loulijun2021

2023-10-17 5e520fc5870e0b47b8fdd05e43aecfb9d4997f8f

 pages/mjgl/mjdj.vue

@@ -1,8 +1,327 @@
<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 class="flex_between" v-for="item in topContent" :key="item.code">
                        <view style="display: flex;">
                           <view class="flex_column titleFont">
                              <view>模具编码：</view>
                              <view>模具名称：</view>
                              <view>规格型号：</view>
                           </view>
                           <view class="flex_column contentFont">
                              <view>{{item.code}}</view>
                              <view>{{item.name}}</view>
                              <view>{{item.spec?item.spec:'/'}}</view>
                           </view>
                        </view>
                     </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">
                        <u-button @click="show = true" type='primary' size="small" plain
                           shape='circle'>请选择</u-button>
                     </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>


         <view class="footer" v-show='centerContent.length!==0'>
            <u-button size="large" :loading="isDisabledSubmitButton" loadingText="正在提交,请稍等..." type="primary"
               @click="submit" :disabled="resultValue===''" 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>
</template>


<script>
   import {
      CheckScanMouldQrCodeData,
      CheckScanMouldTemp,
      SelectScanMouldQrCodeItem,
      MouldCheckSave
   } from '../../config/api.js';
   export default {
      onLoad(option) {

      },

      onPullDownRefresh() {
         setTimeout(() => {
            this.init(() => {
               uni.stopPullDownRefresh();
            })
         }, 1000);
      },

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

         }
      },
      created() {

      },
      mounted() {
         this.init()
      },
      methods: {
         init() {
            uni.stopPullDownRefresh();

            this.getCheckScanMouldQrCodeData('001')
            this.getCheckScanMouldTemp('001')
            // this.getSelectScanMouldQrCodeItem('001', '001')
         },
         async getCheckScanMouldQrCodeData(mouldcode) {
            const {
               data: res
            } = await CheckScanMouldQrCodeData({
               mouldcode: mouldcode
            })
            this.topContent = res
         },
         async getCheckScanMouldTemp(mouldcode) {
            const {
               data: res
            } = await CheckScanMouldTemp({
               mouldcode: mouldcode
            })
            this.standardArr = res
         },
         async getSelectScanMouldQrCodeItem(mouldcode, checktempcode) {
            const {
               data: res
            } = await SelectScanMouldQrCodeItem({
               mouldcode: mouldcode,
               checktempcode: checktempcode
            })

            this.centerContent = res
         },
         topScanClick() {
            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;
                  let flag = false
                  that.topContent.forEach(item => {
                     if (item.code === res.result) {
                        flag = true
                     }
                  })
                  if (flag) {
                     that.$u.toast('此条码已扫描，已在列表中！')
                  } else {
                     //处理扫码事件
                     that.getCheckScanMouldQrCodeData(that.scanContent);
                     that.getCheckScanMouldTemp(that.scanContent);
                  }
               },
               complete: function(res) {

               },
               fail: function(res) {
                  console.log('条码类型：' + res.scanType);
                  console.log('条码内容：' + res.result);
               }

            });
         },
         selectClick(val) {
            this.resultValue = ''
            this.selectValue = val.name
            this.getSelectScanMouldQrCodeItem('001', 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

            console.log(val)

            // this.centerContent.forEach(i => {
            //    i.isOK = val
            // })


            this.$forceUpdate() //强制视图更新
         },
         submit() {

         },
      }
   }
</script>

<style>
<style lang="scss" scoped>
   @import url('@/style/global.css');

   ::v-deep .uicon-arrow-left>span {
      display: block;
   }
</style>