<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="utf-8">
|
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
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/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="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>
|
|
<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>
|
|
<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>
|
|
<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="submitRecharge">确认收款</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">
|
var vipId = $.query.get("vipId");
|
|
//<![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 : [],
|
order:{},
|
printPaper : false,
|
},
|
created : function() {
|
let _this = this;
|
this.cardInfo = /*[[${obj}]]*/
|
|
//获取用户列表
|
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
|
});
|
}
|
});
|
}
|
});
|
|
},
|
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,
|
payMethod:"现金",
|
};
|
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) {
|
_this.order.id = data.mapInfo.orderId;
|
|
if (_this.printPaper) {
|
_this.$message.success(data.info);
|
_this.print();
|
} else {
|
_this.$message.success({
|
message : data.info,
|
duration : 1000,
|
onClose() {
|
_this.closeFrame();
|
}
|
});
|
}
|
|
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/order/printOrder?id=' + this.order.id],
|
cancel: function (index, layero) {
|
_this.closeFrame();
|
}
|
});
|
} else {
|
this.$message.warning("请先挂单在打印");
|
}
|
|
|
},
|
payMethodSelect(item, index) {
|
let _this = this;
|
let payMoneys = _this.payMoneys;
|
let rechargeMoney = _this.rechargeMoney;
|
if (!rechargeMoney) {
|
this.$message.warning("请输入充值金额");
|
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);
|
}
|
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;
|
console.log(this.achieveList);
|
let rechargeMoney=parseFloat(_this.rechargeMoney);
|
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);
|
}
|
}else{
|
this.$message.error("业绩分配金额请填写数字");
|
isOk=false;
|
return;
|
}
|
};
|
for(money in jsqMap ){
|
if(money > rechargeMoney) {
|
this.$message.error("业绩分配金额大于支付金额");
|
isOk = false;
|
return;
|
}
|
}
|
|
|
console.log("isOk",isOk);
|
return isOk;
|
},
|
}
|
});
|
//]]>
|
</script>
|
</body>
|
</html>
|
