<template>
|
<div>
|
<el-dialog :visible.sync="dialogVisible" :title="title" :close-on-click-modal="false" :modal-append-to-body="false" v-if="dialogVisible">
|
<el-form ref="form" :model="form" :rules="formRules" size="mini" label-width="100px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="退货类型：" prop="refundType">
|
<el-select v-model="form.refundType" :disabled="orderRow.orderStatus === '03' || orderRow.orderType === 'T04' " @change="changeRefundType" placeholder="请选择退款类型">
|
<el-option label="仅退款" value="1" key="1"></el-option>
|
<el-option label="退货退款" value="2" key="2"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="退款原因：" prop="applicationReason">
|
<el-select v-model="form.applicationReason" clearable placeholder="请选择退款原因">
|
<el-option label="七天无理由退货" value="七天无理由退货" key="0"></el-option>
|
<el-option label="价格有点贵" value="价格有点贵" key="1"></el-option>
|
<el-option label="规格/数量拍错" value="规格/数量拍错" key="2"></el-option>
|
<el-option label="多拍/拍错/暂时不想要" value="多拍/拍错/暂时想不要" key="3"></el-option>
|
<el-option label="缺货" value="缺货" key="4"></el-option>
|
<el-option label="协商一致退款" value="协商一致退款" key="5"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item prop="skuId">
|
<el-table border :data="orderRow.orderItemsAll?orderRow.orderItemsAll.omsOrderItems:orderRow.omsOrderItems">
|
<el-table-column label width="35">
|
<template slot-scope="scope">
|
<el-radio
|
:label="scope.row.skuId"
|
@change.native="getTemplateRow(scope.row)"
|
:disabled="!scope.row.canRefund"
|
v-model="form.skuId"
|
></el-radio>
|
</template>
|
</el-table-column>
|
<el-table-column type="index" align="center" label="序号" width="80px"></el-table-column>
|
<el-table-column label="商品图片" align="center">
|
<template slot-scope="scope">
|
<product-img :imgUrl="scope.row.imgUrl"></product-img>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品主编码">
|
<template slot-scope="scope">
|
{{scope.row.spuNum ? scope.row.spuNum : '-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="商品" prop="spuName">
|
<template slot-scope="scope">
|
<span
|
class="giftStyle"
|
v-if="scope.row.promotionType === '2'"
|
>赠</span>
|
<span class="giftStyle" v-if="scope.row.refundStatus && scope.row.refundStatus!== '00'">
|
退
|
</span>
|
<span>{{scope.row.spuName}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="商品规格">
|
<template slot-scope="scope">
|
{{ scope.row.skuProps && JSON.parse(scope.row.skuProps).length ? JSON.parse(scope.row.skuProps).map(item=>item.propValueName).join('/') : '-'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="销售金额（元）">
|
<template slot-scope="scope">
|
<span v-if="scope.row.promotionType !== '2'">
|
{{scope.row.totelAmt ? '￥ '+scope.row.totelAmt.toFixed(2) : '-'}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="实收金额（元）">
|
<template slot-scope="scope">
|
<span v-if="scope.row.promotionType !== '2'">
|
{{scope.row.totelAmtAct ? '￥ '+scope.row.totelAmtAct.toFixed(2) : '-'}}
|
</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="数量">
|
<template slot-scope="scope">
|
{{scope.row.buyQuantity}} * {{JSON.parse(scope.row.expInfo).skuReduceStorage}} ({{scope.row.spuUnit ? scope.row.spuUnit : '瓶'}})
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
<el-form-item
|
v-if="form.refundType === '1' && orderRow.orderStatus !== '03' && orderRow.orderStatus !== '05'"
|
label="货物状态：" prop="receivingStatus">
|
<el-select
|
v-model="form.receivingStatus"
|
placeholder="请选择货物状态"
|
@change="changeReceivingStatus"
|
>
|
<el-option label="已收到货" value="1" key="1"></el-option>
|
<el-option label="未收到货" value="2" key="2"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="退款数量" v-show="form.skuId" prop="quantity">
|
<el-input-number
|
:disabled="setDisabled('num')"
|
v-model="form.quantity"
|
@change="setRefundAmount"
|
></el-input-number>
|
</el-form-item>
|
<el-form-item label="退款金额" v-show="form.skuId" prop="refundAmount">
|
<el-input-number
|
:disabled="setDisabled()"
|
v-model="form.refundAmount"
|
></el-input-number> ￥
|
</el-form-item>
|
<el-form-item label="退款说明：" prop="applicationExplain">
|
<el-input placeholder="请输入退款说明" clearable v-model="form.applicationExplain" type="textarea"></el-input>
|
</el-form-item>
|
<el-form-item label="上传凭证：">
|
<custom-upload-img
|
:limitNumber="3"
|
:isAppendTobody="true"
|
@handle-success="handleSuccess"
|
@handle-remove="handleRemove"
|
@handle-file-data="handleFileData"
|
:fileList="fileList"
|
></custom-upload-img>
|
</el-form-item>
|
<div v-if="form.refundType === '2'">
|
<hr class="line">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item clearable label="物流公司：" prop="companyName">
|
<el-input v-model="form.companyName"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item clearable label="物流单号：" prop="waybillId">
|
<el-input v-model="form.waybillId"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="联系电话：" clearable prop="sendByPhone">
|
<el-input placeholder="请输入联系电话" v-model="form.sendByPhone"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</div>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="submit" type="primary" :loading="loading">保存</el-button>
|
<el-button size="mini" @click="dialogVisible = false">取消</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import orderMgtApi from '@/api/orderMgt'
|
import uploadFileApi from '@/api/uploadFile'
|
import { validateMobile, inputNumberValid, validatePrice } from '@/utils/validator'
|
import productImg from '@/views/product/components/productImg.vue'
|
|
export default {
|
components: { productImg },
|
props: {
|
show: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: '退货信息'
|
},
|
orderRow: {
|
type: Object,
|
default: function() {
|
return {}
|
}
|
}
|
},
|
data() {
|
const totelAmtActValid = (rule, value, callback) => {
|
if (value > this.productInfo.totelAmtAct) {
|
callback(new Error('退款金额不能大于商品实收金额'))
|
} else {
|
callback()
|
}
|
}
|
const quantityValid = (rule, value, callback) => {
|
if (value > this.productInfo.buyQuantity) {
|
callback(new Error('退款数量不能大于商品数量'))
|
} else {
|
callback()
|
}
|
}
|
const refundAmountValidator = (rule, value, callback) => {
|
if (this.orderRow.orderType !== 'T04') {
|
validatePrice(rule, value, callback)
|
} else {
|
callback()
|
}
|
}
|
return {
|
dialogVisible: false,
|
loading: false,
|
fileList: [],
|
form: {
|
refundType: null,
|
applicationReason: null,
|
picture: null,
|
applicationExplain: null,
|
companyName: null,
|
waybillId: null,
|
sendByPhone: null,
|
receivingStatus: null,
|
refundAmount: null,
|
quantity: null,
|
skuId: null
|
},
|
formRules: {
|
receivingStatus: [{ required: true, message: '请选择货物状态', trigger: 'change' }],
|
skuId: [{ required: true, message: '请选择需要退货的商品' }],
|
refundType: [{ required: true, message: '请选择退款类型', trigger: 'change' }],
|
applicationReason: [{ required: true, message: '请选择退款原因', trigger: 'change' }],
|
applicationExplain: [{ max: 100, message: '退款说明最多只能输入 100 个字', trigger: 'change' }],
|
companyName: [
|
{ required: true, message: '请输入物流公司', trigger: 'change' },
|
{ max: 15, message: '物流公司最多只能输入 15 个字' }
|
],
|
waybillId: [
|
{ required: true, message: '请输入物流单号', trigger: 'change' },
|
{ max: 16, message: '物流单号最多只能输入 16 个字' }
|
|
],
|
sendByPhone: [{ required: true, validator: validateMobile, trigger: 'change' }],
|
refundAmount: [
|
{ required: true, validator: refundAmountValidator },
|
{ required: true, validator: totelAmtActValid }
|
],
|
quantity: [
|
{ required: true, validator: inputNumberValid },
|
{ validator: quantityValid }
|
]
|
},
|
productInfo: {
|
totelAmtAct: null,
|
buyQuantity: null
|
}
|
}
|
},
|
watch: {
|
/**
|
* 监控外部显示变量变化
|
* 传递到dialog组件
|
*/
|
show: function(newShow, oldShow) {
|
this.dialogVisible = newShow
|
if (this.orderRow.orderStatus === '03') {
|
this.form.refundType = '1'
|
} else if (this.orderRow.orderType === 'T04' && (this.orderRow.orderStatus === '04' || this.orderRow.orderStatus === '05')) {
|
this.form.refundType = '2'
|
} else {
|
this.form.refundType = null
|
}
|
},
|
/**
|
* 监控内部显示属性变化
|
* 传递到外部调用变量
|
*/
|
dialogVisible: function(newDialogShow, oldDialogShow) {
|
if (!newDialogShow) {
|
this.$emit('update:show', newDialogShow)
|
for (const k in this.form) {
|
this.form[k] = null
|
}
|
this.fileList = []
|
this.loading = false
|
this.productInfo = {
|
totelAmtAct: null,
|
buyQuantity: null
|
}
|
}
|
}
|
},
|
methods: {
|
// 当订单已完成，退货退款时需计算退款金额
|
setRefundAmount(val) {
|
if (val && this.orderRow.orderStatus === '05' && this.form.refundType === '2') {
|
this.form.refundAmount = Number((val * this.productInfo.totelAmtAct / this.productInfo.buyQuantity).toString().match(/^\d+(?:\.\d{0,2})?/));
|
}
|
},
|
/**
|
* 获取选中的商品
|
*/
|
getTemplateRow(row) {
|
this.form.refundAmount = row.totelAmtAct
|
this.form.quantity = row.buyQuantity
|
this.form.prodOrderId = row.prodOrderId
|
|
this.productInfo = {
|
totelAmtAct: row.totelAmtAct,
|
buyQuantity: row.buyQuantity
|
}
|
this.$refs.form.clearValidate('skuId')
|
},
|
/**
|
* 当货物状态改变时
|
*/
|
changeReceivingStatus() {
|
this.form.refundAmount = this.productInfo.totelAmtAct
|
this.form.quantity = this.productInfo.buyQuantity
|
},
|
/**
|
* 当退货类型改变时
|
*/
|
changeRefundType() {
|
this.form.receivingStatus = null
|
this.form.refundAmount = this.productInfo.totelAmtAct
|
this.form.quantity = this.productInfo.buyQuantity
|
this.$refs.form.clearValidate()
|
},
|
/**
|
* 设置数量和退款金额是否为disabled
|
* val如果有值则是退款数量
|
*/
|
setDisabled(val) {
|
let status = false
|
if (this.orderRow.orderType === 'T04' || this.form.refundType === '2' || (this.form.refundType === '1' && this.form.receivingStatus === '2') || this.orderRow.orderStatus === '03') {
|
status = true
|
} else {
|
status = false
|
}
|
// 已签收订单、退货退款数量可修改
|
if (val && this.orderRow.orderStatus === '05' && this.form.refundType === '2') {
|
status = false
|
}
|
// 已签收订单、仅退款可修改金额，数量不可修改
|
if (val && this.orderRow.orderStatus === '05' && this.form.refundType === '1') {
|
status = true
|
}
|
// 待收货订单、仅退款可修改金额，数量不可修改
|
if (val && this.orderRow.orderStatus === '04' && this.form.refundType === '1') {
|
status = true
|
}
|
return status
|
},
|
// 数组更新时重新获取数据
|
handleFileData(arr) {
|
this.fileList = arr
|
},
|
/**
|
* 获取上传成功的图片
|
*/
|
handleSuccess(data) {
|
this.form.picture = data.businessId
|
this.fileList.push({
|
url: data.url,
|
id: data.id
|
})
|
},
|
/**
|
* 移除图片
|
*/
|
handleRemove(file) {
|
uploadFileApi.removeFile({ key: file.id }).then(res => {
|
this.fileList = this.fileList.filter(v => {
|
return v.id !== file.id
|
})
|
if (!this.fileList.length) {
|
this.form.picture = null
|
}
|
})
|
},
|
/**
|
* 提交
|
*/
|
submit() {
|
this.$refs.form.validate().then(async(valid) => {
|
this.loading = true
|
this.form.orderId = this.orderRow.orderId
|
this.form.shopId = this.orderRow.orderItemsAll ? this.orderRow.orderItemsAll.shopId.replace('[', '').replace(']', '') : this.orderRow.omsOrderShops[0].shopId
|
this.form.phone = this.orderRow.orderItemsAll ? this.orderRow.orderItemsAll.contactPhone : this.orderRow.omsOrderDelivery.contactPhone
|
if (this.form.refundType === '2' || (this.form.refundType === '1' && this.orderRow.orderStatus === '05')) {
|
this.form.receivingStatus = '1'
|
} else if (this.orderRow.orderStatus === '03') {
|
this.form.receivingStatus = '2'
|
}
|
try {
|
const res = await orderMgtApi.returnInfo(this.form)
|
if (res.data) {
|
this.loading = false
|
this.dialogVisible = false
|
this.$message({
|
message: '提交成功!',
|
type: 'success'
|
})
|
if (!this.orderRow.orderItemsAll) {
|
this.$router.push({ name: 'orderMgtList' })
|
} else {
|
this.$parent.queryData() // 调用父组件查询列表方法
|
}
|
} else {
|
this.loading = false
|
}
|
} catch (error) {
|
this.loading = false
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.line{
|
margin-bottom: 20px;
|
}
|
</style>
|
