mashangyoujiu/Application/Retail/View/Flow/showrefund.html

<!DOCTYPE html>
<html>
<!--[1.1.96]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>退货单详情</title>
    <link href="__PUBLIC__/Retail/css/base.css" rel="stylesheet">
    <script src="__PUBLIC__/jquery/js/jquery-2.0.3.min.js"></script>
    <link href="__PUBLIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="__PUBLIC__/Retail/css/store.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/layui/css/layui.css"/>
    <style>
        .btn {
            width: 88px;
            background-color: #009688;
            padding: 5px;
            margin: 5px auto;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .btn a {
            color: white;
        }

        .btn span {
            color: white;
        }

        /*#FF5722*/
        .btn a.del {
            color: white;
        }

        .mydel {
            background-color: #FF5722;
        }

        .Business_tb1 table tr th {
            height: 30px !important;
            background-color: #D5e9ed;
            color: #00a3d6;
        }

        .Business_tb1 table tr td {
            /*border: none;*/
            height: 100%;
            position: relative;
            /*background-color: white;*/
            font-size: 12px;
        }

        .Business_tb1 table tr {
            width: 100% !important;
        }

        .Business_tb1 table tr:nth-child(2n+1) {
            /*background-color: pink;*/
        }

        .layui-form-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: row;
        }

        label {
            margin-bottom: 0;
            width: auto;
        }

        select {
            height: 38px;
        }

        .delbtn {
            color: #00a3d6;
        }

        .goodsinput {
            width: 80px;
            text-align: center;
        }

        .keywordinput {
            width: 200px;
            height: 40px;
            box-sizing: border-box;
            padding: 0px 10px;
        }

        .searchbtn {
            /*width: 60px;*/
            height: 40px;
            padding: 0px 18px;
            font-size: 14px;
            text-align: center;
            line-height: 40px;
            background: #f55;
            border: 0;
            border-radius: 0 2px 2px 0;
            margin: 0;
            color: white;
        }

        .showgoodsitem {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 100px;
            left: calc(50% - 200px);
            background-color: white;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
            z-index: 400;
            box-sizing: border-box;
            padding: 20px;
        }

        .showgoodsitem input.keywordinput {
            height: 28px;
        }

        .showgoodsitem .layui-form-label {
            width: 90px;
        }

        body, html {
            width: 100%;
            height: 100%;
            background-color: #f3f3f3;
        }

        .showgoodsitembox {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.1);
            top: 0;
            left: 0;
            z-index: 450;
        }

        .showgoodsitembox2 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .total {
            width: 96%;
            margin-left: 15px;
            height: 80px;
            margin-bottom: 40px;
            margin-top: 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            box-sizing: border-box;
            /*border:1px solid rgba(0,0,0,0.3);*/
            padding: 10px 30px;
            background-color: #f3f3f3;
        }

        .totalnum {
            color: #00a3d6;
        }

        .import {
            display: block;
            width: 92px;
            height: 40px;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }

        [v-cloak] {
            display: none
        }
    </style>
</head>
<body style="cursor: pointer;box-sizing: border-box;padding-top: 30px;">
<div id="app" style="position: relative;with:100%;height: 100%;">
    <form class="" style="display: flex;height: 100%;flex-direction: column;">
        <div class="layui-form-item">
            <label class="layui-form-label">供货商</label>
            <div class="layui-input-inline">
                <select name="supplier_id" id="supplier_id" class="supplier" v-model="supplier_id" disabled>
                    <option value="0">--选择供货商--</option>
                    <volist name="info" id="vo">
                        <option value="{$vo.id}">{$vo.supplier_name}</option>
                    </volist>
                </select>
            </div>
            <div class="layui-input-inline">
                <if condition="$authArr['expUser']">
                    <input type="button" value="导出退货单详情" class="searchbtn" @click="doexport">
                </if>
            </div>
            <div class="layui-input-inline">
                <input type="button" value="打印退货单详情" class="searchbtn" @click="doprint">
            </div>
        </div>
        <div class="Business"
             style="flex: 1;overflow-y: hidden;display: flex;flex-direction:column;box-sizing: border-box;"
             id="printhtml">
            <div class="Business_tb1" style="height: 100%;">
                <table border="0" cellspacing="0" cellpadding="0" class="layui-table"
                       style="height:100%;position: relative;display: flex;flex-direction: column;overflow-y: auto;">
                    <tr style="height: 30px;position: relative;top:0;left:0;" id="tabletitle">
                        <th>序号</th>
                        <th>商品名称</th>
                        <th>货号</th>
                        <th>条码</th>
                        <th>售价</th>
                        <th>库存</th>
                        <!---->
                        <th>退货量</th>
                        <th>单位</th>
                        <th>规格</th>
                        <th>进货价(元)</th>
                        <th>小计(元)</th>
                    </tr>
                    <template v-for="(item,index) in goodsarr">
                        <tr style="height: 30px;">
                            <td>{{index+1}}</td>
                            <td>
                                {{item.goods_name}}
                            </td>
                            <td>
                                {{item.good_number}}
                            </td>
                            <td>
                                {{item.goods_code}}
                            </td>
                            <td>
                                {{item.retail_price}}
                            </td>
                            <td>
                                {{item.goods_num}}
                            </td>
                            <td>
                                {{item.num}}
                            </td>
                            <td>
                                {{item.company}}
                            </td>
                            <td>
                                {{item.specifications}}
                            </td>
                            <td>
                                {{item.purch_price}}
                            </td>
                            <td>
                                {{Math.round(100*item.num*item.purch_price)/100}}
                            </td>
                        </tr>
                    </template>
                </table>
                <!--endprint-->
            </div>
        </div>
        <div class="total">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto;">商品种类:
                    <span class="totalnum" v-cloak>{{goodsarr.length}}</span>
                </label>
                <label class="layui-form-label" style="width: auto;">退货量:
                    <span class="totalnum" v-cloak>{{floworderdata.allnum}}</span>
                </label>
                <label class="layui-form-label" style="width: auto;">退货总金额:
                    <span class="totalnum" v-cloak>{{floworderdata.allmoney}}</span>
                </label>
                <label class="layui-form-label" style="width: auto;">修改金额:
                    <span class="totalnum" v-cloak>{{dismoney}}</span>
                </label>
                <label class="layui-form-label" style="width: auto;">结算金额:
                    <span class="totalnum" v-cloak>{{Math.round((floworderdata.allmoney-dismoney)*100)/100}}</span>
                </label>
                <input type="button" value="<<返回退货单" class="searchbtn" @click="doconfirm">
            </div>
        </div>
    </form>
    <iframe id="myiframe" width="100%" height="100%" style="display: none"
            src="{:U('printrefundflow')}?id={$order['id']}" frameborder="0" scrolling="auto"></iframe>
</div>
<input type="hidden" id="supplier_idhide" value="{$order['supplier_id']}">
<input type="hidden" id="floworderid" value="{$order['id']}">
<script type="text/javascript" src="__PUBLIC__/layui/layui.js"></script>
<script type="text/javascript" src="__PUBLIC__/flow/js/vue.js"></script>
<script type="text/javascript">
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer;
        var app = new Vue({
            el: '#app',
            data: function () {
                return {
                    supplier_id: $('#supplier_idhide').val(),
                    myfile: "",
                    dismoney: "{$order['dismoney']}",
                    showgoods: false,
                    floworderid: $('#floworderid').val(),
                    canchangenum: false,
                    settimeouttimer: "",
                    shade: false,
                    keyword: "",
                    shade2: false,
                    searchgoodsinfo: {},
                    goodsarr: []
                }
            },
            created: function () {
                // console.log(this.supplier_id);
                $('.showgoodsitembox').css({'opacity': 1});
                this.getgoodsarr();
            },
            methods: {
                getgoodsarr: function () {
                    var floworderid = this.floworderid;
                    var app = this;
                    $.ajax({
                        url: "{:U('getgoodsarr')}",
                        data: {
                            floworderid: floworderid
                        },
                        type: 'post',
                        success: function (res) {
                            if (res.status == 1) {
                                app.goodsarr = res.data;
                            } else {
                                app.goodsarr = [];
                            }
                        },
                        error: function (error) {
                            layer.msg('错误了。。。')
                        }
                    })
                },
                // 返回进货单
                doconfirm: function () {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    //window.location.replace("{:U('refund')}");
                },
                doexport: function () {
                    window.location.href = "{:U('expUser')}?id=" + $('#floworderid').val() + "&type=refund";
                },
                doprint: function doPrint() {
                    if (document.getElementById('myiframe').contentWindow.isgetgoodsarr == false) {
                        layer.msg('打印页面尚未准备好，请稍后再试');
                        return;
                    }
                    document.getElementById('myiframe').contentWindow.print();
                }
            },
            computed: {
                floworderdata: function () {
                    var allnum = 0;
                    var allgivenum = 0;
                    var allmoney = 0;
                    var goodsarr = this.goodsarr;
                    for (var i = 0; i < goodsarr.length; i++) {
                        allnum = allnum + goodsarr[i]['num'] * 1;
                        allgivenum = allgivenum + goodsarr[i]['givenum'] * 1;
                        allmoney = allmoney + goodsarr[i]['num'] * goodsarr[i]['purch_price'];
                    }
                    allnum = Math.round(allnum);
                    allgivenum = Math.round(allgivenum);
                    allmoney = Math.round(allmoney * 100) / 100;
                    return {
                        allnum: allnum,
                        allgivenum: allgivenum,
                        allmoney: allmoney
                    };
                }
            }
        })
    })
</script>
</body>
</html>