PayoutConfig.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <template>
  2. <div class="payout-config" v-loading="loading">
  3. <el-table height="100%" class="sa-table" :data="tableData" stripe>
  4. <template #empty>
  5. <sa-empty />
  6. </template>
  7. <el-table-column label="代付支付方式" min-width="150" align="center">
  8. <template #default="scope">
  9. <span class="method-name">{{ scope.row.methodName }}</span>
  10. </template>
  11. </el-table-column>
  12. <el-table-column label="代付支付通道" min-width="200" align="center">
  13. <template #default="scope">
  14. <div class="channel-list">
  15. <div
  16. v-for="channel in scope.row.midChannelMethodBOList"
  17. :key="channel.id"
  18. class="channel-item"
  19. >
  20. {{ channel.paymentChannel.channelName }}
  21. </div>
  22. </div>
  23. </template>
  24. </el-table-column>
  25. <el-table-column label="通道状态" min-width="150" align="center">
  26. <template #default="scope">
  27. <div class="status-list">
  28. <div
  29. v-for="channel in scope.row.midChannelMethodBOList"
  30. :key="channel.id"
  31. class="status-item"
  32. >
  33. <el-switch
  34. v-model="channel.status"
  35. :active-value="1"
  36. :inactive-value="0"
  37. @change="handleChannelStatusChange(channel)"
  38. />
  39. </div>
  40. </div>
  41. </template>
  42. </el-table-column>
  43. </el-table>
  44. </div>
  45. </template>
  46. <script setup>
  47. import { onMounted, ref } from 'vue';
  48. import { ElMessage } from 'element-plus';
  49. import api from '../../../api';
  50. const loading = ref(false);
  51. const tableData = ref([]);
  52. // 获取代付配置数据
  53. async function getData() {
  54. loading.value = true;
  55. try {
  56. const { code, data } = await api.payment.method.list({
  57. agencyService: 2, // 代付
  58. });
  59. if (code == 200) {
  60. tableData.value = data || [];
  61. }
  62. } catch (error) {
  63. console.error('获取代付配置失败:', error);
  64. ElMessage.error('获取数据失败');
  65. } finally {
  66. loading.value = false;
  67. }
  68. }
  69. // 处理通道状态变更
  70. async function handleChannelStatusChange(channel) {
  71. try {
  72. const { code } = await api.payment.method.midUpdate({
  73. id: channel.id,
  74. status: channel.status,
  75. });
  76. if (code == 200) {
  77. ElMessage.success('通道状态更新成功');
  78. }
  79. } catch (error) {
  80. console.error('更新通道状态失败:', error);
  81. ElMessage.error('通道状态更新失败');
  82. // 回滚状态
  83. channel.status = channel.status === 1 ? 0 : 1;
  84. }
  85. }
  86. // 暴露方法给父组件调用
  87. defineExpose({
  88. getData,
  89. });
  90. onMounted(() => {
  91. getData();
  92. });
  93. </script>
  94. <style lang="scss" scoped>
  95. .payout-config {
  96. height: 100%;
  97. .method-cell {
  98. display: flex;
  99. align-items: center;
  100. .method-name {
  101. font-weight: 500;
  102. }
  103. }
  104. .channel-list,
  105. .weight-list,
  106. .status-list {
  107. display: flex;
  108. flex-direction: column;
  109. align-items: center;
  110. justify-content: center;
  111. gap: 0;
  112. padding: 8px;
  113. }
  114. .channel-item,
  115. .weight-item,
  116. .status-item {
  117. display: flex;
  118. align-items: center;
  119. min-height: 40px;
  120. padding: 8px 12px;
  121. width: 100%;
  122. justify-content: center;
  123. &:not(:last-child) {
  124. border-bottom: 1px solid var(--el-border-color-light);
  125. margin-bottom: 8px;
  126. padding-bottom: 12px;
  127. }
  128. }
  129. .weight-display {
  130. color: #909399;
  131. font-style: italic;
  132. }
  133. }
  134. </style>