perf: 优化区域管理页面性能
- 使用后端 /region/tree 接口,避免前端递归构建树 - 默认折叠树节点,减少 DOM 渲染
This commit is contained in:
parent
124013703f
commit
24625133e3
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue