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

其他 2018-12-07 01:17:04 阅读次数: 0 
<!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);
    }

猜你喜欢

转载自blog.csdn.net/qq_39940205/article/details/84585348
今日推荐
周排行
1063. Set Similarity (25)
android 弹出对话框以后 屏幕不变暗
炸锅了！Google称2029年人类开始实现永生不死！疾病，衰老，痛苦将彻底消失！？
面向对象分析
批量分发公钥脚本
在worker中使用offscreenCanvas
spring源码解析bean定义五ContextNamespaceHandler一
C++回顾——函数重载与默认参数
基于common-fileupload实现文件上传
C++学习（十七）—模板（一）
每日归档
更多
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)
2024-07-12(0)
2024-07-11(0)
2024-07-10(0)
2024-07-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022