This commit is contained in:
yzl
parent
2fded9a646
commit
e26deae5b5
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ const routes = [
|
|||
name: 'Client',
|
||||
component: () => import('@/views/account/client/index.vue'),
|
||||
meta: {
|
||||
title: '客户账户', // 左侧菜单显示的标题
|
||||
title: '客户管理', // 左侧菜单显示的标题
|
||||
}
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,34 +1,29 @@
|
|||
<template>
|
||||
<div class="client">
|
||||
<!-- 动态搜索组件 -->
|
||||
<ClientSearch :search-form="searchForm" :search-options="clientSearchOptions"
|
||||
:button-config="{ searchText: '搜索', resetText: '重置' }" @search="handleSearch" @reset="handleReset">
|
||||
<!-- 搜索组件 -->
|
||||
<ClientSearch :search-form="ClientSearchForm" :search-options="clientSearchOptions" @search="handleSearch"
|
||||
@reset="handleReset">
|
||||
<!-- 这里可以插入自定义插槽（如果需要） -->
|
||||
<!-- button 插槽：自定义额外按钮 -->
|
||||
<template #button="{ form }">
|
||||
<!-- form 就是子组件的 searchForm，可以直接使用 -->
|
||||
<el-button type="primary" @click="handleAdd()">
|
||||
添加客户
|
||||
</el-button>
|
||||
</template>
|
||||
</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>
|
||||
<!-- table组件 -->
|
||||
<!-- <ClientTable :table-data="ClientTableTree" :columns="clientTableColumns">
|
||||
<template #status="{ row }">
|
||||
<el-switch v-model="row.status" :active-value="1" :inactive-value="2" active-text="启用"
|
||||
inactive-text="禁用" @change="handleStatusChange(row)" />
|
||||
</template>
|
||||
</ClientTable>
|
||||
<!-- 分页组件 -->
|
||||
<!-- <ClientPagination :pagination-data="ClientPaginationData" @page-change="handlePageChange" /> -->
|
||||
</div>
|
||||
<ClientPagination v-model="currentPage" v-model:page-size-value="pageSize" :total="total"
|
||||
@pagination-change="handlePaginationChange" />
|
||||
<!-- dialog -->
|
||||
<!-- <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: '', // 用户名
|
||||
registerTime: [], // 注册时间范围（daterange 类型）
|
||||
status: '' // 状态（开启/关闭）
|
||||
|
||||
// 引入配置
|
||||
import { clientSearchOptions, clientTableColumns,clientAddFormOptions,clientChangeFormOptions } from './options'
|
||||
|
||||
//定义搜索表单数据
|
||||
const ClientSearchForm = ref({
|
||||
username: '',
|
||||
status: '',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
})
|
||||
|
||||
// 模拟表格数据
|
||||
const tableData = 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 }
|
||||
])
|
||||
//定义table数据
|
||||
const ClientTableTree = ref([])
|
||||
|
||||
// 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)
|
||||
|
||||
// 实际项目中，需要将 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
|
||||
// })
|
||||
console.log('搜索表单数据:', ClientSearchForm.value)
|
||||
}
|
||||
|
||||
// 4. 重置逻辑（点击「重置」触发）
|
||||
//定义重置方法
|
||||
const handleReset = () => {
|
||||
// 清空表单
|
||||
searchForm.value.username = ''
|
||||
searchForm.value.registerTime = []
|
||||
searchForm.value.status = ''
|
||||
|
||||
// 重置后自动发起一次查询
|
||||
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)
|
||||
ClientSearchForm.value = {
|
||||
username: '',
|
||||
status: '',
|
||||
startDate: '',
|
||||
endDate: ''
|
||||
}
|
||||
}
|
||||
|
||||
// 分页变更回调（处理业务逻辑）
|
||||
const handlePaginationChange = ({ currentPage: page, pageSize: size }) => {
|
||||
// 更新分页参数
|
||||
currentPage.value = page
|
||||
pageSize.value = size
|
||||
// 重新请求数据
|
||||
fetchData()
|
||||
//定义添加客户方法
|
||||
const handleAdd = () => {
|
||||
console.log('添加客户')
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
@ -1,31 +1,68 @@
|
|||
//定义客户搜索表单配置
|
||||
export const clientSearchOptions = [
|
||||
{
|
||||
prop: 'username',
|
||||
label: '用户名',
|
||||
type: 'input' as const,
|
||||
placeholder: '请输入用户名',
|
||||
minWidth: '120px'
|
||||
placeholder: '用户名',
|
||||
width: '120px'
|
||||
},
|
||||
{
|
||||
prop: 'registerTime',
|
||||
label: '注册开始时间', // 标签与图片一致
|
||||
prop: "startDate",
|
||||
label: '注册开始时间',
|
||||
type: 'date' as const,
|
||||
dateType: 'daterange' as const, // 时间范围选择器
|
||||
startPlaceholder: '开始日期',
|
||||
endPlaceholder: '结束日期',
|
||||
dateType: 'date' as const, // 时间范围选择器
|
||||
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: '是否升级为代理' },
|
||||
|
||||
]
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue