LSM_OIL_SITE/packageIntegral/components/mulpicker.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: 2, 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('/');
                    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];
                    }

                    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) {
					if(JSON.stringify(val) != '[]'){
						this.dataInit();
						this.initName();
					}
                    
                }
            },
          value: {
                // immediate: true,
                handler(val) {
                    this.initName();
                }
          },
        }
    }
</script>

<style lang="scss" scoped>

</style>