aiot-app/pages/production/order/components/DetailView.vue

<template>
  <view>
    <view class="tabs-container">
      <view class="tabs">
        <view
          class="tab-item"
          :class="{ active: activeName === 1 }"
          @click="activeName = 1"
          >基本信息</view>
        <view
          class="tab-item"
          :class="{ active: activeName === 2 }"
          @click="activeName = 2"
        >生产明细</view>
      </view>
    </view>
    <view class="list" 
	   v-if="activeName === 1"
	   :style="showTab?'height: calc(100vh - 570rpx)':'height: calc(100vh - 380rpx)'"
	>
      <CellInfo  label="生产工单号" :value="baseInfo.dialNumber" />
      <CellInfo  label="计划编号"  :value="baseInfo.dialType" />
      <CellInfo label="生产版本" :value="baseInfo.warehouseName" />
      <CellInfo label="工艺路线版本" :value="baseInfo.inWarehouseName" />
      <CellInfo label="产品编码" :value="sum" />
      <CellInfo label="产品名称" :value="baseInfo.createUserName" />
      <CellInfo
        label="牌号"
        :valueClass="statusClass[baseInfo.auditStatus]"
        :value="type === 'view' ? '草稿' : statusList[baseInfo.auditStatus]"
      />
	  <CellInfo  label="型号" :value="baseInfo.dialNumber" />
	  <CellInfo  label="要求成型数量"  :value="baseInfo.dialType" />
	  <CellInfo label="要求成型重量" :value="baseInfo.warehouseName" />
	  <CellInfo label="已成型数量" :value="baseInfo.inWarehouseName" />
	  <CellInfo label="已成型重量" :value="sum" />
	  <CellInfo label="计划开始时间" :value="baseInfo.createUserName" />
	  <CellInfo  label="实际开始时间" :value="baseInfo.dialNumber" />
	  <CellInfo  label="要求成型完成时间"  :value="baseInfo.dialType" />
	  <CellInfo label="实际成型完成时间" :value="baseInfo.warehouseName" />
	  <CellInfo label="已完成生产数量" :value="baseInfo.inWarehouseName" />
	  <CellInfo label="已完成生产重量" :value="sum" />
      <!-- <template v-if="type !== 'view'">
        <CellInfo label="创建时间" :value="baseInfo.createTime" />
        <CellInfo label="提交时间" :value="baseInfo.submissionTime" />
        <CellInfo label="审核时间" :value="baseInfo.auditorTime" />
        <CellInfo label="审核说明" :value="baseInfo.auditCause" />
      </template> -->
    </view>
	<view class="list" 
	  v-if="activeName === 2"
	  :style="showTab?'height: calc(100vh - 570rpx)':'height: calc(100vh - 380rpx)'"
	>
		<DetailProduct />
	</view>
  </view>
</template>

<script>
import CellInfo from '@/components/CellInfo.vue'
import DetailProduct from './DetailProduct.vue'
export default {
  components: { CellInfo , DetailProduct },
  props: {
    baseInfo: {
      type: Object,
      default: () => ({})
    },
    list: {
      type: Array,
      default: () => []
    },
	showTab:{
		type:Boolean,
		default: () => false
	},
    type: {
      type: String,
      default: ''
    }
  },
  watch:{
	 showTab(tab){
		 // console.log('tab',tab)
	 }  
  },
  computed: {
    sum () {
      return this.list.reduce((sum, item) => {
        if (item.takeStockPattern) {
          sum += +item.amount
        } else {
          sum += item.detailReqList?.length || 0
        }

        return sum
      }, 0)
    }
  },
  data () {
    return {
      activeName: 1,
      statusList: {
        4: '草稿',
        1: '待审核',
        0: '已驳回',
        2: '已完成'
      },
      statusClass: {
        4: '',
        1: 'text-primary',
        0: 'text-danger',
        2: 'text-primary'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-container {
  height: 80rpx;
  background: #fff;
  border-bottom: 2rpx solid #333333;
}
.tabs {
  position: fixed;
  width: 100vw;
  height: 80rpx;
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 20rpx;
  padding-left: 30rpx;
  line-height: 50rpx;
  .tab-item {
    width: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10rpx;
    &.active {
      background: linear-gradient(
        180deg,
        rgba(75, 121, 2, 1) 0%,
        rgba(255, 255, 255, 1) 12%
      );
      border-right: 1rpx solid #ccc;
      border-left: 1rpx solid #ccc;
    }
  }
}
.list {
  overflow-y: auto;
  /deep/.list-cell{
	  display: flex;
	  align-items: center;
	  justify-content: space-around;
	  .label{
		  max-width: 240rpx!important;
		  text-align: left;
	  }
	  .value{
		  text-align: right;
	  }
  }
}
.kd-row {
  font-size: 28rpx;
  padding: 14rpx 12rpx 6rpx;
  border-bottom: 1rpx solid $page-bg;
  .kd-col {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #aaaaaa;

    > text {
      flex: 1;
    }
    .label {
      margin-right: 20rpx;
    }
    &.kd-col {
      margin-top: 25rpx;
    }

    .status {
      background-color: $page-bg;
      display: inline-block;
      padding: 4rpx 10rpx;
      border-radius: 18rpx;
    }
  }
  .title {
    font-weight: bold;
    color: #333333;
  }
}
</style>