charge-java/admin-web/src/views/admin/refund/index.vue

<style scoped lang="scss">
.system-container {

  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    overflow: auto;

    .el-table {
      flex: 1;
    }

  }
}

.page-content {
  margin-bottom: 20px;
}

.page-pager {
  background-color: #fff;
  height: 24px;
}
</style>
<template>
  <div class="system-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">


      <el-form
          :model="state.formQuery"
          ref="queryRef"
          size="default" label-width="0px" class="mt5 mb5">
        <ext-d-select
            v-model="state.formQuery.status"
            placeholder="退款状态"
            clearable
            type="Refund.status"
            @on-change="loadData(true)"
            class="wd150 mr10">
        </ext-d-select>
<!--       <ext-d-select
            v-model="state.formQuery.fundsAccount"
            placeholder="资金账户"
            clearable
            type="Refund.account"
            @on-change="loadData(true)"
            class="wd150 mr10">
        </ext-d-select>-->
        <el-input
            v-model="state.formQuery.mobilePhone"
            placeholder="手机号"
            clearable
            @blur="loadData(true)"
            class="wd150 mr10">
        </el-input>
<!--        <el-input
            v-model="state.formQuery.outRefundNo"
            placeholder="商户退款单号"
            clearable
            @blur="loadData(true)"
            class="wd150 mr10">
        </el-input>-->
        <el-input
            v-model="state.formQuery.outTradeNo"
            placeholder="商户订单号"
            clearable
            @blur="loadData(true)"
            class="wd150 mr10">
        </el-input>
<!--        <el-input
            v-model="state.formQuery.refundId"
            placeholder="微信支付退款单号"
            clearable
            @blur="loadData(true)"
            class="wd150 mr10">
        </el-input>-->
        <el-input
            v-model="state.formQuery.transactionId"
            placeholder="微信支付订单号"
            clearable
            @blur="loadData(true)"
            class="wd150 mr10">
        </el-input>

        <el-button class="ml10" plain size="default" type="success" @click="loadData(true)">
          <SvgIcon name="ele-Search"/>
          查询
        </el-button>
      </el-form>

      <el-table
          border
          stripe="stripe"
          :height="state.tableData.height"
          highlight-current-row
          current-row-key="id"
          row-key="id"
          :data="state.tableData.data"
          v-loading="state.tableData.loading"
          @selection-change="handleTableSelectionChange"
          @sort-change="handleTableSortChange">
        <template #empty>
          <el-empty></el-empty>
        </template>
        <el-table-column
            v-for="field in state.tableData.columns"
            :key="field.prop"
            :label="field.label"
            :column-key="field.prop"
            :width="field.width"
            :min-width="field.minWidth"
            :fixed="field.fixed"
            :sortable="field.sortable"
            :show-overflow-tooltip="!field.fixed&&field.width>150"
        >
          <template #default="{row}">
            <template v-if="field.prop==='expand'">
              <p style="padding-left: 2em;" v-html="row[field.prop]"></p>
            </template>
            <template v-else-if="'total'===field.prop">
              {{u.fmt.fmtMoney(row[field.prop])}}
            </template>
            <template v-else-if="'refund'===field.prop">
              {{u.fmt.fmtMoney(row[field.prop])}}
            </template>
            <template v-else-if="'discountAmount'===field.prop">
              {{u.fmt.fmtMoney(row[field.prop])}}
            </template>
            <template v-else-if="'status'===field.prop">
              <ext-d-label type="Refund.status" v-model="row[field.prop]"/>
            </template>
            <template v-else-if="'action'===field.prop">
              <el-button 
                v-if="row.status==='NEW' && !row.isOverdue"  
                size="small" 
                plain  
                type="warning" 
                @click="onRefundClick(row)">
                退款
              </el-button>
              <el-button 
                v-if="row.status==='NEW' && row.isOverdue"  
                size="small" 
                plain 
                type="danger" 
                @click="onManualRefundClick(row)">
                线下退款
              </el-button>
            </template>
            <template v-else>
              <div>{{ row[field.prop] }}</div>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <ext-page class="page-pager" v-model:value="state.pageQuery" @change="loadData(false)"/>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="RefundLogList">
import {defineAsyncComponent, reactive, onMounted, onBeforeMount, ref, getCurrentInstance, nextTick, onBeforeUnmount} from 'vue';
import {$body, $get} from "/@/utils/request";
import {Msg} from "/@/utils/message";
import u from "/@/utils/u"


import {useRoute} from "vue-router";

const route = useRoute();
import ExtPage from '/@/components/form/ExtPage.vue'

import mittBus from '/@/utils/mitt';
import ExtDSelect from "/@/components/form/ExtDSelect.vue";
import ExtDLabel from "/@/components/form/ExtDLabel.vue";


//定义引用
const queryRef = ref();

//定义变量
const state = reactive({
  formQuery: {
    status:'NEW'
  },
  pageQuery: {
    pageNum: 1,
    pageSize: 10,
    total: 0
  },
  tableData: {
    height: 500,
    data: [] as Array<any>,
    loading: false,
    columns: [
      {label: '退款记录ID', prop: 'refundLogId', width: 105, resizable: true,fixed:'left'},
      {label: '商户退款单号', prop: 'outRefundNo', width: 130, resizable: true,fixed:'left'},
      {label: '商户订单号', prop: 'outTradeNo', width: 130, resizable: true,fixed:'left'},
      {label: '手机号', prop: 'mobilePhone', width: 120, resizable: true,fixed:'left'},
      // {label: '退款渠道', prop: 'channel', width: 150,resizable: true},
      {label: '退款状态', prop: 'status', resizable: true, width: 120},
      {label: '申请时间', prop: 'createTime', sortable: 'custom', resizable: true, width: 160},
      {label: '退款成功时间', prop: 'successTime', sortable: 'custom', resizable: true, width: 160},
      {label: '充值时间', prop: 'rechargeTime', sortable: 'custom', resizable: true, width: 160},
      {label: '原充值订单金额', prop: 'total', resizable: true, width: 140},
      {label: '退款申请金额', prop: 'refund', resizable: true, width: 120},
      {label: '优惠金额', prop: 'discountAmount', resizable: true, width: 90},
      // {label: '用户支付币种', prop: 'currency', resizable: true, width: 120},
      // {label: '资金账户', prop: 'fundsAccount', resizable: true, width: 120},
      {label: '退款原因', prop: 'reason', resizable: true, width: 120},
      // {label: '微信支付退款单号', prop: 'outRefundNo', resizable: true, width: 150},
      // {label: '微信支付订单号', prop: 'outTradeNo', resizable: true, width: 150},
      {label: '退款入账账户', prop: 'userReceivedAccount', resizable: true, width: 120},
      {label: '操作人', prop: 'adminUsername', resizable: true, width: 120},
      {
        label: '操作', prop: 'action', width: 110, align: 'center', fixed: 'right',
      }
    ],
  },
})


// 监听双向绑定 modelValue 的变化
// watch(
//         () => state.pageIndex,
//         () => {
//
//         }
// );

//生命周期钩子
onBeforeMount(() => {
})

onMounted(() => {
  let query = route.query;
  console.log(route.params, route.query)
  if (query.mobilePhone) {
    state.formQuery.mobilePhone = query.mobilePhone;
  }


  loadData();

  nextTick(() => {
    let bodyHeight = document.body.clientHeight;
    let queryHeight = queryRef.value.$el.clientHeight;
    state.tableData.height = bodyHeight - queryHeight - 320
  })

  mittBus.on("refundLog.refresh", () => {
    loadData();
  })
});

onBeforeUnmount(() => {
  mittBus.off("refundLog.refresh")
})


//region 方法区
// 初始化表格数据
const loadData = (refresh: boolean = false) => {
  if (refresh) {
    state.pageQuery.pageNum = 1;
  }
  state.tableData.loading = true;
  $get(`/finance/listRefundLog`, {...state.formQuery, ...state.pageQuery}).then((res: any) => {
    let {list, total} = res;
    state.tableData.data = list;
    state.pageQuery.total = total;
    state.tableData.loading = false;
  }).catch(e => {
    console.error(e)
    state.tableData.loading = false;
  })
};

// 打开修改用户弹窗
const onRefundClick = ( row: any) => {
  // if(row.status){
  //   return;
  // }
  Msg.confirm(
    `<div style="line-height: 2; font-size: 14px;">` +
    `<div style="font-weight: bold; color: #409EFF; font-size: 15px; margin-bottom: 10px;">【退款确认】</div>` +
    `<div style="margin: 8px 0;"><span style="color: #606266;">用户手机：</span><span style="font-weight: 500;">${row.mobilePhone}</span></div>` +
    `<div style="margin: 8px 0;"><span style="color: #606266;">退款金额：</span><span style="font-weight: 500; color: #F56C6C;">${u.fmt.fmtMoney(row.refund)}</span></div>` +
    `<div style="margin: 8px 0;"><span style="color: #606266;">申请时间：</span><span style="font-weight: 500;">${row.createTime ? row.createTime.replace('T', ' ') : '无'}</span></div>` +
    `<div style="margin: 15px 0; padding: 10px; background-color: #ECF5FF; border-radius: 4px; border-left: 3px solid #409EFF;">` +
    `<div style="color: #409EFF;">请确认是否执行微信退款操作？</div>` +
    `</div>` +
    `</div>`
  ).then(()=>{
    $get(`/finance/customWxRefund/${row.refundLogId}`).then((res: any) => {
      Msg.message(`操作已提交`)
      loadData(true)
    }).catch(e => {
      console.error(e)
    })
  })
};

// 手动确认退款（线下退款）
const onManualRefundClick = (row: any) => {
  Msg.confirm(
    `<div style="line-height: 2; font-size: 14px;">` +
    `<div style="font-weight: bold; color: #E6A23C; font-size: 15px; margin-bottom: 10px;">【重要提醒】请确认已完成线下退款操作！</div>` +
    `<div style="margin: 8px 0;"><span style="color: #606266;">用户手机：</span><span style="font-weight: 500;">${row.mobilePhone}</span></div>` +
    `<div style="margin: 8px 0;"><span style="color: #606266;">退款金额：</span><span style="font-weight: 500; color: #F56C6C;">${u.fmt.fmtMoney(row.refund)}</span></div>` +
    `<div style="margin: 8px 0;"><span style="color: #606266;">充值时间：</span><span style="font-weight: 500;">${row.rechargeTime ? row.rechargeTime.replace('T', ' ') : '无'}</span></div>` +
    `<div style="margin: 15px 0; padding: 10px; background-color: #FDF6EC; border-radius: 4px; border-left: 3px solid #E6A23C;">` +
    `<div style="color: #E6A23C; margin-bottom: 5px;">该订单已超过365天退款时限</div>` +
    `<div style="color: #909399;">请确认已通过线下方式完成实际退款</div>` +
    `</div>` +
    `</div>`, 
    '线下退款确认',
    {
      confirmButtonText: '确认已完成线下退款',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    $get(`/finance/manualConfirmRefund/${row.refundLogId}`).then((res: any) => {
      Msg.message(`线下退款确认成功`)
      loadData(true)
    }).catch(e => {
      console.error(e)
      Msg.message(`操作失败：${e.message}`, 'error')
    })
  }).catch(() => {
    // 用户取消操作
  });
};


const handleTableSelectionChange = (selection: any) => {
  console.log("handleTableSelectionChange>>", selection)
  // emit("on-check-change", selection)
}

const handleTableSortChange = (column: any, prop: any, order: any) => {
  console.log("handleTableSortChange>>", column, prop, order)
  // emit("on-sort-change", column)
}


//endregion


// 暴露变量
// defineExpose({
//     loadData,
// });
</script>