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

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="订单详情"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <view class="report-view">
    <view class="card-list">
        <view class="list-item" v-for="(item, index) in msgList" :key='index'>
            <view class="label">{{item.label}}</view>
            <view v-if="item.type == 'checked'">
                <uni-data-checkbox multiple :value="[orderInfo[item.key]]" :disabled='true' :localdata="[{text:'', value: '1'}]"></uni-data-checkbox>
            </view>
            <view v-else-if="item.type == 'close'">
                <uni-data-checkbox multiple :value="[orderInfo[item.key]]" :disabled='true' :localdata="[{text:'', value: '关闭'}]"></uni-data-checkbox>
            </view>
            <view v-else>{{item.formatter && item.formatter(orderInfo[item.key]) || orderInfo[item.key]}}</view>
        </view>
    </view>
    </view>
  </view>
</template>
    
<script>
import { getOrderInfo } from "@/api/report/index"
export default {
    data(){
      return {
        msgList:[
        //   { label: '关闭', key: 'orderStatus', type:'close'},
          { label: '状态', key: 'orderStatus'},
          { label: '生产订单', key: 'aufnr'},
          { label: 'MRP控制者', key: 'dispo'},
          { label: '计划编号', key: 'cySeqnr'},
          { label: '物料代码', key: 'matnr'},
          { label: '物料描述', key: 'maktx'},
          { label: '牌号', key: 'zph'},
          { label: '型号', key: 'zxh'},
          { label: '目标数量', key: 'gamng'},
          { label: '投料数量', key: 'feed'},
          { label: '收货数量', key: 'oneReciver'},
          { label: '在制品数量', key: 'workProgress'},
          { label: '投料', key: 'feedFlag', type:'checked'},
          { label: '报工', key: 'workFlag', type:'checked'},
          { label: '收货', key: 'oneFlag', type:'checked'},
          { label: '备注', key: 'ktext'},
          { label: '生产版本', key: 'verid'},
          { label: '版本名称', key: 'veridText'},
          { label: '目标KG', key: 'reciverNum'},
        //   { label: '投料KG', key: 'a'},
        //   { label: '在制品KG', key: 'a'},
          { label: '单位', key: 'meins'},
          { label: '打印', key: 'printNum'},
          { label: '批次（混合料厂专用）', key: 'reciverBatch'},
          { label: '交货期', key: 'reciverTime'},
          { label: '销售订单号', key: 'kdauf'},
          { label: '行号', key: 'kdpos'},
        //   { label: '单重', key: 'ntgew'},
          { label: '产品层次4', key: 'levelFour'},
          { label: '产品层次5', key: 'levelFive'},
          { label: '关闭日期', key: 'closeDatetime'},
          { label: 'BOM物料代码', key: 'bomMatnr'},
          { label: 'BOM牌号', key: 'bomZph'},
          { label: 'BOM型号', key: 'bomZxh'},
          { label: 'BOM物料描述', key: 'bomMaktx'},
          { label: '副产品收货重量', key: 'fiveReciverWeight'},
          { label: '工厂代码', key: 'dwerk'},
          { label: '计划类型', key: 'planType', formatter(val){
             const map  = {
                1: '内销',  2: '工厂内内转',  3: '工厂间内转', 4: '外销'
             }

             return map[val]
          }},
        ],
        orderInfo:{}
        
      }
    },
    onLoad({orderCode}){
         if(orderCode){
            this.handleSearch(orderCode)
         }
    },
    methods:{
        async handleSearch(orderCode){
        this.orderInfo = {}
          const res = await getOrderInfo(orderCode)

          this.orderInfo = res
      },
    },
};
</script>
    
    <style lang='scss' scoped>
  .mainBox{
    background: $page-bg;
    height: 100vh;
    overflow: auto;
  }
    .report-view{
       padding: 16rpx;
          font-size: $uni-font-size-lg;

          /deep/.uni-data-checklist{
             .checklist-group .checklist-box{
                margin-right: 0;
            }
          }

    }

    .card-list{
      padding: 30rpx;
        background: #fff;
        border-radius: 16rpx;
       .list-item{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10rpx 0;
       }
    }
</style>