forked from beauty-erp
zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html
@@ -10,131 +10,383 @@ <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); } label { width: 100%; margin: 5px 0 !important; } </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-aside style="width: 300px; background-color: white; padding: 10px;"> <el-row style="border-bottom: #E4E7ED 1px solid;"> <el-col :span="20" style="padding: 10px;"> <el-row type="flex" align="middle"> <el-col :span="7"> <el-avatar :size="60" :src="circleUrl"></el-avatar> </el-col> <el-col :span="15" style="margin-left: 10px;"> <label>{{vipInfo.vipName}}({{vipInfo.vipLevel == null ? '' : vipInfo.vipLevel.levelName}})</label> <label>{{vipInfo.vipNo}}</label> </el-col> </el-row> <el-row style="line-height: 20px;"> <label>订单号: <span>{{order.orderNo}}</span></label> <label>下单顾问: <span>{{order.staffName}}</span></label> <label>消费门店: <span>{{order.shopShortName}}</span></label> <label>订单时间: <span>{{order.orderTime}}</span></label> <label>备 注: <span>{{order.remark}}</span></label> </el-row> </el-col> </el-row> <el-row style="padding: 10px; border-bottom: #E4E7ED 1px solid;"> <el-col :span="24"> <el-row> <el-col :span="6" style="text-align: right;"> <label>总金额</label> <label>整单折扣</label> <label style="font-size: 14px;">应收金额</label> <label>欠款</label> <label>已还</label> <label>退款</label> </el-col> <el-col :span="14" style="text-align: right;"> <label>¥ {{order.total}}</label> <label>¥ {{order.zkTotal - order.total}}</label> <label>¥ {{order.zkTotal}}</label> <label>¥ {{order.arrears}}</label> <label>¥ {{order.repay}}</label> <label>¥ {{order.refund}}</label> </el-col> </el-row> </el-col> </el-row> <el-row style="padding: 10px; border-bottom: #E4E7ED 1px solid;"> <el-col :span="24"> <el-row> <h3>收款明细</h3> </el-row> <el-row> <el-col :span="6" style="text-align: right;"> <label v-for="(item, index) in payMethodItems">{{item.payMethod}}</label> </el-col> <el-col :span="14" style="text-align: right;"> <label v-for="(item, index) in payMethodItems">¥ {{item.amount}}</label> </el-col> </el-row> </el-col> </el-row> <el-row type="flex" justify="center" style="margin: 20px;"> <el-button size="medium" type="primary">打印</el-button> </el-row> </el-aside> <el-main style="background-color: white; margin-right: 15px; margin-left: 15px; padding: 20px 30px;"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="订单明细" name="first"> <el-row> <el-button size="medium" type="primary">退款</el-button> </el-row> <el-table :data="orderItems" style="width: 100%"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="shoppingGoods.code" label="产品编号" width="100"> </el-table-column> <el-table-column prop="shoppingGoods.name" label="产品名称" width="280"> </el-table-column> <el-table-column prop="shoppingGoods.goodType" label="产品类型"> </el-table-column> <el-table-column prop="price" label="单价"> </el-table-column> <el-table-column prop="count" label="数量"> </el-table-column> <el-table-column prop="zkPrice" label="折扣单价"> </el-table-column> <el-table-column label="小计" :formatter="calOrderTotalFormatter"> </el-table-column> </el-table> </el-tab-pane> <el-tab-pane label="业绩设置" name="second"> <el-row> <el-button size="mini" type="primary" @click="saveAchieve">保存</el-button> </el-row> <el-table :data="achieveItems" style="width: 100%"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="goodsNo" label="产品编号" width="180"> </el-table-column> <el-table-column prop="goodsName" label="产品名称" width="180"> </el-table-column> <el-table-column prop="zkTotal" label="收款"> </el-table-column> <el-table-column prop="t3" label="业绩类型"> <template slot-scope="scope"> <el-select v-model="scope.row.t3" placeholder="请选择业绩类型"> <el-option v-for="item in achieveTypeList" :key="item.key" :label="item.value" :value="item.key"> </el-option> </el-select> </template> </el-table-column> <el-table-column prop="achieve" label="业绩"> <template slot-scope="scope"> <el-input v-model="scope.row.achieve"></el-input> </template> </el-table-column> <el-table-column prop="projPercentage" label="提成"> <template slot-scope="scope"> <el-input v-model="scope.row.projPercentage"></el-input> </template> </el-table-column> <el-table-column label="员工"> <template slot-scope="scope"> <el-select v-model="scope.row.beaultId" placeholder="请选择员工"> <el-option v-for="item in userList" :key="item.suId" :label="item.suName" :value="item.suId"> </el-option> </el-select> </template> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" v-if="scope.row.isShare" size="mini" @click="delAchieve(scope.$index, scope.row)">删除 </el-button> <el-tooltip content="分享业绩" placement="top"> <el-button @click="shareAchieve(scope.$index, scope.row)" icon="el-icon-share" size="mini" type="primary"></el-button> </el-tooltip> </template> </el-table-column> </el-table> </el-tab-pane> <el-tab-pane label="交易流水" name="third"> <el-table :data="flowItems" style="width: 100%"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="orderNo" label="订单号" width="180"> </el-table-column> <el-table-column prop="flowContent" label="交易内容" width="300"> </el-table-column> <el-table-column prop="flowType" label="交易类型"> </el-table-column> <el-table-column prop="amount" label="交易金额"> </el-table-column> <el-table-column prop="payMethod" label="支付方式"> </el-table-column> <el-table-column prop="flowNo" label="流水号"> </el-table-column> </el-table> </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> <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 : { vipInfo : "", order : "", activeName : "second", circleUrl : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", userList : [], achieveTypeList : [ { "key" : "现金业绩", "value" : "现金业绩" },{ "key" : "划扣业绩", "value" : "划扣业绩" }, ], orderItems : [], achieveItems : [], flowItems : [], payMethodItems : [], 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] }); }; }, created : function() { let _this = this; this.vipInfo = /*[[${vipInfo}]]*/ this.order = /*[[${order}]]*/ this.orderItems = /*[[${orderItems}]]*/ this.payMethodItems = /*[[${payMethods}]]*/ this.achieveItems = /*[[${achieveList}]]*/ this.flowItems = this.order.flows; this.checkAchieveIsDel(this.achieveItems); this.order.orderTime = moment(this.order.orderTime).format("YYYY-MM-DD HH:mm"); var arrears = 0; var refund = 0; var repay = 0; for(var i = 0; i < this.flowItems.length; i++) { var item = this.flowItems[i]; if (item.payMethod === '欠款') { arrears += item.amount; } if (item.flowType === '还款') { repay += item.amount; } if (item.flowType === '退款') { refund += item.amount; } } this.order.arrears = arrears; this.order.refund = refund; this.order.repay = repay; //获取用户列表 AjaxProxy.requst({ app: _this, url: basePath + '/admin/shopAll', callback: function (data) { _this.userList = data.rows; } }); }, methods : { calOrderTotalFormatter(row, column) { return row.count * row.price; }, saveAchieve() { let _this = this; AjaxProxy.requst({ app: _this, data: _this.achieveItems, contentType: 'application/json', url: basePath + '/admin/achieve/add', callback: function (data) { _this.$message.success(data.info); } }); }, shareAchieve(index, row) { var row2 = JSON.parse(JSON.stringify(row)); this.achieveItems.push(row2); }, delAchieve(index, row) { this.achieveItems.splice(index, 1); }, checkAchieveIsDel(items) { var achieveIds = []; for(var i = 0; i < items.length; i++) { var item = items[i]; if(achieveIds.indexOf(item.orderItemId) === -1) { achieveIds.push(item.orderItemId); item.isShare = false; } else { item.isShare = true; } item.achieve = item.consume + item.cardCash; } }, printf() { var id = this.order.id; layer.open({ type: 2, title: "打印服务单", area: ['250px', '550px'], maxmin: true, content: [basePath + '/admin/redirect/hive/beautySalon/print-order?id=' + id] }); }, handleClick() { }, toBack() { MTools.closeForm(); }, } }); //]]> </script> </html>
