131 lines
4.0 KiB
Vue
131 lines
4.0 KiB
Vue
<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>
|