|  |  |  | 
|---|
|  |  |  | <link th:href="@{/css/styleOne/style.min.css}" rel="stylesheet" type="text/css"/> | 
|---|
|  |  |  | <title></title> | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | .panel-body{ | 
|---|
|  |  |  | .panel-body { | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .buttonPanel{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .buttonPanel { | 
|---|
|  |  |  | background: #ffffff; | 
|---|
|  |  |  | padding: 10px 10px ; | 
|---|
|  |  |  | padding: 10px 10px; | 
|---|
|  |  |  | margin: 0px 0px 10px 0px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .rowPanel{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .rowPanel { | 
|---|
|  |  |  | background: #ffffff; | 
|---|
|  |  |  | padding: 0px 10px ; | 
|---|
|  |  |  | padding: 0px 10px; | 
|---|
|  |  |  | padding-top: 10px; | 
|---|
|  |  |  | margin: 0px 0px 10px 0px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .paginationStyle{ | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .paginationStyle { | 
|---|
|  |  |  | background: #ffffff; | 
|---|
|  |  |  | padding: 10px 10px; | 
|---|
|  |  |  | margin: 0px 0px 10px 0px; | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="panel-body" id="app"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-row class="buttonPanel"> | 
|---|
|  |  |  | <el-button @click="dialogVisible = true" type="primary" >新增</el-button> | 
|---|
|  |  |  | <el-button @click="openForm('add')" type="primary">新增</el-button> | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-row class="rowPanel"  > | 
|---|
|  |  |  | <el-form ref="form" :model="form" inline > | 
|---|
|  |  |  | <el-row class="rowPanel"> | 
|---|
|  |  |  | <el-form ref="form" :model="form" inline> | 
|---|
|  |  |  | <el-form-item label="规则名称" prop="queryKey"> | 
|---|
|  |  |  | <el-input v-model="form.keyword" placeholder="请输入规则名称"></el-input> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-button type="primary" @click="search" >搜索</el-button> | 
|---|
|  |  |  | <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-row class="table-style"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-table id="proj" :data="table.rows"  :height="height" stripe @sort-change="sortChange"> | 
|---|
|  |  |  | <el-table id="proj" :data="table.rows" :height="height" stripe @sort-change="sortChange"> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | prop="name" | 
|---|
|  |  |  | label="规则名称" | 
|---|
|  |  |  | width="180"> | 
|---|
|  |  |  | label="规则名称"> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | prop="updateTime" | 
|---|
|  |  |  | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | prop="createBy" | 
|---|
|  |  |  | label="创建人"> | 
|---|
|  |  |  | label="创建人" | 
|---|
|  |  |  | width="180"> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-table-column label="操作"> | 
|---|
|  |  |  | <template slot-scope="scope"> | 
|---|
|  |  |  | <el-button type="text" @click="openForm('modify', scope.row)" size="small">修改</el-button> | 
|---|
|  |  |  | <el-button type="text" @click="remove(scope.$index, scope.row)" size="small">删除</el-button> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | </el-table> | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  | <el-row class="paginationStyle"  > | 
|---|
|  |  |  | <el-row class="paginationStyle"> | 
|---|
|  |  |  | <el-pagination background | 
|---|
|  |  |  | @size-change="changePageSize" | 
|---|
|  |  |  | @current-change="changeCurrentPage" | 
|---|
|  |  |  | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-dialog | 
|---|
|  |  |  | title="提示" | 
|---|
|  |  |  | :title="title" | 
|---|
|  |  |  | :visible.sync="dialogVisible" | 
|---|
|  |  |  | width="30%" | 
|---|
|  |  |  | width="60%" | 
|---|
|  |  |  | :before-close="handleClose"> | 
|---|
|  |  |  | <span>这是一段信息</span> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-form :model="formData" ref="ruleForm" label-width="100px" class="demo-ruleForm"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-form-item label="规则名称"  > | 
|---|
|  |  |  | <el-input style="width: 200px" v-model="formData.name"></el-input> | 
|---|
|  |  |  | <el-button type="primary" @click="addRuleItem()" size="small">添加规则</el-button> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-form-item label="绩效方案" > | 
|---|
|  |  |  | <el-table | 
|---|
|  |  |  | :data="formData.ruleItemList" | 
|---|
|  |  |  | style="width: 100%"> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | label="业绩类型" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template slot-scope="scope"> | 
|---|
|  |  |  | <el-select v-model="scope.row.achieveType" placeholder="请选择业绩类型"> | 
|---|
|  |  |  | <el-option label="本金消耗" :value="1"></el-option> | 
|---|
|  |  |  | <el-option label="赠送消耗" :value="2"></el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | label="计算方式" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template slot-scope="scope"> | 
|---|
|  |  |  | <el-select v-model="scope.row.calculationType" placeholder="请选择计算方式"> | 
|---|
|  |  |  | <el-option label="固定金额" :value="1"></el-option> | 
|---|
|  |  |  | <el-option label="百分比(%)" :value="2"></el-option> | 
|---|
|  |  |  | </el-select> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | label="区间" | 
|---|
|  |  |  | width="240"> | 
|---|
|  |  |  | <template slot-scope="scope"> | 
|---|
|  |  |  | <el-input style="width: 100px" v-model="scope.row.lower"></el-input> | 
|---|
|  |  |  | - | 
|---|
|  |  |  | <el-input style="width: 100px" v-model="scope.row.upper"></el-input> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column | 
|---|
|  |  |  | label="业绩"> | 
|---|
|  |  |  | <template slot-scope="scope"> | 
|---|
|  |  |  | <el-input v-model="scope.row.achieve"></el-input> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | <el-table-column label="操作"> | 
|---|
|  |  |  | <template slot-scope="scope"> | 
|---|
|  |  |  | <el-button  type="text" @click="removeRuleItem(scope.$index, scope.row)" size="small">删除</el-button> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | </el-table> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | <span slot="footer" class="dialog-footer"> | 
|---|
|  |  |  | <el-button @click="dialogVisible = false">取 消</el-button> | 
|---|
|  |  |  | <el-button type="primary" @click="dialogVisible = false">确 定</el-button> | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | </el-dialog> | 
|---|
|  |  |  | <el-button @click="dialogVisible = false">取 消</el-button> | 
|---|
|  |  |  | <el-button type="primary" @click="submitForm">确 定</el-button> | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | </el-dialog> | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | var vue = new Vue({ | 
|---|
|  |  |  | el: '#app', | 
|---|
|  |  |  | data: { | 
|---|
|  |  |  | table:{ | 
|---|
|  |  |  | rows:[], | 
|---|
|  |  |  | total:0, | 
|---|
|  |  |  | pageSize:10, | 
|---|
|  |  |  | currentPage:1, | 
|---|
|  |  |  | table: { | 
|---|
|  |  |  | rows: [], | 
|---|
|  |  |  | total: 0, | 
|---|
|  |  |  | pageSize: 10, | 
|---|
|  |  |  | currentPage: 1, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | form:{ | 
|---|
|  |  |  | name:null, | 
|---|
|  |  |  | datetimeArr:'', | 
|---|
|  |  |  | payMethod:'', | 
|---|
|  |  |  | flowType:'', | 
|---|
|  |  |  | orderNo:'', | 
|---|
|  |  |  | oprationMan:'', | 
|---|
|  |  |  | queryKey:'', | 
|---|
|  |  |  | order:'', | 
|---|
|  |  |  | sort:'' | 
|---|
|  |  |  | form: { | 
|---|
|  |  |  | queryKey: null, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | height:'calc(100vh - 240px)', | 
|---|
|  |  |  | dialogVisible:false, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | height: 'calc(100vh - 240px)', | 
|---|
|  |  |  | dialogVisible: false, | 
|---|
|  |  |  | title: '', | 
|---|
|  |  |  | formData: { | 
|---|
|  |  |  | name: '', | 
|---|
|  |  |  | ruleItemList: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | achieveType: 1, | 
|---|
|  |  |  | calculationType: 1, | 
|---|
|  |  |  | lower: '', | 
|---|
|  |  |  | upper: '', | 
|---|
|  |  |  | achieve: '', | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | type: '', | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created: function () { | 
|---|
|  |  |  | this.loadData(); | 
|---|
|  |  |  | this.loadData(); | 
|---|
|  |  |  | window.addEventListener("keydown", this.keydown); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | 
|---|
|  |  |  | 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"; | 
|---|
|  |  |  | 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.form.sort = column.prop; | 
|---|
|  |  |  | this.loadData(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | loadData:function(){ | 
|---|
|  |  |  | loadData: function () { | 
|---|
|  |  |  | let _this = this; | 
|---|
|  |  |  | let data=_this.getRequestParam(); | 
|---|
|  |  |  | data.pageSize=_this.table.pageSize; | 
|---|
|  |  |  | data.pageNum=_this.table.currentPage; | 
|---|
|  |  |  | let data = _this.getRequestParam(); | 
|---|
|  |  |  | data.pageSize = _this.table.pageSize; | 
|---|
|  |  |  | data.pageNum = _this.table.currentPage; | 
|---|
|  |  |  | AjaxProxy.requst({ | 
|---|
|  |  |  | app: _this, | 
|---|
|  |  |  | data:data, | 
|---|
|  |  |  | data: data, | 
|---|
|  |  |  | url: basePath + '/admin/achieveRule/selectList', | 
|---|
|  |  |  | callback: function (data) { | 
|---|
|  |  |  | _this.table.rows = data.rows; | 
|---|
|  |  |  | _this.table.total=data.total; | 
|---|
|  |  |  | _this.table.total = data.total; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | getRequestParam(){ | 
|---|
|  |  |  | getRequestParam() { | 
|---|
|  |  |  | let _this = this; | 
|---|
|  |  |  | return   { | 
|---|
|  |  |  | name:_this.form.name, | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | queryKey: _this.form.queryKey, | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | search:function(){ | 
|---|
|  |  |  | this.table.currentPage=1; | 
|---|
|  |  |  | search: function () { | 
|---|
|  |  |  | this.table.currentPage = 1; | 
|---|
|  |  |  | this.loadData(); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | keydown(evt){ | 
|---|
|  |  |  | if(evt.keyCode==13) { | 
|---|
|  |  |  | keydown(evt) { | 
|---|
|  |  |  | if (evt.keyCode == 13) { | 
|---|
|  |  |  | this.search(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | del(index,row){ | 
|---|
|  |  |  | let _this=this; | 
|---|
|  |  |  | remove(index, row) { | 
|---|
|  |  |  | let _this = this; | 
|---|
|  |  |  | this.$confirm('确认删除该规则吗?', '提示', { | 
|---|
|  |  |  | confirmButtonText: '确定', | 
|---|
|  |  |  | cancelButtonText: '取消', | 
|---|
|  |  |  | 
|---|
|  |  |  | }).then(() => { | 
|---|
|  |  |  | AjaxProxy.requst({ | 
|---|
|  |  |  | app: _this, | 
|---|
|  |  |  | url: basePath + "/admin/achieveRule/removeById/"+row.id, | 
|---|
|  |  |  | type: 'GET', | 
|---|
|  |  |  | url: basePath + "/admin/achieveRule/removeById/" + row.id, | 
|---|
|  |  |  | callback: function (data) { | 
|---|
|  |  |  | _this.loadData(); | 
|---|
|  |  |  | _this.$message({ | 
|---|
|  |  |  | type: 'success', | 
|---|
|  |  |  | message: '删除成功!' | 
|---|
|  |  |  | message: data.info, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | _this.loadData(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }).catch(() => { | 
|---|
|  |  |  | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | //导出 | 
|---|
|  |  |  | add(){ | 
|---|
|  |  |  | //开启表单弹窗 | 
|---|
|  |  |  | openForm(type, data) { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | if (type == 'add') { | 
|---|
|  |  |  | this.title = '新增规则'; | 
|---|
|  |  |  | //this.$refs['formName'].resetFields(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | this.title = '修改规则'; | 
|---|
|  |  |  | this.formData = data; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.type = type; | 
|---|
|  |  |  | this.dialogVisible = true; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | //提交表单 | 
|---|
|  |  |  | submitForm() { | 
|---|
|  |  |  | let url = basePath + "/admin/achieveRule/add"; | 
|---|
|  |  |  | if (this.type == 'modify') { | 
|---|
|  |  |  | url = basePath + "/admin/achieveRule/update"; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | let data=this.formData; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if(MTools.isBlank(data.name)){this.$message.error("请输入规则名称");return;} | 
|---|
|  |  |  |  | 
|---|
|  |  |  | if(data.ruleItemList.length<1){ | 
|---|
|  |  |  | this.$message.error("最少需要一个计算规则");;return;} | 
|---|
|  |  |  | let flag=true; | 
|---|
|  |  |  | data.ruleItemList.forEach(item=>{ | 
|---|
|  |  |  | if(MTools.isBlank(item.lower)){ | 
|---|
|  |  |  | this.$message.error("请输入业绩下限");flag=false;} | 
|---|
|  |  |  | else if(MTools.isBlank(item.upper)){ | 
|---|
|  |  |  | this.$message.error("请输入业绩上限");flag=false;} | 
|---|
|  |  |  | else if(MTools.isBlank(item.achieve)){ | 
|---|
|  |  |  | this.$message.error("请输入业绩金额或者比例");flag=false;} | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | if(flag){ | 
|---|
|  |  |  | var _this=this; | 
|---|
|  |  |  | AjaxProxy.requst({ | 
|---|
|  |  |  | app: _this, | 
|---|
|  |  |  | data:data, | 
|---|
|  |  |  | url:url, | 
|---|
|  |  |  | callback: function (data) { | 
|---|
|  |  |  | _this.$message.success(data.info); | 
|---|
|  |  |  | _this.loadData(); | 
|---|
|  |  |  | _this.dialogVisible = false; | 
|---|
|  |  |  | _this.formData={ | 
|---|
|  |  |  | name: '', | 
|---|
|  |  |  | ruleItemList: [ | 
|---|
|  |  |  | { | 
|---|
|  |  |  | achieveType: 1, | 
|---|
|  |  |  | calculationType: 1, | 
|---|
|  |  |  | lower: '', | 
|---|
|  |  |  | upper: '', | 
|---|
|  |  |  | achieve: '', | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ] | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleClose(done) { | 
|---|
|  |  |  | this.$confirm('确认关闭?') | 
|---|
|  |  |  | .then(_ => { | 
|---|
|  |  |  | done(); | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(_ => { | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | addRuleItem(){ | 
|---|
|  |  |  | this.formData.ruleItemList.push( | 
|---|
|  |  |  | { | 
|---|
|  |  |  | achieveType: 1, | 
|---|
|  |  |  | calculationType: 1, | 
|---|
|  |  |  | lower: '', | 
|---|
|  |  |  | upper: '', | 
|---|
|  |  |  | achieve: '', | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | removeRuleItem(index,row){ | 
|---|
|  |  |  | this.formData.ruleItemList.splice(index, 1); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|