From b6daae519f11e1443c3d6ec2e1bce2677b7f968a Mon Sep 17 00:00:00 2001
From: Helius <wangdoubleone@gmail.com>
Date: Thu, 21 Jan 2021 16:24:24 +0800
Subject: [PATCH] modify
---
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