<template>
|
<div>
|
<el-cascader
|
ref="getCityName"
|
v-model="newRegion"
|
placeholder="选择省/市"
|
:options="options"
|
clearable
|
style="flex:1"
|
@change="getName"
|
/>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
form: {
|
name: '',
|
region: '',
|
date1: '',
|
date2: '',
|
delivery: false,
|
type: [],
|
resource: '',
|
desc: ''
|
},
|
options: [],
|
newRegion: [],
|
cityName: ''
|
}
|
},
|
watch: {
|
newRegion(n, o) {
|
this.$emit('regionCode', [n[this.newRegion.length - 1], this.cityName])
|
}
|
},
|
created() {
|
const runAsync = new Promise((resolve, reject) => {
|
this.$request({
|
url: '/organization/getMapPath',
|
method: 'get',
|
params: {
|
organizationId: this.$store.state.orgId
|
}
|
})
|
.then(res => {
|
const data = res.data
|
for (let i = 0; i < data.length; i++) {
|
this.options.push({
|
value: data[i].provinceCode,
|
label: data[i].provinceName
|
})
|
this.options[i].children = []
|
for (let j = 0; j < data[i].cities.length; j++) {
|
this.options[i].children.push({
|
value: data[i].cities[j].cityCode,
|
label: data[i].cities[j].cityName
|
})
|
}
|
}
|
|
resolve() // 执行resolve函数后，会执行 then函数
|
})
|
.catch(err => {
|
console.log('请求Region失败')
|
console.log(err)
|
})
|
})
|
runAsync.then(() => {
|
// 循环options，判断label相等， 则返回value，
|
|
this.newRegion = [
|
Number(this.$store.state.regionCode.toString().substr(0, 2) + '0000'),
|
Number(this.$store.state.regionCode.toString().substr(0, 4) + '00')
|
]
|
for (const item in this.options) {
|
for (const i in this.options[item].children) {
|
if (this.newRegion[1] === this.options[item].children[i].value) {
|
this.cityName = this.options[item].children[i].label
|
}
|
}
|
}
|
})
|
},
|
methods: {
|
// 获取切换城市节点
|
getName() {
|
if (this.cityName !== '') {
|
// 获取当前节点，如果城市清空，获取label出错，这时候保留原cityName，获取成功替换
|
this.cityName = (this.$refs['getCityName'].getCheckedNodes()[0] === undefined) ? this.cityName : this.$refs['getCityName'].getCheckedNodes()[0].label
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.line {
|
text-align: center;
|
}
|
</style>
|
