PackHistoryDetail.vue

<template>
  <div>
    <!-- 订单获取入仓记录 -->
    <el-dialog :title="title" visible :before-close="closeDialog" :close-on-click-modal="false" width="1200px">
        <el-card style="margin-bottom:10px">
          <el-descriptions :title="$t('入仓数据')" :column="3" :labelStyle="{width:'66px'}">
            <el-descriptions-item :label="$t('品名')">{{orderItem.prodTitleZh}}</el-descriptions-item>
            <el-descriptions-item :label="$t('英文品名')">{{orderItem.prodTitleEn}}</el-descriptions-item>
            <el-descriptions-item :label="$t('品牌')" >
                <template v-if="orderItem.brandName">{{orderItem.brandName}}</template>
                <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="orderItem.brandType" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('箱数')">{{(orderItem.warehouseInInfoVO ? orderItem.warehouseInInfoVO.cartonsNum : 0)+$t('箱')}}</el-descriptions-item>
            <el-descriptions-item :label="$t('体积')">{{orderItem.warehouseInInfoVO ? orderItem.warehouseInInfoVO.volume : orderItem.volume}}m³</el-descriptions-item>
            <el-descriptions-item :label="$t('重量')">{{orderItem.warehouseInInfoVO ? orderItem.warehouseInInfoVO.weight : orderItem.weight}}kg</el-descriptions-item>
            <el-descriptions-item :label="$t('数量')">{{orderItem.warehouseInInfoVO ? orderItem.warehouseInInfoVO.quantityAll : orderItem.quantity}}{{$t('个')}}</el-descriptions-item>
            <el-descriptions-item :label="$t('备货状态')">{{airShipmentData[info.airShipment]}}</el-descriptions-item>
            <el-descriptions-item :label="$t('商品特性')">{{productAttr}}</el-descriptions-item>
            <el-descriptions-item :label="$t('用途')">
              <div v-if="orderItem.usageIds">
                  <div v-for="(item,index) in row.usageIds.split(',')">
                    <dict-tag :type="DICT_TYPE.OREER_ITEM_USAGE" :value="item" />
                    <span v-if="(index+1)!=row.usageIds.split(',').length">,</span>
                  </div>
                </div>
              </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card style="margin-bottom:10px">
          <div slot="header" class="card-title">
            {{$t('打包前')}}
          </div>
          <el-table v-if="orderWarehouseInContent" :data="orderWarehouseInContent">
            <el-table-column type="index" :label="$t('序号')" />
            <el-table-column :label="$t('箱数')" prop="cartonsNum">
                <template slot-scope="{row}">
                  <span>{{row.cartonsNum}}</span>
                  <!-- <el-button type="primary" @click="seeBox(row)">({{$t('混箱')}})</el-button> -->
                </template>
            </el-table-column>
            <el-table-column :label="$t('入仓类型')" prop="cartonsNum">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" :value="row.specificationType" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('包装类型')" prop="unit">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.ECW_PACKAGING_TYPE" :value="row.unit" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('长')" prop="boxGauge">
              <template slot-scope="{row}">
                {{row.boxGauge.split('*')[0]}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('宽')" prop="boxGauge" >
              <template slot-scope="{row}">
                {{row.boxGauge.split('*')[1]}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('高')" prop="boxGauge" >
              <template slot-scope="{row}">
                {{row.boxGauge.split('*')[2]}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('体积') + '(m³)'" prop="volume" />
            <el-table-column :label="$t('重量') + '(kg)'" prop="weight" />
            <el-table-column :label="$t('数量（个）')" prop="quantityAll" />
            <el-table-column :label="$t('入仓快递单号')" prop="expressNo" />
            <el-table-column :label="$t('入仓时间')" prop="inTime" >
              <template slot-scope="{row}">{{row.inTime|parseTime}}</template>
            </el-table-column>
            <el-table-column :label="$t('储位')" prop="orderLocationBackVOList" >
              <template slot-scope="{row}">
                {{getLocationName(row.orderLocationBackVOList)}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('入仓影像')" prop="orderLocationBackVOList" >
              <template slot-scope="{row}">
               <el-button type="primary" @click="seeMv(row.pictureUrls)">{{$t('查看')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-card>
      <el-card style="margin-bottom:10px">
          <div slot="header" class="card-title">
            {{$t('打包后')}}
          </div>
          <el-table v-if="warehouseItem && warehouseItem.orderWarehouseInBackItemDoList" :data="warehouseItem.orderWarehouseInBackItemDoList">
            <el-table-column type="index" :label="$t('序号')" />
            <el-table-column :label="$t('箱数')" prop="cartonsNum" />
            <el-table-column :label="$t('入仓类型')" prop="cartonsNum">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" :value="row.specificationType" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('包装类型')" prop="unit">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.ECW_PACKAGING_TYPE" :value="row.unit" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('长')" prop="boxGauge">
              <template slot-scope="{row}">
                {{row.boxGauge.split('*')[0]}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('宽')" prop="boxGauge" >
              <template slot-scope="{row}">
                {{row.boxGauge.split('*')[1]}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('高')" prop="boxGauge" >
              <template slot-scope="{row}">
                {{row.boxGauge.split('*')[2]}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('体积') + '(m³)'" prop="volume" />
            <el-table-column :label="$t('重量') + '(kg)'" prop="weight" />
            <el-table-column :label="$t('数量（个）')" prop="quantityAll" />
            <el-table-column :label="$t('入仓快递单号')" prop="expressNo" />
            <el-table-column :label="$t('入仓时间')" prop="inTime" >
              <template slot-scope="{row}">{{row.inTime|parseTime}}</template>
            </el-table-column>
            <el-table-column :label="$t('储位')" prop="orderLocationBackVOList" >
              <template slot-scope="{row}">
                {{getLocationName(row.orderLocationBackVOList)}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('入仓影像')" prop="orderLocationBackVOList" >
              <template slot-scope="{row}">
                <el-button type="primary" @click="seeMv(row.pictureUrls)">{{$t('查看')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
      </el-card>
      <el-card style="margin-bottom:10px">
        <el-descriptions :title="$t('打包数据')" :column="2" :labelStyle="{width:'120px'}">
          <el-descriptions-item :label="$t('打包后箱数')">{{packData.cartonsNum+$t('箱')}}</el-descriptions-item>
          <el-descriptions-item :label="$t('打包后体积')">{{packData.volume.toFixed(2)}}m³</el-descriptions-item>
          <el-descriptions-item :label="$t('打包后重量')">{{packData.weight.toFixed(2)}}kg</el-descriptions-item>
          <el-descriptions-item :label="$t('打包后数量（个）')" >{{packData.quantityAll}}</el-descriptions-item>
          <el-descriptions-item :label="$t('打包人')">{{packAfterData.creatorName}}</el-descriptions-item>
          <el-descriptions-item :label="$t('打包时间')">{{packAfterData.createTime|parseTime}}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-button type="primary" @click="closeDialog">{{$t('关闭窗口')}}</el-button>

    </el-dialog>
    <el-dialog :title="$t('入仓影像')" :visible="mvShow" :before-close="closeMv" :close-on-click-modal="false" width="600px">
      <div style="display:flex;flex-wrap:wrap">
        <div v-for="(item, index) in pictureUrls" :index="index" :key="index" style="width:80px;height:80px">
            <image v-if="item.type === 'image'" :src="item.url" mode="scaleToFill" style="height: 100%" @tap="previewImage(item.url)" />
            <video v-else-if="item.type === 'video'" :id="`video_${index}`" style="width: 100%;height: 100%" :src="item.url" @play="playVideo(index)" @tap="playVideo(index)" @fullscreenchange="fullscreenchange"></video>
        </div>
      </div>
      <div v-if="pictureUrls.length==0">
        <span>{{$t('暂无影像')}}</span>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import { getOrder, getOrderWarehouseIn } from '@/api/ecw/order'
import { DICT_TYPE } from '@/utils/dict'
import { parseTime } from '@/utils/ruoyi'
import WarehouseAreaSelect from "@/components/WarehouseAreaSelect"
import {getProductAttrList} from '@/api/ecw/productAttr'
export default {
  components: {
    WarehouseAreaSelect
  },
    filters: {parseTime},
    props:{
        order: Object, // order 和 orderId 二选一
        packAfterData: Object,
        orderItemId: Number,
    },
    data(){
        return {
            orderDetail: null,
            warehouseList: null,
            productAttrList:[],  // 商品属性
            airShipmentData:['默认值','待出','可出','备货中','已备货'],
            packData:{
              cartonsNum:0,
              volume:0,
              weight:0,
              quantityAll:0
            },
            pictureUrls:[],
            mvShow:false
        }
    },
    computed:{
      info(){
        return this.orderDetail || this.order
      },
      orderItem(){
        if(!this.info) return null
        return this.info.orderItemVOList.find(item => item.orderItemId == this.orderItemId)
      },
      warehouseItem(){
        if(!this.warehouseList) return []
        return this.warehouseList.find(item => item.orderItemId == this.orderItemId) || []
      },
      title(){
        if(!this.orderItem) return '-'
        return this.$l(this.orderItem, 'prodTitle') + ' - ' + this.$t('入仓记录')
      },
      orderWarehouseInContent(){
        if(!this.packAfterData) return []
        return JSON.parse(this.packAfterData.orderWarehouseInContent)
      },
      productAttr(){
        if(this.productAttrList.length==0||!this.orderItem.warehouseInProdAttrIds) return ''
        let data = []
          // 要拆分成数组再用indexOf，字符串直接indexOf会有问题，"12,3".indexOf('1') > -1 为true
        let warehouseInProdAttrIds = this.orderItem.warehouseInProdAttrIds.split(',')
          console.log({warehouseInProdAttrIds})
        this.productAttrList.forEach(item=>{
          if(warehouseInProdAttrIds.indexOf(`${item.id}`)>-1){
            data.push(this.$l(item, 'attrName'))
          }
        })
        return data.join(',')
      },
    },

    async created(){
        this.show = true
        if(!this.order && this.orderId){
          getOrder(this.orderId).then(res => {
            this.orderDetail = res.data
          })
        }
        this.getOrderWarehouseIn()
        this.productAttrList = (await getProductAttrList()).data
    },
    methods:{
      // 获取储位名称
      getLocationName(locationArr){
        if(!locationArr || !locationArr.length) return ''
        let arr = []
        locationArr.forEach(item => {
          arr.push(`${item.areaName}${item.locationName || ''}`)
        })
        return Array.from(new Set(arr)).join(",")
      },
        closeDialog(){
            this.show = false
            this.$emit('close');
        },
        getOrderWarehouseIn(){
          getOrderWarehouseIn(this.info.orderId).then(res => {
            this.warehouseList = res.data
            var warehouseItem = this.warehouseList.find(item => item.orderItemId == this.orderItemId)
            if(warehouseItem&&warehouseItem.orderWarehouseInBackItemDoList!=null){
              warehouseItem.orderWarehouseInBackItemDoList.forEach(item=>{
                if(item.volume) this.packData.volume += parseFloat(item.volume)
                if(item.weight) this.packData.weight += parseFloat(item.weight)
                if(item.cartonsNum) this.packData.cartonsNum += parseInt(item.cartonsNum)
                if(item.quantityAll) this.packData.quantityAll += parseInt(item.quantityAll)
              })
            }
          })
        },
        seeMv(list){
          this.mvShow=true
          if(list){
            this.pictureUrls = list.map(e => {
              return {
                url: e,
                type: this.isImageFile(e) ? 'image' : 'video',
              }
            })
          }

        },
        isImageFile(filename) {
          var imageExtensions = [".jpeg", ".jpg", ".png", ".gif", ".bmp", ".tiff"];
          var extension = "";
          var length = filename.length;
          for (var i = length - 1; i >= 0; i--) {
            if (filename[i] === ".") {
              extension = filename.slice(i).toLowerCase();
              break;
            }
          }

          return imageExtensions.indexOf(extension) !== -1;
        },
        closeMv(){
          this.mvShow = false
        }
    }
}
</script>