inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 /* eslint-disable */
I 2 <template>
3
4   <a-card :bordered="false">
5
6     <a-table
7       ref="table"
8       size="middle"
9       :rowKey="(record) => record.id"
10       :pagination="false"
11       :defaultExpandAllRows="true"
12       :columns="columns"
13       :dataSource="data"
14       :loading="loading"
15       showPagination="auto"
16       @expand="onExpand">
17     </a-table>
18
19   </a-card>
20
21 </template>
22
23 <script>
24   import { getAreaList } from '@/api/modular/system/areaManage'
25
26   export default {
27
28     data () {
29       return {
30         queryParam: {},
31         data: [],
32         loading: true,
33         // 定义展开过的节点的id数组
34         expandedData: [],
35         columns: [
36           {
37             title: '名称',
38             dataIndex: 'name'
39           },
40           {
41             title: '层级',
42             dataIndex: 'levelCode'
43           },
44           {
45             title: '简称',
46             dataIndex: 'shortName'
47           },
48           {
49             title: '组合名',
50             dataIndex: 'mergerName'
51           },
52           {
53             title: '拼音',
54             dataIndex: 'pinyin'
55           },
56           {
57             title: '邮编',
58             dataIndex: 'zipCode'
59           },
60           {
61             title: '经度',
62             dataIndex: 'lng'
63           },
64           {
65             title: '纬度',
66             dataIndex: 'lat'
67           }
68         ],
69         selectedRowKeys: []
70       }
71     },
72
73     created () {
74       this.loadData()
75     },
76
77     methods: {
78       loadData () {
79         this.loading = true
80         getAreaList(this.queryParam).then((res) => {
81           if (res.success) {
82             this.data = res.data
83             this.removeEmptyChildren(this.data)
84           }
85         }).finally(() => {
86           this.loading = false
87         })
88       },
89
90       removeEmptyChildren(data) {
91         if (data == null || data.length === 0) return
92         for (let i = 0; i < data.length; i++) {
93           const item = data[i]
94           // 如果为最终子节点或其为“市辖区”,则其没有子节点
95           if (item.levelCode === 4 || (item.levelCode === 2 && item.name === '市辖区')) {
96              item.children = null
97           }
98         }
99       },
100       onSelectChange (selectedRowKeys) {
101         this.selectedRowKeys = selectedRowKeys
102       },
103       onExpand(expanded, record) {
104         if (expanded) {
105           // 判断其是否已经展开过
106           const index = this.expandedData.indexOf(record.id)
107           // 如果没展开过,则请求接口
108           if (index === -1) {
109             this.queryParam.parentCode = record.areaCode
110             getAreaList(this.queryParam).then((res) => {
111               if (res.success) {
112                 // 设置为其子节点
113                 record.children = res.data
114                 this.removeEmptyChildren(record.children)
115                 // 将其放入展开过的id集合
116                 this.expandedData.push(record.id)
117               }
118             }).finally(() => {
119               this.loading = false
120             })
121           }
122         }
123       }
124     }
125   }
126
127 </script>
128 <style scoped>
129
130 </style>