<template>
<div v-if="!disabled">
<el-cascader :options="cityList"
:size="size"
:style="myStyle"
:props="{
checkStrictly: checkStrictly,
label: 'region_name',
children: 'children',
value: 'region_code'
}"
@change="select"
v-model="codeArr"
:changeOnSelect="changeOnSelect"
:placeholder="placeholder"
:clearable="clearable"></el-cascader>
</div>
<div v-else>
<el-cascader :options="cityList"
:props="{
label: 'region_name',
children: 'children',
value: 'region_code'
}"
v-model="codeArr"
disabled
:style="myStyle">
</el-cascader>
</div>
</template>
<script type="text/javascript">
import { listToTreeList } from "@/plugins/common";
import { regionList, findFullNameByRegionCode } from "@/assets/region.js";
export default {
name: "RegionArea",
model: {
prop: "selectCode",
event: "select"
},
props: {
tile: {
type: Boolean,
default: false
},
checkStrictly: {
type: Boolean,
default: false
},
placeholder: {
type: String,
default: "请选择"
},
hasSelf: {
type: Boolean,
default: false
},
changeOnSelect: {
type: Boolean,
default: false
},
size: {
type: String,
default: ""
},
selectCode: {
type: String,
default: ""
},
disabled: {
type: Boolean,
default: false
},
root: {
type: String,
default: null
},
isShowName: {
type: Boolean,
default: false
},
myStyle: {
type: String,
default: "width:100%"
},
showLength: {
type: Number,
default: 4
},
clearable: {
type: Boolean,
default: false
}
},
data() {
return {
cityList: [],
codeArr: "",
showName: ""
};
},
methods: {
select: function(val) {
var ret = "";
if (val.length > 0) {
ret = val[val.length - 1];
}
if (this.isShowName) {
let showName = findFullNameByRegionCode(ret);
this.$emit("select", showName.replace(/ \/ /g, ""));
this.$emit("change", showName.replace(/ \/ /g, ""));
} else {
this.$emit("select", ret);
this.$emit("change", ret);
}
this.$emit("clearValidate");
},
reloadFinish: function() {
if (this.isShowName) {
return;
}
if (!this.$isNullOrEmpty(this.selectCode)) {
// this.selectCode = this.selectCode.substring(0, 9) + "000";
// let codeArr = [...new Set(findRegionCodeArr(this.selectCode))];
// let idx = codeArr.findIndex(r => r == this.MyToot);
// if (idx > -1) {
// codeArr.splice(idx, 1);
// }
this.$set(this, "codeArr", this.selectCode);
}
this.showName = findFullNameByRegionCode(this.selectCode);
}
},
watch: {
selectCode: function() {
this.reloadFinish();
}
},
mounted: function() {
var root = this.root;
if (this.$store.getters.regionCode && this.root == null) {
root = this.$store.getters.regionCode.substring(0, 4) + "00000000";
}
this.MyToot = root;
let regionList_filter = regionList.filter(r => {
return (
r.region_code.substring(0, this.showLength).padEnd(12, "0") ==
r.region_code
);
});
let cityList = listToTreeList(
regionList_filter,
root,
"region_code",
"parent_code",
"region_code"
);
this.cityList = cityList;
this.reloadFinish();
}
};
</script>
region.js 文件
export var regionList = [
{ region_code: '450000000000', region_name: '广西壮族自治区', parent_code: '000000000000' },
{ region_code: '450100000000', region_name: '南宁市', parent_code: '450000000000' },
{ region_code: '450102000000', region_name: '兴宁区', parent_code: '450100000000' },
{ region_code: '450103000000', region_name: '青秀区', parent_code: '450100000000' },
{ region_code: '450105000000', region_name: '江南区', parent_code: '450100000000' },
{ region_code: '450107000000', region_name: '西乡塘区', parent_code: '450100000000' },
{ region_code: '450108000000', region_name: '良庆区', parent_code: '450100000000' },
{ region_code: '450109000000', region_name: '邕宁区', parent_code: '450100000000' },
{ region_code: '450110000000', region_name: '武鸣区', parent_code: '450100000000' },
{ region_code: '450123000000', region_name: '隆安县', parent_code: '450100000000' },
{ region_code: '450124000000', region_name: '马山县', parent_code: '450100000000' },
{ region_code: '450125000000', region_name: '上林县', parent_code: '450100000000' },
{ region_code: '450126000000', region_name: '宾阳县', parent_code: '450100000000' },
{ region_code: '450127000000', region_name: '横县', parent_code: '450100000000' },
{ region_code: '450200000000', region_name: '柳州市', parent_code: '450000000000' },
{ region_code: '450202000000', region_name: '城中区', parent_code: '450200000000' },
{ region_code: '450203000000', region_name: '鱼峰区', parent_code: '450200000000' },
{ region_code: '450204000000', region_name: '柳南区', parent_code: '450200000000' },
{ region_code: '450205000000', region_name: '柳北区', parent_code: '450200000000' },
{ region_code: '450206000000', region_name: '柳江区', parent_code: '450200000000' },
{ region_code: '450222000000', region_name: '柳城县', parent_code: '450200000000' },
{ region_code: '450223000000', region_name: '鹿寨县', parent_code: '450200000000' },
{ region_code: '450224000000', region_name: '融安县', parent_code: '450200000000' },
{ region_code: '450225000000', region_name: '融水苗族自治县', parent_code: '450200000000' },
{ region_code: '450226000000', region_name: '三江侗族自治县', parent_code: '450200000000' },
{ region_code: '450300000000', region_name: '桂林市', parent_code: '450000000000' },
{ region_code: '450302000000', region_name: '秀峰区', parent_code: '450300000000' },
{ region_code: '450303000000', region_name: '叠彩区', parent_code: '450300000000' },
{ region_code: '450304000000', region_name: '象山区', parent_code: '450300000000' },
{ region_code: '450305000000', region_name: '七星区', parent_code: '450300000000' },
{ region_code: '450311000000', region_name: '雁山区', parent_code: '450300000000' },
{ region_code: '450312000000', region_name: '临桂区', parent_code: '450300000000' },
{ region_code: '450321000000', region_name: '阳朔县', parent_code: '450300000000' },
{ region_code: '450323000000', region_name: '灵川县', parent_code: '450300000000' },
{ region_code: '450324000000', region_name: '全州县', parent_code: '450300000000' },
{ region_code: '450325000000', region_name: '兴安县', parent_code: '450300000000' },
{ region_code: '450326000000', region_name: '永福县', parent_code: '450300000000' },
{ region_code: '450327000000', region_name: '灌阳县', parent_code: '450300000000' },
{ region_code: '450328000000', region_name: '龙胜各族自治县', parent_code: '450300000000' },
{ region_code: '450329000000', region_name: '资源县', parent_code: '450300000000' },
{ region_code: '450330000000', region_name: '平乐县', parent_code: '450300000000' },
{ region_code: '450381000000', region_name: '荔浦市', parent_code: '450300000000' },
{ region_code: '450400000000', region_name: '梧州市', parent_code: '450000000000' },
{ region_code: '450403000000', region_name: '万秀区', parent_code: '450400000000' },
{ region_code: '450405000000', region_name: '长洲区', parent_code: '450400000000' },
{ region_code: '450406000000', region_name: '龙圩区', parent_code: '450400000000' },
{ region_code: '450421000000', region_name: '苍梧县', parent_code: '450400000000' },
{ region_code: '450422000000', region_name: '藤县', parent_code: '450400000000' },
{ region_code: '450423000000', region_name: '蒙山县', parent_code: '450400000000' },
{ region_code: '450481000000', region_name: '岑溪市', parent_code: '450400000000' },
{ region_code: '450500000000', region_name: '北海市', parent_code: '450000000000' },
{ region_code: '450502000000', region_name: '海城区', parent_code: '450500000000' },
{ region_code: '450503000000', region_name: '银海区', parent_code: '450500000000' },
{ region_code: '450512000000', region_name: '铁山港区', parent_code: '450500000000' },
{ region_code: '450521000000', region_name: '合浦县', parent_code: '450500000000' },
{ region_code: '450600000000', region_name: '防城港市', parent_code: '450000000000' },
{ region_code: '450602000000', region_name: '港口区', parent_code: '450600000000' },
{ region_code: '450603000000', region_name: '防城区', parent_code: '450600000000' },
{ region_code: '450621000000', region_name: '上思县', parent_code: '450600000000' },
{ region_code: '450681000000', region_name: '东兴市', parent_code: '450600000000' },
{ region_code: '450700000000', region_name: '钦州市', parent_code: '450000000000' },
{ region_code: '450702000000', region_name: '钦南区', parent_code: '450700000000' },
{ region_code: '450703000000', region_name: '钦北区', parent_code: '450700000000' },
{ region_code: '450721000000', region_name: '灵山县', parent_code: '450700000000' },
{ region_code: '450722000000', region_name: '浦北县', parent_code: '450700000000' },
{ region_code: '450800000000', region_name: '贵港市', parent_code: '450000000000' },
{ region_code: '450802000000', region_name: '港北区', parent_code: '450800000000' },
{ region_code: '450803000000', region_name: '港南区', parent_code: '450800000000' },
{ region_code: '450804000000', region_name: '覃塘区', parent_code: '450800000000' },
{ region_code: '450821000000', region_name: '平南县', parent_code: '450800000000' },
{ region_code: '450881000000', region_name: '桂平市', parent_code: '450800000000' },
{ region_code: '450900000000', region_name: '玉林市', parent_code: '450000000000' },
{ region_code: '450902000000', region_name: '玉州区', parent_code: '450900000000' },
{ region_code: '450903000000', region_name: '福绵区', parent_code: '450900000000' },
{ region_code: '450921000000', region_name: '容县', parent_code: '450900000000' },
{ region_code: '450922000000', region_name: '陆川县', parent_code: '450900000000' },
{ region_code: '450923000000', region_name: '博白县', parent_code: '450900000000' },
{ region_code: '450924000000', region_name: '兴业县', parent_code: '450900000000' },
{ region_code: '450981000000', region_name: '北流市', parent_code: '450900000000' },
{ region_code: '451000000000', region_name: '百色市', parent_code: '450000000000' },
{ region_code: '451002000000', region_name: '右江区', parent_code: '451000000000' },
{ region_code: '451003000000', region_name: '田阳区', parent_code: '451000000000' },
{ region_code: '451022000000', region_name: '田东县', parent_code: '451000000000' },
{ region_code: '451024000000', region_name: '德保县', parent_code: '451000000000' },
{ region_code: '451026000000', region_name: '那坡县', parent_code: '451000000000' },
{ region_code: '451027000000', region_name: '凌云县', parent_code: '451000000000' },
{ region_code: '451028000000', region_name: '乐业县', parent_code: '451000000000' },
{ region_code: '451029000000', region_name: '田林县', parent_code: '451000000000' },
{ region_code: '451030000000', region_name: '西林县', parent_code: '451000000000' },
{ region_code: '451031000000', region_name: '隆林各族自治县', parent_code: '451000000000' },
{ region_code: '451081000000', region_name: '靖西市', parent_code: '451000000000' },
{ region_code: '451082000000', region_name: '平果市', parent_code: '451000000000' },
{ region_code: '451100000000', region_name: '贺州市', parent_code: '450000000000' },
{ region_code: '451102000000', region_name: '八步区', parent_code: '451100000000' },
{ region_code: '451103000000', region_name: '平桂区', parent_code: '451100000000' },
{ region_code: '451121000000', region_name: '昭平县', parent_code: '451100000000' },
{ region_code: '451122000000', region_name: '钟山县', parent_code: '451100000000' },
{ region_code: '451123000000', region_name: '富川瑶族自治县', parent_code: '451100000000' },
{ region_code: '451200000000', region_name: '河池市', parent_code: '450000000000' },
{ region_code: '451202000000', region_name: '金城江区', parent_code: '451200000000' },
{ region_code: '451203000000', region_name: '宜州区', parent_code: '451200000000' },
{ region_code: '451221000000', region_name: '南丹县', parent_code: '451200000000' },
{ region_code: '451222000000', region_name: '天峨县', parent_code: '451200000000' },
{ region_code: '451223000000', region_name: '凤山县', parent_code: '451200000000' },
{ region_code: '451224000000', region_name: '东兰县', parent_code: '451200000000' },
{ region_code: '451225000000', region_name: '罗城仫佬族自治县', parent_code: '451200000000' },
{ region_code: '451226000000', region_name: '环江毛南族自治县', parent_code: '451200000000' },
{ region_code: '451227000000', region_name: '巴马瑶族自治县', parent_code: '451200000000' },
{ region_code: '451228000000', region_name: '都安瑶族自治县', parent_code: '451200000000' },
{ region_code: '451229000000', region_name: '大化瑶族自治县', parent_code: '451200000000' },
{ region_code: '451300000000', region_name: '来宾市', parent_code: '450000000000' },
{ region_code: '451302000000', region_name: '兴宾区', parent_code: '451300000000' },
{ region_code: '451321000000', region_name: '忻城县', parent_code: '451300000000' },
{ region_code: '451322000000', region_name: '象州县', parent_code: '451300000000' },
{ region_code: '451323000000', region_name: '武宣县', parent_code: '451300000000' },
{ region_code: '451324000000', region_name: '金秀瑶族自治县', parent_code: '451300000000' },
{ region_code: '451381000000', region_name: '合山市', parent_code: '451300000000' },
{ region_code: '451400000000', region_name: '崇左市', parent_code: '450000000000' },
{ region_code: '451402000000', region_name: '江州区', parent_code: '451400000000' },
{ region_code: '451421000000', region_name: '扶绥县', parent_code: '451400000000' },
{ region_code: '451422000000', region_name: '宁明县', parent_code: '451400000000' },
{ region_code: '451423000000', region_name: '龙州县', parent_code: '451400000000' },
{ region_code: '451424000000', region_name: '大新县', parent_code: '451400000000' },
{ region_code: '451425000000', region_name: '天等县', parent_code: '451400000000' },
{ region_code: '451481000000', region_name: '凭祥市', parent_code: '451400000000' },
]
var emptyCode = '000000000000'
var codeLength = 12
function rightPad(str, len, character) {
var result = str + ''
if (Object.prototype.toString.call(character) !== '[object String]') {
character = ' '
}
while (result.length < len) {
result += character
}
return result
}
// function codeFilter(code) {
// var ret = '';
// if (code.substr(0, 2) !== '00') {
// ret = rightPad(code.substr(0, 2), codeLength, '0');
// }
// if (code.substr(2, 2) !== '00') {
// ret = rightPad(code.substr(0, 4), codeLength, '0');
// }
// if (code.substr(4, 2) !== '00') {
// ret = rightPad(code.substr(0, 6), codeLength, '0');
// }
// return ret;
// }
function parentCode(code) {
if (!code || code.length != codeLength) return ''
var ret = emptyCode
if (code.substr(2, 2) !== '00') {
ret = rightPad(code.substr(0, 2), codeLength, '0')
}
if (code.substr(4, 5) !== '00000') {
ret = rightPad(code.substr(0, 4), codeLength, '0')
}
return ret
}
export function findLikeRegionCode(code) {
if (!code || code.length != codeLength) return ''
var codeArr = [code.substring(0, 2), code.substring(2, 4), code.substring(4, 9)],
rets = []
codeArr.forEach((ele) => {
if (parseInt(ele) > 0) {
rets.push(ele)
}
})
return rets.join('')
}
export function findRegionCodeArr(code) {
if (!code || code.length != codeLength) return ''
var rets = [
rightPad(code.substring(0, 2), codeLength, '0'),
rightPad(code.substring(0, 4), codeLength, '0'),
rightPad(code.substring(0, 9), codeLength, '0'),
]
return rets
}
function findParentRegion(regionCode, nameList) {
var parentRegionCode = parentCode(regionCode)
if (parentRegionCode.length > 0) {
var i = regionList.length
while (i--) {
if (regionList[i].region_code == parentRegionCode) {
nameList.push(regionList[i].region_name)
findParentRegion(parentRegionCode, nameList)
return
}
}
}
}
//return: "广州市 / 天河区"
export function findFullNameByRegionCode(shortRegionCode, isSheng = false) {
if (shortRegionCode == 'all') {
return '总计'
}
if (shortRegionCode == null || shortRegionCode.length == 0) return ''
var nameList = []
var regionCode = rightPad(shortRegionCode, codeLength, '0')
var i = regionList.length
while (i--) {
if (regionList[i].region_code == regionCode) {
nameList.push(regionList[i].region_name)
findParentRegion(regionCode, nameList)
nameList.reverse() //反转
if (!isSheng) {
if (nameList.length > 1) {
nameList.splice(0, 1) //去除省
}
}
return nameList.join(' / ')
}
}
return ''
}
function addressToRegionCodeLoop(address, codes, likeCode) {
for (var i = 0, l = regionList.length; i < l; i++) {
var name = regionList[i].region_name
var alias = regionList[i].region_alias
var code = regionList[i].region_code
var index = address.indexOf(name) //indexOf=0等价于startsWith
var index2 = -1
if (alias) {
index2 = address.indexOf(alias)
}
var substr = -1
if (index == 0) {
substr = name.length
} else if (index2 == 0) {
substr = alias.length
}
if (substr > -1 && (!likeCode || code.indexOf(likeCode) == 0)) {
codes.push(code)
address = address.substr(substr)
addressToRegionCodeLoop(address, codes, findLikeRegionCode(code)) //下一级
break
}
}
}
export function addressToRegionCode(address) {
var codes = []
addressToRegionCodeLoop(address, codes)
if (codes.length > 0) {
return codes[codes.length - 1]
}
return ''
}
export function getReionCodeByName(name) {
let region = regionList.find((r) => r.region_name == name)
if (region) {
return region.region_code
} else {
return '450000000000'
}
}
export function getChildrenByCode(pcode) {
return JSON.parse(JSON.stringify(regionList)).filter((r) => r.parent_code == pcode)
}