提交

src/components/layout/Sidebar.vue

@@ -109,7 +109,7 @@ const staticMenuList = ref<ElMenuItem[]>(
                 {
                     id: 32,
                     label: '代理管理',
-                    path: '3-2', // index="3-2"
+                    path: '/account/agent', // index="3-2"
                     icon: ''
                 },
                 {

src/router/index.ts

@@ -103,6 +103,14 @@ const routes = [
               title: '客户管理', // 左侧菜单显示的标题
             }
           },
+          {
+            path: 'agent',
+            name: 'Agent',
+            component: () => import('@/views/account/agent/index.vue'),
+            meta: {
+              title: '代理管理', // 左侧菜单显示的标题
+            }
+          }
         ]
       },
     ]

src/views/account/agent/index.vue

@@ -1,5 +1,67 @@
 <template>
-    <div>
+    <div class="agent">
-        <h1>代理商管理</h1>
+        <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>

src/views/account/agent/options.ts

@@ -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 },
+]

src/views/account/client/index.vue

@@ -204,16 +204,25 @@ const handleDialogType = (type: string) => {
 
 //统一获取表单选项
 const getOptions = async () => {
-    //获取代理列表
+    try {
-    const agentOptions = await getAgentOptionsApi()
+        // 并行请求，提升性能
-    //获取手续费模板列表
+        const [agentRes, feeTemplateRes, riskTemplateRes] = await Promise.all([
-    const feeTemplateOptions = await getFeeTemplateOptionsApi()
+            getAgentOptionsApi(),
-    //获取风控模板列表
+            getFeeTemplateOptionsApi(),
-    const riskTemplateOptions = await getRiskTemplateOptionsApi()
+            getRiskTemplateOptionsApi()
+        ]);
 
-    clientFormOptionsMap.value.feeTemplate = mapObjectToOptions(feeTemplateOptions as Record<string, string>)
+        const agentOptions = mapObjectToOptions(agentRes as Record<string, string>);
-    clientFormOptionsMap.value.riskTemplate = mapObjectToOptions(riskTemplateOptions as Record<string, string>)
+        const feeTemplateOptions = mapObjectToOptions(feeTemplateRes as Record<string, string>);
-    clientFormOptionsMap.value.agentUsername = mapObjectToOptions(agentOptions 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 resetForm = () => {
-const handleCancel = () => {
-    dialogVisible.value = false
-    dialogType.value = 'add'
     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 = {
+    resetForm()
-        //手续费模板
-        feeTemplate: '',
-        //风控模板
-        riskTemplate: '',
-        //所属上级
-        agentUsername: '',
-        email: '',
-        phone: '',
-        countryCode: '+86',
-    }
 }
 </script>
 

src/views/account/client/types.ts

@@ -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;
-}

src/views/account/client/备份.vue

@@ -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>