blame | history | patch | commit | commitdiff | show whitespace
wzy
2021-01-24 f7ea5773570beb5ad8c6efb5c1cf743294ee079b 
 zq-erp/src/main/resources/templates/views/admin/hive-erp/order/serviceOrderDetail.html


@@ -10,318 +10,189 @@


    <meta http-equiv="Cache-Control" content="no-siteapp"/>


    <LINK rel="Bookmark" href="../images/favicon.ico">


    <!-- 本框架基本脚本和样式 -->


    <script type="text/javascript"


            th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>


    <script type="text/javascript"


            th:src="@{/js/systools/MBase.js}"></script>


    <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script>


    <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>


    <script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script>


    <script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script>


    <script type="text/javascript" th:src="@{/js/function/vip.js}"></script>


    <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">




    <script type="text/javascript" th:src="@{/js/function/vip.js}"></script>


    <script type="text/javascript" th:src="@{/js/function/meiduCommon.js}"></script>


</head>


<body>


<div class="ibox-content">




    <form class="form-horizontal" id="dataform"


          onsubmit="javascripr:return false;">


        <div class="panel panel-default">


            <div class="panel-heading"><strong th:text="'服务单金额:'+${obj.money}"></strong></div>


            <table class="table table-bordered table-striped "


                   style="width: 100%;" id="mgrid">


                <thead>


                <tr>


                    <th>项目名称</th>


                    <th width="50px">服务时长</th>


                    <th>服务时间</th>


                    <th width="300px">美疗师</th>


                    <th width="100px">提成</th>


                </tr>


                </thead>


                <tbody>


                <tr th:each="item,st:${obj.serviceItems}">


                    <th th:text="${item.projInfo?.name}"></th>


                    <th th:text="${item.projInfo?.timeLength+'分钟'}"></th>


                    <th>


                        <span th:text="${#dates.format(item.beginTime, 'yyyy-MM-dd HH:mm')}"></span>


                        ——


                        <span th:text="${#dates.format(item.endTime, 'yyyy-MM-dd HH:mm')}"></span>


                    </th>


                    <th th:text="${item.beautiStaffInfo?.suName}"></th>


                    <th th:text="${item.extract}"></th>


                </tr>


                </tbody>


            </table>


        </div>


        <div style="border-radius:5px; background:#F5F5F5;padding:10px 0;">


            <div class="form-group">


                <div class="col-sm-11 ">


                    <div class="row">


                        <label class="col-sm-1 control-label">会员姓名</label>


                        <div class="col-sm-2 ">


                            <p class="form-control-static" th:text="${obj?.vipInfo.vipName }"></p>


                        </div>


                        <div class="col-sm-5 ">


                            <label class="col-sm-3 control-label">会员编号</label>


                            <div class="col-sm-9">


                                <p class="form-control-static" th:text="${obj?.vipInfo.vipNo }"></p>


                            </div>


                        </div>


                        <div class="col-sm-4 ">


                            <label class="col-sm-5 control-label">会员手机 </label>


                            <div class="col-sm-7">


                                <p class="form-control-static" th:text="${obj?.vipInfo.phone }"></p>


                            </div>


                        </div>


                    </div>


                </div>


            </div>


            <div class="form-group">


                <div class="col-sm-11 ">


                    <div class="row">


                        <label class="col-sm-1 control-label">床位安排</label>


                        <div class="col-sm-2 ">


                            <p th:each="item:${cw}" th:if="${obj.bedId eq item.id }" class="form-control-static"


                               th:text="${item.bedName }"></p>


                        </div>


                        <div class="col-sm-5 ">


                            <label class="col-sm-3 control-label">服务时间</label>


                            <div class="col-sm-9">


                                <p class="form-control-static">


                                    <span th:text="${#dates.format(obj.bedState?.startTime, 'yyyy-MM-dd HH:mm')}"></span>


                                    ——


                                    <span th:text="${#dates.format(obj.bedState?.endTime, 'yyyy-MM-dd HH:mm')}"></span>


                                </p>


                            </div>


                        </div>


                    </div>


                </div>


            </div>






            <div class="form-group">


                <div class="col-sm-11 ">


                    <div class="row">


                        <label class="col-sm-1 control-label">预约时间 </label>


                        <div class="col-sm-2">


                            <p class="form-control-static">


                                <span th:text="${#dates.format(obj.yyTime, 'yyyy-MM-dd HH:mm')}"></span>


                            </p>


                        </div>


                        <div class="col-sm-5 ">


                            <label class="col-sm-3 control-label">配料师</label>


                            <div class="col-sm-10" th:each="item:${yls}" th:if="${obj.doctorId eq item.id }">


                                <p class="form-control-static" th:text="${item.staffName }"></p>


                            </div>


                        </div>


                        <div class="col-sm-4 ">


                            <label class="col-sm-5 control-label">备注 </label>


                            <div class="col-sm-7">


                                <p class="form-control-static" th:text="${obj?.remark }"></p>


                            </div>


                        </div>


                    </div>


                </div>


            </div>


            <div class="form-group">


                <div class="col-sm-11 ">


                    <div class="row">


                        <label class="col-sm-1 control-label">备注 </label>


                        <div class="col-sm-10">


                            <p class="form-control-static" th:text="${obj?.remark }"></p>


                        </div>




                    </div>


                </div>


            </div>


        </div>




        <div class="form-group ">


            <div class="col-sm-12 text-center">


                <a href="javascript:;" onclick="myPreview2()" class="btn btn-success radius">预览</a> &nbsp;&nbsp;&nbsp;&nbsp;


                <a href="javascript:;" onclick="print()" class="btn btn-success radius">打印</a> &nbsp;&nbsp;&nbsp;&nbsp;


                <button onclick="MTools.closeForm()" class="btn btn-danger radius" type="button">关闭</button>


            </div>


        </div>


</div>


</form>


</div>


<form id="print" style="display: none;">


    <!-- <form id="print"> -->


    <style midia="print">




        .table1 {


            width: 440px;


            font-size: 12px;


            border-top: 1px solid #333;


            margin-top: 20px;


<style>


    .ibox-content {


        background-color: rgba(240, 242, 245, 1);


        }




        .table4 {


            width: 440px;


            font-size: 12px;


            border-top: 1px solid #333;


            margin-top: 20px;


    .order-info p {


        line-height: 30px;


        }




        .table2 {


            font-size: 12px;


            border-top: 1px solid #333;


        }




        .table1 td {


            height: 20px;


        }




        .table2 td {


            height: 20px;


        }




        .table1 tr {


            height: 30px;


        }




        .table3 {


            position: absolute;


            font-size: 12px;


            border-top: 1px solid #333;


            bottom: 30px;


        }




        .tittl {


            text-align: center;


            font-size: 20px;


        }




        .line {


            border-bottom: 1px solid #333;


        }




    </style>




    <h1 class="tittl">HIVE消耗单</h1>


    <table class="table1">




        <tr>


            <td>会员姓名:[[${obj.vipInfo.vipName }]]</td>


            <td>联系电话:[[${obj.vipInfo.phone }]]</td>


            <td>打印日期:<span id="date"></span></td>


        </tr>


        <tr>


            <td>会员编号:[[${obj.vipInfo.vipNo}]]</td>


            <td>健康顾问:[[${obj.vipInfo.staffName}]]</td>


            <td>流水号:[[${obj.serviceNo}]]</td>


        </tr>


        <tr>


        </tr>


    </table>


    <table class="table2 table4 ">


        <tr class="line">


            <td>消费项目</td>


            <td>数量</td>


            <td>金额</td>


            <td>余次</td>


            <td>技师</td>


        </tr>




        <th:block th:each="item:${obj.serviceItems }">




            <tr>


                <td th:text="${item.projInfo?.name }"></td>


                <td th:text="${item.count}"></td>


                <td th:text="${item.projUse.price }"></td>


                <td th:if="${item.projUse.taocanId eq null }">0</td>


                <td th:if="${item.projUse.taocanId ne null }" th:text="${item.projUse.surplusCount }"></td>


                <td th:text="${item.beautiStaffInfo?.suName }"></td>


            </tr>




        </th:block>






    </table>


    <table class="table1 table3">


        <tr>


            <td>累计积分:


                <th:block th:text="${obj?.vipInfo.pointAll }"></th:block>


            </td>


            <td>本次划扣:


                <th:block th:text="${obj?.money }"></th:block>


            </td>


            <td>收银人:


                <th:block th:text="${user?.name }"></th:block>


            </td>


        </tr>


        <tr>


            <td>客户签名:</td>


            <td></td>


            <td></td>


        </tr>


    </table>


</form>


<body>


<div class="ibox-content" id="app">


    <el-container>


        <el-header style="height: 210px; background-color: white; margin: 15px;">


            <el-row style="line-height: 60px; padding-top: 20px;">


                <el-col :span="1" style="font-size: 40px; color:#409EFF;">


                    <i class="el-icon-s-order" type="primary"></i>


                </el-col>


                <el-col :span="10">


                    <h1 style="line-height: 60px; margin: 0 0;">服务单号：{{serviceOrderInfo.serviceNo}}</h1>


                </el-col>


                <el-col :span="5" style="float: right; margin-right: 10px;">


                    <el-button type="info" @click="printf">打印</el-button>


                    <!--                    <el-button type="primary">划扣</el-button>-->


                    <el-button type="danger" @click="toBack">返回</el-button>


                </el-col>


            </el-row>


            <el-row class="order-info" type="flex" justify="space-around"  style="height: 150px; padding: 30px 30px;">


                <el-col :span="5">


                    <p>会员姓名：{{serviceOrderInfo.vipInfo.staffName}}</p>


                    <p>会员电话：{{serviceOrderInfo.vipInfo.phone}}</p>


                </el-col>


                <el-col :span="5">


                    <p>会员编号：{{serviceOrderInfo.vipInfo.vipNo}}</p>


                    <p>床位安排：{{bedFormat()}}</p>


                </el-col>


                <el-col :span="6">


                    <p>服务时间：<span v-if="serviceOrderInfo.bedState != null">{{dateFormat(serviceOrderInfo.bedState.startTime)}} - {{dateFormat(serviceOrderInfo.bedState.endTime)}}</span></p>


                    <p>预约时间：{{dateFormat(serviceOrderInfo.yyTime)}}</p>


                </el-col>


                <el-col :span="3">


                    <p>配料师：{{pylFormat()}}</p>


                    <p>备注：{{serviceOrderInfo.remark}}</p>


                </el-col>


            </el-row>


        </el-header>


        <el-main style="background-color: white; margin: 15px; padding: 20px 30px;">


            <el-tabs v-model="tabName" @tab-click="handleClick">


                <el-tab-pane label="服务单" name="serviceOrder">


                    <el-table :data="tableData"


                              style="width: 100%">


                        <el-table-column


                                prop="projInfo.name"


                                label="商品名称"


                                width="280">


                        </el-table-column>


                        <el-table-column


                                prop="projInfo.timeLength"


                                label="服务时长"


                                width="200">


                        </el-table-column>


                        <el-table-column


                                prop="address"


                                label="服务时间" :formatter="serviceTime">


                        </el-table-column>


                        <el-table-column


                                prop="beautiStaffInfo.suName"


                                label="美疗师"


                                width="200">


                        </el-table-column>


                        <el-table-column


                                prop="extract"


                                label="提成"


                                width="200">


                        </el-table-column>


                    </el-table>


                </el-tab-pane>


            </el-tabs>


        </el-main>


    </el-container>


</div>


<script type="text/javascript" th:src="@{/js/plugin/LodopFuncs.js}"></script>


<script type="text/javascript" th:src="@{/js/systools/AjaxProxyVue.js}"></script>


<script type="text/javascript" th:src="@{/js/plugin/vue.js}"></script>


<script type="text/javascript" th:src="@{/plugin/element-ui/index.js}"></script>


<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>


<script type="text/javascript">


<script type="text/javascript" th:inline="javascript">


    //<![CDATA[


    var app = new Vue({


        el : "#app",


        data : {


            serviceOrderInfo : "",


            tabName : "serviceOrder",


            tableData : [],


            bedList : [],


            plsList : []


        },


        created :function () {


            this.bedList = /*[[${cw}]]*/


                this.serviceOrderInfo = /*[[${obj}]]*/


                    this.tableData = this.serviceOrderInfo.serviceItems;


            this.plsList = /*[[${yls}]]*/


                console.log(this.plsList);


        },


        methods : {


            handleClick() {},


            dateFormat(time) {


                return moment(time).format("YYYY-MM-DD HH:mm");


            },


            bedFormat() {


                if (this.bedList.length < 0) {


                    return "-";


                }




    var LODOP;


                var beds = this.bedList;


                var bedId = this.serviceOrderInfo.bedId;


                if (!bedId) {


                    return "-";


                }




                for(var i = 0; i < beds.length; i++) {


                    if (beds[i].id == bedId) {


                        return beds[i].bedName;


                    }


                }


            },


            pylFormat() {


                if (!this.plsList) {


                    return;


                }




                var plsList = this.plsList;


                var doctorId = this.serviceOrderInfo.doctorId;




                for(var i = 0; i < plsList.length; i++) {


                    if (plsList[i].id = doctorId) {


                        return plsList[i].staffName;


                    }


                }


            },


            printf() {


                var id = this.serviceOrderInfo.id;


                layer.open({


                    type: 2,


                    title: "打印服务单",


                    area: ['250px', '550px'],


                    maxmin: true,


                    content: [basePath + '/admin/redirect/hive/beautySalon/print-service?id=' + id]


                });


            },


            toBack() {


                MTools.closeForm();


            },


            serviceTime(row, column) {


                if (!column.bedState) {


                    return "-";


                }


                var startTime = moment(column.bedState.startTime).format("YYYY-MM-DD HH:mm");


                var endTime = moment(column.bedState.endTime).format("YYYY-MM-DD HH:mm");


                return startTime + "-" + endTime;


            }


        },


    });


    //]]>




    function print() {


        CreateOneFormPage();


        LODOP.PRINTA();


    }




    function myPreview2() {


        CreateOneFormPage();


        LODOP.SET_PREVIEW_WINDOW(0, 0, 0, 760, 540, "");


        LODOP.PREVIEW();


    }




    function CreateOneFormPage() {


        $("#date").text(getNowFormatDate());




        LODOP = getLodop();




        LODOP.PRINT_INIT("");


        LODOP.SET_PRINT_STYLE("FontSize", 18);


        LODOP.SET_PRINT_PAGESIZE(0, 2300, 945, "");


        strCenterStyle = "<style/>table {width:100%}</style>";


        LODOP.ADD_PRINT_HTM(5, 5, "RightMargin:0.9cm", "BottomMargin:9mm", strCenterStyle


            + document.getElementById("print").innerHTML);


        /*    LODOP.ADD_PRINT_HTM(5, "6%", "88%", 600, strCenterStyle


                    + document.getElementById("print").innerHTML); */


        LODOP.SET_PRINT_STYLE("Bold", 1);


        /*    LODOP.ADD_PRINT_HTM(30,30,650,600,document.getElementById("print").innerHTML); */




    };




    function CreateOneFormPage1() {


        $("#date").text(getNowFormatDate());




        LODOP = getLodop();


        LODOP.SET_LICENSES("湖南卓景京信息技术有限公司", "4DCD4C2508498B1DDD6CD498AC0B04F2",


            "", "");


        LODOP.PRINT_INIT("打印控件功能演示_Lodop功能_表单一");


        LODOP.SET_PRINT_STYLE("FontSize", 18);


        LODOP.SET_PRINT_PAGESIZE(0, 2300, 1945, "");


        strCenterStyle = "<style/>table {width:100%}</style>";


        LODOP.ADD_PRINT_HTM(5, "9%", "82%", 600, strCenterStyle


            + document.getElementById("print").innerHTML);


        LODOP.SET_PRINT_STYLE("Bold", 1);


        /*    LODOP.ADD_PRINT_HTM(30,30,650,600,document.getElementById("print").innerHTML); */




    };




    //获取当前时间


    function getNowFormatDate() {


        var date = new Date();


        var seperator1 = "-";


        var seperator2 = ":";


        var month = date.getMonth() + 1;


        var strDate = date.getDate();


        if (month >= 1 && month <= 9) {


            month = "0" + month;


        }


        if (strDate >= 0 && strDate <= 9) {


            strDate = "0" + strDate;


        }


        var currentdate = date.getFullYear() + seperator1 + month + seperator1


            + strDate + " " + date.getHours() + seperator2


            + date.getMinutes() + seperator2 + date.getSeconds();


        return currentdate;


        var id = $("#serviceId").val();


        layer.open({


            type: 2,


            title: "打印服务单",


            area: ['250px', '550px'],


            maxmin: true,


            content: [basePath + '/admin/redirect/hive/beautySalon/print-service?id=' + id]


        });


    }