111 lines
3.1 KiB
Vue
111 lines
3.1 KiB
Vue
<template>
|
|
<el-dialog title="退款" v-model="showDialog" width="400px" @close="reset">
|
|
<el-form ref="refundFormRef" :model="refundForm" :rules="refundFormRules" label-position="top">
|
|
<el-form-item label="退单数" prop="num">
|
|
<el-select v-model="refundForm.num" placeholder="请选择退单数" style="width: 100%;" @change="refundNumChange">
|
|
<el-option :label="item" :value="item" v-for="item in refundNumList" :key="item"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="退单金额">
|
|
<el-input v-model="refundForm.refundAmount" disabled placeholder="请选择退单数"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="退款原因">
|
|
<el-input v-model="refundForm.refundReason" type="textarea" placeholder="请输入退款原因"></el-input>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="showDialog = false" style="width: 100%;">取消</el-button>
|
|
<el-button type="primary" :loading="refundLoading" @click="refundConfirm" style="width: 100%;">确
|
|
定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { returnGpOrder } from '@/api/group'
|
|
import { ref, reactive } from 'vue'
|
|
import { ElMessage } from "element-plus";
|
|
|
|
const emits = defineEmits(["success"]);
|
|
|
|
const newRow = ref('')
|
|
const showDialog = ref(false)
|
|
const refundLoading = ref(false)
|
|
const refundFormRef = ref(null)
|
|
const refundForm = reactive({
|
|
num: '',
|
|
orderId: '',
|
|
refundAmount: '',
|
|
refundDesc: '',
|
|
refundReason: ''
|
|
})
|
|
|
|
const refundFormRules = reactive({
|
|
num: [
|
|
{
|
|
required: true,
|
|
message: ' ',
|
|
trigger: 'change'
|
|
}
|
|
]
|
|
})
|
|
|
|
const refundNumList = ref([])
|
|
|
|
// 提交退单
|
|
function refundConfirm() {
|
|
refundFormRef.value.validate(async valid => {
|
|
if (valid) {
|
|
try {
|
|
refundLoading.value = true
|
|
const res = await returnGpOrder(refundForm)
|
|
ElMessage.success('退单成功')
|
|
refundLoading.value = false
|
|
showDialog.value = false
|
|
emits('succcess')
|
|
} catch (error) {
|
|
console.log(error);
|
|
refundLoading.value = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// 计算退单金额
|
|
function refundNumChange(e) {
|
|
refundForm.refundAmount = Math.floor(newRow.value.orderAmount / newRow.value.number * e * 100) / 100
|
|
}
|
|
|
|
// 显示
|
|
function show(row) {
|
|
showDialog.value = true;
|
|
newRow.value = row
|
|
let arr = []
|
|
for (let i = 1; i <= row.number - row.refundNumber; i++) {
|
|
arr.push(i)
|
|
}
|
|
refundNumList.value = arr
|
|
refundForm.orderId = row.id
|
|
}
|
|
|
|
// 初始化
|
|
function reset() {
|
|
newRow.value = ''
|
|
refundNumList.value = []
|
|
refundForm.orderId = ''
|
|
for (let key in refundForm) {
|
|
refundForm[key] = ''
|
|
}
|
|
refundFormRef.value.resetFields()
|
|
}
|
|
|
|
defineExpose({
|
|
show
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dialog-footer {
|
|
display: flex;
|
|
}
|
|
</style> |