prepayDeal.vue

<template>
  <div class="app-container">
    <el-card>
     <div slot="header" class="header">
       <div class="card-title">{{$t('查看')}}</div>
       <el-button type="primary" icon="el-icon-arrow-left" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
     </div>
     <el-form v-if="orderData" :model="orderData" ref="queryForm" size="small" :inline="true"  label-width="120px" class="card">
       <el-row>
          <el-form-item :label="$t('订单号')+':'">
            <router-link :to="{path: '/order/detail',query: {orderId: orderData.orderId}}" class="link-type">
              <span>{{orderData.orderNo || ''}}</span>
            </router-link>

          </el-form-item>
       </el-row>
       <div v-if="shopData&&['goods_add_exception','fee_exception',].indexOf(orderExceptionData.orderExceptionType) == -1">
         <el-row>
            <el-form-item :label="$t('产品名称')+':'" >
              {{shopData.prodTitleZh || ''}}
            </el-form-item>
         </el-row>
         <el-row>
            <el-form-item :label="$t('产品英文名称')+':'">
              {{shopData.prodTitleEn || ''}}
            </el-form-item>
         </el-row>
       </div>
       <el-row>
           <el-form-item :label="$t('运输路线')+':'" >
               <span v-if="orderData">{{ $t('【') }}<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />{{ $t('】') }}</span>
                {{orderData?getRouterNameById():''}}
           </el-form-item>
       </el-row>

       <!-- 单证异常，发货人异常，其他异常 不显示这部分内容 -->
       <div v-if="['order_doc_exception','order_consignor_exception', 'order_other_exception','fee_exception'].indexOf(orderExceptionData.orderExceptionType) == -1">
        <!-- 预付异常,提货异常,代收货款是针对整个订单的 -->
        <template v-if="['order_pay_exception','order_pick_up_exception', 'order_cod_exception','not_customer_service_exception'].indexOf(orderExceptionData.orderExceptionType) > -1">
          <el-row>
              <el-form-item :label="$t('填单参数')+':'">
                <template v-if="orderData && orderData.costVO">
                {{(orderData.costVO.totalNum||0)+$t('箱 ')+(orderData.costVO.totalVolume||0)+'m³ '+(orderData.costVO.totalWeight||0)+'kg '+(orderData.costVO.totalQuantity||0)+$t('个')}}
                </template>
              </el-form-item>
              <el-form-item :label="$t('代收金额')+':'" v-if="orderExceptionData.orderExceptionType == 'order_cod_exception'">
                <template v-if="orderData && orderData.costVO">
                  {{orderExceptionData.orderExceptionAmount}} {{currencyMap[orderExceptionData.orderExceptionAmountCurrencyId]}}
                </template>
              </el-form-item>
          </el-row>
          <el-row>
              <el-form-item :label="$t('入仓参数')+':'">
                <template v-if="orderData && orderData.costVO">
                  <span>{{(orderData.sumNum||0)+$t('箱')+(orderData.sumVolume||0)+'m³ '+(orderData.sumWeight||0)+'kg '+(orderData.sumQuantity||0) +$t('个')}}</span>
                </template>
              </el-form-item>
          </el-row>
        </template>

        <template v-else>
          <el-row v-if="shopData">
            <el-form-item :label="$t('填单参数')+':'">
              <template >
                {{$t('{num}箱 {volume}m³ {weight}kg {quantity}个', {
                  num: shopData.num || 0,
                  volume: shopData.volume || 0,
                  weight: shopData.weight || 0,
                  quantity: shopData.quantity || 0
                })}}
              </template>
            </el-form-item>
          </el-row>
          <el-row v-if="shopData">
              <el-form-item :label="$t('入仓参数')+':'" ><template v-if="shopData.warehouseInInfoVO">
                {{$t('{num}箱 {volume}m³ {weight}kg {quantity}个', {
                    num: shopData.warehouseInInfoVO.cartonsNum || 0,
                    volume: shopData.warehouseInInfoVO.volume || 0,
                    weight: shopData.warehouseInInfoVO.weight || 0,
                    quantity: shopData.warehouseInInfoVO.quantityAll || 0
                  })}}</template>
                <!-- <span>{{(orderData.sumNum||0)+$t('箱')+(orderData.sumVolume||0)+'m³ '+(orderData.sumWeight||0)+'kg '+(orderData.sumQuantity||0) +$t('个')}}</span> -->

              <template v-else>{{$t('无入仓数据')}}</template>
              </el-form-item>
          </el-row>
        </template>

        <el-row :span="12">
          <el-form-item :label="$t('异常描述')+':'">
            <!-- <dict-tag :type="DICT_TYPE.ORDER_ERROR_TYPE" :value="orderExceptionData.orderExceptionType" /> -->
            <!-- {{orderExceptionData.orderExceptionDescVO?orderExceptionData.orderExceptionDescVO.descZh:'无'}} -->
            {{$l(orderExceptionData.orderExceptionDescVO, 'desc')}}
          </el-form-item>
          <el-button v-if="orderExceptionData.orderExceptionType=='order_pay_exception'&&orderExceptionData.orderExceptionStatus!=2" type="primary" plain icon="el-icon-plus" style="margin-left: 200px;"  @click="handleAdd">{{ $t('新增收款单') }}</el-button>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionDetails">
          <el-form-item :label="$t('详细内容')+':'">
            <span>{{orderExceptionData.orderExceptionDetails}}</span>
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'||orderExceptionData.orderExceptionType!='goods_add_exception'">
          <el-form-item :label="$t('收费参数')+':'">
            <span>{{orderData.sumNum||0}}{{$t('箱')}} {{orderData.wvolume||0}}m³  {{orderData.vweight||0}}Kg  {{orderData.sumQuantity||0}}{{$t('个')}}</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="$t('创建时间')+':'">
            <span>{{parseTime(orderExceptionData.createTime)}}</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item :label="$t('处理时间')+':'">
               <span>{{parseTime(orderExceptionData.handlerTime)||'/'}}</span>
          </el-form-item>
        </el-row>
       </div>
     </el-form>

      <!-- 预付异常的表格 -->
      <el-table v-if="orderExceptionData.orderExceptionType=='order_pay_exception'" v-loading="loading" border :data="preException">
        <el-table-column :label="$t('品名')" align="center">
          <template slot-scope="scope">
            {{scope.row.titleZh+'('+scope.row.titleEn+')'}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('箱数')" prop="num" />
        <el-table-column :label="$t('体积/重量')">
          <template slot-scope="scope">
              {{scope.row.volume+'/'+scope.row.weight}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('收款类型')">
              <template >
                {{$t('预付')}}
              </template>
          </el-table-column>
        <el-table-column :label="$t('收入类型')">
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.FEE_TYPE" :value="scope.row.feeType"></dict-tag>
            </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('付款人')">
          <template slot-scope="{row}">
            <span>
              <dict-tag :type="DICT_TYPE.DRAWEE" :value="row.paymentUser"></dict-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('付款状态')" prop="worth">
          <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ECW_RECEIVABLE_STATE" :value="scope.row.state"></dict-tag>
            </template>
          </el-table-column>
      </el-table>

      <!-- 单证异常，发货人异常，其他异常的表格 -->
      <el-table v-if="['order_doc_exception', 'order_consignor_exception', 'order_other_exception','fee_exception'].indexOf(orderExceptionData.orderExceptionType) > -1" v-loading="loading" border :data="orderData.orderItemVOList">
        <el-table-column :label="$t('序号')" align="center" prop="id" type="index">
            <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
        <el-table-column :label="$t('中文名')" align="center"  prop="prodTitleZh" />
        <el-table-column :label="$t('英文名')" align="center"  prop="prodTitleEn" />
        <el-table-column :label="$t('品牌')" align="center" prop="brandType">
          <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType"></dict-tag>
            </template>
          </el-table-column>
        <el-table-column :label="$t('填单箱数')" prop="num" />
        <el-table-column :label="$t('入仓箱数')">
          <template slot-scope="scope">
              {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.cartonsNum:0}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('方数')" prop="volume">
            <template slot-scope="scope">
                {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.volume:0}}
              </template>
            </el-table-column>
        <el-table-column :label="$t('重量')" prop="weight">
          <template slot-scope="scope">
              {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.weight:0}}
            </template>
          </el-table-column>
        <el-table-column :label="$t('数量')" prop="quantity">
          <template slot-scope="scope">
              {{scope.row.warehouseInInfoVO?scope.row.warehouseInInfoVO.quantityAll:0}}
            </template>
          </el-table-column>
        <el-table-column :label="$t('货值')" prop="worth" />
      </el-table>
<!-- 未分配客户经理 -->
	 <div v-if="orderExceptionData.orderExceptionType=='not_customer_service_exception'">
     <el-row :gutter="20">
        <el-col :span="8" v-if="orderData.consignorVO">
          <el-descriptions class="margin-top" border :title="$t('发货人')" :column="1" :labelStyle="{width:'150px'}">
            <el-descriptions-item :label="$t('发货人')">{{orderData.consignorVO.name}}</el-descriptions-item>
            <el-descriptions-item :label="$t('发货人电话')">
              +{{orderData.consignorVO.countryCode}} {{orderData.consignorVO.phone}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('发货人邮箱')">{{orderData.consignorVO.email}}</el-descriptions-item>
            <el-descriptions-item :label="$t('发货人公司名称')">
              {{orderData.consignorVO.company}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="16" v-if="orderData.consigneeVO">
          <el-descriptions class="margin-top" border :title="$t('收货人')" :column="2" :labelStyle="{width:'150px'}">
            <el-descriptions-item :label="$t('收货人')">{{orderData.consigneeVO.name}}</el-descriptions-item>
            <el-descriptions-item :label="$t('收货人电话')">
              +{{orderData.consigneeVO.countryCode}} {{orderData.consigneeVO.phone}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货人邮箱')">{{orderData.consigneeVO.email}}</el-descriptions-item>
            <el-descriptions-item :label="$t('收货人公司名称')">
              {{orderData.consigneeVO.company}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货方式')">
              <dict-tag :type="DICT_TYPE.ECW_HARVEST_METHOD" :value="orderData.consigneeVO.harvestMethod" />
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货地区')">
              {{region}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('收货地址')">
              {{orderData.consigneeVO.address}}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div class="link-text">
        <router-link :to="{path: '/customer/query/'+orderData.customerId}" class="link-type">
          <span>{{$t('归属客户')}}:{{ customerData.name||'' }} </span><span>{{$t('客户编号')}}:{{ customerData.number||'' }}</span>
        </router-link>
      </div>
    </div>
      <el-form :model="handlerParams" ref="queryForms" size="small" :inline="true"  label-width="120px" class="card">
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-form-item :label="$t('订单总金额')+':'">
              <span style="margin-left: 8px;" v-for="(item, key) of orderFee.totalAmountList" :key="key">
                {{item}}
                {{currencyMap[key]}}
              </span>
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-form-item :label="$t('应付预付金额')+':'">
              <span style="margin-left: 8px;" v-for="(item, key) of orderFee.totalPaymentAmount" :key="key">{{item}}{{currencyMap[key]}}</span>
          </el-form-item>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-col :span="6">
          <el-form-item :label="$t('已核销预付金额')+':'">
            <span v-if="JSON.stringify(orderFee.writeOffAmount) != '{}'" style="margin-left: 8px;" v-for="(item, key) of orderFee.writeOffAmount" :key="key">{{item}}{{currencyMap[key]}}</span>
            <span v-if="JSON.stringify(orderFee.writeOffAmount) == '{}'">0</span>
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item :label="$t('已核销预付金额占总金额比例')+':'" label-width="320px">
              {{orderFee.writeOffAmountScale}}%
          </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'" >
          <el-col :span="6">
          <el-form-item :label="$t('预付商品货值')+':'">
              {{orderFee.paymentGoodsWorth}} {{$t('人民币')}}
          </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item :label="$t('预付商品货值占总货值比例')+':'" label-width="320px">
              {{orderFee.paymentGoodsWorthScale}}%
          </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">

          <el-col :span="6">
             <el-form-item :label="$t('预付商品方数')+':'">
                 {{orderFee.paymentGoodsVolume}} {{$t('立方米')}}
             </el-form-item>
          </el-col>
          <el-col :span="12">
          <el-form-item :label="$t('预付商品货值占订单总运费+清关费比例')+':'" label-width="320px">
              {{orderFee.needWorthScale}}%
          </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
          <el-col :span="6">
            <el-form-item :label="$t('订单总方数')+':'">
                {{orderFee.totalVolume}} {{$t('立方米')}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('预付商品方数占总方数比例')+':'" label-width="320px">
                {{orderFee.paymentGoodsVolumeScale}}%
            </el-form-item>
            </el-col>
        </el-row>
        <el-row :span="12" v-if="orderExceptionData.orderExceptionType=='order_doc_exception'">
          <el-form-item v-if="orderExceptionData.orderExceptionStatus!=2" :label="$t('报关资料')+':'" size="medium" :require="true">
            <file-upload v-model="handlerParams.fileList" :value="orderExceptionData.orderExceptionAttr" ></file-upload>
          </el-form-item>
        </el-row>
        <el-form-item :label="$t('附件')" align="center" v-if="orderExceptionData.orderExceptionType=='order_other_exception'">
          <template slot-scope="scope">
            <div class="filelist">
              <span v-for="(item,index) in handlerParams.fileList" :key="index" @click="onClickOpenPreview(item,index)">{{'附件'+(index+1)}}</span>
            </div>
          </template>
        </el-form-item>
        <!--预付异常的备选需要根据接口数据过滤-->
        <el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'||orderExceptionData.orderExceptionType=='not_customer_service_exception'">
            <el-form-item :label="$t('处理结果')+':'" required>
              <el-select v-model="handlerParams.orderExceptionHandlerResult" :placeholder="$t('请选择')" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
                <template v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')">
                  <el-option :disabled="orderFee && orderFee.result && orderFee.result.indexOf(dict.value) ==-1" :key="dict.value" :label="$l(dict, 'label')" :value="dict.value"/>
                </template>
              </el-select>
            </el-form-item>
        </el-row>
        <el-row v-else-if="orderExceptionData.orderExceptionType!='order_miss_exception'&&orderExceptionData.orderExceptionType!='order_superfluous_goods_exception'&&orderExceptionData.orderExceptionType!='order_in_water_exception'&&orderExceptionData.orderExceptionType!='order_damage_exception'">
            <el-form-item :label="$t('处理结果')+':'" required>
              <el-select v-model="handlerParams.orderExceptionHandlerResult" :placeholder="$t('请选择')" clearable @change="handlerResultChange" :disabled="orderExceptionData.orderExceptionStatus==2">
                <template v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')">
                  <el-option :disabled="dict.value=='pending'"  :key="dict.value" :label="$l(dict, 'label')" :value="dict.value"/>
                </template>
              </el-select>
            </el-form-item>
        </el-row>
        <!-- v1.7新增商品异常 -->
        <div v-if="shopData&&orderExceptionData.orderExceptionType=='goods_add_exception'&&handlerParams.orderExceptionHandlerResult=='goods_exists'">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item :label="$t('新增品名中文')+':'" >
                {{shopData.prodTitleZh || ''}}
              </el-form-item>
            </el-col>
               <el-form-item label="中文品名"
                   :rules="{
                       required: true, message: $t('请选择产品'), trigger: 'blur'
                   }"
                   class="mb-0 mr-0"
               >
                  <product-selector
                  :status="0"
                  :disabled="orderExceptionData.orderExceptionStatus==2"
                   @hook:mounted="onTableMounted"
                   v-model="productId2"
                   @change = "onProductChange($event)"
                   />
               </el-form-item>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item :label="$t('新增品名英文')+':'">
                {{shopData.prodTitleEn || ''}}
              </el-form-item>
            </el-col>
            <el-form-item label="英文品名"
                 :rules="{
                     required: true, message: $t('请选择产品'), trigger: 'blur'
                 }"
                 class="mb-0 mr-0"
             >
                <product-selector
                lang="En"
                :status="0"
                 v-model="productId1"
                 :disabled="orderExceptionData.orderExceptionStatus==2"
                 @change = "onProductChange($event)"
                 />
             </el-form-item>
          </el-row>
        </div>
      <el-row v-if="orderExceptionData.orderExceptionType=='not_customer_service_exception'&&handlerParams.orderExceptionHandlerResult=='allocate'">
        <el-form-item  :label="$t('移交客户经理')+':'" required>
          <el-select v-model="handlerParams.customerService" :placeholder="$t('请选择客户经理')" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
              <el-option v-for="dict in customerServiceList"
                         :key="dict.id" :label="dict.nickname" :value="dict.id"/>
          </el-select>
        </el-form-item>
      </el-row>
        <!-- 代收货款 时需要填写代收金额 -->
        <el-row v-if="handlerParams.orderExceptionHandlerResult == 'cod'" >
          <el-form-item :label="$t('代收金额')+':'" size="medium" required>
            <el-input class="w-100"  type="text" v-model="handlerParams.amount" :disabled="orderExceptionData.orderExceptionStatus==2" />
            <!-- <el-select v-model="handlerParams.currency"  clearable>
              <el-option  v-for="dict in getDictDatas('shipping_price_unit') "
                      :key="dict.value" :label="dict.label" :value="dict.value"/>
            </el-select> -->{{getCurrencyLabel(handlerParams.currency)}}
            <!-- <dict-tag type="shipping_price_unit" v-model="handlerParams.currency" class="w-100 ml-10"  /> -->
          </el-form-item>
        </el-row>

        <el-row :span="8" v-if="orderExceptionData.orderExceptionType=='order_pick_up_exception'&&handlerParams.orderExceptionHandlerResult=='cost_required'">
          <el-form-item :label="$t('送货费用')+':'" size="medium">
            <el-input style="width: 100px;"  type="text" v-model="handlerParams.amount"  :disabled="orderExceptionData.orderExceptionStatus==2"/>
            <el-select v-model="handlerParams.currency" style="width: 100px;margin-left: 10px;" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
              <el-option  v-for="dict in currencyList "
                        :key="dict.id" :label="dict.titleZh" :value="dict.id"/>
              </el-select>
          </el-form-item>
        </el-row>
        <el-row :span="8" v-if="orderExceptionData.orderExceptionType!='not_customer_service_exception'&&orderExceptionData.orderExceptionType!='goods_add_exception'">
          <el-form-item :label="$t('备注')+':'" size="medium">
            <el-input style="width: 500px;"  type="textarea" v-model="handlerParams.orderExceptionHandlerRemark" :disabled="orderExceptionData.orderExceptionStatus==2" />
          </el-form-item>
        </el-row>

        <div v-if="orderExceptionData.orderExceptionType=='order_miss_exception'||orderExceptionData.orderExceptionType=='order_superfluous_goods_exception'||orderExceptionData.orderExceptionType=='order_in_water_exception'||orderExceptionData.orderExceptionType=='order_damage_exception'">
          <el-row >
            <el-form-item :label="$t('状态')+':'">
              <el-radio-group v-model="handlerParams.orderExceptionStatus" @change="changeExceptionStatus" :disabled="orderExceptionData.orderExceptionStatus==2">
                  <el-radio  label="1">{{$t('处理中')}}</el-radio>
                  <el-radio  label="2">{{$t('已处理')}}</el-radio>
                </el-radio-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="$t('处理结果')+':'" required v-if="handlerParams.orderExceptionStatus==2">
              <el-select v-model="handlerParams.orderExceptionHandlerResult" :placeholder="$t('请选择')" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
              <el-option  v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_don_result')"
                        :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row >
            <el-form-item :label="$t('赔付金额')+':'" size="medium" required v-if="handlerParams.orderExceptionStatus==2">
              <el-input style="width: 100px;"  type="text" v-model="handlerParams.amount" :disabled="orderExceptionData.orderExceptionStatus==2" />
              <el-select v-model="handlerParams.currency" style="width: 100px;margin-left: 10px;" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
              <el-option  v-for="dict in currencyList "
                        :key="dict.id" :label="dict.titleZh" :value="dict.id"/>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item :label="$t('查明原因')+':'" required v-if="handlerParams.orderExceptionStatus==1">
                <el-select v-model="handlerParams.orderExceptionHandlerResult" clearable :disabled="orderExceptionData.orderExceptionStatus==2">
                <el-option  v-for="dict in getDictDatas(orderExceptionData.orderExceptionType+'_result')"
                          :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
            </el-form-item>
          </el-row>
        </div>
      </el-form>
    </el-card>
    <!-- 只有不需要预付才需要审核 -->
    <template v-if="showWorkFlow&&orderExceptionData.orderExceptionStatus!=2">
      <div class="page-title">{{$t('审批流程')}}</div>
      <work-flow xmlkey="commission_config" v-model="handlerParams.ccIds" />
    </template>
    <div slot="footer" class="dialog-footer">
      <!-- bpmStatus
      异常流程状态，1处理中2通过3不通过4已取消
      待审核可能没有bpmStatus字段
      -->
      <template v-if="orderExceptionData.bpmStatus == 1 || (orderExceptionData.bpmId && !orderExceptionData.bpmStatus)">
        <el-button type="primary" @click="$router.push(`/bpm/process-instance/detail?id=`+orderExceptionData.bpmId)">{{$t('审核中')}}</el-button>
        <el-button plain type="primary" @click="cancelAudit">{{$t('取消审核')}}</el-button>
        <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
      </template>
      <template v-else-if="orderExceptionData.orderExceptionStatus==2">
        <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('返回')}}</el-button>
      </template>
      <template v-else>
        <el-button  type="primary" @click="submitForm">{{$t('提交')}}</el-button>
        <el-button plain type="primary" @click="$store.dispatch('tagsView/delCurrentView')">{{$t('取消')}}</el-button>
      </template>
    </div>
    <div class="preview" v-if="IsPreview">
      <file-preview :key="timers" :TragetPic="TragetPic" :FilePreAll="FilePreAll" @Close="onClickClosePreview"></file-preview>
    </div>
  </div>
</template>

<script>
  import FileUpload from '@/components/FileUpload'
  import {getDictData, getDictDatas} from  '@/utils/dict'
  import {getOrder} from '@/api/ecw/order'
  import FilePreview from '@/components/FilePreview'
  import { getCurrencyList } from '@/api/ecw/currency'
  import {getExceptionById,handlerExceptionByExceptionId,getOrderItemById,getOrderFeeById,getOrderExcptionResult} from "@/api/ecw/orderException"
  import {getFirstReceivableListByOrderId} from '@/api/ecw/financial'
  import WorkFlow from '@/components/WorkFlow'
  import {listByIds} from '@/api/ecw/region'
  import {listServiceUser} from "@/api/system/user";
  import {cancelProcessInstance} from '@/api/bpm/processInstance'
  import {getCustomer} from '@/api/ecw/customer'
  import ProductSelector from '@/components/ProductSelector'
  export default {
    name: "PrepayDeal",
    components: {
      FileUpload, WorkFlow,FilePreview,ProductSelector
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        orderExceptionData: {},
        types:'package,bag',
        importance:1,
        orderData:{
        },
        orderId:0,
        orderExceptionId:0,
        handlerParams:{
          orderExceptionId:0,
          orderExceptionStatus:"1",
          orderExceptionHandlerResult:''
        },

        //发货/收货人信息
        consigneeData:[],
        routerList:[],
        multipleSelection:[],
        preException:[],
        orderFee:[],
        currencyList:[],
        showWorkFlow: false, // 是否显示工作流
        IsPreview:false, // 控制预览弹窗字段
        timers:"", //时间戳
        FilePreAll:[], // 预览数组
        TragetPic:{},
        region:'',
        customerData:{},//归属客户
        customerServiceList:[],//客户经理
        productId1:null,
        productId2:null
      };
    },
    created() {
      if(this.$route.query.id){
        this.orderExceptionId = this.$route.query.id
        this.handlerParams.orderExceptionId = this.$route.query.id
        this.getList()

      }
      listServiceUser().then(r=>{
        this.customerServiceList = r.data;
      })
      getCurrencyList().then(res => this.currencyList = res.data)
    },
    watch:{
      'handlerParams.orderExceptionHandlerResult'(val){
        if(val == 'no_pay'){
          this.showWorkFlow = true
        }else this.showWorkFlow = false

        // 如果是代收货款，则给默认单位
        if(val == 'cod' && this.orderExceptionData.orderExceptionAmountCurrencyId){
          this.$set(this.handlerParams, 'currency', this.orderExceptionData.orderExceptionAmountCurrencyId)
        }
      },
      'orderData.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 += " " + item.titleZh
          })
          this.region = region
        })
      }
    },
    computed: {
      currencyMap(){
        let map = {}
        this.currencyList.forEach(item => {
          map[item.id] = this.$l(item, 'title')
        })
        return map
      },
      shopData(){
        if(this.orderExceptionData.orderItemId && this.orderData && this.orderData.orderItemVOList){
          if(this.orderExceptionData.orderExceptionType=='goods_add_exception'&&!this.handlerParams.productId){
            this.handlerParams.productId = this.orderData.orderItemVOList.find(item => item.orderItemId == this.orderExceptionData.orderItemId).prodId
            // this.productId1 = this.handlerParams.productId
            // this.productId2 = this.handlerParams.productId
          }
          return this.orderData.orderItemVOList.find(item => item.orderItemId == this.orderExceptionData.orderItemId)
        }
      }
    },
    methods: {
      getDictData,
      onTableMounted(e){
          // console.warn('onTableMounted', e)
      },
      /** 查询列表 */
	  getCurrencyLabel(id){
	    var label = this.currencyList.filter(item=>item.id == id)
	    if(label.length>0) return label[0].titleZh
	    return ''
	  },
      getList() {
        let that = this
        that.loading = true;
        getExceptionById(that.orderExceptionId).then(response => {
          that.orderExceptionData = response.data;
          // that.orderExceptionData.orderExceptionType = 'order_other_exception'
          // that.orderExceptionData.orderExceptionType = 'order_miss_exception'
           // that.orderExceptionData.orderExceptionType = 'not_customer_service_exception'
           // that.orderExceptionData.orderExceptionType = 'fee_exception'
          that.loading = false;
          that.orderId = response.data.orderId
          that.getOrderData()
          if(that.orderExceptionData.orderExceptionAttr){
            that.handlerParams.fileList = that.orderExceptionData.orderExceptionAttr.split(',')
          }
          // if(response.data.hasOwnProperty('orderItemId')){
          //   that.getShopData(response.data.orderItemId)
          // }

          if(that.orderExceptionData.orderExceptionType == 'order_pay_exception'){
            that.getOrderFeeByIdData()
            that.getPreExceptionData()
          }
          if(that.orderExceptionData.orderExceptionStatus==2){
            that.getOrderExcptionResult()
          }

        });
      },
      changeExceptionStatus(){
        this.$set(this.handlerParams,'orderExceptionHandlerResult','')
      },
      getOrderData(){
        getOrder(this.orderId).then(response => {
          this.orderData = response.data
          if(response.data.customerId){
            this.getCustomerData(response.data.customerId)
          }
        });
      },
      getCustomerData(id){
        getCustomer(id).then(res=>{
          this.customerData = res.data
        })
      },
      //获取异常结果
      getOrderExcptionResult(){
        getOrderExcptionResult({orderExceptionId:this.orderExceptionId}).then(res=>{
          this.handlerParams = Object.assign(this.handlerParams,res.data.list[0])
          if(!this.orderExceptionData.handlerTime){
            this.orderExceptionData.handlerTime =  this.handlerParams.handlerTime
          }
          if(this.handlerParams.handlerRemark){
            this.$set(this.handlerParams,'orderExceptionHandlerRemark', this.handlerParams.handlerRemark)
          }
          if(this.handlerParams.handlerResult){
              this.$set(this.handlerParams,'orderExceptionHandlerResult', this.handlerParams.handlerResult)
          }
          if(this.handlerParams.productId){
            this.productId2 = this.productId1 = this.handlerParams.productId
          }
        })

      },
      getOrderFeeByIdData(){
        getOrderFeeById({id:this.orderId}).then(response => {
          this.orderFee = response.data
          this.handlerParams.orderExceptionHandlerResult = this.orderFee.result[0]
          if(this.orderExceptionData.orderExceptionStatus==2){
            this.getOrderExcptionResult()
          }

        })
      },
      getPreExceptionData(){
        getFirstReceivableListByOrderId({id:this.orderId}).then(response => {
          this.preException = response.data
          // this.preException.forEach(item=>{
          //   var curr = getDictData('shipping_price_unit', item.currencyId)
          //   if(curr.label == this.$t('美元')){
          //     item.doller = item.totalAmount
          //   }
          // })
        });
      },
      /* getShopData(id){
        getOrderItemById(id).then(res=>{
          this.shopData = res.data
        })
      }, */
      handleSelectionChange(val) {
         this.multipleSelection = val;
       },
      // 根据线路id显示线路名称
      getRouterNameById(){
              if(this.orderData.logisticsInfoDto) {
                  return this.$t('从')+this.$t('【')+this.orderData.logisticsInfoDto.startTitleZh + this.$t('】')+this.$t('发往')+this.$t('【') + this.orderData.logisticsInfoDto.destTitleZh+this.$t('】')
              }
              return this.$t('无')
      },
      //新增异常处理结果切换
      handlerResultChange(){
        // if(this.orderExceptionData.orderExceptionType=='goods_add_exception'){
        //   this.productId1 = this.handlerParams.productId
        //   this.productId2 = this.handlerParams.productId
        // }
      },
      submitForm(){
          if(!this.handlerParams.orderExceptionHandlerResult){
            this.$modal.msgError(this.$t('请选择处理结果'));
            return
          }
          if(this.orderExceptionData.orderExceptionType=='order_doc_exception'&&this.handlerParams.fileList&&this.handlerParams.fileList.length>0){
            // if(!this.handlerParams.fileList||this.handlerParams.fileList.length==0){
            //   this.$modal.msgError(this.$t('请上传报关资料'));
            //   return
            // }
            this.handlerParams.files = Array.isArray(this.handlerParams.fileList) ? this.handlerParams.fileList.join(',') : this.handlerParams.fileList
          }
          if(this.orderExceptionData.orderExceptionType=='goods_add_exception'&&this.handlerParams.orderExceptionHandlerResult=='goods_absent'){
            this.$redirect('/product/product-list?prodId=' + this.handlerParams.productId)
            return
          }
          if(this.orderExceptionData.orderExceptionType=='goods_add_exception'&&this.handlerParams.orderExceptionHandlerResult=='goods_exists'){
            if(this.productId1){
              this.handlerParams.productId = this.productId1
            }else{
              this.$modal.msgError(this.$t('请选择产品'));
              return
            }
          }
          handlerExceptionByExceptionId(this.handlerParams).then(res=>{
              this.$modal.msgSuccess(this.$t('提交成功'));
              this.$redirect('/order/pending?id=' + this.orderData.orderId)
          })
      },
      /** 跟进按钮操作 */
      handleAdd() {
        this.$router.push({
          path: "/financial/creatCollection?receiptId=0",
          query:{
            orderId:this.orderId,
          }
        });
      },
      // 取消审核
      cancelAudit(){
        this.$prompt("请输入取消原因", {
          inputPattern: /[\S]+/,
          inputErrorMessage: this.$t('不能为空')
        }).then(({value}) => {
          return cancelProcessInstance(this.orderExceptionData.bpmId, value)
        })
        .then(res => {
          this.getList()
        })
      },
      getFileName(fileName){
        var fileArr = fileName.split('/')
        return fileArr[fileArr.length-1]
      },
      getFileFormat(fileName){
        var fileArr = this.getFileName(fileName).split('.')
        return fileArr[fileArr.length-1]
      },
      // 打开预览
      onClickOpenPreview(val,index){
        this.TragetPic  = { // 当前点击的文件
          FileName: this.getFileName(val), // 文件名称
          name: this.getFileName(val), // 文件名称（可以不传）
          format:this.getFileFormat(val), // 文件格式
          url: val,  // 预览地址
          downUrl:"", // 下载地址
        } // 目标对象
          var fileArr = this.handlerParams.fileList

          fileArr.forEach(item =>{ // 需要预览的文件数组（可以传空数组就是单张预览）
            let obj = {
              FileName: this.getFileName(item),
              name: this.getFileName(item),
              format:this.getFileFormat(item),
              url: item,
              downUrl:"",
            }
            this.FilePreAll.push(obj)
          })
           console.log(this.FilePreAll)
        this.IsPreview = true // 打开预览弹窗
        this.timers = new Date().getTime() // 刷新预览地址
      },
      // 关闭预览
        onClickClosePreview(val){
          this.IsPreview = val  // 由组件内部传入的关闭数据赋值关闭
        },
        onProductChange(product){
            if(!product){
              this.productId1 = null
              this.productId2 = null
             return false
            }
              this.productId1 = product.id
              this.productId2 = product.id
        },
    }
  };
</script>

<style scoped>
  .link-text{
    margin-top:20px;
  }
  .link-text span{
    font-size:16px;
    font-weight:600;
    margin-right:20px;
  }
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .header{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card{
    margin-top: 20px;
  }
  .dialog-footer{
    padding: 40px;
    width: 60%;
    align-items: center;
    display: flex;
    /* justify-content: space-between; */
  }
  .filelist{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column
  }
  .filelist span{
    color: #1E98D7;
  }
  .red{
      color: red;
  }
  .el-select{
   width:300px !important;
  }
</style>