aiot-app/pages/production/report/index.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="生产报工"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <view class="search-box">
       订单编号
       <uni-easyinput placeholder='请输入订单编号'
        @change='handleSearch'
        clearSize='36px'
        :clearable='true' v-model="searchKey"></uni-easyinput>
       <uni-icons type="scan" size="40px" @click='handleScan'></uni-icons>
    </view>

    <view class="report-view" >
        <card title='订单信息'>
            <view slot='right' class='detail-btn' @click="goOrder" v-if="orderInfo.aufnr">订单详情</view>
            <view class="card-list" :class="colorOpt[orderInfo.orderStatus]">
               <view class="list-item" v-for="(item, index) in msgList" :key='index'>
                  <view class="label">{{item.label}}</view>
                  <view>{{orderInfo[item.key]}}</view>
               </view>
            </view>
        </card>
        <processes :processesList='processesList'  :canReport='canReport' :orderStatus='orderInfo.orderStatus' :orderId='orderInfo.orderId'/>
    </view>
  </view>
</template>
    
<script>
import card from "@/components/card/card"
import processes from "./components/processes"
import { getOrderInfo,getProcessRoute,getPostingDate } from "@/api/report/index"
export default {
    components:{card, processes},
    data(){
      return {
        msgList:[
          { label: '状态', key: 'orderStatus'},
          { label: '生产订单', key: 'aufnr'},
          { label: '牌号', key: 'zph'},
          { label: '型号', key: 'zxh'},
          { label: '目标数量', key: 'gamng'},
          { label: '投料数量', key: 'feed'},
          { label: '收货数量', key: 'oneReciver'},
          { label: '在制品数量', key: 'workProgress'},
        ],
        searchKey:"",
        orderInfo:{},
        processesList:[],
        colorOpt:{
           '在制':'text-primary-deep',
           '关闭': 'text-danger'
        },
        canReport: false

      }
    },
    onShow(){
      this._getPostingDate()
      this.handleSearch()
    },
  onLoad(){
    const _this = this
    uni.$off("scancodedate"); // 每次进来先 移除全局自定义事件监听器
    uni.$on("scancodedate", function (data) {
      _this.searchKey = data.code.trim();
      _this.handleSearch()
    });


    uni.$on('chargeOff', function(){
      console.log('chargeOff');
       _this.handleSearch(false)
    })
  },
  onUnload() {
    uni.$off("scancodedate");
  },
  onHide() {
    uni.$off("scancodedate");
  },
    methods:{
      async _getPostingDate(){
        const res = await getPostingDate()
        console.log(res);

        this.canReport = res.prohibitReport === '0'
      },
      goOrder(){
         uni.navigateTo({
          url:"/pages/production/report/orderMsg?orderCode=" + this.orderInfo.aufnr
         })
      },
      async handleSearch(loading = true){
        setTimeout(async () => {
          if (!this.searchKey) {
            return
          }
          this.orderInfo = {}
          this.processesList =[]
            const res = await getOrderInfo(this.searchKey, false)
            if(res){
              this.orderInfo = res
              this._getProcessRoute(this.orderInfo.orderId, loading)
            }else{
              uni.showToast({
                title:'该生产订单不存在！',
                icon:'none'
              })
            }
        }, 100);
      },
      async _getProcessRoute(orderId, loading = true){
        const res = await getProcessRoute(orderId, loading)

        this.processesList = res
      },

      handleScan() {
        const _this = this;
        uni.scanCode({
          onlyFromCamera: true,
          success: function (res) {
            console.log("条码类型：" + res.scanType);
            console.log("条码内容：" + res.result);
            _this.searchKey = res.result.trim();
           _this.handleSearch()
          },
        });
      },
    },
};
</script>
    
    <style lang='scss' scoped>
  .mainBox{
    background: $page-bg;
    height: 100vh;
    overflow: auto;
    position: relative;
  }
    .search-box{
      position: fixed;
      top: 64px;
      background: $page-bg;
      left: 0;
      right: 0;
      z-index: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: $uni-font-size-lg;

        padding: 10rpx;

        /deep/.uni-easyinput {
          width: 80%;
           flex-grow: .8;
           .uni-easyinput__placeholder-class{
              font-size: $uni-font-size-lg;
           }
           .uni-easyinput__content-input{
            height: 60rpx;
           }
           .uni-icons{
              font-size: $uni-font-size-lg;
           }
        }

        /deep/.uni-icons{
              // font-size: $uni-font-size-lg !important;
        }
    }

    .report-view{
    margin-top: 54px;
       padding: 16rpx;

       .detail-btn{
          color: $j-primary-border-green;
          font-size: $uni-font-size-lg;
       }
    }

    .card-list{
      padding: 30rpx;
          font-size: $uni-font-size-lg;
       .list-item{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10rpx 0;
       }
    }
</style>