aiot-app/pages/production/report/components/orderDetail/picking.vue

<template>
    <view class="aa">
        <view class="card-content">
            <uni-collapse accordion  :show-animation="true">
                <uni-collapse-item :show-animation="true"  :typeOpen='1' v-for="item in list" :key="item.matnr">
                    <view slot='title' class="collapse-title">
                        <view class="report-item" >
                            <view class="report-col">{{item.matnr}}</view>
                            <view class="report-col">投料数量：{{item.menge}}</view>
                        </view>
                    </view>
                    <view class="card-list">
                        <view class="list-item" v-for="(itm, index) in processeDetail" :key='index'>
                            <view class="label">{{itm.label}}</view>
                            <view>{{item[itm.key]}}</view> 
                        </view>
                    </view>
                </uni-collapse-item>
            </uni-collapse>
            <view class="noData" v-if="!list.length">
                暂无数据
            </view>
        </view>

    </view>
</template>


<script>
import card from '@/components/card/card'
import { getFeedInfo } from "@/api/report/index"
export default {
    components:{card},
    props:{
        orderId:[Number, String],
    },
    data(){
        return {
            processeDetail:[
                    {label:'投料时间', key: 'budat'},
                    {label:'投料库存地点', key: 'lgort'},
                    {label:'物料代码', key: 'matnr'},
                    {label:'物料描述', key: 'maktx'},
                    {label:'投料批次', key: 'charg'},
                    {label:'投料数量', key: 'menge'},
                ],
            list:[],
            detailObj:{},
            curId:null,
        }
    },
    watch:{
        orderId:{
            immediate: true,
            handler(){
                if(this.orderId){
                    this.getDetail()
                }
            }
        }
    },
    methods:{
        getDetail(){
            getFeedInfo(this.orderId).then(res => {
                console.log(res,'res');
                this.list = res
            })
        },
        handleClose(){
            this.$refs.inputDialog.close()
        }
    }
    

}
</script>
<style lang="scss" scoped>
.report-item{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-bottom: 30rpx;
        padding: 10rpx 0;
        border-bottom: 1rpx solid #ccc;

        .report-col{
            width: 50%;
            margin-bottom: 10rpx;
        font-size: $uni-font-size-lg;

            .view-detail{
                width: 180rpx;
                height: 60rpx;
                line-height: 60rpx;
                color: $j-primary-green;
                margin: 0 0 0 auto;
                
            }
        }
    }

   .collapse-title{
          font-size: $uni-font-size-lg;

   }
 .card-list{
        padding: 30rpx;
        border-bottom: 1rpx solid #ccc;
       .list-item{
        border-bottom: 1rpx dashed #ccc;

        font-size: $uni-font-size-lg;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16rpx 0;
       }
        
    }
.noData {
  font-size: $uni-font-size-lg;
  text-align: center;
  padding: 20rpx 0;
}
</style>