Jeecgboot：中国省市区树形数据生成

Jeecgboot框架自带省市区下拉选项，但是我们的项目需要使用树形勾选，所以需要进行改造。

Jeecgboot的省市区数据来源于china-area-data组件的data.json，我们先利用框架自带的area.js生成具有pid和hasChild字段的表格数据。

area.js

import pcaa from 'china-area-data';
// 返回所有省
export function getProvince() {
  let arr = []
  const province = pcaa['86']
  Object.keys(province).map(key => {
    arr.push({
      value: key,
      label: province[key],
    });
  })
  return arr;
}
// 根据选择的省，返回对应的市
export function getCity(province) {
  let arr = []
  const city = pcaa[province]
  Object.keys(city).map(key => {
    arr.push({
      value: key,
      label: city[key],
    });
  })
  return arr;
}
// 根据选择的市，返回对应的区
export function getDistrict(city) {
  let arr = []
  const district = pcaa[city]
  Object.keys(district).map(key => {
    arr.push({
      value: key,
      label: district[key],
    });
  })
  return arr;
}

完整代码

<template>
    <div>
    </div>
</template>
<script>
    import {
        getProvince,
        getCity,
        getDistrict
    } from '@/utils/area'
    export default {
        data() {
            return {};
        },
        created() {
            this.tableToExcel();
        },
        methods: {
            getTreeArr() {
                let table = [];
                let col = ['编号', '名称', '父级节点', '是否有子节点'];
                table.push(col);
                let provinces = getProvince();
                provinces.forEach(p => {
                    // 省份没有父节点，有子节点
                    let row = [p.value, p.label, '0', '1'];
                    table.push(row);
                    let cities = getCity(p.value);
                    cities.forEach(c => {
                        // 市的父节点是省，有子节点
                        row = [c.value, c.label, p.value, '1'];
                        table.push(row);
                        let districts = getDistrict(c.value);
                        districts.forEach(d => {
                            //区的父节点是市，没有子节点
                            row = [d.value, d.label, c.value, '0'];
                            table.push(row);
                        })
                    })
                })
                console.log(table);
                return table;

            },
            tableToExcel() {
                const jsonData = this.getTreeArr() //想要导出的数据，必须是数组
                // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
                let str = `中国省市区树状图数据表\n`;
                // 增加\t为了不让表格显示科学计数法或者其他格式
                for (let i = 0; i < jsonData.length; i++) {
                 for (const key in jsonData[i]) {
                        str += `${jsonData[i][key] + '\t'},`
                    }
                    str += '\n';
                }
             // encodeURIComponent解决中文乱码
                const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str)
                // 通过创建a标签实现
                const link = document.createElement("a")
                link.href = uri;
                // 对下载的文件命名
                link.download = "中国省市区树状图数据表.csv"
                link.click()
            }

        },
    }
</script>
<style scoped>


</style>

打开csv文件，去掉所有空格，然后使用online表单的导入功能，将数据写入数据库。

关键点来了：

导入的时候每条记录的id是系统随机生成的，但是我们设置的pid是每个地点的code，并不是每条记录的id，这样导致页面只能看到省份，下面的子节点无法显示。

只需要用SQL语句让所有id等于当前行的code即可。

update dic_cn_adcode_tree set id = dic_cn_adcode_tree.code;

数据表效果：

数据处理做好了，只需要让后端返回树形组件需要的数据格式即可。

但如果你的后端太忙，我们也可以自己生成treedata。

完整代码：

<template>
    <div>
        <a-tree
            checkable
            :tree-data="treeData"
            :replaceFields="replaceFields"
            @select="onSelect"
            @check="onCheck"
          />
    </div>
</template>
<script>
    import {
        getProvince,
        getCity,
        getDistrict
    } from '@/utils/area'
    export default {
        data() {
            return {
                treeData:[],
                replaceFields:{children:'children', title:'label', key:'value' },
            };
        },
        created() {
            this.treeData = this.getTreeData();
            
        },
        methods: {
            onSelect(selectedKeys, info) {
                  console.log('selected', selectedKeys, info);
                },
                onCheck(checkedKeys, info) {
                  console.log('onCheck', checkedKeys, info);
                },
            getTreeData() {
                let china = [];
                let provinces = getProvince();//对象数组
                provinces.forEach(p => {
                    let province = p ;
                    let cities = []
                    getCity(p.value).forEach(c => {
                        let city = c;
                        let districts = getDistrict(c.value);
                        city.children = districts;
                        cities.push(city);
                    })
                    province.children = cities;
                    china.push(province);
                })
                console.log(JSON.stringify(china));
                return china;
            }

        }
    }
</script>
<style scoped>


</style>

最终效果

把treedata保存在json文件里，把value改成key，label改成title，以后就可以直接用了。

使用json文件直接生成tree的代码：

<template>
    <div>
        <a-tree
            checkable
            :tree-data="treeData"
            @check="onCheck"
          />
    </div>
</template>
<script>
    import treeData from '../src/utils/chinaTree.json'
    export default {
        data() {
            return {
                treeData
            };
        },
        created() {
            
        },
        methods: {
                onCheck(checkedKeys, info) {
                  console.log('onCheck', checkedKeys, info);
                }
        }
    }
</script>
<style scoped>


</style>