DetailProd.vue

<script>
import Decimal from 'decimal.js'
export default {
  name: 'DetailProd',
  props: {
    list: {
      type: Array,
      required: true
    },
    attrList: {
      type: Array,
      required: true
    }
  },
  computed:{
    // 显示特性
    showAttrText(){
      return ids => {
        if(!ids) return ''
        ids = !Array.isArray(ids) ? ids.split(',') : ids
        const attrMap = {}
        this.attrList.forEach(item => {
          attrMap[item.id] = this.$l(item, 'attrName')
        })
        return ids.map(id => attrMap[id]).join(',')
      }
    },
  },
  methods:{
    // 获取品名汇总数据
    getProdSummary(e){
      console.log("getProdSummart", e)
      // 货值
      let worth = new Decimal(0)
      // 填单数据
      let fillData = {
        num: new Decimal(0),
        weight: new Decimal(0),
        volume: new Decimal(0),
        quantity: new Decimal(0)
      }
      // 入仓数据
      let warehouseInData = {
        num: new Decimal(0),
        weight: new Decimal(0),
        volume: new Decimal(0),
        quantity: new Decimal(0)
      }
      // 收费数据
      let chargeData = {
        weight: new Decimal(0),
        volume: new Decimal(0),
      }
      this.list?.forEach(item => {
        worth = worth.plus(item.worth)
        fillData.num = fillData.num.plus(item.num)
        fillData.weight = fillData.weight.plus(item.weight)
        fillData.volume = fillData.volume.plus(item.volume)
        fillData.quantity = fillData.quantity.plus(item.quantity)
        if(item.warehouseInInfoVO){
          warehouseInData.num = warehouseInData.num.plus(item.cartonsNum)
          warehouseInData.weight = warehouseInData.weight.plus(item.weight)
          warehouseInData.volume = warehouseInData.volume.plus(item.volume)
          warehouseInData.quantity = warehouseInData.quantity.plus(item.quantityAll)
        }
        chargeData.weight = chargeData.weight.plus(item.chargeWeight)
        chargeData.volume = chargeData.volume.plus(item.chargeVolume)
      })
      const summary = Array(19).fill(null)
      summary[3] = this.$t("合计")
      // 入仓
      summary[4] = `${warehouseInData.num}${this.$t('箱')} ${warehouseInData.weight}KG ${warehouseInData.volume}m³ ${warehouseInData.quantity}${this.$t('个')}`
      // 货值
      summary[7] = worth.toNumber()
      // 收费数九
      summary[10] = `${chargeData.weight}KG ${chargeData.volume}m³`
      // 填单数据
      summary[17] = `${fillData.num}${this.$t('箱')} ${fillData.weight}KG ${fillData.volume}m³ ${fillData.quantity}${this.$t('个')}`
      return summary
    }
  }
}
</script>

<template>
  <el-table
    :data="list"
    border
    show-summary
    :summary-method="getProdSummary"
    style="width: 100%">
    <el-table-column :label="$t('序号')" width="90px">
      <template slot-scope="scope">{{scope.$index + 1}}</template>
    </el-table-column>
    <el-table-column prop="prodTitleZh" :label="$t('品名')">
      <template slot-scope="{row}">
        {{row.prodTitleZh}}/{{row.prodTitleEn}}
      </template>
    </el-table-column>
    <!--<el-table-column prop="prodTitleEn" :label="$t('品名')" />-->
    <el-table-column prop="brand" :label="$t('品牌')"  width="90px">
      <template slot-scope="{row}">
        <template v-if="row.brandName">{{row.brandName}}</template>
        <dict-tag v-else :type="DICT_TYPE.ECW_IS_BRAND" :value="row.brandType" />
      </template>
    </el-table-column>
    <el-table-column prop="brand" :label="$t('特性')"  width="90px">
      <template slot-scope="{row}">
        {{showAttrText(row.warehouseInInfoVO ? row.warehouseInProdAttrIds : row.prodAttrIds)}}
      </template>
    </el-table-column>
    <el-table-column prop="sumNum" :label="$t('入仓信息')"  width="90px">
      <template slot-scope="{row}">
        <!--<el-link type="primary" @click.native="showWarehouseLogs(row,1)">{{row.warehouseInInfoVO ? row.warehouseInInfoVO.cartonsNum : 0}}</el-link>
        <div v-if="row.warehouseInInfoVO && row.warehouseInInfoVO.isMultiSpecification">({{$t('多规格')}})</div>-->
        <div v-if="row.warehouseInInfoVO">
          {{row.warehouseInInfoVO.cartonsNum}}{{$t('箱')}}
          {{row.warehouseInInfoVO.weight}}Kg
          {{row.warehouseInInfoVO.volume}}m³
          {{row.warehouseInInfoVO.quantityAll}}{{$t('个')}}
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="warehouseType" :label="$t('类型')"  width="120px"/>
    <el-table-column prop="specificationType" :label="$t('包装')"  width="120px"/>
    <el-table-column prop="worth" :label="$t('货值')"  width="120px"/>
    <el-table-column prop="warehouseRecordRemark" :label="$t('入仓备注')"  width="120px"/>
    <el-table-column prop="TODO" :label="$t('快递单号')" />
    <el-table-column prop="sumNum" :label="$t('收费数据')"  width="90px">
      <template slot-scope="{row}">
        <div v-if="row.warehouseInInfoVO">
          {{row.chargeWeight}}Kg
          {{row.chargeVolume}}m³
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="" :label="`${$t('费用类型')}/${$t('模式')}`">
      <template slot-scope="{row}">
        <dict-tag :type="DICT_TYPE.ECW_PAY_ADVANCE" :value="row.isPayAdvance" />
        <div v-if="row.charging ==0">{{ $t('运费/清关费') }}</div>
        <div v-if="row.charging ==1">{{ $t('全包价') }}</div>
      </template>
    </el-table-column>
    <el-table-column prop="" :label="$t('成交单价')"  width="220px">
      <template slot-scope="{row}">

        <template v-if="row.charging ==1">
          <template v-if="!row.originalSeaFreight">{{ $t('未报价') }}</template>
          <el-link type="primary" @click="showFeeDetail(row, 'clearance')" v-else>{{$t('全包价')}} {{row.oneSeaFreight}} {{currencyMap[row.seaFreightCurrency]}} / {{unitMap[row.seaFreightVolume]}}</el-link>
        </template>
        <template v-else-if="!row.originalSeaFreight && !row.originalClearanceFreight">{{ $t('未报价') }}</template>
        <template v-else>
          <el-link type="primary" @click="showFeeDetail(row, 'freight')">
            {{$t('运费')}}：{{row.oneSeaFreight}} {{currencyMap[row.seaFreightCurrency]}} / {{unitMap[row.seaFreightVolume]}}
          </el-link>
          <el-link type="primary" @click="showFeeDetail(row, 'clearance')">
            {{$t('清关费')}}：{{row.oneClearanceFreight}} {{currencyMap[row.clearanceFreightCurrency]}} / {{unitMap[row.clearanceFreightVolume]}}
          </el-link >
        </template>
      </template>
    </el-table-column>
    <el-table-column prop="" :label="$t('材质')">
      <template slot-scope="{row}">
        <dict-tag :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" :value="row.material" />
      </template>
    </el-table-column>
    <el-table-column prop="" :label="$t('用途')">
      <template slot-scope="{row}">
        <div v-if="row.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>
      </template>
    </el-table-column>
    <el-table-column prop="" :label="$t('储位')">
      <template slot-scope="{row}">
        <template v-if="row.warehouseInInfoVO">
          {{getLocationName(row.warehouseInInfoVO.orderLocationMergeVOSet)}}
        </template>
      </template>
    </el-table-column>
    <el-table-column prop="" :label="$t('商品链接')">
      <template slot-scope="{row}">
        <template v-if="row.link">
          <a target="_blank" :url="row.link">{{row.link}}</a>
        </template>
      </template>
    </el-table-column>
    <el-table-column prop="sumNum" :label="$t('填单信息')"  width="90px">
      <template slot-scope="{row}">
        {{row.num}}{{$t('箱')}}
        {{row.weight}}Kg
        {{row.volume}}m³
        {{row.quantity}}{{$t('个')}}
      </template>
    </el-table-column>
    <el-table-column prop="expressNo" :label="$t('填单快递单号')" />
  </el-table>
</template>