mashangyoujiu/Public/js/choose-goods-class.js

Vue.component('choose-goods-class', {
    template: `<div style="display: inline-block;vertical-align: top" >
                    <el-select size="small" clearable :disabled="isDisabled" filterable
                               @change="changeGoodsClass1($event)"
                               v-model="id1" placeholder="选择一级分类">
                        <el-option
                                v-for="item in goodsClass1"
                                :key="item.id"
                                :label="item.class_name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select size="small" clearable :disabled="isDisabled" filterable v-if="goodsClass2.length"
                               @change="changeGoodsClass2($event)"
                               v-model="id2" placeholder="选择二级分类">
                        <el-option
                                v-for="item in goodsClass2"
                                :key="item.id"
                                :label="item.class_name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select size="small" clearable :disabled="isDisabled" filterable v-if="goodsClass3.length"
                               @change="changeGoodsClass3($event)"
                               v-model="id3" placeholder="选择三级分类">
                        <el-option
                                v-for="item in goodsClass3"
                                :key="item.id"
                                :label="item.class_name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <p v-if="isError" style="color: red;font-size: 12px">请继续选择分类</p>
              </div>`,
    props: {
        'selectedData': {
            type: Array,
            default: () => {
                return []
            },
        },//已选中的分类
        'userType': {
            type: Number,
            default: 1,
        },//1商户  2门店
        'storeId': {
            type: String,
            default: '',
        },//门店ID在userType等于2时，并且是商户选择门店商品时可能会传
        'isDeep': {
            type: Boolean,
            default: false,
        },//是否选择到最底层
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
    },
    data() {
        return {
            goodsClass1: [],
            goodsClass2: [],
            goodsClass3: [],
            id1: '',
            id2: '',
            id3: '',
            isError: false,
        }
    },
    methods: {
        getGoodsClass(pid, type, fn) {
            $.ajax({
                url: "/index.php/Retail/MerCate/getChooseClassList",
                data: {
                    pid: pid,
                    type: type,
                    user_type: this.userType,
                    store_id: this.storeId,
                },
                type: 'POST',
                success: (res) => {
                    if (res.status == 1) {
                        this.setClassData(type, res.data);
                    } else {
                        this.setClassData(type, []);
                    }
                    if (typeof fn == "function") this.$nextTick(() => {
                        fn();
                    })
                }
            })
        },
        setClassData(type, data) {
            switch (type) {
                case 1:
                    this.goodsClass1 = [];
                    this.goodsClass1 = data;
                    this.id1 = '';
                    this.goodsClass2 = [];
                    this.id2 = '';
                    this.goodsClass3 = [];
                    this.id3 = '';
                    break;
                case 2:
                    this.goodsClass2 = [];
                    this.goodsClass2 = data;
                    this.id2 = '';
                    this.goodsClass3 = [];
                    this.id3 = '';
                    break;
                case 3:
                    this.goodsClass3 = [];
                    this.goodsClass3 = data;
                    this.id3 = '';
                    break;
            }
        },
        changeGoodsClass1(val, fn) {
            if (!val) {
                this.goodsClass2 = [];
                this.id2 = '';
                this.goodsClass3 = [];
                this.id3 = '';
            } else {
                this.getGoodsClass(val, 2, () => {
                    if (typeof fn == "function") this.$nextTick(() => {
                        fn();
                    })
                });
            }
            this.callback();
        },
        changeGoodsClass2(val, fn) {
            if (!val) {
                this.goodsClass3 = [];
                this.id3 = '';
            } else {
                this.getGoodsClass(val, 3, () => {
                    if (typeof fn == "function") this.$nextTick(() => {
                        fn();
                    })
                });
            }
            this.callback();
        },
        changeGoodsClass3(val, fn) {
            if (!val) {
                this.id3 = '';
            }
            if (typeof fn == "function") this.$nextTick(() => {
                fn();
            })
            this.callback();
        },
        callback() {
            let a = this.id1 || !this.id1 && !this.goodsClass1.length;
            let b = this.id2 || !this.id2 && !this.goodsClass2.length;
            let c = this.id3 || !this.id3 && !this.goodsClass3.length;

            if ((this.isDeep && a && b && c) || !this.isDeep) {
                this.isError = false;
                this.$nextTick(() => {
                    this.$emit('choose-class', {data: [this.id1, this.id2, this.id3], error: this.isError});
                })
            } else {
                this.isError = true;
            }
        },
        unitClass() {
            //已选中一级分类
            if (this.selectedData[0]) {
                this.id1 = this.selectedData[0];//一级分类赋值
                if (this.selectedData[1]) {
                    //已选中二级分类
                    //获取二级分类列表
                    this.changeGoodsClass1(this.selectedData[0], () => {
                        this.id2 = this.selectedData[1];//二级分类赋值
                        this.callback();
                        if (this.selectedData[2]) {
                            //已选中三级分类
                            //获取三级分类列表
                            this.changeGoodsClass2(this.selectedData[1], () => {
                                this.id3 = this.selectedData[2];//三级分类赋值
                                this.callback();
                            });
                        } else {
                            this.setClassData(3, []);
                        }
                    });
                } else {
                    this.setClassData(2, []);
                }
            } else {
                this.setClassData(1, []);
            }
        }
    },
    mounted() {
        this.callback();
    },
    created() {
        this.getGoodsClass(0, 1);
        if (this.selectedData.length) this.unitClass();
    },
    watch: {
        selectedData: {
            deep: true,
            handler(n, o) {
                this.unitClass();
            }
        },
        isDeep(n, o) {
            console.log(n, o);
        }
    },
});