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

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="出库详情"
      @clickLeft="back"
    ></uni-nav-bar>

    <CellInfo label="单号" :value="infoData.bizNum"></CellInfo>
    <CellInfo
      label="状态"
      :value="getDictName(auditStatus, infoData.verifyStatus)"
      :valueClass="getAuditStatus(infoData.verifyStatus).class"
    >
    </CellInfo>
    <CellInfo label="创建时间" :value="infoData.createTime"></CellInfo>

    <uni-section title="基本信息" type="line">
      <CellInfo
        label="来源单据"
        :value="infoData.documentSource"
        :isLink="true"
      ></CellInfo>
      <CellInfo
        label="出库类型"
        :value="getDictValue('物品类型', infoData.assetType)"
      ></CellInfo>
      <CellInfo label="权属部门" :value="infoData.deptName"></CellInfo>
      <CellInfo label="出库登记人" :value="infoData.createUserName"></CellInfo>
      <CellInfo label="出库时间" :value="infoData.verifyTime"></CellInfo>
      <CellInfo label="审核人" :value="infoData.verifyName"></CellInfo>
      <CellInfo label="领料人" :value="infoData.deliveryName"></CellInfo>
      <CellInfo
        label="领料人联系方式"
        :value="infoData.deliveryPhone"
      ></CellInfo>
      <CellInfo
        label="紧急状态"
        :value="getDictName(emergencyState, infoData.urgent)"
      ></CellInfo>
      <CellInfo label="备注" :value="infoData.remark"></CellInfo>
    </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"
        >
          <template slot="title">
            <view class="listBox">
              <view class="listCont">
                <view style="width: 100%">{{ item.assetCode }}</view>
                <view class="item"
                  ><text class="label">名称：</text>{{ item.assetName }}</view
                >
                <view
                  class="item"
                  v-for="(itm, index) in tableHeader"
                  :key="index"
                  ><text class="label">{{ itm.label }}：</text
                  >{{ item[itm.prop] }}</view
                >
                <view class="item"
                  ><text class="label">出库数量：</text>
                  <text style="margin-right: 20rpx"
                    >{{ item.selfSum }} {{ item.unit }}</text
                  >
                  <template v-if="!item.isUnpack"
                    >{{ item.outInNum }}{{ item.minPackUnit }}</template
                  ></view
                >
              </view>
            </view>
          </template>
          <view
            v-for="(itm, index) in item.warehouseLedgerDetails"
            class="codeList"
            :key="index"
          >
            <view class="listBox codeMsg">
              <view class="listCont">
                <view style="width: 100%" class="item">
                  <text class="label">货位：</text
                  ><text class="content">
                    {{ itm.warehouseName }}-{{ itm.areaName }}-{{
                      itm.shelfCode
                    }}-{{ itm.cargoSpaceCode }}</text
                  >
                </view>
                <view class="item" style="width: 100%">
                  <text class="label"
                    >{{
                      getDictValue('物品类型', infoData.assetType)
                    }}编码：</text
                  ><text class="content">{{ itm.onlyCode }}</text>
                </view>
                <view class="item">
                  <text class="label">批次号：</text
                  ><text class="content">{{ itm.batchNum }}</text>
                </view>
                <view class="item" v-if="!item.isUnpack">
                  <text class="label">最小包装单元：</text
                  ><text class="content"
                    >{{ itm.measurementUnit }}{{ itm.unit }} /{{
                      itm.minPackUnit
                    }}</text
                  >
                </view>
                <view class="item">
                  <text class="label">包装编码：</text
                  ><text class="content">{{ itm.num }}</text>
                </view>
                <view class="item" style="width: 100%">
                  <text class="label">转消耗：</text
                  ><text class="content">
                    <u-checkbox-group disabled>
                      <u-checkbox
                        :size="30"
                        :checked="!!itm.isTransferAsset"
                        :name="true"
                      ></u-checkbox> </u-checkbox-group
                  ></text>
                </view>
                <view
                  class="item w100"
                  v-if="itm.manufactureTime || !itm.procurementTime"
                >
                  <text class="label">生产日期：</text
                  ><text class="content">{{ itm.manufactureTime }}</text>
                </view>
                <view class="item w100" v-if="itm.procurementTime">
                  <text class="label">采购日期：</text
                  ><text class="content">{{ itm.procurementTime }}</text>
                </view>
              </view>
            </view>
          </view>
        </u-collapse-item>
      </u-collapse>
    </uni-section>
  </view>
</template>

<script>
import {
  warehousingType,
  sceneState,
  inputStatus,
  emergencyState,
  auditStatus,
  getDictName,
  getDict,
  materialType
} from '../enum.js'
import CellInfo from '@/components/CellInfo.vue'
import { post, get } from '@/utils/api.js'
import { tableHeader } from '../common'
import getinput from '@/components/Getinput'
import dictMixins from '@/mixins/dictMixins'
export default {
  mixins: [dictMixins],
  components: {
    getinput,
    CellInfo
    // addDetails,
  },
  data () {
    return {
      materialType,
      emergencyState,
      warehousingType,
      auditStatus,
      getAuditStatus: getDict(auditStatus),
      getDictName,
      id: '',
      code: '',
      infoData: {},
      warehousingMaterialList: []
    }
  },
  onLoad (params) {
    this.id = params.id

    this.requestDict('物品类型')
  },
  onShow () {
    this.getDetails()
  },
  computed: {
    tableHeader () {
      return tableHeader(this.infoData.assetType)
    },
    // 条码信息
    materialCodeReqList () {
      return this.warehousingMaterialList
        .map(i => i.warehouseLedgerDetails || [])
        .flat()
    },
    warehousingName () {
      return getDictName(warehousingType, this.infoData.assetType)
    }
  },
  methods: {
    //获取信息
    getDetails () {
      get(this.apiUrl + `/outInWarehouse/select/detail/${this.id}`, {})
        .then(res => {
          if (res?.success) {
            this.warehousingMaterialList = res.data.warehouseLedgerInfos.map(
              item => {
                item.selfSum = (item.warehouseLedgerDetails || []).reduce(
                  (sum, pre) => {
                    if (item.isUnpack) {
                      return ++sum
                    }
                    return sum + pre.measurementUnit
                  },
                  0
                )

                return item
              }
            )
            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);
  }
}

.codeList {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.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;
      color: #000;
      display: flex;
      .label {
        margin-right: 10rpx;
        white-space: nowrap;
      }
      .content {
        flex: 1;
        word-break: break-all;
      }
    }

    .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>