feat: 结算管理3个页面的样式
This commit is contained in:
parent
446dcf9579
commit
60ecd8015d
|
|
@ -464,6 +464,59 @@ export default {
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: '结算管理',
|
||||
url: 'settle',
|
||||
perms: 'settle',
|
||||
type: 0,
|
||||
elIcon: 'el-icon-office-building',
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: [
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: '待结算管理',
|
||||
url: 'settle/unsettle',
|
||||
perms: 'settle:unsettle',
|
||||
type: 1,
|
||||
elIcon: 'el-icon-document-checked',
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: []
|
||||
},
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: '金额管理',
|
||||
url: 'settle/money',
|
||||
perms: 'settle:money',
|
||||
type: 1,
|
||||
elIcon: 'el-icon-coin',
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: []
|
||||
},
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
parentName: null,
|
||||
name: '钱包管理',
|
||||
url: 'settle/wallet',
|
||||
perms: 'settle:wallet',
|
||||
type: 1,
|
||||
elIcon: 'el-icon-wallet',
|
||||
orderNum: 0,
|
||||
open: null,
|
||||
list: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
menuId: getUUID(),
|
||||
parentId: 0,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,808 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<!-- 统计数据区域 -->
|
||||
<el-row :gutter="16" class="stats-row">
|
||||
<el-col :span="8">
|
||||
<el-card class="stat-card" shadow="hover">
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">冻结金额</div>
|
||||
<div class="stat-value stat-frozen">
|
||||
¥ {{ statsInfo.frozenAmount.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="stat-card" shadow="hover">
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">可用金额</div>
|
||||
<div class="stat-value stat-available">
|
||||
¥ {{ statsInfo.availableAmount.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="stat-card" shadow="hover">
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">钱包余额</div>
|
||||
<div class="stat-value stat-balance">
|
||||
¥ {{ statsInfo.walletBalance.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 标签页区域 -->
|
||||
<el-card class="tabs-card" shadow="never">
|
||||
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
||||
<!-- 收入Tab -->
|
||||
<el-tab-pane label="收入" name="income">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-section">
|
||||
<el-form
|
||||
:model="incomeSearchForm"
|
||||
:inline="true"
|
||||
ref="incomeSearchForm"
|
||||
class="search-form"
|
||||
size="small"
|
||||
>
|
||||
<el-form-item label="订单ID" prop="orderId">
|
||||
<el-input
|
||||
v-model="incomeSearchForm.orderId"
|
||||
placeholder="请输入订单ID"
|
||||
clearable
|
||||
@clear="handleIncomeSearchClear"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="订单时间" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="incomeSearchForm.dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 340px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleIncomeSearch"
|
||||
icon="el-icon-search"
|
||||
size="small"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleIncomeReset"
|
||||
icon="el-icon-refresh"
|
||||
size="small"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<el-table
|
||||
ref="incomeTable"
|
||||
:data="incomeDataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="incomeLoading"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="60"
|
||||
align="center"
|
||||
label="序号"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="orderId"
|
||||
label="订单ID"
|
||||
align="center"
|
||||
min-width="150"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="orderAmount"
|
||||
label="订单金额"
|
||||
align="center"
|
||||
width="130"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="font-weight: 600">
|
||||
¥{{ scope.row.orderAmount.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="orderTime"
|
||||
label="订单时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="incomeAmount"
|
||||
label="收入金额"
|
||||
align="center"
|
||||
width="130"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #52c41a; font-weight: 600">
|
||||
+ ¥{{ scope.row.incomeAmount.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@size-change="handleIncomeSizeChange"
|
||||
@current-change="handleIncomeCurrentChange"
|
||||
:current-page="incomePageInfo.pageNumber"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="incomePageInfo.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="incomePageInfo.total"
|
||||
class="pagination-container"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 支出Tab -->
|
||||
<el-tab-pane label="支出" name="expense">
|
||||
<!-- 搜索区域 -->
|
||||
<div class="search-section">
|
||||
<el-form
|
||||
:model="expenseSearchForm"
|
||||
:inline="true"
|
||||
ref="expenseSearchForm"
|
||||
class="search-form"
|
||||
size="small"
|
||||
>
|
||||
<el-form-item label="结算明细ID" prop="settlementId">
|
||||
<el-input
|
||||
v-model="expenseSearchForm.settlementId"
|
||||
placeholder="请输入结算明细ID"
|
||||
clearable
|
||||
@clear="handleExpenseSearchClear"
|
||||
style="width: 180px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="清算明细ID" prop="clearingId">
|
||||
<el-input
|
||||
v-model="expenseSearchForm.clearingId"
|
||||
placeholder="请输入清算明细ID"
|
||||
clearable
|
||||
@clear="handleExpenseSearchClear"
|
||||
style="width: 180px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="支出对象ID" prop="targetId">
|
||||
<el-input
|
||||
v-model="expenseSearchForm.targetId"
|
||||
placeholder="请输入支出对象ID"
|
||||
clearable
|
||||
@clear="handleExpenseSearchClear"
|
||||
style="width: 180px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="支出时间" prop="dateRange">
|
||||
<el-date-picker
|
||||
v-model="expenseSearchForm.dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 340px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleExpenseSearch"
|
||||
icon="el-icon-search"
|
||||
size="small"
|
||||
>
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleExpenseReset"
|
||||
icon="el-icon-refresh"
|
||||
size="small"
|
||||
>
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<el-table
|
||||
ref="expenseTable"
|
||||
:data="expenseDataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="expenseLoading"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="60"
|
||||
align="center"
|
||||
label="序号"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="settlementId"
|
||||
label="结算明细ID"
|
||||
align="center"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="clearingId"
|
||||
label="清算明细ID"
|
||||
align="center"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="settlementAmount"
|
||||
label="结算金额"
|
||||
align="center"
|
||||
width="130"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #ff4d4f; font-weight: 600">
|
||||
- ¥{{ scope.row.settlementAmount.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="settlementTime"
|
||||
label="结算时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="targetId"
|
||||
label="支出对象ID"
|
||||
align="center"
|
||||
min-width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="targetRole"
|
||||
label="支出对象角色"
|
||||
align="center"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="expenseTime"
|
||||
label="支出时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
/>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@size-change="handleExpenseSizeChange"
|
||||
@current-change="handleExpenseCurrentChange"
|
||||
:current-page="expensePageInfo.pageNumber"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="expensePageInfo.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="expensePageInfo.total"
|
||||
class="pagination-container"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "MoneyManagement",
|
||||
data() {
|
||||
return {
|
||||
// 当前激活的标签页
|
||||
activeTab: "income",
|
||||
// 统计信息
|
||||
statsInfo: {
|
||||
frozenAmount: 5280.0,
|
||||
availableAmount: 23450.5,
|
||||
walletBalance: 28730.5
|
||||
},
|
||||
// 收入搜索表单
|
||||
incomeSearchForm: {
|
||||
orderId: "",
|
||||
dateRange: null
|
||||
},
|
||||
// 收入表格数据
|
||||
incomeDataList: [],
|
||||
// 收入分页信息
|
||||
incomePageInfo: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
// 收入加载状态
|
||||
incomeLoading: false,
|
||||
// 支出搜索表单
|
||||
expenseSearchForm: {
|
||||
settlementId: "",
|
||||
clearingId: "",
|
||||
targetId: "",
|
||||
dateRange: null
|
||||
},
|
||||
// 支出表格数据
|
||||
expenseDataList: [],
|
||||
// 支出分页信息
|
||||
expensePageInfo: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
// 支出加载状态
|
||||
expenseLoading: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchStatsInfo();
|
||||
this.fetchIncomeData();
|
||||
},
|
||||
methods: {
|
||||
// 获取统计信息
|
||||
async fetchStatsInfo() {
|
||||
try {
|
||||
// TODO: 调用实际的API接口获取统计信息
|
||||
// const res = await this.$api.mer_admin.getMoneyStats();
|
||||
// this.statsInfo = res.data.data;
|
||||
|
||||
// 模拟数据
|
||||
this.statsInfo = {
|
||||
frozenAmount: 5280.0,
|
||||
availableAmount: 23450.5,
|
||||
walletBalance: 28730.5
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("获取统计信息失败:", error);
|
||||
this.$message.error("获取统计信息失败");
|
||||
}
|
||||
},
|
||||
|
||||
// 标签页切换
|
||||
handleTabClick(tab) {
|
||||
if (tab.name === "income") {
|
||||
this.fetchIncomeData();
|
||||
} else if (tab.name === "expense") {
|
||||
this.fetchExpenseData();
|
||||
}
|
||||
},
|
||||
|
||||
// ==================== 收入相关方法 ====================
|
||||
|
||||
// 获取收入数据
|
||||
fetchIncomeData() {
|
||||
this.incomeLoading = true;
|
||||
const marketId = this.marketId;
|
||||
if (!marketId) {
|
||||
this.$message.error("获取市场ID失败，请重新登录");
|
||||
this.$router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
pageNumber: this.incomePageInfo.pageNumber,
|
||||
pageSize: this.incomePageInfo.pageSize,
|
||||
marketId,
|
||||
...this.buildIncomeSearchParams()
|
||||
};
|
||||
|
||||
// TODO: 调用实际的API接口获取收入列表
|
||||
// this.$api.mer_admin
|
||||
// .getIncomeList(params)
|
||||
// .then(res => {
|
||||
// if (res.data && res.data.data) {
|
||||
// this.incomeDataList = res.data.data.data || [];
|
||||
// this.incomePageInfo.total = Number(res.data.data.total) || 0;
|
||||
// }
|
||||
// })
|
||||
// .catch(err => {
|
||||
// console.error("获取收入数据失败:", err);
|
||||
// this.$message.error("获取收入数据失败");
|
||||
// })
|
||||
// .finally(() => {
|
||||
// this.incomeLoading = false;
|
||||
// });
|
||||
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
const mockData = [
|
||||
{
|
||||
orderId: "ORD202501310001",
|
||||
orderAmount: 1280.0,
|
||||
orderTime: "2025-01-31 10:30:25",
|
||||
incomeAmount: 1280.0
|
||||
},
|
||||
{
|
||||
orderId: "ORD202501310002",
|
||||
orderAmount: 850.5,
|
||||
orderTime: "2025-01-31 11:15:42",
|
||||
incomeAmount: 850.5
|
||||
},
|
||||
{
|
||||
orderId: "ORD202501310003",
|
||||
orderAmount: 2100.0,
|
||||
orderTime: "2025-01-31 14:20:18",
|
||||
incomeAmount: 2100.0
|
||||
},
|
||||
{
|
||||
orderId: "ORD202501300001",
|
||||
orderAmount: 560.0,
|
||||
orderTime: "2025-01-30 09:45:33",
|
||||
incomeAmount: 560.0
|
||||
},
|
||||
{
|
||||
orderId: "ORD202501300002",
|
||||
orderAmount: 1450.0,
|
||||
orderTime: "2025-01-30 16:28:56",
|
||||
incomeAmount: 1450.0
|
||||
}
|
||||
];
|
||||
|
||||
// 应用搜索过滤
|
||||
let filteredData = mockData;
|
||||
const searchParams = this.buildIncomeSearchParams();
|
||||
if (searchParams.orderId) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
item.orderId.includes(searchParams.orderId)
|
||||
);
|
||||
}
|
||||
|
||||
this.incomeDataList = filteredData;
|
||||
this.incomePageInfo.total = 127; // 模拟总数
|
||||
this.incomeLoading = false;
|
||||
}, 500);
|
||||
},
|
||||
|
||||
// 构建收入搜索参数
|
||||
buildIncomeSearchParams() {
|
||||
const params = {};
|
||||
if (this.incomeSearchForm.orderId) {
|
||||
params.orderId = this.incomeSearchForm.orderId;
|
||||
}
|
||||
if (
|
||||
this.incomeSearchForm.dateRange &&
|
||||
this.incomeSearchForm.dateRange.length === 2
|
||||
) {
|
||||
params.startDate = this.incomeSearchForm.dateRange[0];
|
||||
params.endDate = this.incomeSearchForm.dateRange[1];
|
||||
}
|
||||
return params;
|
||||
},
|
||||
|
||||
// 收入搜索
|
||||
handleIncomeSearch() {
|
||||
this.incomePageInfo.pageNumber = 1;
|
||||
this.fetchIncomeData();
|
||||
},
|
||||
|
||||
// 收入清除搜索
|
||||
handleIncomeSearchClear() {
|
||||
this.handleIncomeSearch();
|
||||
},
|
||||
|
||||
// 收入重置
|
||||
handleIncomeReset() {
|
||||
this.incomeSearchForm = {
|
||||
orderId: "",
|
||||
dateRange: null
|
||||
};
|
||||
this.incomePageInfo.pageNumber = 1;
|
||||
this.fetchIncomeData();
|
||||
},
|
||||
|
||||
// 收入分页大小改变
|
||||
handleIncomeSizeChange(val) {
|
||||
this.incomePageInfo.pageSize = val;
|
||||
this.incomePageInfo.pageNumber = 1;
|
||||
this.fetchIncomeData();
|
||||
},
|
||||
|
||||
// 收入当前页改变
|
||||
handleIncomeCurrentChange(val) {
|
||||
this.incomePageInfo.pageNumber = val;
|
||||
this.fetchIncomeData();
|
||||
},
|
||||
|
||||
// ==================== 支出相关方法 ====================
|
||||
|
||||
// 获取支出数据
|
||||
fetchExpenseData() {
|
||||
this.expenseLoading = true;
|
||||
const marketId = this.marketId;
|
||||
if (!marketId) {
|
||||
this.$message.error("获取市场ID失败，请重新登录");
|
||||
this.$router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
pageNumber: this.expensePageInfo.pageNumber,
|
||||
pageSize: this.expensePageInfo.pageSize,
|
||||
marketId,
|
||||
...this.buildExpenseSearchParams()
|
||||
};
|
||||
|
||||
// TODO: 调用实际的API接口获取支出列表
|
||||
// this.$api.mer_admin
|
||||
// .getExpenseList(params)
|
||||
// .then(res => {
|
||||
// if (res.data && res.data.data) {
|
||||
// this.expenseDataList = res.data.data.data || [];
|
||||
// this.expensePageInfo.total = Number(res.data.data.total) || 0;
|
||||
// }
|
||||
// })
|
||||
// .catch(err => {
|
||||
// console.error("获取支出数据失败:", err);
|
||||
// this.$message.error("获取支出数据失败");
|
||||
// })
|
||||
// .finally(() => {
|
||||
// this.expenseLoading = false;
|
||||
// });
|
||||
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
const mockData = [
|
||||
{
|
||||
settlementId: "SET202501310001",
|
||||
clearingId: "CLR202501310001",
|
||||
settlementAmount: 320.0,
|
||||
settlementTime: "2025-01-31 15:30:20",
|
||||
targetId: "SUP100256",
|
||||
targetRole: "供应商",
|
||||
expenseTime: "2025-01-31 15:30:25"
|
||||
},
|
||||
{
|
||||
settlementId: "SET202501310002",
|
||||
clearingId: "CLR202501310002",
|
||||
settlementAmount: 580.5,
|
||||
settlementTime: "2025-01-31 16:15:35",
|
||||
targetId: "DRV100128",
|
||||
targetRole: "配送员",
|
||||
expenseTime: "2025-01-31 16:15:40"
|
||||
},
|
||||
{
|
||||
settlementId: "SET202501310003",
|
||||
clearingId: "CLR202501310003",
|
||||
settlementAmount: 1200.0,
|
||||
settlementTime: "2025-01-31 17:20:18",
|
||||
targetId: "SUP100328",
|
||||
targetRole: "供应商",
|
||||
expenseTime: "2025-01-31 17:20:22"
|
||||
},
|
||||
{
|
||||
settlementId: "SET202501300001",
|
||||
clearingId: "CLR202501300001",
|
||||
settlementAmount: 450.0,
|
||||
settlementTime: "2025-01-30 10:45:33",
|
||||
targetId: "PLT100045",
|
||||
targetRole: "平台",
|
||||
expenseTime: "2025-01-30 10:45:38"
|
||||
},
|
||||
{
|
||||
settlementId: "SET202501300002",
|
||||
clearingId: "CLR202501300002",
|
||||
settlementAmount: 280.0,
|
||||
settlementTime: "2025-01-30 14:28:56",
|
||||
targetId: "DRV100089",
|
||||
targetRole: "配送员",
|
||||
expenseTime: "2025-01-30 14:29:00"
|
||||
}
|
||||
];
|
||||
|
||||
// 应用搜索过滤
|
||||
let filteredData = mockData;
|
||||
const searchParams = this.buildExpenseSearchParams();
|
||||
if (searchParams.settlementId) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
item.settlementId.includes(searchParams.settlementId)
|
||||
);
|
||||
}
|
||||
if (searchParams.clearingId) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
item.clearingId.includes(searchParams.clearingId)
|
||||
);
|
||||
}
|
||||
if (searchParams.targetId) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
item.targetId.includes(searchParams.targetId)
|
||||
);
|
||||
}
|
||||
|
||||
this.expenseDataList = filteredData;
|
||||
this.expensePageInfo.total = 85; // 模拟总数
|
||||
this.expenseLoading = false;
|
||||
}, 500);
|
||||
},
|
||||
|
||||
// 构建支出搜索参数
|
||||
buildExpenseSearchParams() {
|
||||
const params = {};
|
||||
if (this.expenseSearchForm.settlementId) {
|
||||
params.settlementId = this.expenseSearchForm.settlementId;
|
||||
}
|
||||
if (this.expenseSearchForm.clearingId) {
|
||||
params.clearingId = this.expenseSearchForm.clearingId;
|
||||
}
|
||||
if (this.expenseSearchForm.targetId) {
|
||||
params.targetId = this.expenseSearchForm.targetId;
|
||||
}
|
||||
if (
|
||||
this.expenseSearchForm.dateRange &&
|
||||
this.expenseSearchForm.dateRange.length === 2
|
||||
) {
|
||||
params.startDate = this.expenseSearchForm.dateRange[0];
|
||||
params.endDate = this.expenseSearchForm.dateRange[1];
|
||||
}
|
||||
return params;
|
||||
},
|
||||
|
||||
// 支出搜索
|
||||
handleExpenseSearch() {
|
||||
this.expensePageInfo.pageNumber = 1;
|
||||
this.fetchExpenseData();
|
||||
},
|
||||
|
||||
// 支出清除搜索
|
||||
handleExpenseSearchClear() {
|
||||
this.handleExpenseSearch();
|
||||
},
|
||||
|
||||
// 支出重置
|
||||
handleExpenseReset() {
|
||||
this.expenseSearchForm = {
|
||||
settlementId: "",
|
||||
clearingId: "",
|
||||
targetId: "",
|
||||
dateRange: null
|
||||
};
|
||||
this.expensePageInfo.pageNumber = 1;
|
||||
this.fetchExpenseData();
|
||||
},
|
||||
|
||||
// 支出分页大小改变
|
||||
handleExpenseSizeChange(val) {
|
||||
this.expensePageInfo.pageSize = val;
|
||||
this.expensePageInfo.pageNumber = 1;
|
||||
this.fetchExpenseData();
|
||||
},
|
||||
|
||||
// 支出当前页改变
|
||||
handleExpenseCurrentChange(val) {
|
||||
this.expensePageInfo.pageNumber = val;
|
||||
this.fetchExpenseData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 获取当前市场的ID
|
||||
marketId() {
|
||||
return this.$store.state.userData.marketId;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 统计数据区域
|
||||
.stats-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
|
||||
&.stat-frozen {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
&.stat-available {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.stat-balance {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
// 标签页卡片
|
||||
.tabs-card {
|
||||
border-radius: 8px;
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__header {
|
||||
margin: 0;
|
||||
padding: 0 24px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索区域
|
||||
.search-section {
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.search-form .el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// 表格区域
|
||||
::v-deep .el-table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// 分页
|
||||
.pagination-container {
|
||||
padding: 20px 24px;
|
||||
text-align: right;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.search-form .el-form-item__label {
|
||||
padding-bottom: 0px !important;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,594 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<!-- 资金概览卡片 -->
|
||||
<el-row :gutter="16" class="info-cards-row">
|
||||
<el-col :span="8">
|
||||
<el-card class="info-card info-card-purple" shadow="hover">
|
||||
<div class="info-card-content">
|
||||
<div class="info-card-label">当前冻结金额</div>
|
||||
<div class="info-card-value">
|
||||
<span>{{ accountInfo.totalAmount.toFixed(2) }}</span>
|
||||
<span class="info-card-unit">元</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="info-card info-card-pink" shadow="hover">
|
||||
<div class="info-card-content">
|
||||
<div class="info-card-label">当前可用金额</div>
|
||||
<div class="info-card-value">
|
||||
<span>{{ accountInfo.availableAmount.toFixed(2) }}</span>
|
||||
<span class="info-card-unit">元</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-card class="info-card info-card-blue" shadow="hover">
|
||||
<div class="info-card-content">
|
||||
<div class="info-card-label">当前钱包余额</div>
|
||||
<div class="info-card-value">
|
||||
<span>{{ accountInfo.walletBalance.toFixed(2) }}</span>
|
||||
<span class="info-card-unit">元</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 搜索区域 -->
|
||||
<el-card class="search-card" shadow="never">
|
||||
<el-form
|
||||
:model="searchForm"
|
||||
:inline="true"
|
||||
ref="searchForm"
|
||||
class="search-form"
|
||||
size="small"
|
||||
>
|
||||
<el-form-item label="待结算明细ID" prop="settlementId">
|
||||
<el-input
|
||||
v-model="searchForm.settlementId"
|
||||
placeholder="请输入待结算明细ID"
|
||||
clearable
|
||||
@clear="handleSearchClear"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="关联清算明细ID" prop="clearingId">
|
||||
<el-input
|
||||
v-model="searchForm.clearingId"
|
||||
placeholder="请输入关联清算明细ID"
|
||||
clearable
|
||||
@clear="handleSearchClear"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="结算目标对象ID" prop="targetId">
|
||||
<el-input
|
||||
v-model="searchForm.targetId"
|
||||
placeholder="请输入结算目标对象ID"
|
||||
clearable
|
||||
@clear="handleSearchClear"
|
||||
style="width: 200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSearch"
|
||||
icon="el-icon-search"
|
||||
size="small"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
<el-button @click="handleReset" icon="el-icon-refresh" size="small">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleRefreshAccount"
|
||||
icon="el-icon-refresh-right"
|
||||
size="small"
|
||||
:loading="refreshLoading"
|
||||
>
|
||||
刷新账户信息
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- 表格区域 -->
|
||||
<div class="table-container">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="dataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column type="index" width="60" align="center" label="序号" />
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="待结算明细ID"
|
||||
align="center"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="clearingId"
|
||||
label="关联清算明细ID"
|
||||
align="center"
|
||||
min-width="150"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="targetId"
|
||||
label="结算目标对象ID"
|
||||
align="center"
|
||||
min-width="140"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="targetRole"
|
||||
label="结算目标角色"
|
||||
align="center"
|
||||
width="120"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="amount"
|
||||
label="结算金额(元)"
|
||||
align="center"
|
||||
width="130"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #f56c6c; font-weight: 600">
|
||||
¥{{ scope.row.amount.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="clearingTime"
|
||||
label="清算时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
/>
|
||||
<el-table-column label="结算状态" align="center" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.status === 'pending'"
|
||||
type="warning"
|
||||
size="small"
|
||||
>
|
||||
未结算
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-else-if="scope.row.status === 'processing'"
|
||||
type="primary"
|
||||
size="small"
|
||||
>
|
||||
执行中
|
||||
</el-tag>
|
||||
<el-tag v-else type="success" size="small">已完成</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" fixed="right" align="center" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.status === 'pending'"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="handleSettlement(scope.row, false)"
|
||||
>
|
||||
开始结算
|
||||
</el-button>
|
||||
<el-button
|
||||
v-else-if="scope.row.status === 'processing'"
|
||||
size="mini"
|
||||
type="warning"
|
||||
@click="handleSettlement(scope.row, true)"
|
||||
>
|
||||
重新执行
|
||||
</el-button>
|
||||
<span v-else style="color: #909399">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageInfo.pageNumber"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageInfo.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pageInfo.total"
|
||||
class="pagination-container"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UnsettleManagement",
|
||||
data() {
|
||||
return {
|
||||
// 账户信息
|
||||
accountInfo: {
|
||||
totalAmount: 0,
|
||||
availableAmount: 0,
|
||||
walletBalance: 0
|
||||
},
|
||||
// 搜索表单
|
||||
searchForm: {
|
||||
settlementId: "",
|
||||
clearingId: "",
|
||||
targetId: ""
|
||||
},
|
||||
// 表格数据
|
||||
dataList: [],
|
||||
// 分页信息
|
||||
pageInfo: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
// 加载状态
|
||||
loading: false,
|
||||
refreshLoading: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchAccountInfo();
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
// 获取账户信息
|
||||
async fetchAccountInfo() {
|
||||
try {
|
||||
// TODO: 调用实际的API接口获取账户信息
|
||||
// const res = await this.$api.mer_admin.getAccountInfo();
|
||||
// this.accountInfo = res.data.data;
|
||||
|
||||
// 模拟数据
|
||||
this.accountInfo = {
|
||||
totalAmount: 8770.5,
|
||||
availableAmount: 6420.25,
|
||||
walletBalance: 15230.75
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("获取账户信息失败:", error);
|
||||
this.$message.error("获取账户信息失败");
|
||||
}
|
||||
},
|
||||
|
||||
// 刷新账户信息
|
||||
async handleRefreshAccount() {
|
||||
this.refreshLoading = true;
|
||||
try {
|
||||
await this.fetchAccountInfo();
|
||||
this.$message.success("刷新成功");
|
||||
} catch (error) {
|
||||
console.error("刷新失败:", error);
|
||||
} finally {
|
||||
this.refreshLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 获取待结算列表数据
|
||||
fetchData() {
|
||||
this.loading = true;
|
||||
const marketId = this.marketId;
|
||||
if (!marketId) {
|
||||
this.$message.error("获取市场ID失败，请重新登录");
|
||||
this.$router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
pageNumber: this.pageInfo.pageNumber,
|
||||
pageSize: this.pageInfo.pageSize,
|
||||
marketId,
|
||||
...this.buildSearchParams()
|
||||
};
|
||||
|
||||
// TODO: 调用实际的API接口获取待结算列表
|
||||
// this.$api.mer_admin
|
||||
// .getUnsettleList(params)
|
||||
// .then(res => {
|
||||
// if (res.data && res.data.data) {
|
||||
// this.dataList = res.data.data.data || [];
|
||||
// this.pageInfo.total = Number(res.data.data.total) || 0;
|
||||
// }
|
||||
// })
|
||||
// .catch(err => {
|
||||
// console.error("获取数据失败:", err);
|
||||
// this.$message.error("获取数据失败");
|
||||
// })
|
||||
// .finally(() => {
|
||||
// this.loading = false;
|
||||
// });
|
||||
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
const mockData = [
|
||||
{
|
||||
id: "SET2024010001",
|
||||
clearingId: "CLR2024010001",
|
||||
targetId: "TGT001",
|
||||
targetRole: "商家",
|
||||
amount: 1580.5,
|
||||
clearingTime: "2024-01-15 14:30:25",
|
||||
status: "pending"
|
||||
},
|
||||
{
|
||||
id: "SET2024010002",
|
||||
clearingId: "CLR2024010002",
|
||||
targetId: "TGT002",
|
||||
targetRole: "供应商",
|
||||
amount: 2350.0,
|
||||
clearingTime: "2024-01-15 15:20:10",
|
||||
status: "processing"
|
||||
},
|
||||
{
|
||||
id: "SET2024010003",
|
||||
clearingId: "CLR2024010003",
|
||||
targetId: "TGT003",
|
||||
targetRole: "平台",
|
||||
amount: 890.75,
|
||||
clearingTime: "2024-01-15 16:45:30",
|
||||
status: "completed"
|
||||
},
|
||||
{
|
||||
id: "SET2024010004",
|
||||
clearingId: "CLR2024010004",
|
||||
targetId: "TGT004",
|
||||
targetRole: "商家",
|
||||
amount: 3200.0,
|
||||
clearingTime: "2024-01-16 09:15:40",
|
||||
status: "pending"
|
||||
},
|
||||
{
|
||||
id: "SET2024010005",
|
||||
clearingId: "CLR2024010005",
|
||||
targetId: "TGT005",
|
||||
targetRole: "供应商",
|
||||
amount: 1750.25,
|
||||
clearingTime: "2024-01-16 10:30:55",
|
||||
status: "processing"
|
||||
}
|
||||
];
|
||||
|
||||
// 应用搜索过滤
|
||||
let filteredData = mockData;
|
||||
const searchParams = this.buildSearchParams();
|
||||
if (searchParams.settlementId) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
item.id.includes(searchParams.settlementId)
|
||||
);
|
||||
}
|
||||
if (searchParams.clearingId) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
item.clearingId.includes(searchParams.clearingId)
|
||||
);
|
||||
}
|
||||
if (searchParams.targetId) {
|
||||
filteredData = filteredData.filter(item =>
|
||||
item.targetId.includes(searchParams.targetId)
|
||||
);
|
||||
}
|
||||
|
||||
this.dataList = filteredData;
|
||||
this.pageInfo.total = filteredData.length;
|
||||
this.loading = false;
|
||||
}, 500);
|
||||
},
|
||||
|
||||
// 构建搜索参数
|
||||
buildSearchParams() {
|
||||
const params = {};
|
||||
if (this.searchForm.settlementId) {
|
||||
params.settlementId = this.searchForm.settlementId;
|
||||
}
|
||||
if (this.searchForm.clearingId) {
|
||||
params.clearingId = this.searchForm.clearingId;
|
||||
}
|
||||
if (this.searchForm.targetId) {
|
||||
params.targetId = this.searchForm.targetId;
|
||||
}
|
||||
return params;
|
||||
},
|
||||
|
||||
// 搜索
|
||||
handleSearch() {
|
||||
this.pageInfo.pageNumber = 1;
|
||||
this.fetchData();
|
||||
},
|
||||
|
||||
// 清除搜索
|
||||
handleSearchClear() {
|
||||
this.handleSearch();
|
||||
},
|
||||
|
||||
// 重置
|
||||
handleReset() {
|
||||
this.searchForm = {
|
||||
settlementId: "",
|
||||
clearingId: "",
|
||||
targetId: ""
|
||||
};
|
||||
this.pageInfo.pageNumber = 1;
|
||||
this.fetchData();
|
||||
},
|
||||
|
||||
// 分页大小改变
|
||||
handleSizeChange(val) {
|
||||
this.pageInfo.pageSize = val;
|
||||
this.pageInfo.pageNumber = 1;
|
||||
this.fetchData();
|
||||
},
|
||||
|
||||
// 当前页改变
|
||||
handleCurrentChange(val) {
|
||||
this.pageInfo.pageNumber = val;
|
||||
this.fetchData();
|
||||
},
|
||||
|
||||
// 处理结算操作
|
||||
handleSettlement(row, isRetry) {
|
||||
const action = isRetry ? "重新执行" : "开始结算";
|
||||
const message = `确认${action}该笔待结算明细吗？\n待结算明细ID: ${
|
||||
row.id
|
||||
}\n结算金额: ¥${row.amount.toFixed(2)}`;
|
||||
|
||||
this.$confirm(message, "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
})
|
||||
.then(() => {
|
||||
this.executeSettlement(row, isRetry);
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info("已取消操作");
|
||||
});
|
||||
},
|
||||
|
||||
// 执行结算
|
||||
async executeSettlement(row, isRetry) {
|
||||
try {
|
||||
this.loading = true;
|
||||
|
||||
// TODO: 调用实际的API接口执行结算
|
||||
// const params = {
|
||||
// settlementId: row.id,
|
||||
// isRetry: isRetry
|
||||
// };
|
||||
// await this.$api.mer_admin.executeSettlement(params);
|
||||
|
||||
// 模拟API调用
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 更新状态为执行中
|
||||
row.status = "processing";
|
||||
this.$message.success("结算任务已提交");
|
||||
|
||||
// 模拟结算完成
|
||||
setTimeout(() => {
|
||||
row.status = "completed";
|
||||
this.$message.success("结算完成");
|
||||
this.fetchAccountInfo(); // 刷新账户信息
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error("结算失败:", error);
|
||||
this.$message.error("结算失败，请重试");
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 获取当前市场的ID
|
||||
marketId() {
|
||||
return this.$store.state.userData.marketId;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 资金概览卡片
|
||||
.info-cards-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&.info-card-purple {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
&.info-card-pink {
|
||||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
}
|
||||
|
||||
&.info-card-blue {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card-content {
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.info-card-label {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.info-card-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card-unit {
|
||||
font-size: 16px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
// 搜索卡片
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.search-form .el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// 表格容器
|
||||
.table-container {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
margin-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.search-form .el-form-item__label {
|
||||
padding-bottom: 0px !important;
|
||||
font-size: 14px;
|
||||
line-height: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,738 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<!-- 统计数据区域 -->
|
||||
<el-row :gutter="16" class="stats-row">
|
||||
<el-col :span="12">
|
||||
<el-card class="stat-card stat-card-available" shadow="hover">
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">可用金额</div>
|
||||
<div class="stat-value">
|
||||
¥ {{ walletInfo.availableAmount.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="stat-card stat-card-balance" shadow="hover">
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">钱包余额</div>
|
||||
<div class="stat-value">
|
||||
¥ {{ walletInfo.walletBalance.toFixed(2) }}
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 操作按钮区域 -->
|
||||
<el-card class="action-card" shadow="never">
|
||||
<div class="button-group">
|
||||
<el-button type="primary" size="medium" @click="openDepositDialog">
|
||||
提取可用金额到钱包余额
|
||||
</el-button>
|
||||
<el-button size="medium" @click="openWithdrawDialog">
|
||||
提现钱包金额到银行卡
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 标签页区域 -->
|
||||
<el-card class="tabs-card" shadow="never">
|
||||
<el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
||||
<!-- 提取到钱包Tab -->
|
||||
<el-tab-pane label="提取到钱包" name="deposit">
|
||||
<el-table
|
||||
ref="depositTable"
|
||||
:data="depositDataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="depositLoading"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="60"
|
||||
align="center"
|
||||
label="序号"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="amount"
|
||||
label="操作金额"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #52c41a; font-weight: 600">
|
||||
¥{{ scope.row.amount.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="afterAvailableAmount"
|
||||
label="提取后可用金额余额"
|
||||
align="center"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="font-weight: 600">
|
||||
¥{{ scope.row.afterAvailableAmount.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="afterWalletBalance"
|
||||
label="提取后钱包余额"
|
||||
align="center"
|
||||
width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="font-weight: 600">
|
||||
¥{{ scope.row.afterWalletBalance.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="time"
|
||||
label="操作时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
/>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@size-change="handleDepositSizeChange"
|
||||
@current-change="handleDepositCurrentChange"
|
||||
:current-page="depositPageInfo.pageNumber"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="depositPageInfo.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="depositPageInfo.total"
|
||||
class="pagination-container"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 提现到银行卡Tab -->
|
||||
<el-tab-pane label="提现到银行卡" name="withdraw">
|
||||
<el-table
|
||||
ref="withdrawTable"
|
||||
:data="withdrawDataList"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="withdrawLoading"
|
||||
>
|
||||
<el-table-column
|
||||
type="index"
|
||||
width="60"
|
||||
align="center"
|
||||
label="序号"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="amount"
|
||||
label="操作金额"
|
||||
align="center"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #ff4d4f; font-weight: 600">
|
||||
¥{{ scope.row.amount.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="afterWalletBalance"
|
||||
label="提现后钱包余额"
|
||||
align="center"
|
||||
width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span style="font-weight: 600">
|
||||
¥{{ scope.row.afterWalletBalance.toFixed(2) }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="time"
|
||||
label="操作时间"
|
||||
align="center"
|
||||
min-width="160"
|
||||
/>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
@size-change="handleWithdrawSizeChange"
|
||||
@current-change="handleWithdrawCurrentChange"
|
||||
:current-page="withdrawPageInfo.pageNumber"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="withdrawPageInfo.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="withdrawPageInfo.total"
|
||||
class="pagination-container"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
|
||||
<!-- 提取到钱包弹窗 -->
|
||||
<el-dialog
|
||||
title="提取可用金额到钱包余额"
|
||||
:visible.sync="depositDialogVisible"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="depositForm"
|
||||
:model="depositForm"
|
||||
:rules="depositRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="提取金额" prop="amount">
|
||||
<el-input-number
|
||||
v-model="depositForm.amount"
|
||||
:min="0.01"
|
||||
:max="walletInfo.availableAmount"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
placeholder="请输入提取金额"
|
||||
/>
|
||||
<div style="margin-top: 8px; font-size: 12px; color: #999">
|
||||
当前可用金额：¥{{ walletInfo.availableAmount.toFixed(2) }}
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="depositDialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleDepositSubmit"
|
||||
:loading="depositSubmitLoading"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 提现到银行卡弹窗 -->
|
||||
<el-dialog
|
||||
title="提现钱包金额到银行卡"
|
||||
:visible.sync="withdrawDialogVisible"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form
|
||||
ref="withdrawForm"
|
||||
:model="withdrawForm"
|
||||
:rules="withdrawRules"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="提现金额" prop="amount">
|
||||
<el-input-number
|
||||
v-model="withdrawForm.amount"
|
||||
:min="0.01"
|
||||
:max="walletInfo.walletBalance"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
placeholder="请输入提现金额"
|
||||
/>
|
||||
<div style="margin-top: 8px; font-size: 12px; color: #999">
|
||||
当前钱包余额：¥{{ walletInfo.walletBalance.toFixed(2) }}
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="withdrawDialogVisible = false">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleWithdrawSubmit"
|
||||
:loading="withdrawSubmitLoading"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "WalletManagement",
|
||||
data() {
|
||||
// 自定义验证规则
|
||||
const validateDepositAmount = (rule, value, callback) => {
|
||||
if (!value || value <= 0) {
|
||||
callback(new Error("请输入有效的金额"));
|
||||
} else if (value > this.walletInfo.availableAmount) {
|
||||
callback(new Error("可用金额不足"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateWithdrawAmount = (rule, value, callback) => {
|
||||
if (!value || value <= 0) {
|
||||
callback(new Error("请输入有效的金额"));
|
||||
} else if (value > this.walletInfo.walletBalance) {
|
||||
callback(new Error("钱包余额不足"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
// 当前激活的标签页
|
||||
activeTab: "deposit",
|
||||
// 钱包信息
|
||||
walletInfo: {
|
||||
availableAmount: 0,
|
||||
walletBalance: 0
|
||||
},
|
||||
// 提取弹窗
|
||||
depositDialogVisible: false,
|
||||
depositSubmitLoading: false,
|
||||
depositForm: {
|
||||
amount: null
|
||||
},
|
||||
depositRules: {
|
||||
amount: [
|
||||
{ required: true, message: "请输入提取金额", trigger: "blur" },
|
||||
{ validator: validateDepositAmount, trigger: "blur" }
|
||||
]
|
||||
},
|
||||
// 提现弹窗
|
||||
withdrawDialogVisible: false,
|
||||
withdrawSubmitLoading: false,
|
||||
withdrawForm: {
|
||||
amount: null
|
||||
},
|
||||
withdrawRules: {
|
||||
amount: [
|
||||
{ required: true, message: "请输入提现金额", trigger: "blur" },
|
||||
{ validator: validateWithdrawAmount, trigger: "blur" }
|
||||
]
|
||||
},
|
||||
// 提取记录表格数据
|
||||
depositDataList: [],
|
||||
// 提取记录分页信息
|
||||
depositPageInfo: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
// 提取记录加载状态
|
||||
depositLoading: false,
|
||||
// 提现记录表格数据
|
||||
withdrawDataList: [],
|
||||
// 提现记录分页信息
|
||||
withdrawPageInfo: {
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
},
|
||||
// 提现记录加载状态
|
||||
withdrawLoading: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchWalletInfo();
|
||||
this.fetchDepositData();
|
||||
},
|
||||
methods: {
|
||||
// 获取钱包信息
|
||||
async fetchWalletInfo() {
|
||||
try {
|
||||
// TODO: 调用实际的API接口获取钱包信息
|
||||
// const res = await this.$api.mer_admin.getWalletInfo();
|
||||
// this.walletInfo = res.data.data;
|
||||
|
||||
// 模拟数据
|
||||
this.walletInfo = {
|
||||
availableAmount: 5000.0,
|
||||
walletBalance: 2000.0
|
||||
};
|
||||
} catch (error) {
|
||||
console.error("获取钱包信息失败:", error);
|
||||
this.$message.error("获取钱包信息失败");
|
||||
}
|
||||
},
|
||||
|
||||
// 标签页切换
|
||||
handleTabClick(tab) {
|
||||
if (tab.name === "deposit") {
|
||||
this.fetchDepositData();
|
||||
} else if (tab.name === "withdraw") {
|
||||
this.fetchWithdrawData();
|
||||
}
|
||||
},
|
||||
|
||||
// ==================== 提取到钱包相关方法 ====================
|
||||
|
||||
// 打开提取弹窗
|
||||
openDepositDialog() {
|
||||
this.depositForm.amount = null;
|
||||
this.depositDialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.depositForm) {
|
||||
this.$refs.depositForm.clearValidate();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 提交提取
|
||||
handleDepositSubmit() {
|
||||
this.$refs.depositForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.executeDeposit();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 执行提取
|
||||
async executeDeposit() {
|
||||
this.depositSubmitLoading = true;
|
||||
try {
|
||||
const amount = this.depositForm.amount;
|
||||
|
||||
// TODO: 调用实际的API接口执行提取
|
||||
// const params = {
|
||||
// amount: amount
|
||||
// };
|
||||
// await this.$api.mer_admin.depositToWallet(params);
|
||||
|
||||
// 模拟API调用
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 更新本地钱包信息
|
||||
this.walletInfo.availableAmount -= amount;
|
||||
this.walletInfo.walletBalance += amount;
|
||||
|
||||
this.$message.success("提取成功");
|
||||
this.depositDialogVisible = false;
|
||||
|
||||
// 刷新数据
|
||||
this.fetchWalletInfo();
|
||||
this.fetchDepositData();
|
||||
} catch (error) {
|
||||
console.error("提取失败:", error);
|
||||
this.$message.error("提取失败，请重试");
|
||||
} finally {
|
||||
this.depositSubmitLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 获取提取记录数据
|
||||
fetchDepositData() {
|
||||
this.depositLoading = true;
|
||||
const marketId = this.marketId;
|
||||
if (!marketId) {
|
||||
this.$message.error("获取市场ID失败，请重新登录");
|
||||
this.$router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
pageNumber: this.depositPageInfo.pageNumber,
|
||||
pageSize: this.depositPageInfo.pageSize,
|
||||
marketId
|
||||
};
|
||||
|
||||
// TODO: 调用实际的API接口获取提取记录列表
|
||||
// this.$api.mer_admin
|
||||
// .getDepositList(params)
|
||||
// .then(res => {
|
||||
// if (res.data && res.data.data) {
|
||||
// this.depositDataList = res.data.data.data || [];
|
||||
// this.depositPageInfo.total = Number(res.data.data.total) || 0;
|
||||
// }
|
||||
// })
|
||||
// .catch(err => {
|
||||
// console.error("获取提取记录失败:", err);
|
||||
// this.$message.error("获取提取记录失败");
|
||||
// })
|
||||
// .finally(() => {
|
||||
// this.depositLoading = false;
|
||||
// });
|
||||
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
const mockData = [
|
||||
{
|
||||
amount: 1000.0,
|
||||
time: "2025-10-30 10:15:42",
|
||||
afterAvailableAmount: 4000.0,
|
||||
afterWalletBalance: 2000.0
|
||||
},
|
||||
{
|
||||
amount: 1500.0,
|
||||
time: "2025-10-29 09:45:33",
|
||||
afterAvailableAmount: 3500.0,
|
||||
afterWalletBalance: 3500.0
|
||||
},
|
||||
{
|
||||
amount: 2000.0,
|
||||
time: "2025-10-28 14:22:18",
|
||||
afterAvailableAmount: 3000.0,
|
||||
afterWalletBalance: 2000.0
|
||||
}
|
||||
];
|
||||
|
||||
this.depositDataList = mockData;
|
||||
this.depositPageInfo.total = mockData.length;
|
||||
this.depositLoading = false;
|
||||
}, 500);
|
||||
},
|
||||
|
||||
// 提取记录分页大小改变
|
||||
handleDepositSizeChange(val) {
|
||||
this.depositPageInfo.pageSize = val;
|
||||
this.depositPageInfo.pageNumber = 1;
|
||||
this.fetchDepositData();
|
||||
},
|
||||
|
||||
// 提取记录当前页改变
|
||||
handleDepositCurrentChange(val) {
|
||||
this.depositPageInfo.pageNumber = val;
|
||||
this.fetchDepositData();
|
||||
},
|
||||
|
||||
// ==================== 提现到银行卡相关方法 ====================
|
||||
|
||||
// 打开提现弹窗
|
||||
openWithdrawDialog() {
|
||||
this.withdrawForm.amount = null;
|
||||
this.withdrawDialogVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.withdrawForm) {
|
||||
this.$refs.withdrawForm.clearValidate();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 提交提现
|
||||
handleWithdrawSubmit() {
|
||||
this.$refs.withdrawForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.executeWithdraw();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 执行提现
|
||||
async executeWithdraw() {
|
||||
this.withdrawSubmitLoading = true;
|
||||
try {
|
||||
const amount = this.withdrawForm.amount;
|
||||
|
||||
// TODO: 调用实际的API接口执行提现
|
||||
// const params = {
|
||||
// amount: amount
|
||||
// };
|
||||
// await this.$api.mer_admin.withdrawToBank(params);
|
||||
|
||||
// 模拟API调用
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// 更新本地钱包信息
|
||||
this.walletInfo.walletBalance -= amount;
|
||||
|
||||
this.$message.success("提现成功");
|
||||
this.withdrawDialogVisible = false;
|
||||
|
||||
// 刷新数据
|
||||
this.fetchWalletInfo();
|
||||
this.fetchWithdrawData();
|
||||
} catch (error) {
|
||||
console.error("提现失败:", error);
|
||||
this.$message.error("提现失败，请重试");
|
||||
} finally {
|
||||
this.withdrawSubmitLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
// 获取提现记录数据
|
||||
fetchWithdrawData() {
|
||||
this.withdrawLoading = true;
|
||||
const marketId = this.marketId;
|
||||
if (!marketId) {
|
||||
this.$message.error("获取市场ID失败，请重新登录");
|
||||
this.$router.push("/login");
|
||||
return;
|
||||
}
|
||||
|
||||
const params = {
|
||||
pageNumber: this.withdrawPageInfo.pageNumber,
|
||||
pageSize: this.withdrawPageInfo.pageSize,
|
||||
marketId
|
||||
};
|
||||
|
||||
// TODO: 调用实际的API接口获取提现记录列表
|
||||
// this.$api.mer_admin
|
||||
// .getWithdrawList(params)
|
||||
// .then(res => {
|
||||
// if (res.data && res.data.data) {
|
||||
// this.withdrawDataList = res.data.data.data || [];
|
||||
// this.withdrawPageInfo.total = Number(res.data.data.total) || 0;
|
||||
// }
|
||||
// })
|
||||
// .catch(err => {
|
||||
// console.error("获取提现记录失败:", err);
|
||||
// this.$message.error("获取提现记录失败");
|
||||
// })
|
||||
// .finally(() => {
|
||||
// this.withdrawLoading = false;
|
||||
// });
|
||||
|
||||
// 模拟数据
|
||||
setTimeout(() => {
|
||||
const mockData = [
|
||||
{
|
||||
amount: 500.0,
|
||||
time: "2025-10-30 15:30:25",
|
||||
afterWalletBalance: 1500.0
|
||||
},
|
||||
{
|
||||
amount: 800.0,
|
||||
time: "2025-10-29 16:20:10",
|
||||
afterWalletBalance: 1200.0
|
||||
}
|
||||
];
|
||||
|
||||
this.withdrawDataList = mockData;
|
||||
this.withdrawPageInfo.total = mockData.length;
|
||||
this.withdrawLoading = false;
|
||||
}, 500);
|
||||
},
|
||||
|
||||
// 提现记录分页大小改变
|
||||
handleWithdrawSizeChange(val) {
|
||||
this.withdrawPageInfo.pageSize = val;
|
||||
this.withdrawPageInfo.pageNumber = 1;
|
||||
this.fetchWithdrawData();
|
||||
},
|
||||
|
||||
// 提现记录当前页改变
|
||||
handleWithdrawCurrentChange(val) {
|
||||
this.withdrawPageInfo.pageNumber = val;
|
||||
this.fetchWithdrawData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 获取当前市场的ID
|
||||
marketId() {
|
||||
return this.$store.state.userData.marketId;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// 统计数据区域
|
||||
.stats-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 8px;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
&.stat-card-available {
|
||||
border-left: 4px solid #52c41a;
|
||||
}
|
||||
|
||||
&.stat-card-balance {
|
||||
border-left: 4px solid #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
// 操作按钮区域
|
||||
.action-card {
|
||||
margin-bottom: 16px;
|
||||
border-radius: 8px;
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 20px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// 标签页卡片
|
||||
.tabs-card {
|
||||
border-radius: 8px;
|
||||
|
||||
::v-deep .el-card__body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__header {
|
||||
margin: 0;
|
||||
padding: 0 24px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__nav-wrap::after {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__item {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 表格区域
|
||||
::v-deep .el-table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// 分页
|
||||
.pagination-container {
|
||||
padding: 20px 24px;
|
||||
text-align: right;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
// 弹窗
|
||||
.dialog-footer {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue