| | |
| | | .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;">服务单号:{{serviceOrderInfo.serviceNo}}</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.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>会员编号: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>配料师:{{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 |
| | | 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/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) { |
| | | 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() { |
| | | var id = $("#serviceId").val(); |