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 orderItem.usageIds.split(',')">
                    <dict-tag :type="DICT_TYPE.OREER_ITEM_USAGE" :value="item" />
                    <span v-if="(index+1)!=orderItem.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.orderWarehouseInBackItemDoList">
            <el-table-column type="index" :label="$t('序号')" />
            <el-table-column :label="$t('箱数')" prop="cartonsNum">
                <template slot-scope="{row}">
                  <span>{{row.cartonsNum}}</span>
                  <el-button v-if="row.orderWarehouseInDetailsVOList&&row.orderWarehouseInDetailsVOList.length>0" type="text" @click="seeBox(row.orderWarehouseInDetailsVOList)">({{$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" min-width="150">
              <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(orderWarehouseInContent.pictureUrls)">{{$t('查看')}}</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <div  style="margin:20px 0;font-size:16px;font-weight:600">
            {{$t('打包前入仓影像')}}
          </div>
          <image-and-video-upload v-if="orderWarehouseInContent.pictureUrls" readonly :fileSize="50" :isShowTip="true" :value="orderWarehouseInContent.pictureUrls" ></image-and-video-upload>
      </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">
            <template slot-scope="{row}">
                  <span>{{row.cartonsNum}}</span>
                  <el-button v-if="row.orderWarehouseInDetailsVOList&&row.orderWarehouseInDetailsVOList.length>0" type="text" @click="seeBox(row.orderWarehouseInDetailsVOList)">({{$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" min-width="150">
              <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(warehouseItem.pictureUrls)">{{$t('查看')}}</el-button>
              </template>
            </el-table-column> -->
          </el-table>
          <div  style="margin:20px 0;font-size:16px;font-weight:600">
             {{$t('打包后入仓影像')}}
          </div>
          <image-and-video-upload v-if="warehouseItem.pictureUrls" readonly :fileSize="50" :isShowTip="true" :value="warehouseItem.pictureUrls" ></image-and-video-upload>
      </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.sync="mvShow" :before-close="closeMv" :close-on-click-modal="false">
<!--      <div style="display:flex;flex-wrap:wrap">
        <div v-for="(item, index) in pictureUrls" :index="index" :key="index" style="width:80px;height:80px">
            <img 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> -->
      <image-and-video-upload readonly :fileSize="50" :isShowTip="true" :value="pictureUrls" ></image-and-video-upload>
    </el-dialog>
    <el-dialog :title="$t('箱明细')" :visible.sync="boxShow" :before-close="closeBox" :close-on-click-modal="false" width="800px">
       <el-form>
        <WarehouseRecordDetailItem
            v-for="(item, index) in boxData"
            :key="index" v-model="boxData[index]"
            :index="index" :attr-list="attrList"
            :readonly="true"
        />
        </el-form>
    </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'
import ImageAndVideoUpload from '@/components/ImageAndVideoUpload'
import WarehouseRecordDetailItem from "@/views/ecw/order/warehousing/components/WarehouseRecordDetailItem.vue";
export default {
  components: {
    WarehouseAreaSelect,WarehouseRecordDetailItem,ImageAndVideoUpload
  },
    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,
            boxShow:false,
            // 特性列表
            attrList: [],
            boxData: []
        }
    },

    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
        this.getAttrList()
    },
    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
          }else{
            this.pictureUrls = []
          }

        },
        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
        },
        closeBox(){
          this.boxData = []
          this.boxShow = false
        },
        seeBox(data){
          data.forEach(e => {
            let bg = {}
            if (e.boxGauge) {
              const boxGauge = e.boxGauge.split('*')
              // e.boxGauge1 = boxGauge[0]
              // e.boxGauge2 = boxGauge[1]
              // e.boxGauge3 = boxGauge[2]
              bg = {
                boxGauge1: boxGauge[0],
                boxGauge2: boxGauge[1],
                boxGauge3: boxGauge[2]
              }
            }
            this.boxData.push({...e, ...bg})
          })
          this.boxShow = true
        },
        /** 获取产品属性列表 */
        getAttrList() {
          getProductAttrList().then(response => {
            this.attrList = response.data;
          })
        },
    }
}
</script>