forked from beauty-erp
zq-erp/src/main/resources/templates/views/admin/hive/beautySalon/vip.html
@@ -1,5 +1,5 @@ <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml"> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="utf-8"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> @@ -9,9 +9,12 @@ 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"/> <!-- 本框架基本脚本和样式 --> <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> <script type="text/javascript" th:src="@{/js/systools/MBaseVue.js}"></script> <script type="text/javascript" th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script> <script type="text/javascript" th:src="@{/plugin/moment.min.js}"></script> <script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script> <script type="text/javascript" th:src="@{/js/function/vip.js}"></script> <link rel="stylesheet" th:href="@{/plugin/element-ui/index.css}"> <script type="text/javascript" th:src="@{/js/function/vip.js}"></script> <script type="text/javascript" th:src="@{/js/function/meiduCommon.js}"></script> @@ -52,234 +55,1331 @@ .userList li:hover { background: #eee; } .ibox-content { background-color: rgba(240, 242, 245, 1); } .col-style { line-height: 30px; height: 30px; text-align: center; padding: 0 5px; display: inline-block; vertical-align: top; } .el-tag + .el-tag { margin-left: 10px; margin-bottom: 10px; } .button-new-tag { margin-left: 10px; height: 24px; line-height: 22px; padding-top: 0; padding-bottom: 0; } .input-new-tag { width: 90px; margin-left: 10px; vertical-align: bottom; } .table-style { margin: 20px 0; padding: 20px 10px; border: 1px solid #DCDFE6; } .el-autocomplete { display: block !important; } .vip-info { padding: 30px 20px; } .vip-info p { line-height: 30px; } </style> </head> <body class="ibox-content container-fluid" onkeypress="dosearch(event)"> <body> <div class="ibox-content container-fluid" id="app"> <el-container> <el-header style="background-color: white; margin: 15px; line-height: 60px"> <el-col :span="7"> <el-col :span="19"> <el-autocomplete :fetch-suggestions="querySearch" :trigger-on-focus="false" @select="handleSelect" v-model="searchValue" placeholder="输入会员姓名/手机号码/编号" @keyup.enter.native="searchVipInfo"></el-autocomplete> </el-col> <el-col :span="1"> <el-button type="primary" @click="searchVipInfo">查询</el-button> </el-col> </el-col> <el-col :span="8" style="float: right; margin-right: 20px;"> <el-button type="primary" plain @click="recharge">充值</el-button> <el-button type="warning" plain @click="addOrder">开单</el-button> <el-button type="success" plain @click="addServiceOrder">开服务单</el-button> <el-button type="danger" plain @click="returnMoney">退款</el-button> </el-col> </el-header> <el-container> <el-aside style="background-color: white; margin:0 15px; width: 400px"> <el-row style="margin-left: 26px; margin-right: 26px;"> <el-row type="flex" justify="center"> <el-col :span="20" style="padding: 15px; text-align: center;"> <el-avatar :size="150" :src="circleUrl"></el-avatar> </el-col> </el-row> <el-row type="flex" justify="center"> <el-col :span="4" style="text-align: center;"><span style="font-weight: bolder">{{vipInfo.vipName}}</span></el-col> <el-col :span="5" style="text-align: center;">{{vipInfo.vipType}}</el-col> </el-row> <el-row type="flex" justify="center"> <span class="col-style"><span v-if="vipInfo.age != null && vipInfo.age != ''">{{vipInfo.age}}</span><span v-else>-</span></span> <span class="col-style"><span v-if="vipInfo.addr != null && vipInfo.addr != ''">{{vipInfo.addr}}</span><span v-else>-</span></span> <span class="col-style">{{vipInfo.phone}}</span> </el-row> <el-row style="padding: 10px 20px;"> <p>余额：<span v-if="vipInfo.balance != null">{{vipInfo.balance}}元</span></p> <p>积分：<span v-if="vipInfo.pointAll != null">{{vipInfo.pointAll}}</span></p> <p>累计消费金额：<span v-if="vipInfo.totalMoney != null">{{vipInfo.totalMoney}} 元</span></p> <p>累计消费次数：<span v-if="vipInfo.totalTimes != null">{{vipInfo.totalTimes}} 次</span></p> <p>上次消费时间：<span v-if="vipInfo.payTime">{{vipInfo.payTime}}</span></p> </el-row> <el-row style="border-top: 2px dashed #E4E7ED; border-bottom: 2px dashed #E4E7ED; padding: 10px 0px;"> <h4>标签</h4> <el-tag type="info" size="small" :key="tag.label" v-for="tag in tags.tags" closable :disable-transitions="false" @close="handleClose(tag)"> {{tag.label}} </el-tag> <el-input class="input-new-tag" v-if="tags.inputVisible" v-model="tags.inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" ></el-input> <el-button v-else class="button-new-tag" size="mini" @click="showInput">+</el-button> </el-row> <el-row style="padding: 10px 0;"> <h4>消费门店</h4> <el-row style="text-align: center"> <el-col :span="10" v-for="item in vipInfo.shopNames"> <el-avatar size="small" :src="circleUrl"></el-avatar> <span class="col-style">{{item}}</span> </el-col> </el-row> </el-row> </el-row> </el-aside> <el-main style="background-color: white; margin-right: 15px; padding: 20px 30px;"> <el-tabs v-model="activeName" type="card" @tab-click="tabHandleClick"> <el-tab-pane label="会员信息" name="vipInfo"> <el-row class="vip-info"> <el-col :span="10"> <p>生日 : {{vipInfo.birthday1}}</p> <p>会员状态 : {{vipInfo.vipState}}</p> <p>会员编号 : {{vipInfo.vipNo}}</p> <p>注册时间 : {{vipInfo.createTime}}</p> <p>到店途径 : {{vipInfo.arrivalWay}}</p> </el-col> <el-col :span="10"> <p>会员卡类型 : {{vipInfo.vipType}}</p> <p>会员等级 : {{vipInfo.levelName}}</p> <p>生肖/星座 : {{vipInfo.constell}}</p> <p>地址 : {{vipInfo.addr}}</p> <p>健康顾问 : {{vipInfo.staffName}}</p> </el-col> </el-row> </el-tab-pane> <el-tab-pane label="项目/套餐" name="proj"> <el-row style="line-height: 40px;"> <el-col :span="10" style="margin-left: 20px;"> <el-radio-group v-model="projTab.projType" @change="refreshTable(1)"> <el-radio label="proj">项目</el-radio> <el-radio label="taocan">套餐</el-radio> <el-radio label="card">卡项</el-radio> </el-radio-group> </el-col> <el-col :span="3" style="float: right; margin-right: 20px;"> <el-select v-model="projTab.projIsValid" placeholder="请选择" @change="selectChange"> <el-option v-for="item in projTab.projOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-col> </el-row> <el-row class="table-style"> <el-table id="proj" v-show="projTab.projType=='proj'" :data="projTab.projTableData" style="width: 100%"> <el-table-column prop="projName" label="项目名称" width="180"> </el-table-column> <el-table-column prop="source" label="来源" width="180"> </el-table-column> <el-table-column prop="status" label="状态"> </el-table-column> <el-table-column prop="balance" label="项目余额"> </el-table-column> <el-table-column prop="surplusCount" label="余次"> </el-table-column> <el-table-column prop="failTime" label="到期时间"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button matrix:btn="vipInfo-youxiao" v-if="scope.row.status!='有效'" type="text" size="small" @click="tabProjValid(scope.$index, scope.row)">有效</el-button> <el-button matrix:btn="vipInfo-wuxiao" v-if="scope.row.status!='无效'" type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button> <el-button matrix:btn="vipInfo-dongjie" v-if="scope.row.status!='冻结'" type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">冻结</el-button> <el-button matrix:btn="vipInfo-cardEdit" type="text" size="small" @click="tabProjEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="text" size="small" @click="openProjUseFlow(scope.$index, scope.row)">操作记录</el-button> </template> </el-table-column> </el-table> <div class="row"> <div class="row "> <el-table id="taocan" v-show="projTab.projType=='taocan'" :data="projTab.taocanTableData" style="width: 100%;" row-key="id" :tree-props="{children: 'taocanProjUse', hasChildren: 'hasChildren'}"> <el-table-column prop="projName" label="名称" width="240"> </el-table-column> <el-table-column prop="status" label="状态" width="180"> </el-table-column> <el-table-column prop="balance" label="余额"> </el-table-column> <el-table-column prop="surplusCount" label="套餐余次"> </el-table-column> <el-table-column prop="failTime" label="到期时间"> </el-table-column> <el-table-column label="操作" fixed="right" width="160"> <template slot-scope="scope"> <el-button matrix:btn="vipInfo-youxiao" v-if="scope.row.status!='有效' && scope.row.taocanId == null" type="text" size="small" @click="tabProjValid(scope.$index, scope.row)">有效</el-button> <el-button matrix:btn="vipInfo-wuxiao" v-if="scope.row.status!='无效' && scope.row.taocanId == null" type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button> <el-button matrix:btn="vipInfo-dongjie" v-if="scope.row.status!='冻结' && scope.row.taocanId == null" type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">冻结</el-button> <el-button matrix:btn="vipInfo-cardEdit" v-if="scope.row.taocanId == null" type="text" size="small" @click="tabProjEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="text" size="small" @click="openProjUseFlow(scope.$index, scope.row)">操作记录</el-button> </template> </el-table-column> </el-table> <div class="col-sm-12 ibox-content"> <form method="post" id="dataform" class="dataform form-inline"> <div class="pd-20 form-group"> <div class="text-l "> <input type="text" id="key" placeholder="输入会员姓名/手机号码/编号" autocomplete="off" style="width: 400px" class="form-control"> <button type="button" class="btn btn-success radius EXSerchBtn " onclick="selectByKey();"> <i class="fa fa-search"> </i> 查找 </button> <ul id="userList" class="userList " style="width: 400px; display: none"> </ul> <el-table id="card" v-show="projTab.projType=='card'" :data="projTab.cardTableData" style="width: 100%;"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="cardName" label="充值卡名称" width="160"> </el-table-column> <el-table-column prop="useTotal" label="总次数"> </el-table-column> <el-table-column prop="lastCount" label="剩余次数"> </el-table-column> <el-table-column prop="realMoney" label="本金"> </el-table-column> <el-table-column prop="giftMoney" label="赠送金额"> </el-table-column> <el-table-column prop="source" label="来源"> </el-table-column> <el-table-column prop="status" label="状态"> </el-table-column> <el-table-column prop="isVipCar" label="是否是会籍卡" :formatter="cardIsVipFormatter"> </el-table-column> <el-table-column prop="isOver" label="是否使用完成" :formatter="cardIsOrderFormatter"> </el-table-column> <el-table-column prop="failTime" label="到期时间" width="160"> </el-table-column> <el-table-column prop="remark" label="备注"> </el-table-column> <el-table-column label="操作" fixed="right" width="160"> <template slot-scope="scope"> <el-button matrix:btn="vipInfo-youxiao" v-if="scope.row.status!='有效'" type="text" size="small" @click="tabProjValid(scope.$index, scope.row)">有效</el-button> <el-button matrix:btn="vipInfo-wuxiao" v-if="scope.row.status!='无效'" type="text" size="small" @click="tabProjInvalid(scope.$index, scope.row)">无效</el-button> <el-button matrix:btn="vipInfo-dongjie" v-if="scope.row.status!='冻结'" type="text" size="small" @click="tabProjCold(scope.$index, scope.row)">冻结</el-button> <el-button matrix:btn="vipInfo-cardEdit" type="text" size="small" @click="tabProjEdit(scope.$index, scope.row)">编辑</el-button> <el-button type="text" size="small" @click="openMoneyCardUseFlow(scope.$index, scope.row)">操作记录</el-button> </template> </el-table-column> </el-table> </el-row> <el-row> <el-pagination background @size-change="projTabSizeChange" @current-change="projTabCurrentPage" :current-page="projTab.page.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="projTab.page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="projTab.page.total"> </el-pagination> </el-row> </div> </div> </form> </div> </div> <input autocomplete="off" type="hidden" id="vipId"> <div class="row"> <div class=" col-sm-9 "> <div class="panel panel-default"> <div class="panel-heading">会员信息</div> <table class="table table-bordered table-striped " style="width: 100%;"> <tr> <td width="10%" class="text-r"><b>会员姓名:</b></td> <td width="20%" name="vipName" id="vipName"></td> <td width="10%" class="text-r"><b>性别:</b></td> <td width="20%" name="sex" id="sex"></td> <td width="10%" class="text-r"><b>生日:</b></td> <td width="20%" name="birthday1" id="birthday1"></td> </tr> <tr> <td width="10%" class="text-r"><b>会员类型:</b></td> <td width="20%" name="vipType" id="vipType"></td> <td width="10%" class="text-r"><b>会员状态:</b></td> <td width="20%" name="vipState" id="vipState"></td> <td width="10%" class="text-r"><b>会员等级:</b></td> <td width="20%" name="levelName" id="levelName"></td> </tr> <tr> <td width="10%" class="text-r"><b>会员编号:</b></td> <td width="20%" name="animalSign" id="vipNo"></td> <td width="10%" class="text-r"><b>生肖/星座:</b></td> <td width="20%" name="constell" id="constell"></td> <td width="10%" class="text-r"><b>注册时间:</b></td> <td width="20%" name="createTime" id="createTime"></td> </tr> <tr> <td width="10%" class="text-r"><b>手机号码:</b></td> <td width="20%" name="phone" id="phone"></td> <td width="10%" class="text-r"><b>入会时间:</b></td> <td width="20%" name="inDate" id="inDate"></td> <td width="10%" class="text-r"><b>地址:</b></td> <td width="20%" name="addr" id="addr"></td> </tr> <tr> <td width="10%" class="text-r"><b>到店途径:</b></td> <td width="20%" name="arrivalWay" id="arrivalWay"></td> <td width="10%" class="text-r"><b>总佣金:</b></td> <td width="20%" name="commissionAll" id="commissionAll"></td> <td width="10%" class="text-r"><b>总积分:</b></td> <td width="20%" name="pointAll" id="pointAll"></td> </tr> <tr> <td width="10%" class="text-r"><b>储值卡余额:</b></td> <td width="20%" name="bal" id="bal"></td> <td width="10%" class="text-r"><b>备注:</b></td> <td width="20%" name="remark" id="remark"></td> <td width="10%" class="text-r"><b>健康顾问:</b></td> <td width="20%" name="staffName" id="staffName"></td> <td style="display: none" id="id" name="id"></td> </tr> <tr> <td class="text-center" colspan="6"> <button matrix:btn="vipinfoClub-recharge" class="btn btn-success radius size-S isActive " disabled="disabled" onclick='openCz()'> <i class="fa fa-jpy"></i> 充值 </button> <button matrix:btn="vipinfoClub-payment" class="btn btn-success radius size-S isActive" disabled="disabled" onclick='openOrderList("欠款")'> <i class="fa fa-paypal"></i> 补交 </button> <button matrix:btn="vipinfoClub-gathering" class="btn btn-success radius size-S isActive" disabled="disabled" onclick='openOrderList("待付款")'> <i class="fa fa-paypal"></i> 收款 </button> <button matrix:btn="vipinfoClub-newService" class="btn btn-success radius size-S isActive" disabled="disabled" onclick='toRefundOrder()'> <i class="fa fa-paypal"></i> 退款 </button> <button matrix:btn="vipinfoClub-newService" class="btn btn-success radius size-S isActive" disabled="disabled" onclick='openAddOrder()'> <i class="fa fa-paypal"></i> 开单 </button> <button matrix:btn="vipinfoClub-newService" class="btn btn-success radius size-S isActive" disabled="disabled" onclick='openAddService()'> <i class="fa fa-paypal"></i> 开服务单 </button> </td> </tr> </table> </div> </div> <div class="col-sm-3"> <div class="panel panel-default "> <div class="panel-heading">最近查询会员</div> <ul class="list-group c " id="historyList"> </ul> </div> </div> </div> <div class="row"> <div class="col-sm-9 text-center"> <button class="btn btn-success radius size-S isActive" onclick='openOrderList("全部")' disabled="disabled"> <i class="fa fa-arrows-alt "></i> 订单 </button> <button class="btn btn-success radius size-S isActive" onclick="openServiceList()" disabled="disabled"> <i class="fa fa-arrows-alt "></i> 服务单 </button> || <button matrix:btn="vipinfoClub-projTaocan" class="btn btn-success radius size-S isActive" onclick="openProj()" disabled="disabled"> <i class="fa fa-star-half-o "></i> 项目管理 </button> <button matrix:btn="vipinfoClub-projTaocan" class="btn btn-success radius size-S isActive" onclick="openTc()" disabled="disabled"> <i class="fa fa-share-alt-square "></i> 套餐管理 </button> <button matrix:btn="vipinfoClub-projTaocan" class="btn btn-success radius size-S isActive" onclick="openMoneyCard()" disabled="disabled"> <i class="fa fa-gbp "></i>充值卡管理 </button> || <button matrix:fn="servicefollow" onclick="openFollow()" type="button" class="btn btn-success isActive" disabled="disabled"> <i class="fa fa-edit"></i> 跟进记录 </button> <button matrix:btn="vipInfo-edit" onclick="openArchieves()" type="button" class="btn btn-success isActive" disabled="disabled"><i class="fa fa-edit"></i> 客户档案 </button> <button matrix:btn="vipInfo-edit" onclick="openEdit()" type="button" class="btn btn-success isActive" disabled="disabled"><i class="fa fa-edit"></i> 基本资料 </button> </div> </div> <el-dialog title="设置过期时间" :visible.sync="projTab.failTimeDialog"> <el-form> <el-form-item label="选择过期时间"> <el-date-picker v-model="projTab.failTime" type="date" format="yyyy-MM-dd" placeholder="选择日期时间"> </el-date-picker> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="updateFailTimeFn">确 定</el-button> <el-button @click="projTab.failTimeDialog = false">取 消</el-button> </div> </el-dialog> </el-tab-pane> <el-tab-pane label="服务单" name="serviceOrder"> <el-row style="line-height: 40px;"> <el-col :span="11"> <el-date-picker v-model="serviceOrderTab.selectTime" type="datetimerange" range-separator="至" format="yyyy-MM-dd HH:mm" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-col> <el-col :span="5"> <el-select v-model="serviceOrderTab.state" placeholder="请选择"> <el-option v-for="item in serviceOrderTab.states" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-col> <el-col :span="1" style="margin-left: 5px;"> <el-button type="primary" @click="serviceOrderQuery">查询</el-button> </el-col> </el-row> <el-row class="table-style"> <el-table :data="serviceOrderTab.tableData" style="width: 100%;"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="serviceNo" label="服务单号" width="160"> </el-table-column> <el-table-column prop="money" label="消耗金额"> </el-table-column> <el-table-column prop="createTime" label="下单时间" width="160"> </el-table-column> <el-table-column prop="yyTime" label="预约时间" width="160" :formatter="dateFormat"> </el-table-column> <el-table-column prop="totalTime" label="服务时长"> </el-table-column> <el-table-column prop="isOverTime" label="超时时间"> </el-table-column> <el-table-column prop="createStaffName" label="下单顾问"> </el-table-column> <el-table-column prop="state" label="状态"> </el-table-column> <el-table-column fixed="right" label="操作" width="200"> <template slot-scope="scope"> <el-button type="text" size="small" @click="lookServiceOrder(scope.$index, scope.row)">查看</el-button> <el-button matrix:btn="serviceClub-paiban" type="text" size="small" v-if="scope.row.state=='待预约'" @click="paiban(scope.$index, scope.row)">排班</el-button> <el-button matrix:btn="serviceClub-paidan" type="text" size="small" v-if="scope.row.state=='预约成功待处理'" @click="giveServiceOrder(scope.$index, scope.row)">派单</el-button> <el-button matrix:btn="serviceClub-edit" type="text" size="small" v-if="scope.row.state=='预约成功待处理'" @click="modifyServiceOrder(scope.$index, scope.row)">修改</el-button> <el-button matrix:btn="serviceClub-peiliao" type="text" size="small" v-if="scope.row.state=='需配料'" @click="peiliao(scope.$index, scope.row)">配料</el-button> <el-button matrix:btn="serviceClub-huakou" type="text" size="small" v-if="scope.row.state=='服务完成'" @click="hkService(scope.$index, scope.row)">划扣</el-button> <el-button matrix:btn="serviceClub-edit" type="text" size="small" @click="modifyTime(scope.$index, scope.row)">修改时间</el-button> <el-button matrix:btn="serviceClub-del" type="text" size="small" v-if="scope.row.state!='预约取消'" @click="cancelServiceOrder(scope.$index, scope.row)">取消</el-button> </template> </el-table-column> </el-table> </el-row> <el-row> <el-pagination background @size-change="serviceOrderSizeChange" @current-change="serviceOrderCurrentChange" :current-page="serviceOrderTab.page.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="serviceOrderTab.page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="serviceOrderTab.page.total"> </el-pagination> </el-row> </el-tab-pane> <el-tab-pane label="订单" name="order"> <el-row style="line-height: 40px;"> <el-col :span="11"> <el-date-picker v-model="orderTab.selectTime" type="datetimerange" range-separator="至" format="yyyy-MM-dd HH:mm" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-col> <el-col :span="5"> <el-select v-model="orderTab.state" placeholder="请选择"> <el-option v-for="item in orderTab.states" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-col> <el-col :span="1" style="margin-left: 5px;"> <el-button type="primary" @click="orderQuery">查询</el-button> </el-col> </el-row> <el-row class="table-style"> <el-table :data="orderTab.orderTableData" 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="orderTime" label="下单时间" width="160" :formatter="oderTimeFormat"> </el-table-column> <el-table-column prop="total" label="总价"> </el-table-column> <el-table-column prop="zkTotal" label="折后价"> </el-table-column> <el-table-column prop="staffName" label="下单顾问"> </el-table-column> <el-table-column prop="cashPay" label="现金支付金额"> </el-table-column> <el-table-column prop="cardPay" label="卡支付金额"> </el-table-column> <el-table-column prop="arrears" label="欠款金额"> </el-table-column> <el-table-column prop="statu" label="订单状态"> </el-table-column> <el-table-column prop="remark" label="备注" width="100"> </el-table-column> <el-table-column label="操作" fixed="right" width="160"> <template slot-scope="scope"> <el-button type="text" size="small" @click="lookOrderInfo(scope.$index, scope.row)">查看</el-button> <el-button matrix:btn="orderClub-payment" v-if="scope.row.statu == '欠款'" type="text" size="small" @click="bjMoney(scope.$index, scope.row)">补交</el-button> <el-button matrix:btn="orderClub-gathering" v-if="scope.row.statu == '待付款'" type="text" size="small" @click="skMoney(scope.$index, scope.row)">收款</el-button> <el-button matrix:btn="orderClub-edit" type="text" size="small" @click="updateTime(scope.$index, scope.row)">修改时间</el-button> </template> </el-table-column> </el-table> </el-row> <el-row> <el-pagination background @size-change="orderSizeChange" @current-change="orderCurrentChange" :current-page="orderTab.page.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="orderTab.page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="orderTab.page.total"> </el-pagination> </el-row> </el-tab-pane> <el-tab-pane label="皮肤检测" name="skinCheck"> <el-row style="line-height: 40px;"> <el-col :span="11"> <el-date-picker v-model="skinTab.selectTime" type="daterange" range-separator="至" format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker> </el-col> <el-col :span="6" style="margin-left: 5px;"> <el-button type="primary" @click="skinCheckQuery">查询</el-button> <el-button type="success" @click="addSkinCheck">新增</el-button> </el-col> </el-row> <el-row class="table-style"> <el-table :data="skinTab.skinTableDate" style="width: 100%;"> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="checkUserName" label="检测人员"> </el-table-column> <el-table-column prop="shopName" label="门店"> </el-table-column> <el-table-column prop="checkTime" label="检测时间"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="text" size="small" @click="editSkinCheck(scope.$index, scope.row)">编辑</el-button> <el-button type="text" size="small" @click="delSkinCheck(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> </el-row> <el-row> <el-pagination background @size-change="skinCheckSizeChange" @current-change="skinCheckCurrentChange" :current-page="skinTab.page.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="skinTab.page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="skinTab.page.total"> </el-pagination> </el-row> </el-tab-pane> </el-tabs> </el-main> </el-container> </el-container> </div> </body> <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:src="@{/js/systools/MJsBase.js}"></script> <script th:inline="javascript"> //初始带入vip的电话 var key = $.query.get("vipPhone"); if(key){ selectList(key); } var app = new Vue({ el: '#app', data : { circleUrl : "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png", activeName : 'vipInfo', tags : { tags : [], inputVisible: false, inputValue: '' }, searchValue : "", vipInfo : {}, // 项目/套餐 tab projTab : { projType : "proj", projTypeBak : "proj", projOptions : [{ value : '', label : "全部" }, { value : '有效', label : "有效" }, { value : '无效', label : "无效" }, { value : "冻结", label : "冻结" }, { value : "转让", label : "转让" }, { value : "退款", label : "退款" }], projIsValid : "", failTimeDialog : false, failTime : "", row : '', $(function () { $("#key").keyup( function () { var $input = $("#key"); if ($input.val().length > 1) { $.AjaxProxy({ p: { keyWord: $input.val(), }, c: false, }) .invoke( basePath + "/admin/vipInfo/findUserByPhotoOrName", function (loj) { var html = ""; for (var i = 0; i < loj .getRowCount(); i++) { html += '<li onclick="selectList(\'' + loj.getString(i, 'phone') + '\')" >' + loj.getString(i, 'phone') + "-" + loj.getString(i, 'vipName') + "-" + loj.getString(i, 'vipNo') + '</li>'; } $("#userList").html(html).show(); }); } else { $("#userList").hide(); projTableData : [], taocanTableData : [], cardTableData : [], page : { currentPage : 1, pageSize : 10, total : 0 } }); updateHistory(); $("#userList").mouseleave(function () { $(this).hide(); }) }) }, // 服务单tab serviceOrderTab : { tableData : [], selectTime : '', state : '', states : [ { value : '', label : '全部' }, { value : '待预约', label : '待预约' },{ value : '预约成功待处理', label : '待派单' },{ value : '需配料', label : '待配料' }, { value : '配料完成', label : '待服务' },{ value : '服务中', label : '服务中' }, { value : '服务完成', label : '服务完成' },{ value : '服务单结束', label : '服务单结束' }, ], page : { currentPage : 1, pageSize : 10, total : 0 } }, // 订单 tab orderTab : { orderTableData : [], selectTime : '', state : '', states : [ { value : '', label : '全部' }, { value : '待付款', label : '待付款' }, { value : '已付款', label : '已付款' }, { value : '欠款', label : '欠款' }, { value : '已取消', label : '已取消' } ], page : { currentPage : 1, pageSize : 10, total : 0 } }, // 皮肤检测tab skinTab : { skinTableDate : [], selectTime : '', page : { currentPage : 1, pageSize : 10, total : 0 } } }, created : function() { var key = $.query.get("vipPhone"); let _this = this; if (key) { _this.vipInfoFn(key); } }, methods : { querySearch(queryString, cb) { $.AjaxProxy({ p: { keyWord: queryString, }, c: false, }).invoke( basePath + "/admin/vipInfo/findUserByPhotoOrName", function (loj) { var results = []; for (var i = 0; i < loj.getRowCount(); i++) { var result = {}; result.value = loj.getString(i, 'phone') + "-" + loj.getString(i, 'vipName') + "-" + loj.getString(i, 'vipNo'); result.key = loj.getString(i, 'phone'); results.push(result); } cb(results); }); }, handleSelect(row) { this.vipInfoFn(row.key); }, // 请求会员信息 vipInfoFn(key) { let _this = this; if (!key) { key = _this.vipInfo.phone; } // 请求用户信息 $.AjaxProxy({ p: { keyWord: key } }).invoke(basePath + "/admin/vipInfo/showVipInfo", function (loj) { if (loj.getRowCount() == 0) { layer.msg('未查询到客户信息', { icon: 5 }); return false; } let data = loj[0].result.rows[0]; _this.vipInfo = {}; _this.vipInfo = data; if (data.sysOrder != null) { _this.vipInfo.totalMoney = data.sysOrder.zkTotal; _this.vipInfo.totalTimes = data.sysOrder.times; _this.vipInfo.payTime = data.sysOrder.payTime; if (data.sysOrder.shopName) { var shopNames = data.sysOrder.shopName.split(','); _this.vipInfo.shopNames = shopNames; } } _this.tags.tags = data.labels; _this.projTableQueryFn(); _this.serviceOrderTableQueryFn(); _this.orderTableDataQueryFn(); _this.skinCheckTableDataQueryFn(); _this.refreshTable(); }); }, addLabelFn(key) { let _this = this; // 请求用户信息 $.AjaxProxy({ p: { vipId: _this.vipInfo.id, label : key } }).invoke(basePath + "/admin/label/add", function (loj) { let label = loj.getResult().mapInfo.label; _this.tags.tags.push(label); }); }, delLabelFn(id) { $.AjaxProxy({ p: { id: id } }).invoke(basePath + "/admin/label/del", function (loj) { }); }, searchVipInfo() { let _this = this; let inputVisible = _this.tags.inputVisible; console.log(inputVisible) if (!inputVisible) { if (_this.searchValue) { _this.vipInfoFn(_this.searchValue); } } }, /** ############## 项目/套餐Tab页 start #################### **/ projTabTableParams() { let _this = this; let currentPage = _this.projTab.page.currentPage; let pageSize = _this.projTab.page.pageSize return { vipId: _this.vipInfo.id, offset: (currentPage - 1) * pageSize, limit: pageSize, status: _this.projTab.projIsValid, }; }, // 项目tab页，请求项目数据 projTableQueryFn() { let _this = this; $.AjaxProxy({ p:_this.projTabTableParams() }).invoke(basePath + "/admin/projUser/showList", function (loj) { _this.projTab.page.total = loj.getResult().total; _this.projTab.projTableData = loj.getValue("rows"); }); }, // 套餐表格数据请求 taocanTableQueryFn() { let _this = this; $.AjaxProxy({ p:_this.projTabTableParams() }).invoke(basePath + "/admin/taoCanUser/showTc", function (loj) { _this.projTab.page.total = loj.getResult().total; _this.projTab.taocanTableData = loj.getValue("rows"); }); }, // 卡项表格数据请求 cardTableQueryFn() { let _this = this; $.AjaxProxy({ p:_this.projTabTableParams() }).invoke(basePath + "/admin/moneyCardUse/showVipMoneyCardList", function (loj) { _this.projTab.page.total = loj.getResult().total; _this.projTab.cardTableData = loj.getValue("rows"); }); }, cardIsVipFormatter (row, column) { if (column.isVipCar === 'Y') { return "是"; } else { return "否" } }, cardIsOrderFormatter(row, column) { if (column.isOver === 'Y') { return '是'; } else { return "否"; } }, projTabSizeChange(val) { this.projTab.page.pageSize = val; this.refreshTable(); }, projTabCurrentPage(val) { this.projTab.page.currentPage = val; this.refreshTable(); }, // 单选框切换 refreshTable(val) { let _this = this; if (val) { this.projTab.page = { currentPage : 1, pageSize : 10, total : 0 }; } if (_this.projTab.projType === 'proj') { _this.projTableQueryFn(); } if (_this.projTab.projType === 'taocan') { _this.taocanTableQueryFn(); } if (_this.projTab.projType === 'card') { _this.cardTableQueryFn(); } function selectList(phone) { $("#userList").hide(); $("#key").val(phone); selectByKey(); } }, // 下拉框选择 selectChange() { this.refreshTable(); }, tabProjValid(index, row, val) { let _this = this; let projType = _this.projTab.projType; var url; if (projType === 'proj') { url = "/admin/projUser/activeProj"; } if (projType === 'taocan') { url = "/admin/taoCanUser/activeTc"; } if (projType === 'card') { url = "/admin/moneyCardUse/active"; } var params = { id : row.id, }; if (val === 1) { if (_this.projTab.failTime) { params.failTime = moment(_this.projTab.failTime).format("YYYY-MM-DD"); } else { this.$message.error('过期时间不能为空'); return; } } $.AjaxProxy({ p : params }).invoke(basePath + url, function(loj) { var rs = loj.attr("result"); if (rs.info == '已过期') { _this.projTab.failTimeDialog = true; _this.projTab.row = row; } else { layer.alert(loj.getValue("info"), { icon : 1 }); _this.refreshTable(); } if (val === 1) { _this.projTab.failTimeDialog = false; } }); }, tabProjEdit(index, row) { let _this = this; let projType = _this.projTab.projType; var url; if (projType === 'proj') { url = '/admin/projUser/editForm?id='; } if (projType === 'taocan') { url = '/admin/taoCanUser/editForm?id='; } if (projType === 'card') { url = '/admin/moneyCardUse/editForm?id='; } layer.open({ type : 2, title : "编辑", area : MUI.SIZE_M, maxmin : true, content : [ basePath + url + row.id ] }); }, openProjUseFlow(index, row) { layer.open({ type : 2, title : "操作记录", area : MUI.SIZE_M, maxmin : true, content : [ basePath + "/admin/redirect/hive/beautySalon/projUseFlow-list?projUseId=" + row.id ] }); }, openMoneyCardUseFlow(index, row) { layer.open({ type : 2, title : "充值卡变更记录", area : MUI.SIZE_M, maxmin : true, content : [ basePath + "/admin/redirect/hive/vip/moneyCardUseFlow-list?vipId=" + row.vipId ] }); }, tabProjInvalid(index, row) { let _this = this; let projType = _this.projTab.projType; var url; if (projType === 'proj') { url = '/admin/projUser/invalidProj'; } if (projType === 'taocan') { url = '/admin/taoCanUser/invalidTc'; } if (projType === 'card') { url = '/admin/moneyCardUse/invalid'; } _this.projTabQuery(row.id, url); }, tabProjCold(index, row) { let _this = this; let projType = _this.projTab.projType; var url; if (projType === 'proj') { url = '/admin/projUser/freezeProj'; } if (projType === 'taocan') { url = '/admin/taoCanUser/freezeTc'; } if (projType === 'card') { url = '/admin/moneyCardUse/freeze'; } _this.projTabQuery(row.id, url); }, projTabQuery(id, url) { let _this = this; $.AjaxProxy({ p : { id : id } }).invoke(basePath + url, function(loj) { layer.alert(loj.getValue("info"), { icon : 1 }); _this.refreshTable(); }); }, updateFailTimeFn() { this.tabProjValid(1, this.projTab.row, 1); }, /** ############## 项目/套餐Tab页 end #################### **/ /********* 服务单tab start ***********/ serviceOrderQuery() { this.serviceOrderTableQueryFn() }, serviceOrderTableQueryFn() { let _this = this; let serviceOrderTab = _this.serviceOrderTab; let page = serviceOrderTab.page; var params = {}; if (!_this.vipInfo.id) { return; } params.limit = page.pageSize; params.offset = (page.currentPage - 1) * page.pageSize; params.state = serviceOrderTab.state; params.vipId = _this.vipInfo.id; if (serviceOrderTab.selectTime) { params.beginTime = moment(serviceOrderTab.selectTime[0]).format("YYYY-MM-DD HH:mm"); params.closureTime = moment(serviceOrderTab.selectTime[1]).format("YYYY-MM-DD HH:mm"); } $.AjaxProxy({ p:params }).invoke(basePath + "/admin/projService/showList", function (loj) { serviceOrderTab.page.total = loj.getResult().total; serviceOrderTab.tableData = loj.getValue("rows"); }); }, serviceOrderSizeChange(val) { this.serviceOrderTab.page.pageSize = val; this.serviceOrderTableQueryFn() }, serviceOrderCurrentChange(val) { this.serviceOrderTab.page.currentPage = val; this.serviceOrderTableQueryFn() }, // 查看 lookServiceOrder(index, row) { selectFwz(row.id); }, // 排班 paiban(index, row) { openPb(row.id); }, // 派单 giveServiceOrder(index, row) { MTools.handleItem(basePath + "/admin/projService/paidan?id=" + row.id, "确定派单吗？", this.serviceOrderQuery) }, // 修改 modifyServiceOrder(index, row) { updatePd(row.id); }, // 配料 peiliao(index, row) { layer.full(layer.open({ type: 2, title: "开始配料", maxmin: true, area: [MUI.SIZE_L, '450px'], content: [basePath + '/admin/projService/startpl?id=' + row.id] })); }, // 划扣 hkService(index, row) { openHkServcie(row.id); }, // 取消 cancelServiceOrder(index, row) { MTools.handleItem(basePath + "/admin/projService/cancelOrder?id=" + row.row, "确定取消订单吗？", this.serviceOrderQuery); }, // 修改时间 modifyTime(index, row) { layer.open({ type: 2, title: "修改订单时间", maxmin: true, area: [MUI.SIZE_L, '500px'], content: [basePath + '/admin/projService/toServiceOrderUpdateTime?id=' + row.id] }); }, /********* 服务单tab end ***********/ /********* 订单Tab start ***********/ orderQuery() { this.orderTableDataQueryFn(); }, orderTableDataQueryFn() { let _this = this; let orderTab = _this.orderTab; let page = orderTab.page; var params = {}; if (!_this.vipInfo.id) { return; } params.limit = page.pageSize; params.offset = (page.currentPage - 1) * page.pageSize; params.statu = orderTab.state; params.vipId = _this.vipInfo.id; if (orderTab.selectTime) { params.beginTimeVo = moment(orderTab.selectTime[0]).format("YYYY-MM-DD HH:mm"); params.endTimeVo = moment(orderTab.selectTime[1]).format("YYYY-MM-DD HH:mm"); } $.AjaxProxy({ p:params }).invoke(basePath + "/admin/order/showList", function (loj) { orderTab.page.total = loj.getResult().total; orderTab.orderTableData = loj.getValue("rows"); }); }, orderSizeChange(val) { this.orderTab.page.pageSize = val; this.orderTableDataQueryFn(); }, orderCurrentChange(val) { this.orderTab.page.currentPage = val; this.orderTableDataQueryFn(); }, lookOrderInfo(index, row) { layer.full(layer.open({ type : 2, title : "订单详情", maxmin : true, area : [ MUI.SIZE_L, '500px' ], content : [ basePath + '/admin/order/orderItem?id=' + row.id ] })); }, bjMoney(index, row) { layer.full(layer.open({ type : 2, title : "补交", area : [ MUI.SIZE_L, '400px' ], maxmin : true, content : [ basePath+'/admin/moneyCardUse/toBj?id=' + row.id] })); }, skMoney(index, row) { layer.full(layer.open({ type : 2, title : "收款", area : [ MUI.SIZE_L, '400px' ], maxmin : true, content : [ basePath+'/admin/redirect/hive/beautySalon/order-form?id=' + row.id] })); }, updateTime(index, row) { layer.open({ type : 2, title : "修改订单时间", maxmin : true, area : [ MUI.SIZE_L, '500px' ], content : [ basePath + '/admin/order/toUpdateTime?id=' + row.id ] }); }, /********* 订单Tab end ***********/ /************** 皮肤检测tab start **************/ skinCheckQuery() { this.skinCheckTableDataQueryFn(); }, skinCheckTableDataQueryFn() { let _this = this; let skinTab = _this.skinTab; let page = skinTab.page; var params = {}; if (!_this.vipInfo.id) { return; } params.limit = page.pageSize; params.offset = (page.currentPage - 1) * page.pageSize; params.userId = _this.vipInfo.id; if (skinTab.selectTime) { params.beginTime = moment(skinTab.selectTime[0]).format("YYYY-MM-DD"); params.endTime = moment(skinTab.selectTime[1]).format("YYYY-MM-DD"); } $.AjaxProxy({ p:params }).invoke(basePath + "/admin/sysSkinCheckRecord/showList", function (loj) { skinTab.page.total = loj.getResult().total; skinTab.skinTableDate = loj.getValue("rows"); }); }, skinCheckSizeChange(val) { this.skinTab.page.pageSize = val; this.skinCheckTableDataQueryFn() }, skinCheckCurrentChange(val) { this.skinTab.page.currentPage = val; this.skinCheckTableDataQueryFn() }, addSkinCheck() { let _this = this; if (!this.vipInfo.id) { this.$message.error('请选择用户'); return; } layer.full(layer.open({ type : 2, title : "新增皮肤检测", area : [ MUI.SIZE_L, '400px' ], maxmin : true, content : [ basePath+'/admin/redirect/hive/vip/sysSkinCheckRecord-form?vipId=' + _this.vipInfo.id] })); }, delSkinCheck(index, row) { let _this = this; $.AjaxProxy().invoke(basePath + "/admin/sysSkinCheckRecord/del?keys=" + row.id, function (loj) { _this.skinCheckQuery(); }); }, editSkinCheck(index, row) { let _this = this; layer.full(layer.open({ type : 2, title : "编辑皮肤检测", area : [ MUI.SIZE_L, '400px' ], maxmin : true, content : [ basePath+'/admin/redirect/hive/vip/sysSkinCheckRecord-form?vipId='+ _this.vipInfo.id +'&id=' + row.id] })); }, /************** 皮肤检测tab end **************/ // tab标签切换 tabHandleClick(tab, event) { let _this = this; if (tab.name === "serviceOrder") { if (_this.serviceOrderTab.tableData.length <= 0) { this.serviceOrderTableQueryFn(); } } if (tab.name === "order") { if (_this.orderTab.orderTableData.length <= 0) { this.orderTableDataQueryFn(); } } if (tab.name === "skinCheck") { if (_this.skinTab.skinTableDate.length <= 0) { this.skinCheckTableDataQueryFn(); } } }, /********** 标签代码 start ************/ handleClose(tag) { this.tags.tags.splice(this.tags.tags.indexOf(tag), 1); this.delLabelFn(tag.id); }, showInput() { if(!this.vipInfo.id) { this.$message.error('请选择用户'); return; } this.tags.inputVisible = true; this.$nextTick(_ => { this.$refs.saveTagInput.$refs.input.focus(); }); }, handleInputConfirm() { let inputValue = this.tags.inputValue; if (inputValue) { this.addLabelFn(inputValue); } this.tags.inputVisible = false; this.tags.inputValue = ''; }, /********** 标签代码 end ************/ /********** 顶部按钮 start **********/ // 充值 recharge() { if (!this.vipInfo.id) { this.$message.error('请选择用户'); return; } vipId = this.vipInfo.id; openCz(); }, // 开服务单 addServiceOrder() { if (!this.vipInfo.id) { this.$message.error('请选择用户'); return; } vipId = this.vipInfo.id; openAddService(); }, // 开订单 addOrder() { if (!this.vipInfo.id) { this.$message.error('请选择用户'); return; } vipId = this.vipInfo.id; openAddOrder(); }, // 退款 returnMoney() { if (!this.vipInfo.id) { this.$message.error('请选择用户'); return; } vipId = this.vipInfo.id; toRefundOrder(); }, /********** 顶部按钮 start **********/ dateFormat(row, column) { return moment(column.yyTime).format("YYYY-MM-DD HH:mm"); }, oderTimeFormat(row, column) { return moment(column.orderTime).format("YYYY-MM-DD HH:mm:ss"); }, } }); </script> </body> </html>
