141 lines
4.4 KiB
Vue
141 lines
4.4 KiB
Vue
|
<template>
|
|||
|
|
<view style="width: 100%">
|
|||
|
|
<u--input :value="formatValue(value)" disabledColor="#ffffff" :placeholder="placeholder"
|
|||
|
|
border="border"></u--input>
|
|||
|
|
<u-picker ref="uPicker" :show="visibel" :keyName="labelName" :columns="VarColumns" @confirm="skillConfirm"
|
|||
|
|
@cancel="skillClose" @close="skillClose" @change="changeHandler"></u-picker>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
isArray
|
|||
|
|
} from 'lodash'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
valued: '',
|
|||
|
|
VarColumnsIndex: [],
|
|||
|
|
VarColumns: [],
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
border: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'none'
|
|||
|
|
},
|
|||
|
|
valueName: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'value'
|
|||
|
|
},
|
|||
|
|
labelName: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'label'
|
|||
|
|
},
|
|||
|
|
placeholder: {
|
|||
|
|
type: String,
|
|||
|
|
default: '请选择'
|
|||
|
|
},
|
|||
|
|
visibel: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false,
|
|||
|
|
},
|
|||
|
|
tree: {
|
|||
|
|
type: Array,
|
|||
|
|
require: true
|
|||
|
|
},
|
|||
|
|
deep: {
|
|||
|
|
type: Number,
|
|||
|
|
require: 1
|
|||
|
|
},
|
|||
|
|
value: {
|
|||
|
|
type: String,
|
|||
|
|
require: ''
|
|||
|
|
},
|
|||
|
|
cancel: {
|
|||
|
|
type: Function
|
|||
|
|
},
|
|||
|
|
returnValue: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'value',
|
|||
|
|
},
|
|||
|
|
joinSymbel: {
|
|||
|
|
type: String,
|
|||
|
|
default: '-',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.VarColumnsIndex = new Array(3).fill(this.deep)
|
|||
|
|
const arr = []
|
|||
|
|
this.changeHandler({
|
|||
|
|
columnIndex: 0,
|
|||
|
|
index: 0
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
skillClose() {
|
|||
|
|
this.$emit("cancel");
|
|||
|
|
},
|
|||
|
|
skillConfirm({
|
|||
|
|
index,
|
|||
|
|
value,
|
|||
|
|
values
|
|||
|
|
}) {
|
|||
|
|
if (this.returnValue === 'label') {
|
|||
|
|
this.$emit("input", value.map(item => item[this.labelName]).join(this.joinSymbel));
|
|||
|
|
} else {
|
|||
|
|
this.$emit("input", value);
|
|||
|
|
}
|
|||
|
|
this.$emit("cancel");
|
|||
|
|
},
|
|||
|
|
changeHandler(e) {
|
|||
|
|
const {
|
|||
|
|
columnIndex,
|
|||
|
|
value,
|
|||
|
|
values, // values为当前变化列的数组内容
|
|||
|
|
index,
|
|||
|
|
} = e
|
|||
|
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
|||
|
|
const picker = this.$refs.uPicker
|
|||
|
|
const columnlist = []
|
|||
|
|
const arr = JSON.parse(JSON.stringify(this.VarColumnsIndex)).map((vItem, vIndex) => {
|
|||
|
|
switch (true) {
|
|||
|
|
case vIndex < columnIndex:
|
|||
|
|
return vItem
|
|||
|
|
case vIndex === columnIndex:
|
|||
|
|
return index
|
|||
|
|
default:
|
|||
|
|
return 0
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
for (let i = 0; i <= arr.length - 1; i++) {
|
|||
|
|
if (i) {
|
|||
|
|
if (picker) {
|
|||
|
|
picker.setColumnValues(i, columnlist[columnlist.length - 1][arr[i - 1]].children)
|
|||
|
|
}
|
|||
|
|
columnlist.push(columnlist[columnlist.length - 1][arr[i - 1]].children)
|
|||
|
|
} else {
|
|||
|
|
columnlist.push(this.tree)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.VarColumnsIndex = arr
|
|||
|
|
this.VarColumns = columnlist
|
|||
|
|
},
|
|||
|
|
formatValue(val) {
|
|||
|
|
if (Array.isArray(val)) {
|
|||
|
|
if (typeof val[0] === 'object') {
|
|||
|
|
return val.map(item => item[this.labelName]).join(this.joinSymbel)
|
|||
|
|
} else {
|
|||
|
|
return val.join(this.joinSymbel)
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
return val
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
</style>
|