|
|
@@ -0,0 +1,911 @@
|
|
|
+<template>
|
|
|
+ <div v-loading="pageLoading" class="app-container" :element-loading-text="loadingText">
|
|
|
+ <el-tabs v-model="activeTab" class="account-tabs">
|
|
|
+ <el-tab-pane label="账户概览" name="overview">
|
|
|
+ <AccountOverview
|
|
|
+ ref="overviewRef"
|
|
|
+ :enterprise-id="currentEnterpriseId"
|
|
|
+ @refresh="handleOverviewRefresh"
|
|
|
+ />
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="转账授权签约" name="authorize">
|
|
|
+ <div class="tab-content">
|
|
|
+ <el-card>
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>转账授权签约</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-form
|
|
|
+ ref="authorizeFormRef"
|
|
|
+ :model="authorizeForm"
|
|
|
+ :rules="authorizeRules"
|
|
|
+ label-width="120px"
|
|
|
+ >
|
|
|
+ <el-form-item label="企业ID" prop="enterprise_id">
|
|
|
+ <el-input
|
|
|
+ v-model="authorizeForm.enterprise_id"
|
|
|
+ placeholder="请输入企业ID"
|
|
|
+ :disabled="!!currentEnterpriseId"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ v-hasPerm="['module_payment:account:authorize']"
|
|
|
+ type="primary"
|
|
|
+ :loading="authorizeLoading"
|
|
|
+ @click="handleAuthorize"
|
|
|
+ >
|
|
|
+ 申请签约
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="handleAuthorizeReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div v-if="authorizeResult.sign_url" class="authorize-result">
|
|
|
+ <el-alert title="签约链接已生成,请在支付宝中完成签约" type="success" :closable="false">
|
|
|
+ <template #default>
|
|
|
+ <el-link :href="authorizeResult.sign_url" target="_blank" type="primary">
|
|
|
+ 点击前往签约 →
|
|
|
+ </el-link>
|
|
|
+ </template>
|
|
|
+ </el-alert>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="开通资金专户" name="create">
|
|
|
+ <div class="tab-content">
|
|
|
+ <el-card>
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>开通资金专户</span>
|
|
|
+ <el-tag v-if="authorizeStatus !== 'AUTHORIZED'" type="danger">
|
|
|
+ 请先完成转账授权签约
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-form
|
|
|
+ ref="createFormRef"
|
|
|
+ :model="createForm"
|
|
|
+ :rules="createRules"
|
|
|
+ label-width="140px"
|
|
|
+ >
|
|
|
+ <el-form-item label="企业ID" prop="enterprise_id">
|
|
|
+ <el-input
|
|
|
+ v-model="createForm.enterprise_id"
|
|
|
+ placeholder="请输入企业ID"
|
|
|
+ :disabled="!!currentEnterpriseId"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="账户类型" prop="account_type">
|
|
|
+ <el-select v-model="createForm.account_type" placeholder="请选择账户类型">
|
|
|
+ <el-option label="收支全能户" value="ALL" />
|
|
|
+ <el-option label="收入户" value="INCOME" />
|
|
|
+ <el-option label="支出户" value="DISBURSE" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="场景类型" prop="scene">
|
|
|
+ <el-select v-model="createForm.scene" placeholder="请选择场景类型">
|
|
|
+ <el-option label="ToB转账" value="B2B_TRANS" />
|
|
|
+ <el-option label="企业信用" value="ENT_CREDIT" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="createForm.remark" type="textarea" placeholder="请输入备注" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ v-hasPerm="['module_payment:account:create']"
|
|
|
+ type="primary"
|
|
|
+ :loading="createLoading"
|
|
|
+ :disabled="authorizeStatus !== 'AUTHORIZED'"
|
|
|
+ @click="handleCreate"
|
|
|
+ >
|
|
|
+ 开通专户
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="handleCreateReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div v-if="createResult.account_book_id" class="create-result">
|
|
|
+ <el-alert title="资金专户开通成功" type="success" :closable="false">
|
|
|
+ <template #default>
|
|
|
+ <div>专户ID: {{ createResult.account_book_id }}</div>
|
|
|
+ </template>
|
|
|
+ </el-alert>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="账户充值" name="deposit">
|
|
|
+ <div class="tab-content">
|
|
|
+ <el-card>
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>资金专户充值</span>
|
|
|
+ <el-tag v-if="!accountInfo.account_book_id" type="danger">
|
|
|
+ 请先开通资金专户
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else-if="accountInfo.status !== 'ACTIVE'" type="warning">
|
|
|
+ 资金专户状态异常
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-form
|
|
|
+ ref="depositFormRef"
|
|
|
+ :model="depositForm"
|
|
|
+ :rules="depositRules"
|
|
|
+ label-width="140px"
|
|
|
+ >
|
|
|
+ <el-form-item label="企业ID" prop="enterprise_id">
|
|
|
+ <el-input
|
|
|
+ v-model="depositForm.enterprise_id"
|
|
|
+ placeholder="请输入企业ID"
|
|
|
+ :disabled="!!currentEnterpriseId"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="资金专户号" prop="account_book_id">
|
|
|
+ <el-input
|
|
|
+ v-model="depositForm.account_book_id"
|
|
|
+ :placeholder="accountInfo.account_book_id || '请先开通资金专户'"
|
|
|
+ :disabled="!!accountInfo.account_book_id"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="充值金额" prop="amount">
|
|
|
+ <el-input-number
|
|
|
+ v-model="depositForm.amount"
|
|
|
+ :min="0.01"
|
|
|
+ :precision="2"
|
|
|
+ :controls="false"
|
|
|
+ placeholder="请输入充值金额"
|
|
|
+ style="width: 300px"
|
|
|
+ />
|
|
|
+ <span class="ml-2">元</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="depositForm.remark" type="textarea" placeholder="请输入备注" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ v-hasPerm="['module_payment:account:deposit']"
|
|
|
+ type="primary"
|
|
|
+ :loading="depositLoading"
|
|
|
+ :disabled="!accountInfo.account_book_id || accountInfo.status !== 'ACTIVE'"
|
|
|
+ @click="handleDeposit"
|
|
|
+ >
|
|
|
+ 发起充值
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="handleDepositReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div v-if="depositResult.url" class="deposit-result">
|
|
|
+ <el-alert title="充值页面已生成,请在支付宝中完成支付" type="success" :closable="false">
|
|
|
+ <template #default>
|
|
|
+ <el-link :href="depositResult.url" target="_blank" type="primary">
|
|
|
+ 点击前往充值 →
|
|
|
+ </el-link>
|
|
|
+ </template>
|
|
|
+ </el-alert>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="mt-4">
|
|
|
+ <template #header>
|
|
|
+ <span>充值记录</span>
|
|
|
+ </template>
|
|
|
+ <el-table :data="depositList" border stripe>
|
|
|
+ <el-table-column prop="out_biz_no" label="订单号" min-width="180" />
|
|
|
+ <el-table-column prop="amount" label="充值金额" min-width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ ¥{{ row.amount }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态" min-width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="getDepositStatusType(row.status)">
|
|
|
+ {{ row.status }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="created_time" label="创建时间" min-width="160" />
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <el-tab-pane label="转账管理" name="transfer">
|
|
|
+ <div class="tab-content">
|
|
|
+ <el-card>
|
|
|
+ <template #header>
|
|
|
+ <div class="card-header">
|
|
|
+ <span>发起转账</span>
|
|
|
+ <el-tag v-if="!accountInfo.account_book_id" type="danger">
|
|
|
+ 请先开通资金专户
|
|
|
+ </el-tag>
|
|
|
+ <el-tag v-else-if="accountInfo.balance <= 0" type="warning">
|
|
|
+ 账户余额不足,请先充值
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-form
|
|
|
+ ref="transferFormRef"
|
|
|
+ :model="transferForm"
|
|
|
+ :rules="transferRules"
|
|
|
+ label-width="140px"
|
|
|
+ >
|
|
|
+ <el-form-item label="企业ID" prop="enterprise_id">
|
|
|
+ <el-input
|
|
|
+ v-model="transferForm.enterprise_id"
|
|
|
+ placeholder="请输入企业ID"
|
|
|
+ :disabled="!!currentEnterpriseId"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="付款专户号" prop="account_book_id">
|
|
|
+ <el-input
|
|
|
+ v-model="transferForm.account_book_id"
|
|
|
+ :placeholder="accountInfo.account_book_id || '请先开通资金专户'"
|
|
|
+ :disabled="!!accountInfo.account_book_id"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="转账金额" prop="amount">
|
|
|
+ <el-input-number
|
|
|
+ v-model="transferForm.amount"
|
|
|
+ :min="0.01"
|
|
|
+ :precision="2"
|
|
|
+ :controls="false"
|
|
|
+ placeholder="请输入转账金额"
|
|
|
+ style="width: 300px"
|
|
|
+ />
|
|
|
+ <span class="ml-2">元</span>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="转账标题" prop="order_title">
|
|
|
+ <el-input v-model="transferForm.order_title" placeholder="请输入转账标题" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="收款方类型" prop="payee_info.identity_type">
|
|
|
+ <el-select v-model="transferForm.payee_info.identity_type" placeholder="请选择收款方类型">
|
|
|
+ <el-option label="支付宝账户" value="alipay" />
|
|
|
+ <el-option label="银行卡" value="bank" />
|
|
|
+ <el-option label="资金专户" value="book" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="收款方姓名" prop="payee_info.name">
|
|
|
+ <el-input v-model="transferForm.payee_info.name" placeholder="请输入收款方姓名" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="收款方账号" prop="payee_info.identity">
|
|
|
+ <el-input v-model="transferForm.payee_info.identity" placeholder="请输入收款方账号" />
|
|
|
+ </el-form-item>
|
|
|
+ <template v-if="transferForm.payee_info.identity_type === 'bank'">
|
|
|
+ <el-form-item label="账户类型" prop="payee_info.bankcard_ext_info.account_type">
|
|
|
+ <el-select v-model="transferForm.payee_info.bankcard_ext_info!.account_type" placeholder="请选择账户类型">
|
|
|
+ <el-option label="对公" value="1" />
|
|
|
+ <el-option label="对私" value="2" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="银行名称" prop="payee_info.bankcard_ext_info.inst_name">
|
|
|
+ <el-input v-model="transferForm.payee_info.bankcard_ext_info!.inst_name" placeholder="请输入银行名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="开户省份" prop="payee_info.bankcard_ext_info.inst_province">
|
|
|
+ <el-input v-model="transferForm.payee_info.bankcard_ext_info!.inst_province" placeholder="请输入开户省份" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="开户城市" prop="payee_info.bankcard_ext_info.inst_city">
|
|
|
+ <el-input v-model="transferForm.payee_info.bankcard_ext_info!.inst_city" placeholder="请输入开户城市" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="支行名称" prop="payee_info.bankcard_ext_info.inst_branch_name">
|
|
|
+ <el-input v-model="transferForm.payee_info.bankcard_ext_info!.inst_branch_name" placeholder="请输入支行名称" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="联行号" prop="payee_info.bankcard_ext_info.bank_code">
|
|
|
+ <el-input v-model="transferForm.payee_info.bankcard_ext_info!.bank_code" placeholder="请输入联行号" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <el-form-item label="备注" prop="remark">
|
|
|
+ <el-input v-model="transferForm.remark" type="textarea" placeholder="请输入备注" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ v-hasPerm="['module_payment:account:transfer']"
|
|
|
+ type="primary"
|
|
|
+ :loading="transferLoading"
|
|
|
+ :disabled="!accountInfo.account_book_id || accountInfo.balance <= 0"
|
|
|
+ @click="handleTransfer"
|
|
|
+ >
|
|
|
+ 发起转账
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="handleTransferReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card class="mt-4">
|
|
|
+ <template #header>
|
|
|
+ <span>转账记录</span>
|
|
|
+ </template>
|
|
|
+ <div class="mb-4">
|
|
|
+ <el-form :inline="true" :model="transferSearchForm">
|
|
|
+ <el-form-item label="订单号">
|
|
|
+ <el-input v-model="transferSearchForm.out_biz_no" placeholder="请输入订单号" clearable />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态">
|
|
|
+ <el-select v-model="transferSearchForm.status" placeholder="请选择状态" clearable>
|
|
|
+ <el-option label="处理中" value="DEALING" />
|
|
|
+ <el-option label="成功" value="SUCCESS" />
|
|
|
+ <el-option label="失败" value="FAIL" />
|
|
|
+ <el-option label="退票" value="REFUND" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" @click="handleTransferSearch">查询</el-button>
|
|
|
+ <el-button @click="handleTransferSearchReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table :data="transferList" border stripe v-loading="transferListLoading">
|
|
|
+ <template #empty>
|
|
|
+ <el-empty description="暂无数据" />
|
|
|
+ </template>
|
|
|
+ <el-table-column prop="out_biz_no" label="订单号" min-width="180" />
|
|
|
+ <el-table-column prop="amount" label="转账金额" min-width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ ¥{{ row.amount }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="payee_info.name" label="收款方姓名" min-width="120" />
|
|
|
+ <el-table-column prop="payee_info.identity_type" label="收款方类型" min-width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ getPayeeTypeLabel(row.payee_info?.identity_type) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="status" label="状态" min-width="100">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-tag :type="getTransferStatusType(row.status)">
|
|
|
+ {{ row.status }}
|
|
|
+ </el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="order_title" label="转账标题" min-width="150" />
|
|
|
+ <el-table-column prop="created_time" label="创建时间" min-width="160" />
|
|
|
+ <el-table-column label="操作" width="100" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button type="primary" link @click="handleViewTransferDetail(row.out_biz_no)">
|
|
|
+ 详情
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="mt-4 flex justify-end">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="transferPage.page_no"
|
|
|
+ v-model:page-size="transferPage.page_size"
|
|
|
+ :total="transferPage.total"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="handleTransferListChange"
|
|
|
+ @current-change="handleTransferListChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+
|
|
|
+ <!-- <el-tab-pane label="账单查询" name="consume">
|
|
|
+ <div class="tab-content">
|
|
|
+ <el-card>
|
|
|
+ <template #header>
|
|
|
+ <span>账单详情查询</span>
|
|
|
+ </template>
|
|
|
+ <el-form ref="consumeFormRef" :model="consumeForm" :rules="consumeRules" label-width="140px">
|
|
|
+ <el-form-item label="支付宝账单号" prop="pay_no">
|
|
|
+ <el-input v-model="consumeForm.pay_no" placeholder="请输入支付宝账单号" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="企业ID" prop="enterprise_id">
|
|
|
+ <el-input
|
|
|
+ v-model="consumeForm.enterprise_id"
|
|
|
+ placeholder="请输入企业ID(2.0接口签约企业必填)"
|
|
|
+ :disabled="!!currentEnterpriseId"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="蚂蚁门店ID" prop="ant_shop_id">
|
|
|
+ <el-input v-model="consumeForm.ant_shop_id" placeholder="请输入蚂蚁门店ID(商户服务商必填)" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="查询选项">
|
|
|
+ <el-checkbox-group v-model="consumeForm.query_options">
|
|
|
+ <el-checkbox label="Refund">退款信息</el-checkbox>
|
|
|
+ <el-checkbox label="Order">订单信息</el-checkbox>
|
|
|
+ <el-checkbox label="Ticket">票据信息</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ v-hasPerm="['module_payment:account:consume:detail']"
|
|
|
+ type="primary"
|
|
|
+ :loading="consumeLoading"
|
|
|
+ @click="handleConsumeQuery"
|
|
|
+ >
|
|
|
+ 查询
|
|
|
+ </el-button>
|
|
|
+ <el-button @click="handleConsumeReset">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </el-card>
|
|
|
+
|
|
|
+ <el-card v-if="consumeDetail" class="mt-4">
|
|
|
+ <template #header>
|
|
|
+ <span>账单详情</span>
|
|
|
+ </template>
|
|
|
+ <ConsumeDetail :data="consumeDetail" />
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane> -->
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <TransferDetail
|
|
|
+ v-model="transferDetailVisible"
|
|
|
+ :out-biz-no="currentTransferOutBizNo"
|
|
|
+ @refresh="handleTransferDetailRefresh"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+defineOptions({
|
|
|
+ name: "Account",
|
|
|
+ inheritAttrs: false,
|
|
|
+});
|
|
|
+
|
|
|
+import { useEnterpriseStore } from "@/store/modules/enterprise.store";
|
|
|
+import AccountAPI from "@/api/module_payment/account";
|
|
|
+import AccountOverview from "./components/AccountOverview.vue";
|
|
|
+import TransferDetail from "./components/TransferDetail.vue";
|
|
|
+import ConsumeDetail from "./components/ConsumeDetail.vue";
|
|
|
+import { ref, reactive, computed, onMounted } from "vue";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+import type { FormInstance, FormRules } from "element-plus";
|
|
|
+
|
|
|
+const enterpriseStore = useEnterpriseStore();
|
|
|
+
|
|
|
+const activeTab = ref("overview");
|
|
|
+const pageLoading = ref(false);
|
|
|
+const loadingText = ref("");
|
|
|
+
|
|
|
+const authorizeLoading = ref(false);
|
|
|
+const createLoading = ref(false);
|
|
|
+const depositLoading = ref(false);
|
|
|
+const transferLoading = ref(false);
|
|
|
+const consumeLoading = ref(false);
|
|
|
+const transferListLoading = ref(false);
|
|
|
+
|
|
|
+const authorizeFormRef = ref<FormInstance>();
|
|
|
+const createFormRef = ref<FormInstance>();
|
|
|
+const depositFormRef = ref<FormInstance>();
|
|
|
+const transferFormRef = ref<FormInstance>();
|
|
|
+const consumeFormRef = ref<FormInstance>();
|
|
|
+const overviewRef = ref<InstanceType<typeof AccountOverview>>();
|
|
|
+
|
|
|
+const currentEnterpriseId = computed(() => enterpriseStore.getCurrentEnterprise?.enterprise_id);
|
|
|
+
|
|
|
+const accountInfo = ref<{
|
|
|
+ account_book_id: string;
|
|
|
+ status: string;
|
|
|
+ balance: number;
|
|
|
+}>({
|
|
|
+ account_book_id: "",
|
|
|
+ status: "",
|
|
|
+ balance: 0,
|
|
|
+});
|
|
|
+
|
|
|
+const authorizeStatus = ref("PENDING");
|
|
|
+
|
|
|
+const authorizeForm = reactive({
|
|
|
+ enterprise_id: "",
|
|
|
+});
|
|
|
+
|
|
|
+const authorizeRules: FormRules = {
|
|
|
+ enterprise_id: [{ required: true, message: "请输入企业ID", trigger: "blur" }],
|
|
|
+};
|
|
|
+
|
|
|
+const authorizeResult = reactive({
|
|
|
+ sign_url: "",
|
|
|
+});
|
|
|
+
|
|
|
+const createForm = reactive({
|
|
|
+ enterprise_id: "",
|
|
|
+ account_type: "ALL",
|
|
|
+ scene: "B2B_TRANS",
|
|
|
+ remark: "",
|
|
|
+});
|
|
|
+
|
|
|
+const createRules: FormRules = {
|
|
|
+ enterprise_id: [{ required: true, message: "请输入企业ID", trigger: "blur" }],
|
|
|
+ account_type: [{ required: true, message: "请选择账户类型", trigger: "change" }],
|
|
|
+ scene: [{ required: true, message: "请选择场景类型", trigger: "change" }],
|
|
|
+};
|
|
|
+
|
|
|
+const createResult = reactive({
|
|
|
+ enterprise_id: "",
|
|
|
+ account_book_id: "",
|
|
|
+});
|
|
|
+
|
|
|
+const depositForm = reactive({
|
|
|
+ enterprise_id: "",
|
|
|
+ account_book_id: "",
|
|
|
+ amount: 0,
|
|
|
+ remark: "",
|
|
|
+});
|
|
|
+
|
|
|
+const depositRules: FormRules = {
|
|
|
+ enterprise_id: [{ required: true, message: "请输入企业ID", trigger: "blur" }],
|
|
|
+ account_book_id: [{ required: true, message: "请输入资金专户号", trigger: "blur" }],
|
|
|
+ amount: [{ required: true, message: "请输入充值金额", trigger: "blur" }],
|
|
|
+};
|
|
|
+
|
|
|
+const depositResult = reactive({
|
|
|
+ url: "",
|
|
|
+});
|
|
|
+
|
|
|
+const depositList = ref<any[]>([]);
|
|
|
+
|
|
|
+const transferForm = reactive({
|
|
|
+ enterprise_id: "",
|
|
|
+ account_book_id: "",
|
|
|
+ amount: 0,
|
|
|
+ order_title: "",
|
|
|
+ remark: "",
|
|
|
+ payee_info: {
|
|
|
+ identity_type: "alipay",
|
|
|
+ name: "",
|
|
|
+ identity: "",
|
|
|
+ bankcard_ext_info: {
|
|
|
+ account_type: "2",
|
|
|
+ inst_name: "",
|
|
|
+ inst_province: "",
|
|
|
+ inst_city: "",
|
|
|
+ inst_branch_name: "",
|
|
|
+ bank_code: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const transferRules: FormRules = {
|
|
|
+ enterprise_id: [{ required: true, message: "请输入企业ID", trigger: "blur" }],
|
|
|
+ account_book_id: [{ required: true, message: "请输入付款专户号", trigger: "blur" }],
|
|
|
+ amount: [{ required: true, message: "请输入转账金额", trigger: "blur" }],
|
|
|
+ "payee_info.identity_type": [{ required: true, message: "请选择收款方类型", trigger: "change" }],
|
|
|
+ "payee_info.name": [{ required: true, message: "请输入收款方姓名", trigger: "blur" }],
|
|
|
+ "payee_info.identity": [{ required: true, message: "请输入收款方账号", trigger: "blur" }],
|
|
|
+};
|
|
|
+
|
|
|
+const transferList = ref<any[]>([]);
|
|
|
+const transferPage = reactive({
|
|
|
+ page_no: 1,
|
|
|
+ page_size: 10,
|
|
|
+ total: 0,
|
|
|
+});
|
|
|
+
|
|
|
+const transferSearchForm = reactive({
|
|
|
+ out_biz_no: "",
|
|
|
+ status: "",
|
|
|
+});
|
|
|
+
|
|
|
+const transferDetailVisible = ref(false);
|
|
|
+const currentTransferOutBizNo = ref("");
|
|
|
+
|
|
|
+const consumeForm = reactive({
|
|
|
+ pay_no: "",
|
|
|
+ enterprise_id: "",
|
|
|
+ ant_shop_id: "",
|
|
|
+ query_options: [] as string[],
|
|
|
+});
|
|
|
+
|
|
|
+const consumeRules: FormRules = {
|
|
|
+ pay_no: [{ required: true, message: "请输入支付宝账单号", trigger: "blur" }],
|
|
|
+};
|
|
|
+
|
|
|
+const consumeDetail = ref<any>(null);
|
|
|
+
|
|
|
+function getDepositStatusType(status: string) {
|
|
|
+ const map: Record<string, any> = {
|
|
|
+ DEALING: "warning",
|
|
|
+ SUCCESS: "success",
|
|
|
+ FAIL: "danger",
|
|
|
+ };
|
|
|
+ return map[status] || "info";
|
|
|
+}
|
|
|
+
|
|
|
+function getTransferStatusType(status: string) {
|
|
|
+ const map: Record<string, any> = {
|
|
|
+ DEALING: "warning",
|
|
|
+ SUCCESS: "success",
|
|
|
+ FAIL: "danger",
|
|
|
+ REFUND: "warning",
|
|
|
+ };
|
|
|
+ return map[status] || "info";
|
|
|
+}
|
|
|
+
|
|
|
+function getPayeeTypeLabel(type: string) {
|
|
|
+ const map: Record<string, string> = {
|
|
|
+ ALIPAY_ACCOUNT: "支付宝",
|
|
|
+ BANK_CARD: "银行卡",
|
|
|
+ BOOK: "资金专户",
|
|
|
+ };
|
|
|
+ return map[type] || type;
|
|
|
+}
|
|
|
+
|
|
|
+async function handleAuthorize() {
|
|
|
+ if (!authorizeFormRef.value) return;
|
|
|
+ await authorizeFormRef.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ authorizeLoading.value = true;
|
|
|
+ try {
|
|
|
+ const res = await AccountAPI.authorizeApply({
|
|
|
+ enterprise_id: authorizeForm.enterprise_id || currentEnterpriseId.value!,
|
|
|
+ });
|
|
|
+ authorizeResult.sign_url = res.data.sign_url || "";
|
|
|
+ } finally {
|
|
|
+ authorizeLoading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function handleAuthorizeReset() {
|
|
|
+ authorizeFormRef.value?.resetFields();
|
|
|
+ authorizeResult.sign_url = "";
|
|
|
+}
|
|
|
+
|
|
|
+async function handleCreate() {
|
|
|
+ if (!createFormRef.value) return;
|
|
|
+ await createFormRef.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (authorizeStatus.value !== "AUTHORIZED") {
|
|
|
+ ElMessage.warning("请先完成转账授权签约");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ createLoading.value = true;
|
|
|
+ try {
|
|
|
+ const res = await AccountAPI.create({
|
|
|
+ enterprise_id: createForm.enterprise_id || currentEnterpriseId.value!,
|
|
|
+ account_type: createForm.account_type,
|
|
|
+ scene: createForm.scene,
|
|
|
+ remark: createForm.remark,
|
|
|
+ });
|
|
|
+ createResult.enterprise_id = res.data.enterprise_id || "";
|
|
|
+ createResult.account_book_id = res.data.account_book_id || "";
|
|
|
+ accountInfo.value.account_book_id = createResult.account_book_id;
|
|
|
+ accountInfo.value.status = "ACTIVE";
|
|
|
+ overviewRef.value?.refresh();
|
|
|
+ } finally {
|
|
|
+ createLoading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function handleCreateReset() {
|
|
|
+ createFormRef.value?.resetFields();
|
|
|
+ createResult.enterprise_id = "";
|
|
|
+ createResult.account_book_id = "";
|
|
|
+}
|
|
|
+
|
|
|
+async function handleDeposit() {
|
|
|
+ if (!depositFormRef.value) return;
|
|
|
+ await depositFormRef.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (!accountInfo.value.account_book_id) {
|
|
|
+ ElMessage.warning("请先开通资金专户");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ depositLoading.value = true;
|
|
|
+ try {
|
|
|
+ const res = await AccountAPI.deposit({
|
|
|
+ enterprise_id: depositForm.enterprise_id || currentEnterpriseId.value!,
|
|
|
+ account_book_id: depositForm.account_book_id || accountInfo.value.account_book_id,
|
|
|
+ amount: depositForm.amount,
|
|
|
+ remark: depositForm.remark,
|
|
|
+ });
|
|
|
+ depositResult.url = res.data.url || "";
|
|
|
+ } finally {
|
|
|
+ depositLoading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function handleDepositReset() {
|
|
|
+ depositFormRef.value?.resetFields();
|
|
|
+ depositResult.url = "";
|
|
|
+}
|
|
|
+
|
|
|
+async function handleTransfer() {
|
|
|
+ if (!transferFormRef.value) return;
|
|
|
+ await transferFormRef.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (accountInfo.value.balance <= 0) {
|
|
|
+ ElMessage.warning("账户余额不足,请先充值");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ transferLoading.value = true;
|
|
|
+ try {
|
|
|
+ await AccountAPI.transfer({
|
|
|
+ enterprise_id: transferForm.enterprise_id || currentEnterpriseId.value!,
|
|
|
+ account_book_id: transferForm.account_book_id || accountInfo.value.account_book_id,
|
|
|
+ amount: transferForm.amount,
|
|
|
+ order_title: transferForm.order_title,
|
|
|
+ remark: transferForm.remark,
|
|
|
+ payee_info: {
|
|
|
+ identity_type: transferForm.payee_info.identity_type,
|
|
|
+ name: transferForm.payee_info.name,
|
|
|
+ identity: transferForm.payee_info.identity,
|
|
|
+ bankcard_ext_info:
|
|
|
+ transferForm.payee_info.identity_type === "bank"
|
|
|
+ ? transferForm.payee_info.bankcard_ext_info
|
|
|
+ : undefined,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ ElMessage.success("转账申请已提交");
|
|
|
+ handleTransferListChange();
|
|
|
+ handleTransferReset();
|
|
|
+ } finally {
|
|
|
+ transferLoading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function handleTransferReset() {
|
|
|
+ transferFormRef.value?.resetFields();
|
|
|
+ transferForm.payee_info = {
|
|
|
+ identity_type: "alipay",
|
|
|
+ name: "",
|
|
|
+ identity: "",
|
|
|
+ bankcard_ext_info: {
|
|
|
+ account_type: "2",
|
|
|
+ inst_name: "",
|
|
|
+ inst_province: "",
|
|
|
+ inst_city: "",
|
|
|
+ inst_branch_name: "",
|
|
|
+ bank_code: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+async function handleTransferSearch() {
|
|
|
+ transferPage.page_no = 1;
|
|
|
+ await fetchTransferList();
|
|
|
+}
|
|
|
+
|
|
|
+function handleTransferSearchReset() {
|
|
|
+ transferSearchForm.out_biz_no = "";
|
|
|
+ transferSearchForm.status = "";
|
|
|
+ handleTransferSearch();
|
|
|
+}
|
|
|
+
|
|
|
+async function fetchTransferList() {
|
|
|
+ transferListLoading.value = true;
|
|
|
+ try {
|
|
|
+ const res = await AccountAPI.transferList({
|
|
|
+ page_no: transferPage.page_no,
|
|
|
+ page_size: transferPage.page_size,
|
|
|
+ out_biz_no: transferSearchForm.out_biz_no || undefined,
|
|
|
+ status: transferSearchForm.status || undefined,
|
|
|
+ });
|
|
|
+ transferList.value = res.data.data.items || [];
|
|
|
+ transferPage.total = res.data.data.total || 0;
|
|
|
+ } finally {
|
|
|
+ transferListLoading.value = false;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function handleTransferListChange() {
|
|
|
+ fetchTransferList();
|
|
|
+}
|
|
|
+
|
|
|
+function handleViewTransferDetail(outBizNo: string) {
|
|
|
+ currentTransferOutBizNo.value = outBizNo;
|
|
|
+ transferDetailVisible.value = true;
|
|
|
+}
|
|
|
+
|
|
|
+function handleTransferDetailRefresh() {
|
|
|
+ fetchTransferList();
|
|
|
+}
|
|
|
+
|
|
|
+async function handleConsumeQuery() {
|
|
|
+ if (!consumeFormRef.value) return;
|
|
|
+ await consumeFormRef.value.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ consumeLoading.value = true;
|
|
|
+ try {
|
|
|
+ const res = await AccountAPI.consumeDetail({
|
|
|
+ pay_no: consumeForm.pay_no,
|
|
|
+ enterprise_id: consumeForm.enterprise_id || currentEnterpriseId.value || undefined,
|
|
|
+ ant_shop_id: consumeForm.ant_shop_id || undefined,
|
|
|
+ query_options: consumeForm.query_options.length > 0 ? consumeForm.query_options : undefined,
|
|
|
+ });
|
|
|
+ consumeDetail.value = res.data;
|
|
|
+ } finally {
|
|
|
+ consumeLoading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function handleConsumeReset() {
|
|
|
+ consumeFormRef.value?.resetFields();
|
|
|
+ consumeDetail.value = null;
|
|
|
+}
|
|
|
+
|
|
|
+function handleOverviewRefresh(data: any) {
|
|
|
+ if (data) {
|
|
|
+ accountInfo.value = {
|
|
|
+ account_book_id: data.account_book_id || "",
|
|
|
+ status: data.status || "",
|
|
|
+ balance: data.balance || 0,
|
|
|
+ };
|
|
|
+ authorizeStatus.value = data.authorize_status || "PENDING";
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ if (currentEnterpriseId.value) {
|
|
|
+ authorizeForm.enterprise_id = currentEnterpriseId.value;
|
|
|
+ createForm.enterprise_id = currentEnterpriseId.value;
|
|
|
+ depositForm.enterprise_id = currentEnterpriseId.value;
|
|
|
+ transferForm.enterprise_id = currentEnterpriseId.value;
|
|
|
+ consumeForm.enterprise_id = currentEnterpriseId.value;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+watch(activeTab, async (newValue) => {
|
|
|
+ if (newValue === "transfer") {
|
|
|
+ await handleTransferSearch();
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.account-tabs {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ :deep(.el-tabs__content) {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tab-content {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.card-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.mt-4 {
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.ml-2 {
|
|
|
+ margin-left: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.mb-4 {
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.flex {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.justify-end {
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.authorize-result,
|
|
|
+.create-result,
|
|
|
+.deposit-result {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+</style>
|