hemall.terabimsoft.com.cn/plugins/agency/views/admin/add_goods.blade.php

@extends('layouts.base')

@section('title', "商品列表")
@section('content')

    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods.css')}}"/>

    <div id="qrcode" ref="qrcode" style="display:none;"></div>
    <div class="rightlist">
        <div id="app" v-cloak v-loading="all_loading">
            <template>
                <div class="second-list">
                    <div class="third-list">
                        <div class="form-list">
                            <el-form :inline="true" :model="search_form" ref="search_form" style="margin-left:10px;">
                                <el-row>
                                    <el-form-item label="" prop="">
                                        <el-select v-model="search_form.status" placeholder="请选择商品状态" clearable>
                                            <el-option v-for="item in status_list" :key="item.id" :label="item.name"
                                                       :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="search_form.id_v1" placeholder="请选择一级分类" clearable
                                                   @change="changeV1()">
                                            <el-option v-for="item in category_list" :key="item.id" :label="item.name"
                                                       :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="search_form.id_v2" placeholder="请选择二级分类" clearable
                                                   @change="changeV2()">
                                            <el-option v-for="item in category_list_v2" :key="item.id"
                                                       :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-select v-model="search_form.id_v3" placeholder="请选择三级分类" clearable
                                                   v-if="catlevel==3">
                                            <el-option v-for="item in category_list_v3" :key="item.id"
                                                       :label="item.name" :value="item.id"></el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="" prop="keyword">
                                        <el-input v-model="search_form.keyword" placeholder="请输入商品ID或关键字"></el-input>
                                    </el-form-item>
                                    <a href="#">
                                        <el-button type="primary" icon="el-icon-search" @click="search(1)">搜索
                                        </el-button>
                                    </a>
                                </el-row>
                            </el-form>
                        </div>
                        <div class="table-list">
                            <div style="margin-left:10px;">
                                <el-checkbox v-model.number="is_all_choose" :true-label="1" :false-label="0"
                                             @change="allChoose">[[is_all_choose==1?'全不选':'全选']]
                                </el-checkbox>
                                <el-button size="small" @click="batchPutAway(1)">添加库存商品</el-button>
                            </div>
                            <div>
                                <template>
                                    <el-table :data="goods_list" style="width: 100%"
                                              :class="table_loading==true?'loading-height':''"
                                              v-loading="table_loading">
                                        <el-table-column prop="id" label="选择" width="60" align="center">
                                            <template slot-scope="scope">
                                                <el-checkbox v-model.number="scope.row.is_choose" :true-label="1"
                                                             :false-label="0"
                                                             @change="oneChange(scope.row)"></el-checkbox>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="id" label="ID" width="70"
                                                         align="center"></el-table-column>
                                        </el-table-column>
                                        <el-table-column prop="total" label="商品" width="60" align="center">
                                            <template slot-scope="scope">
                                                <img :src="scope.row.thumb" style="width:50px;height:50px;">
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="down_time" label="" min-width="180" align="left"
                                                         class="edit-cell">
                                            <template slot-scope="scope">
                                                <el-popover class="item" placement="top" effect="light">
                                                </el-popover>
                                                [[scope.row.title]]
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="member_num" label="价格" max-width="80" align="center">
                                            <template slot-scope="scope">
                                                ￥[[scope.row.price]]
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="库存" align="center" max-width="80">
                                            <template slot-scope="scope">
                                                [[scope.row.stock]]
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="状态" prop="status_message" align="center">
                                            <template slot-scope="scope">
                                                [[scope.row.status?'上架':'下架']]
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </div>
                        </div>
                    </div>
                    <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>
                </div>
            </template>
        </div>
    </div>

    <script src="{{resource_get('static/js/qrcode.min.js')}}"></script>
    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            data() {
                return {
                    id: "",
                    catlevel: 0,//是否显示三级分类
                    is_all_choose: 0,//是否全选
                    goods_list: [],//商品列表
                    all_loading: false,
                    status_list: [
                        {id: '', name: '全部状态'},
                        {id: 0, name: '下架'},
                        {id: 1, name: '上架'},
                    ],
                    category_list: [],
                    category_list_v2: [],
                    category_list_v3: [],
                    search_form: {
                        id_v1: '',
                        id_v2: '',
                        id_v3: '',
                    },
                    form: {},
                    loading: false,
                    table_loading: false,
                    total: 0,
                    per_size: 0,
                    current_page: 0,
                }
            },
            created() {
                let that = this;
                document.onkeydown = function () {
                    if (window.event.keyCode == 13)
                        that.search(1);
                }
            },
            mounted() {
                let data = {!! $data !!};
                this.setData(data);
                console.log(data)
            },
            methods: {
                setData(data) {
                    this.goods_list = data.list.data;
                    let arr = [];
                    this.goods_list.forEach((item, index) => {
                        item.title = this.escapeHTML(item.title)
                        arr.push(Object.assign({}, item, {is_choose: 0}))//是否选中
                    });
                    this.goods_list = arr;
                    this.total = data.list.total;
                    this.current_page = data.list.current_page;
                    this.per_size = data.list.per_page;
                    this.category_list = data.category;
                    this.catlevel = data.cat_level;
                },
                getData() {
                    var that = this;
                    that.table_loading = true;
                    that.$http.post("{!! yzWebUrl('plugin.agency.admin.goods.add-index') !!}").then(response => {
                        if (response.data.result == 1) {
                            this.setData(response.data.data);
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }), function (res) {
                        that.table_loading = false;
                    };
                },
                changeV1() {
                    let that = this;
                    this.search_form.id_v2 = "";
                    this.search_form.id_v3 = "";
                    this.category_list_v2 = [];
                    this.category_list_v3 = [];
                    that.$http.post("{!! yzWebFullUrl('goods.category.get-categorys-json') !!}", {
                        level: 2,
                        parent_id: this.search_form.id_v1
                    }).then(response => {
                        if (response.data.result == 1) {
                            this.category_list_v2 = response.data.data;
                        } else {
                            that.$message.error(response.data.msg);
                        }
                    }), function (res) {
                    };
                    this.category_list.find(item => {
                        if (item.id == this.search_form.id_v1) {
                            this.category_list_v2 = item.childrens;
                        }
                    });
                },
                changeV2() {
                    let that = this;
                    this.search_form.id_v3 = "";
                    this.category_list_v3 = [];
                    if (this.catlevel == 3) {
                        that.$http.post("{!! yzWebFullUrl('goods.category.get-categorys-json') !!}", {
                            level: 3,
                            parent_id: this.search_form.id_v2
                        }).then(response => {
                            if (response.data.result == 1) {
                                this.category_list_v3 = response.data.data;
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        }), function (res) {
                        };
                    }
                },
                search(page) {
                    var that = this;
                    console.log(that.search_form)
                    let product_attr = [];
                    if (that.search_form.is_new == 1) {
                        product_attr.push('is_new')
                    }
                    if (that.search_form.is_hot == 1) {
                        product_attr.push('is_hot')
                    }
                    if (that.search_form.is_recommand == 1) {
                        product_attr.push('is_recommand')
                    }
                    if (that.search_form.is_discount == 1) {
                        product_attr.push('is_discount')
                    }
                    let json = {
                        page: page,
                        search: {
                            keyword: that.search_form.keyword,
                            status: that.search_form.status,
                            sell_stock: that.search_form.sell_stock,
                            brand_id: that.search_form.brand_id,
                            min_price: that.search_form.min_price,
                            max_price: that.search_form.max_price,
                            product_attr: product_attr,//商品类型
                            is_spec: that.search_form.is_spec,
                        },
                        category: {
                            parentid: that.search_form.id_v1,
                            childid: that.search_form.id_v2,
                            thirdid: that.search_form.id_v3,
                        }
                    };
                    that.table_loading = true;
                    that.$http.post("{!! yzWebUrl('plugin.agency.admin.goods.get-add-list') !!}", json).then(response => {
                        console.log(response);
                        if (response.data.result == 1) {
                            let arr = [];
                            that.goods_list = response.data.data.data;
                            that.goods_list.forEach((item, index) => {
                                item.title = that.escapeHTML(item.title)
                                arr.push(Object.assign({}, item, {is_choose: 0}))//是否选中
                            });
                            that.goods_list = arr;
                            that.total = response.data.data.total;
                            that.current_page = response.data.data.current_page;
                            that.per_size = response.data.data.per_page;
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }), function (res) {
                        console.log(res);
                        that.table_loading = false;
                    };
                },
                listCode(index) {
                    this.qrcodeScan(this.goods_list[index].link);
                },
                copyList(index) {
                    that = this;
                    let Url = that.$refs['list' + index];
                    console.log(Url)
                    Url.select(); // 选择对象
                    document.execCommand("Copy", false);
                    that.$message({message: "复制成功！", type: "success"});
                },
                oneChange(item) {
                    let that = this;
                    let is_all = 0;
                    that.goods_list.some((item, index) => {
                        if (item.is_choose == 1) {
                            is_all = 1;
                        } else {
                            is_all = 0;
                            return true;
                        }
                    })
                    that.is_all_choose = is_all;
                },
                allChoose() {
                    let that = this;
                    let status = 0;
                    if (that.is_all_choose == 1) {
                        status = 1;
                    } else {
                        status = 0;
                    }
                    that.goods_list.forEach((item, index) => {
                        item.is_choose = status;
                    })
                },
                batchPutAway(data) {
                    var that = this;
                    that.table_loading = true;
                    let ids = [];
                    that.goods_list.forEach((item, index) => {
                        if (item.is_choose == 1) {
                            ids.push(item.id);
                        }
                    })
                    let json = {data: data, ids: ids}
                    that.$http.post("{!! yzWebUrl('plugin.agency.admin.goods.add') !!}", json).then(response => {
                        console.log(response);
                        if (response.data.result == 1) {
                            that.$message.success('操作成功！');
                            that.is_all_choose = 0;
                            that.search(1);
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }), function (res) {
                        console.log(res);
                        that.table_loading = false;
                    };
                },
                escapeHTML(a) {
                    a = "" + a;
                    return a.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&apos;/g, "'");
                    ;
                },
            },
        })
    </script>

@endsection