<template>
|
<a-modal
|
title="申请退款"
|
:width="640"
|
:visible="visible"
|
:confirmLoading="loading"
|
@ok="() => { $emit('ok') }"
|
@cancel="() => { $emit('cancel') }"
|
>
|
<a-spin :spinning="loading">
|
<a-form
|
v-bind="formLayout"
|
:form="form"
|
:model="model"
|
>
|
<a-form-item label="退款类型" name="disputeRequest">
|
<a-radio-group v-model:value="model.disputeRequest" v-decorator="['disputeRequest', {rules: [{required: true, message: '请选择退款类型'}]}]">
|
<a-radio value="refund">退款</a-radio>
|
<a-radio value="returnRefund">退货退款</a-radio>
|
</a-radio-group>
|
</a-form-item>
|
<a-form-item label="退款金额" name="applyPayment">
|
<a-input v-model:value="model.applyPayment" v-decorator="['applyPayment', {rules: [{required: true, message: '请填写退款金额'}]}]"/>
|
</a-form-item>
|
<a-form-item label="退款运费" name="applyCarriage">
|
<a-input v-model:value="model.applyCarriage" v-decorator="['applyCarriage', {rules: [{required: true, message: '请填写退款运费'}]}]"/>
|
</a-form-item>
|
<a-form-item label="货物状态" name="goodsStatus">
|
<a-select
|
v-model:value="model.goodsStatus"
|
:options="GoodsStatus"
|
placeholder="请选择货物状态"
|
v-decorator="['goodsStatus', {rules: [{required: true, message: '请选择货物状态'}]}]">
|
</a-select>
|
</a-form-item>
|
<a-form-item label="退款原因" name="applyReasonIds">
|
<a-select
|
:options="ReasonData"
|
placeholder="请选择退款原因"
|
v-decorator="['applyReasonIds', {rules: [{required: true, message: '请选择退款原因'}]}]">
|
</a-select>
|
</a-form-item>
|
<a-form-item label="申请理由" name="description">
|
<a-textarea v-model:value="model.description" placeholder="请填写申请理由" v-decorator="['description', {rules: [{required: true, min: 2, message: '请输入至少2个字符的申请理由！'}]}]" />
|
</a-form-item>
|
</a-form>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
const fields = ['disputeRequest', 'applyPayment', 'applyCarriage', 'applyReasonId', 'description', 'goodsStatus']
|
const GoodsStatus = [
|
{
|
value: 'refundWaitSellerSend',
|
label: '售中等待买家发货'
|
},
|
{
|
value: 'refundWaitBuyerReceive',
|
label: '售中等待买家收货'
|
},
|
{
|
value: 'refundBuyerReceived',
|
label: '售中已收货'
|
},
|
{
|
value: 'aftersaleBuyerNotReceived',
|
label: '售后未收货'
|
},
|
{
|
value: 'aftersaleBuyerReceived',
|
label: '售后已收到货'
|
}
|
]
|
export default {
|
props: {
|
visible: {
|
type: Boolean,
|
required: true
|
},
|
loading: {
|
type: Boolean,
|
default: () => false
|
},
|
|
model: {
|
type: Object,
|
default: () => null
|
}
|
},
|
data () {
|
this.formLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 7 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 13 }
|
}
|
}
|
return {
|
ReasonData: [],
|
GoodsStatus,
|
form: this.$form.createForm(this)
|
|
}
|
},
|
created () {
|
// 防止表单未注册
|
fields.forEach(v => this.form.getFieldDecorator(v))
|
// 当 model 发生改变时，为表单设置值
|
this.$watch('model', () => {
|
this.model && this.form.setFieldsValue(pick(this.model, fields))
|
this.ReasonData = []
|
if (this.model.reasonList != undefined) {
|
this.model.reasonList.forEach(element => {
|
const rea = {
|
value: element.id,
|
label: element.name
|
}
|
this.ReasonData.push(rea)
|
})
|
}
|
})
|
}
|
}
|
</script>
|
