From 4ece659308844cbe73053d3dd2a6f777f218eb13 Mon Sep 17 00:00:00 2001 From: Helius <wangdoubleone@gmail.com> Date: Mon, 11 Jan 2021 16:45:57 +0800 Subject: [PATCH] modify --- zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html | 289 ++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 211 insertions(+), 78 deletions(-) diff --git a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html index 1797130..3965187 100644 --- a/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html +++ b/zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/orderXq-form.html @@ -24,88 +24,201 @@ .ibox-content { background-color: rgba(240, 242, 245, 1); } + label { + width: 100%; + margin: 5px 0 !important; + } </style> </head> <div class="ibox-content" id="app"> <el-container> - <el-header style="height: 210px; background-color: white; margin: 15px;"> - <el-row style="line-height: 60px; padding-top: 20px;"> - <el-col :span="1" style="font-size: 40px; color:#409EFF;"> - <i class="el-icon-s-order" type="primary"></i> - </el-col> - <el-col :span="10"> - <h1 style="line-height: 60px; margin: 0 0;">订单号:{{order.orderNo}}</h1> - </el-col> - <el-col :span="5" style="float: right; margin-right: 10px;"> - <el-button type="info" @click="printf">打印</el-button> - <el-button type="danger" @click="toBack">返回</el-button> + <el-aside style="width: 300px; background-color: white; padding: 10px;"> + <el-row style="border-bottom: #E4E7ED 1px solid;"> + <el-col :span="20" style="padding: 10px;"> + <el-row type="flex" align="middle"> + <el-col :span="7"> + <el-avatar :size="60" :src="circleUrl"></el-avatar> + </el-col> + <el-col :span="15" style="margin-left: 10px;"> + <label>{{vipInfo.vipName}}({{vipInfo.vipLevel == null ? '' : vipInfo.vipLevel.levelName}})</label> + <label>{{vipInfo.vipNo}}</label> + </el-col> + </el-row> + <el-row style="line-height: 20px;"> + <label>订单号: <span>{{order.orderNo}}</span></label> + <label>下单顾问: <span>{{order.staffName}}</span></label> + <label>消费门店: <span>{{order.shopShortName}}</span></label> + <label>订单时间: <span>{{order.orderTime}}</span></label> + <label>备 注: <span>{{order.remark}}</span></label> + </el-row> </el-col> </el-row> - <el-row class="order-info" type="flex" justify="space-around" style="height: 150px; padding: 30px 30px;"> - <el-col :span="5"> - <p>顾问姓名:{{order.staffName}}</p> - <p>会员姓名:{{order.vipName}}</p> - <p>会员编号:{{order.vipNo}}</p> - </el-col> - <el-col :span="5"> - <p>卡支付:{{order.cardPay}}</p> - <p>现金支付:{{order.cashPay}}</p> - <p>备注:{{order.remark}}</p> - </el-col> - <el-col :span="10"> - <el-col :span="6"> - <p>欠款总额</p> - <h2>¥ {{order.arrears}}</h2> - </el-col> - <el-col :span="6"> - <p>折后总额</p> - <h2>¥ {{order.zkTotal}}</h2> - </el-col> - <el-col :span="6"> - <p>订单总额</p> - <h2>¥ {{order.total}}</h2> - </el-col> + <el-row style="padding: 10px; border-bottom: #E4E7ED 1px solid;"> + <el-col :span="24"> + <el-row> + <el-col :span="6" style="text-align: right;"> + <label>总金额</label> + <label>整单折扣</label> + <label style="font-size: 14px;">应收金额</label> + <label>欠款</label> + <label>已还</label> + <label>退款</label> + </el-col> + <el-col :span="14" style="text-align: right;"> + <label>¥ {{order.total}}</label> + <label>¥ {{order.zkTotal - order.total}}</label> + <label>¥ {{order.zkTotal}}</label> + <label>¥ {{order.arrears}}</label> + <label>¥ {{order.repay}}</label> + <label>¥ {{order.refund}}</label> + </el-col> + </el-row> </el-col> </el-row> - </el-header> - <el-main style="background-color: white; margin: 15px; padding: 20px 30px;"> + <el-row style="padding: 10px; border-bottom: #E4E7ED 1px solid;"> + <el-col :span="24"> + <el-row> + <h3>收款明细</h3> + </el-row> + <el-row> + <el-col :span="6" style="text-align: right;"> + <label v-for="(item, index) in payMethodItems">{{item.payMethod}}</label> + </el-col> + <el-col :span="14" style="text-align: right;"> + <label v-for="(item, index) in payMethodItems">¥ {{item.amount}}</label> + </el-col> + </el-row> + </el-col> + </el-row> + <el-row type="flex" justify="center" style="margin: 20px;"> + <el-button size="medium" type="primary">打印</el-button> + </el-row> + </el-aside> + <el-main style="background-color: white; margin-right: 15px; margin-left: 15px; padding: 20px 30px;"> <el-tabs v-model="activeName" @tab-click="handleClick"> - <el-tab-pane label="商品" name="goods"> - <el-table :data="orderData" + <el-tab-pane label="订单明细" name="first"> + <el-row> + <el-button size="medium" type="primary">退款</el-button> + </el-row> + <el-table + :data="orderItems" style="width: 100%"> <el-table-column + type="index" + width="50"> + </el-table-column> + <el-table-column + prop="shoppingGoods.code" + label="产品编号" + width="100"> + </el-table-column> + <el-table-column prop="shoppingGoods.name" - label="商品名称" - width="300"> + label="产品名称" + width="280"> + </el-table-column> + <el-table-column + prop="shoppingGoods.goodType" + label="产品类型"> </el-table-column> <el-table-column prop="price" - label="单价" - width="80"> + label="单价"> </el-table-column> <el-table-column prop="count" - label="购买数量"> + label="数量"> </el-table-column> <el-table-column prop="zkPrice" - label="折后金额"> + label="折扣单价"> </el-table-column> - <el-table-column - prop="cardPay" - label="卡付款"> - </el-table-column> - <el-table-column - prop="cashPay" - label="现金付款"> - </el-table-column> - <el-table-column - prop="arrears" - label="欠款"> + <el-table-column label="小计" :formatter="calOrderTotalFormatter"> </el-table-column> </el-table> </el-tab-pane> - <el-tab-pane label="业绩" name="yj">业绩</el-tab-pane> + <el-tab-pane label="业绩设置" name="second"> + <el-table + :data="achieveItems" + style="width: 100%"> + <el-table-column + type="index" + width="50"> + </el-table-column> + <el-table-column + prop="goodsNo" + label="产品编号" + width="180"> + </el-table-column> + <el-table-column + prop="goodsName" + label="产品名称" + width="180"> + </el-table-column> + <el-table-column + prop="zkTotal" + label="收款"> + </el-table-column> + <el-table-column + prop="achieveType" + label="业绩类型"> + </el-table-column> + <el-table-column + prop="achieve" + label="业绩"> + </el-table-column> + <el-table-column + prop="commission" + label="提成"> + </el-table-column> + <el-table-column + prop="staffId" + label="员工"> + </el-table-column> + <el-table-column label="操作"> + <template slot-scope="scope"> + <el-button type="text" size="small">分享</el-button> + <el-button type="text" size="small">删除</el-button> + </template> + </el-table-column> + </el-table> + </el-tab-pane> + <el-tab-pane label="交易流水" name="third"> + <el-table + :data="flowItems" + style="width: 100%"> + <el-table-column + type="index" + width="50"> + </el-table-column> + <el-table-column + prop="orderNo" + label="订单号" + width="180"> + </el-table-column> + <el-table-column + prop="flowContent" + label="交易内容" + width="300"> + </el-table-column> + <el-table-column + prop="flowType" + label="交易类型"> + </el-table-column> + <el-table-column + prop="amount" + label="交易金额"> + </el-table-column> + <el-table-column + prop="payMethod" + label="支付方式"> + </el-table-column> + <el-table-column + prop="flowNo" + label="流水号"> + </el-table-column> + </el-table> + </el-tab-pane> </el-tabs> </el-main> </el-container> @@ -122,31 +235,63 @@ var app = new Vue({ el : "#app", data : { - activeName : "goods", + vipInfo : "", order : "", - orderItems : "", - cards : "", - orderData : [] + activeName : "first", + circleUrl : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", + orderItems : [], + achieveItems : [], + flowItems : [], + payMethodItems : [], + }, created : function() { + this.vipInfo = /*[[${vipInfo}]]*/ this.order = /*[[${order}]]*/ this.orderItems = /*[[${orderItems}]]*/ - this.cards = /*[[${cards}]]*/ + this.payMethodItems = /*[[${payMethods}]]*/ + this.achieveItems = /*[[${achieveList}]]*/ + this.flowItems = this.order.flows; + this.order.orderTime = moment(this.order.orderTime).format("YYYY-MM-DD HH:mm"); - this.orderData = this.order.items; + var arrears = 0; + var refund = 0; + var repay = 0; + for(var i = 0; i < this.flowItems.length; i++) { + var item = this.flowItems[i]; + if (item.payMethod === '欠款') { + arrears += item.amount; + } + + if (item.flowType === '还款') { + repay += item.amount; + } + + if (item.flowType === '退款') { + refund += item.amount; + } + } + console.log(this.orderItems); + this.order.arrears = arrears; + this.order.refund = refund; + this.order.repay = repay; }, methods : { - handleClick(tab, event) { + calOrderTotalFormatter(row, column) { + return row.count * row.price; }, printf() { - var id = 1; + var id = this.order.id; layer.open({ type: 2, title: "打印服务单", area: ['250px', '550px'], maxmin: true, - content: [basePath + '/admin/redirect/hive/beautySalon/print-service?id=' + id] + content: [basePath + '/admin/redirect/hive/beautySalon/print-order?id=' + id] }); + }, + handleClick() { + }, toBack() { MTools.closeForm(); @@ -154,17 +299,5 @@ } }); //]]> - function print() { - var id=$("#orderId").val(); - layer.open({ - type: 2, - title: "打印订单", - area: ['250px', '550px'], - maxmin: true, - content: [basePath + '/admin/redirect/hive/beautySalon/print-order?id=' + id] - }); - }; - - </script> </html> \ No newline at end of file -- Gitblit v1.9.1