elementui

<!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="'/'+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="'/'+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="'/'+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.qconst 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.listvm.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"],//按钮idurl: "/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",//mbview_url: "/"}, 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 = falsevm.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 = falsevm.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 ""}},}
});

 

    @Overridepublic 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);}