entityControl_mobile/pagesStorage/storageDetail.vue

<template>
  <view class="receipt-detail-container">
    <!-- <view class="list-title">单据信息</view> -->
    <!-- 单据头部信息卡片 -->
    <view class="header-card">
      <view class="header-item">
        <text class="label">单据号：</text>
        <text class="value">{{ billForm.billNo }}</text>
      </view>
      <view class="header-item">
        <text class="label">{{ storageType == 'rkType' ? '入库类型' : '出库类型' }}：</text>
        <text class="value">{{ billForm.operationTypeName }}</text>
      </view>
      <view class="header-item" v-if="storageType == 'rkType'">
        <text class="label">物资类型：</text>
        <text class="value">{{ billForm.wlTypeName }}</text>
      </view>
      <view class="header-item">
        <text class="label">{{ storageType == 'rkType' ? '入库时间' : '出库时间' }}：</text>
        <text class="value">{{ billForm.operationTime }}</text>
      </view>
      <view class="header-item" v-if="storageType == 'ckType'">
        <text class="label">施工队：</text>
        <text class="value">{{ billForm.teamName }}</text>
      </view>
      <view class="header-item">
        <text class="label">理货员：</text>
        <text class="value">{{ billForm.operatorName }}</text>
      </view>
      <!-- <view class="header-item total">
        <text class="label">总数量：</text>
        <text class="value">2套</text>
      </view> -->
    </view>

    <!-- 物料明细列表 -->
    <view class="material-list">
      <!-- <view class="list-title">物料明细</view> -->
      <view class="material-item" v-for="(item, index) in detailList" :key="index">
        <view class="material-header">
          <text class="material-code">物料号：{{ item.wlNo }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">订单号：</text>
          <text class="info-value">{{ item.sapNo }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">物料描述：</text>
          <text class="info-value">{{ item.wlMs}}</text>
        </view>
        <view class="info-item">
          <text class="info-label">数量：</text>
          <text class="info-value">{{ item.realQty }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">存放位置：</text>
          <text class="info-value">{{ item.pcode || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">项目号：</text>
          <text class="info-value">{{ item.xmNo || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">项目描述：</text>
          <text class="info-value">{{ item.xmMs || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">供应商：</text>
          <text class="info-value">{{ item.gysMc || '-' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">备注：</text>
          <text class="info-value">{{ item.remark || '-' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, getCurrentInstance } from 'vue'
  import { stockDetail } from '@/api/storage'

  const storageType = ref("")

  const billForm = ref({
    billNo: "",
    operationTypeName: "",
    wlTypeName: "",
    operationTime: "",
    teamName: "",
    operatorName: "",
  })

  const detailList = ref([])

  onLoad((options)=>{
    storageType.value = options.type
    const instance = getCurrentInstance().proxy
    const eventChannel = instance.getOpenerEventChannel();
    eventChannel.on('acceptDataFrom', (data) => {
      billForm.value = data.data
      stockDetail(billForm.value.billNo).then(res => {
        detailList.value = res.data
      })
    });
  })
</script>

<style lang="scss" scoped>
.receipt-detail-container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 0 20rpx 20rpx;
}


/* 头部信息卡片 */
.header-card {
  background-color: #fff;
  margin: 20rpx 0;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .header-item {
    display: flex;
    margin-bottom: 20rpx;
    font-size: 28rpx;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      color: #666;
      width: 150rpx;
      flex-shrink: 0;
    }

    .value {
      color: #333;
      flex: 1;

    }

    &.total {
      .label {
        font-weight: 500;
        color: #333;
      }
      .value {
        font-weight: 500;
        color: #1890ff;
      }
    }
  }
}

.list-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}
/* 物料明细列表 */
.material-list {
  


  .material-item {
    background-color: #fffbe6;
    border: 1rpx solid #ffe58f;
    border-radius: 12rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;

    .material-header {
      margin-bottom: 16rpx;
      .material-code {
        font-size: 30rpx;
        font-weight: 500;
        color: #d48806;
      }
    }

    .info-item {
      margin-bottom: 12rpx;
      font-size: 26rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .info-label {
        color: #666;
        width: 160rpx;
        flex-shrink: 0;
      }

      .info-value {
        color: #333;
        flex: 1;
      }
    }
  }
}
</style>