提交

src/components/common/Search.vue

@@ -4,7 +4,7 @@
             <!-- 动态生成的表单项 -->
             <template v-for="item in searchOptions" :key="item.prop">
                 <el-form-item :label="item.label" :prop="item.prop" v-if="!item.slot"
-                    :style="{ minWidth: item.minWidth }">
+                    :style="{ minWidth: item.minWidth, width: item.width }">
                     <!-- 输入框 -->
                     <el-input v-if="item.type === 'input'" v-model="searchForm[item.prop]"
                         :placeholder="item.placeholder || `请输入${item.label}`" :clearable="item.clearable ?? true"
@@ -24,7 +24,8 @@
                         :start-placeholder="item.startPlaceholder || '开始日期'"
                         :end-placeholder="item.endPlaceholder || '结束日期'"
                         :value-format="item.valueFormat || 'YYYY-MM-DD'" :clearable="item.clearable ?? true"
-                        :disabled="item.disabled" />
+                        :disabled="item.disabled" :locale="'zhCn'" :picker-options="item.pickerOptions" 
+                        />
 
                     <!-- 单选框组 -->
                     <el-radio-group v-else-if="item.type === 'radio'" v-model="searchForm[item.prop]"
@@ -88,7 +89,11 @@ interface SearchOption {
     startPlaceholder?: string; // 日期范围开始占位符
     endPlaceholder?: string; // 日期范围结束占位符
     valueFormat?: string; // 日期格式
-    width?: string; // 输入框宽度
+    // 添加年份/日期限制配置
+    pickerOptions?: {
+        disabledDate?: (date: Date) => boolean;
+    };
+    width?: string; // 宽度
     minWidth?: string; // 最小宽度
 }
 
@@ -103,17 +108,15 @@ const props = defineProps({
     searchForm: {
         type: Object,
         required: true,
-        description: '搜索表单数据对象'
     },
     searchOptions: {
-        type: Array as () => SearchOption[],
+        type: Array as () => SearchOption[
+        ],
         required: true,
-        description: '搜索项配置数组'
     },
     buttonConfig: {
         type: Object as () => ButtonConfig,
         default: () => ({}),
-        description: '按钮文本配置'
     }
 })
 
@@ -124,13 +127,16 @@ defineEmits(['search', 'reset'])
 <style scoped lang="scss">
 .search-container {
     margin-bottom: 20px;
-    .el-form{
+
+    .el-form {
         display: flex;
         width: 100%;
-        .el-form-item{
+
+        .el-form-item {
             flex: 1 1 auto;
         }
     }
+
     :deep(.el-form-item) {
         margin-bottom: 0;
         margin-right: 16px;

src/main.ts

@@ -2,6 +2,10 @@
 import './assets/styles/global.scss'
 import 'element-plus/dist/index.css'
 
+//语言配置
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 
@@ -12,5 +16,8 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(ElementPlus, {
+    locale: zhCn,
+})
 
 app.mount('#app')

src/router/index.ts

@@ -100,7 +100,7 @@ const routes = [
             name: 'Client',
             component: () => import('@/views/account/client/index.vue'),
             meta: {
-              title: '客户账户', // 左侧菜单显示的标题
+              title: '客户管理', // 左侧菜单显示的标题
             }
           },
         ]

src/views/account/client/index.vue

@@ -1,34 +1,29 @@
 <template>
     <div class="client">
-        <!-- 动态搜索组件 -->
+        <!-- 搜索组件 -->
-        <ClientSearch :search-form="searchForm" :search-options="clientSearchOptions"
+        <ClientSearch :search-form="ClientSearchForm" :search-options="clientSearchOptions" @search="handleSearch"
-            :button-config="{ searchText: '搜索', resetText: '重置' }" @search="handleSearch" @reset="handleReset">
+            @reset="handleReset">
             <!-- 这里可以插入自定义插槽（如果需要） -->
+            <!-- button 插槽：自定义额外按钮 -->
+            <template #button="{ form }">
+                <!-- form 就是子组件的 searchForm，可以直接使用 -->
+                <el-button type="primary" @click="handleAdd()">
+                    添加客户
+                </el-button>
+            </template>
         </ClientSearch>
-
+        <!-- table组件 -->
-        <!-- 下方的表格区域（与你的图片对应） -->
+        <!-- <ClientTable :table-data="ClientTableTree" :columns="clientTableColumns">
-        <el-table :data="tableData" border>
+            <template #status="{ row }">
-            <el-table-column prop="username" label="用户名" />
+                <el-switch v-model="row.status" :active-value="1" :inactive-value="2" active-text="启用"
-            <el-table-column prop="registerStartTime" label="注册开始时间" />
+                    inactive-text="禁用" @change="handleStatusChange(row)" />
-            <el-table-column prop="registerEndTime" label="注册结束时间" />
+            </template>
-            <el-table-column prop="status" label="状态">
+        </ClientTable>
-                <template #default="{ row }">
+        <!-- 分页组件 -->
-                    <el-tag :type="row.status === 1 ? 'success' : 'danger'">
+        <!-- <ClientPagination :pagination-data="ClientPaginationData" @page-change="handlePageChange" /> -->
-                        {{ 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"
+    <!-- dialog -->
-        @pagination-change="handlePaginationChange" />
+     <!-- <ClientDialog :dialog-visible="dialogVisible" :dialog-title="dialogTitle" :dialog-type="dialogType" :form-options="clientAddFormOptions" @close="dialogVisible = false" @submit="handleSubmit"/> --> -->
 </template>
 
 <script lang="ts" setup>
@@ -36,100 +31,58 @@
 import ClientSearch from '@/components/common/Search.vue'
 import ClientTable from '@/components/common/Table.vue'
 import ClientPagination from '@/components/common/Pagination.vue'
+import ClientDialog from '@/components/common/Dialog.vue'
 
-// 引入搜索配置
-import { clientSearchOptions } from './options'
 
-// 定义搜索表单（与配置项
+
-const searchForm = ref({
+// 引入配置
-    username: '',           // 用户名
+import { clientSearchOptions, clientTableColumns,clientAddFormOptions,clientChangeFormOptions } from './options'
-    registerTime: [],       // 注册时间范围（daterange 类型）
+
-    status: ''              // 状态（开启/关闭）
+//定义搜索表单数据
+const ClientSearchForm = ref({
+    username: '',
+    status: '',
+    startDate: '',
+    endDate: ''
 })
 
-// 模拟表格数据
+//定义table数据
-const tableData = ref([
+const ClientTableTree = ref([])
-    { username: 'admin', registerStartTime: '2026-01-01', registerEndTime: '2026-01-02', status: 1 },
-    { username: 'test', registerStartTime: '2026-02-01', registerEndTime: '2026-02-02', status: 0 }
-])
 
-// 3. 查询逻辑（点击「搜索」触发）
+//定义分页数据
+const ClientPaginationData = ref({
+    total: 0,
+    currentPage: 1,
+    pageSize: 10
+})
+
+//定义dialog数据
+const dialogVisible = ref(false)
+const dialogTitle = ref('')
+const dialogType = ref('')
+
+/**
+ * @description: 搜索方法
+ * @param {any} formData 搜索表单数据
+ * @return {void}
+ */
+//定义搜索方法
 const handleSearch = () => {
-    console.log('发起查询，参数：', searchForm)
+    console.log('搜索表单数据:', ClientSearchForm.value)
-
-    // 实际项目中，需要将 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 = () => {
-    // 清空表单
+    ClientSearchForm.value = {
-    searchForm.value.username = ''
+        username: '',
-    searchForm.value.registerTime = []
+        status: '',
-    searchForm.value.status = ''
+        startDate: '',
-
+        endDate: ''
-    // 重置后自动发起一次查询
-    handleSearch()
-}
-
-// 页面初始化时自动查询一次
-handleSearch()
-
-
-
-
-
-
-
-
-
-
-
-
-
-// 分页核心参数
-const currentPage = ref(1) // 当前页
-const pageSize = ref(10)   // 每页条数
-const total = ref(0)       // 总条数
-
-// 初始化加载数据
-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 }) => {
+const handleAdd = () => {
-    // 更新分页参数
+    console.log('添加客户')
-    currentPage.value = page
-    pageSize.value = size
-    // 重新请求数据
-    fetchData()
 }
-</script>
+</script>

src/views/account/client/options.ts

@@ -1,31 +1,68 @@
+//定义客户搜索表单配置
 export const clientSearchOptions = [
     {
         prop: 'username',
         label: '用户名',
         type: 'input' as const,
-        placeholder: '请输入用户名',
+        placeholder: '用户名',
-        minWidth: '120px'
+        width: '120px'
     },
     {
-        prop: 'registerTime',
+        prop: "startDate",
-        label: '注册开始时间', // 标签与图片一致
+        label: '注册开始时间',
         type: 'date' as const,
-        dateType: 'daterange' as const, // 时间范围选择器
+        dateType: 'date' as const, // 时间范围选择器
-        startPlaceholder: '开始日期',
-        endPlaceholder: '结束日期',
         valueFormat: 'YYYY-MM-DD',
-        minWidth: '200px'
+        // minWidth: '200px'
+        width: '180px'
+    },
+    {
+        prop: "endDate",
+        label: '注册结束时间',
+        type: 'date' as const,
+        dateType: 'date' as const, // 时间范围选择器
+        valueFormat: 'YYYY-MM-DD',
+        // minWidth: '200px'
+        width: '180px'
     },
     {
         prop: 'status',
         label: '状态',
         type: 'select' as const,
         placeholder: '选择状态',
-        width: '120px',
+        width: '80px',
         options: [
             { label: '全部', value: '' },
             { label: '开启', value: 1 },
             { label: '关闭', value: 0 }
         ],
     }
+]
+
+//定义客户table列配置
+export const clientTableColumns = [
+    { prop: 'id', label: 'ID' },
+    { prop: 'username', label: '用户名' },
+    { prop: 'registerTime', label: '注册时间' },
+    { prop: 'agentUsername', label: '所属代理' },
+    { prop: 'status', label: '状态' },
+    { prop: 'action', label: '操作' },
+]
+
+//定义添加客户form配置
+export const clientAddFormOptions = [
+    { prop: 'clientName', label: '客户名称', type: 'input' as const, placeholder: '客户名称' },
+    { prop: 'feeTemplate', label: '手续费模板', type: 'select' as const, placeholder: '选择手续费模板' },
+    { prop: 'isUpgrade', label: '是否升级为代理', type: 'radio' as const, placeholder: '是否升级为代理' },
+    { prop: 'riskTemplate', label: '风控模板', type: 'select' as const, placeholder: '选择风控模板' },
+    { prop: 'parentUsername', label: '所属上级', type: 'input' as const, placeholder: '所属上级' },
+    { prop: 'contactPhoneOrEmail', label: '手机号或邮箱', type: 'input' as const, placeholder: '手机号或邮箱' },
+]
+
+//定义修改客户form配置
+export const clientChangeFormOptions = [
+    { prop: 'feeTemplate', label: '手续费模板', type: 'select' as const, placeholder: '选择手续费模板' },
+    { prop: 'riskTemplate', label: '风控模板', type: 'select' as const, placeholder: '选择风控模板' },
+    { prop: 'isUpgrade', label: '是否升级为代理', type: 'radio' as const, placeholder: '是否升级为代理' },
+
 ]

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

@@ -0,0 +1,130 @@
+<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>