aiot-app/pages/production/report/components/orderDetail/detailComp.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 {
  getProductReciverInfoOne,
  getProductReciverInfoFive,
} from "@/api/report/index";
export default {
  props: {
    // processesList:{
    //     type: Array,
    //     default: () => []
    // },
    orderId: [Number, String],
    name: String,
  },
  data() {
    return {
      processeDetail: [
        { label: "收货时间", key: "reciverTime" },
        { label: "收货库存地点", key: "lgort" },
        { label: "物料代码", key: "matnr" },
        { label: "物料描述", key: "maktx" },
        { label: "收货批次", key: "charg" },
        { label: "收货数量", key: "menge" },
      ],
      detailObj: {},
      list: [],
      curId: null,
    };
  },
  watch: {
    orderId: {
      immediate: true,
      handler() {
        console.log(this.orderId, "orderInfo");
        if (this.orderId) {
          this.getDetail();
        }
      },
    },
  },
  methods: {
    getDetail() {
      if (this.name == "101") {
        getProductReciverInfoOne(this.orderId).then((res) => {
          console.log(res, "res");
          this.list = res;
        });
      } else {
        getProductReciverInfoFive(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;
    }
  }
}

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