~jiangyouyao/beauty-erp.git

			@@ -10,226 +10,457 @@
			<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 type="number" v-model="rechargeMoney" @change="changeRechargeMoney" placeholder="可充负数退款"></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="150">
			<template slot-scope="scope">
			<el-select v-model="scope.row.achieveType" @change="calculationAchieve" placeholder="请选择业绩类型">
			<el-option
			v-for="item in achieveTypeList"
			:key="item.value"
			:label="item.value"
			:value="item.value">
			</el-option>
			</el-select>
			</template>
			</el-table-column>
			<el-table-column
			label="业绩" width="100">
			<template slot-scope="scope">
			<el-input @input="checkAchieveMoney" v-model="scope.row.goodsCash"></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());
			//<![CDATA[
			var vue = new Vue({
			el: '#app',
			data : {
			cardInfo : "",
			loginUser : "",
			rechargeMoney : 0,
			achieveTypeList : [],
			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,
			},
			created : function() {
			let _this = this;
			this.cardInfo = /[[${obj}]]/

			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;
			//获取用户列表
			AjaxProxy.requst({
			app: _this,
			url: basePath + '/admin/shopAll',
			callback: function (data) {
			_this.userList = data.rows;
			}
			});


			// 业绩类型
			AjaxProxy.requst({
			app: _this,
			url: basePath + '/admin/customerDictionary/getListByParentCode/YJLX',
			callback: function (data) {
			_this.achieveTypeList = 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,
			goodsCash: 0,
			achieveType : _this.achieveTypeList[0].value,
			commission : 0,
			isShare: false,
			});
			}
			});
			if(isNaN(achieveSum)){
			layer.msg("业绩金额格式错误", {
			icon : 2
			})
			return false;
			}
			if (!ifAchieveOk) {
			layer.msg("业绩金额不能大于支付金额", {
			icon : 2
			})
			return false;
			}

			},
			afterSubmit : function(loj) {

			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) {
			parent.selectByKey();
			MTools.closeForm();
			}
			});

			},
			});
			methods : {
			//修改充值金额同步修改业绩
			changeRechargeMoney(){
			let aMoeny=(this.rechargeMoney/this.achieveList.length).toFixed(2);
			this.achieveList.forEach(item=>{
			item.goodsCash=aMoeny;
			});
			},
			submitRecharge() {
			let _this = this;

			if (!_this.rechargeMoney) {
			this.$message.warning("请输入充值金额");
			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 = parseFloat(item.money);
			total += parseFloat(item.money);
			flows.push(flow);
			})
			debugger
			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,
			goodsCash: achieve.goodsCash,
			achieveType: achieve.achieveType,
			projPercentage: achieve.commission,
			};
			achaeveList.push(achieveNew);
			})
			_this.cardInfo.bjmoney = _this.rechargeMoney;
			_this.cardInfo.achaeveList = achaeveList;
			if (_this.checkAchieveMoney()) {
			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 (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);
			}
			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);
			this.calculationAchieve();
			},
			calculationAchieve() {
			let _this = this;
			let jsqMap = {};
			this.achieveList.forEach(achieve=>{
			key=achieve.achieveType;
			if(!jsqMap[key]) {
			jsqMap[key]=1;
			} else {
			jsqMap[key]++;
			}
			});
			this.achieveList.forEach(achieve=>{
			key = achieve.achieveType;
			achieve.goodsCash=(_this.rechargeMoney/jsqMap[key]).toFixed(2);
			});
			},
			//删除业绩
			delAchieve(index, row) {
			this.achieveList.splice(index, 1);
			this.calculationAchieve();
			},
			checkAchieveMoney(){
			console.log("校验业绩是否大于订单收款金额");
			let _this = this;
			let jsqMap={};
			let isOk=true;
			for(let i=0 ; i< this.achieveList.length; i++){
			let achieve=this.achieveList[i];
			if(!isNaN(achieve.goodsCash) ){
			key=achieve.achieveType;
			if(!jsqMap[key]){
			jsqMap[key]=parseFloat(achieve.goodsCash);
			}else{
			jsqMap[key]=jsqMap[key]+parseFloat(achieve.goodsCash);
			}
			if(jsqMap[key]>_this.rechargeMoney) {
			this.$message.error("业绩分配金额大于支付金额");
			isOk = false;
			return;
			}
			}else{
			this.$message.error("业绩分配金额请填写数字");
			isOk=false;
			return;
			}
			};
			console.log("isOk",isOk);
			return isOk;
			},
			}
			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>