oa-system/src/components/child/Globalindex.vue

<template>
    <div>
        <div class="num-ul">
            <div class="num-li">
                <div class="num-tlite">
                    <div>2442</div>
                    <p>今年出团数量</p>
                    <p>4% Higher than last week</p>
                </div>
                <div class="num-icon">
                    <i class="iconfont icon-renminbi"></i>
                </div>
            </div>
            <div class="num-li">
                <div class="num-tlite">
                    <div>2442</div>
                    <p>报批管理</p>
                    <p>1% Higher than last week</p>
                </div>
                <div class="num-icon">
                    <i class="iconfont icon-fuwuqi"></i>
                </div>
            </div>
            <div class="num-li">
                <div class="num-tlite">
                    <div>2442</div>
                    <p>团组资料库</p>
                    <p>3% Higher than last week</p>
                </div>
                <div class="num-icon">
                    <i class="iconfont icon-HCplanshuliang"></i>
                </div>
            </div>
            <div class="num-li">
                <div class="num-tlite">
                    <div>2442</div>
                    <p>费用报账</p>
                    <p>5% Higher than last week</p>
                </div>
                <div class="num-icon">
                    <i class="iconfont icon-tongjitu"></i>
                </div>
            </div>
        </div>
        <div class="global-list">
            <div class="global-title">
                <div>团组列表</div>
                <div class="global-box">
                    <el-input
                        placeholder="请输入内容"
                        v-model="input"
                        clearable>
                    </el-input>
                    <el-button type="primary"><i class="icon-sousuo"></i></el-button>
                </div>
            </div>
            <template>
                <el-table
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                border
                style="width: 100%">
                    <el-table-column
                        prop="num"
                        label="序 号"
                        width="60">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        width="100"
                        label="员工号">
                    </el-table-column>
                    <el-table-column
                        width="100" 
                        prop="name"
                        label="姓 名">
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="分属公司"
                        width="220">
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="职 位"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="分机号"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="pnum"
                        label="手机号"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="pnum"
                        label="紧急联络电话"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="date"
                        label="电子邮箱">
                    </el-table-column>
                    <el-table-column width="80" label="管控">
                        <el-button type="primary" size="mini">
                            <i class="icon-xianchangguankong"></i>
                        </el-button>
                    </el-table-column>
                </el-table>
            </template>
            <div class="block">
                <el-pagination align='center' 
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange"
                    :current-page="currentPage" 
                    :page-sizes="[10,15,20]" 
                    :page-size="pageSize" 
                    layout="total, sizes, prev, pager, next" 
                    :total="tableData.length">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            tableData: [
                {
                    num:'1',
                    date: '2016-05-03',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'2',
                    date: '2016-05-02',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'3',
                    date: '2016-05-04',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'4',
                    date: '2016-05-01',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'5',
                    date: '2016-05-08',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'6',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'7',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'8',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'9',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'10',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'11',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'12',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'13',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'14',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'15',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'16',
                    date: '2016-05-06',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, 
                {
                    num:'17',
                    date: '2016-05-07',
                    name: '王小虎',
                    pnum:'15896358421',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            currentPage: 1, // 当前页码
            pageSize: 10 ,// 每页的数据条数
            input:'',
        }
    },
    methods:{
         //每页条数改变时触发 选择一页显示多少行
         handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
        }
    }
}
</script>
<style>
    .num-ul{
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .num-li{
        width: 21%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        padding: 25px 20px;
    }
    .num-li:nth-child(1){
        background-color: #6bafbd !important;
    }
    .num-li:nth-child(2){
        background-color: #fc8675 !important;
    }
    .num-li:nth-child(3){
        background-color: #f3ce85 !important;
    }
    .num-li:nth-child(4){
        background-color: #65cea7 !important;
    }
    .num-icon i{
        width: 70px;
        height: 90px;
        display: inline-block;
        font-size: 70px;
        display: flex;
        align-items: center;
        color: #fff8;
    }
    .num-tlite div{
        font-size: 30px;
        color: #fff;
    }
    .num-tlite p:nth-child(2){
        font-size: 14px;
        margin: 5px  0px;
        color: #fff;
    }
    .num-tlite p:nth-child(3){
        font-size: 12px;
        color: #fff;
    }
    .global-list{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
    }
    .global-title{
        display: flex;
        font-size: 17px;
        font-weight:600 ;
        color: #555;
        margin-top: 8px;
        margin-bottom: 2px;
        justify-content: space-between;
        align-items: center;
    }
    .global-box{
        display: flex;
    }
    .global-box>button{
        margin-left: 10px;
        padding: 8px 20px;
    }
</style>