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

<template>
    <view class=" card-content">
        <view  v-for="item in list" :key="item.name">
            <view  class="collapse-title">
                <view class="report-item" :class="{'text-danger' : item.bdmng < 0}">
                    <view class="report-col full">物料代码：{{item.matnr}}</view>
                    <view class="report-col full">物料描述：{{item.maktx}}</view>
                    <view class="report-col full">BOM用量：{{item.bdmng}}</view>
                </view>
            </view>
        </view>
    </view>
</template>


<script>
import {
  getBomInfo,
} from "@/api/report/index";
export default {
  props: {
    orderId: [Number, String],
  },
  data() {
    return {
      detailObj: {},
      list: [],
    };
  },
  watch: {
    orderId: {
      immediate: true,
      handler() {
        if (this.orderId) {
          this.getDetail();
        }
      },
    },
  },
  methods: {
    getDetail() {
        getBomInfo(this.orderId).then((res) => {
          this.list = res;
        });
    },
    handleClose() {
      this.$refs.inputDialog.close();
    },
  },
};
</script>


<style lang="scss" scoped>

    .card-content{
        padding:10rpx 10rpx 20rpx;
        font-size: $uni-font-size-lg;

        .collapse-title{
            display: flex;
            justify-content: space-between;
            padding:16rpx  3% 16rpx;
        }
    }

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

            &.full{
                width: 100%;
            }

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