<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('订单号')+':'">
{{orderData.orderNo || ''}}
</el-form-item>
</el-row>
<div v-if="shopData">
<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">【<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />】</span>
{{orderData?getRouterNameById():''}}
</el-form-item>
</el-row>
<!-- 单证异常，发货人异常，其他异常 不显示这部分内容 -->
<div v-if="['order_doc_exception','order_consignor_exception', 'order_other_exception'].indexOf(orderExceptionData.orderExceptionType) == -1">
<!-- 预付异常,提货异常,代收货款是针对整个订单的 -->
<template v-if="['order_pay_exception','order_pick_up_exception', 'order_cod_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>
<el-form-item :label="$t('填单参数')+':'">
<template v-if="shopData">
{{$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('入仓参数')+':'" 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
})}}
<!-- <span>{{(orderData.sumNum||0)+$t('箱')+(orderData.sumVolume||0)+'m³ '+(orderData.sumWeight||0)+'kg '+(orderData.sumQuantity||0) +$t('个')}}</span> -->
</el-form-item>
<template v-else>{{$t('无入仓数据')}}</template>
</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'" type="primary" plain icon="el-icon-plus" style="margin-left: 200px;" @click="handleAdd">新增收款单</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'">
<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>
</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'].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>
<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 style="margin-left: 8px;" v-for="(item, key) of orderFee.writeOffAmount" :key="key">{{item}}{{currencyMap[key]}}</span>
</el-form-item>
</el-col>
<el-col :span="8">
<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="8">
<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="8">
<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="8">
<el-form-item :label="$t('预付商品方数占总方数比例')+':'" label-width="320px">
{{orderFee.paymentGoodsVolumeScale}}%
</el-form-item>
</el-col>
</el-row>
<el-row :span="8" v-if="orderExceptionData.orderExceptionType=='order_doc_exception'">
<el-form-item :label="$t('报关资料')+':'" size="medium" :require="true">
<file-upload v-model="handlerParams.fileList" :value="orderExceptionData.orderExceptionAttr" ></file-upload>
</el-form-item>
</el-row>
<!--预付异常的备选需要根据接口数据过滤-->
<el-row v-if="orderExceptionData.orderExceptionType=='order_pay_exception'">
<el-form-item :label="$t('处理结果')+':'" required>
<el-select v-model="handlerParams.orderExceptionHandlerResult" placeholder="请选择" clearable>
<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="请选择" clearable>
<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>
<!-- 代收货款 时需要填写代收金额 -->
<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" />
<!-- <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" />
<el-select v-model="handlerParams.currency" style="width: 100px;margin-left: 10px;" clearable>
<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">
<el-form-item :label="$t('备注')+':'" size="medium">
<el-input style="width: 500px;" type="textarea" v-model="handlerParams.orderExceptionHandlerRemark" />
</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">
<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="请选择" clearable>
<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" />
<el-select v-model="handlerParams.currency" style="width: 100px;margin-left: 10px;" clearable>
<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>
<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">
<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>
<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>
</template>
<script>
import FileUpload from '@/components/FileUpload'
import {getDictData, getDictDatas} from '@/utils/dict'
import {getOrder} from '@/api/ecw/order'
import { getCurrencyList } from '@/api/ecw/currency'
import {getExceptionById,handlerExceptionByExceptionId,getOrderItemById,getOrderFeeById} from "@/api/ecw/orderException"
import {getFirstReceivableListByOrderId} from '@/api/ecw/financial'
import WorkFlow from '@/components/WorkFlow'
import {cancelProcessInstance} from '@/api/bpm/processInstance'
export default {
name: "PrepayDeal",
components: {
FileUpload, WorkFlow
},
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, // 是否显示工作流
};
},
created() {
if(this.$route.query.id){
this.orderExceptionId = this.$route.query.id
this.handlerParams.orderExceptionId = this.$route.query.id
this.getList()
}
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)
}
}
},
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){
return this.orderData.orderItemVOList.find(item => item.orderItemId == this.orderExceptionData.orderItemId)
}
}
},
methods: {
/** 查询列表 */
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 = 'order_pay_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()
}
});
},
changeExceptionStatus(){
this.$set(this.handlerParams,'orderExceptionHandlerResult','')
},
getOrderData(){
getOrder(this.orderId).then(response => {
this.orderData = response.data
});
},
getOrderFeeByIdData(){
getOrderFeeById({id:this.orderId}).then(response => {
this.orderFee = response.data
this.handlerParams.orderExceptionHandlerResult = this.orderFee.result[0]
})
},
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.orderData.logisticsInfoDto.startTitleZh + '】'+this.$t('发往')+'【' + this.orderData.logisticsInfoDto.destTitleZh+'】'
}
return this.$t('无')
},
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
}
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: '不能为空'
}).then(({value}) => {
return cancelProcessInstance(this.orderExceptionData.bpmId, value)
})
.then(res => {
this.getList()
})
}
}
};
</script>
<style scoped>
.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; */
}
</style>