From e3b4931158274097a8389b4fbec05e44ac0bb2d2 Mon Sep 17 00:00:00 2001
From: Helius <wangdoubleone@gmail.com>
Date: Wed, 23 Dec 2020 21:27:35 +0800
Subject: [PATCH] modify

---
 zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/bj-form.html          |   10 
 zq-erp/src/main/resources/templates/views/admin/hive-erp/order/serviceOrderDetail.html |  479 +++++++-------------
 zq-erp/src/main/resources/templates/views/admin/hive-erp/order/orderXq-form.html       |  384 ++++++----------
 zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html     |  244 ++++++----
 zq-erp/src/main/java/com/matrix/system/hive/bean/SysOrderItem.java                     |   10 
 zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html       |    4 
 zq-erp/src/main/java/com/matrix/system/hive/service/imp/AchieveNewServiceImpl.java     |    4 
 zq-erp/src/main/java/com/matrix/system/hive/service/imp/SysOrderServiceImpl.java       |    2 
 zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form-bak.html |  140 ++++++
 9 files changed, 613 insertions(+), 664 deletions(-)

diff --git a/zq-erp/src/main/java/com/matrix/system/hive/bean/SysOrderItem.java b/zq-erp/src/main/java/com/matrix/system/hive/bean/SysOrderItem.java
index d63e9bf..42eab39 100644
--- a/zq-erp/src/main/java/com/matrix/system/hive/bean/SysOrderItem.java
+++ b/zq-erp/src/main/java/com/matrix/system/hive/bean/SysOrderItem.java
@@ -143,14 +143,14 @@
 	/**
 	 * 业绩计算
 	 */
-	private List<AchieveNew> achieveList;
+	private List<AchieveNew> achaeveList;
 
-	public List<AchieveNew> getAchieveList() {
-		return achieveList;
+	public List<AchieveNew> getAchaeveList() {
+		return achaeveList;
 	}
 
-	public void setAchieveList(List<AchieveNew> achieveList) {
-		this.achieveList = achieveList;
+	public void setAchaeveList(List<AchieveNew> achaeveList) {
+		this.achaeveList = achaeveList;
 	}
 
 	public String getPayMethodDetail() {
diff --git a/zq-erp/src/main/java/com/matrix/system/hive/service/imp/AchieveNewServiceImpl.java b/zq-erp/src/main/java/com/matrix/system/hive/service/imp/AchieveNewServiceImpl.java
index 1a7ec96..df7c66e 100644
--- a/zq-erp/src/main/java/com/matrix/system/hive/service/imp/AchieveNewServiceImpl.java
+++ b/zq-erp/src/main/java/com/matrix/system/hive/service/imp/AchieveNewServiceImpl.java
@@ -214,9 +214,9 @@
         if (CollectionUtils.isNotEmpty(pageOrder.getItems())) {
             for (SysOrderItem orderItem : pageOrder.getItems()) {
 
-                if (orderItem != null && CollectionUtils.isNotEmpty(orderItem.getAchieveList())) {
+                if (orderItem != null && CollectionUtils.isNotEmpty(orderItem.getAchaeveList())) {
 
-                    for (AchieveNew achieveNew : orderItem.getAchieveList()) {
+                    for (AchieveNew achieveNew : orderItem.getAchaeveList()) {
                         if (achieveNew !=null   && achieveNew.getT1()!=null) {
                             buildAchieve(pageOrder,  orderItem, achieveNew);
                             // 新增美疗师业绩
diff --git a/zq-erp/src/main/java/com/matrix/system/hive/service/imp/SysOrderServiceImpl.java b/zq-erp/src/main/java/com/matrix/system/hive/service/imp/SysOrderServiceImpl.java
index 7cbf9fc..a1cab35 100644
--- a/zq-erp/src/main/java/com/matrix/system/hive/service/imp/SysOrderServiceImpl.java
+++ b/zq-erp/src/main/java/com/matrix/system/hive/service/imp/SysOrderServiceImpl.java
@@ -1183,7 +1183,7 @@
         orderItem.setIsFree(Dictionary.FLAG_NO);
         orderItem.setPrice(czVo.getBjmoney());
         orderItem.setStatus(Dictionary.ORDER_STATU_YFK);
-        orderItem.setAchieveList(czVo.getAchaeveList());
+        orderItem.setAchaeveList(czVo.getAchaeveList());
         orderItemDao.insert(orderItem);
 
 
diff --git a/zq-erp/src/main/resources/templates/views/admin/hive-erp/order/orderXq-form.html b/zq-erp/src/main/resources/templates/views/admin/hive-erp/order/orderXq-form.html
index badcee5..1797130 100644
--- a/zq-erp/src/main/resources/templates/views/admin/hive-erp/order/orderXq-form.html
+++ b/zq-erp/src/main/resources/templates/views/admin/hive-erp/order/orderXq-form.html
@@ -10,253 +10,161 @@
     <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>
     <title></title>
-</head>
-
-<div class="panel-body">
-    <div class="form-group">
-        <label class="col-sm-2 control-label">订单号</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" th:text="${order.orderNo}"></span>
-        </div>
-
-        <label class="col-sm-2 control-label">订单总价</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" id="total" th:text="${order.total}"></span>
-        </div>
-    </div>
-    <br>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">客户编号</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" th:text="${order.vipNo}"></span>
-        </div>
-        <label class="col-sm-2 control-label">客户姓名</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" th:text="${order.vipName}"></span>
-        </div>
-    </div>
-    <br>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">现金支付金额</label>
-        <div class="col-sm-4">
-            <span class="form-control-static">[[${order.cashPay}]]</span>
-        </div>
-        <label class="col-sm-2 control-label">卡支付金额</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" id="total">[[${order.cardPay}]]</span>
-        </div>
-    </div>
-    <br>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">欠款</label>
-        <div class="col-sm-4">
-            <span class="form-control-static">[[${order.arrears}]]</span>
-        </div>
-        <label class="col-sm-2 control-label">折后价</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" id="zkTotal" th:text="${order.zkTotal}"></span>
-        </div>
-    </div>
-    <br>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">顾问姓名</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" th:text="${order.staffName}"></span>
-        </div>
-        <label class="col-sm-2 control-label">备注</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" th:text="${order.remark}"></span>
-        </div>
-    </div>
-
-</div>
-
-
-<div class="col-sm-12 form-group">
-    <div class="panel-body">
-        <table class="table table-striped table-condensed  table-hover">
-            <thead>
-            <tr>
-                <th>序号</th>
-                <th>商品名称</th>
-                <th>单价</th>
-                <th>购买数量</th>
-                <th>折扣单价</th>
-                <th>卡付款</th>
-                <th>现金付款</th>
-                <th>欠款</th>
-            </tr>
-            </thead>
-            <tbody id="tbody">
-            <tr th:each="item,count:${order.items }">
-                <td th:text="${count.index}+1"></td>
-                <td><span th:text=" ${item.shoppingGoods.name }"></span>
-
-                    <span th:if="${item.isFree eq '是' }" th:text="赠"></span>
-                </td>
-                <td th:text="${item.price }"></td>
-                <td th:text="${item.count}"></td>
-                <td th:text="${item.zkPrice}"></td>
-                <td>[[${item.cardPay}]]</td>
-                <td>[[${item.cashPay}]]</td>
-                <td>[[${item.arrears}]]</td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="form-group ">
-        <div class="col-sm-12 text-center">
-            <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>
-
-</body>
-
-<form id="print" style="display: none;">
-    <!-- <form id="print"> -->
-    <style midia="print">
-        .table1 {
-            width: 500px;
-            font-size: 10px;
-            border-top: 1px solid #333;
-            margin-top: 40px;
-        }
-
-        .table2 {
-            margin-bottom: 100px;
-        }
-
-        .table1 td {
-            height: 20px;
-        }
-
-        .table2 td {
-            height: 20px;
-        }
-
-        .table1 tr {
-            height: 30px;
-        }
-
-        .table3 {
-            position: absolute;
-            bottom: 20px;
-        }
-
-        .tittl {
-            text-align: center;
-            font-size: 20px;
+    <style>
+        .ibox-content {
+            background-color: rgba(240, 242, 245, 1);
         }
     </style>
+</head>
+<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;">订单号:{{order.orderNo}}</h1>
+                </el-col>
+                <el-col :span="5" style="float: right; margin-right: 10px;">
+                    <el-button type="info" @click="printf">打印</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>顾问姓名:{{order.staffName}}</p>
+                    <p>会员姓名:{{order.vipName}}</p>
+                    <p>会员编号:{{order.vipNo}}</p>
+                </el-col>
+                <el-col :span="5">
+                    <p>卡支付:{{order.cardPay}}</p>
+                    <p>现金支付:{{order.cashPay}}</p>
+                    <p>备注:{{order.remark}}</p>
+                </el-col>
+                <el-col :span="10">
+                    <el-col :span="6">
+                        <p>欠款总额</p>
+                        <h2>¥ {{order.arrears}}</h2>
+                    </el-col>
+                    <el-col :span="6">
+                        <p>折后总额</p>
+                        <h2>¥ {{order.zkTotal}}</h2>
+                    </el-col>
+                    <el-col :span="6">
+                        <p>订单总额</p>
+                        <h2>¥ {{order.total}}</h2>
+                    </el-col>
+                </el-col>
+            </el-row>
+        </el-header>
+        <el-main style="background-color: white; margin: 15px; padding: 20px 30px;">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="商品" name="goods">
+                    <el-table :data="orderData"
+                            style="width: 100%">
+                        <el-table-column
+                                prop="shoppingGoods.name"
+                                label="商品名称"
+                                width="300">
+                        </el-table-column>
+                        <el-table-column
+                                prop="price"
+                                label="单价"
+                                width="80">
+                        </el-table-column>
+                        <el-table-column
+                                prop="count"
+                                label="购买数量">
+                        </el-table-column>
+                        <el-table-column
+                                prop="zkPrice"
+                                label="折后金额">
+                        </el-table-column>
+                        <el-table-column
+                                prop="cardPay"
+                                label="卡付款">
+                        </el-table-column>
+                        <el-table-column
+                                prop="cashPay"
+                                label="现金付款">
+                        </el-table-column>
+                        <el-table-column
+                                prop="arrears"
+                                label="欠款">
+                        </el-table-column>
+                    </el-table>
+                </el-tab-pane>
+                <el-tab-pane label="业绩" name="yj">业绩</el-tab-pane>
+            </el-tabs>
+        </el-main>
+    </el-container>
+</div>
+</body>
 
-    <h1 class="tittl">HIVE收银单</h1>
-    <table class="table1">
-
-
-        <tr>
-            <td>会员姓名:[[${order.vipName }]]</td>
-            <td>联系电话:[[${order.vipPhone }]]</td>
-            <td>打印日期:[[<span id="date">]]</span></td>
-        </tr>
-        <tr>
-            <td>会员编号:[[${order.vipNo}]]</td>
-            <td>健康顾问:[[${order.staffName}]]</td>
-        </tr>
-        <tr>
-            <td>订单编号:[[${order.orderNo}]]</td>
-            <td>收银人:[[${session.userInfo.suName}]]</td>
-        </tr>
-    </table>
-    <table class="table2 table1">
-        <tr>
-            <td>套餐/项目/家居/充值卡</td>
-            <td>数量</td>
-            <td>单价</td>
-            <td>折后价</td>
-            <td>赠送</td>
-        </tr>
-
-        <tr th:each="item,count:${orderItems }">
-            <td>  <span th:text=" ${item.shoppingGoods.name }"></span>
-
-				<span th:if="${item.isFree eq '是' }" th:text="赠"></span>
-            </td>
-            <td th:text="${item.count}"></td>
-            <td th:text="${item.price }"></td>
-            <td th:text="${item.zkPrice}"></td>
-
-            <td>
-							<span th:if="${item.shoppingGoods.goodType eq  '充值卡' }">
-							[[${item.shoppingGoods.referencePice }]]
-							</span>
-            </td>
-        </tr>
-    </table>
-
-    <table class="table1 table3">
-        <tr>
-            <td colspan="4">备注:</td>
-        </tr>
-        <tr>
-            <td>缴纳金额:[[${order.cashPay+order.cardPay}]]</td>
-            <td>现金:[[${order.cashPay}]]</td>
-            <td>划扣:[[${order.cardPay }]]</td>
-            <td>本次欠款:[[${order.arrears }]]</td>
-        </tr>
-
-    </table>
-</form>
 <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 : {
+            activeName : "goods",
+            order : "",
+            orderItems : "",
+            cards : "",
+            orderData : []
+        },
+        created : function() {
+            this.order = /*[[${order}]]*/
+            this.orderItems = /*[[${orderItems}]]*/
+            this.cards = /*[[${cards}]]*/
 
-    var LODOP;
-
+            this.orderData = this.order.items;
+        },
+        methods : {
+            handleClick(tab, event) {
+            },
+            printf() {
+                var id = 1;
+                layer.open({
+                    type: 2,
+                    title: "打印服务单",
+                    area: ['250px', '550px'],
+                    maxmin: true,
+                    content: [basePath + '/admin/redirect/hive/beautySalon/print-service?id=' + id]
+                });
+            },
+            toBack() {
+                MTools.closeForm();
+            },
+        }
+    });
+    //]]>
     function print() {
-        CreateOneFormPage();
-        LODOP.PRINTA();
-    }
-
-    function CreateOneFormPage() {
-        $("#date").text(getNowFormatDate());
-
-        LODOP = getLodop();
-
-        LODOP.PRINT_INIT("");
-        LODOP.SET_PRINT_STYLE("FontSize", 18);
-        LODOP.SET_PRINT_PAGESIZE(0, 1300, 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); */
-
+        var id=$("#orderId").val();
+        layer.open({
+            type: 2,
+            title: "打印订单",
+            area: ['250px', '550px'],
+            maxmin: true,
+            content: [basePath + '/admin/redirect/hive/beautySalon/print-order?id=' + id]
+        });
     };
 
-    //获取当前时间
-    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;
-    }
+
 </script>
 </html>
\ No newline at end of file
diff --git a/zq-erp/src/main/resources/templates/views/admin/hive-erp/order/serviceOrderDetail.html b/zq-erp/src/main/resources/templates/views/admin/hive-erp/order/serviceOrderDetail.html
index 3114f12..3dafa6f 100644
--- a/zq-erp/src/main/resources/templates/views/admin/hive-erp/order/serviceOrderDetail.html
+++ b/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>
+<style>
+    .ibox-content {
+        background-color: rgba(240, 242, 245, 1);
+    }
+
+    .order-info p {
+        line-height: 30px;
+    }
+</style>
 <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 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>
-</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;
-        }
-
-        .table4 {
-            width: 440px;
-            font-size: 12px;
-            border-top: 1px solid #333;
-            margin-top: 20px;
-        }
-
-        .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>
 <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]
+        });
     }
 
 
diff --git a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/bj-form.html b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/bj-form.html
index 73e91ce..8e4fb55 100644
--- a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/bj-form.html
+++ b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/bj-form.html
@@ -251,7 +251,7 @@
 	var myForm = MForm.initForm({
 		invokeUrl : basePath+"/admin/moneyCardUse/bj",
 		beforeSubmit : function() {
-			
+
 			//校验业绩
 			var ifAchieveOk=true;
 			$("#tbody2").children("tr").each(function(){
@@ -270,8 +270,8 @@
 				layer.msg("业绩金额不能大于支付金额",{icon:2})
 				return false;
 			}
-			
-			
+
+
 			var money = parseFloat($("#money").val());
 			var total = parseFloat($("#zkTotal").html());
 		},
@@ -292,9 +292,9 @@
 			itemIndex=0;
 		}
 	 	var id=MTools.randomStr();
-	 	
+
 	 	var table=$("#"+trId).find("td").eq(3).find("table")
-	 	
+
 	 	var achieveIndex=$("#"+trId).find("td").eq(3).find("table").find("tr").length;
 		var html= '<tr> <td><select class="autoFull select2 input-sm" id="'+id+'"  name="items['+itemIndex+'].achaeveList['+achieveIndex+'].beaultId" '
 				+'data-url="'+basePath+'/admin/getShopStaffByRoleName?roleName=美疗师" data-value="suId" data-filed="suName" data-def=""'
diff --git a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html
index c964927..61ce44a 100644
--- a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html
+++ b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/order-form.html
@@ -776,13 +776,13 @@
                     _this.achieveList.forEach(achieve => {
                         for (let i = 0; i < _this.order.items.length; i++) {
                             let item = _this.order.items[i];
-                            item.achieveList = [];
+                            item.achaeveList = [];
                             if (item.uuid == achieve.orderItem.uuid) {
                                 let achieveNew = {
                                     beaultId: achieve.saleId,
                                     t1: achieve.achieveMoney
                                 };
-                                item.achieveList.push(achieveNew);
+                                item.achaeveList.push(achieveNew);
                                 break;
                             }
                         }
diff --git a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form-bak.html b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form-bak.html
new file mode 100644
index 0000000..69a0a76
--- /dev/null
+++ b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form-bak.html
@@ -0,0 +1,140 @@
+<!DOCTYPE HTML>
+<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="utf-8">
+    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
+    <meta name="renderer" content="webkit|ie-comp|ie-stand">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport"
+          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
+    <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>
+    <title></title>
+</head>
+
+<div class="panel-body">
+    <div class="form-group">
+        <label class="col-sm-2 control-label">订单号</label>
+        <div class="col-sm-4">
+            <span class="form-control-static" th:text="${order.orderNo}"></span>
+        </div>
+
+        <label class="col-sm-2 control-label">订单总价</label>
+        <div class="col-sm-4">
+            <span class="form-control-static" id="total" th:text="${order.total}"></span>
+        </div>
+    </div>
+    <br>
+    <div class="form-group">
+        <label class="col-sm-2 control-label">客户编号</label>
+        <div class="col-sm-4">
+            <span class="form-control-static" th:text="${order.vipNo}"></span>
+        </div>
+        <label class="col-sm-2 control-label">客户姓名</label>
+        <div class="col-sm-4">
+            <span class="form-control-static" th:text="${order.vipName}"></span>
+        </div>
+    </div>
+    <br>
+    <div class="form-group">
+        <label class="col-sm-2 control-label">现金支付金额</label>
+        <div class="col-sm-4">
+            <span class="form-control-static">[[${order.cashPay}]]</span>
+        </div>
+        <label class="col-sm-2 control-label">卡支付金额</label>
+        <div class="col-sm-4">
+            <span class="form-control-static" id="total">[[${order.cardPay}]]</span>
+        </div>
+    </div>
+    <br>
+    <div class="form-group">
+        <label class="col-sm-2 control-label">欠款</label>
+        <div class="col-sm-4">
+            <span class="form-control-static">[[${order.arrears}]]</span>
+        </div>
+        <label class="col-sm-2 control-label">折后价</label>
+        <div class="col-sm-4">
+            <span class="form-control-static" id="zkTotal" th:text="${order.zkTotal}"></span>
+        </div>
+    </div>
+    <br>
+    <div class="form-group">
+        <label class="col-sm-2 control-label">顾问姓名</label>
+        <div class="col-sm-4">
+            <span class="form-control-static" th:text="${order.staffName}"></span>
+        </div>
+        <label class="col-sm-2 control-label">备注</label>
+        <div class="col-sm-4">
+            <span class="form-control-static" th:text="${order.remark}"></span>
+        </div>
+    </div>
+
+</div>
+
+
+<div class="col-sm-12 form-group">
+    <div class="panel-body">
+        <table class="table table-striped table-condensed  table-hover">
+            <thead>
+            <tr>
+                <th>序号</th>
+                <th>商品名称</th>
+                <th>单价</th>
+                <th>购买数量</th>
+                <th>折扣单价</th>
+                <th>卡付款</th>
+                <th>现金付款</th>
+                <th>欠款</th>
+            </tr>
+            </thead>
+            <tbody id="tbody">
+            <tr th:each="item,count:${order.items }">
+                <td th:text="${count.index}+1"></td>
+                <td><span th:text=" ${item.shoppingGoods.name }"></span>
+
+                    <span th:if="${item.isFree eq '是' }" th:text="赠"></span>
+                </td>
+                <td th:text="${item.price }"></td>
+                <td th:text="${item.count}"></td>
+                <td th:text="${item.zkPrice}"></td>
+                <td>[[${item.cardPay}]]</td>
+                <td>[[${item.cashPay}]]</td>
+                <td>[[${item.arrears}]]</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="form-group ">
+        <div class="col-sm-12 text-center">
+            <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>
+</div>
+<input autocomplete="off"   type="hidden" id="orderId" th:value="${order.id}">
+</body>
+
+
+<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>
+<script type="text/javascript">
+
+    function print() {
+        var id=$("#orderId").val();
+        layer.open({
+            type: 2,
+            title: "打印订单",
+            area: ['250px', '550px'],
+            maxmin: true,
+            content: [basePath + '/admin/redirect/hive/beautySalon/print-order?id=' + id]
+        });
+    };
+
+
+</script>
+</html>
\ No newline at end of file
diff --git a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html
index 69a0a76..1797130 100644
--- a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html
+++ b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html
@@ -10,120 +10,150 @@
     <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>
     <title></title>
+    <style>
+        .ibox-content {
+            background-color: rgba(240, 242, 245, 1);
+        }
+    </style>
 </head>
-
-<div class="panel-body">
-    <div class="form-group">
-        <label class="col-sm-2 control-label">订单号</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" th:text="${order.orderNo}"></span>
-        </div>
-
-        <label class="col-sm-2 control-label">订单总价</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" id="total" th:text="${order.total}"></span>
-        </div>
-    </div>
-    <br>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">客户编号</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" th:text="${order.vipNo}"></span>
-        </div>
-        <label class="col-sm-2 control-label">客户姓名</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" th:text="${order.vipName}"></span>
-        </div>
-    </div>
-    <br>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">现金支付金额</label>
-        <div class="col-sm-4">
-            <span class="form-control-static">[[${order.cashPay}]]</span>
-        </div>
-        <label class="col-sm-2 control-label">卡支付金额</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" id="total">[[${order.cardPay}]]</span>
-        </div>
-    </div>
-    <br>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">欠款</label>
-        <div class="col-sm-4">
-            <span class="form-control-static">[[${order.arrears}]]</span>
-        </div>
-        <label class="col-sm-2 control-label">折后价</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" id="zkTotal" th:text="${order.zkTotal}"></span>
-        </div>
-    </div>
-    <br>
-    <div class="form-group">
-        <label class="col-sm-2 control-label">顾问姓名</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" th:text="${order.staffName}"></span>
-        </div>
-        <label class="col-sm-2 control-label">备注</label>
-        <div class="col-sm-4">
-            <span class="form-control-static" th:text="${order.remark}"></span>
-        </div>
-    </div>
-
+<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;">订单号:{{order.orderNo}}</h1>
+                </el-col>
+                <el-col :span="5" style="float: right; margin-right: 10px;">
+                    <el-button type="info" @click="printf">打印</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>顾问姓名:{{order.staffName}}</p>
+                    <p>会员姓名:{{order.vipName}}</p>
+                    <p>会员编号:{{order.vipNo}}</p>
+                </el-col>
+                <el-col :span="5">
+                    <p>卡支付:{{order.cardPay}}</p>
+                    <p>现金支付:{{order.cashPay}}</p>
+                    <p>备注:{{order.remark}}</p>
+                </el-col>
+                <el-col :span="10">
+                    <el-col :span="6">
+                        <p>欠款总额</p>
+                        <h2>¥ {{order.arrears}}</h2>
+                    </el-col>
+                    <el-col :span="6">
+                        <p>折后总额</p>
+                        <h2>¥ {{order.zkTotal}}</h2>
+                    </el-col>
+                    <el-col :span="6">
+                        <p>订单总额</p>
+                        <h2>¥ {{order.total}}</h2>
+                    </el-col>
+                </el-col>
+            </el-row>
+        </el-header>
+        <el-main style="background-color: white; margin: 15px; padding: 20px 30px;">
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="商品" name="goods">
+                    <el-table :data="orderData"
+                            style="width: 100%">
+                        <el-table-column
+                                prop="shoppingGoods.name"
+                                label="商品名称"
+                                width="300">
+                        </el-table-column>
+                        <el-table-column
+                                prop="price"
+                                label="单价"
+                                width="80">
+                        </el-table-column>
+                        <el-table-column
+                                prop="count"
+                                label="购买数量">
+                        </el-table-column>
+                        <el-table-column
+                                prop="zkPrice"
+                                label="折后金额">
+                        </el-table-column>
+                        <el-table-column
+                                prop="cardPay"
+                                label="卡付款">
+                        </el-table-column>
+                        <el-table-column
+                                prop="cashPay"
+                                label="现金付款">
+                        </el-table-column>
+                        <el-table-column
+                                prop="arrears"
+                                label="欠款">
+                        </el-table-column>
+                    </el-table>
+                </el-tab-pane>
+                <el-tab-pane label="业绩" name="yj">业绩</el-tab-pane>
+            </el-tabs>
+        </el-main>
+    </el-container>
 </div>
-
-
-<div class="col-sm-12 form-group">
-    <div class="panel-body">
-        <table class="table table-striped table-condensed  table-hover">
-            <thead>
-            <tr>
-                <th>序号</th>
-                <th>商品名称</th>
-                <th>单价</th>
-                <th>购买数量</th>
-                <th>折扣单价</th>
-                <th>卡付款</th>
-                <th>现金付款</th>
-                <th>欠款</th>
-            </tr>
-            </thead>
-            <tbody id="tbody">
-            <tr th:each="item,count:${order.items }">
-                <td th:text="${count.index}+1"></td>
-                <td><span th:text=" ${item.shoppingGoods.name }"></span>
-
-                    <span th:if="${item.isFree eq '是' }" th:text="赠"></span>
-                </td>
-                <td th:text="${item.price }"></td>
-                <td th:text="${item.count}"></td>
-                <td th:text="${item.zkPrice}"></td>
-                <td>[[${item.cardPay}]]</td>
-                <td>[[${item.cashPay}]]</td>
-                <td>[[${item.arrears}]]</td>
-            </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="form-group ">
-        <div class="col-sm-12 text-center">
-            <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>
-</div>
-<input autocomplete="off"   type="hidden" id="orderId" th:value="${order.id}">
 </body>
 
-
+<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 : {
+            activeName : "goods",
+            order : "",
+            orderItems : "",
+            cards : "",
+            orderData : []
+        },
+        created : function() {
+            this.order = /*[[${order}]]*/
+            this.orderItems = /*[[${orderItems}]]*/
+            this.cards = /*[[${cards}]]*/
 
+            this.orderData = this.order.items;
+        },
+        methods : {
+            handleClick(tab, event) {
+            },
+            printf() {
+                var id = 1;
+                layer.open({
+                    type: 2,
+                    title: "打印服务单",
+                    area: ['250px', '550px'],
+                    maxmin: true,
+                    content: [basePath + '/admin/redirect/hive/beautySalon/print-service?id=' + id]
+                });
+            },
+            toBack() {
+                MTools.closeForm();
+            },
+        }
+    });
+    //]]>
     function print() {
         var id=$("#orderId").val();
         layer.open({

--
Gitblit v1.9.1