elementui-table分頁+增刪改查例項
阿新 • • 發佈：2018-12-07
<!DOCTYPE html> <html> <head> <title>團隊表</title> <#include "/header.html"> <!-- 檔案上傳 --> <link rel="stylesheet" href="${request.contextPath}/statics/plugins/oss/style.css"> <script type="text/javascript" src="${request.contextPath}/statics/plugins/oss/js/plupload.full.min.js"></script> <script type="text/javascript" src="${request.contextPath}/statics/plugins/oss/ziyun_library.js"></script> <!-- 圖片預覽 --> <link rel="stylesheet" href="${request.contextPath}/statics/plugins/viewer/viewer.min.css"> <script src="${request.contextPath}/statics/plugins/viewer/viewer.min.js"></script> </head> <body> <div id="app"> <div> <el-form :inline="true" v-model="q"> <el-button type="primary" size="medium" icon="el-icon-search" @click="search"></el-button> <el-button type="primary" size="medium" @click="rest">重置</el-button> <el-form-item> <el-input v-model="q.teamName" placeholder="團隊名"></el-input> </el-form-item> <el-form-item> <el-input v-model="q.mobile" placeholder="手機號碼"></el-input> </el-form-item> <el-select v-model="q.sourceType" placeholder="分銷型別"> <el-option label="一企推" value="together"></el-option> <el-option label="代理點二級分銷" value="agent"></el-option> <el-option label="微信朋友圈推廣" value="wechat"></el-option> </el-select> <el-select v-model="q.auditStatus" placeholder="稽核狀態"> <el-option label="待稽核" value=0></el-option> <el-option label="稽核通過" value=1></el-option> <el-option label="已拒絕" value=2></el-option> </el-select> </el-form> <el-table ref="testTable" :data="tableData" style="width:100%" border highlight-current-row class="tb-edit" :default-sort="{prop: 'updatetime', order: 'descending'}" @selection-change="handleSelectionChange" @row-click="handleclick"> <el-table-column prop="teamId" label="團隊ID" sortable show-overflow-tooltip></el-table-column> <el-table-column prop="teamName" label="團隊名" sortable show-overflow-tooltip></el-table-column> <el-table-column prop="userId" label="團長ID" sortable show-overflow-tooltip></el-table-column> <el-table-column prop="mobile" label="手機號碼" sortable show-overflow-tooltip></el-table-column> <el-table-column prop="createtime" label="建立時間" sortable show-overflow-tooltip></el-table-column> <el-table-column prop="remark" label="團隊備註" sortable show-overflow-tooltip></el-table-column> <el-table-column prop="sourceType" label="團隊分銷型別" sortable show-overflow-tooltip :formatter="sourceTypeFormatter"></el-table-column> <el-table-column prop="updatetime" label="更新時間" sortable show-overflow-tooltip></el-table-column> <el-table-column prop="auditStatus" label="稽核狀態" sortable show-overflow-tooltip :formatter="auditStatusFormatter"></el-table-column> <el-table-column label="操作"> <template scope="scope"> <!--<el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>--> <el-button size="small" type="primary" @click="handleAudit(scope.$index, scope.row)">稽核</el-button> </template> </el-table-column> <el-table-column v-if="false" prop="businessUrl" label="營業執照url" sortable show-overflow-tooltip></el-table-column> <el-table-column v-if="false" prop="idCardUrls" label="身份證url" sortable show-overflow-tooltip></el-table-column> <el-table-column v-if="false" prop="refuseReason" label="拒絕理由" sortable show-overflow-tooltip></el-table-column> </el-table> <div align="center"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 50, 80, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount" background> </el-pagination> </div> </div> <el-dialog title="團隊稽核" :visible.sync="dialogFormVisible" width="60%"> <el-form :inline="true"> <el-row> <el-col :span="8"> <el-form-item label="團隊名"> <el-input v-model="curRowData.teamName" readonly></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="手機號碼"> <el-input v-model="curRowData.mobile" readonly></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="團隊分銷型別"> <el-input v-if="curRowData.sourceType=='together'" value="一企推" readonly></el-input> <el-input v-if="curRowData.sourceType=='agent'" value="代理點二級分銷" readonly></el-input> <el-input v-if="curRowData.sourceType=='wechat'" value="微信朋友圈推廣" readonly></el-input> <el-input v-if="curRowData.sourceType=='second'" value="二級分銷(不審)" readonly></el-input> </el-form-item> </el-col> <div id="view"> <el-col :span="8"> <el-form-item label="營業執照"> <img :src="'https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/'+curRowData.businessUrl" style="width: 200px"> <!--<br><a class="btn btn-info btn-sm" id="uploadImage1">上傳圖片</a>--> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="身份證圖片"> <img :src="'https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/'+idCardImgs[0]" style="width: 200px"> <!--<a class="btn btn-info btn-sm" id="uploadImage2">上傳圖片</a>--> </el-form-item> </el-col> <el-col :span="8"> <el-form-item label="身份證圖片"> <img :src="'https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/'+idCardImgs[1]" style="width: 200px"> <!--<a class="btn btn-info btn-sm" id="uploadImage2">上傳圖片</a>--> </el-form-item> </el-col> </div> </el-row> <el-row> <el-col :span="8"> <el-form-item label="拒絕理由"> <el-input v-model="curRowData.refuseReason" style="width: 260%"></el-input> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" size="medium" @click="pass" :disabled="curRowData.auditStatus!=0">拒絕</el-button> <el-button type="primary" size="medium" @click="audit" :disabled="curRowData.auditStatus!=0">通過</el-button> </div> </el-dialog> </div> <script src="${request.contextPath}/statics/js/modules/userTeam/userteama.js?_${.now?long}"></script> <style> /* 設定當前選中行的背景顏色 */ .el-table__body tr.current-row>td { background: #c9eff5 !important; } /* 設定表主體的高度 */ .el-table__body td,.el-table__body th{ padding:3px; } /* 設定表頭的高度 */ .el-table__header td,.el-table__header th{ padding:6px 0px; } </style> </body> </html>
const vm = new Vue({ el: '#app', data: { tableData: [],//表格當前頁資料 criteria: '', select: '',//下拉選單選項 pagesize: 20,//預設每頁資料量 curRowData: {}, //當前選擇行資料 currentPage: 1,//當前頁碼 start: 1, //查詢的頁碼 totalCount: '',//預設資料總數 multipleSelection: [],//多選陣列 dialogFormVisible:false,//編輯框 q:{//搜尋條件 teamName:'', mobile:'', sourceType:'', auditStatus:'' }, idCardImgs:[],//身份證正反面url }, created () { Vue.nextTick(()=>{ //載入資料 vm.loadData(vm.currentPage, vm.pagesize); }); }, methods: { //從後臺獲取資料 loadData: function (page, limit) { let {teamName,mobile,sourceType,auditStatus} = vm.q const params = {page,limit,teamName,mobile,sourceType,auditStatus} $.ajax({ type: "POST", url: baseURL + "userTeam/userteam/list", contentType: "application/json", data: JSON.stringify(params), success: function(r){ if(r.code === 0){ vm.tableData = r.page.list vm.totalCount = r.page.totalCount }else{ alert(r.msg); } } }); }, //多選響應 handleSelectionChange: function(val) { vm.multipleSelection = val; console.log(vm.multipleSelection) }, //點選行響應 handleclick: function(row, event, column){ vm.curRowData = JSON.parse(JSON.stringify(row));//深克隆 }, //彈出編輯框 handleEdit: function(index, row) { vm.curRowData = JSON.parse(JSON.stringify(row));//深克隆 vm.dialogFormVisible = true }, //提交編輯 edit() { $.ajax({ type: "POST", url: baseURL + "userTeam/userteam/update", contentType: "application/json", data: JSON.stringify(vm.curRowData), success: function(r){ if(r.code === 0){ vm.loadData(vm.currentPage, vm.pagesize);//重新整理後頁面在當前頁 //vm.loadData(vm.currentPage=1, vm.pagesize);重新整理後頁面回到首頁 vm.dialogFormVisible = false }else{ alert(r.msg); } } }); }, //彈出稽核框 handleAudit: function(index, row) { vm.curRowData = JSON.parse(JSON.stringify(row));//深克隆 if (vm.curRowData.idCardUrls) { vm.idCardImgs=vm.curRowData.idCardUrls.split(',') } vm.dialogFormVisible = true; Vue.nextTick(function () { // 圖片預覽初始化 $('#view').viewer(); /* oss上傳 */ $.files_up_oss({ id: ["uploadImage1"],//按鈕id url: "/sys/oss/getSignature", dir: "config/couponucenter/", file_type: "jpg,png,gif,psd,ai,cdr,eps,ppt,word,excel,pdf,tiff,rar,zip,7z,gif,AVI,WMV,RM,RMVB,MPEG1,MPEG2,MPEG4,3GP,ASF,SWF,VOB,DAT,MOV,M4V,FLV,F4V,MKV,TIF", size: "100mb",//mb view_url: "https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/" }, function (index_number, json) { if (json.Status == 'OK') { Vue.set(vm.curRowData, 'businessUrl', json.filename); } }) }); }, //稽核通過 audit() { $.ajax({ type: "POST", url: baseURL + "userTeam/userteam/audit", contentType: "application/json", data: JSON.stringify(vm.curRowData), success: function(r){ if(r.code === 0){ alert('稽核通過') vm.dialogFormVisible = false vm.loadData(vm.currentPage=1, vm.pagesize);//重新整理後頁面回到首頁 }else{ alert(r.msg); } } }); }, //稽核拒絕 pass() { $.ajax({ type: "POST", url: baseURL + "userTeam/userteam/pass", contentType: "application/json", data: JSON.stringify(vm.curRowData), success: function(r){ if(r.code === 0){ alert('拒絕成功') vm.dialogFormVisible = false vm.loadData(vm.currentPage=1, vm.pagesize);//重新整理後頁面回到首頁 }else{ alert(r.msg); } } }); }, //單行刪除 handleDelete: function(index, row) { $.ajax({ type: "POST", url: baseURL + "userTeam/userteam/delete", contentType: "application/json", data: JSON.stringify(row), success: function(r){ if(r.code === 0){ alert('刪除成功') vm.loadData(vm.currentPage, vm.pagesize);//重新整理後頁面在當前頁 //vm.loadData(vm.currentPage=1, vm.pagesize);重新整理後頁面回到首頁 }else{ alert(r.msg); } } }); }, //搜尋 search: function(){ vm.loadData(vm.currentPage, vm.pagesize); }, //重置 rest() { vm.q.teamName='' vm.q.mobile='' vm.q.sourceType='' vm.q.auditStatus='' vm.loadData(vm.currentPage, vm.pagesize); }, add() { }, //每頁顯示資料量變更 handleSizeChange: function(val) { vm.pagesize = val; vm.loadData(vm.currentPage, vm.pagesize); }, //頁碼變更 handleCurrentChange: function(val) { vm.currentPage = val; vm.loadData(vm.currentPage, vm.pagesize); }, //together：一企推，agent：代理點二級分銷，wechat：微信朋友圈推廣, second:二級分銷(不審) sourceTypeFormatter(val) { if(val.sourceType == 'together') {return "一企推"} else if (val.sourceType == 'agent') {return "代理點二級分銷"} else if (val.sourceType == 'wechat') {return "微信朋友圈推廣"} else if (val.sourceType == 'second') {return "二級分銷(不審)"} else {return ""} }, //稽核狀態 0:待稽核 1:稽核通過 2:已拒絕 auditStatusFormatter(val) { if(val.auditStatus == 0) {return "待稽核"} else if (val.auditStatus == 1) {return "稽核通過"} else if (val.auditStatus == 2) {return "已拒絕"} else {return ""} }, } });
@Override public PageUtils list(Map<String, Object> params) { Page<UserTeamVo> page = new Page<>(); page.setCurrent(Integer.valueOf(params.get("page").toString())); page.setSize(Integer.valueOf(params.get("limit").toString())); List<UserTeamVo> list = this.baseMapper.list(page, params); page.setRecords(list); return new PageUtils(page); }