|  |  |  | 
|---|
|  |  |  | .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; line-height: 60px"> | 
|---|
|  |  |  | <el-row style="line-height: 60px;"> | 
|---|
|  |  |  | <el-col :span="10"> | 
|---|
|  |  |  | <h1>订单号:1234567890</h1> | 
|---|
|  |  |  | <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"></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.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>服务时间:<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> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <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 | 
|---|
|  |  |  | 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/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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | 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) { | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | //]]> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function print() { | 
|---|
|  |  |  | var id = $("#serviceId").val(); | 
|---|