dealer_front/src/components/multimedia/zpwhitepaperDetail.vue

<!--suppress ALL -->
<template>
    <div class="">
        <div class="filters">
            <el-button type="primary" @click="create()">创建</el-button>
            <div class="num"> 共{{totalNumber}}标签</div>
        </div>

        <el-table :data="rows"
                  ref="table"
                  height="600"
                  border
                  style="width: 100%"
                  element-loading-text="拼命加载中"
                  stripe
                  v-loading="loading">
            <el-table-column
                    label="序号"
                    type="index"
                    width="70"
                    align="center">
            </el-table-column>
                        
                            <el-table-column
                        prop="paTitle"
                        label="白皮书名称"
                        align="center">
                </el-table-column>
                            <el-table-column
                        prop="paLink"
                        label="下载链接"
                        align="center">
                </el-table-column>
                       
            
                            <el-table-column
                        prop="createTime"
                        label="创建时间"
                        align="center">
                </el-table-column>
                           
                           
                        <el-table-column label="操作 " width="250px" fixed="right"   align="center">
                <template slot-scope="scope">
                    <el-button size="small" @click="editRow(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="deleteRow(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-wrapper" v-show="!loading">
            <el-pagination layout="sizes, prev, pager, next" :page-size="pageSize" :total="totalNumber"
                           :current-page="currentPage" @current-change="pageChange" @size-change="sizeChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ZhaoPin',
        created(){
            this.getRows();
        } ,
        data () {
            return {
                loading:false,
                rows: [],
                totalNumber: 0,
                totalPage: 10,
                currentPage: 1,
                pageSize: 20,
            }
        },
        filters:{
            formatDate(date){
                date=new Date(date);
                var year=date.getFullYear();
                var month=date.getMonth()+1;
                var day=date.getDate();
                if(month<10){
                    month='0'+month;
                }
                return year+'-'+month+'-'+day;
            }
        },
        methods:{
            getRows(){

                this.$http.get(this.$store.state.httpApi + 'zhaopin/zpwhitepaper/page?currentPage='+this.currentPage+'&pageNumber='+this.pageSize).then(response =>{

                if(response.status == 200){
                this.rows=response.data.data.pp;
                this.totalNumber = response.data.data.page.totalNumber;
                this.$message.success('数据加载成功');
                }else{
                this.$message.success('服务器连接异常');
                }
                },response => {
                this.$message.success('服务器连接异常');
                })
            },

            deleteRow(data){
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var httpApi=this.$store.state.httpApi;
                this.$http.post(this.$store.state.httpApi + 'zhaopin/zpwhitepaper/del?id='+data.id).then(response =>{
                if(response.status == 200){
                console.log(response)
                if(response.data.success){
                this.$message.success('删除成功');
                this.getRows();
                }else{
                this.$message.success('删除失败');
                }
                }else{
                this.$message.success('服务器连接异常');
                }
                },response => {
                this.$message.success('服务器连接异常');
                })
            }).catch(() => {
                    this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
            },
            editRow(data){
                this.$router.push({path:'/home/whitepapers',query:{id:data.id}})
            },
            pageChange: function (page) {
                this.currentPage = page;
                this.getRows();
            },
            sizeChange: function (size) {
                this.pageSize = size;
                this.getRows();
            },
            create(){
                this.$router.push({path:'/home/whitepapers'})
            },
        },
    }
</script>