perf: 优化区域管理页面性能

- 使用后端 /region/tree 接口,避免前端递归构建树
- 默认折叠树节点,减少 DOM 渲染
This commit is contained in:
神码-方晓辉 2026-02-03 17:17:28 +08:00
parent 124013703f
commit 24625133e3
1 changed files with 6 additions and 17 deletions

View File

@ -118,7 +118,7 @@ const loading = ref(false)
const tableData = ref([]) const tableData = ref([])
const regionOptions = ref([]) const regionOptions = ref([])
const refreshTable = ref(true) const refreshTable = ref(true)
const isExpandAll = ref(true) const isExpandAll = ref(false) //
const queryParams = ref({ const queryParams = ref({
regionName: '', regionName: '',
@ -141,13 +141,13 @@ const rules = {
regionName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }] regionName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }]
} }
// // - 使
const getList = async () => { const getList = async () => {
loading.value = true loading.value = true
try { try {
const res = await request.get('/business/region/list', { params: queryParams.value }) const res = await request.get('/business/region/tree')
if (res.code === 200) { if (res.code === 200) {
tableData.value = buildTree(res.data || []) tableData.value = res.data || []
} }
} finally { } finally {
loading.value = false loading.value = false
@ -156,23 +156,12 @@ const getList = async () => {
// //
const getRegionOptions = async () => { const getRegionOptions = async () => {
const res = await request.get('/business/region/list') const res = await request.get('/business/region/tree')
if (res.code === 200) { if (res.code === 200) {
regionOptions.value = [{ regionId: 0, regionName: '顶级区域', children: buildTree(res.data || []) }] regionOptions.value = [{ regionId: 0, regionName: '顶级区域', children: res.data || [] }]
} }
} }
//
const buildTree = (data, parentId = 0) => {
return data
.filter(item => item.parentId === parentId)
.map(item => ({
...item,
children: buildTree(data, item.regionId)
}))
.filter(item => item.children.length > 0 || data.some(d => d.regionId === item.regionId))
}
// / // /
const toggleExpandAll = () => { const toggleExpandAll = () => {
refreshTable.value = false refreshTable.value = false