|
|
@@ -0,0 +1,355 @@
|
|
|
+<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>
|
