From f7ea5773570beb5ad8c6efb5c1cf743294ee079b Mon Sep 17 00:00:00 2001
From: wzy <wzy19931122ai@163.com>
Date: Sun, 24 Jan 2021 14:16:04 +0800
Subject: [PATCH] modify
---
zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/bj-form.html | 678 +++++++++++++++++++++++++++++---------------------------
1 files changed, 354 insertions(+), 324 deletions(-)
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 169bc31..b39313f 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
@@ -1,8 +1,4 @@
-
-
-
-
-<!DOCTYPE HTML>
+<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
@@ -13,330 +9,364 @@
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>
-
+ <!-- 本框架基本脚本和样式 -->
+ <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script>
+ <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}">
+ <link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/>
<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" id="zkTotal" th:text="${order.zkTotal}"></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.arrears}"></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" id="zkTotal" th:text="${order.cardPay}"></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.cashPay}"></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>
- </div>
-</div>
-
-
-
-
-<div class="row ">
- <div class="col-sm-10 pd-20 col-sm-offset-1">
- <form class="form-horizontal" id="dataform"
- onsubmit="javascripr:return false;">
- <div class="tabs-container ">
- <ul class="nav nav-tabs">
- <li class="active"><a data-toggle="tab" href="#tab-1"
- aria-expanded="true">收款</a></li>
- <li class=""><a data-toggle="tab" href="#tab-2"
- aria-expanded="false">业绩</a></li>
- </ul>
- <div class="tab-content">
- <div id="tab-1" class="tab-pane active">
- <div class="panel-body">
- <div class="col-sm-12 form-group">
- <!-- 改变折扣后的总价 -->
- <input autocomplete="off" type="hidden" name="zkTotal" th:value="${order.zkTotal}"
- id="zkTotalInput">
- <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>
- </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><input autocomplete="off" type="hidden"
- th:name="'items['+${count.index}+'].id'"
- th:value="${item.id }">
-
-
- <input autocomplete="off" type="hidden" th:name="'items['+${count.index}+'].goodsId'"
- th:value="${item.goodsId }">
- <input autocomplete="off" type="hidden" th:name="'items['+${count.index}+'].count'" th:value="${item.count}">
-
- <select class="form-control"
- th:name="'items['+${count.index}+'].payMethod'">
- <option th:if="${item.type eq '充值卡'}" value="现金">现金</option>
- <option value="现金">现金</option>
- <th:block th:if="${item.type ne '充值卡'}">
- <th:block th:each="cardItem:${cards }" >
- <option th:value="${cardItem.id }" th:text="${cardItem.cardName }+'-余:'+${cardItem.realMoney+cardItem.giftMoney}"></option>
- </th:block>
- </th:block>
-
- </select></td>
- <td><input autocomplete="off" type="text" class="form-control"
- th:onchange="'changePayMoney(\'p'+${item.id}+'\',this)'"
-
- onchange="reckonTotal()" dataType="price" nullmsg="请填写金额"
- errormsg="金额可为两位小数的正数" th:value="${item.arrears}"
- th:name="'items['+${count.index}+'].payMoney'" >
- <div class="Validform_checktip"></div></td>
- </tr>
- </th>
- </tbody>
- </table>
- </div>
- </div>
-
-
-
- <div class="col-sm-12 form-group">
- <div class="form-group">
- <div class="form-group">
- <label class="col-sm-2 control-label">实收金额</label>
- <div class="col-sm-4">
- <input autocomplete="off" type="text" class="form-control" name="actualPay"
- id="money" readonly="readonly" th:value="${order.arrears}"
- datatype="/^(([0-9]\d{0,9})|0)(\.\d{1,2})?$/"
- ignore="ignore">
- <div class="Validform_checktip"></div>
- </div>
-
- <label class="col-sm-2 control-label">备注</label>
- <div class="col-sm-4">
- <input autocomplete="off" type="text" class="form-control" name="remark"
- th:value="${order.remark}" datatype="*0-200" ignore="ignore">
- <div class="Validform_checktip"></div>
- </div>
- </div>
- </div>
- <input autocomplete="off" type="hidden" id="id" name="id" th:value="${order.id}" />
- </div>
- </div>
- </div>
- <div id="tab-2" class="tab-pane">
- <div class="panel-body">
- <table class="table table-condensed ">
- <thead>
- <tr>
- <th>序号</th>
- <th>商品名称</th>
- <th>分配金额</th>
- <th>美疗师业绩</th>
- <th>操作</th>
- </tr>
- </thead>
- <tbody id="tbody2">
- <th:block th:each="item,count:${order.items }" >
- <tr th:id="'p'+${item.id}">
- <td th:text="${count.index}+1"></td>
- <td th:text="${item.shoppingGoods.name }">
- <span th:if="${item.isFree eq '是' }" th:text="赠"></span>
- </td>
- <td th:text="${item.arrears }"></td>
- <td>
- <table class="table table-condensed ">
- <tr th:each="achaeve,count2:${item.achaeveList }">
- <td><select class="autoFull select2 input-sm"
-
- data-value="suId"
- data-filed="suName"
- th:data-def="${achaeve.staffId }"
- th:name="'items['+${count.index}+'].achaeveList['+${count2.index}'].beaultId'"
- th:data-url="@{/admin/getShopStaffByRoleName?roleName=美疗师}"
- >
- </select></td>
- <td><input autocomplete="off" type="text"
- class="form-control input-sm" style="width: 80px"
- th:name="'items['+${count.index}+'].achaeveList['+${count2.index}'].t1"></td>
- <td><button class="btn btn-danger btn-sm"
- onclick="deleteBeaute(this)">删除</button></td>
- </tr>
- </table>
- </td>
- <td><a class="btn btn-default btn-sm"
- th:onclick="'addBeaute(\'p'+${item.id}+'\','+${count.index}+')'">添加</a></td>
- </tr>
-
- </tbody>
- </table>
- </div>
- </div>
- </div>
- <div class="form-group mt-20 ">
- <div class="col-sm-12 text-center">
- <a href="javascript:;"
- onclick="myForm.submit()" class="btn btn-success radius">确认</a>
-
- <button onclick="MTools.closeForm()"
- class="btn btn-danger radius" type="button">取消</button>
- </div>
- </div>
- </div>
- </form>
- </div>
-</div>
-
-
-<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script><script type="text/javascript">
- var myForm = MForm.initForm({
- invokeUrl : basePath+"/admin/moneyCardUse/bj",
- beforeSubmit : function() {
-
- //校验业绩
- var ifAchieveOk=true;
- $("#tbody2").children("tr").each(function(){
- var tr=$(this);
- var pay=parseFloat(tr.find("td").eq(2).html());
- var achieveSum=0;
- tr.find("td").eq(3).find("table").find("tr").each(function(){
- var achieve= parseFloat($(this).find("td").eq(1).find("input").val());
- achieveSum+=achieve;
- });
- if(achieveSum>pay){
- ifAchieveOk=false;
- }
- });
- if(!ifAchieveOk){
- layer.msg("业绩金额不能大于支付金额",{icon:2})
- return false;
- }
-
-
- var money = parseFloat($("#money").val());
- var total = parseFloat($("#zkTotal").html());
- },
- afterSubmit : function() {
- parent.myGrid.serchData();
- },
- });
-
- //添加一个美疗师
- function addBeaute(trId,itemIndex){
- if(!itemIndex){
- itemIndex=0;
+ <style>
+ .paymethod ul {
+ padding: 0;
+ margin: 0;
+ height: 50px;
}
- 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=""'
- +'name="beatuyId"> </select></td> <td><input autocomplete="off" type="text" class="form-control input-sm" style="width: 80px" name="items['+itemIndex+'].achaeveList['+achieveIndex+'].t1" '
- +'name="items['+itemIndex+'].zkPrice" ></td> <td><button class="btn btn-danger btn-sm" onclick="deleteBeaute(this)" >删除</button></td> </tr>';
- $("#"+trId).find("td").eq(3).find("table").append(html);
- $('#'+id).select2({'width':'80px'});
- MTools.autoFullSelect({selecteder:'#'+id});
- };
- //删除一个美疗师
- function deleteBeaute(node){
- $(node).closest("tr").remove();
- }
-
- //修改收款金额
- function changePayMoney(trId,node){
- console.log(trId,node);
- $("#"+trId).find("td").eq(2).html($(node).val());
- };
+ .paymethod ul li {
+ padding: 10px;
+ margin: 5px;
+ list-style:none;
+ float: left;
+ display: block;
+ cursor: pointer;
+ position: relative;
+ border: white 1px solid;
+ }
+ .paymethod ul li:hover {
+ border: #409EFF 1px solid;
+ }
+ .paymethod .active {
+ border: #409EFF 1px solid;
+ }
+ .paymethod .active::after {
+ content: '';
+ display: block;
+ height: 0px;
+ width: 0px;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ color:#fff;
+ /**对号大小*/
+ font-size: 10px;
+ line-height: 8px;
+ border: 3px solid;
+ border-color: transparent #4884ff #4884ff transparent;
+ }
-
- //改变折扣单价
- function changeZkprice() {
- var sum = 0;
- $("#tbody").find("tr").each(function() {
- var $tds = $(this).find("td");
- var count = $tds.eq(3).html();
- var zkprice = $tds.eq(4).find("input").eq(0).val();
- totalMoney = parseFloat(count) * parseFloat(zkprice);
- $tds.eq(6).find("input").eq(0).val(totalMoney);
- sum += totalMoney;
- });
- $("#money").val(sum);
- $("#zkTotal").html(sum);
- $("#zkTotalInput").val(sum);
- }
+ .el-dialog__body {
+ padding-top: 10px !important;
+ }
+ </style>
+</head>
+<div class="panel-body" id="app">
+ <el-dialog title="还款" :visible.sync="dialogSettleVisible" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false">
+ <el-row type="flex" align="middle" style="padding: 0 0 10px 0;">
+ <el-col :span="5" style="text-align: center;">还款金额</el-col>
+ <el-col :span="10" style="text-align: center; line-height: 50px;"><span style="color: red; font-size: 20px;">¥ {{order.arrears}}</span></el-col>
+ </el-row>
- //计算实收
- function reckonTotal() {
- var sum = 0;
- $("#tbody").find("tr").each(function() {
- var $tds = $(this).find("td");
- var count = $tds.eq(6).find("input").eq(0).val();
- sum += parseFloat(count)
- });
- $("#money").val(sum);
+ <el-row type="flex" align="middle" style="padding: 10px 0;">
+ <el-col :span="5" style="text-align: center;">收款方式</el-col>
+ <el-col class="paymethod" :span="15">
+ <el-row>
+ <ul>
+ <span v-for="(item, index) in payMethods">
+ <el-popover
+ :disabled="item.type != '储值卡'"
+ placement="bottom"
+ trigger="hover"
+ @hide="popoverHide(item)">
+ <el-row style="text-align: center;"><span style="padding: 0 0 10px 0; display: block; font-size: 12px;">选择储值卡支付方式</span></el-row>
+ <el-tree :data="moneyCards"
+ show-checkbox
+ default-expand-all
+ node-key="id"
+ ref="tree"
+ check-strictly
+ highlight-current
+ @check="(click, checked,$item)=>{handleCheckChange(click, checked,$item)}"
+ :props="defaultProps">
+ </el-tree>
+ <li :class="{active : item.isActive}" slot="reference" @click="payMethodSelect(item, index)"><div style=" height:30px; line-height: 30px; display: flex; align-items: center"><img style="width: 25px; height: 25px; align-items: center;" :src="item.img"><span style="margin-left: 5px;">{{item.value}}</span></div></li>
+ </el-popover>
+ </span>
+ </ul>
+ </el-row>
+ </el-col>
+ </el-row>
- }
+ <el-row type="flex" align="middle" style="padding: 10px 0 50px 0;">
+ <el-col :span="5" style="text-align: center;">支付金额</el-col>
+ <el-col :span="15">
+ <el-row style="line-height: 50px;" v-for="(item, index) in payMoneys">
+ <el-col :span="6" style="text-align: right; padding-right: 10px; font-size: 12px;">{{item.value}}</el-col>
+ <el-col :span="8"><el-input v-model="item.money"></el-input></el-col>
+ <el-col :span="6" style="margin-left: 10px;" v-if="item.type == '储值卡'">{{item.isGift == 1 ? '赠送余额' : '余额' }}：<span class="arrears">¥ {{item.balance}}</span></el-col>
+ </el-row>
+ </el-col>
+ </el-row>
+
+ <el-row style="text-align: center; margin: 20px 0 10px 0">
+ <el-checkbox v-model="printPaper">打印小票</el-checkbox>
+ </el-row>
+
+ <el-row style="text-align: center; margin: 10px 0 0 0">
+ <el-button type="primary" @click="submitBj">确认收款</el-button>
+ <el-button type="danger" @click="cancelSubmit">取消</el-button>
+ </el-row>
+ </el-dialog>
+</div>
+
+<script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
+<script type="text/javascript" th:src="@{/js/plugin/jquery.query.js}"></script>
+<script type="text/javascript" th:src="@{/plugin/layer/layer.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:inline="javascript">
+ //<![CDATA[
+ var vue = new Vue({
+ el: '#app',
+ data : {
+ order : "",
+ payMethods: [{
+ value: '现金支付',
+ img: '/images/pay/cash.png',
+ isActive: false,
+ type: '现金支付'
+ }, {
+ value: '微信',
+ img: '/images/pay/wechat.png',
+ isActive: false,
+ type: '微信'
+ }, {
+ value: '支付宝',
+ img: '/images/pay/zhifubao.png',
+ isActive: false,
+ type: '支付宝'
+ }, {
+ value: '银行卡',
+ img: '/images/pay/yinlian.png',
+ isActive: false,
+ type: '银行卡'
+ }, {
+ value: '团购',
+ img: '/images/pay/tuan.png',
+ isActive: false,
+ type: '团购'
+ }, {
+ value: '储值卡',
+ img: '/images/pay/card.png',
+ isActive: false,
+ type: '储值卡'
+ },],
+ moneyCards : [],
+ dialogSettleVisible : true,
+ defaultProps: {
+ children: 'children',
+ label: 'showLable'
+ },
+ treeSelect : [],
+ payMoneys : [],
+ printPaper : false,
+ },
+ created : function() {
+ this.order = /*[[${order}]]*/
+ this.getVipMoneyCards();
+ },
+ methods : {
+ submitBj() {
+ let _this = this;
+ if (_this.payMoneys.length > 0) {
+ let flows = []
+ var total = 0;
+ _this.payMoneys.forEach(item => {
+ let flow = {};
+ flow.payMethod = item.type;
+ if (!item.money) {
+ this.$message.warning("请输入" + item.type + "的付款金额");
+ return false;
+ }
+ flow.amount = item.money;
+ if (item.type == '储值卡'){
+ flow.isGift = item.isGift;
+ flow.cardId = item.id;
+ }
+ total += item.money;
+ flows.push(flow)
+ })
+ if (total > _this.order.arrears) {
+ this.$message.warning("输入付款总金额大于应还金额");
+ return false;
+ }
+ _this.order.flows = flows;
+ } else {
+ this.$message.warning("请选择支付方式");
+ return false;
+ }
+
+ let url = basePath + "/admin/moneyCardUse/bj";
+
+ AjaxProxy.requst({
+ app: _this,
+ data: _this.order,
+ url: url,
+ callback: function (data) {
+ if (_this.printPaper) {
+ _this.print();
+ }
+
+ if(parent.myGrid) {
+ parent.myGrid.serchData();
+ }
+
+ if (parent.app) {
+ parent.app.orderQuery();
+ }
+
+ _this.closeFrame();
+ }
+ });
+ },
+ cancelSubmit() {
+ this.closeFrame();
+ },
+ print() {
+ let _this = this;
+ if (_this.order.id) {
+ layer.open({
+ type: 2,
+ title: "打印订单",
+ area: ['250px', '550px'],
+ maxmin: true,
+ content: [basePath + '/admin/redirect/hive/beautySalon/print-order?id=' + this.order.id],
+ cancel: function (index, layero) {
+ _this.closeFram();
+ }
+ });
+ } else {
+ this.$message.warning("请先挂单在打印");
+ }
+
+
+ },
+ getVipMoneyCards() {
+ let _this = this;
+ if (_this.order.vipId) {
+ AjaxProxy.requst({
+ app: _this,
+ data: {vipId: _this.order.vipId},
+ contentType: 'application/x-www-form-urlencoded',
+ url: basePath + '/admin/moneyCardUse/getUseMoneyCard',
+ callback: function (data) {
+ if (data.rows.length > 0) {
+ data.rows.forEach(function (item, index, input) {
+ item.showLable = item.cardName + "-余额:" + (item.realMoney)
+ item.uuid = MTools.uuid();
+ if (item.giftMoney != 0) {
+ var children = [];
+ var gift = {};
+ gift.id = item.id;
+ gift.giftMoney = item.giftMoney;
+ gift.showLable = item.cardName + '-赠送金额' + item.giftMoney;
+ gift.cardName = item.cardName;
+ gift.isGift = 1;
+ gift.uuid = MTools.uuid();
+ children.push(gift);
+ item.children = children;
+ }
+ });
+ _this.moneyCards = data.rows;
+ }
+
+ }
+ });
+ }
+ },
+ payMethodSelect(item, index) {
+ let _this = this;
+ let payMoneys = _this.payMoneys;
+ if (item.type != '储值卡') {
+ this.$nextTick(function () {
+ if (item.isActive) {
+ Vue.set(item,'isActive',false);
+ var index = -1;
+ for (var i = 0; i < payMoneys.length; i++) {
+ let payMoney = payMoneys[i];
+ if (payMoney.value == item.value) {
+ index = i;
+ break;
+ }
+ }
+
+ if (index > -1) {
+ _this.payMoneys.splice(index, 1)
+ }
+ } else {
+ Vue.set(item,'isActive',true);
+ var hasAmount = 0;
+ for(var i = 0; i < payMoneys.length; i++) {
+ hasAmount += parseFloat(payMoneys[i].money);
+ }
+ if (_this.order.arrears - hasAmount > 0) {
+ Vue.set(item, 'money', _this.order.arrears - hasAmount);
+ }
+ _this.payMoneys.push(item);
+ }
+ });
+ }
+ },
+ popoverHide(item) {
+ if(this.treeSelect.length <= 0) {
+ Vue.set(item, 'isActive', false)
+ } else {
+ Vue.set(item, 'isActive', true)
+ }
+ },
+ handleCheckChange(clickNode, checked) {
+ let _this = this;
+
+ let nodes = checked.checkedNodes;
+ _this.treeSelect = nodes;
+ var index = -1;
+ // 判断点击节点是否在已展示支付方式中
+ for(var i = 0; i < _this.payMoneys.length; i++) {
+ let node = _this.payMoneys[i];
+ if (node.uuid === clickNode.uuid) {
+ index = i;
+ break;
+ }
+ }
+
+ // 若点击节点在选中节点中，且已展示支付方式不存在，则添加
+ if (nodes.indexOf(clickNode) > -1 && index === -1) {
+ var node = clickNode;
+ var item = {};
+ if (node.isGift) {
+ item.value = node.cardName;
+ item.balance = node.giftMoney;
+ item.isGift = 'Y';
+ } else {
+ item.value = node.cardName;
+ item.balance = node.realMoney;
+ item.isGift = 'N';
+ }
+ item.type = '储值卡';
+ item.id = node.id;
+ item.uuid = clickNode.uuid;
+ _this.payMoneys.push(item);
+ }
+
+ // 若点击节点不存在选中节点中，且已展示支付方式中存在，则移除
+ if (nodes.indexOf(clickNode) === -1 && index > -1) {
+ _this.payMoneys.splice(index, 1);
+ }
+ },
+ closeFrame() {
+ parent.layer.close(parent.layer.getFrameIndex(window.name));
+ },
+ }
+ });
+ //]]>
</script>
</body>
</html>
\ No newline at end of file
--
Gitblit v1.9.1