hemall.terabimsoft.com.cn/plugins/jd-supply/views/admin/cloud/category.blade.php

@extends('layouts.base')

@section('content')
@section('title', trans('商品列表'))
<style>
    [v-cloak]{
        display:none;
    }

</style>

<div class="w1200 ">
    <link rel="stylesheet" type="text/css" href="{{static_url('css/font-awesome.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/goods.css')}}"/>
    <div id="goods-index" class=" rightlist ">
        <div class="right-titpos">
            <ul class="add-snav">
                <li class="active"><a href="{{yzWebFullUrl('plugin.jd-supply.admin.cloud-set.index')}}">基础设置</a></li>
                <li class="active"><a href="{{yzWebFullUrl('plugin.jd-supply.admin.cloud-category.index')}}">分类匹配设置</a>
            </ul>
        </div>
        <div class="right-addbox">
            <div id="app" >
                <div class="panel panel-default">
                                      <div class="panel-body table-responsive">
                        <div  v-cloak  v-loading="loading">
                            <el-form :inline="true" :model="post_form" ref="post_form" style="margin-left:10px;">
                                <el-row>
                                    <el-form-item>
                                        <el-select v-model="post_form.id_v1" placeholder="请选择一级分类" clearable @change="changeCateV1()">
                                            <el-option v-for="item in category" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="post_form.id_v2" placeholder="请选择二级分类" clearable @change="changeCateV2()">
                                            <el-option v-for="item in category_v2" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="post_form.id_v3" placeholder="请选择三级分类" clearable v-if="category_level==3">
                                            <el-option v-for="item in category_v3" :key="item.id" :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <a href="#">
                                        <el-button type="primary" icon="el-icon-search" @click="search(1)">搜索</el-button>
                                    </a>
                                    </el-col>
                                </el-row>
                            </el-form>

                            <a @click="autoCategory()">
                                自动匹配分类
                            </a>
                            <el-table :data="list" style="width: 100%" max-height="2400" v-loading="all_loading" tooltip-effect="dark">
                                <el-table-column prop="local_first_name" label="一级分类" width="120" align="center"></el-table-column>
                                <el-table-column prop="local_second_name" label="二级分类" width="120" align="center"></el-table-column>
                                <el-table-column prop="local_third_name" label="三级分类" width="120" align="center"></el-table-column>
                                <el-table-column prop="" label="" width="120" align="center"></el-table-column>
                                <el-table-column p label="云仓一级分类" width="200" align="center">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.cloud_first" placeholder="请选择一级分类" clearable @change="changeV1(scope.row,scope.$index)">
                                            <el-option v-for="item in category_list" :key="item.id" :label="item.label" :value="item.id"></el-option>
                                        </el-select>
                                    </template>

                                </el-table-column>
                                <el-table-column  label="云仓二级分类" width="200" align="center">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.cloud_second" placeholder="请选择二级分类" clearable @change="changeV2(scope.row,scope.$index)">
                                            <el-option v-for="item in scope.row.second_category" :key="item.id" :label="item.label" :value="item.id"></el-option>
                                        </el-select>
                                    </template>

                                </el-table-column>
                                <el-table-column  label="云仓三级分类" width="200" align="center">
                                    <template slot-scope="scope">
                                        <el-select v-model="scope.row.cloud_third" placeholder="请选择三级分类" clearable >
                                            <el-option v-for="item in scope.row.third_category" :key="item.id" :label="item.label" :value="item.id"></el-option>
                                        </el-select>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="300" align="center">
                                    <template slot-scope="scope">
                                        <el-button  @click.native="saveCategory(scope.row)">保存</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="vue-page" v-show="total>1">
                                <el-row>
                                    <el-col align="right">
                                        <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                                                       :page-size="per_size" :current-page="current_page" background
                                                       v-loading="loading"></el-pagination>
                                    </el-col>
                                </el-row>
                            </div>



                            <!-- 表格end -->
                        </div>
                    </div>
                    <div class='panel-footer'>
                        <input name="submit" type="button" @click="confirm()" :disabled="is_import_disabled" class="btn btn-success" value="导入商品">
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script>
    var app = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
        directives: {
            'el-select-loadmore': {
                bind(el, binding) {
                    // 获取element-ui定义好的scroll盒子
                    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                    SELECTWRAP_DOM.addEventListener('scroll', function () {
                        /**
                         * scrollHeight 获取元素内容高度(只读)
                         * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                         * clientHeight 读取元素的可见高度(只读)
                         * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                         * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                         */
                        const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
                        if (condition) {
                            binding.value();
                        }
                    });
                }
            }
        },
        data() {
            let category_level = {!! $category_level !!};
            let create_category = {!! $create_category !!};
            let category = {!! $category !!};
            return{
                loading:false,
                all_loading:false,
                page_number: 1, //每页显示条数
                import_show:false,
                list: [],
                category_page: {
                    pageIndex: 1,
                    pageSize: 20,
                },
                search_form: {
                    cate_v1:'',
                    cate_v2:'',
                    cate_v3:'',
                },
                category_form:{
                    id_v1:"",
                    id_v2:"",
                    id_v3:"",
                    fid_v1:"",
                    fid_v2:"",
                },
                post_form: {
                    id_v1: '',
                    id_v2: '',
                    id_v3: ''
                },
                category: category,
                category_v2: [],
                category_v3: [],
                is_import_disabled : false,
                category_level:category_level,//分类等级
                create_category:create_category,//分类等级
                category_list:[],
                category_list_v2:[],
                category_list_v3:[],
                selectionGoodsIds: [],
                cloud_category: [],

                //分页
                total: 0,
                per_size: 0,
                current_page: 0,

            }

        },
        created() {
            this.getGoodsList('{}');
        },
        methods: {
            openImport(id) {
                console.log(id);
                this.label_id = id;
                this.import_show = true;
            },

            // 获得标签列表
            getGoodsList(json) {
                var that = this;
                that.all_loading = true;
                that.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.cloud-category.get-auto-category-list') !!}',json).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        console.log(response.data.data);
                        that.list = response.data.data.local_category.data;
                        that.category_list = response.data.data.cloud_category;
                        console.log(that.category_list)
                        that.current_page = response.data.data.local_category.current_page;
                        that.per_size = 30;
                        that.total = response.data.data.local_category.total;
                        that.all_loading = false;
                    } else{
                        that.$message.error(response.data.msg);
                        that.all_loading = false;
                    }
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },

            // 一级分类改变
            changeV1(row,index) {
                console.log(index)
                this.list[index]['cloud_second'] = "";
                this.list[index]['cloud_third'] = "";
                this.category_list_v2 = [];
                this.category_list_v3 = [];
                this.category_list.find(item => {
                    if (item.id == row.cloud_first) {
                        console.log(123)
                        this.list[index]['second_category'] = item.children;
                    }
                });
            },
            // 二级分类改变
            changeV2(row,index) {
                this.list[index]['cloud_third'] = "";
                this.category_list_v3 = [];
                this.list[index]['second_category'].find(item => {
                    if (item.id == row.cloud_second) {
                        this.list[index]['third_category'] = item.children;                    }
                })
            },
            saveCategory(row) {
                var that = this;
                that.all_loading = true;
                var json = {
                    'id':row.id,
                    'cloud_first':row.cloud_first,
                    'cloud_second':row.cloud_second,
                    'cloud_third':row.cloud_third,
                };
                that.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.cloud-category.save-category') !!}',json).then(response => {
                    console.log(response);
                    if(response.data.result==1){
                        that.$message.success(response.data.msg);
                        that.all_loading = false;
                    } else{
                        that.$message.error(response.data.msg);
                        that.all_loading = false;
                    }
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },
            autoCategory() {
                var that = this;
                that.$confirm('确定匹配吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                    that.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.cloud-category.auto-category') !!}').then(response => {
                        console.log(response);
                        if (response.data.result == 1) {
                            that.$message.success(response.data.msg);
                            that.all_loading = false;
                            location.reload()
                        } else {
                            that.$message.error(response.data.msg);
                            that.all_loading = false;
                        }
                    }), function (res) {
                        console.log(res);
                        that.all_loading = false;
                    };
                });
            },
            // 一级分类改变
            changeCateV1() {
                this.post_form.id_v2 = "";
                this.post_form.id_v3 = "";
                this.category_v2 = [];
                this.category_v3 = [];
                this.category.find(item => {
                    if (item.id == this.post_form.id_v1) {
                        this.category_v2 = item.childrens;
                    }
                });
            },
            // 二级分类改变
            changeCateV2() {
                this.post_form.id_v3 = "";
                this.category_v3 = [];
                this.category_v2.find(item => {
                    if (item.id == this.post_form.id_v2) {
                        this.category_v3 = item.childrens;
                    }
                })
            },

            search(page) {
                var that = this;
                let json = {
                    page: page,
                    search: {
                        parentid: that.post_form.id_v1,
                        childid: that.post_form.id_v2,
                        thirdid: that.post_form.id_v3,
                    },
                }
                this.getGoodsList(json);
            },

            //导入商品
            confirm()
            {
                var that = this;

                var arr = {
                    'parentid': [],
                    'childid':[],
                    'thirdid':[],
                };

                arr.parentid.push(this.category_form.id_v1);
                arr.childid.push(this.category_form.id_v2);
                if(this.category_form.id_v3){
                    arr.thirdid.push(this.category_form.id_v3);
                }
                let json = {category:arr,id:this.label_id};

                that.is_import_disabled = true;
                that.all_loading = true;
                that.$http.post('{!! yzWebFullUrl('plugin.jd-supply.admin.label-import.select') !!}',json).then(response => {
                    console.log(response);
                    that.is_import_disabled = true;
                    that.all_loading = false;
                    if(response.data.result==1) {
                        that.$message.success(response.data.msg);
                        this.import_show = false;
                        this.search(this.current_page);
                    } else{
                        that.$message.error(response.data.msg);
                        that.is_import_disabled = false;
                    }
                }),function(res){
                    console.log(res);
                    that.is_import_disabled = true;
                    that.all_loading = false;
                };
            }

        },
    })

</script>
@endsection('content')