bandhuBuy-admin/src/app/admin/views/payment/components/ChannelManage.vue

<template>
  <div class="channel-manage" v-loading="loading">
    <el-table height="100%" class="sa-table" :data="tableData" stripe>
      <template #empty>
        <sa-empty />
      </template>

      <el-table-column prop="channelName" :label="t('modules.payment.channelName')" min-width="150"> </el-table-column>

      <el-table-column prop="merchantNum" :label="t('modules.payment.merchantId')" min-width="150"> </el-table-column>

      <el-table-column prop="appid" label="APPID" min-width="200"> </el-table-column>

      <el-table-column prop="secretKey" :label="t('modules.payment.secretKey')" min-width="300">
        <template #default="scope">
          <span class="secret-key">{{ scope.row.secretKey }}</span>
        </template>
      </el-table-column>


      <el-table-column :label="t('common.actions')" min-width="150" fixed="right">
        <template #default="scope">
          <el-button class="is-link" type="primary" @click="editChannel(scope.row)">
            {{ t('common.edit') }}
          </el-button>
          <el-popconfirm width="fit-content" :confirm-button-text="t('common.confirm')"
            :cancel-button-text="t('common.cancel')" :title="t('modules.payment.confirmDeleteChannel')"
            @confirm="deleteChannel(scope.row.id)">
            <template #reference>
              <el-button class="is-link" type="danger">{{ t('common.delete') }}</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <el-table-column prop="notifyUrl" label="异步通知地址" min-width="200">
        <template #default="{ row }">
          <span class="notify-url">{{ row.notifyUrl || '--' }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import { useModal } from '@/sheep/hooks';
import api from '../../../api';
import ChannelEdit from '../edit.vue';

const { t } = useI18n();

const loading = ref(false);
const tableData = ref([]);

// 获取支付通道数据
async function getData() {
  loading.value = true;
  try {
    const { code, data } = await api.payment.channel.list({});

    if (code == 200) {
      tableData.value = data || [];
    }
  } catch (error) {
    console.error('获取支付通道失败:', error);
    ElMessage.error(t('message.fetchDataFailed'));
  } finally {
    loading.value = false;
  }
}

// 编辑通道
function editChannel(channel) {
  useModal(
    ChannelEdit,
    {
      title: t('modules.payment.editPaymentChannel'),
      type: 'edit',
      id: channel.id,
      data: channel,
    },
    {
      confirm: () => {
        getData();
      },
    },
  );
}

// 删除通道
async function deleteChannel(id) {
  try {
    const { code } = await api.payment.channel.delete(id);
    if (code == 200) {
      ElMessage.success(t('message.deleteSuccess'));
      getData();
    }
  } catch (error) {
    console.error('删除支付通道失败:', error);
    ElMessage.error(t('message.deleteFailed'));
  }
}

// 暴露方法给父组件调用
defineExpose({
  getData,
});

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.channel-manage {
  height: 100%;
  display: flex;
  flex-direction: column;

  .sa-table-wrap {
    flex: 1;
    margin-top: 16px;
  }

}
</style>