~jiangyouyao/beauty-erp.git

			@@ -24,41 +24,91 @@
			.ibox-content {
			background-color: rgba(240, 242, 245, 1);
			}

			.order-info p {
			line-height: 30px;
			}
			</style>
			<body>
			<div class="ibox-content" id="app">
			<el-container>
			<el-header style="background-color: white; margin: 15px;">
			<el-row style="line-height: 60px;">
			<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;">订单号：1234567890</h1>
			<h1 style="line-height: 60px; margin: 0 0;display: inline-block">服务单号：{{serviceOrderInfo.serviceNo}}</h1>
			</el-col>
			<el-col :span="5">
			<h1 style="line-height: 60px; margin: 0 0;display: inline-block"><span style="color: #cf2d27;float: right ">￥{{serviceOrderInfo.money}}</span></h1>
			</el-col>
			<el-col :span="5" style="float: right; margin-right: 10px;">
			<el-button type="info">打印</el-button>
			<el-button type="primary">划扣</el-button>
			<el-button type="danger">返回</el-button>
			<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>
			<el-col :span="6">
			<p>会员姓名：幺幺幺</p>
			<p>会员电话：13412341234</p>
			<el-row class="order-info" type="flex" justify="space-around" style="height: 150px; padding: 30px 30px;">
			<el-col :span="5">
			<p>会员姓名：{{serviceOrderInfo.vipInfo.vipName}}</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>会员编号：X1234</p>
			<p>床位安排：VIP-2</p>
			<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="6">
			<p>服务时间：2020-10-10 12:10 - 2020-10-10 12:10</p>
			<p>预约时间：2020-10-10 12:10</p>
			<el-col :span="3">
			<p>配料师：{{serviceOrderInfo.plsName}}</p>
			<p>备注：{{serviceOrderInfo.remark}}</p>
			</el-col>
			</el-row>
			</el-header>
			<el-main>

			<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="400">
			</el-table-column>
			<el-table-column
			:formatter="hkPrice"
			label="划扣金额"
			width="100">
			</el-table-column>
			<el-table-column
			prop="count"
			label="次数"
			width="100">
			</el-table-column>
			<el-table-column
			prop="projInfo.timeLength"
			label="服务时长"
			width="200">
			</el-table-column>
			<el-table-column
			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>
			@@ -67,14 +117,77 @@
			<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 : {},
			created :function () {},
			methods : {},
			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 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;
			}
			}
			},

			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) {
			console.log(column);
			console.log(row);
			// if (!column.bedState) {
			// return "-";
			// }
			var startTime = this.dateFormat(row.beginTime);
			var endTime = this.dateFormat(row.endTime);
			return startTime + " - " + endTime;
			},
			hkPrice(row, column) {
			console.log(row);
			return row.projUse.price * row.count ;
			}
			},
			});
			//]]>

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