fe / ufo-platform-fe · Commits

Go to a project

Authored by shuaiguo
Commit 560df0472d0dea7480f0cd95f96b6083e4af5f23 2 parents 6756d046 84f4bdde

Merge branch 'refs/heads/master' into develop

Inline Side-by-side
Showing 5 changed files with 890 additions and 1 deletions
1 <template> 1 <template>
2 <div class="layout-table"> 2 <div class="layout-table">
3 <div class="layout-table-content"> 3 <div class="layout-table-content">
4 - <i-table ref="table" :columns="columns" :data="data" :height="height" :row-class-name="rowClassName"></i-table> 4 + <i-table ref="table" :columns="columns" :data="data" :height="height" :row-class-name="rowClassName" @on-selection-change="onSelect"></i-table>
5 </div> 5 </div>
6 <div class="footer"> 6 <div class="footer">
7 <div class="footer-left"> 7 <div class="footer-left">
@@ -26,6 +26,7 @@ export default { @@ -26,6 +26,7 @@ export default {
26 page: Number, 26 page: Number,
27 columns: Array, 27 columns: Array,
28 data: Array, 28 data: Array,
  29 + onSelect: Function,
29 rowClassName: { 30 rowClassName: {
30 type: Function, 31 type: Function,
31 default() { 32 default() {
  1 +import App from './index.vue';
  2 +import createApp from 'create-app';
  3 +
  4 +createApp(App);
  1 +<template>
  2 + <LayoutContent :breads="[{title: '退款登记'}]">
  3 + <div class="header-container">
  4 + <LayoutFilter
  5 + @on-filter="onFilter"
  6 + @on-clear="onClear">
  7 + <i-form ref="filterForm" inline :model="filter">
  8 + <i-form-item prop="uid">
  9 + <i-input placeholder="输入UID" v-model="filter.uid"></i-input>
  10 + </i-form-item>
  11 + <i-form-item prop="refundStatus">
  12 + <i-select placeholder="状态" v-model="filter.refundStatus" style="width: 100px;">
  13 + <i-option :value="1">待退款</i-option>
  14 + <i-option :value="2">已退款</i-option>
  15 + <i-option :value="3">驳回退款</i-option>
  16 + </i-select>
  17 + </i-form-item>
  18 + <i-form-item prop="sponsorName">
  19 + <i-input placeholder="退款发起人" v-model="filter.sponsorName"></i-input>
  20 + </i-form-item>
  21 + <i-form-item prop="time">
  22 + <i-date-picker type="datetimerange" v-model="filter.time" placeholder="开始-结束时间" format="yyyy-MM-dd HH:mm" style="width: 280px"></i-date-picker>
  23 + </i-form-item>
  24 + </i-form>
  25 + </LayoutFilter>
  26 + <i-button type="success" icon="md-add" @click="onCreateRefund">新增退款信息</i-button>
  27 + </div>
  28 +
  29 + <LayoutTools class="export-container">
  30 + <i-button type="primary" icon="ios-cloud-download" @click="onExport">导出</i-button>
  31 + </LayoutTools>
  32 +
  33 + <LayoutTable
  34 + :page="page"
  35 + :total="total"
  36 + ref="applyRefundList"
  37 + :columns="columns"
  38 + :data="refundList"
  39 + @on-page-change="fetchData"
  40 + :onSelect="onSelect">
  41 + <template slot="footer" class="btns">
  42 + <i-button type="warning" @click="onDelete()">批量删除</i-button>
  43 + </template>
  44 + </LayoutTable>
  45 +
  46 + <!-- 新增退款信息 -->
  47 + <Modal
  48 + v-model="addModelShow"
  49 + @on-cancel="handleReset('addRefundForm')"
  50 + :footer-hide='true'>
  51 + <Form
  52 + ref="addRefundForm"
  53 + :model="addRefundFormItem"
  54 + label-position="left"
  55 + :rules="ruleValidate"
  56 + label-width="100">
  57 + <FormItem label="日期" prop="createDate">
  58 + {{addRefundFormItem.createDate}}
  59 + </FormItem>
  60 + <FormItem label="订单编号" prop="orderCode">
  61 + <Row>
  62 + <Col span="10">
  63 + <Input v-model="addRefundFormItem.orderCode" @on-blur="onOrderCodeBlur"/>
  64 + </Col>
  65 + <Col offset="1" span="13">
  66 + <div>当前订单已有<span :style="{color: 'red'}">{{refundNumber}}</span>条退款记录</div>
  67 + </Col>
  68 + </Row>
  69 + </FormItem>
  70 + <FormItem label="UID" prop="uid">
  71 + <Row>
  72 + <Col span="10"><Input v-model="addRefundFormItem.uid"/></Col>
  73 + </Row>
  74 + </FormItem>
  75 + <FormItem label="退款说明" prop="refundDesc">
  76 + <Input v-model="addRefundFormItem.refundDesc" />
  77 + </FormItem>
  78 + <FormItem label="退款类型" prop="refundType">
  79 + <Row>
  80 + <Col span="10">
  81 + <Select v-model="addRefundFormItem.refundType" placeholder="退款类型">
  82 + <Option value="0">无</Option>
  83 + <Option value="1">补偿类</Option>
  84 + <Option value="2">吃货类</Option>
  85 + <Option value="3">打款类</Option>
  86 + </Select>
  87 + </Col>
  88 + </Row>
  89 + </FormItem>
  90 + <FormItem label="退款金额" prop="refundAmount">
  91 + <Row>
  92 + <Col span="10"><Input v-model="addRefundFormItem.refundAmount"/></Col>
  93 + </Row>
  94 + </FormItem>
  95 + <FormItem label="退款渠道" prop="refundChannel">
  96 + <Row>
  97 + <Col span="10">
  98 + <Select v-model="addRefundFormItem.refundChannel" placeholder="退款渠道">
  99 + <Option value="1">支付宝</Option>
  100 + <Option value="2">银行卡</Option>
  101 + </Select>
  102 + </Col>
  103 + </Row>
  104 + </FormItem>
  105 + <FormItem label="收款人姓名" prop="payeeName">
  106 + <Row>
  107 + <Col span="10"><Input v-model="addRefundFormItem.payeeName" /></Col>
  108 + </Row>
  109 + </FormItem>
  110 + <FormItem label="收款人账号" prop="payeeAccount">
  111 + <Input v-model="addRefundFormItem.payeeAccount" />
  112 + </FormItem>
  113 + <FormItem label="退回地址" prop="refundAddress">
  114 + <Row>
  115 + <Col span="10"><Input v-model="addRefundFormItem.refundAddress" /></Col>
  116 + </Row>
  117 + </FormItem>
  118 + <FormItem label="处理人" v-if="operatorName">
  119 + {{addRefundFormItem.operatorName}}
  120 + </FormItem>
  121 + <FormItem label="打款状态">
  122 + {{addRefundFormItem.refundStatusName}}
  123 + </FormItem>
  124 + <FormItem>
  125 + <Button type="primary" @click="handleSubmit('addRefundForm')">确认</Button>
  126 + <Button type="error" @click="handleReset('addRefundForm')" style="margin-left: 8px">取消</Button>
  127 + </FormItem>
  128 + </Form>
  129 + </Modal>
  130 +
  131 + </LayoutContent>
  132 +</template>
  133 +
  134 +<script>
  135 +import qs from 'qs';
  136 +import dayjs from "dayjs";
  137 +import Api from 'api/api';
  138 +const api = new Api();
  139 +import { Button } from 'iview';
  140 +import BlobUtil from 'libs/blob';
  141 +
  142 +export default {
  143 + name: 'ApplyRefund',
  144 + data() {
  145 + return {
  146 + filter: {
  147 + uid: '',
  148 + sponsorName: '',
  149 + refundStatus: '',
  150 + time: []
  151 + },
  152 + page: 1,
  153 + total: 0,
  154 + // 新增退款信息
  155 + addModelShow: false,
  156 + addRefundFormItem: {
  157 + createDate: dayjs().format('YYYY/MM/DD'),
  158 + orderCode: '',
  159 + uid: '',
  160 + refundDesc: '',
  161 + refundType: '',
  162 + refundAmount: '',
  163 + refundChannel: '',
  164 + payeeName: '',
  165 + payeeAccount: '',
  166 + refundAddress: '',
  167 + operatorName: '',
  168 + refundStatusName: '待退款'
  169 + },
  170 + // 退款次数
  171 + refundNumber: 0,
  172 + isEdit: false,
  173 + selectedIds: [],
  174 + ruleValidate: {
  175 + uid: [{required: true, message: '请输入uid', trigger: 'blur'}],
  176 + orderCode: [{required: true, message: '请输入订单编号', trigger: 'blur'}],
  177 + refundDesc: [{required: true, message: '请输入退款说明', trigger: 'blur'}],
  178 + refundType: [{required: true, message: '请选择退款类型', trigger: 'blur'}],
  179 + refundAmount: [{required: true, message: '请输入退款金额', trigger: 'blur'}],
  180 + refundChannel: [{required: true, message: '请选择退款渠道', trigger: 'blur'}],
  181 + payeeName: [{required: true, message: '请输入收款人姓名', trigger: 'blur'}],
  182 + payeeAccount: [{required: true, message: '请输入收款人账号', trigger: 'blur'}]
  183 + },
  184 + refundList: [],
  185 + columns: [{
  186 + type: 'selection',
  187 + width: 60,
  188 + align: 'center'
  189 + },{
  190 + title: '日期',
  191 + key: 'createDate',
  192 + width: 120,
  193 + align: 'center'
  194 + }, {
  195 + title: '退款发起人',
  196 + key: 'sponsorName',
  197 + width: 120,
  198 + align: 'center'
  199 + },{
  200 + title: '订单号',
  201 + key: 'orderCode',
  202 + width: 160,
  203 + align: 'center'
  204 + },{
  205 + title: 'UID',
  206 + key: 'uid',
  207 + width: 120,
  208 + align: 'center'
  209 + }, {
  210 + title: '说明',
  211 + key: 'refundDesc',
  212 + width: 150,
  213 + },
  214 + {
  215 + title: '退款类型',
  216 + key: 'refundTypeName',
  217 + width: 100,
  218 + align: 'center'
  219 + },
  220 + {
  221 + title: '金额',
  222 + key: 'refundAmount',
  223 + width: 90,
  224 + },
  225 + {
  226 + title: '退款渠道',
  227 + key: 'refundChannelName',
  228 + width: 100
  229 + },{
  230 + title: '收款人姓名',
  231 + key: 'payeeName',
  232 + align:'center',
  233 + width: 90
  234 + }, {
  235 + title: '收款账号',
  236 + align: 'center',
  237 + key: 'payeeAccount',
  238 + width: 150
  239 + },{
  240 + title: '商品名称',
  241 + align: 'center',
  242 + key: 'goodsName',
  243 + width: 165
  244 + },
  245 + {
  246 + title: '商品尺码',
  247 + key: 'goodsSize',
  248 + align:'center',
  249 + width: 100
  250 + }, {
  251 + title: '退回地址',
  252 + align: 'center',
  253 + key: 'refundAddress',
  254 + width: 150
  255 + },{
  256 + title: '处理人',
  257 + aligin: 'center',
  258 + key: 'operatorName',
  259 + width: 90
  260 + },{
  261 + title: '状态',
  262 + key: 'refundStatusName',
  263 + align:'center',
  264 + width: 100
  265 + },{
  266 + title: '备注',
  267 + align: 'center',
  268 + key: 'remark',
  269 + align: 'center',
  270 + width: 200
  271 + }, {
  272 + title: '操作',
  273 + align: 'center',
  274 + fixed: 'right',
  275 + width: 200,
  276 + render: (h, {row}) => {
  277 + return (
  278 + <div>
  279 + {row.refundStatus == 1 ? <Button type="success" size="small" onClick={() => this.onEdit(row, true, true)}>编辑</Button> : null}
  280 + {row.refundStatus == 1 ? <Button type="error" size="small" style="margin-left: 8px" onClick={() => this.onDelete([row.id])}>删除</Button> : null }
  281 + </div>
  282 + );
  283 + }
  284 + }]
  285 + }
  286 + },
  287 + computed: {
  288 + filterParam(vm) {
  289 + const keys = Object.keys(vm.filter);
  290 + const res = Object.create(null);
  291 + for(const key of keys) {
  292 + if(key === 'time') {
  293 + const [startTime, endTime] = vm.filter.time;
  294 + if(startTime && endTime) {
  295 + res.startTime = dayjs(startTime).format('YYYY-MM-DD');
  296 + res.endTime = dayjs(endTime).format('YYYY-MM-DD');
  297 + }
  298 + continue
  299 + }
  300 + if(vm.filter[key]) {
  301 + res[key] = vm.filter[key];
  302 + }
  303 + }
  304 + return res;
  305 + }
  306 + },
  307 + mounted(){
  308 + this.fetchData();
  309 + },
  310 + methods: {
  311 + async fetchData(page = 1) {
  312 + this.page = page;
  313 + this.$Loading.start();
  314 + const result = await api._get('/ufoPlatform/refundRecord/list', {page, ...this.filterParam});
  315 + if (result.code === 200) {
  316 + this.total = result.data.total;
  317 + this.refundList = result.data.list.map(item => {
  318 + const {refundStatus} = item;
  319 + return {...item, _disabled: refundStatus !== 1}
  320 + })
  321 + this.$Loading.finish();
  322 + } else {
  323 + result.message && this.$Message.warning(result.message);
  324 + this.$Loading.error();
  325 + }
  326 + },
  327 + onFilter() {
  328 + this.fetchData()
  329 + },
  330 + onOrderCodeBlur() {
  331 + if(this.addRefundFormItem.orderCode) {
  332 + this.fetchRefundCount(this.addRefundFormItem.orderCode);
  333 + }
  334 + },
  335 + onClear() {
  336 + this.$refs.filterForm.resetFields();
  337 + this.fetchData();
  338 + },
  339 + onCreateRefund() {
  340 + this.isEdit = false;
  341 + this.refundNumber = 0;
  342 + this.addModelShow = true;
  343 + },
  344 + fetchRefundCount(orderCode) {
  345 + api._get('/ufoPlatform/refundRecord/getOrderExistedCount', {orderCode}).then(res=> {
  346 + if(res.code === 200) {
  347 + this.refundNumber = res.data || 0;
  348 + }
  349 + })
  350 + },
  351 + onEdit(row) {
  352 + this.isEdit = true;
  353 + const keys = Object.keys(this.addRefundFormItem);
  354 + // 查询订单退款纪录
  355 + const {orderCode} = row;
  356 + this.fetchRefundCount(orderCode);
  357 + for(const key of keys) {
  358 + if(key === 'createDate') continue;
  359 + this.addRefundFormItem[key] = `${row[key] || ''}`
  360 + }
  361 + this.addRefundFormItem.id = row.id;
  362 + this.addModelShow = true;
  363 + },
  364 + onSelect(items) {
  365 + this.selectedIds = items.map(item=> item.id);
  366 + },
  367 + onDelete(ids) {
  368 + this.$Modal.confirm({
  369 + render: h => {
  370 + return h('div', {}, '确定删除?');
  371 + },
  372 + onOk: () => {
  373 + this.onBatchDelete(ids)
  374 + }
  375 + })
  376 + },
  377 + onBatchDelete(ids = []) {
  378 + if(this.selectedIds.length) {
  379 + ids = this.selectedIds;
  380 + }
  381 + if(ids && !ids.length) {
  382 + return
  383 + }
  384 + api._get('/ufoPlatform/refundRecord/delete', {ids:ids.join()}).then(res=> {
  385 + if(res.code === 200) {
  386 + this.$Message.success(res.message);
  387 + this.fetchData();
  388 + }else{
  389 + this.$Message.error(res && res.message || '删除失败');
  390 + }
  391 + })
  392 + },
  393 + handleSubmit(name) {
  394 + this.$refs[name].validate((valid)=> {
  395 + if (valid) {
  396 + const {operatorName, refundStatusName, ...params} = this.addRefundFormItem
  397 + api._get(`/ufoPlatform/refundRecord/${this.isEdit ? 'update' : 'add'}`, params).then((res = {})=> {
  398 + if(res && res.code === 200) {
  399 + this.isEdit = false;
  400 + this.fetchData(this.page);
  401 + this.$refs[name].resetFields();
  402 + this.addModelShow = false;
  403 + this.$Message.success(res.message);
  404 + }else{
  405 + this.$Message.error(res.message);
  406 + }
  407 + });
  408 + } else {
  409 + this.$Message.error('请完善信息!');
  410 + }
  411 + });
  412 + },
  413 + handleReset(name) {
  414 + this.addModelShow = false;
  415 + this.isEdit = false;
  416 + this.$refs[name].resetFields();
  417 + },
  418 + onExport() {
  419 + this.$Loading.start();
  420 + api._get('/ufoPlatform/refundRecord/export', {
  421 + param: api._2params(this.filterParam)
  422 + }, {
  423 + responseType: 'blob'
  424 + }).then(result => {
  425 + if (result instanceof Blob) {
  426 + BlobUtil.downloadBlob(result, `退款申请_${dayjs().format('YYYY-MM-DD')}.xlsx`);
  427 + this.$Loading.finish();
  428 + } else if (result) {
  429 + result.message && this.$Message.warning(result.message);
  430 + this.$Loading.error();
  431 + }
  432 + })
  433 + }
  434 + },
  435 +}
  436 +</script>
  437 +
  438 +<style lang="scss" scoped>
  439 +.header-container {
  440 + display: flex;
  441 + justify-content: space-between;
  442 +}
  443 +.export-container {
  444 + display: flex;
  445 + justify-content: flex-end;
  446 +}
  447 +</style>
  1 +import App from './index.vue';
  2 +import createApp from 'create-app';
  3 +
  4 +createApp(App);
  1 +<template>
  2 + <LayoutContent :breads="[{title: '退款管理'}]">
  3 + <div class="header-container">
  4 + <LayoutFilter @on-filter="fetchData" @on-clear="onClear">
  5 + <i-form ref="filterForm" inline :model="filter">
  6 + <i-form-item prop="uid">
  7 + <i-input placeholder="输入UID" v-model="filter.uid"></i-input>
  8 + </i-form-item>
  9 + <i-form-item prop="refundType">
  10 + <i-select placeholder="退款类型" v-model="filter.refundType" style="width: 100px;">
  11 + <i-option :value="' '"></i-option>
  12 + <i-option :value="1">补偿类</i-option>
  13 + <i-option :value="2">吃货类</i-option>
  14 + <i-option :value="3">打款类</i-option>
  15 + </i-select>
  16 + </i-form-item>
  17 + <i-form-item prop="refundStatus">
  18 + <i-select placeholder="状态" v-model="filter.refundStatus" style="width: 100px;">
  19 + <i-option :value="' '"></i-option>
  20 + <i-option :value="1">待退款</i-option>
  21 + <i-option :value="2">已退款</i-option>
  22 + <i-option :value="3">驳回退款</i-option>
  23 + </i-select>
  24 + </i-form-item>
  25 + <i-form-item prop="time">
  26 + <i-date-picker type="datetimerange" v-model="filter.time" placeholder="开始-结束时间" format="yyyy-MM-dd" style="width: 280px"></i-date-picker>
  27 + </i-form-item>
  28 + </i-form>
  29 + </LayoutFilter>
  30 + <i-button type="success" icon="md-add" @click="onCreateRefund">新增退款信息</i-button>
  31 + </div>
  32 +
  33 + <LayoutTools class="export-container">
  34 + <i-button type="primary" icon="ios-cloud-download" @click="onExport">导出</i-button>
  35 + </LayoutTools>
  36 +
  37 + <LayoutTable
  38 + :page="page"
  39 + :total="total"
  40 + :columns="columns"
  41 + :data="refundList"
  42 + :onSelect="selectRow"
  43 + @on-page-change="fetchData">
  44 + <template slot="footer" class="btns">
  45 + <i-button type="primary" @click="onBatchDelete">批量删除</i-button>
  46 + </template>
  47 + </LayoutTable>
  48 + <Modal
  49 + v-model="refoundShow"
  50 + title="退款"
  51 + width="360"
  52 + @on-ok="refoundOk"
  53 + @on-cancel="refoundCancel">
  54 + <p>是否确认退款</p>
  55 + </Modal>
  56 + <Modal
  57 + v-model="backShow"
  58 + title="驳回退款"
  59 + width="360"
  60 + @on-ok="backOk"
  61 + @on-cancel="backCancel">
  62 + <div><span>备注：</span><Input v-model="remark" maxlength="100" show-word-limit type="textarea" placeholder="" style="width: 200px" /></div>
  63 + </Modal>
  64 + <Modal
  65 + v-model="addShow"
  66 + title="新增退款信息"
  67 + :footer-hide='true'
  68 + width="500"
  69 + >
  70 + <Form :model="addParam" ref="addParam" :rules="ruleValidate" label-position="left" :label-width="100">
  71 + <FormItem label="日期">
  72 + {{nowDate}}
  73 + </FormItem>
  74 + <FormItem label="订单编号" prop="orderCode">
  75 + <Input v-model="addParam.orderCode"></Input>
  76 + </FormItem>
  77 + <FormItem label="UID" prop="uid">
  78 + <Input v-model="addParam.uid"></Input>
  79 + </FormItem>
  80 + <FormItem label="退款说明" prop="refundDesc">
  81 + <Input v-model="addParam.refundDesc"></Input>
  82 + </FormItem>
  83 + <FormItem label="退款类型" prop="refundType">
  84 + <Select v-model="addParam.refundType">
  85 + <Option value="1">补偿类</Option>
  86 + <Option value="2">吃货类</Option>
  87 + <Option value="3">打款类</Option>
  88 + </Select>
  89 + </FormItem>
  90 + <FormItem label="退款金额" prop="refundAmount">
  91 + <Input v-model="addParam.refundAmount" type="number"></Input>
  92 + </FormItem>
  93 + <FormItem label="退款渠道" prop="refundChannel">
  94 + <Select v-model="addParam.refundChannel">
  95 + <Option value="1">支付宝</Option>
  96 + <Option value="2">银行卡</Option>
  97 + </Select>
  98 + </FormItem>
  99 + <FormItem label="收款人姓名" prop="payeeName">
  100 + <Input v-model="addParam.payeeName"></Input>
  101 + </FormItem>
  102 + <FormItem label="收款账号" prop="payeeAccount">
  103 + <Input v-model="addParam.payeeAccount"></Input>
  104 + </FormItem>
  105 + <FormItem label="回退地址" >
  106 + <Input v-model="addParam.refundAddress"></Input>
  107 + </FormItem>
  108 + <FormItem label="打款状态">
  109 + 待打款
  110 + </FormItem>
  111 + <FormItem>
  112 + <Button type="primary" @click="addOk()">确认</Button>
  113 + <Button type="error" @click="addCancel()" style="margin-left: 8px">取消</Button>
  114 + </FormItem>
  115 + </Form>
  116 + </Modal>
  117 + </LayoutContent>
  118 +</template>
  119 +
  120 +<script>
  121 +import Api from 'api/api';
  122 +const api = new Api();
  123 +import {Button, Modal} from 'iview';
  124 +import BlobUtil from 'libs/blob';
  125 +import dayjs from "dayjs";
  126 +
  127 +export default {
  128 + data() {
  129 + return {
  130 + filter: {
  131 + uid: '',
  132 + refundType: '',
  133 + refundStatus: '',
  134 + time: []
  135 + },
  136 + nowDate:'',
  137 + refoundShow:false,
  138 + id:0,
  139 + ids:[],
  140 + backShow:false,
  141 + remark:'',
  142 + addShow:false,
  143 + addParam:{},
  144 + page: 1,
  145 + total: 0,
  146 + refundList: [],
  147 + ruleValidate: {
  148 + orderCode: [
  149 + { required: true, message: '请填写订单编号', trigger: 'blur' }
  150 + ],
  151 + uid: [
  152 + { required: true, message: '请填写uid', trigger: 'blur' }
  153 + ],
  154 + refundDesc: [
  155 + { required: true, message: '请填写订退款说明', trigger: 'blur' }
  156 + ],
  157 + refundType: [
  158 + { required: true, message: '请选择退款类型', trigger: 'change' }
  159 + ],
  160 + refundAmount: [
  161 + { required: true, message: '请填写退款金额', trigger: 'blur' },
  162 + ],
  163 + refundChannel: [
  164 + { required: true, message: '请选择退款渠道', trigger: 'change' }
  165 + ],
  166 + payeeName: [
  167 + { required: true, message: '请填写收款人姓名', trigger: 'blur' }
  168 + ],
  169 + payeeAccount: [
  170 + { required: true, message: '请填写收款人账号', trigger: 'blur' },
  171 + ]
  172 + },
  173 + columns: [{
  174 + type: 'selection',
  175 + width: 60,
  176 + align: 'center',
  177 + }, {
  178 + title: '日期',
  179 + key: 'createDate',
  180 + width: 140
  181 + }, {
  182 + title: '订单号',
  183 + key: 'orderCode',
  184 + width: 160
  185 + },
  186 + {
  187 + title: 'UID',
  188 + key: 'uid',
  189 + width: 160
  190 + }, {
  191 + title: '说明',
  192 + key: 'refundDesc',
  193 + width: 140
  194 + },
  195 + {
  196 + title: '退款类型',
  197 + key: 'refundTypeName',
  198 + width: 120
  199 + },
  200 + {
  201 + title: '金额',
  202 + key: 'refundAmount',
  203 + width: 120
  204 + },
  205 + {
  206 + title: '退款渠道',
  207 + key: 'refundChannelName',
  208 + width: 120
  209 + },{
  210 + title: '收款人姓名',
  211 + key: 'payeeName',
  212 + align:'center',
  213 + width: 120
  214 + }, {
  215 + title: '收款账号',
  216 + align: 'center',
  217 + key: 'payeeAccount',
  218 + width: 180
  219 + },{
  220 + title: '商品名称',
  221 + align: 'center',
  222 + key: 'goodsName',
  223 + width: 165
  224 + },
  225 + {
  226 + title: '商品尺码',
  227 + key: 'goodsSize',
  228 + align:'center',
  229 + width: 80
  230 + }, {
  231 + title: '退回地址',
  232 + align: 'center',
  233 + key: 'refundAddress',
  234 + width: 165
  235 + },{
  236 + title: '处理人',
  237 + key: 'operator',
  238 + width: 90
  239 + },{
  240 + title: '状态',
  241 + key: 'refundStatusName',
  242 + align:'center',
  243 + width: 100
  244 + }, {
  245 + title: '备注',
  246 + align: 'center',
  247 + key: 'note',
  248 + width: 120
  249 + }, {
  250 + title: '操作',
  251 + align: 'center',
  252 + width: 200,
  253 + fixed: 'right',
  254 + render: (h, {row}) => {
  255 + let name = ''
  256 + switch (row.refundStatus) {
  257 + case 1:
  258 + name = '退款'
  259 + break
  260 + case 2:
  261 + name = '已退款'
  262 + break
  263 + case 3:
  264 + name = '已驳回'
  265 + break
  266 + default:
  267 + name = ''
  268 + break
  269 + }
  270 +
  271 + return (
  272 + <div class='header-container'>
  273 + <i-button type="success" size="small" disabled={row.refundStatus !== 1} onClick={()=>this.goRefund(row.id)}>{name}</i-button>
  274 + <i-button type="error" size="small" v-show={row.refundStatus === 1} onClick={()=>this.nonsuit(row.id)}>驳回</i-button>
  275 + </div>
  276 + );
  277 + }
  278 + }]
  279 + }
  280 + },
  281 + computed: {
  282 + fitlerTime(vm) {
  283 + const [startTime, endTime] = vm.filter.time;
  284 + }
  285 + },
  286 + mounted:function(){
  287 + this.fetchData();
  288 + },
  289 + methods: {
  290 + onFilter() {
  291 +
  292 + },
  293 + onClear() {
  294 + this.$refs.filterForm.resetFields();
  295 + },
  296 + onCreateRefund() {
  297 + let data = new Date();
  298 + this.nowDate = data.getFullYear() +'/'+ (data.getMonth()+1) +'/'+ data.getDate()
  299 + this.addShow = true;
  300 + },
  301 + selectRow(param){
  302 + let arr = [];
  303 + if(param.length)
  304 + for (let item of param){
  305 + arr.push(item.id);
  306 + }
  307 + this.ids = arr;
  308 + },
  309 + goRefund(id){
  310 + this.id = id;
  311 + this.refoundShow = true;
  312 + },
  313 + async refoundOk(){
  314 + if(this.id){
  315 + await api._get('/ufoPlatform/refundRecord/makePaid', {ids:this.id.toString()});
  316 + this.fetchData();
  317 + }
  318 + this.refoundCancel();
  319 + },
  320 + refoundCancel(){
  321 + this.refoundShow = false;
  322 + this.id = 0;
  323 + },
  324 + nonsuit(id){
  325 + this.id = id;
  326 + this.backShow = true;
  327 + },
  328 + async backOk(){
  329 + await api._get('/ufoPlatform/refundRecord/reject', {ids:this.id.toString(), remark:this.remark});
  330 + this.fetchData();
  331 + this.backCancel();
  332 + },
  333 + backCancel(){
  334 + this.remark = '';
  335 + this.backShow = false;
  336 + this.id = 0;
  337 + },
  338 + addOk(){
  339 + this.$refs.addParam.validate(async(valid) => {
  340 + if (valid) {
  341 + this.addParam.createDate = this.nowDate;
  342 + await api._get('/ufoPlatform/refundRecord/add', this.addParam);
  343 + this.fetchData();
  344 + this.addCancel();
  345 + this.$Message.success('添加成功!');
  346 + } else {
  347 + this.$Message.error('有未填写的信息!');
  348 + }
  349 + });
  350 +
  351 + },
  352 + addCancel(){
  353 + this.addParam = {};
  354 + this.$refs.addParam.resetFields();
  355 + this.addShow = false;
  356 + },
  357 + async onBatchDelete() {
  358 + if(!this.ids.length)
  359 + this.$Message.warning('请勾选删除条目');
  360 + await api._get('/ufoPlatform/refundRecord/delete', {ids:this.ids.toString()});
  361 + this.fetchData();
  362 + this.ids = [];
  363 + },
  364 + async onExport() {
  365 + this.$Loading.start();
  366 + let param = {...this.filter};
  367 + if(param.time.length){
  368 + param.startTime = param.time[0] && param.time[0].getFullYear() +'-'+ (param.time[0].getMonth()+1) +'-'+ param.time[0].getDate()
  369 + param.endTime = param.time[1] && param.time[1].getFullYear() +'-'+ (param.time[1].getMonth()+1) +'-'+ param.time[1].getDate()
  370 + delete param.time;
  371 + }
  372 + for (let i in param){
  373 + if(!param[i])
  374 + delete param[i];
  375 + }
  376 + const result = await api._get('/ufoPlatform/refundRecord/export', {
  377 + param: api._2params(param)
  378 + }, {
  379 + responseType: 'blob'
  380 + });
  381 + if (result instanceof Blob) {
  382 + BlobUtil.downloadBlob(result, `退款列表导出_${dayjs().format('YYYY-MM-DD')}.xlsx`);
  383 + this.$Loading.finish();
  384 + } else if (result) {
  385 + result.message && this.$Message.warning(result.message);
  386 + this.$Loading.error();
  387 + }
  388 + },
  389 + async fetchData(page = 1) {
  390 + this.page = page;
  391 + let param = {...this.filter};
  392 + if(param.time.length){
  393 + param.startTime = param.time[0] && param.time[0].getFullYear() +'-'+ (param.time[0].getMonth()+1) +'-'+ param.time[0].getDate()
  394 + param.endTime = param.time[1] && param.time[1].getFullYear() +'-'+ (param.time[1].getMonth()+1) +'-'+ param.time[1].getDate()
  395 + delete param.time
  396 + }
  397 + for (let i in param){
  398 + if(!param[i])
  399 + delete param[i]
  400 + }
  401 + this.$Loading.start();
  402 + const result = await api._get('/ufoPlatform/refundRecord/list', Object.assign({page},param));
  403 + if (result.code === 200) {
  404 + this.total = result.data.total;
  405 + this.refundList = result.data.list.map(item => {
  406 + const {refundStatus} = item;
  407 + return {...item, _disabled: refundStatus !== 1}
  408 + })
  409 + this.$Loading.finish();
  410 + } else {
  411 + result.message && this.$Message.warning(result.message);
  412 + this.$Loading.error();
  413 + }
  414 + },
  415 + },
  416 + watch: {
  417 + 'filter.time': function(newVal) {
  418 + console.log('-------filter.time-------',newVal);
  419 + }
  420 + }
  421 +}
  422 +</script>
  423 +
  424 +<style lang="scss" scoped>
  425 +.header-container {
  426 + display: flex;
  427 + justify-content: space-between;
  428 +}
  429 +.export-container {
  430 + display: flex;
  431 + justify-content: flex-end;
  432 +}
  433 +</style>