JLH/JLHAPP/src/components/lj-select.vue

<!--选择控件，可展示为下拉样式，也可展示为vux的group样式-->
<!--events-->
    <!--选项改变change，参数(value)-->
<template>
    <selector v-if="cell" :title="title" v-model="currentValue" @on-change="handleChange" :options="optionData"
              :value-map="['value','label']" direction="ltr" :readonly="disabled"/>
    <mu-select v-else :label="title" v-model="currentValue" @change="handleChange" :full-width="fullWidth"
               :disabled="disabled">
        <mu-option v-for="option in optionData" :label="option.label" :value="option.value"/>
    </mu-select>
</template>

<script>
    import {Selector} from 'vux'

    export default {
        name: "lj-select",
        components: {Selector},
        props: {
            // 标签文本
            title: {
                type: String,
                default: ""
            },
            // 选项数据数组
            options: {
                type: Array
            },
            // 设置键值对映射用以自动转换对象数据, 如 ：['id','name']用以转换[{id:2,name:"明仔"}]格式的选项数据
            valueMap: {
                type: Array,
                default: function () {
                    return ["value", "label"]
                }
            },
            // 用网络请求数据的API名称
            optionsApi: {
                type: String
            },
            // 网络请求的附加参数（token已默认封装，无需重复声明）
            apiParams: {
                type: Object
            },
            // 额外的数据数组，通常用于网络请求数据，附加“全部”选项用，如[{scid: -1, scname: "全部"}]
            extraOptions: {
                type: Array
            },
            // 当前选项的值，支持v-model绑定
            value: {},
            // 用于传递muse-ui 的mu-select的属性
            fullWidth: {
                type: Boolean
            },
            // 是否显示为vux的group的selector的样式
            cell: {
                type: Boolean,
                default: false
            },
            // 是否不可用
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                apiData: [],
                currentValue: this.value,
                currentLabel: this.valueMap[this.value]
            }
        },
        created() {
            this.refresh();
        },
        methods:{
            refresh(){
                if (this.optionsApi) {
                    let self = this;
                    let requestBody = this.apiParams || {};
                    requestBody.token = $lj.getStorage("token");
                    $lj.postLJRequest(this.optionsApi, requestBody, function (ret) {
                        if (ret) {
                            for (let key in ret) {
                                self.apiData = ret[key];
                                return;
                            }
                        }
                    })
                }
            },
            handleChange(){
                this.$emit('input',this.currentValue);
                this.$emit("change",this.currentValue);
                for (let option of this.optionData) {
                    if (option.value === this.currentValue) {
                        this.$emit("change-get-label", option.label);
                        break;
                    }
                }
                
            }
        },
        computed: {
            optionData() {
                let fullOptions = [];
                if (this.extraOptions) {
                    fullOptions = fullOptions.concat(this.extraOptions);
                }
                if (this.optionsApi) {
                    fullOptions = fullOptions.concat(this.apiData);
                } else {
                    fullOptions = fullOptions.concat(this.options);
                }
                let result = [];
                fullOptions.forEach((item) => {
                    if (typeof item === "object") {
                        result.push({value: item[this.valueMap[0]], label: item[this.valueMap[1]]});
                    } else {
                        result.push({value: item, label: item})
                    }
                });
                if (typeof this.currentValue === "undefined") {
                    if (result.length){
                        this.currentValue = result[0].value;
                        this.handleChange();
                    }
                }
                for (let option of result) {
                    if (option.value === this.currentValue) {
                        this.$emit("change-get-label", option.label);
                        break;
                    }
                }
                return result;
            }
        },
        watch: {
            value: function (newVal) {
                this.currentValue = newVal;
            }
        }
    }
</script>