<template>
<div class='dashboard-container'>
<el-cascader ref='cascader' v-model='cascaderValue' v-loading='loading' :disabled='disabled' :props='props'
:title='selStr' clearable
element-loading-spinner='el-icon-loading'
placeholder='请选择'
@change='handleChange($event)' />
</div>
</template>
<script>
import { getAddressCity, getAddressDistrict, getAddressProvince } from '@/api/common'
export default {
name: 'index',
data() {
return {
cascaderValue: [],
selArr: [],
selStr: '',
loading: false,
loadignArr: [true, true, true],
props: {
lazy: true,
lazyLoad: this.lazyLoad
}
}
},
props: {
value: {
Type: Object
},
disabled: {
default: false
}
},
watch: {
value: {
handler(val) {
if (val) {
console.log(val, this.value)
this.lazyLoad()
this.cascaderValue = this.value
}
},
immediate: true
},
loadignArr: {
handler(val) {
console.log(val, 'loaingArr')
const result = val.includes(true)
if (result) {
this.loading = true
} else {
this.loading = false
}
}
}
},
created() {
},
methods: {
handleChange(event) {
console.log(event)
console.log(this.$refs.cascader.getCheckedNodes())
const selNode = this.$refs.cascader.getCheckedNodes()
const selVal = selNode[0]
this.getSelValue(selVal)this.$emit('getSelArr', this.selArr)
},
getSelValue(val) {
console.log(val.label)
if (val.parent) {
this.getSelValue(val.parent)
}
const s = this.selStr ? '/' : ''
this.selStr = this.selStr + s + val.label
this.selArr.push({ name: val.label, id: val.value, levle: val.levle })
},
//
lazyLoad(node, resolve) {
setTimeout(() => {
console.log(node.level)
if (node.level == 0) {
this.getProvence(node, resolve)
}
if (node.level == 1) {
this.getCity(node, resolve)
}
if (node.level == 2) {
this.getDistrict(node, resolve)
}
}, 100)
},
getProvence(node, resolve) {
this.$set(this.loadignArr, 0, true)
getAddressProvince().then((res) => {
console.log(res)
if (Array.isArray(res.data)) {
const nodes = res.data.map(item => ({
value: item.provinceCode, //
// value: item.dwdm,
label: item.provinceName,
leaf: node.level >= 2//层级
}))
resolve(nodes)
}
}).catch(error => this.$message.error(error)).finally(() => {
this.$set(this.loadignArr, 0, false)
})
},
getCity(node, resolve) {
this.$set(this.loadignArr, 1, true)
getAddressCity(node.value).then((res) => {
if (Array.isArray(res.data)) {
const nodes = res.data.map(item => ({
value: item.cityCode, //
// value: item.dwdm,
label: item.cityName,
leaf: node.level >= 2//层级
}))
resolve(nodes)
}
}).catch(error => this.$message.error(error)).finally(() => {
this.$set(this.loadignArr, 1, false)
})
},
getDistrict(node, resolve) {
this.$set(this.loadignArr, 2, true)
getAddressDistrict(node.value).then((res) => {
if (Array.isArray(res.data)) {
const nodes = res.data.map(item => ({
value: item.districtCode, //
// value: item.dwdm,
label: item.districtName,
leaf: node.level >= 2//层级
}))
resolve(nodes)
}
}).catch(error => this.$message.error(error)).finally(() => {
this.$set(this.loadignArr, 2, false)
})
}
}
}
</script>
<style lang='less' scoped>
.el-cascader {
line-height: 34px;
}
</style>
