aiot-app/pages/warehouse/inventoryAllocation copy/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 v-if="activeName === 1">
      <CellInfo
        v-if="type !== 'view'"
        label="调拨单号"
        :value="baseInfo.dialNumber"
      />
      <CellInfo
        label="调拨类型"
        :value="baseInfo.dialType == 1 ? '库内调拨' : '库外调拨'"
      />
      <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]"
      />
      <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">
      <AssetsCard
        v-for="(item, index) in list"
        class="kd-row"
        type="detail"
        :key="index"
        :item="item"
      />
    </view>
  </view>
</template>

<script>
import CellInfo from '@/components/CellInfo.vue'
import AssetsCard from './AssetsCard.vue'
export default {
  components: { CellInfo, AssetsCard },
  props: {
    baseInfo: {
      type: Object,
      default: () => ({})
    },
    list: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      default: ''
    }
  },
  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;

}
.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;
  .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 {
  margin: 20rpx 40rpx;
  border: 1rpx solid rgba(204, 204, 204, 1);
}
.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>