<template>
|
<view>
|
<picker mode="multiSelector" :value='value' @columnchange="bindMultiPickerColumnChange" @change="change"
|
range-key="name" :range="multiArray">
|
<view class="uni-input">
|
{{showVal.name}}
|
</view>
|
</picker>
|
</view>
|
</template>
|
|
<script>
|
import {
|
basin
|
} from '@/api/feedback/feedback.js'
|
export default {
|
props: {
|
code: {
|
required: true,
|
type: [Number, String]
|
}
|
},
|
data() {
|
return {
|
multiArray: [],
|
showVal: {
|
name: "流域"
|
},
|
value: [0, 0],
|
adBase: uni.getStorageSync("adCodeBase"),
|
}
|
},
|
mounted() {
|
this.getbasin()
|
},
|
watch: {
|
code: {
|
handler(newVal) {
|
this.getbasin()
|
},
|
deep: true
|
}
|
},
|
methods: {
|
async getbasin(code = this.code) {
|
let data
|
if (this.code != '420000000000' && this.code) {
|
data = {
|
code
|
}
|
} else {
|
data = {}
|
}
|
const {
|
data: res
|
} = await basin(data)
|
if (res && res.length > 0) {
|
this.multiArray = []
|
this.value = [0, 0]
|
const multiArray = []
|
res.forEach(v => {
|
multiArray.push({
|
name: v.name,
|
code: v.code,
|
children: v.children
|
})
|
})
|
this.multiArray[0] = multiArray
|
this.childrenList(this.multiArray[0][0], 1)
|
}
|
},
|
childrenList(data, index) {
|
if (!data) return
|
if (!data.children || data.children.length <= 0) return
|
const multiArray = []
|
data.children.forEach(v => {
|
multiArray.push({
|
name: v.name,
|
code: v.code,
|
children: v.children
|
})
|
})
|
this.multiArray[index] = multiArray
|
this.childrenList(this.multiArray[index][0], index + 1)
|
},
|
bindMultiPickerColumnChange(e) {
|
const {
|
column,
|
value
|
} = e.detail
|
if (column < this.multiArray.length - 1) {
|
this.childrenList(this.multiArray[column][value], column + 1)
|
this.$forceUpdate()
|
}
|
},
|
change(e) {
|
let value = e.detail.value
|
let code
|
// const [column, value] = e.detail.value
|
// const code = this.multiArray[column + 1][value].code
|
|
// if (value[3] && value[3] != 0) {
|
// code = this.multiArray[3][value[3]]
|
// } else if (value[2] && value[2] != 0) {
|
// code = this.multiArray[2][value[2]]
|
// } else if (value[1] && value[1] != 0) {
|
// code = this.multiArray[1][value[1]]
|
// } else {
|
// code = this.multiArray[0][value[0]]
|
// }
|
|
code = this.multiArray[1][value[1]]
|
|
this.showVal.name = code.name
|
this.$emit("basinChange", code)
|
}
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep .picker-box {
|
width: 100%;
|
height: 90rpx;
|
// background-color: #05B7B4;
|
z-index: 1;
|
}
|
|
::v-deep .uni-picker-view-content {
|
padding: 80rpx 0 !important;
|
}
|
|
.top {
|
display: flex;
|
align-items: center;
|
padding: 20px;
|
|
.icon {
|
margin-right: 60rpx;
|
}
|
|
.search {
|
flex: 1;
|
}
|
}
|
|
.main {
|
.picker-view {
|
width: 750rpx;
|
height: 240rpx;
|
margin-top: 20rpx;
|
}
|
|
.item {
|
line-height: 80rpx;
|
height: 80rpx;
|
text-align: center;
|
}
|
}
|
|
.footer {
|
padding: 40rpx;
|
|
.btn {
|
height: 74rpx;
|
background: linear-gradient(90deg, #5B70F7 0%, #51A3FA 100%);
|
border-radius: 6rpx;
|
}
|
|
|
}
|
</style>
|
