From 0a67d6a24417507a27e03d53da82bbd802257148 Mon Sep 17 00:00:00 2001 From: jyy <935090232@qq.com> Date: Tue, 19 Jan 2021 02:20:39 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/api' into api --- zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/cz-form.html | 565 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 360 insertions(+), 205 deletions(-) diff --git a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/cz-form.html b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/cz-form.html index 5c0925d..76320e7 100644 --- a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/cz-form.html +++ b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/cz-form.html @@ -10,230 +10,385 @@ <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> + <style> + .paymethod ul { + padding: 0; + margin: 0; + height: 50px; + } + .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; + } + + .el-dialog__body { + padding-top: 10px !important; + } + </style> </head> -<div class="ibox-content"> +<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;"> + <el-input v-model="rechargeMoney" placeholder="0.1元起充"></el-input> + </el-col> + </el-row> - <form th:if="${obj ne null }" class="form-horizontal" id="dataform" - onsubmit="javascripr:return false;"> - <input autocomplete="off" type="hidden" name="cardId" th:value="${obj.id }"> - <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" th:value="${obj.realMoney}" - readonly="readonly"> - <div class="Validform_checktip"></div> - </div> - <label class="col-sm-2 control-label">充值时间</label> - <div class="col-sm-4"> + <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"> + <li :class="{active : item.isActive}" @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> + </span> + </ul> + </el-row> + </el-col> + </el-row> - <input autocomplete="off" name="dateTime" type="text" datatype="*" - class="form-control datetimepicker" nullmsg="充值时间不能为空" - style="display: inline;" - th:value="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd')}"> - <div class="Validform_checktip"></div> - </div> + <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-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="16"> + <el-table class="mt-20" + :border="true" + :data="achieveList" + style="width: 100%"> + <el-table-column + type="index" + width="50"> + </el-table-column> + <el-table-column + label="业绩" width="100"> + <template slot-scope="scope"> + <el-input v-model="scope.row.achieveMoney"></el-input> + </template> + </el-table-column> + <el-table-column + label="提成"> + <template slot-scope="scope"> + <el-input v-model="scope.row.commission"></el-input> + </template> + </el-table-column> + <el-table-column + label="员工" width="130"> + <template slot-scope="scope"> + <el-select v-model="scope.row.saleId" 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 + width="150" + 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-col> + </el-row> - </div> - <div class="form-group"> + <el-row style="text-align: center; margin: 20px 0 10px 0"> + <el-checkbox v-model="printPaper">打印小票</el-checkbox> + </el-row> - <label class="col-sm-2 control-label">充值金额</label> - <div class="col-sm-4"> - <input autocomplete="off" type="text" class="form-control" name="bjmoney" value="0" - onchange="changePayMoney('p0',this)" - datatype="*" nullmsg="充值金额不能为空"> - <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" value="0" dataType="n1-8" - name="giftMoney" /> - <div class="Validform_checktip"></div> - </div> - </div> - <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" value="0" dataType="n1-8" - name="jf" /> - <div class="Validform_checktip"></div> - </div> - - <label class="col-sm-2 control-label">下单顾问</label> - <div class="col-sm-4"> - <select class="autoFull select2 " style="width: 100%" - th:data-url="@{/admin/getShopStaffByRoleName?roleName=健康顾问}" - data-value="suId" data-filed="suName" - th:data-def="${session.userInfo.suId }" name="staffId"> - </select> - </div> - - </div> - <div class="row "> - <div class="col-sm-10 pd-20 col-sm-offset-1"> - <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"> - <tr id="p0"> - <td>1</td> - <td>会籍卡充值</td> - <td>0</td> - <td> - <table class="table table-condensed "> - <tr> - <td><select class="autoFull select2 input-sm" style="width: 80px;" - th:data-url="@{/admin/getShopStaffByRoleName?roleName=美疗师}" - data-value="suId" data-filed="suName" - th:data-def="${session.userInfo.suId }" - name="achaeveList[0].beaultId"> - </select></td> - <td><input autocomplete="off" type="text" class="form-control input-sm" value="0" - style="width: 80px" name="achaeveList[0].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" - onclick="addBeaute('p0','0')">添加</a></td> - </tr> - </tbody> - </table> - </div> - </div> - </div> - - - <div class="form-group "> - <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> - </form> - </c:if> - <div th:if="${obj eq null }" class="text-center text-info"> - <h2>该会员没有可用的会员卡!</h2> - </div> - + <el-row style="text-align: center; margin: 10px 0 0 0"> + <el-button type="primary" @click="submitRecharge">确认收款</el-button> + <el-button type="danger" @click="cancelSubmit">取消</el-button> + </el-row> + </el-dialog> </div> -<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script><script type="text/javascript"> - $('.select2 ').select2(); - MTools.autoFullSelect(); - MTools.ininDatetimepicker({}); - var myForm = MForm.initForm({ - invokeUrl : basePath+"/admin/moneyCardUse/cz", - isAutoClose : false, - beforeSubmit : function() { +<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"> + var vipId = $.query.get("vipId"); - //校验业绩 - var ifAchieveOk = true; - var achieveSum = 0; - $("#tbody2").children("tr").each( - function() { - var tr = $(this); - var pay = parseFloat(tr.find("td").eq(2).html()); - - 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(isNaN(achieveSum)){ - layer.msg("业绩金额格式错误", { - icon : 2 - }) - return false; - } - if (!ifAchieveOk) { - layer.msg("业绩金额不能大于支付金额", { - icon : 2 - }) - return false; - } - + //<![CDATA[ + var vue = new Vue({ + el: '#app', + data : { + cardInfo : "", + loginUser : "", + rechargeMoney : "", + 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: '团购' + }, ], + dialogSettleVisible : true, + defaultProps: { + children: 'children', + label: 'showLable' + }, + achieveList : [], + userList: [], + treeSelect : [], + payMoneys : [], + printPaper : false, }, - afterSubmit : function(loj) { + created : function() { + let _this = this; + this.cardInfo = /*[[${obj}]]*/ - layer.open({ - type: 2, - title: "打印订单", - area: ['250px', '550px'], - maxmin: true, - content: [basePath + '/admin/redirect/hive/beautySalon/print-order?id=' + loj.getResult().mapInfo.orderId], - cancel: function (index, layer) { - if (parent.app) { - parent.app.vipInfoFn(); - } else { - parent.selectByKey(); - } - MTools.closeForm(); + //获取用户列表 + AjaxProxy.requst({ + app: _this, + url: basePath + '/admin/shopAll', + callback: function (data) { + _this.userList = data.rows; } }); + //获取登录用户信息 + AjaxProxy.requst({ + app: _this, + url: basePath + '/admin/getLoginUser', + callback: function (data) { + _this.loginUser = data.mapInfo.user; + + _this.achieveList.push({ + saleId: _this.loginUser.suId, + achieveMoney: 0, + commission : 0, + isShare: false, + }); + } + }); }, - }); + methods : { + submitRecharge() { + let _this = this; + + if (!_this.rechargeMoney) { + this.$message.warning("请输入充值金额"); + return; + } + + if (_this.rechargeMoney < 0.1) { + this.$message.warning("0.1元起充"); + return; + } + + 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; + total += item.money; + flows.push(flow); + }) + if (total != _this.rechargeMoney) { + this.$message.warning("付款金额应等于充值金额"); + return false; + } + _this.cardInfo.flows = flows; + } else { + this.$message.warning("请选择支付方式"); + return false; + } + + let achaeveList = []; + _this.achieveList.forEach(achieve => { + let achieveNew = { + beaultId: achieve.saleId, + t1: achieve.achieveMoney, + t3: '现金业绩', + projPercentage: achieve.commission, + }; + achaeveList.push(achieveNew); + }) + _this.cardInfo.bjmoney = _this.rechargeMoney; + _this.cardInfo.achaeveList = achaeveList; + let url = basePath + "/admin/moneyCardUse/cz"; + + console.log(_this.cardInfo); + AjaxProxy.requst({ + app: _this, + data: _this.cardInfo, + url: url, + callback: function (data) { + if (_this.printPaper) { + _this.print(); + } + + if(parent.myGrid) { + parent.myGrid.serchData(); + } + + if (parent.app) { + parent.app.vipInfoFn(); + } + + _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("请先挂单在打印"); + } + }, + payMethodSelect(item, index) { + let _this = this; + let payMoneys = _this.payMoneys; + let rechargeMoney = _this.rechargeMoney; + if (!rechargeMoney) { + this.$message.warning("请输入充值金额"); + return; + } - //添加一个美疗师 - function addBeaute(trId, itemIndex) { - if (!itemIndex) { - itemIndex = 0; + if (rechargeMoney < 0.1) { + this.$message.warning("0.1元起充"); + return; + } + 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.rechargeMoney - hasAmount > 0) { + Vue.set(item, 'money', _this.rechargeMoney - hasAmount); + } + _this.payMoneys.push(item); + } + }); + } + }, + closeFrame() { + parent.layer.close(parent.layer.getFrameIndex(window.name)); + }, + shareAchieve(index, row) { + row2 = JSON.parse(JSON.stringify(row)); + row2.isShare = true; + this.achieveList.push(row2); + }, + //删除业绩 + delAchieve(index, row) { + this.achieveList.splice(index, 1); + }, } - var id = MTools.randomStr(); - console.log(1); - 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="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" value="0" style="width: 80px" name="achaeveList['+achieveIndex+'].t1" ' - +'name="items['+achieveIndex+'].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()); - }; + }); + //]]> </script> </body> </html> \ No newline at end of file -- Gitblit v1.9.1