qimall/addons/Purchase/backend/views/goods/component/com-add-cat.php

<style>
    .com-add-cat .com-goods-cat-list {
        border: 1px solid #E8EAEE;
        border-radius: 5px;
        margin-top: -5px;
        padding: 10px 0;
        overflow: scroll;
        height: 400px;
    }

    .com-add-cat .com-goods-cat-list .cat-item {
        cursor: pointer;
        padding: 5px 10px;
    }

    .com-add-cat .com-goods-cat-list .active {
        background: #FAFAFA;
    }

    .com-add-cat .el-checkbox {
        margin-right: 0;
    }

    .com-add-cat .tag-box {
        margin: 20px 0;
    }

    .com-add-cat .tag-box .tag-item {
        margin-right: 5px;
    }
</style>

<template id="com-add-cat">
    <div class="com-add-cat">
        <el-dialog :title="title" width="1100px" :visible.sync="dialogVisible" :show-close="false">
            <el-row v-loading="dialogLoading" :gutter="20" style="margin-top: -30px;">
                <template v-if="options.length > 0">
                    <el-col :span="8">
                        <h3>一级分类</h3>
                        <div class="com-goods-cat-list active">
                            <div :class="{'active': current1 == option.id ? true : false}" class="cat-item"
                                 flex="dir:left box:first"
                                 v-for="(option,index) in options"
                                 :key="option.id">
                                <el-checkbox @change="optionClick(option)" v-model="option.checked"
                                             :label="option.id" size="mini">
                                    <span style="display: none;">{{option.name}}</span>
                                </el-checkbox>
                                <div @click="selectCats(option,1)" flex="box:last cross:center">
                                    <span>{{option.name}}</span>
                                    <i v-if="option.children" class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" v-if="children.length > 0">
                        <h3>二级分类</h3>
                        <div class="com-goods-cat-list">
                            <div :class="{'active': current2 == option.id ? true : false}" class="cat-item"
                                 flex="dir:left box:first"
                                 v-for="(option,index) in children"
                                 :key="option.id">
                                <el-checkbox @change="optionClick(option)" v-model="option.checked"
                                             :label="option.id" size="mini">
                                    <span style="display: none;">{{option.name}}</span>
                                </el-checkbox>
                                <div @click="selectCats(option,2)" flex="box:last cross:center">
                                    <span>{{option.name}}</span>
                                    <i v-if="option.children" class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8" v-if="third.length > 0">
                        <h3>三级分类</h3>
                        <div class="com-goods-cat-list">
                            <div :class="{'active': current3 == option.id ? true : false}" class="cat-item"
                                 flex="dir:left box:first"
                                 v-for="(option,index) in third"
                                 :key="option.id">
                                <el-checkbox @change="optionClick(option)" v-model="option.checked"
                                             :label="option.id" size="mini">
                                    <span style="display: none;">{{option.name}}</span>
                                </el-checkbox>
                                <div @click="selectCats(option,3)" flex="box:last cross:center">
                                    <span>{{option.name}}</span>
                                    <i v-if="option.children" class="el-icon-arrow-right"></i>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </template>
                <template v-else>
                    <div flex="main:center" style="align-items: center;margin-top: 20px;">
                        <span>无系统分类</span>
                        <el-button style="display: inline-block;margin-left: 10px" flex="main:center" type="primary"
                                   size="small"
                                   @click="$navigate({r: 'purchase/cate/edit'})">
                            请先添加商品分类
                        </el-button>
                    </div>
                </template>
            </el-row>
            <div class="tag-box" v-if="cats.length > 0">
                <el-tag type="warning" class="tag-item" @close="deleteCat(item, index)" closable v-for="(item, index) in cats"
                        :key="item.id">
                    {{item.name}}
                </el-tag>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size='small' @click="dialogVisible = false">取 消</el-button>
                <el-button size='small' type="primary" @click="dialogSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    Vue.component('com-add-cat', {
        template: '#com-add-cat',
        props: {
            newCats: {
                type: Array,
                default: function () {
                    return []
                }
            }
        },
        data() {
            return {
                dialogVisible: false,
                options: [],// 商品分类列表
                children: [],
                third: [],
                cats: [], //用于前端已选的分类展示
                dialogLoading: false,
                title: '选择分类',
                current1: '',
                current2: '',
                current3: '',
            }
        },
        methods: {
            openDialog() {
                let self = this;
                this.getCats();
                self.title = '选择分类';
                this.cats = [];
                this.children = [];
                this.third = [];
                this.dialogVisible = true;
            },
            // 获取商品分类
            getCats() {
                let self = this;
                self.dialogLoading = true;
                request({
                    params: {
                        r: 'purchase/cate/tree'
                    },
                    method: 'get',
                    data: {}
                }).then(e => {
                    self.dialogLoading = false;
                    if (e.data.code === 0) {
                        self.options = e.data.data.list;
                        self.setCats();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    self.dialogLoading = false;
                });
            },
            setCats() {
                let self = this;
                self.options.forEach(function (item) {
                    item.checked = false;
                    self.newCats.forEach(function (cItem) {
                        if (item.id === cItem) {
                            item.checked = true;
                            self.cats.push({
                                name: item.name,
                                id: item.id,
                            })
                        }
                    });
                    if (item.children) {
                        item.children.forEach(function (item2) {
                            item2.checked = false;
                            self.newCats.forEach(function (cItem) {
                                if (item2.id === cItem) {
                                    item2.checked = true;
                                    self.cats.push({
                                        name: item2.name,
                                        id: item2.id,
                                    })
                                }
                            });
                            if (item2.children) {
                                item2.children.forEach(function (item3) {
                                    item3.checked = false;
                                    self.newCats.forEach(function (cItem) {
                                        if (item3.id === cItem) {
                                            item3.checked = true;
                                            self.cats.push({
                                                name: item3.name,
                                                id: item3.id,
                                            })
                                        }
                                    });
                                })
                            }
                        })
                    }
                })
            },
            deleteCat(option, index) {
                let self = this;
                self.cats.splice(index, 1);
                self.options.forEach(function (item) {
                    if (item.id === option.id) {
                        item.checked = false;
                    }
                    if (item.children) {
                        item.children.forEach(function (item2) {
                            if (item2.id === option.id) {
                                item2.checked = false
                            }
                            if (item2.children) {
                                item2.children.forEach(function (item3) {
                                    if (item3.id === option.id) {
                                        item3.checked = false
                                    }
                                })
                            }
                        })
                    }
                })
            },
            optionClick(option) {
                let self = this;
                let sign = true;
                self.cats.forEach(function (item, index) {
                    // 移除分类
                    if (option.id === item.id) {
                        sign = false;
                        self.cats.splice(index, 1);
                    }
                });
                // 新增分类
                if (sign && option.checked) {
                    self.cats.push({
                        name: option.name,
                        id: option.id,
                    })
                }
            },
            // 选择分类
            selectCats(option, type) {
                let self = this;
                if (type === 1) {
                    self.current1 = option.id;
                    self.children = [];
                    if (option.children) {
                        option.children.forEach(function (item) {
                            self.children.push(item);
                        })
                    }
                }

                if (type === 2) {
                    self.current2 = option.id;
                    self.third = [];
                    if (option.children) {
                        option.children.forEach(function (item) {
                            self.third.push(item);
                        })
                    }
                }

                if (type === 3) {
                    self.current3 = option.id;
                }
            },
            dialogSubmit() {
                this.dialogVisible = false;
                this.$emit('select', this.cats)
            }
        }
    })
</script>