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

<template>
    <div>
        <div class="communal-list">
            <div class="communal-title">
                <div>员工列表</div>
                <div class="communal-box">
                    <el-input
                        @input="Inquireclick()"
                        placeholder="请输入内容"
                        v-model="input"
                        clearable>
                    </el-input>
                    <el-button @click="Inquireclick()" type="primary"><i class="icon-sousuo"></i></el-button>
                </div>
            </div>
            <template>
                <el-table
                :data="tableDatas.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                border
                style="width: 100%">
                    <el-table-column
                        prop="num"
                        label="序 号"
                        width="55">
                        <template slot-scope="scope">
                            {{(currentPage - 1) * pageSize + scope.$index + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="number"
                        width="100"
                        label="员工号">
                    </el-table-column>
                    <el-table-column
                        width="100" 
                        prop="cnName"
                        label="姓 名">
                    </el-table-column>
                    <el-table-column
                        prop="companyName"
                        label="分属公司"
                        width="220">
                    </el-table-column>
                    <el-table-column
                        prop="jobName"
                        label="职 位"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="ext"
                        label="分机号"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="手机号"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="urgentPhone"
                        label="紧急联络电话"
                        width="200">
                    </el-table-column>
                    <el-table-column
                        prop="email"
                        label="电子邮箱">
                    </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="tableDatas.length">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { co, el } from '@fullcalendar/core/internal-common';
export default {
    data() {
        return {
            tableDatas:[],
            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: 15 ,// 每页的数据条数
            input:'',
            token:''
        }
    },
    methods:{
         //每页条数改变时触发 选择一页显示多少行
         handleSizeChange(val) {
            this.currentPage = 1;
            this.pageSize = val;
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        Inquireclick(){
            var newarr=[];
            if(this.input==""){
                newarr=this.tableData;
            }else{
                for(var i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].number.indexOf(this.input)!=-1){
                        newarr.push(this.tableData[i]);
                    }
                    else if(this.tableData[i].cnName.indexOf(this.input)!=-1){
                        newarr.push(this.tableData[i]);
                    }
                    else if(this.tableData[i].jobName.indexOf(this.input)!=-1){
                        newarr.push(this.tableData[i]);
                    }
                    else if(this.tableData[i].companyName.indexOf(this.input)!=-1){
                        newarr.push(this.tableData[i]);
                    }
                    else if(this.tableData[i].ext.indexOf(this.input)!=-1){
                        newarr.push(this.tableData[i]);
                    }
                    else if(this.tableData[i].phone.indexOf(this.input)!=-1){
                        newarr.push(this.tableData[i]);
                    }
                    else if(this.tableData[i].urgentPhone.indexOf(this.input)!=-1){
                        newarr.push(this.tableData[i]);
                    }
                    else if(this.tableData[i].email.indexOf(this.input)!=-1){
                        newarr.push(this.tableData[i]);
                    }
                }
            }
            this.tableDatas=newarr;
        },
        Getemployees(){
            var url="/api/System/GetUserList"
            var that=this
            this.$axios({
                method: 'post',
                url:url,
                headers:{
                    Authorization:'Bearer '+this.token
                },
                data:{
                    portType: 1,
                }
            }).then(function(res){
                console.log(res)
                if(res.data.code==200){
                    that.tableData=res.data.data
                    that.tableData.forEach(item=>{
                        if(item.cnName==null){
                            item.cnName = ''
                        } 
                        if(item.companyId==null){
                            item.companyId = ''
                        } 
                        if(item.companyName==null){
                            item.companyName = ''
                        } 
                        if(item.depId==null){
                            item.depId = ''
                        } 
                        if(item.depName==null){
                            item.depName = ''
                        } 
                        if(item.email==null){
                            item.email = ''
                        } 
                        if(item.ext==null){
                            item.ext = ''
                        } 
                        if(item.id==null){
                            item.id = ''
                        } 
                        if(item.jobName==null){
                            item.jobName = ''
                        } 
                        if(item.jobPostId==null){
                            item.jobPostId = ''
                        } 
                        if(item.number==null){
                            item.number = ''
                        } 
                        if(item.phone==null){
                            item.phone = ''
                        } 
                        if(item.urgentPhone==null){
                            item.urgentPhone = ''
                        }
                    })
                    that.tableDatas=that.tableData;
                    console.log(that.tableDatas)
                }
            })
        }
    },
    mounted(){
        this.token=JSON.parse(localStorage.getItem('userinif')).token;
        console.log(this.token)
        this.Getemployees();
    }
}
</script>
<style>
    .communal-list{
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 0 5px #0005;
        border-radius: 10px;
    }
    .communal-title{
        display: flex;
        font-size: 17px;
        font-weight:600 ;
        color: #555;
        margin-top: 8px;
        margin-bottom: 2px;
        justify-content: space-between;
        align-items: center;
    }
    .communal-box{
        display: flex;
    }
    .communal-box>button{
        margin-left: 10px;
        padding: 8px 20px;
    }
</style>