mteacher/src/views/message/control/cascader.vue

<template>
    <div class="oCascader controller" :class="[preview ? '' : 'o-unit']" v-if="widget.type == 'cascader'">
        <van-field
            :name="widget.model"
            v-model="values"
            :label="widget.name || '级联选择'"
            :required="fileCheck ? false : options.required || false"
            :disabled="options.disabled || false"
            clearable
            readonly
            :placeholder="options.placeholder || '请选择'"
            :rules="rule"
            @click="onClick"
            v-if="!preview"
        >
            <template #right-icon>
                <!-- <input type="hidden" v-model="dataModel"> -->
                <i class="van-icon van-icon-arrow van-cell__right-icon"></i>
            </template>
        </van-field>

        <van-cell v-else class="preview" :title="widget.name || '级联选择'" :value="previewValue"></van-cell>

        <van-popup v-model="showCascader" position="bottom">
            <!-- <van-picker
                show-toolbar
                :columns="columns"
                value-key="label"
                @confirm="onConfirm"
                visible-item-count="4"
                @cancel="showCascader = false"
            /> -->
            <van-cascader
                :title="options.placeholder || '请选择'"
                :options="columns"
                active-color="#01C1B5"
                @close="showCascader = false"
                @finish="onConfirm"
            />
        </van-popup>
    </div>
</template>
<script>

export default {
    name: 'oCascader',
    props: ['widget', 'preview', 'value', 'fileCheck'],
    data() {
        return {
            dataModel: this.widget.options?.defaultValue || [],
            values: null,
            showCascader: false,
            columns: this.widget.options?.options || [],
            previewValue: null,
        }
    },
    mounted() {
        // 初始化参数
        const options = this.widget.options?.options || []
        this.columns = this.filterOptions(options)
        if(this.value) {
            const widget = this.widget
            const model = widget.originModel || widget.model
            for(let v in this.value) {
                if(v == model) {
                    this.previewValue = this.value[v]
                }
            }
        }
    },
    methods: {
        filterOptions(options) {
            let tempList = []
            options.forEach(item => {
                if(item.children && item.children.length > 0) {
                    tempList.push({
                        text: item.label,
                        value: item.value,
                        children: this.filterOptions(item.children)
                    })
                } else {
                    tempList.push({
                        text: item.label,
                        value: item.value
                    })
                }
            })
            return tempList
        },
        onClick() {
            this.showCascader = true
        },
        onConfirm({ selectedOptions  }) {
            this.dataModel = selectedOptions.map((option) => option.text).join('/')
            // console.log(selectedOptions)
            this.values = selectedOptions.map((option) => option.text).join('/')
            this.showCascader = false
        },
    },
    computed: {
        options() {
            return this.widget.options || {}
        },
        rule() {
            let rules = this.widget.rules || []
            if(rules && rules.length > 0) {
                rules.forEach(item => {
                    if(item.pattern) {
                        item.pattern = eval(item.pattern)
                    }
                    // 判断是否上传文件
                    if(this.fileCheck) {
                        item.required = false
                    }
                });
            }
            return rules
        }
    },
    watch: {
        // dataModel: {
        //     deep: true,
        //     handler(newValue) {
        //         if (newValue !== undefined && newValue !== null) {
        //         }
        //     }
        // },
    }
}
</script>

<style lang='less' scoped>
@import url('./controlCommon.less');
</style>