aiot-app/pages/warehouse/enterHouse/details copy.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="入库详情"
      @clickLeft="back"
    ></uni-nav-bar>
    <view>
      <CellInfo label="单号" :value="infoData.bizNum" />
      <CellInfo
        label="状态"
        :value="getDictName(auditStatus, infoData.verifyStatus)"
        :valueClass="getAuditStatus(infoData.verifyStatus).class"
      >
      </CellInfo>
      <CellInfo label="创建时间" :value="infoData.createTime" />
    </view>

    <uni-section title="基本信息" type="line">
      <CellInfo
        label="来源单据"
        :value="infoData.documentSource"
        :isLink="true"
      />
      <CellInfo
        label="入库类型"
        :value="getDictValue('物品类型', infoData.assetType)"
      />
      <CellInfo label="权属部门" :value="infoData.deptName" />
      <CellInfo label="入库登记人" :value="infoData.createUserName" />
      <CellInfo label="入库时间" :value="infoData.verifyTime" />
      <CellInfo label="审核人" :value="infoData.verifyName" />
      <CellInfo label="供应商" :value="infoData.supplierName" />
      <CellInfo label="送货人" :value="infoData.deliveryName" />
      <CellInfo label="送货人联系方式" :value="infoData.deliveryPhone" />
      <CellInfo
        label="紧急状态"
        :value="getDictName(emergencyState, infoData.urgent)"
      />
      <!-- <CellInfo
        title="附件"
        :value="infoData.sourceBill ? infoData.sourceBill : '无 >'"
      >
      <view slot="value">


      </view>
    </CellInfo> -->
      <CellInfo label="备注" :value="infoData.remark" />
    </uni-section>

    <uni-section title="明细" type="line" class="listContent">
      <u-collapse>
        <u-collapse-item
          :open="false"
          :typeOpen="false"
          v-for="(item, index) in warehousingMaterialList"
          :key="index"
        >
          <view class="listBox" slot="title">
            <view class="listCont">
              <view class="" style="width: 100%">{{ item.assetCode }}</view>
              <view class="item"><text>名称：</text>{{ item.assetName }}</view>

              <view
                class="item"
                v-for="(itm, index) in tableHeader"
                :key="index"
                ><text>{{ itm.label }}：</text>{{ item[itm.prop] }}</view
              >
              <view class="item"><text>批次号：</text>{{ item.batchNum }}</view>
              <view class="item"
                ><text>最小包装单元：</text>{{ item.measurementUnit
                }}{{ item.unit }} /{{ item.minPackUnit }}</view
              >
              <view class="item"
                ><text>包装数量：</text>{{ item.outInNum }}</view
              >
              <view class="item"
                ><text>单价：</text>
                <template v-if="item.univalence || item.univalence === 0">
                  {{ item.univalence
                  }}{{ { yuan: '元', wanyuan: '万元' }[item.univalenceUnit] }}
                </template></view
              >
              <view class="item"
                ><text>总额：</text
                >{{
                  calcSum(
                    item.outInNum,
                    item.measurementUnit,
                    item.univalence,
                    item
                  )
                }}</view
              >
              <view class="item" v-if="infoData.assetType === 3"
                ><text>质检单：</text
                ><text
                  class="text-primary"
                  @tap.stop.prevent="viewFile(item.contentImage)"
                  >查看</text
                ></view
              >
              <view class="item" style="width: 100%"
                ><text>仓库：</text
                >{{
                  `${item.warehouseName}-${item.areaName}-${item.shelfCode}-${item.cargoSpaceCode}`
                }}</view
              >
            </view>
          </view>

          <view
            v-for="(itm, index) in item.warehouseLedgerDetails"
            class="codeList"
            :key="index"
          >
            <view style="width: 100%"
              >{{ getDictValue('物品类型', infoData.assetType) }}编码：{{
                itm.onlyCode
              }}</view
            >
            <view style="min-width: 20%">包装编码：{{ itm.num }}</view>
            <view
              >{{ itm.procurementTime ? '采购日期' : '生产日期' }}：{{
                itm.manufactureTime || itm.procurementTime
              }}</view
            >
          </view>
        </u-collapse-item>
      </u-collapse>
    </uni-section>
    <u-overlay :show="show" @click="show = false">
      <view class="warp">
        <image :src="imgs"></image>
      </view>
    </u-overlay>
  </view>
</template>

<script>
import {
  warehousingType,
  sceneState,
  inputStatus,
  emergencyState,
  auditStatus,
  getDictName,
  getDict,
  materialType
} from '../enum.js'
import CellInfo from '@/components/CellInfo.vue'
import { post, get, postB } from '@/utils/api.js'
import getinput from '@/components/Getinput'
import { tableHeader } from '../common'
import dictMixins from '@/mixins/dictMixins.js'
export default {
  components: {
    getinput,
    CellInfo
    // addDetails,
  },
  mixins: [dictMixins],
  data () {
    return {
      show: false,
      materialType,
      emergencyState,
      warehousingType,
      auditStatus,
      getDictName,
      getAuditStatus: getDict(auditStatus),
      id: '',
      code: '',
      infoData: {},
      warehousingMaterialList: [],
      imgs: ''
    }
  },
  onLoad (params) {
    this.id = params.id
    this.requestDict('物品类型')
  },
  onShow () {
    this.getDetails()
  },
  computed: {
    tableHeader () {
      return tableHeader(this.infoData.assetType)
    },
    isMaterial () {
      return this.infoData.assetType == 3
    },
    warehousingName () {
      return getDictName(warehousingType, this.infoData.assetType)
    },
    // 条码信息
    materialCodeReqList () {
      return this.warehousingMaterialList
        .map(i => i.warehouseLedgerDetails || [])
        .flat()
    }
  },
  methods: {
    calcSum (a, b, c, row) {
      if (
        (Number.isNaN(+a) && a !== '') ||
        (Number.isNaN(+b) && b !== '') ||
        (Number.isNaN(+c) && c !== '')
      ) {
        return ''
      }

      return a * b * c + { yuan: '元', wanyuan: '万元' }[row.univalenceUnit]
    },
    viewFile (list) {
      this.show = true
      this.imgs = this.apiUrl + list[0]?.accessUrl || ''
    },
    //获取信息
    getDetails () {
      get(this.apiUrl + `/outInWarehouse/select/detail/${this.id}`, {})
        .then(res => {
          if (res?.success) {
            this.warehousingMaterialList = res.data.warehouseLedgerInfos
            this.infoData = res.data.outInWarehouse
          }
        })
        .catch(res => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBox {
  padding-bottom: 120rpx;
  /deep/.content-class {
    background-color: rgba(240, 243, 243, 1);
  }
}
.warp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.codeList {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10rpx 0;
  font-size: 28rpx;
  border-bottom: 1rpx solid #ccc;
  view {
  }
}

.picList {
  display: flex;
  align-items: center;
  justify-items: flex-start;
  flex-wrap: wrap;
}

/deep/.picList .u-image {
  margin-right: 10rpx;
  margin-bottom: 10rpx;
}

/deep/.cLine .u-line:nth-child(1) {
  border-bottom: none !important;
}

.listContent {
  position: relative;
  // bottom: 50px;
  .selectEnterType {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  .more {
    position: absolute;
    bottom: 26rpx;
    right: 30rpx;
    font-size: 28rpx;
    color: #fff !important;
    background-color: #36a82c;
  }
}

.footBox {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  view {
    width: 50%;
    height: 100%;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .reg {
    background: $u-success-dark;
  }

  .uni-icons {
    margin-right: 8rpx !important;
  }
}

.listBox {
  border-bottom: 1px #f2f2f2 solid;
  position: relative;

  .listTit {
    display: flex;
    align-items: center;

    .name {
      width: 50%;
      margin-left: 10px;
      overflow: hidden;
      white-space: nowrap;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      font-size: 30rpx;
    }

    .weight {
      font-size: 30rpx;
      margin-left: auto;
      margin-right: 60rpx;
      position: relative;
    }

    .weight::after {
      position: absolute;
      right: -30rpx;
      top: 50%;
      content: '';
      background: #eee;
      width: 1px;
      height: 28rpx;
      margin-top: -14rpx;
    }
  }

  .listCont {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20rpx;
    margin-left: 10rpx;

    .item {
      width: 50%;
      font-size: $uni-font-size-sm;
      line-height: 45rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      color: #000;
    }

    .item text {
      color: #666;
    }
  }

  .more {
    position: absolute;
    bottom: 26rpx;
    right: 30rpx;
    font-size: 28rpx;
    color: #666;
  }
}

.listBox:last-child {
  border: none !important;
}
.xuanze-css {
  color: #eee;
  background-color: #36a82c;
  font-size: 15px;
  position: absolute;
  right: 0px;
  top: 7px;
  cursor: pointer;
}
.btn-top {
  width: 100%;
  height: 70px;
  background-color: #fff;
  border-top: 1px solid rgb(211, 208, 208);
  position: fixed;
  top: 90%;
  z-index: 1px;
  display: flex;
  justify-content: right;
  line-height: 70px;
  view {
    width: 55px;
    text-align: center;
    color: #fff;
    margin-left: 6px;
    background-color: #36a82c;
  }
}
.jian-css {
  background-color: #36a82c;
  color: #fff;
  border-radius: 2px;
}
.laing-css {
  background-color: #409eff;
  color: #fff;
  border-radius: 2px;
}
</style>