|
|
|
<template>
|
|
|
|
<LayoutContent :breads="[{title: '退款登记'}]">
|
|
|
|
<div class="header-container">
|
|
|
|
<LayoutFilter
|
|
|
|
@on-filter="onFilter"
|
|
|
|
@on-clear="onClear">
|
|
|
|
<i-form ref="filterForm" inline :model="filter">
|
|
|
|
<i-form-item prop="uid">
|
|
|
|
<i-input placeholder="输入UID" v-model="filter.uid"></i-input>
|
|
|
|
</i-form-item>
|
|
|
|
<i-form-item prop="refundStatus">
|
|
|
|
<i-select placeholder="状态" v-model="filter.refundStatus" style="width: 100px;">
|
|
|
|
<i-option :value="1">待退款</i-option>
|
|
|
|
<i-option :value="2">已退款</i-option>
|
|
|
|
<i-option :value="3">驳回退款</i-option>
|
|
|
|
</i-select>
|
|
|
|
</i-form-item>
|
|
|
|
<i-form-item prop="sponsorName">
|
|
|
|
<i-input placeholder="退款发起人" v-model="filter.sponsorName"></i-input>
|
|
|
|
</i-form-item>
|
|
|
|
<i-form-item prop="time">
|
|
|
|
<i-date-picker type="datetimerange" v-model="filter.time" placeholder="开始-结束时间" format="yyyy-MM-dd HH:mm" style="width: 280px"></i-date-picker>
|
|
|
|
</i-form-item>
|
|
|
|
</i-form>
|
|
|
|
</LayoutFilter>
|
|
|
|
<i-button type="success" icon="md-add" @click="onCreateRefund">新增退款信息</i-button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<LayoutTools class="export-container">
|
|
|
|
<i-button type="primary" icon="ios-cloud-download" @click="onExport">导出</i-button>
|
|
|
|
</LayoutTools>
|
|
|
|
|
|
|
|
<LayoutTable
|
|
|
|
:page="page"
|
|
|
|
:total="total"
|
|
|
|
ref="applyRefundList"
|
|
|
|
:columns="columns"
|
|
|
|
:data="refundList"
|
|
|
|
@on-page-change="fetchData"
|
|
|
|
:onSelect="onSelect">
|
|
|
|
<template slot="footer" class="btns">
|
|
|
|
<i-button type="warning" @click="onDelete()">批量删除</i-button>
|
|
|
|
</template>
|
|
|
|
</LayoutTable>
|
|
|
|
|
|
|
|
<!-- 新增退款信息 -->
|
|
|
|
<Modal
|
|
|
|
v-model="addModelShow"
|
|
|
|
@on-cancel="handleReset('addRefundForm')"
|
|
|
|
:footer-hide='true'>
|
|
|
|
<Form
|
|
|
|
ref="addRefundForm"
|
|
|
|
:model="addRefundFormItem"
|
|
|
|
label-position="left"
|
|
|
|
:rules="ruleValidate"
|
|
|
|
label-width="100">
|
|
|
|
<FormItem label="日期" prop="createDate">
|
|
|
|
{{addRefundFormItem.createDate}}
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="订单编号" prop="orderCode">
|
|
|
|
<Row>
|
|
|
|
<Col span="10">
|
|
|
|
<Input v-model="addRefundFormItem.orderCode" @on-blur="onOrderCodeBlur"/>
|
|
|
|
</Col>
|
|
|
|
<Col offset="1" span="13">
|
|
|
|
<div>当前订单已有<span :style="{color: 'red'}">{{refundNumber}}</span>条退款记录</div>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="UID" prop="uid">
|
|
|
|
<Row>
|
|
|
|
<Col span="10"><Input v-model="addRefundFormItem.uid"/></Col>
|
|
|
|
</Row>
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="退款说明" prop="refundDesc">
|
|
|
|
<Input v-model="addRefundFormItem.refundDesc" />
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="退款类型" prop="refundType">
|
|
|
|
<Row>
|
|
|
|
<Col span="10">
|
|
|
|
<Select v-model="addRefundFormItem.refundType" placeholder="退款类型">
|
|
|
|
<Option value="0">无</Option>
|
|
|
|
<Option value="1">补偿类</Option>
|
|
|
|
<Option value="2">吃货类</Option>
|
|
|
|
<Option value="3">打款类</Option>
|
|
|
|
</Select>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="退款金额" prop="refundAmount">
|
|
|
|
<Row>
|
|
|
|
<Col span="10"><Input v-model="addRefundFormItem.refundAmount"/></Col>
|
|
|
|
</Row>
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="退款渠道" prop="refundChannel">
|
|
|
|
<Row>
|
|
|
|
<Col span="10">
|
|
|
|
<Select v-model="addRefundFormItem.refundChannel" placeholder="退款渠道">
|
|
|
|
<Option value="1">支付宝</Option>
|
|
|
|
<Option value="2">银行卡</Option>
|
|
|
|
</Select>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="收款人姓名" prop="payeeName">
|
|
|
|
<Row>
|
|
|
|
<Col span="10"><Input v-model="addRefundFormItem.payeeName" /></Col>
|
|
|
|
</Row>
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="收款人账号" prop="payeeAccount">
|
|
|
|
<Input v-model="addRefundFormItem.payeeAccount" />
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="退回地址" prop="refundAddress">
|
|
|
|
<Row>
|
|
|
|
<Col span="10"><Input v-model="addRefundFormItem.refundAddress" /></Col>
|
|
|
|
</Row>
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="处理人" v-if="operatorName">
|
|
|
|
{{addRefundFormItem.operatorName}}
|
|
|
|
</FormItem>
|
|
|
|
<FormItem label="打款状态">
|
|
|
|
{{addRefundFormItem.refundStatusName}}
|
|
|
|
</FormItem>
|
|
|
|
<FormItem>
|
|
|
|
<Button type="primary" @click="handleSubmit('addRefundForm')">确认</Button>
|
|
|
|
<Button type="error" @click="handleReset('addRefundForm')" style="margin-left: 8px">取消</Button>
|
|
|
|
</FormItem>
|
|
|
|
</Form>
|
|
|
|
</Modal>
|
|
|
|
|
|
|
|
</LayoutContent>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import qs from 'qs';
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
import Api from 'api/api';
|
|
|
|
const api = new Api();
|
|
|
|
import { Button } from 'iview';
|
|
|
|
import BlobUtil from 'libs/blob';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'ApplyRefund',
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
filter: {
|
|
|
|
uid: '',
|
|
|
|
sponsorName: '',
|
|
|
|
refundStatus: '',
|
|
|
|
time: []
|
|
|
|
},
|
|
|
|
page: 1,
|
|
|
|
total: 0,
|
|
|
|
// 新增退款信息
|
|
|
|
addModelShow: false,
|
|
|
|
addRefundFormItem: {
|
|
|
|
createDate: dayjs().format('YYYY/MM/DD'),
|
|
|
|
orderCode: '',
|
|
|
|
uid: '',
|
|
|
|
refundDesc: '',
|
|
|
|
refundType: '',
|
|
|
|
refundAmount: '',
|
|
|
|
refundChannel: '',
|
|
|
|
payeeName: '',
|
|
|
|
payeeAccount: '',
|
|
|
|
refundAddress: '',
|
|
|
|
operatorName: '',
|
|
|
|
refundStatusName: '待退款'
|
|
|
|
},
|
|
|
|
// 退款次数
|
|
|
|
refundNumber: 0,
|
|
|
|
isEdit: false,
|
|
|
|
selectedIds: [],
|
|
|
|
ruleValidate: {
|
|
|
|
uid: [{required: true, message: '请输入uid', trigger: 'blur'}],
|
|
|
|
orderCode: [{required: true, message: '请输入订单编号', trigger: 'blur'}],
|
|
|
|
refundDesc: [{required: true, message: '请输入退款说明', trigger: 'blur'}],
|
|
|
|
refundType: [{required: true, message: '请选择退款类型', trigger: 'blur'}],
|
|
|
|
refundAmount: [{required: true, message: '请输入退款金额', trigger: 'blur'}],
|
|
|
|
refundChannel: [{required: true, message: '请选择退款渠道', trigger: 'blur'}],
|
|
|
|
payeeName: [{required: true, message: '请输入收款人姓名', trigger: 'blur'}],
|
|
|
|
payeeAccount: [{required: true, message: '请输入收款人账号', trigger: 'blur'}]
|
|
|
|
},
|
|
|
|
refundList: [],
|
|
|
|
columns: [{
|
|
|
|
type: 'selection',
|
|
|
|
width: 60,
|
|
|
|
align: 'center'
|
|
|
|
},{
|
|
|
|
title: '日期',
|
|
|
|
key: 'createDate',
|
|
|
|
width: 120,
|
|
|
|
align: 'center'
|
|
|
|
}, {
|
|
|
|
title: '退款发起人',
|
|
|
|
key: 'sponsorName',
|
|
|
|
width: 120,
|
|
|
|
align: 'center'
|
|
|
|
},{
|
|
|
|
title: '订单号',
|
|
|
|
key: 'orderCode',
|
|
|
|
width: 160,
|
|
|
|
align: 'center'
|
|
|
|
},{
|
|
|
|
title: 'UID',
|
|
|
|
key: 'uid',
|
|
|
|
width: 120,
|
|
|
|
align: 'center'
|
|
|
|
}, {
|
|
|
|
title: '说明',
|
|
|
|
key: 'refundDesc',
|
|
|
|
width: 150,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '退款类型',
|
|
|
|
key: 'refundTypeName',
|
|
|
|
width: 100,
|
|
|
|
align: 'center'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '金额',
|
|
|
|
key: 'refundAmount',
|
|
|
|
width: 90,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '退款渠道',
|
|
|
|
key: 'refundChannelName',
|
|
|
|
width: 100
|
|
|
|
},{
|
|
|
|
title: '收款人姓名',
|
|
|
|
key: 'payeeName',
|
|
|
|
align:'center',
|
|
|
|
width: 90
|
|
|
|
}, {
|
|
|
|
title: '收款账号',
|
|
|
|
align: 'center',
|
|
|
|
key: 'payeeAccount',
|
|
|
|
width: 150
|
|
|
|
},{
|
|
|
|
title: '商品名称',
|
|
|
|
align: 'center',
|
|
|
|
key: 'goodsName',
|
|
|
|
width: 165
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '商品尺码',
|
|
|
|
key: 'goodsSize',
|
|
|
|
align:'center',
|
|
|
|
width: 100
|
|
|
|
}, {
|
|
|
|
title: '退回地址',
|
|
|
|
align: 'center',
|
|
|
|
key: 'refundAddress',
|
|
|
|
width: 150
|
|
|
|
},{
|
|
|
|
title: '处理人',
|
|
|
|
aligin: 'center',
|
|
|
|
key: 'operatorName',
|
|
|
|
width: 90
|
|
|
|
},{
|
|
|
|
title: '状态',
|
|
|
|
key: 'refundStatusName',
|
|
|
|
align:'center',
|
|
|
|
width: 100
|
|
|
|
},{
|
|
|
|
title: '备注',
|
|
|
|
align: 'center',
|
|
|
|
key: 'remark',
|
|
|
|
align: 'center',
|
|
|
|
width: 200
|
|
|
|
}, {
|
|
|
|
title: '操作',
|
|
|
|
align: 'center',
|
|
|
|
fixed: 'right',
|
|
|
|
width: 200,
|
|
|
|
render: (h, {row}) => {
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{row.refundStatus == 1 ? <Button type="success" size="small" onClick={() => this.onEdit(row, true, true)}>编辑</Button> : null}
|
|
|
|
{row.refundStatus == 1 ? <Button type="error" size="small" style="margin-left: 8px" onClick={() => this.onDelete([row.id])}>删除</Button> : null }
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
filterParam(vm) {
|
|
|
|
const keys = Object.keys(vm.filter);
|
|
|
|
const res = Object.create(null);
|
|
|
|
for(const key of keys) {
|
|
|
|
if(key === 'time') {
|
|
|
|
const [startTime, endTime] = vm.filter.time;
|
|
|
|
if(startTime && endTime) {
|
|
|
|
res.startTime = dayjs(startTime).format('YYYY-MM-DD');
|
|
|
|
res.endTime = dayjs(endTime).format('YYYY-MM-DD');
|
|
|
|
}
|
|
|
|
continue
|
|
|
|
}
|
|
|
|
if(vm.filter[key]) {
|
|
|
|
res[key] = vm.filter[key];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return res;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted(){
|
|
|
|
this.fetchData();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
async fetchData(page = 1) {
|
|
|
|
this.page = page;
|
|
|
|
this.$Loading.start();
|
|
|
|
const result = await api._get('/ufoPlatform/refundRecord/list', {page, ...this.filterParam});
|
|
|
|
if (result.code === 200) {
|
|
|
|
this.total = result.data.total;
|
|
|
|
this.refundList = result.data.list.map(item => {
|
|
|
|
const {refundStatus} = item;
|
|
|
|
return {...item, _disabled: refundStatus !== 1}
|
|
|
|
})
|
|
|
|
this.$Loading.finish();
|
|
|
|
} else {
|
|
|
|
result.message && this.$Message.warning(result.message);
|
|
|
|
this.$Loading.error();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onFilter() {
|
|
|
|
this.fetchData()
|
|
|
|
},
|
|
|
|
onOrderCodeBlur() {
|
|
|
|
if(this.addRefundFormItem.orderCode) {
|
|
|
|
this.fetchRefundCount(this.addRefundFormItem.orderCode);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
onClear() {
|
|
|
|
this.$refs.filterForm.resetFields();
|
|
|
|
this.fetchData();
|
|
|
|
},
|
|
|
|
onCreateRefund() {
|
|
|
|
this.isEdit = false;
|
|
|
|
this.refundNumber = 0;
|
|
|
|
this.addModelShow = true;
|
|
|
|
},
|
|
|
|
fetchRefundCount(orderCode) {
|
|
|
|
api._get('/ufoPlatform/refundRecord/getOrderExistedCount', {orderCode}).then(res=> {
|
|
|
|
if(res.code === 200) {
|
|
|
|
this.refundNumber = res.data || 0;
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
onEdit(row) {
|
|
|
|
this.isEdit = true;
|
|
|
|
const keys = Object.keys(this.addRefundFormItem);
|
|
|
|
// 查询订单退款纪录
|
|
|
|
const {orderCode} = row;
|
|
|
|
this.fetchRefundCount(orderCode);
|
|
|
|
for(const key of keys) {
|
|
|
|
if(key === 'createDate') continue;
|
|
|
|
this.addRefundFormItem[key] = `${row[key] || ''}`
|
|
|
|
}
|
|
|
|
this.addRefundFormItem.id = row.id;
|
|
|
|
this.addModelShow = true;
|
|
|
|
},
|
|
|
|
onSelect(items) {
|
|
|
|
this.selectedIds = items.map(item=> item.id);
|
|
|
|
},
|
|
|
|
onDelete(ids) {
|
|
|
|
this.$Modal.confirm({
|
|
|
|
render: h => {
|
|
|
|
return h('div', {}, '确定删除?');
|
|
|
|
},
|
|
|
|
onOk: () => {
|
|
|
|
this.onBatchDelete(ids)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
onBatchDelete(ids = []) {
|
|
|
|
if(this.selectedIds.length) {
|
|
|
|
ids = this.selectedIds;
|
|
|
|
}
|
|
|
|
if(ids && !ids.length) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
api._get('/ufoPlatform/refundRecord/delete', {ids:ids.join()}).then(res=> {
|
|
|
|
if(res.code === 200) {
|
|
|
|
this.$Message.success(res.message);
|
|
|
|
this.fetchData();
|
|
|
|
}else{
|
|
|
|
this.$Message.error(res && res.message || '删除失败');
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
handleSubmit(name) {
|
|
|
|
this.$refs[name].validate((valid)=> {
|
|
|
|
if (valid) {
|
|
|
|
const {operatorName, refundStatusName, ...params} = this.addRefundFormItem
|
|
|
|
api._get(`/ufoPlatform/refundRecord/${this.isEdit ? 'update' : 'add'}`, params).then((res = {})=> {
|
|
|
|
if(res && res.code === 200) {
|
|
|
|
this.isEdit = false;
|
|
|
|
this.fetchData(this.page);
|
|
|
|
this.$refs[name].resetFields();
|
|
|
|
this.addModelShow = false;
|
|
|
|
this.$Message.success(res.message);
|
|
|
|
}else{
|
|
|
|
this.$Message.error(res.message);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.$Message.error('请完善信息!');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
handleReset(name) {
|
|
|
|
this.addModelShow = false;
|
|
|
|
this.isEdit = false;
|
|
|
|
this.$refs[name].resetFields();
|
|
|
|
},
|
|
|
|
onExport() {
|
|
|
|
this.$Loading.start();
|
|
|
|
api._get('/ufoPlatform/refundRecord/export', {
|
|
|
|
param: api._2params(this.filterParam)
|
|
|
|
}, {
|
|
|
|
responseType: 'blob'
|
|
|
|
}).then(result => {
|
|
|
|
if (result instanceof Blob) {
|
|
|
|
BlobUtil.downloadBlob(result, `退款申请_${dayjs().format('YYYY-MM-DD')}.xlsx`);
|
|
|
|
this.$Loading.finish();
|
|
|
|
} else if (result) {
|
|
|
|
result.message && this.$Message.warning(result.message);
|
|
|
|
this.$Loading.error();
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.header-container {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.export-container {
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
</style> |
|
|
\ No newline at end of file |
...
|
...
|
|
