This commit is contained in:
李远
parent
ba89a965c7
commit
76ca0186dd
|
|
@ -109,7 +109,7 @@ const staticMenuList = ref<ElMenuItem[]>(
|
|||
{
|
||||
id: 32,
|
||||
label: '代理管理',
|
||||
path: '3-2', // index="3-2"
|
||||
path: '/account/agent', // index="3-2"
|
||||
icon: ''
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -103,6 +103,14 @@ const routes = [
|
|||
title: '客户管理', // 左侧菜单显示的标题
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'agent',
|
||||
name: 'Agent',
|
||||
component: () => import('@/views/account/agent/index.vue'),
|
||||
meta: {
|
||||
title: '代理管理', // 左侧菜单显示的标题
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,5 +1,67 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>代理商管理</h1>
|
||||
<div class="agent">
|
||||
<AgentSearch :search-form="agentSearchForm" :search-options="agentSearchOptions" @search="handleSearch"
|
||||
@reset="handleReset">
|
||||
</AgentSearch>
|
||||
|
||||
<AgentTable :table-data="agentTree" :columns="agentTableColumnsOptions" row-key="id" />
|
||||
|
||||
<AgentPagination v-model="agentSearchForm.page" v-model:page-size-value="agentSearchForm.pageSize"
|
||||
:total="agentSearchForm.total" @pagination-change="handlePaginationChange" />
|
||||
|
||||
<AgentDialog :visible="dialogVisible" :title="dialogTitle" :type="dialogType" :fullscreen="true"
|
||||
@cancel="handleCancel" @close="handleClose">
|
||||
<template #header>
|
||||
<div class="dialog-header">
|
||||
<span class="dialog-title">查看点差</span>
|
||||
<span class="dialog-close-text" @click="dialogVisible = false">关闭</span>
|
||||
</div>
|
||||
</template>
|
||||
<AgentTable :table-data="agentPointTree" :columns="agentPointTableColumnsOptions" row-key="id" />
|
||||
</AgentDialog>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// 组件
|
||||
import AgentSearch from '@/components/common/Search.vue'
|
||||
import AgentTable from '@/components/common/Table.vue'
|
||||
import AgentPagination from '@/components/common/Pagination.vue'
|
||||
import AgentDialog from '@/components/common/Dialog.vue'
|
||||
|
||||
// 引入配置
|
||||
import { agentSearch, agentTableColumns, agentPointTableColumns } from './options'
|
||||
|
||||
//定义客户搜索表单配置
|
||||
const agentSearchOptions = ref(agentSearch)
|
||||
const agentSearchForm = ref({
|
||||
username: '',
|
||||
status: '正常',
|
||||
startDateTime: '',
|
||||
endDateTime: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
})
|
||||
|
||||
// 定义表格配置
|
||||
const agentTree = ref<any[]>([])
|
||||
const agentTableColumnsOptions = ref(agentTableColumns)
|
||||
|
||||
// 定义弹窗配置
|
||||
const dialogVisible = ref(true)
|
||||
const dialogTitle = ref('查看点差')
|
||||
const dialogType = ref('add')
|
||||
const dialogWidth = ref('100%')
|
||||
const agentPointTree = ref<any[]>([])
|
||||
const agentPointTableColumnsOptions = ref(agentPointTableColumns)
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.agent {
|
||||
:deep(.el-dialog) {
|
||||
.el-dialog__footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
// 获取当前年份
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
// 定义禁用日期函数：只能选择今年及以后的日期
|
||||
const disabledDate = (time: Date) => {
|
||||
// 时间早于今年1月1日则禁用
|
||||
return time.getTime() < new Date(currentYear, 0, 1).getTime()
|
||||
}
|
||||
//定义客户搜索表单配置
|
||||
export const agentSearch = [
|
||||
{ prop: 'username', label: '用户名', type: 'input' as const, placeholder: '用户名', width: '120px' },
|
||||
{
|
||||
prop: "startDateTime", label: '注册开始时间', type: 'date' as const, dateType: 'date' as const, // 时间范围选择器
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
width: '180px',
|
||||
disabledDate
|
||||
},
|
||||
{
|
||||
prop: "endDateTime", label: '注册结束时间', type: 'date' as const, dateType: 'date' as const, // 时间范围选择器
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
width: '180px',
|
||||
disabledDate
|
||||
},
|
||||
]
|
||||
|
||||
// 定义表格列配置
|
||||
export const agentTableColumns = [
|
||||
{ prop: 'id', label: 'ID', align: 'center' as const },
|
||||
{ prop: 'username', label: '代理名称', align: 'center' as const },
|
||||
{ prop: 'registerTime', label: '注册时间', align: 'center' as const },
|
||||
{ prop: 'status', label: '状态', align: 'center' as const },
|
||||
{ prop: 'pointDifference', label: '点差', align: 'center' as const },
|
||||
{ prop: 'feeRate', label: '手续费', align: 'center' as const },
|
||||
{ prop: 'rebateRate', label: '手续费返佣', align: 'center' as const },
|
||||
{ prop: 'pointDifference2', label: '点差', align: 'center' as const },
|
||||
{ prop: 'rebateTotalAmount', label: '返佣总金额', align: 'center' as const },
|
||||
{ prop: 'clientCount', label: '客户数量', align: 'center' as const },
|
||||
{ prop: 'level', label: '级别', align: 'center' as const },
|
||||
|
||||
]
|
||||
|
||||
// 定义点差表格列配置
|
||||
export const agentPointTableColumns = [
|
||||
{ prop: 'varietyName', label: '品种名称', align: 'center' as const },
|
||||
{ prop: 'varietyCode', label: '品种编号', align: 'center' as const },
|
||||
{ prop: 'pointDifference', label: '可用点差', align: 'center' as const },
|
||||
{ prop: 'assignedPointDifference', label: '已分配点差', align: 'center' as const },
|
||||
]
|
||||
|
|
@ -204,16 +204,25 @@ const handleDialogType = (type: string) => {
|
|||
|
||||
//统一获取表单选项
|
||||
const getOptions = async () => {
|
||||
//获取代理列表
|
||||
const agentOptions = await getAgentOptionsApi()
|
||||
//获取手续费模板列表
|
||||
const feeTemplateOptions = await getFeeTemplateOptionsApi()
|
||||
//获取风控模板列表
|
||||
const riskTemplateOptions = await getRiskTemplateOptionsApi()
|
||||
try {
|
||||
// 并行请求，提升性能
|
||||
const [agentRes, feeTemplateRes, riskTemplateRes] = await Promise.all([
|
||||
getAgentOptionsApi(),
|
||||
getFeeTemplateOptionsApi(),
|
||||
getRiskTemplateOptionsApi()
|
||||
]);
|
||||
|
||||
clientFormOptionsMap.value.feeTemplate = mapObjectToOptions(feeTemplateOptions as Record<string, string>)
|
||||
clientFormOptionsMap.value.riskTemplate = mapObjectToOptions(riskTemplateOptions as Record<string, string>)
|
||||
clientFormOptionsMap.value.agentUsername = mapObjectToOptions(agentOptions as Record<string, string>)
|
||||
const agentOptions = mapObjectToOptions(agentRes as Record<string, string>);
|
||||
const feeTemplateOptions = mapObjectToOptions(feeTemplateRes as Record<string, string>);
|
||||
const riskTemplateOptions = mapObjectToOptions(riskTemplateRes as Record<string, string>);
|
||||
|
||||
// 更新表单选项
|
||||
clientFormOptionsMap.value.agentUsername = agentOptions;
|
||||
clientFormOptionsMap.value.feeTemplate = feeTemplateOptions;
|
||||
clientFormOptionsMap.value.riskTemplate = riskTemplateOptions;
|
||||
} catch (error) {
|
||||
console.error('获取表单选项失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -305,10 +314,7 @@ const handleSubmit = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
// 弹窗取消
|
||||
const handleCancel = () => {
|
||||
dialogVisible.value = false
|
||||
dialogType.value = 'add'
|
||||
const resetForm = () => {
|
||||
clientForm.value = {
|
||||
//手续费模板
|
||||
feeTemplate: '',
|
||||
|
|
@ -319,25 +325,28 @@ const handleCancel = () => {
|
|||
email: '',
|
||||
phone: '',
|
||||
countryCode: '+86',
|
||||
//是否升级
|
||||
isUpgrade: 1,
|
||||
//是否变更客户名
|
||||
userName: '',
|
||||
status: 1,
|
||||
id: '',
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 弹窗取消
|
||||
const handleCancel = () => {
|
||||
dialogVisible.value = false
|
||||
dialogType.value = 'add'
|
||||
resetForm()
|
||||
}
|
||||
|
||||
// 弹窗关闭
|
||||
const handleClose = () => {
|
||||
dialogVisible.value = false
|
||||
dialogType.value = 'add'
|
||||
clientForm.value = {
|
||||
//手续费模板
|
||||
feeTemplate: '',
|
||||
//风控模板
|
||||
riskTemplate: '',
|
||||
//所属上级
|
||||
agentUsername: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
countryCode: '+86',
|
||||
}
|
||||
resetForm()
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
// 建议单独创建 types.ts 文件管理所有类型
|
||||
// types.ts
|
||||
export interface ClientSearchForm {
|
||||
page: number;
|
||||
pageSize: number;
|
||||
username: string;
|
||||
status: '正常' | '禁用';
|
||||
startDateTime: string;
|
||||
endDateTime: string;
|
||||
}
|
||||
|
||||
export interface ClientItem {
|
||||
id: string | number;
|
||||
username: string;
|
||||
status: 1 | 2;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
countryCode?: string;
|
||||
feeTemplate?: string | number;
|
||||
riskTemplate?: string | number;
|
||||
agentUsername?: string;
|
||||
isUpgrade?: 1 | 2;
|
||||
par_uid?: string | number;
|
||||
parent?: {
|
||||
id: string | number;
|
||||
username: string;
|
||||
};
|
||||
}
|
||||
|
||||
export interface ClientForm {
|
||||
id: string;
|
||||
feeTemplate: string | number;
|
||||
riskTemplate: string | number;
|
||||
agentUsername: string | number;
|
||||
email: string;
|
||||
phone: string;
|
||||
countryCode: string;
|
||||
isUpgrade: 1 | 2;
|
||||
userName: string;
|
||||
status: 1 | 2;
|
||||
}
|
||||
|
||||
export interface ClientListResponse {
|
||||
data: ClientItem[];
|
||||
total: number;
|
||||
per_page: number | string;
|
||||
}
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
<template>
|
||||
<div class="client">
|
||||
<!-- 搜索组件 -->
|
||||
<ClientSearch :search-form="searchForm" :search-options="clientSearchOptions" @search="handleSearch"
|
||||
@reset="handleReset">
|
||||
<!-- 这里可以插入自定义插槽（如果需要） -->
|
||||
</ClientSearch>
|
||||
|
||||
<!-- 下方的表格区域（与你的图片对应） -->
|
||||
<el-table :data="tableData" border>
|
||||
<el-table-column prop="username" label="用户名" />
|
||||
<el-table-column prop="registerStartTime" label="注册开始时间" />
|
||||
<el-table-column prop="registerEndTime" label="注册结束时间" />
|
||||
<el-table-column prop="status" label="状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === 1 ? 'success' : 'danger'">
|
||||
{{ row.status === 1 ? '开启' : '关闭' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default>
|
||||
<el-button link type="primary">搜索</el-button>
|
||||
<el-button link type="primary">重置</el-button>
|
||||
<el-button link type="primary">新增用户</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<ClientPagination v-model="currentPage" v-model:page-size-value="pageSize" :total="total"
|
||||
@pagination-change="handlePaginationChange" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// 引入组件
|
||||
import ClientSearch from '@/components/common/Search.vue'
|
||||
import ClientTable from '@/components/common/Table.vue'
|
||||
import ClientPagination from '@/components/common/Pagination.vue'
|
||||
|
||||
// 引入搜索配置
|
||||
import { clientSearchOptions } from './options'
|
||||
|
||||
// 定义搜索表单（与配置项
|
||||
const searchForm = ref({
|
||||
username: '', // 用户名
|
||||
registerTime: [], // 注册时间范围（daterange 类型）
|
||||
status: '' // 状态（开启/关闭）
|
||||
})
|
||||
|
||||
|
||||
// 3. 查询逻辑（点击「搜索」触发）
|
||||
const handleSearch = () => {
|
||||
console.log('发起查询，参数：', searchForm)
|
||||
|
||||
// 实际项目中，需要将 registerTime 数组拆分为 start 和 end
|
||||
const params = {
|
||||
...searchForm.value,
|
||||
registerStartTime: searchForm.value.registerTime[0] || '',
|
||||
registerEndTime: searchForm.value.registerTime[1] || ''
|
||||
}
|
||||
delete params.registerTime // 删除原数组字段
|
||||
|
||||
// 调用接口获取列表数据
|
||||
// api.getUserList(params).then(res => {
|
||||
// tableData.value = res.list
|
||||
// })
|
||||
}
|
||||
|
||||
// 4. 重置逻辑（点击「重置」触发）
|
||||
const handleReset = () => {
|
||||
// 清空表单
|
||||
searchForm.value.username = ''
|
||||
searchForm.value.registerTime = []
|
||||
searchForm.value.status = ''
|
||||
|
||||
// 重置后自动发起一次查询
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
// 页面初始化时自动查询一次
|
||||
handleSearch()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 分页核心参数
|
||||
const currentPage = ref<number>(1) // 当前页
|
||||
const pageSize = ref<number>(50) // 每页条数
|
||||
const total = ref<number>(100) // 总条数
|
||||
|
||||
// 初始化加载数据
|
||||
onMounted(() => {
|
||||
fetchData()
|
||||
})
|
||||
|
||||
// 数据请求方法（父组件处理业务逻辑）
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// 模拟接口请求：传递分页参数
|
||||
// const res = await api.getList({ page: currentPage.value, size: pageSize.value })
|
||||
// 模拟返回数据
|
||||
const res = {
|
||||
list: [/* 业务数据 */],
|
||||
total: 100 // 总条数
|
||||
}
|
||||
tableData.value = res.list
|
||||
total.value = res.total
|
||||
} catch (error) {
|
||||
console.error('数据请求失败：', error)
|
||||
}
|
||||
}
|
||||
|
||||
// 分页变更回调（处理业务逻辑）
|
||||
const handlePaginationChange = ({ currentPage: page, pageSize: size }: { currentPage: number, pageSize: number }) => {
|
||||
// 更新分页参数
|
||||
currentPage.value = page
|
||||
pageSize.value = size
|
||||
// 重新请求数据
|
||||
fetchData()
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue