dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterMaintenanceDataInformations.vue

<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyProject">
        <div style="height: 60px;line-height: 60px;margin-left: 30px;margin-right: 30px; ">
            <span>{{$t('common.all')}}（10）</span>
            <span>{{$t('common.ToAudit')}}（2）</span>
            <span>{{$t('common.notApproved')}}（0）</span>
             <span>{{$t('common.Approved')}}（8）</span>
            <el-button type="primary" style="float: right;margin-right: 90px;margin-top: 10px;" @click="toView('addMaintenanceDataInformations','')">{{$t('common.Add')}}</el-button>
        </div>
        <div style="margin-left: 30px;">
            <el-table
                :data="tableData"
                stripe
                style="width: 100%" >
                <template slot="empty">
                    {{$t('common.UserNoData')}}
                </template>
                <el-table-column fixed prop="date" :label="$t('common.indicatorName')" width="210" > </el-table-column>
                <el-table-column prop="name" :label="$t('common.indicatorValue')" width="120"> </el-table-column>
                <el-table-column prop="address" :label="$t('common.unit')" width="120"> </el-table-column>
                <el-table-column prop="address1" :label="$t('common.Level1Indicator')" width="120"></el-table-column>
                <el-table-column prop="address2" :label="$t('common.region')" width="120"> </el-table-column>
                <el-table-column prop="address3" :label="$t('common.ReviewState')" width="120"></el-table-column>
                <el-table-column prop="address4" :label="$t('common.ReleaseState')" width="120"> </el-table-column>
                <el-table-column fixed="right" prop="address5" :label="$t('common.Option')" width="210">
                    <template slot-scope="scope">
                        <el-button
                          @click.native.prevent="change(scope.$index, tableData)"
                          type="text"
                          size="small">
                          {{$t('common.Edit')}}
                        </el-button>
                        <el-button
                          @click.native.prevent="release(scope.$index, tableData)"
                          type="text"
                          size="small">
                           {{$t('common.release')}}
                        </el-button>
                        <el-button
                          @click.native.prevent="withdraw(scope.$index, tableData)"
                          type="text"
                          size="small">
                          {{$t('common.recall')}}
                        </el-button>
                        <el-button
                          @click.native.prevent="deleteRow(scope.$index, tableData)"
                          type="text"
                          size="small">
                           {{$t('common.Delete')}}
                        </el-button>
                      </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="width: 100%;text-align: center;">
            <el-pagination
                style="margin-top: 50px;height: 80px;"
                background
                layout="prev, pager, next"
                :total="1000"  @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
                </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'userCenterMaintenanceDataInformations',
        data () {
            return {
                formInline: {
                    user: '',
                    region: ''
                },
                tableData: [{
                    date: '通信基站分布式光伏能源项目',
                    name: '清洁能源',
                    address: '中国',
                    address1: '项目初创期',
                    address2: '审核未通过',
                    address3: '已发布',
                    address4: '2000-5-15 15：30',
                    address5: '上海市普陀区金沙江路 1518 弄',
                    }, {
                    date: '通信基站分布式光伏能源项目',
                    name: '清洁能源',
                    address: '中国',
                    address1: '项目初创期',
                    address2: '审核未通过',
                    address3: '已发布',
                    address4: '2000-5-15 15：30',
                    address5: '上海市普陀区金沙江路 1518 弄',
                    }, {
                    date: '通信基站分布式光伏能源项目',
                    name: '清洁能源',
                    address: '中国',
                    address1: '项目初创期',
                    address2: '审核未通过',
                    address3: '已发布',
                    address4: '2000-5-15 15：30',
                    address5: '上海市普陀区金沙江路 1518 弄',
                    }, {
                    date: '通信基站分布式光伏能源项目',
                    name: '清洁能源',
                    address: '中国',
                    address1: '项目初创期',
                    address2: '审核未通过',
                    address3: '已发布',
                    address4: '2000-5-15 15：30',
                    address5: '上海市普陀区金沙江路 1518 弄',
                },{
                    date: '通信基站分布式光伏能源项目',
                    name: '清洁能源',
                    address: '中国',
                    address1: '项目初创期',
                    address2: '审核未通过',
                    address3: '已发布',
                    address4: '2000-5-15 15：30',
                    address5: '上海市普陀区金沙江路 1518 弄',
                    }, {
                    date: '通信基站分布式光伏能源项目',
                    name: '清洁能源',
                    address: '中国',
                    address1: '项目初创期',
                    address2: '审核未通过',
                    address3: '已发布',
                    address4: '2000-5-15 15：30',
                    address5: '上海市普陀区金沙江路 1518 弄',
                    }, {
                    date: '通信基站分布式光伏能源项目',
                    name: '清洁能源',
                    address: '中国',
                    address1: '项目初创期',
                    address2: '审核未通过',
                    address3: '已发布',
                    address4: '2000-5-15 15：30',
                    address5: '上海市普陀区金沙江路 1518 弄',
                    }, {
                    date: '通信基站分布式光伏能源项目',
                    name: '清洁能源',
                    address: '中国',
                    address1: '项目初创期',
                    address2: '审核未通过',
                    address3: '已发布',
                    address4: '2000-5-15 15：30',
                    address5: '上海市普陀区金沙江路 1518 弄',
                }, {
                    date: '通信基站分布式光伏能源项目',
                    name: '清洁能源',
                    address: '中国',
                    address1: '项目初创期',
                    address2: '审核未通过',
                    address3: '已发布',
                    address4: '2000-5-15 15：30',
                    address5: '上海市普陀区金沙江路 1518 弄',
                    }, {
                    date: '通信基站分布式光伏能源项目',
                    name: '清洁能源',
                    address: '中国',
                    address1: '项目初创期',
                    address2: '审核未通过',
                    address3: '已发布',
                    address4: '2000-5-15 15：30',
                    address5: '上海市普陀区金沙江路 1518 弄',
                }]
            }
        },
        methods:{
            toView(router,json){
                this.$router.push({name:router,params:json})
            },
            // 发布
            release(index, rows) {
                console.log(index, rows)
            },
            // 编辑
            change(index, rows) {
                console.log(index, rows)
            },
            // 删除
            deleteRow(index, rows) {
                console.log(index, rows)
            },
            // 撤回
            withdraw(index,rows) {
                console.log(index, rows)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>
<style scoped>

    .el-input {
        width: 200px ;
    }
    .el-form-item__content,.el-select {
        width: 200px !important;
    }
    .el-table thead {
        background: #eee;
    }
    .userCenterMyProject >>> .el-pagination .el-pager li,
    .userCenterMyProject >>> .el-pagination .btn-next,
    .userCenterMyProject >>> .el-pagination .btn-prev{
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    .userCenterMyProject >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #0050d8;
    }
    
</style>