hemall.terabimsoft.com.cn/plugins/electronics-bill/views/admin/children/order.blade.php

<template id="electronicsBill">
    <div>
        <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width="0"
                height="0">
            <embed id="LODOP_EM" type="application/x-print-lodop" width="0" height="0" pluginspage="{{resource_get('plugins/electronics-bill/src/common/lodop/install_lodop32.exe', 1)}}"></embed>
        </object>
        {{--不知道这段有什么用暂时注释--}}
{{--        <div style="margin-right: 15px;color: #909399;float: left">--}}
{{--            <span v-if="item && item.has_many_bill_temp != false">--}}
{{--                已打印--}}
{{--            </span>--}}
{{--            <span v-else>--}}
{{--                未打印--}}
{{--            </span>--}}
{{--        </div>--}}
        <div style="margin-right: 15px;float: left" v-if="item && item.has_many_bill_temp.length == 0">
            <el-dropdown trigger="click"  @command="buttonPrint">
                <span class="el-dropdown-link" style="color:#29BA9C">打印电子面单</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{type:'one_print',order_id:item.id}">单包裹打印</el-dropdown-item>
                    <el-dropdown-item :command="{type:'open_package_view',order_id:item.id}">多包裹打印</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <div style="margin-right: 15px;float: left" v-if="item && item.has_many_bill_temp.length != 0">
            <el-dropdown trigger="click"  @command="buttonPrint">
                <span class="el-dropdown-link" style="color:#29BA9C">打印电子面单</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{type:'old_print',order_id:item.id}">原单号打印</el-dropdown-item>
                    <el-dropdown-item :command="{type:'one_print',order_id:item.id,new_print:1}" v-if="item.status == 1 ||　item.status == 2">新单号打印</el-dropdown-item>
                    <el-dropdown-item :command="{type:'open_package_view',order_id:item.id}" v-if="item.status == 1 ||　item.status == 2">多包裹打印</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>


        <el-dialog
                title="多包裹打印"
                :visible.sync="package_view"
                width="40%"
                :before-close="closePackageView"
        >
            <a style="color:#29BA9C" @click="openGoodsView()">+创建包裹</a>
            <span style="margin-left: 15px">还剩[[statisticsGoodsNum()]]件商品未分配</span>
            <el-tabs type="card">
                <el-tab-pane v-for="(item,index) in package">
                    <span slot="label">
                        <span>包裹[[index + 1]]</span>
                        <a @click="delPackage(index)">×</a>
                    </span>
                    <div>
                        <span>共[[statisticsPackageGoodsNum(index)]]件商品</span>
                        <a style="color:#29BA9C" @click="openGoodsView(index)">+添加商品</a>
                    </div>
                    <el-table :data="item" style="width: 100%">
                        <el-table-column>
                            <template slot-scope="scope">
                                <el-image :src="scope.row.thumb"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <span>[[scope.row.title]]</span>
                                <span>[[scope.row.goods_id]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <span>[[scope.row.goods_option_title]]</span>
                                <el-popover
                                        placement="top-end"
                                        width="200"
                                        trigger="click">
                                    <div style="text-align: center">
                                        <el-input-number v-model="scope.row.total" :min="1"
                                                         size="mini"></el-input-number>
                                        <br>
                                        <span>剩余数量[[statisticsGoodsNum(scope.row.id)]]</span>
                                        <el-button type="primary" size="mini" @click="filterGoods()">确定
                                        </el-button>
                                    </div>
                                    <el-link title="编辑" :underline="false" slot="reference">
                                        <i class="el-icon-edit"></i>
                                    </el-link>
                                </el-popover>
                                <span>×[[scope.row.total]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot-scope="scope">
                                <el-link title="删除" @click="delGoods(index,scope.$index)">
                                    <i class="el-icon-delete"></i>
                                </el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="printMore()">打印</el-button>
            </span>
        </el-dialog>

        <el-dialog
                title="选择商品"
                :visible.sync="goods_view"
                width="50%"
                :before-close="handleClose"
        >
            <el-table :data="surplus_goods" ref="selectOrderGoods" @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column width="100px" :label="'共' + statisticsGoodsNum() + '件商品'">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.thumb"></el-image>
                    </template>
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <div style="text-align: left">
                            <span>[[scope.row.title]]</span>
                            <br>
                            <span>[[scope.row.goods_id]]</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <div style="text-align: right;margin-right: 15px">
                            <span style="margin-right: 10px">[[scope.row.goods_option_title ? scope.row.goods_option_title : '默认']]</span>
                            <el-popover
                                    placement="top-end"
                                    width="200"
                                    trigger="click">
                                <div style="text-align: center">
                                    <el-input-number v-model="scope.row.total" :min="0" :max="scope.row.size_num"
                                                     size="mini"></el-input-number>
                                    <br>
                                    <span>剩余数量[[scope.row.size_num]]</span>
                                </div>
                                <el-link title="编辑" :underline="false" slot="reference">
                                    <i class="el-icon-edit"></i>
                                </el-link>
                            </el-popover>
                            <span>×[[scope.row.total]]</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="createPackage()" v-if="!goods_view2">创建</el-button>
                <el-button type="primary" @click="addGoods()" v-if="goods_view2">添加</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script src="{{resource_get('plugins/electronics-bill/src/common/static/js/LodopFuncs.js', 1)}}"></script>
<script src="{{resource_get('plugins/electronics-bill/src/common/static/js/jquery.jqprint-0.3.js')}}"></script>
<script src="{{resource_get('plugins/electronics-bill/src/common/static/js/jquery-migrate-1.2.1.min.js')}}"></script>
<script>
    Vue.component('electronicsBill', {
        props: {item:{
            type:Object,
                default:()=>{}
            }},
        delimiters: ['[[', ']]'],
        data() {
            return {
                get_goods_url: '{!! yzWebFullUrl('plugin.electronics-bill.admin.order-package.getGoods') !!}',// 获取剩余商品
                get_template_url: '{!! yzWebFullUrl('plugin.electronics-bill.admin.order-package.getOriginallyTemplate') !!}',// 原单号打印
                print_one_package_url: '{!! yzWebFullUrl('plugin.electronics-bill.admin.order-package.printOnePackage') !!}',// 单包裹打印
                print_more_package_url: '{!! yzWebFullUrl('plugin.electronics-bill.admin.order-package.printMorePackage') !!}',// 多包裹打印
                order_id:0,
                order_goods: [],// 订单商品
                template_list: [],// 打印模板
                package: [],// 包裹
                surplus_goods: [],
                select_change: [],
                goods_view: false,
                package_view: false,
                goods_view2:false,
                package_index:0,
            }
        },
        watch: {
        },
        mounted: function () {
            // console.log(this.item);
        },
        methods: {
            buttonPrint(param){
                switch (param.type){
                    case 'open_package_view':// 多包裹打印
                        this.openPackageView(param.order_id);
                        this.getGoods(param.order_id);
                        break;
                    case 'old_print':// 原单号打印
                        this.getTemplate(param.order_id);
                        break;
                    case 'one_print':// 新单号打印
                        if(param.new_print) {
                            this.$confirm('此按钮相当于重新单包裹发货,确定吗？')
                                .then(_ => {
                                    this.printOnePackage(param.order_id);
                                })
                                .catch(_ => {
                                });
                        }else{
                            this.printOnePackage(param.order_id);
                        }
                        break;
                }
            },
            // 打印
            printMore(){
                this.printMorePackage(this.order_id,this.handleMorePackage());
            },
            // 获取未发货的商品
            getGoods(order_id) {
                let that = this;
                let url = that.get_goods_url + '&order_id=' + order_id;

                let loading = that.$loading({
                    target: document.querySelector(".content"),
                    background: 'rgba(0, 0, 0, 0)'
                });
                that.$http.get(url).then((res) => {
                    if (res.data.result == 1) {
                        that.order_goods = res.data.data;
                        this.filterGoods()
                    } else {
                        that.$message({message: res.data.msg, type: 'error'});
                    }
                    loading.close();
                }, (err) => {
                    that.$message({message: err.data.msg, type: 'error'});
                    loading.close();
                })
            },
            // 获取原单号
            getTemplate(order_id) {
                let that = this;
                let url = that.get_template_url + '&order_id=' + order_id;

                let loading = that.$loading({
                    target: document.querySelector(".content"),
                    background: 'rgba(0, 0, 0, 0)'
                });
                that.$http.get(url).then((res) => {
                    if (res.data.result == 1) {
                        that.template_list = res.data.data.template_list;
                        this.billTempView(that.template_list);
                    } else {
                        that.$message({message: res.data.msg, type: 'error'});
                    }
                    loading.close();
                }, (err) => {
                    that.$message({message: err.data.msg, type: 'error'});
                    loading.close();
                })
            },
            // 单包裹打印
            printOnePackage(order_id) {
                let that = this;
                let url = that.print_one_package_url;

                let loading = that.$loading({
                    target: document.querySelector(".content"),
                    background: 'rgba(0, 0, 0, 0)'
                });
                that.$http.post(url, {order_id: order_id}).then((res) => {
                    if (res.data.result == 1) {
                        that.template_list = res.data.data.template_list;
                        this.billTempView(that.template_list);
                    } else {
                        that.$message({message: res.data.msg, type: 'error'});
                    }
                    loading.close();
                }, (err) => {
                    that.$message({message: err.data.msg, type: 'error'});
                    loading.close();
                })
            },
            // 多包裹打印
            printMorePackage(order_id, package) {
                let that = this;
                let url = that.print_more_package_url;

                let loading = that.$loading({
                    target: document.querySelector(".content"),
                    background: 'rgba(0, 0, 0, 0)'
                });
                that.$http.post(url, {order_id: order_id, order_package: package}).then((res) => {
                    if (res.data.result == 1) {
                        that.template_list = res.data.data.template_list;
                        this.billTempView(that.template_list);
                    } else {
                        that.$message({message: res.data.msg, type: 'error'});
                    }
                    loading.close();
                }, (err) => {
                    that.$message({message: err.data.msg, type: 'error'});
                    loading.close();
                })
            },
            // 处理多包裹请求
            handleMorePackage(){
                let order_package = [];
                for (let item of this.package){
                    let goods_list = [];
                    for(let item2 of item){
                        goods_list.push({
                            order_goods_id:item2.id,
                            total:item2.total,
                        });
                    }
                    order_package.push(goods_list);
                }

                return order_package;
            },
            // 过滤剩余商品
            filterGoods() {
                let goods_list = JSON.parse(JSON.stringify(this.order_goods));
                if (this.package.length != 0) {
                    for (let v1 of this.package) {
                        for (let v2 of v1) {
                            let goods_list2 = goods_list.filter(item => {
                                if (item.id == v2.order_goods_id) {
                                    item.total -= v2.total;
                                    if (item.total <= 0) {
                                        return false;
                                    }
                                }
                                return true;
                            });
                            goods_list = goods_list2;
                        }
                    }
                }

                for (let v1 of goods_list) {
                    this.$set(v1, 'size_num', v1.total)
                    this.$set(v1, 'order_goods_id', v1.id)
                }
                // console.log(goods_list);
                this.surplus_goods = goods_list;
            },
            // 打印
            billTempView(template) {
                let newWin = window.open("")
                template.forEach((item,i) => {
                        let tempList = item.print_template;
                        newWin.document.write(tempList); //将需要打印的内容添加进新的窗口
                    })
                    newWin.document.close(); //在IE浏览器中使用必须添加这一句
                    newWin.focus(); //在IE浏览器中使用必须添加这一句
                    setTimeout(function () {
                        newWin.print(); //打印
                        newWin.close(); //关闭窗口
                }, 100);
            },
            // 打开包裹视图
            openPackageView(order_id) {
                this.order_id = order_id
                this.package_view = true;
            },
            // 打开商品视图
            openGoodsView(package_index) {
                if(package_index === 0 || package_index){
                    this.goods_view2 = true;
                    this.package_index = package_index;
                    console.log(this.goods_view2,this.package_index);
                }
                this.filterGoods();
                this.goods_view = true;
            },
            // 创建包裹
            createPackage() {
                let package = [];
                for (let item of this.select_change) {
                    if (item.total <= 0) continue;
                    for (let item2 of this.surplus_goods){
                        if(item.id == item2.id){
                            package.push(JSON.parse(JSON.stringify(item2)));
                        }
                    }
                }
                if(package.length > 0){
                    this.package.push(package);
                }
                this.filterGoods();
                this.goods_view = false;
            },
            // 删除包裹
            delPackage(index) {
                this.package.splice(index, 1);
                this.filterGoods();
            },
            // 添加商品
            addGoods(){
                // console.log(this.package_index,this.package[this.package_index]);
                // return;
                for (let item of this.select_change) {
                    if(item.total <= 0) continue;
                    let is_goods = false;
                    for (let item2 of this.package[this.package_index]){
                        if(item.id == item2.id){
                            is_goods = true;
                            item2.total += item.total;
                            break;
                        }
                    }
                    if(!is_goods){
                        this.package[this.package_index].push(JSON.parse(JSON.stringify(item)));
                    }
                }
                this.filterGoods();
                this.goods_view = false;
                this.goods_view2 = false;
            },
            // 删除商品
            delGoods(package_index, goods_index) {
                this.package[package_index].splice(goods_index, 1);
                if (this.package[package_index].length == 0) {
                    this.package.splice(package_index, 1);
                }
                this.filterGoods();
            },
            // 统计剩余商品数量
            statisticsGoodsNum(order_goods_id) {
                let num = 0;
                if(order_goods_id){
                    for (let v of this.surplus_goods) {
                        if (v.id == order_goods_id){
                            num = v.size_num;
                        }
                    }
                    return num;
                }
                for (let v of this.surplus_goods) {
                    num += v.total;
                }
                return num;
            },
            // 统计包裹商品
            statisticsPackageGoodsNum(package_index){
                let num = 0;
                for (let item of this.package[package_index]){
                    num += item.total;
                }
                return num;
            },

            // 多选
            handleSelectionChange(sel) {
                this.select_change = sel;
            },
            // 关闭商品窗口
            handleClose(){
                this.goods_view2 = false;
                this.package_index = 0;
                this.goods_view = false;
                this.select_change = [];
            },
            // 关闭包裹窗口
            closePackageView() {
                this.order_id = 0,
                this.order_goods = [];// 订单商品
                this.template_list = [];// 打印模板
                this.package = [];// 包裹
                this.surplus_goods = [];
                this.select_change = [];
                this.goods_view = false;
                this.package_view = false;
                this.goods_view2 = false;
                this.package_index = 0;
            },
        },
        template: `#electronicsBill`,
    });

</script>