detail.vue

<template>
  <div class="app-container" v-if="order">
    <el-card class="card">
      <div slot="header" class="card-title">
        {{$t('订单编号')}}：{{order.orderNo}}
        <template v-if="order.tidanNo"> - {{order.tidanNo}}</template>
        <template v-else-if="order.containerNumber"> - {{order.containerNumber}}</template>
      </div>
      <el-row :gutter="24">
        <el-col :span="12" v-if="order.consignorVO" >
          <el-descriptions class="margin-top" border :title="$t('发货人')" :column="3" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
            <el-descriptions-item :label="$t('中文名称')">
              <component :is="hasCustomerDetailPermi ? 'router-link' : 'span'" :to="`/customer/query/${order.consignorVO.customerId}`">{{order.consignorVO.name}}</component>
            </el-descriptions-item>
             <!-- v1.7新增 -->
             <el-descriptions-item :label="$t('英文名称')">
							 <component :is="hasCustomerDetailPermi ? 'router-link' : 'span'" :to="`/customer/query/${order.consignorVO.customerId}`">
                {{order.consignorVO.nameEn}}
               </component>
             </el-descriptions-item>
            <el-descriptions-item :label="$t('电话')">
              +{{order.consignorVO.countryCode}} {{order.consignorVO.phone}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('付款人')">
              <el-link v-if="order.drawee == 3" @click.native="showDarweeDialog=true" type="primary">{{ $t('自定义') }}</el-link>
              <dict-tag v-else :type="DICT_TYPE.DRAWEE" :value="order.drawee"></dict-tag>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions border :class="showMore?'showInfo':'hiddenInfo'" :column="3" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
              <el-descriptions-item :label="$t('邮箱')">{{order.consignorVO.email}}</el-descriptions-item>
              <el-descriptions-item :label="$t('公司中文名称')">
                {{order.consignorVO.company}}
              </el-descriptions-item>
               <!-- v1.7新增 -->
              <el-descriptions-item :label="$t('公司英文名称')">
                {{order.consignorVO.companyEn}}
              </el-descriptions-item>
            </el-descriptions>
        </el-col>
        <el-col :span="12" v-if="order.consigneeVO" style="position: relative;">
          <span style="color:#409EFF;position: absolute;right:40px;top:0;font-size:16px;cursor: pointer;" @click="consigneeChange">{{consigneeText}}</span>
          <el-descriptions class="margin-top" border :title="$t('收货人')" :column="3" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
            <el-descriptions-item :label="$t('中文名称')">
              <component :is="hasCustomerDetailPermi ? 'router-link' : 'span'" :to="`/customer/query/${order.consigneeVO.customerId}`">{{order.consigneeVO.name}}</component>
            </el-descriptions-item>
             <!-- v1.7新增 -->
            <el-descriptions-item :label="$t('英文名称')">
              <component :is="hasCustomerDetailPermi ? 'router-link' : 'span'" :to="`/customer/query/${order.consigneeVO.customerId}`">{{order.consigneeVO.nameEn}}</component>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('电话')">
              +{{order.consigneeVO.countryCode}} {{order.consigneeVO.phone}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货方式')">
              <dict-tag :type="DICT_TYPE.ECW_HARVEST_METHOD" :value="order.consigneeVO.harvestMethod" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货地区')">
              {{region}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货地址')">
              {{order.consigneeVO.address}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions border :class="showMore?'showInfo':'hiddenInfo'" :column="3" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
             <el-descriptions-item :label="$t('邮箱')">{{order.consigneeVO.email}}</el-descriptions-item>
             <el-descriptions-item :label="$t('公司中文名称')">
               {{order.consigneeVO.company}}
             </el-descriptions-item>
              <!-- v1.7新增 -->
             <el-descriptions-item :label="$t('公司英文名称')">
               {{order.consigneeVO.companyEn}}
             </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="card">
      <el-descriptions border :title="$t('物流信息')" :column="4" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
        <el-descriptions-item :label="$t('始发仓')">{{$l(order.logisticsInfoDto, 'startTitle')}}</el-descriptions-item>
        <el-descriptions-item :label="$t('目的仓')">{{$l(order.logisticsInfoDto, 'destTitle')}}</el-descriptions-item>
        <!-- <el-descriptions-item :label="$t('地址')" :span="2">{{order.logisticsInfoDto.startAddressZh}}</el-descriptions-item> -->
        <el-descriptions-item :label="$t('运输方式')" >
          <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="order.transportId" />
        </el-descriptions-item>
        <el-descriptions-item v-if="getDictData(DICT_TYPE.ECW_TRANSPORT_TYPE, order.transportId).cssClass == 'channel'":label="$t('出货渠道')" >{{order.channelName}}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card class="card">
      <el-descriptions class="mr-10" border :title="$t('基础信息')" :column="2" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
        <el-descriptions-item :label="$t('唛头')">{{order.marks}}</el-descriptions-item>
        <el-descriptions-item :label="$t('送货时间')" v-if="!order.isExternalWarehouse">{{order.deliveryDate}}</el-descriptions-item>
        <el-descriptions-item :label="$t('是否控货')">
          <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="order.isCargoControl" />
        </el-descriptions-item>
        <el-descriptions-item :label="$t('填单信息')">
          {{order.costVO.totalNum}}{{$t('箱')}}
          {{order.costVO.totalWeight}}Kg
          {{order.costVO.totalVolume}}m³
          {{order.costVO.totalQuantity}}{{$t('个')}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('仓库实测')">
          {{order.sumNum}}{{$t('箱')}}
          {{order.sumWeight}}Kg
          {{order.sumVolume}}m³
          {{order.sumQuantity}}{{$t('个')}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('收款数据')">
          {{order.sumNum}}{{$t('箱')}}
          {{order.vweight}}Kg
          {{order.wvolume}}m³
          {{order.sumQuantity}}{{$t('个')}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('入仓类型')">
          <dict-tag :type="DICT_TYPE.ECW_WAREHOUSING_TYPE" :value="order.warehouseType" />
        </el-descriptions-item>
        <el-descriptions-item :label="$t('单证报关')">
          <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="order.customsType" />
        </el-descriptions-item>
        <el-descriptions-item :label="$t('关联报价单')">
          <router-link v-if="offerData" :to="{path: '/offer/detail',query: {offerId: offerData.offerId}}" class="link-type">
            <span>{{ offerData.number }}</span>
          </router-link>
          <span v-else>/</span>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions class="mr-10" border :column="2" :class="showMore?'showInfo':'hiddenInfo'" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
        <el-descriptions-item :label="$t('出单方式')">
            <dict-tag :type="DICT_TYPE.ECW_SUING_METHOD" :value="order.issuingMethod" />
          </el-descriptions-item>
          <el-descriptions-item :label="$t('代收货款')">
            <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="order.isCollection" />
            <template v-if="order.isCollection == 1">({{order.collectionProxy}}{{currencyMap[order.collectionProxyCurrency]}})</template>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('集运仓库')">
            {{order.isExternalWarehouse ? $t('外部仓') : $t('自有仓') }}
            <template v-if="order.isExternalWarehouse" v-for="(item, index) in order.externalWarehouseDtoList" >
              <div v-if="item.estLoadingTime || item.loadingAddress" :key="index">
                {{$t('装柜时间')}}： {{item.estLoadingTime}}
                {{$t('装柜地址')}}：{{item.loadingAddress}}
              </div>
            </template>

          </el-descriptions-item>
          <el-descriptions-item :label="$t('订单类型')">
            <el-tag v-if="order.type.indexOf('1') > -1">
              {{ $t('集运服务') }}
            </el-tag>
            <el-tag v-if="order.type.indexOf('2') > -1">
              {{ $t('海外仓') }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="$t('快递单号')">
            {{order.number}}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('创建人')">
            {{order.creatorName}} （{{order.userType == 1 ? $t('会员') : $t('后台用户')}}）
          </el-descriptions-item>
          <el-descriptions-item :label="$t('创建时间')">
            {{order.createTime|parseTime}}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('客户经理')">
            {{order.salesmanName}}
          </el-descriptions-item>
          <el-descriptions-item :label="$t('提单是否显示价格')">
            {{order.displayBillLadingPrice ? $t('是') : $t('否')}}
          </el-descriptions-item>
        </el-descriptions>

    </el-card>
    <el-card class="card" v-if="[3,4].indexOf(+order.transportId) > -1">
      <el-descriptions class="mr-10" border :title="$t('空运专线')" :column="2" :labelStyle="{width:'110px'}" :contentStyle="{width:'150px'}">
        <el-descriptions-item :label="$t('是否双清')">
          <dict-tag :type="DICT_TYPE.ECW_DOUBLE_CLEAR" :value="order.doubleClear" />
        </el-descriptions-item>
        <el-descriptions-item :label="$t('航空公司')">
          {{ order.companyName||'' }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('清关证书')">
          {{order.isSingleTicketTransport? this.$t('是'):this.$t('否')}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('清关证书备注')">
          {{ order.customsClearCertRemarks }}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('是否拆包')">
          {{order.isUnpack? this.$t('是'):this.$t('否')}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('单票立刻转运')">
          {{order.isSingleTicketTransport? this.$t('是'):this.$t('否')}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('特殊要求')">
          <template v-if="order.packageType">
            <dict-tag v-for="packageType in order.packageType.split(',').filter(item => !!item)" class="mr-10" :key="packageType" :type="DICT_TYPE.ORDER_SPECIAL_NEEDS" :value="packageType" />
          </template>
        </el-descriptions-item>
        <el-descriptions-item :label="$t('特殊要求备注')">
          {{order.packageRemarks}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('目的港清关')">
          {{['',  $t('我司承接'), $t('客户自清')][order.portDestCustomsClear] || ''}}
        </el-descriptions-item>
        <el-descriptions-item :label="$t('发货方式')">
          {{['',  $t('多票'), $t('单票')][order.deliveryWay] || ''}}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="card">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('货物详情')" name="first">
          <el-table :data="order.orderItemVOList" border 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('中文品名')" />
            <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="num" :label="$t('填单件数')"  width="90px"/>
            <el-table-column prop="sumNum" :label="$t('入仓件数')"  width="90px">
              <template slot-scope="{row}">
                <el-link type="primary" @click.native="showWarehouseLogs(row)">{{row.warehouseInInfoVO ? row.warehouseInInfoVO.cartonsNum : 0}}</el-link>
                <div v-if="row.warehouseInInfoVO && row.warehouseInInfoVO.isMultiSpecification">({{$t('多规格')}})</div>
              </template>
            </el-table-column>
            <el-table-column prop="unit" :label="$t('单位')" width="90px">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.ECW_PACKAGING_TYPE" :value="row.unit" />
              </template>
            </el-table-column>

            <el-table-column prop="worth" :label="$t('货值')"  width="120px"/>
            <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="volume" :label="$t('体积') + '(m³)'"  width="90px">
              <template slot-scope="{row}">
                {{row.warehouseInInfoVO ? row.warehouseInInfoVO.volume : row.volume}}
              </template>
            </el-table-column>
            <el-table-column prop="weight" :label="$t('重量') + '(kg)'"  width="90px">
              <template slot-scope="{row}">
                {{row.warehouseInInfoVO ? row.warehouseInInfoVO.weight : row.weight}}
              </template>
            </el-table-column>
            <el-table-column prop="warehouseInInfoVO.quantityAll" :label="$t('数量') + '(个)'"  width="90px">
              <template slot-scope="{row}">
                {{row.warehouseInInfoVO ? row.warehouseInInfoVO.quantityAll : row.quantity}}
              </template>
            </el-table-column>
            <el-table-column prop="weight" :label="$t('收费重量') + '(kg)'"  width="100px">
              <template slot-scope="{row}">
                {{row.chargeWeight}}
              </template>
            </el-table-column>
            <el-table-column prop="volume" :label="$t('收费方数') + '(m³)'"  width="100px">
              <template slot-scope="{row}">
                {{row.chargeVolume}}
              </template>
            </el-table-column>

            <el-table-column prop="" :label="$t('费用类型')">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.ECW_PAY_ADVANCE" :value="row.isPayAdvance" />
              </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>
                <div v-else></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}">
                  <template v-if="row.warehouseInInfoVO">
                    {{getLocationName(row.warehouseInInfoVO.orderLocationMergeVOSet)}}
                  </template>
              </template>
            </el-table-column>
            <el-table-column prop="" :label="$t('填单快递单号')">
              <template slot-scope="{row}">
                <!-- 这里不知道什么原因被改成了入仓单号，现根据bug单改成填单快递单号，如需更改请注明缘由
                https://zentao.test.jdshangmen.com/bug-view-2645.html -->
                {{ row.expressNo }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="$t('订单动态')" name="second">
          <el-timeline v-if="order.orderTimeVOList && order.orderTimeVOList.length" :reverse="true">
            <el-timeline-item v-for="(activity, index) in order.orderTimeVOList" :key="index" :timestamp="parseTime(activity.businessTime)">
              {{ $l(activity, 'title') }}
              <div :class="{red: !!activity.mark}">{{$l(activity, 'remarks')}}</div>
            </el-timeline-item>
          </el-timeline>
          <el-result v-else icon="info " :title="$t('暂无数据')" :subTitle="$t('暂无订单动态数据')" />
        </el-tab-pane>
        <el-tab-pane :label="$t('运单资料/提货单')" name="three">
          <!--inWarehouseState 1待入库，2多了，3少了，4到齐-->
          <el-button v-hasPermi="['ecw:order:show_receipt']" type="text" @click="showWarehouseReceipt=true" :disabled="order.inWarehouseState == 0 && order.shipmentState == 0">{{$t('查看入仓单')}}</el-button>
          <image-display :type="1" :biz-id="order.orderId">
            <el-button style="margin: 0 15px" type="text">{{$t('入仓影像')}}</el-button>
          </image-display>
          <el-button v-hasPermi="['ecw:order:show_landing']" type="text" @click.native="showLadingBill=true" :disabled="!order.ladingState">{{$t('查看提货单')}}</el-button>
          <el-button v-hasPermi="['ecw:order:show_packing']" :disabled="!order.packingListUrl" type="text" @click="downloadPackingList">{{$t('装箱单')}}</el-button>
          <el-button v-hasPermi="['ecw:order:show_customs']"  type="text" @click="showDeclaration=true">{{$t('查看报关资料')}}</el-button>
        </el-tab-pane>
        <el-tab-pane :label="$t('费用明细')" name="four">
          <el-button v-has-permi="['order:detail:fee-detail']" type="primary" @click="showFeeSummary=true">{{$t('费用汇总')}}</el-button>
          <el-table :data="feeList">
            <el-table-column :label="$t('订单号')" prop="orderNo">
              <template slot-scope="{row}">
                {{row.orderNo}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('运输方式')">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="order.transportId" />
            </el-table-column>
            <el-table-column :label="$t('出货渠道')">
              {{channelName}}
            </el-table-column>
            <el-table-column :label="$t('始发地')" prop="orderNo">
              {{$l(departure, 'title') || '-'}}
            </el-table-column>
            <el-table-column :label="$t('目的地')">
              {{$l(objective, 'title') || '-'}}
            </el-table-column>
            <el-table-column :label="$t('品名')" prop="titleZh">
              <template slot-scope="{row}">
                {{$l(row, 'title')}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('费用来源')" prop="feeSource">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.ECW_FEE_SOURCE" :value="row.feeSource" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('箱数')" prop="num">
              <template slot-scope="{row}">
                {{row.num || '-'}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('体积/重量')">
              <template slot-scope="{row}">
               {{row.volume || '-'}} / {{row.weight || '-'}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('收款类型')">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.PAYMENT_TYPE" :value="row.collectionType" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('收入类型')">
              <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="row.feeType" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('单价金额')" prop="unitPrice">
              <template slot-scope="{row}">
                {{row.unitPrice}}{{currencyMap[row.currencyId]}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('总金额')" prop="totalAmount">
              <template slot-scope="{row}">
                {{row.totalAmount}}{{currencyMap[row.currencyId]}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('核销比例')" prop="totalAmount">
              <template slot-scope="{row}">
                {{row.writeOffProportion || 0}}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- 这个地方v-hasPermi不生效，所以换checkPermi函数检查 -->
        <el-tab-pane :label="$t('操作日志')" name="five" v-if="checkPermi(['ecw:order:logs'])">
          <el-table :data="logs" v-loading="logsLoading">
            <el-table-column :label="$t('时间')" width="150">
              <template slot-scope="{row}">{{ parseTime(row.createTime) }}</template>
            </el-table-column>
            <el-table-column :label="$t('操作人')" prop="creatorName" width="150"> </el-table-column>
            <el-table-column :label="$t('操作人类型')" width="100">
              <template slot-scope="{row}">{{ row.userType == 1 ? $t('会员') : $t('管理员') }}</template>
            </el-table-column>
            <el-table-column :label="$t('操作类型')" prop="type" width="150"></el-table-column>
            <el-table-column :label="$t('操作描述')" prop="msg" width="300"></el-table-column>
            <el-table-column :label="$t('备注')" prop="note">
              <template slot-scope="{row}">
                <div v-if="row.note">
                  <div v-for="item in parseLogNote(row.note)">
                    <template v-if="item.orgValue">
                      {{$t('【{name}】从【{orgValue}】修改为【{newValue}】',  item)}}
                    </template>
                    <template v-else>
                      {{$t('【{name}】设置为【{newValue}】',  item)}}
                    </template>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" prop="note">
              <template slot-scope="{row}">
                <el-link type="primary" @click="showLogDetailId=row.id">{{$t('详情')}}</el-link>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <print-warehouse-receipt v-if="showWarehouseReceipt" :order-id="order.orderId" @close="showWarehouseReceipt=false" />
    <print-lading-bill v-if="showLadingBill" :order-id="order.orderId" :transport-type="order.transportId" @close="showLadingBill=false" />
    <warehouse-detail :order="order" :orderItemId="showWarehouseInItemId" @openPackHistory="openPackHistory" v-if="showWarehouseInItemId" @close="showWarehouseInItemId=null" />
    <el-dialog :title="$t('付款人')" :visible.sync="showDarweeDialog" v-if="order && order.customDraweeVOList">
      <el-table :data="order.customDraweeVOList" v-if="order.drawee==3" >
        <el-table-column :label="$t('费用类型')" prop="label" width="200px">
          <template slot-scope="{row}">
          <dict-tag :type="DICT_TYPE.ECW_CUSTOM_DRAWEE" :value="row.name"/>
          </template>
        </el-table-column>
        <el-table-column :label="$t('付款人')" width="300px">
            <template slot-scope="{row}">
                <dict-tag :type="DICT_TYPE.DRAWEE" :value="row.value" />
            </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :title="$t('费用详情')" :visible="!!showFeeDetailDialog" :before-close="closeFeeDetail">
      <el-row v-if="feeDetail">
        <el-col :span="12">
          <div>{{feeDetail.charging ? $t('全包价') : $t('运费')}}</div>
          <div v-for="item in feeDetail.freight">
            {{item.label}}: {{item.value}}
            <template v-if="item.currency">
              {{currencyMap[item.currency]}} / {{unitMap[item.volume]}} <span v-if="item.remark">【{{item.remark}}】</span>
            </template>
          </div>
        </el-col>
        <el-col :span="12" v-if="feeDetail.charging != 1">
          <div>
            {{$t('清关费')}}
            <template v-if="order.transportId == 3 || order.transportId == 4">
              {{$t('来自{source}', {source: feeDetail.airClearanceSource + feeDetail.sourceName})}}
            </template>
          </div>
          <div v-for="item in feeDetail.clearance">
            {{item.label}}: {{item.value}}
            <template v-if="item.currency">
              {{currencyMap[item.currency]}} / {{unitMap[item.volume]}} <span v-if="item.remark">【{{item.remark}}】</span>
            </template>
          </div>
        </el-col>
      </el-row>

      <div v-if="feeDetail && feeDetail.coupons && feeDetail.coupons.length" class="page-title">{{ $t('优惠详情') }}</div>
      <el-table v-if="feeDetail && feeDetail.coupons && feeDetail.coupons.length" :data="feeDetail.coupons">
        <el-table-column label="优惠ID" prop="couponId"></el-table-column>
        <el-table-column label="优惠名称">
          <template slot-scope="{row}">
            {{ $l(row, 'title') }}
          </template>
        </el-table-column>
        <el-table-column label="类型">
          <template slot-scope="{row}">
            <dict-tag :type="DICT_TYPE.ECW_COUPON_TYPE" :value="row.type" ></dict-tag>
          </template>
        </el-table-column>
        <el-table-column label="运费优惠">
          <template slot-scope="{row}">
            {{ row.freightReduceAmount}}
            {{currencyMap[row.freightReduceCurrencyId]}}
          </template>
        </el-table-column>
        <el-table-column label="清关费优惠">
          <template slot-scope="{row}">
            {{ row.clearanceReduceAmount}}
            {{ currencyMap[row.clearanceReduceCurrencyId] }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--日志详情-->
    <operate-log-detail v-if="showLogDetailId" :log-id="showLogDetailId" @close="showLogDetailId=null"></operate-log-detail>
    <!--打包历史-->
    <pack-history v-if="shopPackId" :order ="order" :orderItemId="shopPackId" @showPackDetail="showPackDetail" @close="shopPackId=null"></pack-history>
    <!--打包历史详情-->
    <pack-history-detail v-if="packAfterData" :order="order" :packAfterData="packAfterData" :orderItemId="showWarehouseInItemId"   @close="packAfterData=null"></pack-history-detail>

    <!-- 报关资料 -->
    <declaration-documents v-if="showDeclaration" :order-id="order.orderId" :order-no="order.orderNo" @close="showDeclaration=false" />
    <!--费用汇总-->
    <fee-detail
      v-if="showFeeSummary"
      :order-id="order.orderId"
      :currency-map="currencyMap"
      @close="showFeeSummary=false" />
  </div>

</template>

<script>
import {getOrder, operateLogPage} from '@/api/ecw/order'
import { getDictDatas, DICT_TYPE, getDictData } from '@/utils/dict';
import PrintWarehouseReceipt from './components/PrintWarehouseReceipt'
import PrintLadingBill from './components/PrintLadingBill'
import {getUnitList} from '@/api/ecw/unit'
import {getCurrencyList} from '@/api/ecw/currency'
import {getReceivableListByOrderId} from '@/api/ecw/receipt'
import { getChannel } from '@/api/ecw/channel';
import {listByIds} from '@/api/ecw/region'
import WarehouseDetail from './components/WarehouseDetail';
import { parseTime } from '@/utils/ruoyi';
import WarehouseAreaSelect from "@/components/WarehouseAreaSelect"
import {checkPermi} from '@/utils/permission'
import OperateLogDetail from "@/views/ecw/order/components/OprateLogDetail";
import DeclarationDocuments from './components/DeclarationDocuments';
import ImageDisplay from "@/views/ecw/order/components/imageDisplay.vue";
import FeeDetail from "@/views/ecw/order/components/FeeDetail.vue";
import PackHistory from './components/PackHistory';
import PackHistoryDetail from './components/PackHistoryDetail';
import {getOfferCheck} from '@/api/ecw/offer'
import {getSupplier} from "@/api/ecw/supplier";
import {getProductAttrList} from "@/api/ecw/productAttr";

export default {
  name: "detail",
  components: {
    ImageDisplay,
    OperateLogDetail,
    PrintWarehouseReceipt, PrintLadingBill, WarehouseDetail, WarehouseAreaSelect,DeclarationDocuments,
    FeeDetail,PackHistory,PackHistoryDetail
  },
  filters: {
    customsTypeFilter(e, customsTypeList) {
      if (e) return customsTypeList.find(item => item.value == e).label
    },
    transportFilter(e, transportList) {
      if (e) return transportList.find(item => item.value == e).label
    },
    parseTime
  },
  data() {
    return {
      showDarweeDialog: false,
      // 遮罩层
      loading: false,
      order: null,
      activeName: 'first',
      orderId: 17,
      tableData: [],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
      },
      activities: [],
      customsTypeList: getDictDatas(DICT_TYPE.ECW_CUSTOMS_TYPE), //报关类型
      transportList: getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE), //运输方式
      showWarehouseReceipt: false, // 是否显示打印入仓单
      showLadingBill: false, // 是否显示打印提单
      currencyList: [],
      unitList:[],
      feeList: [],
      channelName: '/',
      region: '',
      orderWarehouseIn: null, // 入仓详情
      showWarehouseInItemId: null, // 当前显示的入仓
      showFeeDetailDialog: null, // 是否显示费用详情弹层
      feeDetail: null, // 费用详情
      logsLoading: false, // 日志加载中
      logs: [], // 操作日志
      activeNames: [],//显示隐藏订单基本信息
      showText:this.$t('显示更多'),
      showMore:false,
      consigneeText:this.$t('更多'),
      showLogDetailId: null, // 显示日志详情的ID,
      showDeclaration:false, //显示报关资料
      showFeeSummary: false, // 是否显示费用汇总
      shopPackId:null,//显示打包历史的ID
      packAfterData:null,//显示打包历史详情
      attrList: []
    }
  },
  computed:{
    currencyMap(){
        let map = {}
        this.currencyList.forEach(item => {
            map[item.id] = this.$l(item, 'title')
        })
        return map
    },
    unitMap(){
        let map = {}
        this.unitList.forEach(item => {
            map[item.id] = this.$l(item, 'title')
        })
        return map
    },
    getDictData(){
        return (type, value) => getDictData(type, value) || {}
    },
    objective(){
      if(this.order && this.order.objectiveVO){
        return JSON.parse(this.order.objectiveVO.objective)
      }
      return {}
    },
    departure(){
      if(this.order && this.order.departureVO){
        return JSON.parse(this.order.departureVO.departure)
      }
      return {}
    },
    // 判断用户是否有查看客户详情的权限
    hasCustomerDetailPermi(){
      return checkPermi(['ecw:customer:index-query'])
    },
    // 显示特性
    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(',')
      }
    }
  },
  watch:{
    activeName(val){
      if(!this.feeList.length && val == 'four'){
        this.loadFeeList()
      }
      if(!this.logs.length && val == 'five'){
        this.loadLogs()
      }
    },
    'order.consigneeVO'(val){
      if(!val) return '-'
      listByIds({ids: [val.country, val.province, val.city].join(',')}).then(res => {
        console.log('listById', res)
        let region = ''
        res.data.forEach(item => {
          region += " " + this.$l(item, 'title')
        })
        this.region = region
      })
    }
  },
  created() {
    if (this.$route.query.orderId) {
      this.orderId = this.$route.query.orderId
      this.getOrder();
      this.getOfferNumber()
    }

    getCurrencyList().then(res => this.currencyList = res.data)
    getUnitList().then(res => this.unitList = res.data)

    getProductAttrList().then(response => {
      this.attrList = response.data;
    })
  },
  methods: {
    checkPermi, // 检查权限
    // 获取储位名称
    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(",")
    },
    //订单信息显示更多
    handleChange(val){
      this.showText = val.length>0? this.$t('隐藏') : this.$t('显示更多')
    },
    getAirCompany(){
      getSupplier(this.order.airlineCompany).then(res => {
        this.$set(this.order,'companyName',this.$l(res.data,'company'))
      })
    },
    //订单信息显示更多
    consigneeChange(){
      this.showMore = !this.showMore;
      this.consigneeText = this.showMore? this.$t('隐藏') : this.$t('更多')
    },
    // 显示费用详情
    showFeeDetail(row, type){
      this.showFeeDetailDialog = true
      const freight = [], clearance = []

      let freightFields = []
      let clearanceFields = []

      const brandType = row.warehouseInInfoVO ? row.feeType : row.brandType
      // 不是特价则显示其他字段
      freightFields = [
        // {field: 'oneSeaFreight', label: this.$t('成交单价')},
        {field: 'originalSeaFreight', label: this.$t('默认单价（无牌无液无电）')},
        // {field: 'brandFreightPrice', label: this.$t('品牌加价')},
        {field: 'liquidFreightPrice', label: this.$t('液体加价')},
        {field: 'electrifiedFreightPrice', label: this.$t('带电加价')},
        {field: 'discountFreightPrice', label: this.$t('优惠活动减免')},
        {field: 'plainCommission', label: this.$t('明佣')},
        {field: 'hiddenCommission', label: this.$t('暗佣')}
      ]

      // 批量加价
      if(row.markupSeaFreight){
        freightFields.push({field: 'markupSeaFreight', label: this.$t('批量加价')})
      }

      // 品牌加价
      if(row['brandFreightPrice'] && row['brandFreightPrice'] > 0){
        freightFields.push({field: 'brandFreightPrice', label: brandType == 1 ? this.$t('有品牌加价') : this.$t('中性品牌加价')})
      }

      // 有减免金额才显示优惠后单价
      if(row['discountFreightPrice'] && row['discountFreightPrice'] > 0){
        freightFields.push({field: 'afterDiscountSeaFreight', label: this.$t('优惠后单价')})
      }
      freightFields.push({field: 'oneSeaFreight', label: this.$t('成交单价')})
      console.log({freightFields})
      freightFields.forEach(item => {
        if(row[item.field]){
          freight.push({
            label: item.label,
            value: row[item.field],
            currency: row.seaFreightCurrency,
            volume: row.seaFreightVolume,
            // 特价通过四个字段标识，任一为true则为特价
            remark: item.field == 'oneSeaFreight' && (row.specialPriceType || row.splitCustomPriceType || row.channelManualPricing) ? this.$t('特价') : null
          })

        }
      })

      clearanceFields = [
        {field: 'originalClearanceFreight', label: this.$t('默认单价（无牌无液无电）')},
        // {field: 'brandClearanceFeePrice', label: this.$t('品牌加价')},
        {field: 'liquidClearanceFeePrice', label: this.$t('液体加价')},
        {field: 'electrifiedClearanceFeePrice', label: this.$t('带电加价')},
        {field: 'discountClearanceFeePrice', label: this.$t('优惠活动减免')}
      ]
      // 批量加价
      if(row.markupClearanceFreight){
        clearanceFields.push({field: 'markupClearanceFreight', label: this.$t('批量加价')})
      }
      // 品牌加价
      if(row['brandClearanceFeePrice'] && row['brandClearanceFeePrice'] > 0){
        clearanceFields.push({field: 'brandClearanceFeePrice', label: brandType == 1 ? this.$t('有品牌加价') : this.$t('中性品牌加价')})
      }
      if(row['discountClearanceFeePrice'] && row['discountClearanceFeePrice'] > 0){
        clearanceFields.push({field: 'afterDiscountClearanceFreight', label: this.$t('优惠后单价')})
      }
      clearanceFields.push({field: 'oneClearanceFreight', label: this.$t('成交单价')})
      clearanceFields.forEach(item => {
        if(row[item.field]){
          clearance.push({
            label: item.label,
            value: row[item.field],
            currency: row.clearanceFreightCurrency,
            volume: row.clearanceFreightVolume,
            remark: row.specialPriceType && item.field == 'oneClearanceFreight' ? this.$t('特价') : null
          })
        }
      })


      freight.push({
        label: this.$t('价格更新时间'),
        value: parseTime(row.updateTime)
      })
      clearance.push({
        label: this.$t('价格更新时间'),
        value: parseTime(row.updateTime)
      })
      this.feeDetail = {
        freight,
        clearance,
        charging:
        row.charging,
        coupons: row.couponInfoVOList,
        airClearanceSource: row.airClearanceSource == 1 ? this.$t('商品') : this.$t('渠道'), // 空运清关费来源：1 商品 2 渠道
        airClearanceInfo: JSON.parse(row.airClearanceInfo), //空运清关费来源数据详情,
        sourceName: row.airClearanceSource == 1 ? this.$l(row, 'prodTitle') : this.order?.channelName
      }
    },
    closeFeeDetail(){
      this.showFeeDetailDialog = null
    },
    /** 查询列表 */
    getOrder() {
      let that = this
      that.loading = true;
      // 执行查询
      getOrder(that.orderId).then(response => {
        that.order = response.data;
        if(that.order.airlineCompany) that.getAirCompany()
      });
    },
    /* loadBrands(){
      let brandIds = []
      this.form.orderItemVOList.forEach(item => {
        if(item.brand){
          brandIds.push(item.brand)
        }
      })
      if(!brandIds.length) return
      Array.form(new Set(brandIds)).forEach(brandId => {
        getProductBrank(brandId).then(res => {
          this.brands.push(res.dat)
        })
      })
    }, */
    /*getChannel(){
      if(!this.order || !this.order.channelId || this.order.transportId == 1 || this.order.transportId == 2) return
      getChannel(this.order.channelId).then(res => {
        this.channelName = res.data.nameZh
      })
    },*/
    loadFeeList(){
      getReceivableListByOrderId({id: this.orderId}).then(res => {
        this.feeList = res.data
      })
    },
    // 加载操作日志
    loadLogs(){
      this.logsLoading = true
      operateLogPage({orderId: this.orderId, page: 1, rows: 10000}).then(res => {
        this.logs = res.data.list
      }).finally(() => {
        this.logsLoading = false
      })
    },
    downloadPackingList(){
      window.open(this.order.packingListUrl)
    },
    // 显示入仓记录
    showWarehouseLogs(row){
      this.showWarehouseInItemId = row.orderItemId
    },
    getWarehouseIn(){
      getOrderWarehouseIn(this.order.id).then(res => {
        this.orderWarehouseIn = res.data
      })
    },
    // 解析日志node字段
    parseLogNote(note){
      if(!note) return []
      return JSON.parse(note)
    },
      //查看打包历史
      openPackHistory(id){
        this.shopPackId = id
      },
      //查看打包历史详情
      showPackDetail(packAfterData){
        this.packAfterData = packAfterData
      },
      getOfferNumber() {
        const that = this
        getOfferCheck({ orderId: that.orderId }).then(response => {
          that.offerData = response.data
        })
      }

  }
};
</script>

<style scoped>
.red{
  color: red;
}
.card {
  margin-bottom: 20px;
}
.card-title{
  font-size: 18px;
  font-weight: bold;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
.hiddenInfo{
  display:none;
}
.showInfo{
  display:block;
}
/deep/ .el-collapse-item__header{
  color:#409EFF !important;
}
/deep/ .el-collapse-item__wrap{
  margin-left:-12px;
  border:none !important;
}
</style>