<template>
<div class="flexOne">
<div class="query-box" style="border-bottom: none;">
<ul>
<li>
<span><em>公司</em><el-select filterable @change='getUser' v-model='msg.RB_BranchId'>
<el-option label='不限' value='-1'></el-option>
<el-option v-for='item in companyList' :label='item.BName' :value='item.Id' :key='item.Id'></el-option>
</el-select>
</span>
</li>
<li>
<span><em>签到人</em><el-select filterable v-model='msg.EmployeeId'>
<el-option label='不限' value='-1'></el-option>
<el-option v-for='item in userList' :label='item.name' :value='item.empId' :key='item.empId'></el-option>
</el-select>
</span>
</li>
<li><span><em>签到时间</em><el-date-picker v-model='msg.StartTime' class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
-
<el-date-picker v-model='msg.EndTime' class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
</span>
</li>
<li>
<input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="resetPageIndex(),getList()" />
</li>
</ul>
</div>
<div style="width: 100%; overflow: auto;">
<table style="min-width: 1400px;" class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>公司</th>
<th>{{$t('system.query_name')}}</th>
<th>签到日期</th>
<th>第一次签到时间</th>
<th width="400">第一次签到地点</th>
<th>最后一次签到时间</th>
<th width="300">最后一次签到地点</th>
<th width="150">{{$t('system.table_operation')}}</th>
</tr>
<tr v-for='item in list' v-loading='loading'>
<td>{{item.BName}}</td>
<td>{{item.EmName}}</td>
<td>{{item.SignTime}}</td>
<td>{{item.StartTime}}</td>
<td>{{item.StartAddress}}</td>
<td>{{item.EndTime}}</td>
<td>{{item.EndAddress}}</td>
<td>
<el-tooltip class="item" effect="dark" content="详情" placement="top">
<el-button type="primary" icon="el-icon-tickets" circle @click='getDetail(item.EmployeeId,item.SignTime)'></el-button>
</el-tooltip>
</td>
</tr>
</table>
</div>
<el-pagination background
@current-change="handleCurrentChange"
:current-page.sync="currentPage"
layout="total,prev, pager, next, jumper"
:page-size='msg.pageSize'
:total='total'>
</el-pagination>
<el-dialog custom-class='w500' :title="dialogTitle" :visible.sync="outerVisible" center >
<div v-for="(item,index) in layerItem" class="outWorkItem" >
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">第{{index+1}}次签到</td>
</tr>
<tr>
<td colspan="2"><i class="el-icon-time"></i>{{item.SignInTime}}</td>
</tr>
<tr>
<td colspan="2"><i class="iconfont icon-tubiao"></i>{{item.Address}}</td>
</tr>
<tr>
<td width="45">图片：</td>
<td><img v-for="img in toArr(item.Image)" :src='img' @click="getPic(toArr(item.Image))"></td>
</tr>
<tr>
<td>备注：</td>
<td>{{item.Remarks}}</td>
</tr>
</table>
</div>
<div slot="footer" class="dialog-footer">
<button class="hollowFixedBtn" @click="outerVisible = false">取 消</button>
</div>
</el-dialog>
<div :class="{viewBigPicLayer:true,viewBigPicLayerDisplayNone:dspNone}" @click="colseLayer">
<i @click="colseLayer" class="el-icon-circle-close-outline clolseViewBigPicLayer" ></i>
<el-carousel height="600px" :interval="5000" trigger="click">
<el-carousel-item v-for="(item,index) in picObj" :key="index">
<img :src="item" />
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<script>
export default {
data() {
return {
picObj:[],
dspNone:true,
loading:true,
outerVisible:false,
dialogTitle:"",
total:0,
currentPage: 1,
//请求数据
msg:{
RB_BranchId:'-1',
EmployeeId:'-1',
StartTime:'',
EndTime:'',
pageIndex:1,
pageSize:15,
},
getCompanyMsg:{
RB_Group_Id:'0',
Status:'0',
},
getUserMsg:{
RB_Branch_id:'-1',
},
getDetailMsg:{
pageIndex:1,
pageSize:999,
RB_BranchId:'-1',
EmployeeId:'0',
StartTime:'',
EndTime:'',
orderBy:'1',
},
//返回数据
list:[],
companyList:[],
userList:[],
layerItem:[],
}
},
methods: {
colseLayer(){
this.dspNone=true
},
getPic(obj){
this.picObj=obj
this.dspNone=false;
},
toArr(val){
let arr=[]
if(val!="[]")
{
val.substring(1,val.length-1).split(',').forEach(item=>{
arr.push(item.substring(1,item.length-1))
});
}
return arr;
},
getDetail(emId,SignTime){
this.outerVisible=true;
this.dialogTitle='外勤详情'
this.getDetailMsg.EmployeeId=emId
this.getDetailMsg.StartTime=SignTime
this.getDetailMsg.EndTime=SignTime
this.apipost('app_user_GetSignInPageList',this.getDetailMsg,res=>{
if(res.data.resultCode==1){
this.layerItem=res.data.data.pageData;
}else{}
},err=>{})
},
getCompany(){
this.apipost('admin_get_BranchGetList',this.getCompanyMsg,res=>{
if(res.data.resultCode==1){
this.companyList=res.data.data;
}else{}
},err=>{})
},
getUser(){
this.msg.EmployeeId='-1'
this.getUserMsg.RB_Branch_id=this.msg.RB_BranchId;
this.apipost('app_get_company_employee',this.getUserMsg,res=>{
if(res.data.resultCode==1){
this.userList=res.data.data;
}else{}
},err=>{})
},
getList(){
this.loading=true;
this.apipost('app_user_GetSignInManagementPageList',this.msg,res=>{
if(res.data.resultCode==1){
this.list=res.data.data.pageData;
this.total=res.data.data.count;
this.loading=false
}else{}
},err=>{})
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
resetPageIndex() {
this.msg.pageIndex = 1;
this.currentPage = 1
},
},
mounted() {
let userInfo=this.getLocalStorage();
this.getUserMsg.RB_Group_id=this.getCompanyMsg.RB_Group_Id=userInfo.RB_Group_id; //集团ID
this.getCompany()
this.getUser()
this.getList()
}
}
</script>
<style>
.outWorkItem{border-bottom:1px solid #D3D3D3; padding: 10px 0;}
.outWorkItem p {line-height: 24px;}
.outWorkItem table i{color: #bbb; margin-right:5px;}
.outWorkItem table img{width: 50px; height: 50px; margin: 10px 10px 0 0; border-radius: 4px;}
.outWorkItem table tr td{text-align: left;}
</style>