liruiqiang
2 months ago
2 changed files with 390 additions and 7 deletions
@ -1,13 +1,392 @@ |
|||||
<template> |
<template> |
||||
<div>111111</div> |
|
||||
|
<div class="page-container"> |
||||
|
<!-- 搜索区域 --> |
||||
|
<div class="search-container"> |
||||
|
<div class="search-form"> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">账号</span> |
||||
|
<el-input |
||||
|
v-model="searchForm.dccode" |
||||
|
placeholder="请输入账号" |
||||
|
clearable |
||||
|
style="height: 36px; width: 140px;" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">姓名</span> |
||||
|
<el-input |
||||
|
v-model="searchForm.dcname" |
||||
|
placeholder="请输入姓名" |
||||
|
clearable |
||||
|
style="height: 36px; width: 180px;" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">地区</span> |
||||
|
<el-select |
||||
|
v-model="searchForm.market" |
||||
|
placeholder="请选择地区" |
||||
|
clearable |
||||
|
style="height: 36px; width: 160px;" |
||||
|
:loading="isRegionLoading" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="region in regionList" |
||||
|
:key="region.value" |
||||
|
:label="region.label" |
||||
|
:value="region.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="search-item"> |
||||
|
<span class="form-label">注册方式</span> |
||||
|
<el-input |
||||
|
v-model="searchForm.register_type" |
||||
|
placeholder="请输入手机号/邮箱" |
||||
|
clearable |
||||
|
style="height: 36px; width: 220px;" |
||||
|
/> |
||||
|
</div> |
||||
|
<div class="button-group"> |
||||
|
<el-button type="primary" @click="search">搜索</el-button> |
||||
|
<el-button type="danger" @click="enableAccess">开通权限</el-button> |
||||
|
<el-button type="success" @click="exportExcel">导出Excel列表</el-button> |
||||
|
<el-button color="#626aef" @click="exportList">查看导出列表</el-button> |
||||
|
<el-button type="primary" @click="resetBn">重置</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 数据 --> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
style="width: 100%; margin-top: 20px;" |
||||
|
header-cell-class-name="table-header" |
||||
|
@sort-change="handleSortChange" |
||||
|
:default-sort="{ prop: null, order: null }" |
||||
|
class="table-rounded" |
||||
|
:loading="tableLoading" |
||||
|
> |
||||
|
<el-table-column prop="id" label="序号" align="center" header-align="center" type="index" width="60"/> |
||||
|
<el-table-column prop="dccode" label="账号" align="center" header-align="center"/> |
||||
|
<el-table-column prop="dcname" label="姓名" align="center" header-align="center" width="150"/> |
||||
|
<el-table-column prop="market" label="地区" align="center" header-align="center"/> |
||||
|
<el-table-column prop="phone" label="电话" align="center" header-align="center"/> |
||||
|
<el-table-column prop="email" label="邮箱" align="center" header-align="center" width="200"/> |
||||
|
<el-table-column prop="created_at" label="注册时间" align="center" header-align="center" sortable="custom" width="200"/> |
||||
|
<el-table-column prop="expire_time" label="到期时间" align="center" header-align="center" sortable="custom" width="200"/> |
||||
|
<el-table-column label="操作" width="180" align="center" header-align="center"> |
||||
|
<template #default="scope"> |
||||
|
<el-button type="text" @click="handleEdit(scope.row)">编辑</el-button> |
||||
|
<el-button type="text" @click="handleLog(scope.row.id)">操作日志</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页组件 --> |
||||
|
<div class="demo-pagination-block"> |
||||
|
<el-pagination |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page="currentPage" |
||||
|
:page-sizes="[10, 20, 50, 100]" |
||||
|
:page-size="10" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
:total= "datatotal" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
|
<script setup> |
||||
|
import { ref, reactive, computed, onMounted } from 'vue'; |
||||
|
|
||||
|
// 搜索表单 |
||||
|
const searchForm = reactive({ |
||||
|
dccode: '', |
||||
|
dcname: '', |
||||
|
market: '', |
||||
|
register_type: '' |
||||
|
}); |
||||
|
|
||||
|
// 排序参数 |
||||
|
const sortProp = ref(null); |
||||
|
const sortOrder = ref(null); |
||||
|
|
||||
|
// 表格数据 |
||||
|
const tableData = ref([ |
||||
|
{ |
||||
|
"id": 3, |
||||
|
"dccode": "DC44972906", |
||||
|
"dcname": "qwdasdas", |
||||
|
"market": "越南", |
||||
|
"phone_country": "+86", |
||||
|
"phone": "17861484999", |
||||
|
"email": "q61w4588746@163.com", |
||||
|
"created_at": "2025-10-30 16:56:44", |
||||
|
"expire_time": "2099-12-31 23:59:59" |
||||
|
}, |
||||
|
{ |
||||
|
"id": 2, |
||||
|
"dccode": "DC73412532", |
||||
|
"dcname": "S1wire", |
||||
|
"market": "中国", |
||||
|
"phone_country": "+86", |
||||
|
"phone": "1831572969", |
||||
|
"email": "91224746@163.com", |
||||
|
"created_at": "2025-10-29 19:54:48", |
||||
|
"expire_time": "2099-12-31 23:59:59" |
||||
|
}, |
||||
|
{ |
||||
|
"id": 1, |
||||
|
"dccode": "DC30454647", |
||||
|
"dcname": "EthanAZ", |
||||
|
"market": "中国", |
||||
|
"phone_country": "+86", |
||||
|
"phone": "18315796169", |
||||
|
"email": "91224588746@163.com", |
||||
|
"created_at": "2025-10-29 18:47:43", |
||||
|
"expire_time": "2026-01-01 19:02:46" |
||||
|
} |
||||
|
]); |
||||
|
const tableLoading = ref(false); |
||||
|
const datatotal = ref(0) |
||||
|
|
||||
|
// 分页参数 |
||||
|
const currentPage = ref(1); // 对应分页当前页 |
||||
|
const pageSize = ref(10); // 对应分页每页条数 |
||||
|
|
||||
|
// 地区下拉框相关 |
||||
|
const regionList = ref([ |
||||
|
{ label: '香港', value: '香港' }, |
||||
|
{ label: '马来西亚', value: '马来西亚' }, |
||||
|
{ label: '泰国', value: '泰国' }, |
||||
|
{ label: '新加坡', value: '新加坡' }, |
||||
|
{ label: '越南', value: '越南' } |
||||
|
]); |
||||
|
const isRegionLoading = ref(false); |
||||
|
|
||||
|
// 获取地区列表 |
||||
|
const fetchRegionList = async () => { |
||||
|
try { |
||||
|
isRegionLoading.value = true; |
||||
|
// 下面添加方法 |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error('获取地区列表失败：', error); |
||||
|
regionList.value = []; |
||||
|
} finally { |
||||
|
isRegionLoading.value = false; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 获取表格数据 |
||||
|
const fetchTableData = async () => { |
||||
|
try { |
||||
|
tableLoading.value = true; |
||||
|
const requestParams = { |
||||
|
dccode: searchForm.dccode, |
||||
|
dcname: searchForm.dcname, |
||||
|
market: searchForm.market, |
||||
|
register_type: searchForm.register_type, |
||||
|
sort_field: sortProp.value, |
||||
|
sort_order: sortOrder.value, |
||||
|
page: currentPage.value, |
||||
|
page_size: pageSize.value |
||||
|
}; |
||||
|
datatotal.value = 3; |
||||
|
|
||||
|
} catch (error) { |
||||
|
console.error('获取表格数据失败：', error); |
||||
|
tableData.value = []; |
||||
|
} finally { |
||||
|
tableLoading.value = false; |
||||
} |
} |
||||
|
}; |
||||
|
|
||||
|
// 组件挂载时：获取地区列表 + 初始化表格数据 |
||||
|
onMounted(() => { |
||||
|
fetchRegionList(); |
||||
|
fetchTableData(); |
||||
|
}); |
||||
|
|
||||
|
// 搜索按钮 |
||||
|
const search = () => { |
||||
|
currentPage.value = 1; |
||||
|
fetchTableData(); |
||||
|
}; |
||||
|
|
||||
|
// 开通权限按钮 |
||||
|
const enableAccess = () => { |
||||
|
console.log('开通权限操作'); |
||||
|
}; |
||||
|
|
||||
|
// 导出Excel列表按钮 |
||||
|
const exportExcel = () => { |
||||
|
console.log('导出Excel列表'); |
||||
|
}; |
||||
|
|
||||
|
// 查看导出列表按钮 |
||||
|
const exportList = () => { |
||||
|
console.log('查看导出列表'); |
||||
|
}; |
||||
|
|
||||
|
// 重置按钮 |
||||
|
const resetBn = () => { |
||||
|
searchForm.dccode = ''; |
||||
|
searchForm.dcname = ''; |
||||
|
searchForm.market = ''; |
||||
|
searchForm.register_type = ''; |
||||
|
sortProp.value = null; |
||||
|
sortOrder.value = null; |
||||
|
currentPage.value = 1; |
||||
|
pageSize.value = 10; |
||||
|
fetchTableData(); |
||||
|
console.log('表单已重置，排序已取消'); |
||||
|
}; |
||||
|
|
||||
|
// 编辑 |
||||
|
const handleEdit = (row) => { |
||||
|
console.log('编辑用户：', row); |
||||
|
}; |
||||
|
|
||||
|
// 操作日志 |
||||
|
const handleLog = (id) => { |
||||
|
console.log('操作日志：', id); |
||||
|
}; |
||||
|
|
||||
|
// 分页方法 |
||||
|
const handleSizeChange = (val) => { |
||||
|
pageSize.value = val; |
||||
|
fetchTableData(); |
||||
|
console.log(`每页 ${val} 条`); |
||||
|
}; |
||||
|
|
||||
|
const handleCurrentChange = (val) => { |
||||
|
currentPage.value = val; |
||||
|
fetchTableData(); |
||||
|
console.log(`当前页: ${val}`); |
||||
|
}; |
||||
|
|
||||
|
// 排序事件 |
||||
|
const handleSortChange = (sort) => { |
||||
|
const { prop, order } = sort; |
||||
|
// 仅允许created_at（注册时间）和expire_time（到期时间）排序 |
||||
|
if (!['created_at', 'expire_time'].includes(prop)) return; |
||||
|
|
||||
|
// 覆盖排序状态（实现二选一） |
||||
|
sortProp.value = prop; // 保存当前排序字段 |
||||
|
sortOrder.value = order; // 保存当前排序方式 |
||||
|
|
||||
|
fetchTableData(); |
||||
|
console.log(`排序字段：${sortProp.value}，排序方式：${sortOrder.value}`); |
||||
|
}; |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
|
||||
|
<style scoped> |
||||
|
/* 父容器 */ |
||||
|
.page-container { |
||||
|
position: relative; |
||||
|
min-height: 600px; |
||||
|
} |
||||
|
|
||||
|
/* 搜索区域 */ |
||||
|
.search-container { |
||||
|
display: flex; |
||||
|
height: 67px; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: flex-start; |
||||
|
gap: 10px; |
||||
|
align-self: stretch; |
||||
|
border-radius: 8px; |
||||
|
background: #FEFAF9; |
||||
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); |
||||
|
padding: 0 15px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
|
||||
|
/* 搜索表单 */ |
||||
|
.search-form { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
width: 100%; |
||||
|
gap: 15px; |
||||
|
flex-wrap: nowrap; |
||||
|
} |
||||
|
|
||||
|
/* 单个搜索项 */ |
||||
|
.search-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 6px; |
||||
|
} |
||||
|
|
||||
|
/* 搜索标签文字 */ |
||||
|
.form-label { |
||||
|
font-weight: 800 !important; |
||||
|
font-size: 15px; |
||||
|
text-align: left; |
||||
|
color: #333; |
||||
|
} |
||||
|
|
||||
|
/* 按钮组 */ |
||||
|
.button-group { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 0px !important; |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
/* 按钮样式 */ |
||||
|
.button-group .el-button { |
||||
|
padding: 6px 10px !important; |
||||
|
font-size: 14px !important; |
||||
|
height: 36px !important; |
||||
|
} |
||||
|
|
||||
|
/* 表格样式 */ |
||||
|
.table-rounded { |
||||
|
border-radius: 12px !important; |
||||
|
overflow: hidden !important; |
||||
|
border: 1px solid #e4e7ed !important; |
||||
|
} |
||||
|
|
||||
|
.table-header { |
||||
|
text-align: center !important; |
||||
|
font-weight: 800 !important; |
||||
|
font-size: 15px !important; |
||||
|
color: #333 !important; |
||||
|
background-color: #f8f9fa !important; |
||||
|
} |
||||
|
|
||||
|
.el-table__cell { |
||||
|
border-right: none !important; |
||||
|
border-bottom: 1px solid #e4e7ed !important; |
||||
|
} |
||||
|
|
||||
|
.el-table__header th.el-table__cell { |
||||
|
border-right: none !important; |
||||
|
border-bottom: 1px solid #e4e7ed !important; |
||||
|
} |
||||
|
|
||||
|
.el-table__row:hover .el-table__cell { |
||||
|
background-color: #fafafa !important; |
||||
|
} |
||||
|
|
||||
|
/* 分页组件样式 */ |
||||
|
.demo-pagination-block { |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
height: 44px; |
||||
|
padding: 0 16px; |
||||
|
align-items: center; |
||||
|
gap: 16px; |
||||
|
position: absolute; |
||||
|
margin-top: 10px; |
||||
|
border-radius: 0 0 3px 3px; |
||||
|
border-top: 1px solid #EAEAEA; |
||||
|
background: #FEFBFB; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue