~jiangyouyao/beauty-erp.git

			@@ -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>