aiot-app/pages/pda/outsourcing/components/outsourcingDetail.vue

<template>
  <view class="content-box">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="委外单详情"
      background-color="#157A2C"
      color="#fff"
      @clickLeft="back"
    ></uni-nav-bar>

    <view class="title_box rx-bc">
      <view class="name">基本信息 </view>
    </view>

    <view class="material">
      <view class="content_table">
        <view class="item">
          <view class="lable rx-cc">委外单编码</view>
          <view class="content">
            {{ item.code }}
          </view>
        </view>

        <view class="item">
          <view class="lable rx-cc">委外单名称</view>
          <view class="content">{{ item.name }}</view>
        </view>
        <view class="item">
          <view class="lable rx-cc">委外发起工序</view>
          <view class="content">{{ item.taskName }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">委外工序</view>
          <view class="content">{{ item.taskNames }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">工单编码</view>
          <view class="content">{{ item.workOrderCode }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">预计到货日期</view>
          <view class="content">{{ item.requireDeliveryTime }}</view>
        </view>

        <view class="item">
          <view class="lable rx-cc">创建时间</view>
          <view class="content">{{ item.createTime }}</view>
        </view>
        <view class="item">
          <view class="lable rx-cc">状态</view>
          <view class="content">{{
            item.status == 0 ? "未提交" : item.status == 1 ? "已提交" : "已发布"
          }}</view>
        </view>
      </view>
    </view>

    <view class="list_box">
      <u-list key="list">
        <u-list-item v-for="(item, index) in item.detailList" :key="index">
          <outsourcingData :item="item" :index="index" />
        </u-list-item>
      </u-list>
    </view>
  </view>
</template>

<script>
import outsourcingData from "./outsourcingData.vue";
export default {
  components: {
    outsourcingData,
  },

  data() {
    return {
      item: null,
    };
  },

  onLoad(options) {
    this.item = JSON.parse(options.item);
  },

  methods: {
    scrolltolower() {},
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: $page-bg;
  background: #fff;
}

.title_box {
  .name {
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    color: $theme-color;
    padding-left: 20rpx;

    position: relative;

    &:before {
      position: absolute;
      content: "";
      left: 0rpx;
      top: 0rpx;
      bottom: 0rpx;
      width: 4rpx;
      height: 28rpx;
      background: $theme-color;
      margin: auto;
    }
  }

  .btn_box {
    padding: 0 18rpx;
    height: 60rpx;
    background: $theme-color;
    font-size: 26rpx;
    font-style: normal;
    font-weight: 400;
    font-size: 24rpx;
    color: #fff;
    border-radius: 4rpx;

    .scan {
      width: 34rpx;
      height: 34rpx;
      margin-right: 12rpx;
    }
  }
}

.material {
  margin-top: 10rpx;

  .content_table {
    width: 100%;
    border: 2rpx solid $border-color;

    .item {
      display: flex;
      border-bottom: 2rpx solid $border-color;

      .lable {
        width: 150rpx;
        text-align: center;
        background-color: #f7f9fa;
        font-size: 26rpx;
        border-right: 2rpx solid $border-color;
        flex-shrink: 0;
      }

      .lable150 {
        width: 156rpx !important;
        font-size: 24rpx;
      }

      .ww80 {
        width: 80rpx;
      }

      .content {
        width: 518rpx;
        min-height: 64rpx;
        font-size: 28rpx;
        line-height: 28rpx;
        font-style: normal;
        font-weight: 400;
        padding: 18rpx 8rpx;
        box-sizing: border-box;
        word-wrap: break-word;
        flex-grow: 1 !important;

        .unit {
          padding: 0 4rpx;
          font-size: 24rpx;
          color: #404446;
        }
      }

      .content_num {
        display: flex;
        align-items: center;
        padding: 0 4rpx;

        /deep/ .uni-input-input {
          border: 2rpx solid #f0f8f2;
          background: #f0f8f2;
          color: $theme-color;
        }
      }

      .pd4 {
        padding: 4rpx 8rpx;
      }

      &:last-child {
        border-bottom: none;
      }
    }

    .ww55 {
      width: 55%;
    }

    .ww45 {
      width: 45%;
    }
  }
}

.mt20 {
  margin-top: 20rpx;
}

.list_box {
  flex: 1;
  overflow: hidden;
  padding: 16rpx 0;

  .u-list {
    height: 100% !important;
  }
}
</style>