fetch(modify): 中英文以及黑屏
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 2m19s
All checks were successful
构建并部署前端到测试环境 / build-and-deploy (push) Successful in 2m19s
This commit is contained in:
sexygoat
@@ -1,221 +1,224 @@
|
||||
<template>
|
||||
<ArtTableFullScreen>
|
||||
<div class="agent-commission-page" id="table-full-screen">
|
||||
<!-- 搜索栏 -->
|
||||
<ElCard shadow="never" class="search-card">
|
||||
<ElForm :inline="true" :model="searchForm" class="search-form">
|
||||
<ElFormItem label="店铺名称">
|
||||
<ElInput
|
||||
v-model="searchForm.shop_name"
|
||||
placeholder="请输入店铺名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="店铺编码">
|
||||
<ElInput
|
||||
v-model="searchForm.shop_code"
|
||||
placeholder="请输入店铺编码"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton type="primary" @click="handleSearch">查询</ElButton>
|
||||
<ElButton @click="handleReset">重置</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</ElCard>
|
||||
<div class="agent-commission-container">
|
||||
<ArtTableFullScreen>
|
||||
<div class="agent-commission-page" id="table-full-screen">
|
||||
<!-- 搜索栏 -->
|
||||
<ElCard shadow="never" class="search-card">
|
||||
<ElForm :inline="true" :model="searchForm" class="search-form">
|
||||
<ElFormItem label="店铺名称">
|
||||
<ElInput
|
||||
v-model="searchForm.shop_name"
|
||||
placeholder="请输入店铺名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="店铺编码">
|
||||
<ElInput
|
||||
v-model="searchForm.shop_code"
|
||||
placeholder="请输入店铺编码"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
/>
|
||||
</ElFormItem>
|
||||
<ElFormItem>
|
||||
<ElButton type="primary" @click="handleSearch">查询</ElButton>
|
||||
<ElButton @click="handleReset">重置</ElButton>
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
</ElCard>
|
||||
|
||||
<ElCard shadow="never" class="art-table-card">
|
||||
<!-- 表格头部 -->
|
||||
<ArtTableHeader
|
||||
:columnList="columnOptions"
|
||||
v-model:columns="columnChecks"
|
||||
@refresh="handleRefresh"
|
||||
/>
|
||||
<ElCard shadow="never" class="art-table-card">
|
||||
<!-- 表格头部 -->
|
||||
<ArtTableHeader
|
||||
:columnList="columnOptions"
|
||||
v-model:columns="columnChecks"
|
||||
@refresh="handleRefresh"
|
||||
/>
|
||||
|
||||
<!-- 表格 -->
|
||||
<ArtTable
|
||||
ref="tableRef"
|
||||
row-key="shop_id"
|
||||
:loading="loading"
|
||||
:data="summaryList"
|
||||
:currentPage="pagination.page"
|
||||
:pageSize="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:marginTop="10"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
|
||||
</template>
|
||||
</ArtTable>
|
||||
</ElCard>
|
||||
</div>
|
||||
</ArtTableFullScreen>
|
||||
<!-- 表格 -->
|
||||
<ArtTable
|
||||
ref="tableRef"
|
||||
row-key="shop_id"
|
||||
:loading="loading"
|
||||
:data="summaryList"
|
||||
:currentPage="pagination.page"
|
||||
:pageSize="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
:marginTop="10"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
|
||||
</template>
|
||||
</ArtTable>
|
||||
</ElCard>
|
||||
</div>
|
||||
</ArtTableFullScreen>
|
||||
|
||||
<!-- 详情抽屉 -->
|
||||
<ElDrawer
|
||||
v-model="detailDrawerVisible"
|
||||
:title="`${currentShop?.shop_name || ''} - 佣金详情`"
|
||||
size="60%"
|
||||
destroy-on-close
|
||||
>
|
||||
<ElTabs v-model="activeTab" class="detail-tabs">
|
||||
<!-- 佣金明细 Tab -->
|
||||
<ElTabPane label="佣金明细" name="commission">
|
||||
<ArtTable
|
||||
ref="commissionTableRef"
|
||||
row-key="id"
|
||||
:loading="commissionLoading"
|
||||
:data="commissionRecords"
|
||||
:currentPage="commissionPagination.page"
|
||||
:pageSize="commissionPagination.pageSize"
|
||||
:total="commissionPagination.total"
|
||||
:marginTop="10"
|
||||
:height="500"
|
||||
@size-change="handleCommissionSizeChange"
|
||||
@current-change="handleCommissionCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn label="佣金金额" prop="amount" width="120">
|
||||
<template #default="scope">
|
||||
<span style="font-weight: 500; color: var(--el-color-success)">
|
||||
{{ formatMoney(scope.row.amount) }}
|
||||
</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="入账后余额" prop="balance_after" width="120">
|
||||
<template #default="scope">
|
||||
{{ formatMoney(scope.row.balance_after) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="佣金类型" prop="commission_type" width="120">
|
||||
<template #default="scope">
|
||||
<ElTag
|
||||
:type="
|
||||
CommissionTypeMap[scope.row.commission_type as keyof typeof CommissionTypeMap]
|
||||
?.type || 'info'
|
||||
"
|
||||
>
|
||||
<!-- 详情抽屉 -->
|
||||
<ElDrawer
|
||||
v-model="detailDrawerVisible"
|
||||
:title="`${currentShop?.shop_name || ''} - 佣金详情`"
|
||||
size="60%"
|
||||
destroy-on-close
|
||||
>
|
||||
<ElTabs v-model="activeTab" class="detail-tabs">
|
||||
<!-- 佣金明细 Tab -->
|
||||
<ElTabPane label="佣金明细" name="commission">
|
||||
<ArtTable
|
||||
ref="commissionTableRef"
|
||||
row-key="id"
|
||||
:loading="commissionLoading"
|
||||
:data="commissionRecords"
|
||||
:currentPage="commissionPagination.page"
|
||||
:pageSize="commissionPagination.pageSize"
|
||||
:total="commissionPagination.total"
|
||||
:marginTop="10"
|
||||
:height="500"
|
||||
@size-change="handleCommissionSizeChange"
|
||||
@current-change="handleCommissionCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn label="佣金金额" prop="amount" width="120">
|
||||
<template #default="scope">
|
||||
<span style="font-weight: 500; color: var(--el-color-success)">
|
||||
{{ formatMoney(scope.row.amount) }}
|
||||
</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="入账后余额" prop="balance_after" width="120">
|
||||
<template #default="scope">
|
||||
{{ formatMoney(scope.row.balance_after) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="佣金类型" prop="commission_type" width="120">
|
||||
<template #default="scope">
|
||||
<ElTag
|
||||
:type="
|
||||
CommissionTypeMap[scope.row.commission_type as keyof typeof CommissionTypeMap]
|
||||
?.type || 'info'
|
||||
"
|
||||
>
|
||||
{{
|
||||
CommissionTypeMap[scope.row.commission_type as keyof typeof CommissionTypeMap]
|
||||
?.label || scope.row.commission_type
|
||||
}}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="状态" prop="status" width="100">
|
||||
<template #default="scope">
|
||||
<ElTag
|
||||
:type="
|
||||
CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
|
||||
?.type || 'info'
|
||||
"
|
||||
>
|
||||
{{
|
||||
CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
|
||||
?.label || scope.row.status
|
||||
}}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="订单号" prop="order_no" min-width="180" show-overflow-tooltip />
|
||||
<ElTableColumn label="ICCID" prop="iccid" min-width="150" show-overflow-tooltip />
|
||||
<ElTableColumn label="设备号" prop="device_no" min-width="150" show-overflow-tooltip />
|
||||
<ElTableColumn label="入账时间" prop="created_at" width="180">
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.created_at) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</ElTabPane>
|
||||
|
||||
<!-- 提现记录 Tab -->
|
||||
<ElTabPane label="提现记录" name="withdrawal">
|
||||
<ArtTable
|
||||
ref="withdrawalTableRef"
|
||||
row-key="id"
|
||||
:loading="withdrawalLoading"
|
||||
:data="withdrawalRecords"
|
||||
:currentPage="withdrawalPagination.page"
|
||||
:pageSize="withdrawalPagination.pageSize"
|
||||
:total="withdrawalPagination.total"
|
||||
:marginTop="10"
|
||||
:height="500"
|
||||
@size-change="handleWithdrawalSizeChange"
|
||||
@current-change="handleWithdrawalCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn
|
||||
label="提现单号"
|
||||
prop="withdrawal_no"
|
||||
min-width="180"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<ElTableColumn label="提现金额" prop="amount" width="120">
|
||||
<template #default="scope">
|
||||
<span style="font-weight: 500; color: var(--el-color-danger)">
|
||||
{{ formatMoney(scope.row.amount) }}
|
||||
</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="实际到账" prop="actual_amount" width="120">
|
||||
<template #default="scope">
|
||||
{{ formatMoney(scope.row.actual_amount) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="手续费" prop="fee" width="100">
|
||||
<template #default="scope">
|
||||
{{ formatMoney(scope.row.fee) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="提现方式" prop="withdrawal_method" width="100">
|
||||
<template #default="scope">
|
||||
{{
|
||||
CommissionTypeMap[scope.row.commission_type as keyof typeof CommissionTypeMap]
|
||||
?.label || scope.row.commission_type
|
||||
WithdrawalMethodMap[
|
||||
scope.row.withdrawal_method as keyof typeof WithdrawalMethodMap
|
||||
]?.label || scope.row.withdrawal_method
|
||||
}}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="状态" prop="status" width="100">
|
||||
<template #default="scope">
|
||||
<ElTag
|
||||
:type="
|
||||
CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
|
||||
?.type || 'info'
|
||||
"
|
||||
>
|
||||
{{
|
||||
CommissionStatusMap[scope.row.status as keyof typeof CommissionStatusMap]
|
||||
?.label || scope.row.status
|
||||
}}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="订单号" prop="order_no" min-width="180" show-overflow-tooltip />
|
||||
<ElTableColumn label="ICCID" prop="iccid" min-width="150" show-overflow-tooltip />
|
||||
<ElTableColumn label="设备号" prop="device_no" min-width="150" show-overflow-tooltip />
|
||||
<ElTableColumn label="入账时间" prop="created_at" width="180">
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.created_at) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</ElTabPane>
|
||||
|
||||
<!-- 提现记录 Tab -->
|
||||
<ElTabPane label="提现记录" name="withdrawal">
|
||||
<ArtTable
|
||||
ref="withdrawalTableRef"
|
||||
row-key="id"
|
||||
:loading="withdrawalLoading"
|
||||
:data="withdrawalRecords"
|
||||
:currentPage="withdrawalPagination.page"
|
||||
:pageSize="withdrawalPagination.pageSize"
|
||||
:total="withdrawalPagination.total"
|
||||
:marginTop="10"
|
||||
:height="500"
|
||||
@size-change="handleWithdrawalSizeChange"
|
||||
@current-change="handleWithdrawalCurrentChange"
|
||||
>
|
||||
<template #default>
|
||||
<ElTableColumn
|
||||
label="提现单号"
|
||||
prop="withdrawal_no"
|
||||
min-width="180"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<ElTableColumn label="提现金额" prop="amount" width="120">
|
||||
<template #default="scope">
|
||||
<span style="font-weight: 500; color: var(--el-color-danger)">
|
||||
{{ formatMoney(scope.row.amount) }}
|
||||
</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="实际到账" prop="actual_amount" width="120">
|
||||
<template #default="scope">
|
||||
{{ formatMoney(scope.row.actual_amount) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="手续费" prop="fee" width="100">
|
||||
<template #default="scope">
|
||||
{{ formatMoney(scope.row.fee) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="提现方式" prop="withdrawal_method" width="100">
|
||||
<template #default="scope">
|
||||
{{
|
||||
WithdrawalMethodMap[
|
||||
scope.row.withdrawal_method as keyof typeof WithdrawalMethodMap
|
||||
]?.label || scope.row.withdrawal_method
|
||||
}}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="状态" prop="status" width="100">
|
||||
<template #default="scope">
|
||||
<ElTag
|
||||
:type="
|
||||
WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
|
||||
?.type || 'info'
|
||||
"
|
||||
>
|
||||
{{
|
||||
WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
|
||||
?.label || scope.row.status
|
||||
}}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="申请时间" prop="created_at" width="180">
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.created_at) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="处理时间" prop="processed_at" width="180">
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.processed_at) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
</ElDrawer>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="状态" prop="status" width="100">
|
||||
<template #default="scope">
|
||||
<ElTag
|
||||
:type="
|
||||
WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
|
||||
?.type || 'info'
|
||||
"
|
||||
>
|
||||
{{
|
||||
WithdrawalStatusMap[scope.row.status as keyof typeof WithdrawalStatusMap]
|
||||
?.label || scope.row.status
|
||||
}}
|
||||
</ElTag>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="申请时间" prop="created_at" width="180">
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.created_at) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="处理时间" prop="processed_at" width="180">
|
||||
<template #default="scope">
|
||||
{{ formatDateTime(scope.row.processed_at) }}
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
</template>
|
||||
</ArtTable>
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
</ElDrawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { h } from 'vue'
|
||||
import { h, watch, onBeforeUnmount } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { CommissionService } from '@/api/modules'
|
||||
import { ElMessage, ElTag } from 'element-plus'
|
||||
import type {
|
||||
@@ -235,6 +238,8 @@
|
||||
|
||||
defineOptions({ name: 'AgentCommission' })
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
// 主表格状态
|
||||
const loading = ref(false)
|
||||
const tableRef = ref()
|
||||
@@ -464,6 +469,23 @@
|
||||
}
|
||||
})
|
||||
|
||||
// 监听路由变化，关闭抽屉
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
if (detailDrawerVisible.value) {
|
||||
detailDrawerVisible.value = false
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 组件卸载前关闭抽屉
|
||||
onBeforeUnmount(() => {
|
||||
if (detailDrawerVisible.value) {
|
||||
detailDrawerVisible.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 加载佣金明细
|
||||
const loadCommissionRecords = async () => {
|
||||
if (!currentShop.value) return
|
||||
@@ -540,6 +562,10 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.agent-commission-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.agent-commission-page {
|
||||
.search-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
Reference in New Issue
Block a user