1. 程式人生 > >elementui-table分頁+增刪改查例項

elementui-table分頁+增刪改查例項

<!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);
    }