| <!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> | 
|         .panel-body{ | 
|             overflow: hidden; | 
|         } | 
|         .buttonPanel{ | 
|             background: #ffffff; | 
|             padding: 10px 10px ; | 
|             margin: 0px 0px 10px 0px; | 
|         } | 
|         .rowPanel{ | 
|             background: #ffffff; | 
|             padding: 0px 10px ; | 
|             padding-top: 10px; | 
|             margin: 0px 0px 10px 0px; | 
|         } | 
|         .paginationStyle{ | 
|             background: #ffffff; | 
|             padding: 10px 10px; | 
|             margin: 0px 0px 10px 0px; | 
|             text-align: right; | 
|         } | 
|     </style> | 
| </head> | 
| <body> | 
| <div class="panel-body" id="app"> | 
|   | 
|     <el-row class="buttonPanel"> | 
|         <el-button @click="exportExcel" type="primary" >导出</el-button> | 
|     </el-row> | 
|   | 
|     <el-row class="rowPanel"  > | 
|         <el-form ref="form" :model="form" inline > | 
|   | 
|             <el-form-item label="操作人" prop="flowType"> | 
|                 <el-select v-model="form.opeUserId" placeholder=""> | 
|                     <el-option | 
|                             v-for="item in userList" | 
|                             :key="item.suId" | 
|                             :label="item.suName" | 
|                             :value="item.suId"> | 
|                     </el-option> | 
|                 </el-select> | 
|             </el-form-item> | 
|             <el-form-item label="操作功能" prop="flowType"> | 
|                 <el-select v-model="form.opeFunction" placeholder=""> | 
|                     <el-option | 
|                             v-for="item in functionList" | 
|                             :key="item.value" | 
|                             :label="item.displayName" | 
|                             :value="item.value"> | 
|                     </el-option> | 
|                 </el-select> | 
|             </el-form-item> | 
|             <el-form-item label="操作按钮" prop="flowType"> | 
|                 <el-select v-model="form.opeBut" placeholder=""> | 
|                     <el-option | 
|                             v-for="item in btnList" | 
|                             :key="item.value" | 
|                             :label="item.displayName" | 
|                             :value="item.value"> | 
|                     </el-option> | 
|                 </el-select> | 
|             </el-form-item> | 
|             <el-form-item label="会员" prop="vipQueryKey"> | 
|                 <el-input v-model="form.vipQueryKey" placeholder="请输入会员姓名/编号/手机"></el-input> | 
|             </el-form-item> | 
|             <el-form-item label="门店" prop="shopId"> | 
|                 <el-select v-model="form.shopId" placeholder="请选择"> | 
|                     <el-option | 
|                             v-for="item in shopList" | 
|                             :key="item.shopShortName" | 
|                             :label="item.shopShortName" | 
|                             :value="item.id"> | 
|                     </el-option> | 
|                 </el-select> | 
|             </el-form-item> | 
|   | 
|             <el-form-item label="订单号" prop="billNo"> | 
|                 <el-input v-model="form.billNo"></el-input> | 
|             </el-form-item> | 
|             <el-form-item label="IP" prop="ip"> | 
|                 <el-input v-model="form.ip"></el-input> | 
|             </el-form-item> | 
|   | 
|             <el-form-item label="备注" prop="note"> | 
|                 <el-input v-model="form.note"></el-input> | 
|             </el-form-item> | 
|   | 
|   | 
|             <el-form-item label="时间" prop="datetimeArr"> | 
|                 <el-date-picker | 
|                         v-model="form.datetimeArr" | 
|                         type="daterange" | 
|                         range-separator="至" format="yyyy-MM-dd HH:mm" | 
|                         start-placeholder="开始日期" | 
|                         end-placeholder="结束日期"> | 
|                 </el-date-picker> | 
|             </el-form-item> | 
|   | 
|   | 
|   | 
|   | 
|   | 
|             <el-button type="primary" @click="search" >搜索</el-button> | 
|             <el-button @click="resetForm('form')">重置</el-button> | 
|         </el-form> | 
|     </el-row> | 
|   | 
|     <el-row class="table-style"  > | 
|   | 
|         <el-table id="proj" :data="table.rows"  :height="height" stripe @sort-change="sortChange"> | 
|             <el-table-column | 
|                     prop="shopName" | 
|                     label="门店" | 
|                     width="180"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="opeUser" | 
|                     label="操作用户" | 
|                     width="240"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="createTime" | 
|                     sortable="custom" | 
|                     label="操作时间" | 
|                     show-overflow-tooltip | 
|                     width="180"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="opeFunctionLabel" | 
|                     label="操作功能"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="opeButLabel" | 
|                     label="操作按钮"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="billNo" | 
|                     label="单据号"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="vipName" | 
|                     label="操作会员"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="note" | 
|                     label="备注"> | 
|             </el-table-column> | 
|             <el-table-column | 
|                     prop="ip" | 
|                     label="IP地址"> | 
|             </el-table-column> | 
|         </el-table> | 
|     </el-row> | 
|     <el-row class="paginationStyle"  > | 
|         <el-pagination background | 
|                        @size-change="changePageSize" | 
|                        @current-change="changeCurrentPage" | 
|                        :current-page="table.currentPage" | 
|                        :page-sizes="[10, 20, 30, 50]" | 
|                        :page-size="table.pageSize" | 
|                        layout="total, sizes, prev, pager, next, jumper" | 
|                        :total="table.total"> | 
|         </el-pagination> | 
|     </el-row> | 
|   | 
| </div> | 
| </body> | 
| <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:src="@{/plugin/moment.min.js}"></script> | 
| <script type="text/javascript" th:inline="javascript"> | 
|   | 
|     var vue = new Vue({ | 
|         el: '#app', | 
|         data: { | 
|             table:{ | 
|                 rows:[], | 
|                 total:0, | 
|                 pageSize:10, | 
|                 currentPage:1, | 
|             }, | 
|             form:{ | 
|                 name:null, | 
|                 datetimeArr:'', | 
|                 payMethod:'', | 
|                 flowType:'', | 
|                 orderNo:'', | 
|                 oprationMan:'', | 
|                 queryKey:'', | 
|                 shopId:'', | 
|             }, | 
|             userList: [], | 
|             height:'calc(100vh - 240px)', | 
|             functionList:[], | 
|             btnList:[], | 
|             shopList:[{id:0,shopShortName:'全部'}], | 
|         }, | 
|         created: function () { | 
|             let _this=this; | 
|             //用户列表 | 
|             AjaxProxy.requst({ | 
|                 app: _this, | 
|                 url: basePath + '/admin/allUser', | 
|                 callback: function (data) { | 
|                     _this.userList = data.rows; | 
|                 } | 
|             }); | 
|             //获取枚举列表 | 
|             AjaxProxy.requst({ | 
|                 app: _this, | 
|                 url: basePath + '/common/data/getEnums', | 
|                 data:{"enumCodes":["operationFunction","operationButton"]}, | 
|                 callback: function (data) { | 
|                     _this.btnList = data.data.operationButton; | 
|                     _this.functionList = data.data.operationFunction; | 
|                     _this.form.opeFunction=_this.functionList[0].value; | 
|                 } | 
|             }); | 
|   | 
|             //加载门店 | 
|             AjaxProxy.requst({ | 
|                 app:_this, | 
|                 url:basePath+"/admin/shopInfo/findAll", | 
|                 callback:function (data) { | 
|                     data.rows.forEach(shop=>{ | 
|                         _this.shopList.push(shop); | 
|                     }); | 
|                 } | 
|   | 
|             }) | 
|   | 
|             this.loadData(); | 
|             window.addEventListener("keydown", this.keydown); | 
|         }, | 
|         methods: { | 
|             changePageSize(val) { | 
|                 this.table.pageSize = val; | 
|                 this.loadData(); | 
|             }, | 
|             changeCurrentPage(val) { | 
|                 this.table.currentPage = val; | 
|                 this.loadData(); | 
|             }, | 
|             resetForm(formName) { | 
|                 this.$refs[formName].resetFields(); | 
|             }, | 
|             sortChange:function (column){ | 
|                 if(column.order){ | 
|                     if(column.order.indexOf("desc")){ | 
|                         this.form.order="desc"; | 
|                     }else{ | 
|                         this.form.order="asc"; | 
|                     } | 
|                     this.form.sort=column.prop; | 
|                     this.loadData(); | 
|                 } | 
|             }, | 
|             loadData:function(){ | 
|                 let _this = this; | 
|                 let data=_this.getRequestParam(); | 
|                 data.pageSize=_this.table.pageSize; | 
|                 data.pageNum=_this.table.currentPagey56u; | 
|                 AjaxProxy.requst({ | 
|                     app: _this, | 
|                     data:data, | 
|                     url: basePath + '/admin/operation/getOperation', | 
|                     callback: function (data) { | 
|                         _this.table.rows = data.rows; | 
|                         _this.table.total=data.total; | 
|                     } | 
|                 }); | 
|             }, | 
|             getRequestParam(){ | 
|                 let _this = this; | 
|                 let data=   { | 
|                     shopId:_this.form.shopId, | 
|                     opeUserId:_this.form.opeUserId, | 
|                     vipQueryKey:_this.form.vipQueryKey, | 
|                     opeFunction:_this.form.opeFunction, | 
|                     opeBut:_this.form.opeBut, | 
|                     billNo:_this.form.billNo, | 
|                     ip:_this.form.ip, | 
|                     note:_this.form.note, | 
|                     startTime:_this.form.datetimeArr?moment(_this.form.datetimeArr[0]).format("YYYY-MM-DD HH:mm"):'', | 
|                     endTime:_this.form.datetimeArr?moment(_this.form.datetimeArr[1]).format("YYYY-MM-DD HH:mm"):'', | 
|                     order:_this.form.order, | 
|                 } | 
|                 console.log(data); | 
|                 return data; | 
|             }, | 
|             search:function(){ | 
|                 this.table.currentPage=1; | 
|                 this.loadData(); | 
|             }, | 
|             keydown(evt){ | 
|                 if(evt.keyCode==13) { | 
|                     this.search(); | 
|                 } | 
|             }, | 
|   | 
|             //导出 | 
|             exportExcel(){ | 
|                 window.location.href=basePath+"/admin/operation/exportExcel?"+MTools.jsonToUrlParam(this.getRequestParam()); | 
|             } | 
|   | 
|         } | 
|     }); | 
|   | 
|   | 
| </script> | 
| </body> | 
| </html> |