<template>
|
<div class="region-container">
|
<el-card>
|
<template #header>
|
<div class="card-header">
|
<h3 class="card-title">区域管理</h3>
|
</div>
|
</template>
|
|
|
<el-tree
|
lazy
|
:load="loadNode"
|
:props="treeProps"
|
highlight-current
|
node-key="id"
|
class="region-tree"
|
>
|
<template #default="{ data }">
|
<div class="tree-node">
|
<span class="node-name">{{ data.name }}</span>
|
<el-tag size="small" type="info" v-if="data.level === 1">省</el-tag>
|
<el-tag size="small" type="success" v-else-if="data.level === 2">市</el-tag>
|
<el-tag size="small" type="warning" v-else-if="data.level === 3">区县</el-tag>
|
</div>
|
</template>
|
</el-tree>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
import { RegionApi } from '@/api/region'
|
|
|
|
// 树配置（懒加载不需要预置 children）
|
const treeProps = {
|
label: 'name',
|
isLeaf: 'isLeaf',
|
}
|
|
// GraphQL 客户端
|
|
|
// 懒加载函数：根 → 省；省 → 市；市 → 区县
|
const loadNode = async (node, resolve) => {
|
try {
|
if (node.level === 0) {
|
// 根节点：加载所有省（pid=0），应包含四川与重庆
|
const provincesData = await RegionApi.getProvinces()
|
console.log('加载省份：', provincesData)
|
const provinces = (provincesData || []).map(p => ({
|
id: Number(p.id),
|
name: p.name,
|
pid: p.pid ? Number(p.pid) : null,
|
level: 1,
|
isLeaf: false,
|
}))
|
return resolve(provinces)
|
}
|
|
if (node.level === 1) {
|
// 省节点：加载城市
|
const provinceId = node.data.id
|
const citiesData = await RegionApi.getCities(provinceId)
|
console.log('加载城市：', citiesData)
|
const cities = (citiesData || []).map(c => ({
|
id: Number(c.id),
|
name: c.name,
|
pid: c.pid ? Number(c.pid) : null,
|
level: 2,
|
isLeaf: false,
|
}))
|
return resolve(cities)
|
}
|
|
if (node.level === 2) {
|
// 市节点：加载区县
|
const cityId = node.data.id
|
const districtsData = await RegionApi.getDistricts(cityId)
|
console.log('加载区县：', districtsData)
|
const districts = (districtsData || []).map(d => ({
|
id: Number(d.id),
|
name: d.name,
|
pid: d.pid ? Number(d.pid) : null,
|
level: 3,
|
isLeaf: true,
|
}))
|
return resolve(districts)
|
}
|
|
// 其他级别：无子节点
|
resolve([])
|
} catch (e) {
|
console.error('加载区域数据失败:', e)
|
resolve([])
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.region-container {
|
padding: 20px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.card-title {
|
margin: 0;
|
font-size: 18px;
|
font-weight: 500;
|
color: #303133;
|
}
|
|
.region-tree {
|
padding: 10px 0;
|
}
|
|
.tree-node {
|
display: inline-flex;
|
align-items: center;
|
gap: 8px;
|
}
|
|
.node-name {
|
color: #303133;
|
}
|
</style>
|
