qimall/addons/Store/client/views/cate/component/cat-import.php

<template id="cat-import">
    <div class="cat-import">
        <el-dialog append-to-body title="导入分类" :visible.sync="visible" :close-on-click-modal="false"
                   custom-class="store-list-dialog" @close="close">
            <el-cascader-panel v-model="selectCate" ref="cateRef" size="small" :options="cate_tree" :props="cate_props" class="cate-cascader" @change="handleCascaderChange" :show-all-levels="false"></el-cascader-panel>
            <div class="select-labels">
                <el-tag size="small" type="warning" v-for="label in selectLabel">{{label}}</el-tag>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="visible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="importConfirm" :loading="checkLoading">确 定</el-button>
            </span>
        </el-dialog>
        <div @click="click" style="display: inline-block">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    Vue.component('cat-import', {
        template: '#cat-import',
        props: {},
        data() {
            return {
                visible: false,
                dialogLoading: false,
                checkLoading: false,
                cate_tree: [],
                cate_props: {
                    multiple: true,
                },
                selectCate: [],
                selectLabel: []
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            click() {
                this.visible = true;
            },
            close() {
                this.$emit('close');
            },
            loadData() {
                this.dialogLoading = true;
                request({
                    params: {
                        r: 'store/client/cate/mall-cate-tree'
                    },
                    method: 'get'
                }).then(e => {
                    this.dialogLoading = false;
                    if (e.data.code === 0) {
                        this.cate_tree = e.data.data.list;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.dialogLoading = false;
                });
            },
            importConfirm() {
                this.visible = false;
                this.$emit('input', this.selectCate);
                this.$emit('selected', this.selectCate);
            },
            handleCascaderChange() {
                let selectNodes = this.$refs.cateRef.getCheckedNodes(true);
                let _label_list = [];
                selectNodes.forEach(item => {
                    _label_list.push(item.label);
                })
                this.selectLabel = _label_list;
            }
        }
    });
</script>
<style lang="scss" scoped>
    .cate-cascader {
        display: grid;
        grid-template-columns: 33.3% 33.3% 33.3%;
        .el-cascader-menu__wrap{
            min-height: 450px;
            max-height: 600px;
        }
        .el-cascader-menu{
            border-right: 1px solid #E4E7ED;
            padding-top: 35px;
            &::before {
                display: block;
                width: 100%;
                position: absolute;
                top: 0;
                line-height: 35px;
                padding-left: 15px;
                border-bottom: 1px solid #E4E7ED;
                box-sizing: border-box;
                font-weight: bold;
                letter-spacing: 5px;
                background-color: #f9f9f9;
            }
            &:nth-child(1) {
                &::before {
                    content: '一级分类';
                }
            }
            &:nth-child(2) {
                &::before {
                    content: '二级分类';
                }
            }
            &:nth-child(3) {
                border-right: none;
                &::before {
                    content: '三级分类';
                }
            }
            .el-scrollbar__bar.is-vertical {
                width: 3px;
                top: 40px;
                .el-scrollbar__thumb {
                    background-color: rgb(203 203 203 / 30%);
                }
            }
        }
    }
    .select-labels {
        padding: 15px 0;
        span.el-tag{
            margin-left: 5px;
            margin-bottom: 5px;
        }
    }
</style>