elementui-table分页+增删改查实例

柔光的暖阳◎ 2022-04-13 08:27 548阅读 0赞 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>团队表</title>
  5.     <#include "/header.html">
  6.     <!-- 文件上传 -->
  7.     <link rel="stylesheet" href="${request.contextPath}/statics/plugins/oss/style.css">
  8.     <script type="text/javascript" src="${request.contextPath}/statics/plugins/oss/js/plupload.full.min.js"></script>
  9.     <script type="text/javascript" src="${request.contextPath}/statics/plugins/oss/ziyun_library.js"></script>
  10.     <!-- 图片预览 -->
  11.     <link rel="stylesheet" href="${request.contextPath}/statics/plugins/viewer/viewer.min.css">
  12.     <script src="${request.contextPath}/statics/plugins/viewer/viewer.min.js"></script>
  13. </head>
  14. <body>
  15. <div id="app">
  16.     <div>
  17.         <el-form :inline="true" v-model="q">
  18.             <el-button type="primary" size="medium" icon="el-icon-search" @click="search"></el-button>
  19.             <el-button type="primary" size="medium" @click="rest">重置</el-button>
  20.             <el-form-item>
  21.                 <el-input v-model="q.teamName" placeholder="团队名"></el-input>
  22.             </el-form-item>
  23.             <el-form-item>
  24.                 <el-input v-model="q.mobile" placeholder="手机号码"></el-input>
  25.             </el-form-item>
  26.             <el-select v-model="q.sourceType" placeholder="分销类型">
  27.                 <el-option label="一企推" value="together"></el-option>
  28.                 <el-option label="代理点二级分销" value="agent"></el-option>
  29.                 <el-option label="微信朋友圈推广" value="wechat"></el-option>
  30.             </el-select>
  31.             <el-select v-model="q.auditStatus" placeholder="审核状态">
  32.                 <el-option label="待审核" value=0></el-option>
  33.                 <el-option label="审核通过" value=1></el-option>
  34.                 <el-option label="已拒绝" value=2></el-option>
  35.             </el-select>
  36.         </el-form>
  38.         <el-table ref="testTable" :data="tableData" style="width:100%" border highlight-current-row class="tb-edit"
  39.                   :default-sort="{prop: 'updatetime', order: 'descending'}" @selection-change="handleSelectionChange" @row-click="handleclick">
  40.             <el-table-column prop="teamId" label="团队ID" sortable show-overflow-tooltip></el-table-column>
  41.             <el-table-column prop="teamName" label="团队名" sortable show-overflow-tooltip></el-table-column>
  42.             <el-table-column prop="userId" label="团长ID" sortable show-overflow-tooltip></el-table-column>
  43.             <el-table-column prop="mobile" label="手机号码" sortable show-overflow-tooltip></el-table-column>
  44.             <el-table-column prop="createtime" label="创建时间" sortable show-overflow-tooltip></el-table-column>
  45.             <el-table-column prop="remark" label="团队备注" sortable show-overflow-tooltip></el-table-column>
  46.             <el-table-column prop="sourceType" label="团队分销类型" sortable show-overflow-tooltip :formatter="sourceTypeFormatter"></el-table-column>
  47.             <el-table-column prop="updatetime" label="更新时间" sortable show-overflow-tooltip></el-table-column>
  48.             <el-table-column prop="auditStatus" label="审核状态" sortable show-overflow-tooltip :formatter="auditStatusFormatter"></el-table-column>
  49.             <el-table-column label="操作">
  50.                 <template scope="scope">
  51.                     <!--<el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
  52.                     <el-button size="small" type="primary" @click="handleAudit(scope.$index, scope.row)">审核</el-button>
  53.                 </template>
  54.             </el-table-column>
  55.             <el-table-column v-if="false" prop="businessUrl" label="营业执照url" sortable show-overflow-tooltip></el-table-column>
  56.             <el-table-column v-if="false" prop="idCardUrls" label="身份证url" sortable show-overflow-tooltip></el-table-column>
  57.             <el-table-column v-if="false" prop="refuseReason" label="拒绝理由" sortable show-overflow-tooltip></el-table-column>
  58.         </el-table>
  60.         <div align="center">
  61.             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
  62.                            :page-sizes="[20, 50, 80, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
  63.                            background>
  64.             </el-pagination>
  65.         </div>
  66.     </div>
  68.     <el-dialog title="团队审核" :visible.sync="dialogFormVisible" width="60%">
  69.         <el-form :inline="true">
  70.             <el-row>
  71.                 <el-col :span="8">
  72.                     <el-form-item label="团队名">
  73.                         <el-input v-model="curRowData.teamName" readonly></el-input>
  74.                     </el-form-item>
  75.                 </el-col>
  76.                 <el-col :span="8">
  77.                     <el-form-item label="手机号码">
  78.                         <el-input v-model="curRowData.mobile" readonly></el-input>
  79.                     </el-form-item>
  80.                 </el-col>
  81.                 <el-col :span="8">
  82.                     <el-form-item label="团队分销类型">
  83.                         <el-input v-if="curRowData.sourceType=='together'" value="一企推" readonly></el-input>
  84.                         <el-input v-if="curRowData.sourceType=='agent'" value="代理点二级分销" readonly></el-input>
  85.                         <el-input v-if="curRowData.sourceType=='wechat'" value="微信朋友圈推广" readonly></el-input>
  86.                         <el-input v-if="curRowData.sourceType=='second'" value="二级分销(不审)" readonly></el-input>
  87.                     </el-form-item>
  88.                 </el-col>
  89.                 <div id="view">
  90.                 <el-col :span="8">
  91.                     <el-form-item label="营业执照">
  92.                             <img :src="'https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/'+curRowData.businessUrl" style="width: 200px">
  93.                         <!--<br><a class="btn btn-info btn-sm" id="uploadImage1">上传图片</a>-->
  94.                     </el-form-item>
  95.                 </el-col>
  96.                 <el-col :span="8">
  97.                     <el-form-item label="身份证图片">
  98.                             <img :src="'https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/'+idCardImgs[0]" style="width: 200px">
  99.                             <!--<a class="btn btn-info btn-sm" id="uploadImage2">上传图片</a>-->
  100.                     </el-form-item>
  101.                 </el-col>
  102.                 <el-col :span="8">
  103.                     <el-form-item label="身份证图片">
  104.                             <img :src="'https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/'+idCardImgs[1]" style="width: 200px">
  105.                             <!--<a class="btn btn-info btn-sm" id="uploadImage2">上传图片</a>-->
  106.                     </el-form-item>
  107.                 </el-col>
  108.                 </div>
  109.             </el-row>
  110.             <el-row>
  111.                 <el-col :span="8">
  112.                     <el-form-item label="拒绝理由">
  113.                         <el-input v-model="curRowData.refuseReason" style="width: 260%"></el-input>
  114.                     </el-form-item>
  115.                 </el-col>
  116.             </el-row>
  117.         </el-form>
  118.         <div slot="footer" class="dialog-footer">
  119.             <el-button type="primary" size="medium" @click="pass" :disabled="curRowData.auditStatus!=0">拒绝</el-button>
  120.             <el-button type="primary" size="medium" @click="audit" :disabled="curRowData.auditStatus!=0">通过</el-button>
  121.         </div>
  122.     </el-dialog>
  123. </div>
  125. <script src="${request.contextPath}/statics/js/modules/userTeam/userteama.js?_${.now?long}"></script>
  126. <style>
  127.     /* 设置当前选中行的背景颜色 */
  128.     .el-table__body tr.current-row>td {
  129.         background: #c9eff5 !important;
  130.     }
  131.     /* 设置表主体的高度 */
  132.     .el-table__body td,.el-table__body th{
  133.         padding:3px;
  134.     }
  135.     /* 设置表头的高度 */
  136.     .el-table__header td,.el-table__header th{
  137.         padding:6px 0px;
  138.     }
  139. </style>
  140. </body>
  141. </html>
  145. const vm = new Vue({
  146.     el: '#app',
  147.     data: {
  148.         tableData: [],//表格当前页数据
  149.         criteria: '',
  150.         select: '',//下拉菜单选项
  151.         pagesize: 20,//默认每页数据量
  152.         curRowData: {}, //当前选择行数据
  153.         currentPage: 1,//当前页码
  154.         start: 1, //查询的页码
  155.         totalCount: '',//默认数据总数
  156.         multipleSelection: [],//多选数组
  157.         dialogFormVisible:false,//编辑框
  158.         q:{//搜索条件
  159.             teamName:'',
  160.             mobile:'',
  161.             sourceType:'',
  162.             auditStatus:''
  163.         },
  164.         idCardImgs:[],//身份证正反面url
  165.     },
  166.     created () {
  167.         Vue.nextTick(()=>{
  168.             //载入数据
  169.             vm.loadData(vm.currentPage, vm.pagesize);
  170.         });
  171.     },
  172.     methods: {
  173.         //从后台获取数据
  174.         loadData: function (page, limit) {
  175.             let {teamName,mobile,sourceType,auditStatus} = vm.q
  176.             const params = {page,limit,teamName,mobile,sourceType,auditStatus}
  178.             $.ajax({
  179.                 type: "POST",
  180.                 url: baseURL + "userTeam/userteam/list",
  181.                 contentType: "application/json",
  182.                 data: JSON.stringify(params),
  183.                 success: function(r){
  184.                     if(r.code === 0){
  185.                         vm.tableData = r.page.list
  186.                         vm.totalCount = r.page.totalCount
  187.                     }else{
  188.                         alert(r.msg);
  189.                     }
  190.                 }
  191.             });
  192.         },
  193.         //多选响应
  194.         handleSelectionChange: function(val) {
  195.             vm.multipleSelection = val;
  196.             console.log(vm.multipleSelection)
  197.         },
  198.         //点击行响应
  199.         handleclick: function(row, event, column){
  200.             vm.curRowData = JSON.parse(JSON.stringify(row));//深克隆
  201.         },
  202.         //弹出编辑框
  203.         handleEdit: function(index, row) {
  204.             vm.curRowData = JSON.parse(JSON.stringify(row));//深克隆
  205.             vm.dialogFormVisible = true
  206.         },
  207.         //提交编辑
  208.         edit() {
  209.             $.ajax({
  210.                 type: "POST",
  211.                 url: baseURL + "userTeam/userteam/update",
  212.                 contentType: "application/json",
  213.                 data: JSON.stringify(vm.curRowData),
  214.                 success: function(r){
  215.                     if(r.code === 0){
  216.                         vm.loadData(vm.currentPage, vm.pagesize);//刷新后页面在当前页
  217.                         //vm.loadData(vm.currentPage=1, vm.pagesize);刷新后页面回到首页
  218.                         vm.dialogFormVisible = false
  219.                     }else{
  220.                         alert(r.msg);
  221.                     }
  222.                 }
  223.             });
  224.         },
  225.         //弹出审核框
  226.         handleAudit: function(index, row) {
  227.             vm.curRowData = JSON.parse(JSON.stringify(row));//深克隆
  228.             if (vm.curRowData.idCardUrls) {
  229.               vm.idCardImgs=vm.curRowData.idCardUrls.split(',')
  230.             }
  231.             vm.dialogFormVisible = true;
  232.             Vue.nextTick(function () {
  233.                 // 图片预览初始化
  234.                 $('#view').viewer();
  235.                 /* oss上传 */
  236.                 $.files_up_oss({
  237.                     id: ["uploadImage1"],//按钮id
  238.                     url: "/sys/oss/getSignature",
  239.                     dir: "config/couponucenter/",
  240.                     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",
  241.                     size: "100mb",//mb
  242.                     view_url: "https://ziyunoss.oss-cn-hangzhou.aliyuncs.com/"
  243.                 }, function (index_number, json) {
  244.                     if (json.Status == 'OK') {
  245.                         Vue.set(vm.curRowData, 'businessUrl', json.filename);
  246.                     }
  247.                 })
  248.             });
  249.         },
  250.         //审核通过
  251.         audit() {
  252.             $.ajax({
  253.                 type: "POST",
  254.                 url: baseURL + "userTeam/userteam/audit",
  255.                 contentType: "application/json",
  256.                 data: JSON.stringify(vm.curRowData),
  257.                 success: function(r){
  258.                     if(r.code === 0){
  259.                         alert('审核通过')
  260.                         vm.dialogFormVisible = false
  261.                         vm.loadData(vm.currentPage=1, vm.pagesize);//刷新后页面回到首页
  262.                     }else{
  263.                         alert(r.msg);
  264.                     }
  265.                 }
  266.             });
  267.         },
  268.         //审核拒绝
  269.         pass() {
  270.             $.ajax({
  271.                 type: "POST",
  272.                 url: baseURL + "userTeam/userteam/pass",
  273.                 contentType: "application/json",
  274.                 data: JSON.stringify(vm.curRowData),
  275.                 success: function(r){
  276.                     if(r.code === 0){
  277.                         alert('拒绝成功')
  278.                         vm.dialogFormVisible = false
  279.                         vm.loadData(vm.currentPage=1, vm.pagesize);//刷新后页面回到首页
  280.                     }else{
  281.                         alert(r.msg);
  282.                     }
  283.                 }
  284.             });
  285.         },
  287.         //单行删除
  288.         handleDelete: function(index, row) {
  289.             $.ajax({
  290.                 type: "POST",
  291.                 url: baseURL + "userTeam/userteam/delete",
  292.                 contentType: "application/json",
  293.                 data: JSON.stringify(row),
  294.                 success: function(r){
  295.                     if(r.code === 0){
  296.                         alert('删除成功')
  297.                         vm.loadData(vm.currentPage, vm.pagesize);//刷新后页面在当前页
  298.                         //vm.loadData(vm.currentPage=1, vm.pagesize);刷新后页面回到首页
  299.                     }else{
  300.                         alert(r.msg);
  301.                     }
  302.                 }
  303.             });
  304.         },
  305.         //搜索
  306.         search: function(){
  307.             vm.loadData(vm.currentPage, vm.pagesize);
  308.         },
  309.         //重置
  310.         rest() {
  311.             vm.q.teamName=''
  312.             vm.q.mobile=''
  313.             vm.q.sourceType=''
  314.             vm.q.auditStatus=''
  315.             vm.loadData(vm.currentPage, vm.pagesize);
  316.         },
  320.         add() {
  322.         },
  323.         //每页显示数据量变更
  324.         handleSizeChange: function(val) {
  325.             vm.pagesize = val;
  326.             vm.loadData(vm.currentPage, vm.pagesize);
  327.         },
  328.         //页码变更
  329.         handleCurrentChange: function(val) {
  330.             vm.currentPage = val;
  331.             vm.loadData(vm.currentPage, vm.pagesize);
  332.         },
  333.         //together：一企推，agent：代理点二级分销，wechat：微信朋友圈推广, second:二级分销(不审)
  334.         sourceTypeFormatter(val) {
  335.             if(val.sourceType == 'together')
  336.             {return "一企推"}
  337.             else if (val.sourceType == 'agent')
  338.             {return "代理点二级分销"}
  339.             else if (val.sourceType == 'wechat')
  340.             {return "微信朋友圈推广"}
  341.             else if (val.sourceType == 'second')
  342.             {return "二级分销(不审)"}
  343.             else
  344.             {return ""}
  345.         },
  346.         //审核状态 0:待审核 1:审核通过 2:已拒绝
  347.         auditStatusFormatter(val) {
  348.             if(val.auditStatus == 0)
  349.             {return "待审核"}
  350.             else if (val.auditStatus == 1)
  351.             {return "审核通过"}
  352.             else if (val.auditStatus == 2)
  353.             {return "已拒绝"}
  354.             else
  355.             {return ""}
  356.         },
  357.     }
  358. });
  362. @Override
  363.     public PageUtils list(Map<String, Object> params) {
  364.         Page<UserTeamVo> page = new Page<>();
  365.         page.setCurrent(Integer.valueOf(params.get("page").toString()));
  366.         page.setSize(Integer.valueOf(params.get("limit").toString()));
  367.         List<UserTeamVo> list = this.baseMapper.list(page, params);
  368.         page.setRecords(list);
  369.         return new PageUtils(page);
  370.     }

发表评论

表情：
评论列表 （有 0 条评论，548人围观）

还没有评论，来说两句吧...

相关阅读