172 lines
6.8 KiB
Vue
172 lines
6.8 KiB
Vue
<!-- 多列选择器 -->
|
||
<template>
|
||
<picker mode="multiSelector" @columnchange="handleColumnChange" @change="pickerChange" :value="multiIndex" :range="multiArray" :range-key="rangekey">
|
||
<view class="uni-input space-between" hover-class="hover-color">
|
||
<slot name="before"></slot>
|
||
<text class="input-content ellipsis" :class="name?'':'color-placeholder'">{{name?name:placeholder}}</text>
|
||
<slot name="after"></slot>
|
||
</view>
|
||
</picker>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
props: {
|
||
value: { default: ''}, // 必须要使用value
|
||
list: {type: Array, default: [] },
|
||
rangekey: { default: 'name' }, // 对应name取值
|
||
childkey: { default: 'children' }, // 子集
|
||
code: { default: 'code' }, // 对应value取值
|
||
pidkey: { default: 'pid' }, // 对应父id取值
|
||
placeholder: { default: '请选择' },
|
||
emitPath: { default: false, type: Boolean }, // 是否子父级关联 ，是的时候返回的是逗号分隔的父子code
|
||
level: { default: 3, type: Number } // 列数 2或者3
|
||
},
|
||
data() {
|
||
return {
|
||
multiArray: [[],],
|
||
multiIndex: [0, 0, 0],
|
||
name: "",
|
||
}
|
||
},
|
||
methods: {
|
||
handleColumnChange(e) {
|
||
|
||
let columnindex = e.detail.value; // 拖动列索引
|
||
switch (e.detail.column) {
|
||
case 0: //拖动第1列
|
||
|
||
// 第二级
|
||
let arr1 = this.multiArray[0];
|
||
this.multiArray[1] = arr1[columnindex][this.childkey]||[];
|
||
|
||
if(this.level === 3) {
|
||
// 第三级
|
||
let arr2 = this.multiArray[1];
|
||
this.multiArray[2] = arr2[0][this.childkey]||[];
|
||
}
|
||
|
||
this.multiIndex.splice(0, 1, columnindex)
|
||
this.multiIndex.splice(1, 1, 0)
|
||
this.multiIndex.splice(2, 1, 0)
|
||
break
|
||
case 1: //拖动第2列
|
||
if (this.level === 3) {
|
||
// 第三级
|
||
let arr3 = this.multiArray[1];
|
||
this.multiArray[2] = arr3[columnindex][this.childkey]||[];
|
||
}
|
||
|
||
this.multiIndex.splice(1, 1, columnindex)
|
||
this.multiIndex.splice(2, 1, 0)
|
||
break
|
||
}
|
||
|
||
},
|
||
//
|
||
pickerChange(e) {
|
||
let multiIndex = e.detail.value;
|
||
if(this.emitPath) {
|
||
let codeArr = [], nameArr = [];
|
||
for(let i = 0; i < multiIndex.length; i++ ) {
|
||
if(this.multiArray[i] && this.multiArray[i][multiIndex[i]]) {
|
||
codeArr.push(this.multiArray[i][multiIndex[i]][this.code]);
|
||
nameArr.push(this.multiArray[i][multiIndex[i]][this.rangekey]);
|
||
}
|
||
}
|
||
let code = codeArr.join(',');
|
||
this.name = nameArr.join('/');
|
||
console.log('code1',code);
|
||
this.$emit('input', code)
|
||
}else {
|
||
|
||
let curArr = this.multiArray[2], code='';
|
||
if(curArr && curArr.length) {
|
||
code = curArr[multiIndex[2]][this.code];
|
||
this.name = curArr[multiIndex[2]][this.rangekey];
|
||
}else {
|
||
curArr = this.multiArray[1]
|
||
code = curArr[multiIndex[1]][this.code];
|
||
this.name = curArr[multiIndex[1]][this.rangekey];
|
||
}
|
||
|
||
console.log('code2',code);
|
||
this.$emit('input', code)
|
||
}
|
||
},
|
||
// 初始化级联数据
|
||
dataInit() {
|
||
// 第一级
|
||
this.multiArray[0] = this.list;
|
||
// 第二级
|
||
let arr1 = this.multiArray[0];
|
||
this.multiArray.push(arr1[this.multiIndex[0]][this.childkey]||[]);
|
||
if(this.level === 3) {
|
||
// 第三级
|
||
let arr2 = this.multiArray[1];
|
||
this.multiArray.push(arr2[this.multiIndex[1]][this.childkey]||[]);
|
||
|
||
}
|
||
},
|
||
curDataFind (data, code) {
|
||
let result;
|
||
if (!data) {
|
||
data = this.list;
|
||
}
|
||
for (var i = 0; i < data.length; i++) {
|
||
let item = data[i]
|
||
if (result) {
|
||
return result;
|
||
}
|
||
if (Number(item[this.code]) === code) {
|
||
result = item;
|
||
break;
|
||
} else if (item[this.childkey] && item[this.childkey].length > 0) {
|
||
result = this.curDataFind(item[this.childkey], code);
|
||
}
|
||
}
|
||
return result;
|
||
},
|
||
initName() {
|
||
if(this.list.length && this.value) {
|
||
if(this.emitPath) {
|
||
let nameArr = [], codeArr = this.value.split(',');
|
||
for(let i = 0; i < codeArr.length; i++ ) {
|
||
codeArr[i] = codeArr[i] - 0;
|
||
}
|
||
for(let i = 0; i < codeArr.length; i++ ) {
|
||
let item = this.curDataFind(this.list, codeArr[i]);
|
||
nameArr.push(item[this.rangekey]);
|
||
}
|
||
this.name = nameArr.join('/');
|
||
} else {
|
||
let item = this.curDataFind(this.list, this.value);
|
||
this.name = item[this.rangekey];
|
||
}
|
||
}else {
|
||
this.name = '';
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
list: {
|
||
immediate: true,
|
||
handler(val) {
|
||
console.log(val)
|
||
this.dataInit();
|
||
this.initName();
|
||
}
|
||
},
|
||
value: {
|
||
// immediate: true,
|
||
handler(val) {
|
||
console.log(val)
|
||
this.initName();
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
</style> |